@tapni/auth 1.0.6-4.dev → 1.0.6-6.dev
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/dist/.vite/manifest.json +8 -18
- package/dist/{Apps-DRhdYq0_.js → Apps-C4hIFJNW.js} +1 -1
- package/dist/{CustomApp-Dw80xmqU.js → CustomApp-o8yaijRq.js} +1 -1
- package/dist/{QR-ByY4IUiV.js → QR-D3LzljJa.js} +1 -1
- package/dist/TapniAuth.es.js +1 -1
- package/dist/TapniAuth.umd.js +17 -17
- package/dist/{install-Cb6nCJn_.js → install-BUxLNF3h.js} +3605 -3318
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/App.vue +3 -0
- package/src/views/Account.vue +13 -1
- package/src/views/Billing.vue +50 -41
- package/dist/Billing-DkXdzGvS.js +0 -256
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.app-store-icon[data-v-465df13a]{box-shadow:0 4px 10px #00000017;border-radius:12px}#codeInput[data-v-6ab8e3d4],#emailInput[data-v-6ab8e3d4]{text-align:center;padding-right:15%;font-size:17px}.firstRow img[data-v-64ae2517]{width:25px;height:25px;position:absolute;top:50%;right:0;transform:translate(-50%,-50%)}
|
|
1
|
+
.app-store-icon[data-v-465df13a]{box-shadow:0 4px 10px #00000017;border-radius:12px}#codeInput[data-v-6ab8e3d4],#emailInput[data-v-6ab8e3d4]{text-align:center;padding-right:15%;font-size:17px}.firstRow img[data-v-64ae2517]{width:25px;height:25px;position:absolute;top:50%;right:0;transform:translate(-50%,-50%)}.tapni-auth-billing .withBackground{height:50px}.tapni-auth-billing .no-subscriptions{padding:40px 20px}.tapni-auth-billing .gray-text{color:#666;font-size:16px}.tapni-auth-billing .subscription-card{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:20px;margin-bottom:16px;box-shadow:0 2px 4px #0000000d}.tapni-auth-billing .subscription-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f0f0f0}.tapni-auth-billing .subscription-info{flex:1}.tapni-auth-billing .subscription-name{font-size:20px;font-weight:600;margin:0 0 8px;color:#000}.tapni-auth-billing .subscription-status{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase}.tapni-auth-billing .status-trialing{background:#e3f2fd;color:#1976d2}.tapni-auth-billing .status-active{background:#e8f5e9;color:#388e3c}.tapni-auth-billing .status-past_due{background:#fff3e0;color:#f57c00}.tapni-auth-billing .status-canceled{background:#ffebee;color:#d32f2f}.tapni-auth-billing .subscription-details{margin-bottom:16px}.tapni-auth-billing .detail-row{display:flex;justify-content:space-between;padding:8px 0;font-size:15px}.tapni-auth-billing .detail-label{color:#666;font-weight:500}.tapni-auth-billing .detail-value{color:#000;font-weight:600}.tapni-auth-billing .subscription-actions{display:flex;justify-content:flex-end;padding-top:16px;border-top:1px solid #f0f0f0}.tapni-auth-billing .cancel-button{padding:10px 20px;background:#fff;color:#d32f2f;border:1px solid #d32f2f;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.tapni-auth-billing .cancel-button:hover:not(:disabled){background:#d32f2f;color:#fff}.tapni-auth-billing .cancel-button:disabled{opacity:.5;cursor:not-allowed}.tapni-auth-billing .modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}.tapni-auth-billing .modal-content{background:#fff;border-radius:16px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px #0003}.tapni-auth-billing .modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid #e0e0e0}.tapni-auth-billing .modal-header h3{margin:0;font-size:20px;font-weight:600;color:#000}.tapni-auth-billing .close-button{background:none;border:none;font-size:28px;color:#666;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.tapni-auth-billing .close-button:hover{background:#f0f0f0}.tapni-auth-billing .modal-body{padding:24px}.tapni-auth-billing .modal-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:24px}.tapni-auth-billing .feedback-section{margin-top:20px}.tapni-auth-billing .feedback-label{display:block;font-size:14px;font-weight:600;color:#333;margin-bottom:8px}.tapni-auth-billing .feedback-textarea{width:100%;padding:12px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;transition:border-color .2s}.tapni-auth-billing .feedback-textarea:focus{outline:none;border-color:#1976d2}.tapni-auth-billing .modal-footer{display:flex;gap:12px;padding:20px 24px;border-top:1px solid #e0e0e0;justify-content:flex-end}.tapni-auth-billing .button-secondary{padding:12px 24px;background:#fff;color:#333;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.tapni-auth-billing .button-secondary:hover{background:#f5f5f5}.tapni-auth-billing .button-danger{padding:12px 24px;background:#d32f2f;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.tapni-auth-billing .button-danger:hover:not(:disabled){background:#b71c1c}.tapni-auth-billing .button-danger:disabled{opacity:.5;cursor:not-allowed}#emailInput[data-v-707a4b16]{text-align:center;padding-right:15%;font-size:17px}html *{font-family:Inter,sans-serif}#bodyId{padding-top:3%;max-width:667px!important;margin:1.5% auto auto;height:95%!important;border-radius:20px}.action-block-top .default-text,.action-block-top .default-text:after{border-radius:50%;width:10em!important;height:10em!important}.action-block-top .default-text{margin:10px auto;font-size:3px;position:relative;text-indent:-9999em;border-left:.5em solid #000000;border-top:.5em solid rgba(0,0,0,.2);border-right:.5em solid rgba(0,0,0,.2);border-bottom:.5em solid rgba(0,0,0,.2);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.smartbanner-ios{background:linear-gradient(to bottom,#f4f4f4,#f4f4f4);box-shadow:0 0 #fff;border-bottom:1px solid #dddddd}.smartbanner-icon{border-radius:16px}.smartbanner-ios .smartbanner-button{font-size:13px;padding:9px 0;height:40px;border-radius:13px;background:#f4f4f4;color:#0a99d2;border:none;box-shadow:none;text-transform:uppercase}.snack-body{display:none;border-radius:40px;font-size:15px!important}#errorSnack{background-color:#fee3e3!important;border:2px solid #edd9d9!important;color:#000}#successSnack{background-color:#eff5eb!important;border:2px solid #e3ecd7!important;color:#000}.grecaptcha-badge{visibility:hidden}.header-logo{position:absolute;left:50%;transform:translate(-50%,-50%);margin-top:16px;z-index:2}.header-logo-img{height:40px;margin-top:10px}@media (max-width: 768px){#bodyId{margin-top:0;border-radius:0;height:100%!important}.header-logo{margin-top:16px}}.withBackground[data-v-2f7f5584],.withBackground[data-v-36b27d1f]{height:50px}
|
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -21,6 +21,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
|
21
21
|
<AuthRegister v-else-if="initialized && renderView === 'AuthRegister'" :isModal="isModal" />
|
|
22
22
|
<AuthVerify v-else-if="initialized && renderView === 'AuthVerify'" :isModal="isModal" />
|
|
23
23
|
<AuthSecurity v-else-if="initialized && renderView === 'AuthSecurity'" :isModal="isModal" :payload="payload" @update:viewProp="setView" />
|
|
24
|
+
<AuthBilling v-else-if="initialized && renderView === 'AuthBilling'" :isModal="isModal" :payload="payload" @update:viewProp="setView" />
|
|
24
25
|
<AuthReset v-else-if="initialized && renderView === 'AuthReset'" />
|
|
25
26
|
<AuthCallback v-else-if="initialized && renderView === 'AuthCallback'" />
|
|
26
27
|
<RouterView v-else-if="display !== 'npm'" />
|
|
@@ -49,6 +50,7 @@ import AuthAccount from '@/views/Account.vue';
|
|
|
49
50
|
import AuthRegister from '@/views/Register.vue';
|
|
50
51
|
import AuthVerify from '@/views/Verify.vue';
|
|
51
52
|
import AuthSecurity from '@/views/Security.vue';
|
|
53
|
+
import AuthBilling from '@/views/Billing.vue';
|
|
52
54
|
import AuthGeneral from '@/views/General.vue';
|
|
53
55
|
import AuthReset from '@/views/Reset.vue';
|
|
54
56
|
import AuthCallback from '@/views/Callback.vue';
|
|
@@ -77,6 +79,7 @@ export default {
|
|
|
77
79
|
AuthRegister,
|
|
78
80
|
AuthLogin,
|
|
79
81
|
AuthAccount,
|
|
82
|
+
AuthBilling,
|
|
80
83
|
AuthWelcome,
|
|
81
84
|
AuthGeneral
|
|
82
85
|
},
|
package/src/views/Account.vue
CHANGED
|
@@ -139,7 +139,19 @@
|
|
|
139
139
|
</div>
|
|
140
140
|
</router-link>
|
|
141
141
|
|
|
142
|
-
<
|
|
142
|
+
<div v-if="isModal" class="settingRow" @click="$emit('update:viewProp', 'AuthBilling')">
|
|
143
|
+
<div class="firstRow">
|
|
144
|
+
<img
|
|
145
|
+
:src="getIcon('billing-card-black.svg')"
|
|
146
|
+
class="withBackground"
|
|
147
|
+
/>
|
|
148
|
+
<h4>{{ssoLang[appLanguage].billing }}</h4>
|
|
149
|
+
|
|
150
|
+
<img :src="getIcon('arrow-gray-right.svg')" />
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
<router-link v-else to="/billing" class="settingRow">
|
|
143
155
|
<div class="firstRow">
|
|
144
156
|
<img
|
|
145
157
|
:src="getIcon('billing-card-black.svg')"
|
package/src/views/Billing.vue
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="page-login content-boxed content-boxed-padding">
|
|
2
|
+
<div class="page-login content-boxed content-boxed-padding tapni-auth-billing">
|
|
3
3
|
<a v-if="isModal" @click="close" class="color-black pull-right pointer" style="margin-top: 0px; position: absolute; right: -20px; text-align: right;">
|
|
4
4
|
<i class="font-17 color-black">
|
|
5
5
|
<img src="https://cdn.tapni.co/icons/down-arrow.png" class="responsive-image" style="width: 35%;"/>
|
|
@@ -7,7 +7,16 @@
|
|
|
7
7
|
</a>
|
|
8
8
|
<div class="subheaderContainer full-top">
|
|
9
9
|
<!-- Back Button -->
|
|
10
|
-
<
|
|
10
|
+
<div v-if="isModal" class="pointer left-button" @click="$emit('update:viewProp', 'AuthAccount')">
|
|
11
|
+
<img
|
|
12
|
+
:src="getIcon('arrow-gray-right.svg')"
|
|
13
|
+
height="20"
|
|
14
|
+
width="20"
|
|
15
|
+
class="btn-icon"
|
|
16
|
+
style="rotate: 180deg;"
|
|
17
|
+
/>
|
|
18
|
+
</div>
|
|
19
|
+
<router-link v-else to="/account" class="button gray-button pointer left-button">
|
|
11
20
|
<img
|
|
12
21
|
:src="getIcon('arrow-gray-right.svg')"
|
|
13
22
|
height="20"
|
|
@@ -270,21 +279,21 @@ export default {
|
|
|
270
279
|
};
|
|
271
280
|
</script>
|
|
272
281
|
|
|
273
|
-
<style
|
|
274
|
-
.withBackground {
|
|
282
|
+
<style>
|
|
283
|
+
.tapni-auth-billing .withBackground {
|
|
275
284
|
height: 50px;
|
|
276
285
|
}
|
|
277
286
|
|
|
278
|
-
.no-subscriptions {
|
|
287
|
+
.tapni-auth-billing .no-subscriptions {
|
|
279
288
|
padding: 40px 20px;
|
|
280
289
|
}
|
|
281
290
|
|
|
282
|
-
.gray-text {
|
|
291
|
+
.tapni-auth-billing .gray-text {
|
|
283
292
|
color: #666;
|
|
284
293
|
font-size: 16px;
|
|
285
294
|
}
|
|
286
295
|
|
|
287
|
-
.subscription-card {
|
|
296
|
+
.tapni-auth-billing .subscription-card {
|
|
288
297
|
background: #fff;
|
|
289
298
|
border: 1px solid #e0e0e0;
|
|
290
299
|
border-radius: 12px;
|
|
@@ -293,7 +302,7 @@ export default {
|
|
|
293
302
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
294
303
|
}
|
|
295
304
|
|
|
296
|
-
.subscription-header {
|
|
305
|
+
.tapni-auth-billing .subscription-header {
|
|
297
306
|
display: flex;
|
|
298
307
|
justify-content: space-between;
|
|
299
308
|
align-items: flex-start;
|
|
@@ -302,18 +311,18 @@ export default {
|
|
|
302
311
|
border-bottom: 1px solid #f0f0f0;
|
|
303
312
|
}
|
|
304
313
|
|
|
305
|
-
.subscription-info {
|
|
314
|
+
.tapni-auth-billing .subscription-info {
|
|
306
315
|
flex: 1;
|
|
307
316
|
}
|
|
308
317
|
|
|
309
|
-
.subscription-name {
|
|
318
|
+
.tapni-auth-billing .subscription-name {
|
|
310
319
|
font-size: 20px;
|
|
311
320
|
font-weight: 600;
|
|
312
321
|
margin: 0 0 8px 0;
|
|
313
322
|
color: #000;
|
|
314
323
|
}
|
|
315
324
|
|
|
316
|
-
.subscription-status {
|
|
325
|
+
.tapni-auth-billing .subscription-status {
|
|
317
326
|
display: inline-block;
|
|
318
327
|
padding: 4px 12px;
|
|
319
328
|
border-radius: 12px;
|
|
@@ -322,55 +331,55 @@ export default {
|
|
|
322
331
|
text-transform: uppercase;
|
|
323
332
|
}
|
|
324
333
|
|
|
325
|
-
.status-trialing {
|
|
334
|
+
.tapni-auth-billing .status-trialing {
|
|
326
335
|
background: #e3f2fd;
|
|
327
336
|
color: #1976d2;
|
|
328
337
|
}
|
|
329
338
|
|
|
330
|
-
.status-active {
|
|
339
|
+
.tapni-auth-billing .status-active {
|
|
331
340
|
background: #e8f5e9;
|
|
332
341
|
color: #388e3c;
|
|
333
342
|
}
|
|
334
343
|
|
|
335
|
-
.status-past_due {
|
|
344
|
+
.tapni-auth-billing .status-past_due {
|
|
336
345
|
background: #fff3e0;
|
|
337
346
|
color: #f57c00;
|
|
338
347
|
}
|
|
339
348
|
|
|
340
|
-
.status-canceled {
|
|
349
|
+
.tapni-auth-billing .status-canceled {
|
|
341
350
|
background: #ffebee;
|
|
342
351
|
color: #d32f2f;
|
|
343
352
|
}
|
|
344
353
|
|
|
345
|
-
.subscription-details {
|
|
354
|
+
.tapni-auth-billing .subscription-details {
|
|
346
355
|
margin-bottom: 16px;
|
|
347
356
|
}
|
|
348
357
|
|
|
349
|
-
.detail-row {
|
|
358
|
+
.tapni-auth-billing .detail-row {
|
|
350
359
|
display: flex;
|
|
351
360
|
justify-content: space-between;
|
|
352
361
|
padding: 8px 0;
|
|
353
362
|
font-size: 15px;
|
|
354
363
|
}
|
|
355
364
|
|
|
356
|
-
.detail-label {
|
|
365
|
+
.tapni-auth-billing .detail-label {
|
|
357
366
|
color: #666;
|
|
358
367
|
font-weight: 500;
|
|
359
368
|
}
|
|
360
369
|
|
|
361
|
-
.detail-value {
|
|
370
|
+
.tapni-auth-billing .detail-value {
|
|
362
371
|
color: #000;
|
|
363
372
|
font-weight: 600;
|
|
364
373
|
}
|
|
365
374
|
|
|
366
|
-
.subscription-actions {
|
|
375
|
+
.tapni-auth-billing .subscription-actions {
|
|
367
376
|
display: flex;
|
|
368
377
|
justify-content: flex-end;
|
|
369
378
|
padding-top: 16px;
|
|
370
379
|
border-top: 1px solid #f0f0f0;
|
|
371
380
|
}
|
|
372
381
|
|
|
373
|
-
.cancel-button {
|
|
382
|
+
.tapni-auth-billing .cancel-button {
|
|
374
383
|
padding: 10px 20px;
|
|
375
384
|
background: #fff;
|
|
376
385
|
color: #d32f2f;
|
|
@@ -382,18 +391,18 @@ export default {
|
|
|
382
391
|
transition: all 0.2s;
|
|
383
392
|
}
|
|
384
393
|
|
|
385
|
-
.cancel-button:hover:not(:disabled) {
|
|
394
|
+
.tapni-auth-billing .cancel-button:hover:not(:disabled) {
|
|
386
395
|
background: #d32f2f;
|
|
387
396
|
color: #fff;
|
|
388
397
|
}
|
|
389
398
|
|
|
390
|
-
.cancel-button:disabled {
|
|
399
|
+
.tapni-auth-billing .cancel-button:disabled {
|
|
391
400
|
opacity: 0.5;
|
|
392
401
|
cursor: not-allowed;
|
|
393
402
|
}
|
|
394
403
|
|
|
395
404
|
/* Modal Styles */
|
|
396
|
-
.modal-overlay {
|
|
405
|
+
.tapni-auth-billing .modal-overlay {
|
|
397
406
|
position: fixed;
|
|
398
407
|
top: 0;
|
|
399
408
|
left: 0;
|
|
@@ -407,7 +416,7 @@ export default {
|
|
|
407
416
|
padding: 20px;
|
|
408
417
|
}
|
|
409
418
|
|
|
410
|
-
.modal-content {
|
|
419
|
+
.tapni-auth-billing .modal-content {
|
|
411
420
|
background: #fff;
|
|
412
421
|
border-radius: 16px;
|
|
413
422
|
width: 100%;
|
|
@@ -417,7 +426,7 @@ export default {
|
|
|
417
426
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
|
418
427
|
}
|
|
419
428
|
|
|
420
|
-
.modal-header {
|
|
429
|
+
.tapni-auth-billing .modal-header {
|
|
421
430
|
display: flex;
|
|
422
431
|
justify-content: space-between;
|
|
423
432
|
align-items: center;
|
|
@@ -425,14 +434,14 @@ export default {
|
|
|
425
434
|
border-bottom: 1px solid #e0e0e0;
|
|
426
435
|
}
|
|
427
436
|
|
|
428
|
-
.modal-header h3 {
|
|
437
|
+
.tapni-auth-billing .modal-header h3 {
|
|
429
438
|
margin: 0;
|
|
430
439
|
font-size: 20px;
|
|
431
440
|
font-weight: 600;
|
|
432
441
|
color: #000;
|
|
433
442
|
}
|
|
434
443
|
|
|
435
|
-
.close-button {
|
|
444
|
+
.tapni-auth-billing .close-button {
|
|
436
445
|
background: none;
|
|
437
446
|
border: none;
|
|
438
447
|
font-size: 28px;
|
|
@@ -448,26 +457,26 @@ export default {
|
|
|
448
457
|
transition: background 0.2s;
|
|
449
458
|
}
|
|
450
459
|
|
|
451
|
-
.close-button:hover {
|
|
460
|
+
.tapni-auth-billing .close-button:hover {
|
|
452
461
|
background: #f0f0f0;
|
|
453
462
|
}
|
|
454
463
|
|
|
455
|
-
.modal-body {
|
|
464
|
+
.tapni-auth-billing .modal-body {
|
|
456
465
|
padding: 24px;
|
|
457
466
|
}
|
|
458
467
|
|
|
459
|
-
.modal-text {
|
|
468
|
+
.tapni-auth-billing .modal-text {
|
|
460
469
|
font-size: 16px;
|
|
461
470
|
line-height: 1.5;
|
|
462
471
|
color: #333;
|
|
463
472
|
margin-bottom: 24px;
|
|
464
473
|
}
|
|
465
474
|
|
|
466
|
-
.feedback-section {
|
|
475
|
+
.tapni-auth-billing .feedback-section {
|
|
467
476
|
margin-top: 20px;
|
|
468
477
|
}
|
|
469
478
|
|
|
470
|
-
.feedback-label {
|
|
479
|
+
.tapni-auth-billing .feedback-label {
|
|
471
480
|
display: block;
|
|
472
481
|
font-size: 14px;
|
|
473
482
|
font-weight: 600;
|
|
@@ -475,7 +484,7 @@ export default {
|
|
|
475
484
|
margin-bottom: 8px;
|
|
476
485
|
}
|
|
477
486
|
|
|
478
|
-
.feedback-textarea {
|
|
487
|
+
.tapni-auth-billing .feedback-textarea {
|
|
479
488
|
width: 100%;
|
|
480
489
|
padding: 12px;
|
|
481
490
|
border: 1px solid #e0e0e0;
|
|
@@ -486,12 +495,12 @@ export default {
|
|
|
486
495
|
transition: border-color 0.2s;
|
|
487
496
|
}
|
|
488
497
|
|
|
489
|
-
.feedback-textarea:focus {
|
|
498
|
+
.tapni-auth-billing .feedback-textarea:focus {
|
|
490
499
|
outline: none;
|
|
491
500
|
border-color: #1976d2;
|
|
492
501
|
}
|
|
493
502
|
|
|
494
|
-
.modal-footer {
|
|
503
|
+
.tapni-auth-billing .modal-footer {
|
|
495
504
|
display: flex;
|
|
496
505
|
gap: 12px;
|
|
497
506
|
padding: 20px 24px;
|
|
@@ -499,7 +508,7 @@ export default {
|
|
|
499
508
|
justify-content: flex-end;
|
|
500
509
|
}
|
|
501
510
|
|
|
502
|
-
.button-secondary {
|
|
511
|
+
.tapni-auth-billing .button-secondary {
|
|
503
512
|
padding: 12px 24px;
|
|
504
513
|
background: #fff;
|
|
505
514
|
color: #333;
|
|
@@ -511,11 +520,11 @@ export default {
|
|
|
511
520
|
transition: all 0.2s;
|
|
512
521
|
}
|
|
513
522
|
|
|
514
|
-
.button-secondary:hover {
|
|
523
|
+
.tapni-auth-billing .button-secondary:hover {
|
|
515
524
|
background: #f5f5f5;
|
|
516
525
|
}
|
|
517
526
|
|
|
518
|
-
.button-danger {
|
|
527
|
+
.tapni-auth-billing .button-danger {
|
|
519
528
|
padding: 12px 24px;
|
|
520
529
|
background: #d32f2f;
|
|
521
530
|
color: #fff;
|
|
@@ -527,11 +536,11 @@ export default {
|
|
|
527
536
|
transition: all 0.2s;
|
|
528
537
|
}
|
|
529
538
|
|
|
530
|
-
.button-danger:hover:not(:disabled) {
|
|
539
|
+
.tapni-auth-billing .button-danger:hover:not(:disabled) {
|
|
531
540
|
background: #b71c1c;
|
|
532
541
|
}
|
|
533
542
|
|
|
534
|
-
.button-danger:disabled {
|
|
543
|
+
.tapni-auth-billing .button-danger:disabled {
|
|
535
544
|
opacity: 0.5;
|
|
536
545
|
cursor: not-allowed;
|
|
537
546
|
}
|
package/dist/Billing-DkXdzGvS.js
DELETED
|
@@ -1,256 +0,0 @@
|
|
|
1
|
-
import { _ as m, A as f, E as u, a as y } from "./install-Cb6nCJn_.js";
|
|
2
|
-
import { resolveComponent as v, openBlock as a, createElementBlock as r, createElementVNode as e, createCommentVNode as d, createBlock as C, withCtx as _, toDisplayString as n, Fragment as k, renderList as w, normalizeClass as S, withModifiers as M, createTextVNode as b, withDirectives as x, vModelText as D } from "vue";
|
|
3
|
-
const E = {
|
|
4
|
-
name: "AuthBilling",
|
|
5
|
-
mixins: [f],
|
|
6
|
-
props: {
|
|
7
|
-
payload: {
|
|
8
|
-
type: Object,
|
|
9
|
-
default: {}
|
|
10
|
-
}
|
|
11
|
-
},
|
|
12
|
-
data() {
|
|
13
|
-
return {
|
|
14
|
-
loading: !1,
|
|
15
|
-
subscriptions: [],
|
|
16
|
-
showCancelModal: !1,
|
|
17
|
-
selectedSubscription: null,
|
|
18
|
-
cancelFeedback: ""
|
|
19
|
-
};
|
|
20
|
-
},
|
|
21
|
-
async mounted() {
|
|
22
|
-
this.isLoggedIn || this.$router.push("/login"), await this.getAccountSettings(), this.loadSubscriptions();
|
|
23
|
-
},
|
|
24
|
-
methods: {
|
|
25
|
-
close() {
|
|
26
|
-
u.$emit("ssoEvent", { name: "toggleAuthModal", data: !0 });
|
|
27
|
-
},
|
|
28
|
-
loadSubscriptions() {
|
|
29
|
-
if (this.account.billing) {
|
|
30
|
-
const t = this.account.billing, s = [];
|
|
31
|
-
for (const l in t)
|
|
32
|
-
l !== "region" && l !== "currency" && l !== "paymentProfiles" && typeof t[l] == "object" && t[l].subscriptionId && s.push(t[l]);
|
|
33
|
-
this.subscriptions = s;
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
formatCurrency(t, s) {
|
|
37
|
-
return `${{
|
|
38
|
-
EUR: "€",
|
|
39
|
-
USD: "$",
|
|
40
|
-
GBP: "£"
|
|
41
|
-
}[s == null ? void 0 : s.toUpperCase()] || s || ""}${(t == null ? void 0 : t.toFixed(2)) || "0.00"}`;
|
|
42
|
-
},
|
|
43
|
-
formatInterval(t) {
|
|
44
|
-
return t ? `per ${t}` : "";
|
|
45
|
-
},
|
|
46
|
-
formatDate(t) {
|
|
47
|
-
return t ? new Date(t * 1e3).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }) : "";
|
|
48
|
-
},
|
|
49
|
-
getStatusText(t) {
|
|
50
|
-
return {
|
|
51
|
-
trialing: "Trial",
|
|
52
|
-
active: "Active",
|
|
53
|
-
past_due: "Past Due",
|
|
54
|
-
canceled: "Canceled",
|
|
55
|
-
unpaid: "Unpaid"
|
|
56
|
-
}[t] || t;
|
|
57
|
-
},
|
|
58
|
-
getStatusClass(t) {
|
|
59
|
-
return `status-${t}`;
|
|
60
|
-
},
|
|
61
|
-
openCancelModal(t) {
|
|
62
|
-
this.selectedSubscription = t, this.showCancelModal = !0, this.cancelFeedback = "";
|
|
63
|
-
},
|
|
64
|
-
closeCancelModal() {
|
|
65
|
-
this.showCancelModal = !1, this.selectedSubscription = null, this.cancelFeedback = "";
|
|
66
|
-
},
|
|
67
|
-
async confirmCancel() {
|
|
68
|
-
var t, s;
|
|
69
|
-
if (this.selectedSubscription) {
|
|
70
|
-
if (this.selectedSubscription.paymentGateway === "revenuecat") {
|
|
71
|
-
u.$emit("ssoEvent", {
|
|
72
|
-
name: "subscriptionCancelled",
|
|
73
|
-
data: {
|
|
74
|
-
subscriptionId: this.selectedSubscription.subscriptionId,
|
|
75
|
-
paymentGateway: this.selectedSubscription.paymentGateway,
|
|
76
|
-
feedback: this.cancelFeedback
|
|
77
|
-
}
|
|
78
|
-
}), this.closeCancelModal();
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
this.loading = !0;
|
|
82
|
-
try {
|
|
83
|
-
const l = await y(!1, "v2").post("checkout/cancel/" + this.selectedSubscription.subscriptionId, {
|
|
84
|
-
feedback: this.cancelFeedback
|
|
85
|
-
});
|
|
86
|
-
if (l.data.success)
|
|
87
|
-
u.$emit("showToast", {
|
|
88
|
-
type: "success",
|
|
89
|
-
message: "Subscription canceled successfully"
|
|
90
|
-
}), await this.getAccountSettings(), this.loadSubscriptions(), this.closeCancelModal();
|
|
91
|
-
else
|
|
92
|
-
throw new Error(l.data.message || "Failed to cancel subscription");
|
|
93
|
-
} catch (l) {
|
|
94
|
-
console.error("Error canceling subscription:", l), u.$emit("showToast", {
|
|
95
|
-
type: "error",
|
|
96
|
-
message: ((s = (t = l.response) == null ? void 0 : t.data) == null ? void 0 : s.message) || "Failed to cancel subscription. Please try again."
|
|
97
|
-
});
|
|
98
|
-
} finally {
|
|
99
|
-
this.loading = !1;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
}, F = { class: "page-login content-boxed content-boxed-padding" }, I = { class: "subheaderContainer full-top" }, T = ["src"], A = {
|
|
105
|
-
class: "center-text",
|
|
106
|
-
style: { "flex-grow": "1", "text-align": "center", margin: "0", "font-weight": "600" }
|
|
107
|
-
}, B = { class: "container left-text" }, L = { class: "center-text" }, N = { class: "full-top" }, U = {
|
|
108
|
-
key: 0,
|
|
109
|
-
class: "no-subscriptions center-text full-top"
|
|
110
|
-
}, P = { key: 1 }, G = { class: "subscription-header" }, V = { class: "subscription-info" }, j = { class: "subscription-name" }, z = { class: "subscription-details" }, K = { class: "detail-row" }, O = { class: "detail-value" }, R = { class: "detail-row" }, W = { class: "detail-value" }, Y = { class: "detail-row" }, q = { class: "detail-value" }, H = {
|
|
111
|
-
key: 0,
|
|
112
|
-
class: "detail-row"
|
|
113
|
-
}, J = { class: "detail-value" }, Q = {
|
|
114
|
-
key: 1,
|
|
115
|
-
class: "detail-row"
|
|
116
|
-
}, X = { class: "detail-value" }, Z = {
|
|
117
|
-
key: 0,
|
|
118
|
-
class: "subscription-actions"
|
|
119
|
-
}, $ = ["onClick", "disabled"], ss = { class: "modal-content" }, es = { class: "modal-header" }, ts = { class: "modal-body" }, os = { class: "modal-text" }, is = { class: "feedback-section" }, ls = { class: "modal-footer" }, ns = ["disabled"];
|
|
120
|
-
function as(t, s, l, g, c, i) {
|
|
121
|
-
var p;
|
|
122
|
-
const h = v("router-link");
|
|
123
|
-
return a(), r("div", F, [
|
|
124
|
-
t.isModal ? (a(), r("a", {
|
|
125
|
-
key: 0,
|
|
126
|
-
onClick: s[0] || (s[0] = (...o) => i.close && i.close(...o)),
|
|
127
|
-
class: "color-black pull-right pointer",
|
|
128
|
-
style: { "margin-top": "0px", position: "absolute", right: "-20px", "text-align": "right" }
|
|
129
|
-
}, s[6] || (s[6] = [
|
|
130
|
-
e("i", { class: "font-17 color-black" }, [
|
|
131
|
-
e("img", {
|
|
132
|
-
src: "https://cdn.tapni.co/icons/down-arrow.png",
|
|
133
|
-
class: "responsive-image",
|
|
134
|
-
style: { width: "35%" }
|
|
135
|
-
})
|
|
136
|
-
], -1)
|
|
137
|
-
]))) : d("", !0),
|
|
138
|
-
e("div", I, [
|
|
139
|
-
t.isModal ? d("", !0) : (a(), C(h, {
|
|
140
|
-
key: 0,
|
|
141
|
-
to: "/account",
|
|
142
|
-
class: "button gray-button pointer left-button"
|
|
143
|
-
}, {
|
|
144
|
-
default: _(() => [
|
|
145
|
-
e("img", {
|
|
146
|
-
src: t.getIcon("arrow-gray-right.svg"),
|
|
147
|
-
height: "20",
|
|
148
|
-
width: "20",
|
|
149
|
-
class: "btn-icon",
|
|
150
|
-
style: { rotate: "180deg" }
|
|
151
|
-
}, null, 8, T)
|
|
152
|
-
]),
|
|
153
|
-
_: 1
|
|
154
|
-
})),
|
|
155
|
-
e("h2", A, n(t.ssoLang[t.appLanguage].billing), 1)
|
|
156
|
-
]),
|
|
157
|
-
e("div", B, [
|
|
158
|
-
e("p", L, n(t.ssoLang[t.appLanguage].billing_p), 1),
|
|
159
|
-
e("div", N, [
|
|
160
|
-
c.subscriptions.length === 0 ? (a(), r("div", U, s[7] || (s[7] = [
|
|
161
|
-
e("p", { class: "gray-text" }, "There are no active subscriptions at this point.", -1)
|
|
162
|
-
]))) : (a(), r("div", P, [
|
|
163
|
-
(a(!0), r(k, null, w(c.subscriptions, (o) => (a(), r("div", {
|
|
164
|
-
key: o.subscriptionId,
|
|
165
|
-
class: "subscription-card half-bottom"
|
|
166
|
-
}, [
|
|
167
|
-
e("div", G, [
|
|
168
|
-
e("div", V, [
|
|
169
|
-
e("h3", j, n(o.subscriptionName), 1),
|
|
170
|
-
e("span", {
|
|
171
|
-
class: S(["subscription-status", i.getStatusClass(o.status)])
|
|
172
|
-
}, n(i.getStatusText(o.status)), 3)
|
|
173
|
-
])
|
|
174
|
-
]),
|
|
175
|
-
e("div", z, [
|
|
176
|
-
e("div", K, [
|
|
177
|
-
s[8] || (s[8] = e("span", { class: "detail-label" }, "Amount:", -1)),
|
|
178
|
-
e("span", O, n(i.formatCurrency(o.amount, o.currency)), 1)
|
|
179
|
-
]),
|
|
180
|
-
e("div", R, [
|
|
181
|
-
s[9] || (s[9] = e("span", { class: "detail-label" }, "Billing:", -1)),
|
|
182
|
-
e("span", W, n(i.formatInterval(o.interval)), 1)
|
|
183
|
-
]),
|
|
184
|
-
e("div", Y, [
|
|
185
|
-
s[10] || (s[10] = e("span", { class: "detail-label" }, "Licenses:", -1)),
|
|
186
|
-
e("span", q, n(o.licenses), 1)
|
|
187
|
-
]),
|
|
188
|
-
o.isTrial ? (a(), r("div", H, [
|
|
189
|
-
s[11] || (s[11] = e("span", { class: "detail-label" }, "Trial Ends:", -1)),
|
|
190
|
-
e("span", J, n(i.formatDate(o.trialEnd)), 1)
|
|
191
|
-
])) : o.endDate ? (a(), r("div", Q, [
|
|
192
|
-
s[12] || (s[12] = e("span", { class: "detail-label" }, "Next Billing:", -1)),
|
|
193
|
-
e("span", X, n(i.formatDate(o.endDate)), 1)
|
|
194
|
-
])) : d("", !0)
|
|
195
|
-
]),
|
|
196
|
-
o.status !== "canceled" ? (a(), r("div", Z, [
|
|
197
|
-
e("button", {
|
|
198
|
-
onClick: (cs) => i.openCancelModal(o),
|
|
199
|
-
class: "cancel-button",
|
|
200
|
-
disabled: c.loading
|
|
201
|
-
}, n(c.loading ? "Processing..." : "Cancel Subscription"), 9, $)
|
|
202
|
-
])) : d("", !0)
|
|
203
|
-
]))), 128))
|
|
204
|
-
]))
|
|
205
|
-
])
|
|
206
|
-
]),
|
|
207
|
-
c.showCancelModal ? (a(), r("div", {
|
|
208
|
-
key: 1,
|
|
209
|
-
class: "modal-overlay",
|
|
210
|
-
onClick: s[5] || (s[5] = M((...o) => i.closeCancelModal && i.closeCancelModal(...o), ["self"]))
|
|
211
|
-
}, [
|
|
212
|
-
e("div", ss, [
|
|
213
|
-
e("div", es, [
|
|
214
|
-
s[13] || (s[13] = e("h3", null, "Cancel Subscription", -1)),
|
|
215
|
-
e("button", {
|
|
216
|
-
onClick: s[1] || (s[1] = (...o) => i.closeCancelModal && i.closeCancelModal(...o)),
|
|
217
|
-
class: "close-button"
|
|
218
|
-
}, "×")
|
|
219
|
-
]),
|
|
220
|
-
e("div", ts, [
|
|
221
|
-
e("p", os, [
|
|
222
|
-
s[14] || (s[14] = b(" Are you sure you want to cancel your subscription to ")),
|
|
223
|
-
e("b", null, n((p = c.selectedSubscription) == null ? void 0 : p.subscriptionName), 1),
|
|
224
|
-
s[15] || (s[15] = b("? "))
|
|
225
|
-
]),
|
|
226
|
-
e("div", is, [
|
|
227
|
-
s[16] || (s[16] = e("label", { class: "feedback-label" }, "We'd love to know why you're canceling (optional):", -1)),
|
|
228
|
-
x(e("textarea", {
|
|
229
|
-
"onUpdate:modelValue": s[2] || (s[2] = (o) => c.cancelFeedback = o),
|
|
230
|
-
class: "feedback-textarea",
|
|
231
|
-
placeholder: "Your feedback helps us improve our service...",
|
|
232
|
-
rows: "4"
|
|
233
|
-
}, null, 512), [
|
|
234
|
-
[D, c.cancelFeedback]
|
|
235
|
-
])
|
|
236
|
-
])
|
|
237
|
-
]),
|
|
238
|
-
e("div", ls, [
|
|
239
|
-
e("button", {
|
|
240
|
-
onClick: s[3] || (s[3] = (...o) => i.closeCancelModal && i.closeCancelModal(...o)),
|
|
241
|
-
class: "button-secondary"
|
|
242
|
-
}, " Keep Subscription "),
|
|
243
|
-
e("button", {
|
|
244
|
-
onClick: s[4] || (s[4] = (...o) => i.confirmCancel && i.confirmCancel(...o)),
|
|
245
|
-
class: "button-danger",
|
|
246
|
-
disabled: c.loading
|
|
247
|
-
}, n(c.loading ? "Canceling..." : "Confirm Cancellation"), 9, ns)
|
|
248
|
-
])
|
|
249
|
-
])
|
|
250
|
-
])) : d("", !0)
|
|
251
|
-
]);
|
|
252
|
-
}
|
|
253
|
-
const us = /* @__PURE__ */ m(E, [["render", as], ["__scopeId", "data-v-2277e85c"]]);
|
|
254
|
-
export {
|
|
255
|
-
us as default
|
|
256
|
-
};
|