@riskdefy/chargebacks 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +10 -5
- package/src/.babelrc +3 -0
- package/src/components/Chargebacks.vue +28 -0
- package/src/components/Details.vue +789 -0
- package/src/components/FluidPayDetails.vue +314 -0
- package/src/components/IncomingDetails.vue +621 -0
- package/src/components/InovioPayDetails.vue +316 -0
- package/src/components/NmiDetails.vue +162 -0
- package/src/components/NuveiDetails.vue +320 -0
- package/src/components/ReasonExplained.vue +121 -0
- package/src/components/SquareUp.vue +316 -0
- package/src/components/Summary.vue +218 -0
- package/src/components/USAEPayDetails.vue +181 -0
- package/src/index.js +10 -0
- package/src/service/api.js +23 -0
- package/dist/Chargebacks.cjs.js +0 -1284
- package/dist/Chargebacks.es.js +0 -30409
- package/dist/Chargebacks.umd.js +0 -1284
- package/dist/chargebacks.css +0 -1
|
@@ -0,0 +1,789 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<!--begin::Card-->
|
|
3
|
+
<div class="card card-flush mb-5">
|
|
4
|
+
<!--begin::Card header-->
|
|
5
|
+
<div class="card card-body pb-2">
|
|
6
|
+
<!--begin::Card title-->
|
|
7
|
+
<div class="card-title">
|
|
8
|
+
<h4 class="fw-normal fs-6">Chargeback Details</h4>
|
|
9
|
+
</div>
|
|
10
|
+
<!--begin::Card title-->
|
|
11
|
+
|
|
12
|
+
<!--begin::Card toolbar-->
|
|
13
|
+
<!--<div class="card-toolbar">
|
|
14
|
+
<router-link
|
|
15
|
+
to="/merchants/chargebacks/incoming"
|
|
16
|
+
class="btn btn-light-primary btn-clean btn-sm py-2"
|
|
17
|
+
>Related Chargebacks</router-link
|
|
18
|
+
>
|
|
19
|
+
</div>-->
|
|
20
|
+
<!--end::Card toolbar-->
|
|
21
|
+
</div>
|
|
22
|
+
<!--end::Card header-->
|
|
23
|
+
<!--begin::Card body-->
|
|
24
|
+
<div class="px-9 mb-7">
|
|
25
|
+
<!--begin::Details-->
|
|
26
|
+
<div class="d-flex flex-wrap">
|
|
27
|
+
<!--begin::Row-->
|
|
28
|
+
<div class="flex-equal">
|
|
29
|
+
<!--begin::Details-->
|
|
30
|
+
<table class="table fw-bold gs-0 gy-1 gx-1 m-0">
|
|
31
|
+
<!--begin::Row-->
|
|
32
|
+
<tr>
|
|
33
|
+
<td class="text-muted w-auto">ID:</td>
|
|
34
|
+
<td class="text-gray-800">{{ incoming.id }}</td>
|
|
35
|
+
</tr>
|
|
36
|
+
<!--end::Row-->
|
|
37
|
+
|
|
38
|
+
<!--begin::Row-->
|
|
39
|
+
<tr>
|
|
40
|
+
<td class="text-muted w-auto">Case Number:</td>
|
|
41
|
+
<td class="text-gray-800">{{ incoming.case_number }}</td>
|
|
42
|
+
</tr>
|
|
43
|
+
<!--end::Row-->
|
|
44
|
+
|
|
45
|
+
<!--begin::Row-->
|
|
46
|
+
<tr>
|
|
47
|
+
<td class="text-muted w-auto">Amount:</td>
|
|
48
|
+
<td class="text-gray-800">
|
|
49
|
+
${{ incoming.dispute_amount
|
|
50
|
+
}}<span class="text-boldest">{{ incoming.currency }}</span>
|
|
51
|
+
</td>
|
|
52
|
+
</tr>
|
|
53
|
+
<!--end::Row-->
|
|
54
|
+
|
|
55
|
+
<!--begin::Row incoming.card_holder.phone-->
|
|
56
|
+
<tr>
|
|
57
|
+
<td class="text-muted w-auto">Dispute Date:</td>
|
|
58
|
+
<td class="text-gray-800">{{ incoming.dispute_date }}</td>
|
|
59
|
+
</tr>
|
|
60
|
+
<!--end::Row-->
|
|
61
|
+
</table>
|
|
62
|
+
<!--end::Details-->
|
|
63
|
+
</div>
|
|
64
|
+
<!--end::Row-->
|
|
65
|
+
|
|
66
|
+
<!--begin::Row-->
|
|
67
|
+
<div class="flex-equal">
|
|
68
|
+
<!--begin::Details-->
|
|
69
|
+
<table class="table fw-bold gs-0 gy-1 gx-1 m-0">
|
|
70
|
+
<tr>
|
|
71
|
+
<td class="text-muted w-auto">Due Date:</td>
|
|
72
|
+
<td class="text-gray-800 badge badge-sm badge-light-warning p-2">
|
|
73
|
+
{{ incoming.expire_date }}
|
|
74
|
+
</td>
|
|
75
|
+
</tr>
|
|
76
|
+
|
|
77
|
+
<!--begin::Row-->
|
|
78
|
+
<tr>
|
|
79
|
+
<td class="text-muted w-auto w-auto">Reason Code:</td>
|
|
80
|
+
<td class="text-gray-800">
|
|
81
|
+
<a
|
|
82
|
+
class="text-dark p-0"
|
|
83
|
+
href="#chargeback_reason_explained"
|
|
84
|
+
data-bs-toggle="modal"
|
|
85
|
+
>
|
|
86
|
+
{{ incoming.reason }}
|
|
87
|
+
</a>
|
|
88
|
+
</td>
|
|
89
|
+
</tr>
|
|
90
|
+
<!--end::Row-->
|
|
91
|
+
<tr>
|
|
92
|
+
<td class="text-muted w-auto">Card Brand:</td>
|
|
93
|
+
<td class="text-gray-800">
|
|
94
|
+
<span class="ms-n3">
|
|
95
|
+
<img
|
|
96
|
+
v-if="
|
|
97
|
+
incoming.card &&
|
|
98
|
+
incoming.card !== 'null' &&
|
|
99
|
+
incoming.card.brand == 'Visa'
|
|
100
|
+
"
|
|
101
|
+
src="https://app.riskdefy.io/media/svg/card-logos/visa.png"
|
|
102
|
+
alt=""
|
|
103
|
+
class="h-20px"
|
|
104
|
+
/>
|
|
105
|
+
<img
|
|
106
|
+
v-if="
|
|
107
|
+
incoming.card &&
|
|
108
|
+
incoming.card !== 'null' &&
|
|
109
|
+
(incoming.card.brand == 'Mastercard' ||
|
|
110
|
+
incoming.card.brand == 'MasterCard')
|
|
111
|
+
"
|
|
112
|
+
src="https://app.riskdefy.io/media/svg/card-logos/mastercard.png"
|
|
113
|
+
alt=""
|
|
114
|
+
class="h-20px"
|
|
115
|
+
/>
|
|
116
|
+
<img
|
|
117
|
+
v-if="
|
|
118
|
+
incoming.card &&
|
|
119
|
+
incoming.card !== 'null' &&
|
|
120
|
+
(incoming.card.brand == 'Amex' ||
|
|
121
|
+
incoming.card.brand == 'AmericanExpress' ||
|
|
122
|
+
incoming.card.brand == 'American Express')
|
|
123
|
+
"
|
|
124
|
+
src="https://app.riskdefy.io/media/svg/card-logos/american-express.png"
|
|
125
|
+
alt=""
|
|
126
|
+
class="h-20px"
|
|
127
|
+
/>
|
|
128
|
+
<img
|
|
129
|
+
v-if="
|
|
130
|
+
incoming.card &&
|
|
131
|
+
incoming.card !== 'null' &&
|
|
132
|
+
incoming.card.brand == 'Discover'
|
|
133
|
+
"
|
|
134
|
+
src="https://app.riskdefy.io/media/svg/card-logos/discovercard.png"
|
|
135
|
+
alt=""
|
|
136
|
+
class="h-20px"
|
|
137
|
+
/>
|
|
138
|
+
</span>
|
|
139
|
+
</td>
|
|
140
|
+
</tr>
|
|
141
|
+
<!--begin::Row-->
|
|
142
|
+
<tr>
|
|
143
|
+
<td class="text-muted w-auto">Transaction Date:</td>
|
|
144
|
+
<td class="text-gray-800">{{ incoming.transaction_date }}</td>
|
|
145
|
+
</tr>
|
|
146
|
+
<!--end::Row-->
|
|
147
|
+
|
|
148
|
+
<!--begin::Row-->
|
|
149
|
+
<!--end::Row-->
|
|
150
|
+
</table>
|
|
151
|
+
<!--end::Details-->
|
|
152
|
+
</div>
|
|
153
|
+
<!--end::Row-->
|
|
154
|
+
</div>
|
|
155
|
+
<!--end::Row-->
|
|
156
|
+
</div>
|
|
157
|
+
<!--end::Card body-->
|
|
158
|
+
</div>
|
|
159
|
+
<!--end::Card-->
|
|
160
|
+
<div
|
|
161
|
+
class="card card-flush mb-5"
|
|
162
|
+
v-if="cardholder && Object.keys(cardholder).length > 0"
|
|
163
|
+
>
|
|
164
|
+
<!--begin::Card header-->
|
|
165
|
+
<div class="card card-body pb-2">
|
|
166
|
+
<!--begin::Card title-->
|
|
167
|
+
<div class="card-title">
|
|
168
|
+
<h4 class="fw-normal fs-6">Cardholder Details</h4>
|
|
169
|
+
</div>
|
|
170
|
+
<!--begin::Card title-->
|
|
171
|
+
|
|
172
|
+
<!--begin::Card toolbar-->
|
|
173
|
+
<!--<div class="card-toolbar">
|
|
174
|
+
<router-link
|
|
175
|
+
to="/merchants/chargebacks/incoming"
|
|
176
|
+
class="btn btn-light-primary btn-clean btn-sm py-2"
|
|
177
|
+
>Related Chargebacks</router-link
|
|
178
|
+
>
|
|
179
|
+
</div>-->
|
|
180
|
+
<!--end::Card toolbar-->
|
|
181
|
+
</div>
|
|
182
|
+
<!--end::Card header-->
|
|
183
|
+
<!--begin::Card body-->
|
|
184
|
+
<div class="px-9 mb-7">
|
|
185
|
+
<!--begin::Details-->
|
|
186
|
+
<div class="d-flex flex-wrap">
|
|
187
|
+
<!--begin::Row-->
|
|
188
|
+
<div class="flex-equal">
|
|
189
|
+
<!--begin::Details-->
|
|
190
|
+
<table class="table table-flush fw-bold gy-1">
|
|
191
|
+
<tbody>
|
|
192
|
+
<tr>
|
|
193
|
+
<td class="text-muted w-auto">First Name</td>
|
|
194
|
+
<td class="text-gray-800">
|
|
195
|
+
{{ cardholder.first_name }}
|
|
196
|
+
</td>
|
|
197
|
+
</tr>
|
|
198
|
+
<tr>
|
|
199
|
+
<td class="text-muted w-auto">Last Name</td>
|
|
200
|
+
<td class="text-gray-800">
|
|
201
|
+
{{ cardholder.last_name }}
|
|
202
|
+
</td>
|
|
203
|
+
</tr>
|
|
204
|
+
<tr>
|
|
205
|
+
<td class="text-muted w-auto">Email</td>
|
|
206
|
+
<td class="text-gray-800">
|
|
207
|
+
{{ cardholder.email }}
|
|
208
|
+
</td>
|
|
209
|
+
</tr>
|
|
210
|
+
<tr>
|
|
211
|
+
<td class="text-muted w-auto">Billing:</td>
|
|
212
|
+
<td class="text-gray-800">
|
|
213
|
+
{{ cardholder.billing_address }}
|
|
214
|
+
</td>
|
|
215
|
+
</tr>
|
|
216
|
+
</tbody>
|
|
217
|
+
</table>
|
|
218
|
+
<!--end::Details-->
|
|
219
|
+
</div>
|
|
220
|
+
<!--end::Row-->
|
|
221
|
+
|
|
222
|
+
<!--begin::Row-->
|
|
223
|
+
<div class="flex-equal">
|
|
224
|
+
<!--begin::Details-->
|
|
225
|
+
<table class="table table-flush fw-bold gy-1">
|
|
226
|
+
<tbody>
|
|
227
|
+
<tr>
|
|
228
|
+
<td class="text-muted w-auto">I.P Address</td>
|
|
229
|
+
<td class="text-gray-800">
|
|
230
|
+
{{ cardholder.ip_address }}
|
|
231
|
+
</td>
|
|
232
|
+
</tr>
|
|
233
|
+
<tr>
|
|
234
|
+
<td class="text-muted w-auto">Phone</td>
|
|
235
|
+
<td class="text-gray-800">
|
|
236
|
+
{{ formattedPhone }}
|
|
237
|
+
</td>
|
|
238
|
+
</tr>
|
|
239
|
+
<tr>
|
|
240
|
+
<td class="text-muted w-auto">Shipping:</td>
|
|
241
|
+
<td class="text-gray-800">
|
|
242
|
+
{{ cardholder.shipping_address }}
|
|
243
|
+
</td>
|
|
244
|
+
</tr>
|
|
245
|
+
</tbody>
|
|
246
|
+
</table>
|
|
247
|
+
<!--end::Details-->
|
|
248
|
+
</div>
|
|
249
|
+
<!--end::Row-->
|
|
250
|
+
</div>
|
|
251
|
+
<!--end::Row-->
|
|
252
|
+
</div>
|
|
253
|
+
<!--end::Card body-->
|
|
254
|
+
</div>
|
|
255
|
+
<div class="rounded border pt-0 mb-5">
|
|
256
|
+
<div class="accordion fs-7" id="kt_accordion">
|
|
257
|
+
<!-- Konnektive Details Accordion -->
|
|
258
|
+
<div
|
|
259
|
+
class="accordion-item"
|
|
260
|
+
v-if="orders && Object.keys(orders).length > 0"
|
|
261
|
+
>
|
|
262
|
+
<h2 class="accordion-header" id="kt_accordion_header_1">
|
|
263
|
+
<button
|
|
264
|
+
class="accordion-button fs-6 fw-normal"
|
|
265
|
+
type="button"
|
|
266
|
+
data-bs-toggle="collapse"
|
|
267
|
+
data-bs-target="#kt_accordion_body_1"
|
|
268
|
+
aria-expanded="true"
|
|
269
|
+
aria-controls="kt_accordion_body_1"
|
|
270
|
+
>
|
|
271
|
+
Konnektive Order
|
|
272
|
+
</button>
|
|
273
|
+
</h2>
|
|
274
|
+
<div
|
|
275
|
+
id="kt_accordion_body_1"
|
|
276
|
+
class="accordion-collapse collapse show"
|
|
277
|
+
aria-labelledby="kt_accordion_header_1"
|
|
278
|
+
data-bs-parent="#kt_accordion"
|
|
279
|
+
>
|
|
280
|
+
<div class="accordion-body mt-0 p-1 px-5">
|
|
281
|
+
<!-- Product Table -->
|
|
282
|
+
<div class="table-responsive">
|
|
283
|
+
<table class="table align-middle table-row-dashed fs-7 gy-4 mb-0">
|
|
284
|
+
<thead>
|
|
285
|
+
<tr
|
|
286
|
+
class="border-bottom border-gray-200 text-start text-gray-400 fw-normal fs-8 text-uppercase gs-0"
|
|
287
|
+
>
|
|
288
|
+
<th class="w-1/6">Item Id</th>
|
|
289
|
+
<th class="w-1/6">Product ID</th>
|
|
290
|
+
<th class="w-1/6">Product</th>
|
|
291
|
+
<th class="w-1/6">Qty</th>
|
|
292
|
+
<th class="w-1/6 text-end">Price</th>
|
|
293
|
+
</tr>
|
|
294
|
+
</thead>
|
|
295
|
+
<tbody class="fw-bold text-gray-800 fs-8">
|
|
296
|
+
<tr v-for="(item, index) in orders" :key="index">
|
|
297
|
+
<td>{{ item.orderItemId }}</td>
|
|
298
|
+
<td>{{ item.productId }}</td>
|
|
299
|
+
<td>{{ item.name }}</td>
|
|
300
|
+
<td>{{ item.qty }}</td>
|
|
301
|
+
<td class="text-end">{{ item.price }}</td>
|
|
302
|
+
</tr>
|
|
303
|
+
</tbody>
|
|
304
|
+
</table>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
<div
|
|
310
|
+
class="accordion-item"
|
|
311
|
+
v-if="crm_details && Object.keys(crm_details).length > 0"
|
|
312
|
+
>
|
|
313
|
+
<h2 class="accordion-header" id="kt_accordion_header_6">
|
|
314
|
+
<button
|
|
315
|
+
class="accordion-button fs-6 fw-normal"
|
|
316
|
+
type="button"
|
|
317
|
+
data-bs-toggle="collapse"
|
|
318
|
+
data-bs-target="#kt_accordion_body_6"
|
|
319
|
+
aria-expanded="true"
|
|
320
|
+
aria-controls="kt_accordion_body_6"
|
|
321
|
+
>
|
|
322
|
+
Konnektive Details
|
|
323
|
+
</button>
|
|
324
|
+
</h2>
|
|
325
|
+
<div
|
|
326
|
+
id="kt_accordion_body_6"
|
|
327
|
+
class="accordion-collapse collapse show"
|
|
328
|
+
aria-labelledby="kt_accordion_header_6"
|
|
329
|
+
data-bs-parent="#kt_accordion"
|
|
330
|
+
>
|
|
331
|
+
<div class="accordion-body mt-0 p-1 px-5">
|
|
332
|
+
<div class="table-responsive">
|
|
333
|
+
<table class="table align-middle table-row-dashed fs-7 gy-4 mb-0">
|
|
334
|
+
<thead>
|
|
335
|
+
<tr
|
|
336
|
+
class="border-bottom border-gray-200 text-start text-gray-400 fw-normal fs-8 text-uppercase gs-0"
|
|
337
|
+
>
|
|
338
|
+
<th class="w-1/6">Trans ID</th>
|
|
339
|
+
<th class="w-1/6">Order ID</th>
|
|
340
|
+
<th class="w-1/6">IP</th>
|
|
341
|
+
<th class="w-1/6">A ID</th>
|
|
342
|
+
<th class="w-1/6">Gateway ID</th>
|
|
343
|
+
<th class="w-1/6">Customer ID</th>
|
|
344
|
+
</tr>
|
|
345
|
+
</thead>
|
|
346
|
+
<tbody class="fw-bold text-gray-800 fs-8">
|
|
347
|
+
<tr>
|
|
348
|
+
<td>{{ crm_details.transactionId }}</td>
|
|
349
|
+
<td>{{ crm_details.orderId }}</td>
|
|
350
|
+
<td>{{ crm_details.ipAddress }}</td>
|
|
351
|
+
<td>{{ crm_details.actualOrderId }}</td>
|
|
352
|
+
<td>{{ crm_details.merchantTxnId }}</td>
|
|
353
|
+
<td>{{ crm_details.customerId }}</td>
|
|
354
|
+
</tr>
|
|
355
|
+
</tbody>
|
|
356
|
+
</table>
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
360
|
+
</div>
|
|
361
|
+
<!-- Sticky Details Accordion -->
|
|
362
|
+
<div
|
|
363
|
+
class="accordion-item"
|
|
364
|
+
v-if="orders2 && Object.keys(orders2).length > 0"
|
|
365
|
+
>
|
|
366
|
+
<h2 class="accordion-header" id="kt_accordion_header_2">
|
|
367
|
+
<button
|
|
368
|
+
class="accordion-button fs-6 fw-normal collapsed"
|
|
369
|
+
type="button"
|
|
370
|
+
data-bs-toggle="collapse"
|
|
371
|
+
data-bs-target="#kt_accordion_body_2"
|
|
372
|
+
aria-expanded="false"
|
|
373
|
+
aria-controls="kt_accordion_body_2"
|
|
374
|
+
>
|
|
375
|
+
Sticky Order
|
|
376
|
+
</button>
|
|
377
|
+
</h2>
|
|
378
|
+
<div
|
|
379
|
+
id="kt_accordion_body_2"
|
|
380
|
+
class="accordion-collapse collapse"
|
|
381
|
+
aria-labelledby="kt_accordion_header_2"
|
|
382
|
+
data-bs-parent="#kt_accordion"
|
|
383
|
+
>
|
|
384
|
+
<div class="accordion-body mt-0 p-1 px-5">
|
|
385
|
+
<div class="table-responsive">
|
|
386
|
+
<table class="table align-middle table-row-dashed fs-7 gy-4 mb-0">
|
|
387
|
+
<thead>
|
|
388
|
+
<tr
|
|
389
|
+
class="border-bottom border-gray-200 text-start text-gray-400 fw-normal fs-8 text-uppercase gs-0"
|
|
390
|
+
>
|
|
391
|
+
<th class="w-1/6">Item Id</th>
|
|
392
|
+
<th class="w-1/6">ID</th>
|
|
393
|
+
<th class="w-1/6">URL</th>
|
|
394
|
+
<th class="w-1/6">Name</th>
|
|
395
|
+
<th class="w-1/6">Qty</th>
|
|
396
|
+
<th class="w-1/6 text-end">Price</th>
|
|
397
|
+
</tr>
|
|
398
|
+
</thead>
|
|
399
|
+
<tbody class="fw-bold text-gray-800 fs-8">
|
|
400
|
+
<tr v-for="(item, index) in orders2" :key="index">
|
|
401
|
+
<td>{{ item.item_id }}</td>
|
|
402
|
+
<td>{{ item.product_id }}</td>
|
|
403
|
+
<td>{{ item.product_url }}</td>
|
|
404
|
+
<td>{{ item.name }}</td>
|
|
405
|
+
<td>{{ item.qty }}</td>
|
|
406
|
+
<td class="text-end">{{ item.price }}</td>
|
|
407
|
+
</tr>
|
|
408
|
+
</tbody>
|
|
409
|
+
</table>
|
|
410
|
+
</div>
|
|
411
|
+
</div>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
414
|
+
<!-- Sticky Transaction Accordion -->
|
|
415
|
+
<div
|
|
416
|
+
class="accordion-item"
|
|
417
|
+
v-if="crm2_details && Object.keys(crm2_details).length > 0"
|
|
418
|
+
>
|
|
419
|
+
<h2 class="accordion-header" id="kt_accordion_header_3">
|
|
420
|
+
<button
|
|
421
|
+
class="accordion-button fs-6 fw-normal"
|
|
422
|
+
type="button"
|
|
423
|
+
data-bs-toggle="collapse"
|
|
424
|
+
data-bs-target="#kt_accordion_body_3"
|
|
425
|
+
aria-expanded="true"
|
|
426
|
+
aria-controls="kt_accordion_body_3"
|
|
427
|
+
>
|
|
428
|
+
Sticky Details
|
|
429
|
+
</button>
|
|
430
|
+
</h2>
|
|
431
|
+
<div
|
|
432
|
+
id="kt_accordion_body_3"
|
|
433
|
+
class="accordion-collapse collapse show"
|
|
434
|
+
aria-labelledby="kt_accordion_header_3"
|
|
435
|
+
data-bs-parent="#kt_accordion"
|
|
436
|
+
>
|
|
437
|
+
<div class="accordion-body mt-0 p-1 px-5">
|
|
438
|
+
<div class="table-responsive">
|
|
439
|
+
<table class="table align-middle table-row-dashed fs-7 gy-4 mb-0">
|
|
440
|
+
<thead>
|
|
441
|
+
<tr
|
|
442
|
+
class="border-bottom border-gray-200 text-start text-gray-400 fw-normal fs-8 text-uppercase gs-0"
|
|
443
|
+
>
|
|
444
|
+
<th class="w-1/6">Ancestor ID</th>
|
|
445
|
+
<th class="w-1/6">Order ID</th>
|
|
446
|
+
<th class="w-1/6">IP</th>
|
|
447
|
+
<th class="w-1/6">Trans ID</th>
|
|
448
|
+
<th class="w-1/6">Gateway ID</th>
|
|
449
|
+
<th class="w-1/6">Customer ID</th>
|
|
450
|
+
</tr>
|
|
451
|
+
</thead>
|
|
452
|
+
<tbody class="fw-bold text-gray-800 fs-8">
|
|
453
|
+
<tr>
|
|
454
|
+
<td>{{ crm2_details.ancestor_id }}</td>
|
|
455
|
+
<td>{{ crm2_details.order_id }}</td>
|
|
456
|
+
<td>{{ crm2_details.ip_address }}</td>
|
|
457
|
+
<td>{{ crm2_details.transaction_id }}</td>
|
|
458
|
+
<td>{{ crm2_details.gateway_id }}</td>
|
|
459
|
+
<td>{{ crm2_details.customer_id }}</td>
|
|
460
|
+
</tr>
|
|
461
|
+
</tbody>
|
|
462
|
+
</table>
|
|
463
|
+
</div>
|
|
464
|
+
</div>
|
|
465
|
+
</div>
|
|
466
|
+
</div>
|
|
467
|
+
<NmiDetails class="p-0 m-0" v-if="transaction" :incoming="incoming" />
|
|
468
|
+
</div>
|
|
469
|
+
</div>
|
|
470
|
+
|
|
471
|
+
<USAEPayDetails :incoming="incoming" v-if="incoming.connection_id == '51'" />
|
|
472
|
+
<SquareUp :incoming="incoming" v-else-if="incoming.connection_id == '52'" />
|
|
473
|
+
<FluidPayDetails
|
|
474
|
+
:incoming="incoming"
|
|
475
|
+
v-else-if="incoming.connection_id == '45'"
|
|
476
|
+
/>
|
|
477
|
+
<NuveiDetails
|
|
478
|
+
:incoming="incoming"
|
|
479
|
+
v-else-if="incoming.connection_id == '56'"
|
|
480
|
+
/>
|
|
481
|
+
<InovioPayDetails
|
|
482
|
+
:incoming="incoming"
|
|
483
|
+
v-else-if="incoming.connection_id == '6'"
|
|
484
|
+
/>
|
|
485
|
+
<div class="rounded border pt-0 mb-5">
|
|
486
|
+
<div class="accordion fs-7" id="kt_accordion_5">
|
|
487
|
+
<div class="card card-body">
|
|
488
|
+
<div class="card-body py-2">
|
|
489
|
+
<div class="card-title">
|
|
490
|
+
<h4 class="fw-normal ms-n6 fs-7">Chargeback Cycle</h4>
|
|
491
|
+
</div>
|
|
492
|
+
</div>
|
|
493
|
+
|
|
494
|
+
<div class="card-flush h-auto pt-1">
|
|
495
|
+
<div class="mb-0">
|
|
496
|
+
<div ref="timelineRef"></div>
|
|
497
|
+
</div>
|
|
498
|
+
</div>
|
|
499
|
+
</div>
|
|
500
|
+
</div>
|
|
501
|
+
</div>
|
|
502
|
+
<ReasonExplained
|
|
503
|
+
:reason_explained="reason_explained"
|
|
504
|
+
:reason="reason"
|
|
505
|
+
></ReasonExplained>
|
|
506
|
+
</template>
|
|
507
|
+
|
|
508
|
+
<script lang="ts">
|
|
509
|
+
import { defineComponent, ref, computed, toRef, watch } from "vue";
|
|
510
|
+
import { DataSet, Timeline } from "vis-timeline/standalone";
|
|
511
|
+
import "vis-timeline/styles/vis-timeline-graph2d.css";
|
|
512
|
+
|
|
513
|
+
import ReasonExplained from "./ReasonExplained.vue";
|
|
514
|
+
import NmiDetails from "./NmiDetails.vue";
|
|
515
|
+
import USAEPayDetails from "./USAEPayDetails.vue";
|
|
516
|
+
import SquareUp from "./SquareUp.vue";
|
|
517
|
+
import FluidPayDetails from "./FluidPayDetails.vue";
|
|
518
|
+
import NuveiDetails from "./NuveiDetails.vue";
|
|
519
|
+
import InovioPayDetails from "./InovioPayDetails.vue";
|
|
520
|
+
|
|
521
|
+
interface TimeLineItem {
|
|
522
|
+
id: number;
|
|
523
|
+
content: string;
|
|
524
|
+
start: string;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
export default defineComponent({
|
|
528
|
+
name: "chargeback-details",
|
|
529
|
+
components: {
|
|
530
|
+
ReasonExplained,
|
|
531
|
+
NmiDetails,
|
|
532
|
+
USAEPayDetails,
|
|
533
|
+
SquareUp,
|
|
534
|
+
FluidPayDetails,
|
|
535
|
+
NuveiDetails,
|
|
536
|
+
InovioPayDetails,
|
|
537
|
+
},
|
|
538
|
+
props: {
|
|
539
|
+
reason: Object,
|
|
540
|
+
reason_explained: Object,
|
|
541
|
+
incoming: { type: Object, required: true },
|
|
542
|
+
merchant: { type: Object, required: true },
|
|
543
|
+
},
|
|
544
|
+
setup(props) {
|
|
545
|
+
const incomingData = toRef(props, "incoming");
|
|
546
|
+
const timelineRef = ref<HTMLElement | null>(null);
|
|
547
|
+
const options = ref({ height: "265px" });
|
|
548
|
+
const timeline = ref<Timeline | null>(null);
|
|
549
|
+
|
|
550
|
+
const cardholder = computed(() => props.incoming?.card_holder || {});
|
|
551
|
+
const actions = computed(() => props.incoming?.transaction?.action || []);
|
|
552
|
+
const card = computed(() => props.incoming?.card ?? {});
|
|
553
|
+
const orders = computed(() => props.incoming?.order_details?.items ?? []);
|
|
554
|
+
const orders2 = computed(() => props.incoming.order2_details?.items ?? []);
|
|
555
|
+
|
|
556
|
+
const crm_details = computed(() => {
|
|
557
|
+
try {
|
|
558
|
+
if (props.incoming.crm_details) {
|
|
559
|
+
if (typeof props.incoming.crm_details === "string") {
|
|
560
|
+
return JSON.parse(props.incoming?.crm_details);
|
|
561
|
+
} else {
|
|
562
|
+
return props.incoming.crm_details;
|
|
563
|
+
}
|
|
564
|
+
} else {
|
|
565
|
+
return {};
|
|
566
|
+
}
|
|
567
|
+
} catch {
|
|
568
|
+
return {};
|
|
569
|
+
}
|
|
570
|
+
});
|
|
571
|
+
|
|
572
|
+
const crm2_details = computed(() => {
|
|
573
|
+
try {
|
|
574
|
+
if (props.incoming.crm2_details) {
|
|
575
|
+
if (typeof props.incoming.crm2_details === "string") {
|
|
576
|
+
return JSON.parse(props.incoming?.crm2_details);
|
|
577
|
+
} else {
|
|
578
|
+
return props.incoming.crm2_details;
|
|
579
|
+
}
|
|
580
|
+
} else {
|
|
581
|
+
return {};
|
|
582
|
+
}
|
|
583
|
+
} catch {
|
|
584
|
+
return {};
|
|
585
|
+
}
|
|
586
|
+
});
|
|
587
|
+
|
|
588
|
+
const transaction = computed(() => {
|
|
589
|
+
if (
|
|
590
|
+
props.incoming?.transaction?.action?.[0]?.amount ||
|
|
591
|
+
props.incoming?.transaction?.action?.amount
|
|
592
|
+
)
|
|
593
|
+
return props.incoming?.transaction;
|
|
594
|
+
else return null;
|
|
595
|
+
});
|
|
596
|
+
|
|
597
|
+
const getDisputeCycleItems = computed(() => {
|
|
598
|
+
const items: TimeLineItem[] = [];
|
|
599
|
+
let id = 1;
|
|
600
|
+
|
|
601
|
+
if (incomingData.value.dispute_date !== undefined) {
|
|
602
|
+
const dateTimestamp = new Date(
|
|
603
|
+
incomingData.value.dispute_date
|
|
604
|
+
).getTime();
|
|
605
|
+
if (dateTimestamp > 0) {
|
|
606
|
+
items.push({
|
|
607
|
+
id,
|
|
608
|
+
content: "First Chargeback",
|
|
609
|
+
start: incomingData.value.dispute_date,
|
|
610
|
+
});
|
|
611
|
+
id = id + 1;
|
|
612
|
+
}
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
if (
|
|
616
|
+
incomingData.value.dispute_cycle.dispute_sent_status !== undefined &&
|
|
617
|
+
incomingData.value.dispute_cycle.dispute_date_sent !== undefined
|
|
618
|
+
) {
|
|
619
|
+
const dateTimestamp = new Date(
|
|
620
|
+
incomingData.value.dispute_cycle.dispute_date_sent
|
|
621
|
+
).getTime();
|
|
622
|
+
if (dateTimestamp > 0) {
|
|
623
|
+
items.push({
|
|
624
|
+
id,
|
|
625
|
+
content: incomingData.value.dispute_cycle.dispute_sent_status,
|
|
626
|
+
start: incomingData.value.dispute_cycle.dispute_date_sent,
|
|
627
|
+
});
|
|
628
|
+
id = id + 1;
|
|
629
|
+
}
|
|
630
|
+
} else if (
|
|
631
|
+
incomingData.value.dispute_cycle.response_status !== undefined &&
|
|
632
|
+
incomingData.value.dispute_cycle.response_date !== undefined
|
|
633
|
+
) {
|
|
634
|
+
const dateTimestamp = new Date(
|
|
635
|
+
incomingData.value.dispute_cycle.response_date
|
|
636
|
+
).getTime();
|
|
637
|
+
if (dateTimestamp > 0) {
|
|
638
|
+
items.push({
|
|
639
|
+
id,
|
|
640
|
+
content: incomingData.value.dispute_cycle.response_status,
|
|
641
|
+
start: incomingData.value.dispute_cycle.response_date,
|
|
642
|
+
});
|
|
643
|
+
id = id + 1;
|
|
644
|
+
}
|
|
645
|
+
}
|
|
646
|
+
if (
|
|
647
|
+
incomingData.value.dispute_cycle.retrieval_status !== undefined &&
|
|
648
|
+
incomingData.value.dispute_cycle.retrieval_date !== undefined
|
|
649
|
+
) {
|
|
650
|
+
const dateTimestamp = new Date(
|
|
651
|
+
incomingData.value.dispute_cycle.retrieval_date
|
|
652
|
+
).getTime();
|
|
653
|
+
if (dateTimestamp > 0) {
|
|
654
|
+
items.push({
|
|
655
|
+
id,
|
|
656
|
+
content: incomingData.value.dispute_cycle.retrieval_status,
|
|
657
|
+
start: incomingData.value.dispute_cycle.retrieval_date,
|
|
658
|
+
});
|
|
659
|
+
id = id + 1;
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
if (
|
|
663
|
+
incomingData.value.dispute_cycle.dispute_receieved_status !==
|
|
664
|
+
undefined &&
|
|
665
|
+
incomingData.value.dispute_cycle.dispute_received_date !== undefined
|
|
666
|
+
) {
|
|
667
|
+
const dateTimestamp = new Date(
|
|
668
|
+
incomingData.value.dispute_cycle.dispute_received_date
|
|
669
|
+
).getTime();
|
|
670
|
+
if (dateTimestamp > 0) {
|
|
671
|
+
items.push({
|
|
672
|
+
id,
|
|
673
|
+
content: incomingData.value.dispute_cycle.dispute_receieved_status,
|
|
674
|
+
start: incomingData.value.dispute_cycle.dispute_received_date,
|
|
675
|
+
});
|
|
676
|
+
id = id + 1;
|
|
677
|
+
}
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
if (
|
|
681
|
+
incomingData.value.dispute_cycle.pre_arbitration_status !== undefined &&
|
|
682
|
+
incomingData.value.dispute_cycle.pre_arbitration_date !== undefined
|
|
683
|
+
) {
|
|
684
|
+
const dateTimestamp = new Date(
|
|
685
|
+
incomingData.value.dispute_cycle.pre_arbitration_date
|
|
686
|
+
).getTime();
|
|
687
|
+
if (dateTimestamp > 0) {
|
|
688
|
+
items.push({
|
|
689
|
+
id,
|
|
690
|
+
content: incomingData.value.dispute_cycle.pre_arbitration_status,
|
|
691
|
+
start: incomingData.value.dispute_cycle.pre_arbitration_date,
|
|
692
|
+
});
|
|
693
|
+
id = id + 1;
|
|
694
|
+
}
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
if (
|
|
698
|
+
incomingData.value.dispute_cycle.pre_arb_sent_status !== undefined &&
|
|
699
|
+
incomingData.value.dispute_cycle.pre_arb_date_sent !== undefined
|
|
700
|
+
) {
|
|
701
|
+
const dateTimestamp = new Date(
|
|
702
|
+
incomingData.value.dispute_cycle.pre_arb_date_sent
|
|
703
|
+
).getTime();
|
|
704
|
+
if (dateTimestamp > 0) {
|
|
705
|
+
items.push({
|
|
706
|
+
id,
|
|
707
|
+
content: incomingData.value.dispute_cycle.pre_arb_sent_status,
|
|
708
|
+
start: incomingData.value.dispute_cycle.pre_arb_date_sent,
|
|
709
|
+
});
|
|
710
|
+
id = id + 1;
|
|
711
|
+
}
|
|
712
|
+
}
|
|
713
|
+
|
|
714
|
+
if (
|
|
715
|
+
incomingData.value.dispute_cycle.resolved_status !== undefined &&
|
|
716
|
+
incomingData.value.dispute_cycle.resolved_date !== undefined
|
|
717
|
+
) {
|
|
718
|
+
const dateTimestamp = new Date(
|
|
719
|
+
incomingData.value.dispute_cycle.resolved_date
|
|
720
|
+
).getTime();
|
|
721
|
+
if (dateTimestamp) {
|
|
722
|
+
items.push({
|
|
723
|
+
id,
|
|
724
|
+
content: incomingData.value.dispute_cycle.resolved_status,
|
|
725
|
+
start: incomingData.value.dispute_cycle.resolved_date,
|
|
726
|
+
});
|
|
727
|
+
id = id + 1;
|
|
728
|
+
}
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
return new DataSet(items);
|
|
732
|
+
});
|
|
733
|
+
|
|
734
|
+
watch(
|
|
735
|
+
() => getDisputeCycleItems.value,
|
|
736
|
+
() => {
|
|
737
|
+
displayTimeline();
|
|
738
|
+
}
|
|
739
|
+
);
|
|
740
|
+
|
|
741
|
+
const lastAction = computed(() => {
|
|
742
|
+
const actionArray = actions.value;
|
|
743
|
+
if (actionArray.length > 0) {
|
|
744
|
+
// Ensure there is at least one element
|
|
745
|
+
return actionArray[actionArray.length - 1].response_text; // Access the last element's response_text
|
|
746
|
+
}
|
|
747
|
+
return null; // Return null if no actions are present
|
|
748
|
+
});
|
|
749
|
+
const formattedPhone = computed(() => {
|
|
750
|
+
const phone = cardholder.value.phone || "";
|
|
751
|
+
if (phone.length === 10) {
|
|
752
|
+
return `1 (${phone.slice(0, 3)}) ${phone.slice(3, 6)}-${phone.slice(
|
|
753
|
+
6
|
|
754
|
+
)}`;
|
|
755
|
+
}
|
|
756
|
+
return phone; // Return unformatted if not 10 digits
|
|
757
|
+
});
|
|
758
|
+
const displayTimeline = () => {
|
|
759
|
+
if (timelineRef.value !== null) {
|
|
760
|
+
if (timeline.value === null) {
|
|
761
|
+
timeline.value = new Timeline(
|
|
762
|
+
timelineRef.value,
|
|
763
|
+
getDisputeCycleItems.value,
|
|
764
|
+
options.value
|
|
765
|
+
);
|
|
766
|
+
} else {
|
|
767
|
+
timeline.value.setItems(getDisputeCycleItems.value);
|
|
768
|
+
}
|
|
769
|
+
}
|
|
770
|
+
};
|
|
771
|
+
|
|
772
|
+
return {
|
|
773
|
+
timelineRef,
|
|
774
|
+
incomingData,
|
|
775
|
+
formattedPhone,
|
|
776
|
+
lastAction,
|
|
777
|
+
transaction,
|
|
778
|
+
cardholder,
|
|
779
|
+
actions,
|
|
780
|
+
card,
|
|
781
|
+
orders,
|
|
782
|
+
orders2,
|
|
783
|
+
crm_details,
|
|
784
|
+
crm2_details,
|
|
785
|
+
};
|
|
786
|
+
},
|
|
787
|
+
});
|
|
788
|
+
</script>
|
|
789
|
+
|