strapi-plugin-payone-provider 1.0.1 → 1.1.2

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 (23) hide show
  1. package/admin/src/pages/App/components/TransactionHistoryItem.js +374 -374
  2. package/admin/src/pages/App/components/icons/BankIcon.js +10 -10
  3. package/admin/src/pages/App/components/icons/ChevronDownIcon.js +9 -9
  4. package/admin/src/pages/App/components/icons/ChevronUpIcon.js +9 -9
  5. package/admin/src/pages/App/components/icons/CreditCardIcon.js +9 -9
  6. package/admin/src/pages/App/components/icons/ErrorIcon.js +10 -10
  7. package/admin/src/pages/App/components/icons/InfoIcon.js +9 -9
  8. package/admin/src/pages/App/components/icons/PaymentIcon.js +10 -10
  9. package/admin/src/pages/App/components/icons/PendingIcon.js +9 -9
  10. package/admin/src/pages/App/components/icons/PersonIcon.js +9 -9
  11. package/admin/src/pages/App/components/icons/SuccessIcon.js +9 -9
  12. package/admin/src/pages/App/components/icons/WalletIcon.js +9 -9
  13. package/admin/src/pages/App/components/icons/index.js +11 -11
  14. package/admin/src/pages/App/index.js +4 -5
  15. package/admin/src/pages/utils/formatTransactionData.js +15 -15
  16. package/admin/src/pluginId.js +6 -2
  17. package/package.json +15 -9
  18. package/server/bootstrap.js +1 -1
  19. package/server/controllers/payone.js +9 -9
  20. package/server/policies/index.js +2 -2
  21. package/server/policies/{isAuth.js → is-auth.js} +1 -1
  22. package/server/routes/index.js +6 -6
  23. package/server/services/payone.js +4 -4
