strapi-plugin-payone-provider 5.7.24 → 5.7.26

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 (83) hide show
  1. package/README.md +1191 -1191
  2. package/admin/src/components/Initializer/index.jsx +16 -16
  3. package/admin/src/components/PluginIcon/index.jsx +17 -17
  4. package/admin/src/index.js +57 -57
  5. package/admin/src/pages/App/components/AppHeader.jsx +45 -45
  6. package/admin/src/pages/App/components/AppTabs.jsx +105 -105
  7. package/admin/src/pages/App/components/ApplePayBtn.jsx +355 -355
  8. package/admin/src/pages/App/components/ApplePayConfig.jsx +357 -357
  9. package/admin/src/pages/App/components/DocsPanel.jsx +53 -53
  10. package/admin/src/pages/App/components/RenderInput.jsx +78 -78
  11. package/admin/src/pages/App/components/StatusBadge.jsx +87 -87
  12. package/admin/src/pages/App/components/icons/BankIcon.jsx +10 -10
  13. package/admin/src/pages/App/components/icons/ChevronDownIcon.jsx +9 -9
  14. package/admin/src/pages/App/components/icons/ChevronUpIcon.jsx +9 -9
  15. package/admin/src/pages/App/components/icons/CreditCardIcon.jsx +9 -9
  16. package/admin/src/pages/App/components/icons/ErrorIcon.jsx +10 -10
  17. package/admin/src/pages/App/components/icons/InfoIcon.jsx +9 -9
  18. package/admin/src/pages/App/components/icons/MarkCircle.jsx +19 -19
  19. package/admin/src/pages/App/components/icons/PaymentIcon.jsx +10 -10
  20. package/admin/src/pages/App/components/icons/PendingIcon.jsx +9 -9
  21. package/admin/src/pages/App/components/icons/PersonIcon.jsx +9 -9
  22. package/admin/src/pages/App/components/icons/SuccessIcon.jsx +9 -9
  23. package/admin/src/pages/App/components/icons/WalletIcon.jsx +9 -9
  24. package/admin/src/pages/App/components/icons/index.jsx +12 -12
  25. package/admin/src/pages/App/components/payment-actions/AuthorizationForm.jsx +334 -334
  26. package/admin/src/pages/App/components/payment-actions/CaptureForm.jsx +120 -120
  27. package/admin/src/pages/App/components/payment-actions/PaymentActionsPanel.jsx +183 -183
  28. package/admin/src/pages/App/components/payment-actions/PaymentMethodSelector.jsx +315 -315
  29. package/admin/src/pages/App/components/payment-actions/PaymentResult.jsx +129 -129
  30. package/admin/src/pages/App/components/payment-actions/PreauthorizationForm.jsx +273 -273
  31. package/admin/src/pages/App/components/payment-actions/RefundForm.jsx +114 -114
  32. package/admin/src/pages/App/components/transaction-history/ImportExportBar.jsx +153 -153
  33. package/admin/src/pages/App/components/transaction-history/details/TransactionHistoryItem.jsx +526 -526
  34. package/admin/src/pages/App/index.jsx +96 -96
  35. package/admin/src/pages/App/styles.css +176 -176
  36. package/admin/src/pages/constants/paymentConstants.js +71 -71
  37. package/admin/src/pages/hooks/use-system-theme.js +27 -27
  38. package/admin/src/pages/hooks/usePaymentActions.js +498 -498
  39. package/admin/src/pages/hooks/usePluginTranslations.js +12 -12
  40. package/admin/src/pages/hooks/useSettings.js +183 -183
  41. package/admin/src/pages/hooks/useTransactionHistory.js +148 -148
  42. package/admin/src/pages/utils/api.js +97 -97
  43. package/admin/src/pages/utils/applePayConstants.js +196 -196
  44. package/admin/src/pages/utils/formatTransactionData.js +15 -15
  45. package/admin/src/pages/utils/getInputComponent.jsx +200 -200
  46. package/admin/src/pages/utils/paymentUtils.js +661 -661
  47. package/admin/src/pages/utils/tooltipHelpers.js +18 -18
  48. package/admin/src/pages/utils/transactionTableUtils.js +71 -71
  49. package/admin/src/pluginId.js +9 -9
  50. package/admin/src/translations/de.json +235 -235
  51. package/admin/src/translations/en.json +235 -235
  52. package/admin/src/translations/fr.json +235 -235
  53. package/admin/src/translations/ru.json +235 -235
  54. package/admin/src/utils/prefixPluginTranslations.js +13 -13
  55. package/package.json +45 -45
  56. package/server/bootstrap.js +107 -107
  57. package/server/config/index.js +83 -83
  58. package/server/content-types/index.js +4 -4
  59. package/server/content-types/transactions/index.js +4 -4
  60. package/server/content-types/transactions/schema.json +86 -86
  61. package/server/controllers/index.js +7 -7
  62. package/server/controllers/payone.js +506 -451
  63. package/server/destroy.js +5 -5
  64. package/server/index.js +23 -23
  65. package/server/policies/index.js +7 -7
  66. package/server/policies/is-auth.js +29 -29
  67. package/server/policies/isSuperAdmin.js +20 -20
  68. package/server/register.js +5 -5
  69. package/server/routes/index.js +218 -218
  70. package/server/services/applePayService.js +295 -295
  71. package/server/services/index.js +9 -9
  72. package/server/services/paymentService.js +223 -223
  73. package/server/services/payone.js +78 -78
  74. package/server/services/settingsService.js +59 -59
  75. package/server/services/testConnectionService.js +115 -115
  76. package/server/services/transactionService.js +262 -262
  77. package/server/utils/csvTransactions.js +82 -82
  78. package/server/utils/normalize.js +39 -39
  79. package/server/utils/paymentMethodParams.js +288 -288
  80. package/server/utils/requestBuilder.js +100 -100
  81. package/server/utils/responseParser.js +141 -141
  82. package/strapi-admin.js +4 -4
  83. package/strapi-server.js +3 -3
