strapi-plugin-payone-provider 1.1.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.
- package/admin/src/pages/App/components/TransactionHistoryItem.js +374 -374
- package/admin/src/pages/App/components/icons/BankIcon.js +10 -10
- package/admin/src/pages/App/components/icons/ChevronDownIcon.js +9 -9
- package/admin/src/pages/App/components/icons/ChevronUpIcon.js +9 -9
- package/admin/src/pages/App/components/icons/CreditCardIcon.js +9 -9
- package/admin/src/pages/App/components/icons/ErrorIcon.js +10 -10
- package/admin/src/pages/App/components/icons/InfoIcon.js +9 -9
- package/admin/src/pages/App/components/icons/PaymentIcon.js +10 -10
- package/admin/src/pages/App/components/icons/PendingIcon.js +9 -9
- package/admin/src/pages/App/components/icons/PersonIcon.js +9 -9
- package/admin/src/pages/App/components/icons/SuccessIcon.js +9 -9
- package/admin/src/pages/App/components/icons/WalletIcon.js +9 -9
- package/admin/src/pages/App/components/icons/index.js +11 -11
- package/admin/src/pages/utils/formatTransactionData.js +15 -15
- package/admin/src/pluginId.js +5 -1
- package/package.json +1 -1
- package/server/bootstrap.js +1 -1
- package/server/controllers/payone.js +9 -9
- package/server/policies/is-auth.js +1 -1
- package/server/routes/index.js +5 -5
- package/server/services/payone.js +4 -4
|
@@ -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;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const BankIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
-
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill={color} />
|
|
6
|
-
<path d="M12 6l-1.5 3L7 8.5l2.5 2.5L8 14l4-2.5L16 14l-1.5-3L18 8.5l-3.5.5L12 6z" fill={color} />
|
|
7
|
-
</svg>
|
|
8
|
-
);
|
|
9
|
-
|
|
10
|
-
export default BankIcon;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const BankIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill={color} />
|
|
6
|
+
<path d="M12 6l-1.5 3L7 8.5l2.5 2.5L8 14l4-2.5L16 14l-1.5-3L18 8.5l-3.5.5L12 6z" fill={color} />
|
|
7
|
+
</svg>
|
|
8
|
+
);
|
|
9
|
+
|
|
10
|
+
export default BankIcon;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const ChevronDownIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
-
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill={color} />
|
|
6
|
-
</svg>
|
|
7
|
-
);
|
|
8
|
-
|
|
9
|
-
export default ChevronDownIcon;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const ChevronDownIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill={color} />
|
|
6
|
+
</svg>
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
export default ChevronDownIcon;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const ChevronUpIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
-
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill={color} />
|
|
6
|
-
</svg>
|
|
7
|
-
);
|
|
8
|
-
|
|
9
|
-
export default ChevronUpIcon;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const ChevronUpIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill={color} />
|
|
6
|
+
</svg>
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
export default ChevronUpIcon;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const CreditCardIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
-
<path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" fill={color} />
|
|
6
|
-
</svg>
|
|
7
|
-
);
|
|
8
|
-
|
|
9
|
-
export default CreditCardIcon;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const CreditCardIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" fill={color} />
|
|
6
|
+
</svg>
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
export default CreditCardIcon;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const ErrorIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
-
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill={color} />
|
|
6
|
-
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill={color} />
|
|
7
|
-
</svg>
|
|
8
|
-
);
|
|
9
|
-
|
|
10
|
-
export default ErrorIcon;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const ErrorIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill={color} />
|
|
6
|
+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill={color} />
|
|
7
|
+
</svg>
|
|
8
|
+
);
|
|
9
|
+
|
|
10
|
+
export default ErrorIcon;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const InfoIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
-
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill={color} />
|
|
6
|
-
</svg>
|
|
7
|
-
);
|
|
8
|
-
|
|
9
|
-
export default InfoIcon;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const InfoIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill={color} />
|
|
6
|
+
</svg>
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
export default InfoIcon;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const PaymentIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
-
<path d="M2 8h20v12H2V8zm2 2v8h16V10H4z" fill={color} />
|
|
6
|
-
<path d="M2 4h20v2H2V4z" fill={color} />
|
|
7
|
-
</svg>
|
|
8
|
-
);
|
|
9
|
-
|
|
10
|
-
export default PaymentIcon;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const PaymentIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M2 8h20v12H2V8zm2 2v8h16V10H4z" fill={color} />
|
|
6
|
+
<path d="M2 4h20v2H2V4z" fill={color} />
|
|
7
|
+
</svg>
|
|
8
|
+
);
|
|
9
|
+
|
|
10
|
+
export default PaymentIcon;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const PendingIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
-
<path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill={color} />
|
|
6
|
-
</svg>
|
|
7
|
-
);
|
|
8
|
-
|
|
9
|
-
export default PendingIcon;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const PendingIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill={color} />
|
|
6
|
+
</svg>
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
export default PendingIcon;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const PersonIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
-
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill={color} />
|
|
6
|
-
</svg>
|
|
7
|
-
);
|
|
8
|
-
|
|
9
|
-
export default PersonIcon;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const PersonIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill={color} />
|
|
6
|
+
</svg>
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
export default PersonIcon;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const SuccessIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
-
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill={color} />
|
|
6
|
-
</svg>
|
|
7
|
-
);
|
|
8
|
-
|
|
9
|
-
export default SuccessIcon;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const SuccessIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill={color} />
|
|
6
|
+
</svg>
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
export default SuccessIcon;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const WalletIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
-
<path d="M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z" fill={color} />
|
|
6
|
-
</svg>
|
|
7
|
-
);
|
|
8
|
-
|
|
9
|
-
export default WalletIcon;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const WalletIcon = ({ size = 16, color = 'currentColor' }) => (
|
|
4
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z" fill={color} />
|
|
6
|
+
</svg>
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
export default WalletIcon;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export { default as PaymentIcon } from './PaymentIcon';
|
|
2
|
-
export { default as PersonIcon } from './PersonIcon';
|
|
3
|
-
export { default as CreditCardIcon } from './CreditCardIcon';
|
|
4
|
-
export { default as BankIcon } from './BankIcon';
|
|
5
|
-
export { default as WalletIcon } from './WalletIcon';
|
|
6
|
-
export { default as ErrorIcon } from './ErrorIcon';
|
|
7
|
-
export { default as SuccessIcon } from './SuccessIcon';
|
|
8
|
-
export { default as PendingIcon } from './PendingIcon';
|
|
9
|
-
export { default as InfoIcon } from './InfoIcon';
|
|
10
|
-
export { default as ChevronDownIcon } from './ChevronDownIcon';
|
|
11
|
-
export { default as ChevronUpIcon } from './ChevronUpIcon';
|
|
1
|
+
export { default as PaymentIcon } from './PaymentIcon';
|
|
2
|
+
export { default as PersonIcon } from './PersonIcon';
|
|
3
|
+
export { default as CreditCardIcon } from './CreditCardIcon';
|
|
4
|
+
export { default as BankIcon } from './BankIcon';
|
|
5
|
+
export { default as WalletIcon } from './WalletIcon';
|
|
6
|
+
export { default as ErrorIcon } from './ErrorIcon';
|
|
7
|
+
export { default as SuccessIcon } from './SuccessIcon';
|
|
8
|
+
export { default as PendingIcon } from './PendingIcon';
|
|
9
|
+
export { default as InfoIcon } from './InfoIcon';
|
|
10
|
+
export { default as ChevronDownIcon } from './ChevronDownIcon';
|
|
11
|
+
export { default as ChevronUpIcon } from './ChevronUpIcon';
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
export const formatTransactionData = (data) => {
|
|
2
|
-
const formattedData = [];
|
|
3
|
-
if (!data || typeof data !== "object") return formattedData;
|
|
4
|
-
|
|
5
|
-
for (const [key, value] of Object.entries(data)) {
|
|
6
|
-
if (value !== null && value !== undefined) {
|
|
7
|
-
formattedData.push({
|
|
8
|
-
key:
|
|
9
|
-
key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, " $1"),
|
|
10
|
-
value: typeof value === "object" ? JSON.stringify(value) : String(value)
|
|
11
|
-
});
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
return formattedData;
|
|
1
|
+
export const formatTransactionData = (data) => {
|
|
2
|
+
const formattedData = [];
|
|
3
|
+
if (!data || typeof data !== "object") return formattedData;
|
|
4
|
+
|
|
5
|
+
for (const [key, value] of Object.entries(data)) {
|
|
6
|
+
if (value !== null && value !== undefined) {
|
|
7
|
+
formattedData.push({
|
|
8
|
+
key:
|
|
9
|
+
key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, " $1"),
|
|
10
|
+
value: typeof value === "object" ? JSON.stringify(value) : String(value)
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
return formattedData;
|
|
16
16
|
};
|
package/admin/src/pluginId.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import pluginPkg from "../../package.json";
|
|
2
2
|
|
|
3
|
+
// Extract plugin ID from package name
|
|
4
|
+
// Package name: 'strapi-plugin-payone-provider'
|
|
5
|
+
// Plugin ID should be: 'strapi-plugin-payone-provider' (matches package name)
|
|
3
6
|
const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');
|
|
4
7
|
|
|
5
|
-
|
|
8
|
+
// Keep the full name including -provider suffix
|
|
9
|
+
export default `strapi-plugin-${pluginId}`;
|
package/package.json
CHANGED
package/server/bootstrap.js
CHANGED
|
@@ -4,7 +4,7 @@ module.exports = ({ strapi }) => ({
|
|
|
4
4
|
async getSettings(ctx) {
|
|
5
5
|
try {
|
|
6
6
|
const settings = await strapi
|
|
7
|
-
.plugin("strapi-plugin-payone")
|
|
7
|
+
.plugin("strapi-plugin-payone-provider")
|
|
8
8
|
.service("payone")
|
|
9
9
|
.getSettings();
|
|
10
10
|
|
|
@@ -23,7 +23,7 @@ module.exports = ({ strapi }) => ({
|
|
|
23
23
|
const { body } = ctx.request;
|
|
24
24
|
|
|
25
25
|
const currentSettings = await strapi
|
|
26
|
-
.plugin("strapi-plugin-payone")
|
|
26
|
+
.plugin("strapi-plugin-payone-provider")
|
|
27
27
|
.service("payone")
|
|
28
28
|
.getSettings();
|
|
29
29
|
|
|
@@ -32,7 +32,7 @@ module.exports = ({ strapi }) => ({
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
const settings = await strapi
|
|
35
|
-
.plugin("strapi-plugin-payone")
|
|
35
|
+
.plugin("strapi-plugin-payone-provider")
|
|
36
36
|
.service("payone")
|
|
37
37
|
.updateSettings(body);
|
|
38
38
|
|
|
@@ -50,7 +50,7 @@ module.exports = ({ strapi }) => ({
|
|
|
50
50
|
try {
|
|
51
51
|
const params = ctx.request.body;
|
|
52
52
|
const result = await strapi
|
|
53
|
-
.plugin("strapi-plugin-payone")
|
|
53
|
+
.plugin("strapi-plugin-payone-provider")
|
|
54
54
|
.service("payone")
|
|
55
55
|
.preauthorization(params);
|
|
56
56
|
|
|
@@ -66,7 +66,7 @@ module.exports = ({ strapi }) => ({
|
|
|
66
66
|
strapi.log.info("Payone authorization controller called with:", params);
|
|
67
67
|
|
|
68
68
|
const result = await strapi
|
|
69
|
-
.plugin("strapi-plugin-payone")
|
|
69
|
+
.plugin("strapi-plugin-payone-provider")
|
|
70
70
|
.service("payone")
|
|
71
71
|
.authorization(params);
|
|
72
72
|
|
|
@@ -81,7 +81,7 @@ module.exports = ({ strapi }) => ({
|
|
|
81
81
|
try {
|
|
82
82
|
const params = ctx.request.body;
|
|
83
83
|
const result = await strapi
|
|
84
|
-
.plugin("strapi-plugin-payone")
|
|
84
|
+
.plugin("strapi-plugin-payone-provider")
|
|
85
85
|
.service("payone")
|
|
86
86
|
.capture(params);
|
|
87
87
|
|
|
@@ -95,7 +95,7 @@ module.exports = ({ strapi }) => ({
|
|
|
95
95
|
try {
|
|
96
96
|
const params = ctx.request.body;
|
|
97
97
|
const result = await strapi
|
|
98
|
-
.plugin("strapi-plugin-payone")
|
|
98
|
+
.plugin("strapi-plugin-payone-provider")
|
|
99
99
|
.service("payone")
|
|
100
100
|
.refund(params);
|
|
101
101
|
|
|
@@ -109,7 +109,7 @@ module.exports = ({ strapi }) => ({
|
|
|
109
109
|
try {
|
|
110
110
|
const filters = ctx.query || {};
|
|
111
111
|
const history = await strapi
|
|
112
|
-
.plugin("strapi-plugin-payone")
|
|
112
|
+
.plugin("strapi-plugin-payone-provider")
|
|
113
113
|
.service("payone")
|
|
114
114
|
.getTransactionHistory(filters);
|
|
115
115
|
|
|
@@ -122,7 +122,7 @@ module.exports = ({ strapi }) => ({
|
|
|
122
122
|
async testConnection(ctx) {
|
|
123
123
|
try {
|
|
124
124
|
const result = await strapi
|
|
125
|
-
.plugin("strapi-plugin-payone")
|
|
125
|
+
.plugin("strapi-plugin-payone-provider")
|
|
126
126
|
.service("payone")
|
|
127
127
|
.testConnection();
|
|
128
128
|
|
|
@@ -15,7 +15,7 @@ module.exports = async (ctx, config, { strapi }) => {
|
|
|
15
15
|
return true;
|
|
16
16
|
}
|
|
17
17
|
} catch (e) {
|
|
18
|
-
strapi.log.warn("strapi-plugin-payone isAuth policy error:", e.message);
|
|
18
|
+
strapi.log.warn("strapi-plugin-payone-provider isAuth policy error:", e.message);
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
|
package/server/routes/index.js
CHANGED
|
@@ -79,7 +79,7 @@ module.exports = {
|
|
|
79
79
|
path: "/preauthorization",
|
|
80
80
|
handler: "payone.preauthorization",
|
|
81
81
|
config: {
|
|
82
|
-
policies: ["plugin::strapi-plugin-payone.is-auth"],
|
|
82
|
+
policies: ["plugin::strapi-plugin-payone-provider.is-auth"],
|
|
83
83
|
auth: false
|
|
84
84
|
}
|
|
85
85
|
},
|
|
@@ -88,7 +88,7 @@ module.exports = {
|
|
|
88
88
|
path: "/authorization",
|
|
89
89
|
handler: "payone.authorization",
|
|
90
90
|
config: {
|
|
91
|
-
policies: ["plugin::strapi-plugin-payone.is-auth"],
|
|
91
|
+
policies: ["plugin::strapi-plugin-payone-provider.is-auth"],
|
|
92
92
|
auth: false
|
|
93
93
|
}
|
|
94
94
|
},
|
|
@@ -97,7 +97,7 @@ module.exports = {
|
|
|
97
97
|
path: "/capture",
|
|
98
98
|
handler: "payone.capture",
|
|
99
99
|
config: {
|
|
100
|
-
policies: ["plugin::strapi-plugin-payone.is-auth"],
|
|
100
|
+
policies: ["plugin::strapi-plugin-payone-provider.is-auth"],
|
|
101
101
|
auth: false
|
|
102
102
|
}
|
|
103
103
|
},
|
|
@@ -106,7 +106,7 @@ module.exports = {
|
|
|
106
106
|
path: "/refund",
|
|
107
107
|
handler: "payone.refund",
|
|
108
108
|
config: {
|
|
109
|
-
policies: ["plugin::strapi-plugin-payone.is-auth"],
|
|
109
|
+
policies: ["plugin::strapi-plugin-payone-provider.is-auth"],
|
|
110
110
|
auth: false
|
|
111
111
|
}
|
|
112
112
|
},
|
|
@@ -115,7 +115,7 @@ module.exports = {
|
|
|
115
115
|
path: "/test-connection",
|
|
116
116
|
handler: "payone.testConnection",
|
|
117
117
|
config: {
|
|
118
|
-
policies: ["plugin::strapi-plugin-payone.is-auth"],
|
|
118
|
+
policies: ["plugin::strapi-plugin-payone-provider.is-auth"],
|
|
119
119
|
auth: false
|
|
120
120
|
}
|
|
121
121
|
}
|
|
@@ -66,7 +66,7 @@ module.exports = ({ strapi }) => ({
|
|
|
66
66
|
const pluginStore = strapi.store({
|
|
67
67
|
environment: "",
|
|
68
68
|
type: "plugin",
|
|
69
|
-
name: "strapi-plugin-payone"
|
|
69
|
+
name: "strapi-plugin-payone-provider"
|
|
70
70
|
});
|
|
71
71
|
return await pluginStore.get({ key: "settings" });
|
|
72
72
|
},
|
|
@@ -75,7 +75,7 @@ module.exports = ({ strapi }) => ({
|
|
|
75
75
|
const pluginStore = strapi.store({
|
|
76
76
|
environment: "",
|
|
77
77
|
type: "plugin",
|
|
78
|
-
name: "strapi-plugin-payone"
|
|
78
|
+
name: "strapi-plugin-payone-provider"
|
|
79
79
|
});
|
|
80
80
|
await pluginStore.set({
|
|
81
81
|
key: "settings",
|
|
@@ -350,7 +350,7 @@ module.exports = ({ strapi }) => ({
|
|
|
350
350
|
const pluginStore = strapi.store({
|
|
351
351
|
environment: "",
|
|
352
352
|
type: "plugin",
|
|
353
|
-
name: "strapi-plugin-payone"
|
|
353
|
+
name: "strapi-plugin-payone-provider"
|
|
354
354
|
});
|
|
355
355
|
|
|
356
356
|
let transactionHistory =
|
|
@@ -400,7 +400,7 @@ module.exports = ({ strapi }) => ({
|
|
|
400
400
|
const pluginStore = strapi.store({
|
|
401
401
|
environment: "",
|
|
402
402
|
type: "plugin",
|
|
403
|
-
name: "strapi-plugin-payone"
|
|
403
|
+
name: "strapi-plugin-payone-provider"
|
|
404
404
|
});
|
|
405
405
|
|
|
406
406
|
let transactionHistory =
|