package/admin/src/pages/App/components/TransactionHistoryItem.js CHANGED
@@ -1,374 +1,374 @@
1
- import React, { useState } from 'react';
2
- import {
3
- Box,
4
- Card,
5
- CardBody,
6
- Flex,
7
- Stack,
8
- Typography,
9
- Badge,
10
- Button,
11
- } from '@strapi/design-system';
12
- import {
13
- ChevronDownIcon,
14
- ChevronUpIcon,
15
- } from './icons';
16
- const TransactionHistoryItem = ({ transaction }) => {
17
- const [isExpanded, setIsExpanded] = useState(false);
18
-
19
-
20
- const getStatusColor = (status) => {
21
- switch (status) {
22
- case 'APPROVED':
23
- return 'success';
24
- case 'ERROR':
25
- return 'danger';
26
- case 'PENDING':
27
- return 'warning';
28
- default:
29
- return 'neutral';
30
- }
31
- };
32
-
33
-
34
- const getPaymentMethodName = (clearingtype, wallettype) => {
35
- switch (clearingtype) {
36
- case 'cc':
37
- return 'Credit Card';
38
- case 'sb':
39
- return 'Online Banking';
40
- case 'wlt':
41
- return wallettype === 'PPE' ? 'PayPal' : 'Wallet';
42
- case 'elv':
43
- return 'Direct Debit (SEPA)';
44
- default:
45
- return 'Unknown';
46
- }
47
- };
48
-
49
- const formatAmount = (amount, currency) => {
50
- return `${(amount / 100).toFixed(2)} ${currency}`;
51
- };
52
-
53
- const formatDate = (dateString) => {
54
- return new Date(dateString).toLocaleString('de-DE', {
55
- year: 'numeric',
56
- month: '2-digit',
57
- day: '2-digit',
58
- hour: '2-digit',
59
- minute: '2-digit',
60
- });
61
- };
62
-
63
- const getCardTypeName = (cardtype) => {
64
- switch (cardtype) {
65
- case 'V':
66
- return 'Visa';
67
- case 'M':
68
- return 'Mastercard';
69
- case 'A':
70
- return 'American Express';
71
- default:
72
- return cardtype || 'Unknown';
73
- }
74
- };
75
-
76
- return (
77
- <Card
78
- background="neutral0"
79
- hasRadius
80
- shadow="filterShadow"
81
- style={{
82
- marginBottom: '16px',
83
- }}
84
- >
85
- <CardBody padding={6} style={{ display: "flex", flexDirection: 'column', gap: '6px' }}>
86
- {/* Main Values in Column Format */}
87
- <Stack spacing={3} marginBottom={4}>
88
- {/* Reference */}
89
- <Flex alignItems="center" gap={2}>
90
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
91
- Reference:
92
- </Typography>
93
- <Typography variant="pi" textColor="neutral800">
94
- {transaction.reference}
95
- </Typography>
96
- </Flex>
97
- {/* Date */}
98
- <Flex alignItems="center" gap={2}>
99
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
100
- Date:
101
- </Typography>
102
- <Typography variant="pi" textColor="neutral800">
103
- {formatDate(transaction.timestamp)}
104
- </Typography>
105
- </Flex>
106
-
107
- {/* Payment Method */}
108
- <Flex alignItems="center" gap={2}>
109
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
110
- Method:
111
- </Typography>
112
- <Typography variant="pi" textColor="neutral800">
113
- {getPaymentMethodName(transaction.raw_request?.clearingtype, transaction.raw_request?.wallettype)}
114
- </Typography>
115
- {transaction.txid && (
116
- <>
117
- <Typography variant="pi" textColor="neutral500">•</Typography>
118
- <Typography variant="pi" textColor="neutral600">
119
- TX: {transaction.txid}
120
- </Typography>
121
- </>
122
- )}
123
- </Flex>
124
-
125
- {/* Amount */}
126
- <Flex alignItems="center" gap={2}>
127
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
128
- Amount:
129
- </Typography>
130
- <Typography variant="pi" fontWeight="bold" textColor="primary600" fontSize={2}>
131
- {formatAmount(transaction.amount, transaction.currency)}
132
- </Typography>
133
- <Badge
134
- backgroundColor={getStatusColor(transaction.status)}
135
- textColor="neutral0"
136
- >
137
- {transaction.status}
138
- </Badge>
139
- </Flex>
140
- </Stack>
141
-
142
-
143
-
144
- {/* Expand/Collapse Button */}
145
- <Flex justifyContent="center">
146
- <Button
147
- size="S"
148
- onClick={() => setIsExpanded(!isExpanded)}
149
- startIcon={isExpanded ? <ChevronUpIcon size={16} /> : <ChevronDownIcon size={16} />}
150
- >
151
- {isExpanded ? 'Hide Details' : 'Show Details'}
152
- </Button>
153
- </Flex>
154
-
155
- {/* Expanded Details */}
156
- {isExpanded && (
157
- <Box marginTop={4}>
158
- <Stack spacing={4}>
159
- {/* Error Message */}
160
- {transaction.status === 'ERROR' && (
161
- <Box
162
- marginBottom={4}
163
- padding={3}
164
- background="danger100"
165
- hasRadius
166
- style={{
167
- border: '1px solid',
168
- borderColor: 'var(--strapi-colors-danger200)',
169
- }}
170
- >
171
- <Typography variant="pi" fontWeight="bold" textColor="danger600" marginBottom={1}>
172
- Error: {transaction.error_message}
173
- </Typography>
174
- {transaction.customer_message && (
175
- <Typography variant="pi" textColor="danger600">
176
- Customer Message: {transaction.customer_message}
177
- </Typography>
178
- )}
179
- </Box>
180
- )}
181
- {/* Customer Information */}
182
- <Box>
183
- <Flex alignItems="center" gap={2} marginBottom={3}>
184
- <Typography variant="pi" fontWeight="bold" textColor="neutral800">
185
- Customer Information
186
- </Typography>
187
- </Flex>
188
- <Box paddingLeft={4}>
189
- <Stack spacing={2}>
190
- <Flex justifyContent="space-between" gap={3}>
191
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
192
- Name:
193
- </Typography>
194
- <Typography variant="pi" textColor="neutral800">
195
- {transaction.raw_request?.firstname} {transaction.raw_request?.lastname}
196
- </Typography>
197
- </Flex>
198
- <Flex justifyContent="space-between" gap={3}>
199
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
200
- Email:
201
- </Typography>
202
- <Typography variant="pi" textColor="neutral800">
203
- {transaction.raw_request?.email}
204
- </Typography>
205
- </Flex>
206
- <Flex justifyContent="space-between" gap={3}>
207
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
208
- Phone:
209
- </Typography>
210
- <Typography variant="pi" textColor="neutral800">
211
- {transaction.raw_request?.telephonenumber}
212
- </Typography>
213
- </Flex>
214
- <Flex justifyContent="space-between" gap={3}>
215
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
216
- Address:
217
- </Typography>
218
- <Typography variant="pi" textColor="neutral800">
219
- {transaction.raw_request?.street}, {transaction.raw_request?.zip} {transaction.raw_request?.city}
220
- </Typography>
221
- </Flex>
222
- <Flex justifyContent="space-between" gap={3}>
223
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
224
- Country:
225
- </Typography>
226
- <Typography variant="pi" textColor="neutral800">
227
- {transaction.raw_request?.country}
228
- </Typography>
229
- </Flex>
230
- </Stack>
231
- </Box>
232
- </Box>
233
-
234
- {/* Payment Method Details */}
235
- <Box>
236
- <Flex alignItems="center" gap={2} marginBottom={3}>
237
- <Typography variant="pi" fontWeight="bold" textColor="neutral800">
238
- Payment Method Details
239
- </Typography>
240
- </Flex>
241
- <Box paddingLeft={4}>
242
- <Stack spacing={2}>
243
- <Flex justifyContent="space-between" gap={3}>
244
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
245
- Type:
246
- </Typography>
247
- <Typography variant="pi" textColor="neutral800">
248
- {getPaymentMethodName(transaction.raw_request?.clearingtype, transaction.raw_request?.wallettype)}
249
- </Typography>
250
- </Flex>
251
-
252
- {transaction.raw_request?.clearingtype === 'cc' && (
253
- <>
254
- <Flex justifyContent="space-between" gap={3}>
255
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
256
- Card Type:
257
- </Typography>
258
- <Typography variant="pi" textColor="neutral800">
259
- {getCardTypeName(transaction.raw_request?.cardtype)}
260
- </Typography>
261
- </Flex>
262
- <Flex justifyContent="space-between" gap={3}>
263
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
264
- Card Number:
265
- </Typography>
266
- <Typography variant="pi" textColor="neutral800">
267
- **** **** **** {transaction.raw_request?.cardpan?.slice(-4)}
268
- </Typography>
269
- </Flex>
270
- <Flex justifyContent="space-between" gap={3}>
271
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
272
- Expiry:
273
- </Typography>
274
- <Typography variant="pi" textColor="neutral800">
275
- {transaction.raw_request?.cardexpiredate}
276
- </Typography>
277
- </Flex>
278
- </>
279
- )}
280
-
281
- {transaction.raw_request?.clearingtype === 'wlt' && transaction.raw_request?.wallettype && (
282
- <Flex justifyContent="space-between" gap={3}>
283
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
284
- Wallet Type:
285
- </Typography>
286
- <Typography variant="pi" textColor="neutral800">
287
- {transaction.raw_request.wallettype}
288
- </Typography>
289
- </Flex>
290
- )}
291
-
292
- {transaction.raw_request?.clearingtype === 'sb' && (
293
- <>
294
- <Flex justifyContent="space-between" gap={3}>
295
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
296
- Bank Transfer Type:
297
- </Typography>
298
- <Typography variant="pi" textColor="neutral800">
299
- {transaction.raw_request?.onlinebanktransfertype}
300
- </Typography>
301
- </Flex>
302
- <Flex justifyContent="space-between" gap={3}>
303
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
304
- Bank Country:
305
- </Typography>
306
- <Typography variant="pi" textColor="neutral800">
307
- {transaction.raw_request?.bankcountry}
308
- </Typography>
309
- </Flex>
310
- </>
311
- )}
312
- </Stack>
313
- </Box>
314
- </Box>
315
-
316
- {/* Technical Details */}
317
- <Box>
318
- <Typography variant="pi" fontWeight="bold" textColor="neutral800" marginBottom={3}>
319
- Technical Details
320
- </Typography>
321
- <Box paddingLeft={4}>
322
- <Stack spacing={2}>
323
- <Flex justifyContent="space-between" gap={3}>
324
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
325
- Request Type:
326
- </Typography>
327
- <Typography variant="pi" textColor="neutral800">
328
- {transaction.request_type}
329
- </Typography>
330
- </Flex>
331
- <Flex justifyContent="space-between" gap={3}>
332
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
333
- Mode:
334
- </Typography>
335
- <Typography variant="pi" textColor="neutral800">
336
- {transaction.raw_request?.mode}
337
- </Typography>
338
- </Flex>
339
- <Flex justifyContent="space-between" gap={3}>
340
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
341
- IP Address:
342
- </Typography>
343
- <Typography variant="pi" textColor="neutral800">
344
- {transaction.raw_request?.ip}
345
- </Typography>
346
- </Flex>
347
- <Flex justifyContent="space-between" gap={3}>
348
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
349
- Language:
350
- </Typography>
351
- <Typography variant="pi" textColor="neutral800">
352
- {transaction.raw_request?.language}
353
- </Typography>
354
- </Flex>
355
- <Flex justifyContent="space-between" gap={3}>
356
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
357
- Customer Present:
358
- </Typography>
359
- <Typography variant="pi" textColor="neutral800">
360
- {transaction.raw_request?.customer_is_present}
361
- </Typography>
362
- </Flex>
363
- </Stack>
364
- </Box>
365
- </Box>
366
- </Stack>
367
- </Box>
368
- )}
369
- </CardBody>
370
- </Card>
371
- );
372
- };
373
-
374
- export default TransactionHistoryItem;
1
+ import React, { useState } from 'react';
2
+ import {
3
+ Box,
4
+ Card,
5
+ CardBody,
6
+ Flex,
7
+ Stack,
8
+ Typography,
9
+ Badge,
10
+ Button,
11
+ } from '@strapi/design-system';
12
+ import {
13
+ ChevronDownIcon,
14
+ ChevronUpIcon,
15
+ } from './icons';
16
+ const TransactionHistoryItem = ({ transaction }) => {
17
+ const [isExpanded, setIsExpanded] = useState(false);
18
+
19
+
20
+ const getStatusColor = (status) => {
21
+ switch (status) {
22
+ case 'APPROVED':
23
+ return 'success';
24
+ case 'ERROR':
25
+ return 'danger';
26
+ case 'PENDING':
27
+ return 'warning';
28
+ default:
29
+ return 'neutral';
30
+ }
31
+ };
32
+
33
+
34
+ const getPaymentMethodName = (clearingtype, wallettype) => {
35
+ switch (clearingtype) {
36
+ case 'cc':
37
+ return 'Credit Card';
38
+ case 'sb':
39
+ return 'Online Banking';
40
+ case 'wlt':
41
+ return wallettype === 'PPE' ? 'PayPal' : 'Wallet';
42
+ case 'elv':
43
+ return 'Direct Debit (SEPA)';
44
+ default:
45
+ return 'Unknown';
46
+ }
47
+ };
48
+
49
+ const formatAmount = (amount, currency) => {
50
+ return `${(amount / 100).toFixed(2)} ${currency}`;
51
+ };
52
+
53
+ const formatDate = (dateString) => {
54
+ return new Date(dateString).toLocaleString('de-DE', {
55
+ year: 'numeric',
56
+ month: '2-digit',
57
+ day: '2-digit',
58
+ hour: '2-digit',
59
+ minute: '2-digit',
60
+ });
61
+ };
62
+
63
+ const getCardTypeName = (cardtype) => {
64
+ switch (cardtype) {
65
+ case 'V':
66
+ return 'Visa';
67
+ case 'M':
68
+ return 'Mastercard';
69
+ case 'A':
70
+ return 'American Express';
71
+ default:
72
+ return cardtype || 'Unknown';
73
+ }
74
+ };
75
+
76
+ return (
77
+ <Card
78
+ background="neutral0"
79
+ hasRadius
80
+ shadow="filterShadow"
81
+ style={{
82
+ marginBottom: '16px',
83
+ }}
84
+ >
85
+ <CardBody padding={6} style={{ display: "flex", flexDirection: 'column', gap: '6px' }}>
86
+ {/* Main Values in Column Format */}
87
+ <Stack spacing={3} marginBottom={4}>
88
+ {/* Reference */}
89
+ <Flex alignItems="center" gap={2}>
90
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
91
+ Reference:
92
+ </Typography>
93
+ <Typography variant="pi" textColor="neutral800">
94
+ {transaction.reference}
95
+ </Typography>
96
+ </Flex>
97
+ {/* Date */}
98
+ <Flex alignItems="center" gap={2}>
99
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
100
+ Date:
101
+ </Typography>
102
+ <Typography variant="pi" textColor="neutral800">
103
+ {formatDate(transaction.timestamp)}
104
+ </Typography>
105
+ </Flex>
106
+
107
+ {/* Payment Method */}
108
+ <Flex alignItems="center" gap={2}>
109
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
110
+ Method:
111
+ </Typography>
112
+ <Typography variant="pi" textColor="neutral800">
113
+ {getPaymentMethodName(transaction.raw_request?.clearingtype, transaction.raw_request?.wallettype)}
114
+ </Typography>
115
+ {transaction.txid && (
116
+ <>
117
+ <Typography variant="pi" textColor="neutral500">•</Typography>
118
+ <Typography variant="pi" textColor="neutral600">
119
+ TX: {transaction.txid}
120
+ </Typography>
121
+ </>
122
+ )}
123
+ </Flex>
124
+
125
+ {/* Amount */}
126
+ <Flex alignItems="center" gap={2}>
127
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
128
+ Amount:
129
+ </Typography>
130
+ <Typography variant="pi" fontWeight="bold" textColor="primary600" fontSize={2}>
131
+ {formatAmount(transaction.amount, transaction.currency)}
132
+ </Typography>
133
+ <Badge
134
+ backgroundColor={getStatusColor(transaction.status)}
135
+ textColor="neutral0"
136
+ >
137
+ {transaction.status}
138
+ </Badge>
139
+ </Flex>
140
+ </Stack>
141
+
142
+
143
+
144
+ {/* Expand/Collapse Button */}
145
+ <Flex justifyContent="center">
146
+ <Button
147
+ size="S"
148
+ onClick={() => setIsExpanded(!isExpanded)}
149
+ startIcon={isExpanded ? <ChevronUpIcon size={16} /> : <ChevronDownIcon size={16} />}
150
+ >
151
+ {isExpanded ? 'Hide Details' : 'Show Details'}
152
+ </Button>
153
+ </Flex>
154
+
155
+ {/* Expanded Details */}
156
+ {isExpanded && (
157
+ <Box marginTop={4}>
158
+ <Stack spacing={4}>
159
+ {/* Error Message */}
160
+ {transaction.status === 'ERROR' && (
161
+ <Box
162
+ marginBottom={4}
163
+ padding={3}
164
+ background="danger100"
165
+ hasRadius
166
+ style={{
167
+ border: '1px solid',
168
+ borderColor: 'var(--strapi-colors-danger200)',
169
+ }}
170
+ >
171
+ <Typography variant="pi" fontWeight="bold" textColor="danger600" marginBottom={1}>
172
+ Error: {transaction.error_message}
173
+ </Typography>
174
+ {transaction.customer_message && (
175
+ <Typography variant="pi" textColor="danger600">
176
+ Customer Message: {transaction.customer_message}
177
+ </Typography>
178
+ )}
179
+ </Box>
180
+ )}
181
+ {/* Customer Information */}
182
+ <Box>
183
+ <Flex alignItems="center" gap={2} marginBottom={3}>
184
+ <Typography variant="pi" fontWeight="bold" textColor="neutral800">
185
+ Customer Information
186
+ </Typography>
187
+ </Flex>
188
+ <Box paddingLeft={4}>
189
+ <Stack spacing={2}>
190
+ <Flex justifyContent="space-between" gap={3}>
191
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
192
+ Name:
193
+ </Typography>
194
+ <Typography variant="pi" textColor="neutral800">
195
+ {transaction.raw_request?.firstname} {transaction.raw_request?.lastname}
196
+ </Typography>
197
+ </Flex>
198
+ <Flex justifyContent="space-between" gap={3}>
199
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
200
+ Email:
201
+ </Typography>
202
+ <Typography variant="pi" textColor="neutral800">
203
+ {transaction.raw_request?.email}
204
+ </Typography>
205
+ </Flex>
206
+ <Flex justifyContent="space-between" gap={3}>
207
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
208
+ Phone:
209
+ </Typography>
210
+ <Typography variant="pi" textColor="neutral800">
211
+ {transaction.raw_request?.telephonenumber}
212
+ </Typography>
213
+ </Flex>
214
+ <Flex justifyContent="space-between" gap={3}>
215
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
216
+ Address:
217
+ </Typography>
218
+ <Typography variant="pi" textColor="neutral800">
219
+ {transaction.raw_request?.street}, {transaction.raw_request?.zip} {transaction.raw_request?.city}
220
+ </Typography>
221
+ </Flex>
222
+ <Flex justifyContent="space-between" gap={3}>
223
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
224
+ Country:
225
+ </Typography>
226
+ <Typography variant="pi" textColor="neutral800">
227
+ {transaction.raw_request?.country}
228
+ </Typography>
229
+ </Flex>
230
+ </Stack>
231
+ </Box>
232
+ </Box>
233
+
234
+ {/* Payment Method Details */}
235
+ <Box>
236
+ <Flex alignItems="center" gap={2} marginBottom={3}>
237
+ <Typography variant="pi" fontWeight="bold" textColor="neutral800">
238
+ Payment Method Details
239
+ </Typography>
240
+ </Flex>
241
+ <Box paddingLeft={4}>
242
+ <Stack spacing={2}>
243
+ <Flex justifyContent="space-between" gap={3}>
244
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
245
+ Type:
246
+ </Typography>
247
+ <Typography variant="pi" textColor="neutral800">
248
+ {getPaymentMethodName(transaction.raw_request?.clearingtype, transaction.raw_request?.wallettype)}
249
+ </Typography>
250
+ </Flex>
251
+
252
+ {transaction.raw_request?.clearingtype === 'cc' && (
253
+ <>
254
+ <Flex justifyContent="space-between" gap={3}>
255
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
256
+ Card Type:
257
+ </Typography>
258
+ <Typography variant="pi" textColor="neutral800">
259
+ {getCardTypeName(transaction.raw_request?.cardtype)}
260
+ </Typography>
261
+ </Flex>
262
+ <Flex justifyContent="space-between" gap={3}>
263
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
264
+ Card Number:
265
+ </Typography>
266
+ <Typography variant="pi" textColor="neutral800">
267
+ **** **** **** {transaction.raw_request?.cardpan?.slice(-4)}
268
+ </Typography>
269
+ </Flex>
270
+ <Flex justifyContent="space-between" gap={3}>
271
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
272
+ Expiry:
273
+ </Typography>
274
+ <Typography variant="pi" textColor="neutral800">
275
+ {transaction.raw_request?.cardexpiredate}
276
+ </Typography>
277
+ </Flex>
278
+ </>
279
+ )}
280
+
281
+ {transaction.raw_request?.clearingtype === 'wlt' && transaction.raw_request?.wallettype && (
282
+ <Flex justifyContent="space-between" gap={3}>
283
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
284
+ Wallet Type:
285
+ </Typography>
286
+ <Typography variant="pi" textColor="neutral800">
287
+ {transaction.raw_request.wallettype}
288
+ </Typography>
289
+ </Flex>
290
+ )}
291
+
292
+ {transaction.raw_request?.clearingtype === 'sb' && (
293
+ <>
294
+ <Flex justifyContent="space-between" gap={3}>
295
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
296
+ Bank Transfer Type:
297
+ </Typography>
298
+ <Typography variant="pi" textColor="neutral800">
299
+ {transaction.raw_request?.onlinebanktransfertype}
300
+ </Typography>
301
+ </Flex>
302
+ <Flex justifyContent="space-between" gap={3}>
303
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
304
+ Bank Country:
305
+ </Typography>
306
+ <Typography variant="pi" textColor="neutral800">
307
+ {transaction.raw_request?.bankcountry}
308
+ </Typography>
309
+ </Flex>
310
+ </>
311
+ )}
312
+ </Stack>
313
+ </Box>
314
+ </Box>
315
+
316
+ {/* Technical Details */}
317
+ <Box>
318
+ <Typography variant="pi" fontWeight="bold" textColor="neutral800" marginBottom={3}>
319
+ Technical Details
320
+ </Typography>
321
+ <Box paddingLeft={4}>
322
+ <Stack spacing={2}>
323
+ <Flex justifyContent="space-between" gap={3}>
324
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
325
+ Request Type:
326
+ </Typography>
327
+ <Typography variant="pi" textColor="neutral800">
328
+ {transaction.request_type}
329
+ </Typography>
330
+ </Flex>
331
+ <Flex justifyContent="space-between" gap={3}>
332
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
333
+ Mode:
334
+ </Typography>
335
+ <Typography variant="pi" textColor="neutral800">
336
+ {transaction.raw_request?.mode}
337
+ </Typography>
338
+ </Flex>
339
+ <Flex justifyContent="space-between" gap={3}>
340
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
341
+ IP Address:
342
+ </Typography>
343
+ <Typography variant="pi" textColor="neutral800">
344
+ {transaction.raw_request?.ip}
345
+ </Typography>
346
+ </Flex>
347
+ <Flex justifyContent="space-between" gap={3}>
348
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
349
+ Language:
350
+ </Typography>
351
+ <Typography variant="pi" textColor="neutral800">
352
+ {transaction.raw_request?.language}
353
+ </Typography>
354
+ </Flex>
355
+ <Flex justifyContent="space-between" gap={3}>
356
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
357
+ Customer Present:
358
+ </Typography>
359
+ <Typography variant="pi" textColor="neutral800">
360
+ {transaction.raw_request?.customer_is_present}
361
+ </Typography>
362
+ </Flex>
363
+ </Stack>
364
+ </Box>
365
+ </Box>
366
+ </Stack>
367
+ </Box>
368
+ )}
369
+ </CardBody>
370
+ </Card>
371
+ );
372
+ };
373
+
374
+ export default TransactionHistoryItem;