package/admin/src/pages/App/components/transaction-history/details/TransactionHistoryItem.jsx CHANGED
@@ -1,526 +1,526 @@
1
- import * as React from "react";
2
- import {
3
- Box,
4
- Card,
5
- CardBody,
6
- Flex,
7
- Typography,
8
- Badge,
9
- Button,
10
- } from "@strapi/design-system";
11
- import { ChevronDownIcon, ChevronUpIcon } from "../icons";
12
- import { isCreditCard, getCardTypeName } from "../../../../utils/transactionTableUtils";
13
-
14
- const TransactionHistoryItem = ({ transaction }) => {
15
- const [isExpanded, setIsExpanded] = React.useState(false);
16
-
17
- const getStatusColor = (status) => {
18
- switch (status) {
19
- case "APPROVED":
20
- return "success";
21
- case "ERROR":
22
- return "danger";
23
- case "PENDING":
24
- return "warning";
25
- default:
26
- return "neutral";
27
- }
28
- };
29
-
30
- const getPaymentMethodName = (clearingtype, wallettype) => {
31
- switch (clearingtype) {
32
- case "cc":
33
- return "Credit Card";
34
- case "sb":
35
- return "Online Banking";
36
- case "wlt":
37
- return wallettype === "PPE" ? "PayPal" : "Wallet";
38
- case "elv":
39
- return "Direct Debit (SEPA)";
40
- default:
41
- return "Unknown";
42
- }
43
- };
44
-
45
- const formatAmount = (amount, currency) => {
46
- return `${(amount / 100).toFixed(2)} ${currency}`;
47
- };
48
-
49
- const formatDate = (dateString) => {
50
- return new Date(dateString).toLocaleString("de-DE", {
51
- year: "numeric",
52
- month: "2-digit",
53
- day: "2-digit",
54
- hour: "2-digit",
55
- minute: "2-digit",
56
- });
57
- };
58
-
59
- const getCardTypeName = (cardtype) => {
60
- switch (cardtype) {
61
- case "V":
62
- return "Visa";
63
- case "M":
64
- return "Mastercard";
65
- case "A":
66
- return "American Express";
67
- default:
68
- return cardtype || "Unknown";
69
- }
70
- };
71
-
72
- return (
73
- <Card
74
- className="payment-transaction-item"
75
- background="neutral0"
76
- hasRadius
77
- shadow="filterShadow"
78
- style={{
79
- marginBottom: "16px",
80
- }}
81
- >
82
- <CardBody
83
- padding={6}
84
- style={{ display: "flex", flexDirection: "column", gap: "6px" }}
85
- >
86
- <Flex direction="column" gap={3} style={{ marginBottom: "32px" }}>
87
- <Flex alignItems="center" gap={2}>
88
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
89
- Reference:
90
- </Typography>
91
- <Typography variant="pi" textColor="neutral800">
92
- {transaction.reference}
93
- </Typography>
94
- </Flex>
95
- <Flex alignItems="center" gap={2}>
96
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
97
- Date:
98
- </Typography>
99
- <Typography variant="pi" textColor="neutral800">
100
- {formatDate(transaction.timestamp)}
101
- </Typography>
102
- </Flex>
103
-
104
- <Flex alignItems="center" gap={2}>
105
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
106
- Method:
107
- </Typography>
108
- <Typography variant="pi" textColor="neutral800">
109
- {getPaymentMethodName(
110
- transaction.raw_request?.clearingtype,
111
- transaction.raw_request?.wallettype
112
- )}
113
- </Typography>
114
- {transaction.txid && (
115
- <>
116
- <Typography variant="pi" textColor="neutral500">
117
- •
118
- </Typography>
119
- <Typography variant="pi" textColor="neutral600">
120
- TX: {transaction.txid}
121
- </Typography>
122
- </>
123
- )}
124
- </Flex>
125
-
126
- <Flex alignItems="center" gap={2}>
127
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
128
- Amount:
129
- </Typography>
130
- <Typography
131
- variant="pi"
132
- fontWeight="bold"
133
- textColor="primary600"
134
- fontSize={2}
135
- >
136
- {formatAmount(transaction.amount, transaction.currency)}
137
- </Typography>
138
- <Badge
139
- backgroundColor={getStatusColor(transaction.status)}
140
- textColor="neutral0"
141
- >
142
- {transaction.status}
143
- </Badge>
144
- </Flex>
145
- </Flex>
146
-
147
- <Flex justifyContent="center">
148
- <Button
149
- size="S"
150
- onClick={() => setIsExpanded(!isExpanded)}
151
- startIcon={
152
- isExpanded ? (
153
- <ChevronUpIcon size={16} />
154
- ) : (
155
- <ChevronDownIcon size={16} />
156
- )
157
- }
158
- className="payment-button payment-button-primary"
159
- >
160
- {isExpanded ? "Hide Details" : "Show Details"}
161
- </Button>
162
- </Flex>
163
-
164
- {isExpanded && (
165
- <Flex
166
- marginTop={4}
167
- style={{
168
- animation: "fadeIn 0.3s ease-out",
169
- gap: "32px",
170
- }}
171
- >
172
- <Flex direction="column" gap={4}>
173
- {transaction.status === "ERROR" && (
174
- <Box
175
- padding={3}
176
- background="danger100"
177
- hasRadius
178
- className="payment-alert"
179
- style={{
180
- border: "1px solid",
181
- borderColor: "var(--strapi-colors-danger200)",
182
- }}
183
- >
184
- <Typography
185
- variant="pi"
186
- fontWeight="bold"
187
- textColor="danger600"
188
- marginBottom={1}
189
- >
190
- Error: {transaction.error_message}
191
- </Typography>
192
- {transaction.customer_message && (
193
- <Typography variant="pi" textColor="danger600">
194
- Customer Message: {transaction.customer_message}
195
- </Typography>
196
- )}
197
- </Box>
198
- )}
199
- <Box>
200
- <Flex alignItems="center" gap={2} marginBottom={3}>
201
- <Typography
202
- variant="pi"
203
- fontWeight="bold"
204
- textColor="neutral800"
205
- >
206
- Customer Information
207
- </Typography>
208
- </Flex>
209
- <Box paddingLeft={4}>
210
- <Flex direction="column" gap={2}>
211
- <Flex justifyContent="space-between" gap={3}>
212
- <Typography
213
- variant="pi"
214
- textColor="neutral600"
215
- fontWeight="medium"
216
- >
217
- Name:
218
- </Typography>
219
- <Typography variant="pi" textColor="neutral800">
220
- {transaction.raw_request?.firstname}{" "}
221
- {transaction.raw_request?.lastname}
222
- </Typography>
223
- </Flex>
224
- <Flex justifyContent="space-between" gap={3}>
225
- <Typography
226
- variant="pi"
227
- textColor="neutral600"
228
- fontWeight="medium"
229
- >
230
- Email:
231
- </Typography>
232
- <Typography variant="pi" textColor="neutral800">
233
- {transaction.raw_request?.email}
234
- </Typography>
235
- </Flex>
236
- <Flex justifyContent="space-between" gap={3}>
237
- <Typography
238
- variant="pi"
239
- textColor="neutral600"
240
- fontWeight="medium"
241
- >
242
- Phone:
243
- </Typography>
244
- <Typography variant="pi" textColor="neutral800">
245
- {transaction.raw_request?.telephonenumber}
246
- </Typography>
247
- </Flex>
248
- <Flex justifyContent="space-between" gap={3}>
249
- <Typography
250
- variant="pi"
251
- textColor="neutral600"
252
- fontWeight="medium"
253
- >
254
- Address:
255
- </Typography>
256
- <Typography variant="pi" textColor="neutral800">
257
- {transaction.raw_request?.street},{" "}
258
- {transaction.raw_request?.zip}{" "}
259
- {transaction.raw_request?.city}
260
- </Typography>
261
- </Flex>
262
- <Flex justifyContent="space-between" gap={3}>
263
- <Typography
264
- variant="pi"
265
- textColor="neutral600"
266
- fontWeight="medium"
267
- >
268
- Country:
269
- </Typography>
270
- <Typography variant="pi" textColor="neutral800">
271
- {transaction.raw_request?.country}
272
- </Typography>
273
- </Flex>
274
- </Flex>
275
- </Box>
276
- </Box>
277
-
278
- <Box>
279
- <Flex alignItems="center" gap={2} marginBottom={3}>
280
- <Typography
281
- variant="pi"
282
- fontWeight="bold"
283
- textColor="neutral800"
284
- >
285
- Payment Method Details
286
- </Typography>
287
- </Flex>
288
- <Box paddingLeft={4}>
289
- <Flex direction="column" gap={2}>
290
- <Flex justifyContent="space-between" gap={3}>
291
- <Typography
292
- variant="pi"
293
- textColor="neutral600"
294
- fontWeight="medium"
295
- >
296
- Type:
297
- </Typography>
298
- <Typography variant="pi" textColor="neutral800">
299
- {getPaymentMethodName(
300
- transaction.raw_request?.clearingtype,
301
- transaction.raw_request?.wallettype
302
- )}
303
- </Typography>
304
- </Flex>
305
-
306
- {isCreditCard(transaction) && (
307
- <>
308
- <Flex justifyContent="space-between" gap={3}>
309
- <Typography
310
- variant="pi"
311
- textColor="neutral600"
312
- fontWeight="medium"
313
- >
314
- Card Type:
315
- </Typography>
316
- <Typography variant="pi" textColor="neutral800">
317
- {getCardTypeName(transaction.raw_request?.cardtype)}
318
- </Typography>
319
- </Flex>
320
- <Flex justifyContent="space-between" gap={3}>
321
- <Typography
322
- variant="pi"
323
- textColor="neutral600"
324
- fontWeight="medium"
325
- >
326
- Card Number:
327
- </Typography>
328
- <Typography variant="pi" textColor="neutral800">
329
- **** **** ****{" "}
330
- {transaction.raw_request?.cardpan?.slice(-4)}
331
- </Typography>
332
- </Flex>
333
- <Flex justifyContent="space-between" gap={3}>
334
- <Typography
335
- variant="pi"
336
- textColor="neutral600"
337
- fontWeight="medium"
338
- >
339
- Expiry:
340
- </Typography>
341
- <Typography variant="pi" textColor="neutral800">
342
- {transaction.raw_request?.cardexpiredate}
343
- </Typography>
344
- </Flex>
345
- {transaction.raw_request?.cardFirstname && (
346
- <Flex justifyContent="space-between" gap={3}>
347
- <Typography
348
- variant="pi"
349
- textColor="neutral600"
350
- fontWeight="medium"
351
- >
352
- Name on Card:
353
- </Typography>
354
- <Typography variant="pi" textColor="neutral800">
355
- {transaction.raw_request?.cardFirstname}{" "}
356
- {transaction.raw_request?.cardLastname}
357
- </Typography>
358
- </Flex>
359
- )}
360
- </>
361
- )}
362
-
363
- {transaction.raw_request?.clearingtype === "wlt" &&
364
- transaction.raw_request?.wallettype && (
365
- <Flex justifyContent="space-between" gap={3}>
366
- <Typography
367
- variant="pi"
368
- textColor="neutral600"
369
- fontWeight="medium"
370
- >
371
- Wallet Type:
372
- </Typography>
373
- <Typography variant="pi" textColor="neutral800">
374
- {transaction.raw_request.wallettype}
375
- </Typography>
376
- </Flex>
377
- )}
378
-
379
- {transaction.raw_request?.clearingtype === "sb" && (
380
- <>
381
- <Flex justifyContent="space-between" gap={3}>
382
- <Typography
383
- variant="pi"
384
- textColor="neutral600"
385
- fontWeight="medium"
386
- >
387
- Bank Transfer Type:
388
- </Typography>
389
- <Typography variant="pi" textColor="neutral800">
390
- {transaction.raw_request?.onlinebanktransfertype}
391
- </Typography>
392
- </Flex>
393
- <Flex justifyContent="space-between" gap={3}>
394
- <Typography
395
- variant="pi"
396
- textColor="neutral600"
397
- fontWeight="medium"
398
- >
399
- Bank Country:
400
- </Typography>
401
- <Typography variant="pi" textColor="neutral800">
402
- {transaction.raw_request?.bankcountry}
403
- </Typography>
404
- </Flex>
405
- </>
406
- )}
407
- </Flex>
408
- </Box>
409
- </Box>
410
-
411
- <Box>
412
- <Typography
413
- variant="pi"
414
- fontWeight="bold"
415
- textColor="neutral800"
416
- marginBottom={3}
417
- >
418
- Technical Details
419
- </Typography>
420
- <Box paddingLeft={4}>
421
- <Flex direction="column" gap={2}>
422
- <Flex justifyContent="space-between" gap={3}>
423
- <Typography
424
- variant="pi"
425
- textColor="neutral600"
426
- fontWeight="medium"
427
- >
428
- Request Type:
429
- </Typography>
430
- <Typography variant="pi" textColor="neutral800">
431
- {transaction.request_type}
432
- </Typography>
433
- </Flex>
434
- <Flex justifyContent="space-between" gap={3}>
435
- <Typography
436
- variant="pi"
437
- textColor="neutral600"
438
- fontWeight="medium"
439
- >
440
- Mode:
441
- </Typography>
442
- <Typography variant="pi" textColor="neutral800">
443
- {transaction.raw_request?.mode}
444
- </Typography>
445
- </Flex>
446
- <Flex justifyContent="space-between" gap={3}>
447
- <Typography
448
- variant="pi"
449
- textColor="neutral600"
450
- fontWeight="medium"
451
- >
452
- IP Address:
453
- </Typography>
454
- <Typography variant="pi" textColor="neutral800">
455
- {transaction.raw_request?.ip}
456
- </Typography>
457
- </Flex>
458
- <Flex justifyContent="space-between" gap={3}>
459
- <Typography
460
- variant="pi"
461
- textColor="neutral600"
462
- fontWeight="medium"
463
- >
464
- Language:
465
- </Typography>
466
- <Typography variant="pi" textColor="neutral800">
467
- {transaction.raw_request?.language}
468
- </Typography>
469
- </Flex>
470
- <Flex justifyContent="space-between" gap={3}>
471
- <Typography
472
- variant="pi"
473
- textColor="neutral600"
474
- fontWeight="medium"
475
- >
476
- Customer Present:
477
- </Typography>
478
- <Typography variant="pi" textColor="neutral800">
479
- {transaction.raw_request?.customer_is_present}
480
- </Typography>
481
- </Flex>
482
- </Flex>
483
- </Box>
484
- </Box>
485
- </Flex>
486
-
487
- <Flex direction="column" gap={4}>
488
- <Typography variant="pi" fontWeight="bold" textColor="neutral800">
489
- Raw Body
490
- </Typography>
491
- <Box
492
- padding={4}
493
- background="neutral100"
494
- hasRadius
495
- style={{
496
- border: "1px solid",
497
- borderColor: "var(--strapi-colors-neutral200)",
498
- overflow: "auto",
499
- maxHeight: "500px",
500
- maxWidth: "800px",
501
- }}
502
- >
503
- <pre
504
- style={{
505
- margin: 0,
506
- padding: 0,
507
- fontFamily: "monospace",
508
- fontSize: "13px",
509
- lineHeight: "1.5",
510
- color: "Highlight",
511
- whiteSpace: "pre-wrap",
512
- wordBreak: "break-word",
513
- }}
514
- >
515
- {JSON.stringify(transaction?.body || {}, null, 2)}
516
- </pre>
517
- </Box>
518
- </Flex>
519
- </Flex>
520
- )}
521
- </CardBody>
522
- </Card>
523
- );
524
- };
525
-
526
- export default TransactionHistoryItem;
1
+ import * as React from "react";
2
+ import {
3
+ Box,
4
+ Card,
5
+ CardBody,
6
+ Flex,
7
+ Typography,
8
+ Badge,
9
+ Button,
10
+ } from "@strapi/design-system";
11
+ import { ChevronDownIcon, ChevronUpIcon } from "../icons";
12
+ import { isCreditCard, getCardTypeName } from "../../../../utils/transactionTableUtils";
13
+
14
+ const TransactionHistoryItem = ({ transaction }) => {
15
+ const [isExpanded, setIsExpanded] = React.useState(false);
16
+
17
+ const getStatusColor = (status) => {
18
+ switch (status) {
19
+ case "APPROVED":
20
+ return "success";
21
+ case "ERROR":
22
+ return "danger";
23
+ case "PENDING":
24
+ return "warning";
25
+ default:
26
+ return "neutral";
27
+ }
28
+ };
29
+
30
+ const getPaymentMethodName = (clearingtype, wallettype) => {
31
+ switch (clearingtype) {
32
+ case "cc":
33
+ return "Credit Card";
34
+ case "sb":
35
+ return "Online Banking";
36
+ case "wlt":
37
+ return wallettype === "PPE" ? "PayPal" : "Wallet";
38
+ case "elv":
39
+ return "Direct Debit (SEPA)";
40
+ default:
41
+ return "Unknown";
42
+ }
43
+ };
44
+
45
+ const formatAmount = (amount, currency) => {
46
+ return `${(amount / 100).toFixed(2)} ${currency}`;
47
+ };
48
+
49
+ const formatDate = (dateString) => {
50
+ return new Date(dateString).toLocaleString("de-DE", {
51
+ year: "numeric",
52
+ month: "2-digit",
53
+ day: "2-digit",
54
+ hour: "2-digit",
55
+ minute: "2-digit",
56
+ });
57
+ };
58
+
59
+ const getCardTypeName = (cardtype) => {
60
+ switch (cardtype) {
61
+ case "V":
62
+ return "Visa";
63
+ case "M":
64
+ return "Mastercard";
65
+ case "A":
66
+ return "American Express";
67
+ default:
68
+ return cardtype || "Unknown";
69
+ }
70
+ };
71
+
72
+ return (
73
+ <Card
74
+ className="payment-transaction-item"
75
+ background="neutral0"
76
+ hasRadius
77
+ shadow="filterShadow"
78
+ style={{
79
+ marginBottom: "16px",
80
+ }}
81
+ >
82
+ <CardBody
83
+ padding={6}
84
+ style={{ display: "flex", flexDirection: "column", gap: "6px" }}
85
+ >
86
+ <Flex direction="column" gap={3} style={{ marginBottom: "32px" }}>
87
+ <Flex alignItems="center" gap={2}>
88
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
89
+ Reference:
90
+ </Typography>
91
+ <Typography variant="pi" textColor="neutral800">
92
+ {transaction.reference}
93
+ </Typography>
94
+ </Flex>
95
+ <Flex alignItems="center" gap={2}>
96
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
97
+ Date:
98
+ </Typography>
99
+ <Typography variant="pi" textColor="neutral800">
100
+ {formatDate(transaction.timestamp)}
101
+ </Typography>
102
+ </Flex>
103
+
104
+ <Flex alignItems="center" gap={2}>
105
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
106
+ Method:
107
+ </Typography>
108
+ <Typography variant="pi" textColor="neutral800">
109
+ {getPaymentMethodName(
110
+ transaction.raw_request?.clearingtype,
111
+ transaction.raw_request?.wallettype
112
+ )}
113
+ </Typography>
114
+ {transaction.txid && (
115
+ <>
116
+ <Typography variant="pi" textColor="neutral500">
117
+ •
118
+ </Typography>
119
+ <Typography variant="pi" textColor="neutral600">
120
+ TX: {transaction.txid}
121
+ </Typography>
122
+ </>
123
+ )}
124
+ </Flex>
125
+
126
+ <Flex alignItems="center" gap={2}>
127
+ <Typography variant="pi" textColor="neutral600" fontWeight="medium">
128
+ Amount:
129
+ </Typography>
130
+ <Typography
131
+ variant="pi"
132
+ fontWeight="bold"
133
+ textColor="primary600"
134
+ fontSize={2}
135
+ >
136
+ {formatAmount(transaction.amount, transaction.currency)}
137
+ </Typography>
138
+ <Badge
139
+ backgroundColor={getStatusColor(transaction.status)}
140
+ textColor="neutral0"
141
+ >
142
+ {transaction.status}
143
+ </Badge>
144
+ </Flex>
145
+ </Flex>
146
+
147
+ <Flex justifyContent="center">
148
+ <Button
149
+ size="S"
150
+ onClick={() => setIsExpanded(!isExpanded)}
151
+ startIcon={
152
+ isExpanded ? (
153
+ <ChevronUpIcon size={16} />
154
+ ) : (
155
+ <ChevronDownIcon size={16} />
156
+ )
157
+ }
158
+ className="payment-button payment-button-primary"
159
+ >
160
+ {isExpanded ? "Hide Details" : "Show Details"}
161
+ </Button>
162
+ </Flex>
163
+
164
+ {isExpanded && (
165
+ <Flex
166
+ marginTop={4}
167
+ style={{
168
+ animation: "fadeIn 0.3s ease-out",
169
+ gap: "32px",
170
+ }}
171
+ >
172
+ <Flex direction="column" gap={4}>
173
+ {transaction.status === "ERROR" && (
174
+ <Box
175
+ padding={3}
176
+ background="danger100"
177
+ hasRadius
178
+ className="payment-alert"
179
+ style={{
180
+ border: "1px solid",
181
+ borderColor: "var(--strapi-colors-danger200)",
182
+ }}
183
+ >
184
+ <Typography
185
+ variant="pi"
186
+ fontWeight="bold"
187
+ textColor="danger600"
188
+ marginBottom={1}
189
+ >
190
+ Error: {transaction.error_message}
191
+ </Typography>
192
+ {transaction.customer_message && (
193
+ <Typography variant="pi" textColor="danger600">
194
+ Customer Message: {transaction.customer_message}
195
+ </Typography>
196
+ )}
197
+ </Box>
198
+ )}
199
+ <Box>
200
+ <Flex alignItems="center" gap={2} marginBottom={3}>
201
+ <Typography
202
+ variant="pi"
203
+ fontWeight="bold"
204
+ textColor="neutral800"
205
+ >
206
+ Customer Information
207
+ </Typography>
208
+ </Flex>
209
+ <Box paddingLeft={4}>
210
+ <Flex direction="column" gap={2}>
211
+ <Flex justifyContent="space-between" gap={3}>
212
+ <Typography
213
+ variant="pi"
214
+ textColor="neutral600"
215
+ fontWeight="medium"
216
+ >
217
+ Name:
218
+ </Typography>
219
+ <Typography variant="pi" textColor="neutral800">
220
+ {transaction.raw_request?.firstname}{" "}
221
+ {transaction.raw_request?.lastname}
222
+ </Typography>
223
+ </Flex>
224
+ <Flex justifyContent="space-between" gap={3}>
225
+ <Typography
226
+ variant="pi"
227
+ textColor="neutral600"
228
+ fontWeight="medium"
229
+ >
230
+ Email:
231
+ </Typography>
232
+ <Typography variant="pi" textColor="neutral800">
233
+ {transaction.raw_request?.email}
234
+ </Typography>
235
+ </Flex>
236
+ <Flex justifyContent="space-between" gap={3}>
237
+ <Typography
238
+ variant="pi"
239
+ textColor="neutral600"
240
+ fontWeight="medium"
241
+ >
242
+ Phone:
243
+ </Typography>
244
+ <Typography variant="pi" textColor="neutral800">
245
+ {transaction.raw_request?.telephonenumber}
246
+ </Typography>
247
+ </Flex>
248
+ <Flex justifyContent="space-between" gap={3}>
249
+ <Typography
250
+ variant="pi"
251
+ textColor="neutral600"
252
+ fontWeight="medium"
253
+ >
254
+ Address:
255
+ </Typography>
256
+ <Typography variant="pi" textColor="neutral800">
257
+ {transaction.raw_request?.street},{" "}
258
+ {transaction.raw_request?.zip}{" "}
259
+ {transaction.raw_request?.city}
260
+ </Typography>
261
+ </Flex>
262
+ <Flex justifyContent="space-between" gap={3}>
263
+ <Typography
264
+ variant="pi"
265
+ textColor="neutral600"
266
+ fontWeight="medium"
267
+ >
268
+ Country:
269
+ </Typography>
270
+ <Typography variant="pi" textColor="neutral800">
271
+ {transaction.raw_request?.country}
272
+ </Typography>
273
+ </Flex>
274
+ </Flex>
275
+ </Box>
276
+ </Box>
277
+
278
+ <Box>
279
+ <Flex alignItems="center" gap={2} marginBottom={3}>
280
+ <Typography
281
+ variant="pi"
282
+ fontWeight="bold"
283
+ textColor="neutral800"
284
+ >
285
+ Payment Method Details
286
+ </Typography>
287
+ </Flex>
288
+ <Box paddingLeft={4}>
289
+ <Flex direction="column" gap={2}>
290
+ <Flex justifyContent="space-between" gap={3}>
291
+ <Typography
292
+ variant="pi"
293
+ textColor="neutral600"
294
+ fontWeight="medium"
295
+ >
296
+ Type:
297
+ </Typography>
298
+ <Typography variant="pi" textColor="neutral800">
299
+ {getPaymentMethodName(
300
+ transaction.raw_request?.clearingtype,
301
+ transaction.raw_request?.wallettype
302
+ )}
303
+ </Typography>
304
+ </Flex>
305
+
306
+ {isCreditCard(transaction) && (
307
+ <>
308
+ <Flex justifyContent="space-between" gap={3}>
309
+ <Typography
310
+ variant="pi"
311
+ textColor="neutral600"
312
+ fontWeight="medium"
313
+ >
314
+ Card Type:
315
+ </Typography>
316
+ <Typography variant="pi" textColor="neutral800">
317
+ {getCardTypeName(transaction.raw_request?.cardtype)}
318
+ </Typography>
319
+ </Flex>
320
+ <Flex justifyContent="space-between" gap={3}>
321
+ <Typography
322
+ variant="pi"
323
+ textColor="neutral600"
324
+ fontWeight="medium"
325
+ >
326
+ Card Number:
327
+ </Typography>
328
+ <Typography variant="pi" textColor="neutral800">
329
+ **** **** ****{" "}
330
+ {transaction.raw_request?.cardpan?.slice(-4)}
331
+ </Typography>
332
+ </Flex>
333
+ <Flex justifyContent="space-between" gap={3}>
334
+ <Typography
335
+ variant="pi"
336
+ textColor="neutral600"
337
+ fontWeight="medium"
338
+ >
339
+ Expiry:
340
+ </Typography>
341
+ <Typography variant="pi" textColor="neutral800">
342
+ {transaction.raw_request?.cardexpiredate}
343
+ </Typography>
344
+ </Flex>
345
+ {transaction.raw_request?.cardFirstname && (
346
+ <Flex justifyContent="space-between" gap={3}>
347
+ <Typography
348
+ variant="pi"
349
+ textColor="neutral600"
350
+ fontWeight="medium"
351
+ >
352
+ Name on Card:
353
+ </Typography>
354
+ <Typography variant="pi" textColor="neutral800">
355
+ {transaction.raw_request?.cardFirstname}{" "}
356
+ {transaction.raw_request?.cardLastname}
357
+ </Typography>
358
+ </Flex>
359
+ )}
360
+ </>
361
+ )}
362
+
363
+ {transaction.raw_request?.clearingtype === "wlt" &&
364
+ transaction.raw_request?.wallettype && (
365
+ <Flex justifyContent="space-between" gap={3}>
366
+ <Typography
367
+ variant="pi"
368
+ textColor="neutral600"
369
+ fontWeight="medium"
370
+ >
371
+ Wallet Type:
372
+ </Typography>
373
+ <Typography variant="pi" textColor="neutral800">
374
+ {transaction.raw_request.wallettype}
375
+ </Typography>
376
+ </Flex>
377
+ )}
378
+
379
+ {transaction.raw_request?.clearingtype === "sb" && (
380
+ <>
381
+ <Flex justifyContent="space-between" gap={3}>
382
+ <Typography
383
+ variant="pi"
384
+ textColor="neutral600"
385
+ fontWeight="medium"
386
+ >
387
+ Bank Transfer Type:
388
+ </Typography>
389
+ <Typography variant="pi" textColor="neutral800">
390
+ {transaction.raw_request?.onlinebanktransfertype}
391
+ </Typography>
392
+ </Flex>
393
+ <Flex justifyContent="space-between" gap={3}>
394
+ <Typography
395
+ variant="pi"
396
+ textColor="neutral600"
397
+ fontWeight="medium"
398
+ >
399
+ Bank Country:
400
+ </Typography>
401
+ <Typography variant="pi" textColor="neutral800">
402
+ {transaction.raw_request?.bankcountry}
403
+ </Typography>
404
+ </Flex>
405
+ </>
406
+ )}
407
+ </Flex>
408
+ </Box>
409
+ </Box>
410
+
411
+ <Box>
412
+ <Typography
413
+ variant="pi"
414
+ fontWeight="bold"
415
+ textColor="neutral800"
416
+ marginBottom={3}
417
+ >
418
+ Technical Details
419
+ </Typography>
420
+ <Box paddingLeft={4}>
421
+ <Flex direction="column" gap={2}>
422
+ <Flex justifyContent="space-between" gap={3}>
423
+ <Typography
424
+ variant="pi"
425
+ textColor="neutral600"
426
+ fontWeight="medium"
427
+ >
428
+ Request Type:
429
+ </Typography>
430
+ <Typography variant="pi" textColor="neutral800">
431
+ {transaction.request_type}
432
+ </Typography>
433
+ </Flex>
434
+ <Flex justifyContent="space-between" gap={3}>
435
+ <Typography
436
+ variant="pi"
437
+ textColor="neutral600"
438
+ fontWeight="medium"
439
+ >
440
+ Mode:
441
+ </Typography>
442
+ <Typography variant="pi" textColor="neutral800">
443
+ {transaction.raw_request?.mode}
444
+ </Typography>
445
+ </Flex>
446
+ <Flex justifyContent="space-between" gap={3}>
447
+ <Typography
448
+ variant="pi"
449
+ textColor="neutral600"
450
+ fontWeight="medium"
451
+ >
452
+ IP Address:
453
+ </Typography>
454
+ <Typography variant="pi" textColor="neutral800">
455
+ {transaction.raw_request?.ip}
456
+ </Typography>
457
+ </Flex>
458
+ <Flex justifyContent="space-between" gap={3}>
459
+ <Typography
460
+ variant="pi"
461
+ textColor="neutral600"
462
+ fontWeight="medium"
463
+ >
464
+ Language:
465
+ </Typography>
466
+ <Typography variant="pi" textColor="neutral800">
467
+ {transaction.raw_request?.language}
468
+ </Typography>
469
+ </Flex>
470
+ <Flex justifyContent="space-between" gap={3}>
471
+ <Typography
472
+ variant="pi"
473
+ textColor="neutral600"
474
+ fontWeight="medium"
475
+ >
476
+ Customer Present:
477
+ </Typography>
478
+ <Typography variant="pi" textColor="neutral800">
479
+ {transaction.raw_request?.customer_is_present}
480
+ </Typography>
481
+ </Flex>
482
+ </Flex>
483
+ </Box>
484
+ </Box>
485
+ </Flex>
486
+
487
+ <Flex direction="column" gap={4}>
488
+ <Typography variant="pi" fontWeight="bold" textColor="neutral800">
489
+ Raw Body
490
+ </Typography>
491
+ <Box
492
+ padding={4}
493
+ background="neutral100"
494
+ hasRadius
495
+ style={{
496
+ border: "1px solid",
497
+ borderColor: "var(--strapi-colors-neutral200)",
498
+ overflow: "auto",
499
+ maxHeight: "500px",
500
+ maxWidth: "800px",
501
+ }}
502
+ >
503
+ <pre
504
+ style={{
505
+ margin: 0,
506
+ padding: 0,
507
+ fontFamily: "monospace",
508
+ fontSize: "13px",
509
+ lineHeight: "1.5",
510
+ color: "Highlight",
511
+ whiteSpace: "pre-wrap",
512
+ wordBreak: "break-word",
513
+ }}
514
+ >
515
+ {JSON.stringify(transaction?.body || {}, null, 2)}
516
+ </pre>
517
+ </Box>
518
+ </Flex>
519
+ </Flex>
520
+ )}
521
+ </CardBody>
522
+ </Card>
523
+ );
524
+ };
525
+
526
+ export default TransactionHistoryItem;