From 50abdc32668e30ea4b2a8d85cd7b95edf042ab6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Thu, 30 Dec 2021 15:42:09 +0100
Subject: [PATCH] transaction UI refactoring

---
 public/mix-manifest.json                      | 167 ++++++++++++++----
 resources/js/components/Others/ColorLabel.vue |   4 +-
 .../js/components/Others/Forms/InfoBox.vue    |  12 ++
 resources/js/helpers/functionHelpers.js       |   7 +
 .../js/views/User/MeteredSubscription.vue     |  21 ++-
 src/App/Users/Resources/UserResource.php      |   2 +-
 6 files changed, 170 insertions(+), 43 deletions(-)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index e23e64ba..c8060635 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -3,7 +3,7 @@
     "/css/app.css": "/css/app.css",
     "/css/tailwind.css": "/css/tailwind.css",
     "/chunks/admin.js": "/chunks/admin.js?id=5014620eaa736d4d5cd7",
-    "/chunks/admin-account.js": "/chunks/admin-account.js?id=4786e0d7ab465da795ab",
+    "/chunks/admin-account.js": "/chunks/admin-account.js?id=fedd1d172b5b18188d83",
     "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~640155e3.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~640155e3.js?id=c9eb40bfacc2b268290f",
     "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~e871233b.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~e871233b.js?id=7df5c5c997a6f638efdf",
     "/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~9b68162c.js": "/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~9b68162c.js?id=5841d65172536a8a9bdc",
@@ -16,66 +16,66 @@
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=a78d34b8ccc9a5bd9532",
     "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=afeba4ebd13af7e995be",
     "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=5e7505fe2f64858109fa",
-    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.js?id=75bbb477bf92edb65799",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.js?id=9dd101339ae6d85c6175",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~fa9d08c1.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~fa9d08c1.js?id=741acf06489eac45774e",
     "/chunks/app-billings.js": "/chunks/app-billings.js?id=6f363efa7ba2f45c9d24",
     "/chunks/app-email.js": "/chunks/app-email.js?id=01efc9cc57d65ec7039a",
     "/chunks/app-index.js": "/chunks/app-index.js?id=1feec4c18254ca68ad24",
-    "/chunks/app-language.js": "/chunks/app-language.js?id=5bafd7887ea39389c667",
+    "/chunks/app-language.js": "/chunks/app-language.js?id=b3777d69eb41da507bf2",
     "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js?id=3cbb19b80e635b3524e5",
     "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan-creat~d6690165.js": "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan-creat~d6690165.js?id=2f03fbbe27b922063d16",
     "/chunks/app-others.js": "/chunks/app-others.js?id=1c88b2b580c7c26c1f63",
     "/chunks/app-payments.js": "/chunks/app-payments.js?id=c8c0eb1184c18672e461",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=2a96295eef59bd6c8921",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=5b66d3db248299e404d5",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=6d1a68cff372b52f12e1",
     "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js?id=107a78323eef0c1d4c81",
-    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=562978d7a1d57f5e81eb",
-    "/chunks/contact-us.js": "/chunks/contact-us.js?id=df0b573d8f305b91e113",
+    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=bce1398aa2c1a9c69f34",
+    "/chunks/contact-us.js": "/chunks/contact-us.js?id=797331b105e310861c44",
     "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=65ee559ca803555be568",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=a6608519c360dbc8fb79",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=9bd774ab677e324cde19",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=e7df8df40a669c9f60d1",
     "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-p~2611ac93.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-p~2611ac93.js?id=c76ae7cb1ecbdedac1cf",
     "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/subscriptions.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/subscriptions.js?id=95b32230258beb6391ed",
-    "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js?id=f72a1b2efde61b53a755",
-    "/chunks/database.js": "/chunks/database.js?id=4e35fa30b1475441c9ed",
+    "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js?id=c4e25f3ee5acf4145ace",
+    "/chunks/database.js": "/chunks/database.js?id=d3c2b04b6d825e7a5c2a",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=6c86916c6c6f679fa86b",
     "/chunks/email-verified.js": "/chunks/email-verified.js?id=253ce639751cc8799458",
-    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=2c7b532cf2a3c384c417",
+    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=e520393fd573c54c4886",
     "/chunks/files.js": "/chunks/files.js?id=26a322863d9c92183c6f",
     "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js?id=64ac90ff8ae7d3ee3ed1",
     "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js?id=2f2e1987e91a74932dcb",
     "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js?id=44dd372c3414f407ed37",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=9d10a05edfb3a4a11efe",
     "/chunks/homepage.js": "/chunks/homepage.js?id=b89dd81804b8a0bd3f0b",
-    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=7cff2b5a1caffc4a494c",
+    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=415ad1ced431e61c380b",
     "/chunks/invitation.js": "/chunks/invitation.js?id=c9cd3541ee362ae8d5f7",
     "/chunks/invoices.js": "/chunks/invoices.js?id=2032e4f8e4f5ed58b8b4",
     "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=4eb4c11f0e574303af7f",
     "/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=f0a842fe26c58775f47b",
-    "/chunks/pages.js": "/chunks/pages.js?id=7db66df0453135bf4e51",
+    "/chunks/pages.js": "/chunks/pages.js?id=8c6772e3224fadca2bf2",
     "/chunks/plan.js": "/chunks/plan.js?id=f62a5bd64fb706b2f0e2",
-    "/chunks/plan-create/fixed.js": "/chunks/plan-create/fixed.js?id=816ccc71d731eee026c5",
-    "/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=db413790256e03fe40ed",
-    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=ca2a10b8889d21d43d57",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=ee69668d68391f050645",
-    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=afa7c5328893c5d16e3b",
+    "/chunks/plan-create/fixed.js": "/chunks/plan-create/fixed.js?id=84617542ab68f42c2ab8",
+    "/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=14e52821f7c7de793ff1",
+    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=c97fde9a7b6395a7dd45",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=b6d793be2311bc745783",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=7eff560fea52770a642f",
     "/chunks/plans.js": "/chunks/plans.js?id=854c232c29d88c5b541a",
-    "/chunks/platform.js": "/chunks/platform.js?id=426da7075ef9a88ea088",
+    "/chunks/platform.js": "/chunks/platform.js?id=6578b4943639fdc45485",
     "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=5734e9333fc67c706853",
     "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js": "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js?id=7d983dfdc91de607d737",
     "/chunks/profile.js": "/chunks/profile.js?id=8688d9c7ff850e6989e6",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=dfa4128d68360d5e1b3b",
-    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=2eeb31ccee322c06b81c",
+    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=19ed542c413992bb052e",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=2716127ee2f945a90c0e",
-    "/chunks/settings.js": "/chunks/settings.js?id=d86481764216bbe5e6b2",
-    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=2cb7c4bf648c9b85eb6b",
+    "/chunks/settings.js": "/chunks/settings.js?id=33ff8531237d665e415d",
+    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=d5fb4dd58e95d415ef56",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=049c3383e310392f966d",
-    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=263b344dad92d1481ec3",
+    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=5a0971b7e97d67546f9d",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=76b45c336e8e12b23e81",
     "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js": "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js?id=3e16c9ff52b4447b2c90",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=6f0312191c536a59e362",
-    "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=743bf9cb1e62af56c04e",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=0257f7ee4bba55fa90b5",
+    "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=84bea78f40d86db4e583",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
     "/chunks/shared.js": "/chunks/shared.js?id=6230d050545cd1bd9b87",
     "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=78390f82ed065495d64e",
@@ -85,23 +85,23 @@
     "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=f2fb680ebf4873ff4436",
     "/chunks/sign-in.js": "/chunks/sign-in.js?id=da0a2e8fa83c7384e72d",
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=f7a2321e731c85ade564",
-    "/chunks/status-check.js": "/chunks/status-check.js?id=88722c3496a8b22d89b3",
-    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=01d06787b211c0cc0a5a",
-    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=d850137f08960f59acb0",
+    "/chunks/status-check.js": "/chunks/status-check.js?id=4916bc8cef5a9ba21b3e",
+    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=8f3611998fc59d478287",
+    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=facba0978ad88a7eb412",
     "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=8ac19b3fcfd57d79e5b1",
-    "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=a08cba0bd5f7dabc19b2",
+    "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=bb462df01054c6fc0e48",
     "/chunks/team-folders.js": "/chunks/team-folders.js?id=c337ec175f9e4b7f33c4",
     "/chunks/trash.js": "/chunks/trash.js?id=4f0ee7a430c2790c4213",
-    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=f4e3153573f35ebc9f89",
+    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=f3a3ddbb00ec97e12853",
     "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=8bd237c632018a537d76",
     "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=7ee9b84ffed9bf544997",
-    "/chunks/user.js": "/chunks/user.js?id=80d4433e6a0f1a2a940d",
+    "/chunks/user.js": "/chunks/user.js?id=c707b86c3e900cf09794",
     "/chunks/user-create.js": "/chunks/user-create.js?id=4fa9fb390471ad54796c",
     "/chunks/user-delete.js": "/chunks/user-delete.js?id=e2d59590e7a1fbc484c2",
     "/chunks/user-detail.js": "/chunks/user-detail.js?id=71e62f6d632b86449959",
     "/chunks/user-password.js": "/chunks/user-password.js?id=e184d40c36cb3c0f1e0d",
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=ed05b13deb6acce5e593",
-    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=23aaeacfd9d7d9399d2d",
+    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=88d35a6d06afded4a0b2",
     "/chunks/users.js": "/chunks/users.js?id=ab7eeac6e8559dc1eb2b",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~27e0fa60.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~27e0fa60.js?id=348042c51ef86f65cf0c",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~5ef927fd.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~5ef927fd.js?id=0ccd084e22a0efcfb390",
@@ -360,5 +360,108 @@
     "/chunks/settings-subscription.ca0ea35a8a857919ea7a.hot-update.js": "/chunks/settings-subscription.ca0ea35a8a857919ea7a.hot-update.js",
     "/chunks/settings-subscription.18aeae959f306dd48d3d.hot-update.js": "/chunks/settings-subscription.18aeae959f306dd48d3d.hot-update.js",
     "/chunks/settings-subscription.36053a864bdad08d7d34.hot-update.js": "/chunks/settings-subscription.36053a864bdad08d7d34.hot-update.js",
-    "/chunks/settings-subscription.1bd72c8d58cbc4e4669a.hot-update.js": "/chunks/settings-subscription.1bd72c8d58cbc4e4669a.hot-update.js"
+    "/chunks/settings-subscription.1bd72c8d58cbc4e4669a.hot-update.js": "/chunks/settings-subscription.1bd72c8d58cbc4e4669a.hot-update.js",
+    "/chunks/admin-account.cb6d811b7d45c6025120.hot-update.js": "/chunks/admin-account.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.cb6d811b7d45c6025120.hot-update.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/app-language.cb6d811b7d45c6025120.hot-update.js": "/chunks/app-language.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/app-setup.cb6d811b7d45c6025120.hot-update.js": "/chunks/app-setup.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/billings-detail.cb6d811b7d45c6025120.hot-update.js": "/chunks/billings-detail.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/contact-us.cb6d811b7d45c6025120.hot-update.js": "/chunks/contact-us.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/dashboard.cb6d811b7d45c6025120.hot-update.js": "/chunks/dashboard.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/database.cb6d811b7d45c6025120.hot-update.js": "/chunks/database.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/environment-setup.cb6d811b7d45c6025120.hot-update.js": "/chunks/environment-setup.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/installation-disclaimer.cb6d811b7d45c6025120.hot-update.js": "/chunks/installation-disclaimer.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/plan-create/fixed.cb6d811b7d45c6025120.hot-update.js": "/chunks/plan-create/fixed.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/plan-create/metered.cb6d811b7d45c6025120.hot-update.js": "/chunks/plan-create/metered.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/plan-delete.cb6d811b7d45c6025120.hot-update.js": "/chunks/plan-delete.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/plan-settings.cb6d811b7d45c6025120.hot-update.js": "/chunks/plan-settings.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/plan-subscribers.cb6d811b7d45c6025120.hot-update.js": "/chunks/plan-subscribers.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/platform.cb6d811b7d45c6025120.hot-update.js": "/chunks/platform.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/purchase-code.cb6d811b7d45c6025120.hot-update.js": "/chunks/purchase-code.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/settings-create-payment-methods.cb6d811b7d45c6025120.hot-update.js": "/chunks/settings-create-payment-methods.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/settings-payment-methods.cb6d811b7d45c6025120.hot-update.js": "/chunks/settings-payment-methods.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/settings-subscription.cb6d811b7d45c6025120.hot-update.js": "/chunks/settings-subscription.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/settings~chunks/settings-password.cb6d811b7d45c6025120.hot-update.js": "/chunks/settings~chunks/settings-password.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/status-check.cb6d811b7d45c6025120.hot-update.js": "/chunks/status-check.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/stripe-credentials.cb6d811b7d45c6025120.hot-update.js": "/chunks/stripe-credentials.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/subscription-plans.cb6d811b7d45c6025120.hot-update.js": "/chunks/subscription-plans.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/subscriptions.cb6d811b7d45c6025120.hot-update.js": "/chunks/subscriptions.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/upgrade-billing.cb6d811b7d45c6025120.hot-update.js": "/chunks/upgrade-billing.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/user-subscription.cb6d811b7d45c6025120.hot-update.js": "/chunks/user-subscription.cb6d811b7d45c6025120.hot-update.js",
+    "/chunks/settings-subscription.80e8214c1b1a30d025d3.hot-update.js": "/chunks/settings-subscription.80e8214c1b1a30d025d3.hot-update.js",
+    "/js/main.893528b3a3f3bd416071.hot-update.js": "/js/main.893528b3a3f3bd416071.hot-update.js",
+    "/chunks/settings-subscription.aae66ee8fe53e9210f6e.hot-update.js": "/chunks/settings-subscription.aae66ee8fe53e9210f6e.hot-update.js",
+    "/chunks/settings-subscription.02af1ad17b8fdf1e7c4e.hot-update.js": "/chunks/settings-subscription.02af1ad17b8fdf1e7c4e.hot-update.js",
+    "/js/main.afbc152af5fc35bf9d6c.hot-update.js": "/js/main.afbc152af5fc35bf9d6c.hot-update.js",
+    "/chunks/settings-subscription.110c03a83989d0d3830a.hot-update.js": "/chunks/settings-subscription.110c03a83989d0d3830a.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.130014c6e030ddbf2407.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.130014c6e030ddbf2407.hot-update.js",
+    "/chunks/pages.130014c6e030ddbf2407.hot-update.js": "/chunks/pages.130014c6e030ddbf2407.hot-update.js",
+    "/chunks/settings.130014c6e030ddbf2407.hot-update.js": "/chunks/settings.130014c6e030ddbf2407.hot-update.js",
+    "/chunks/settings-payment-methods.130014c6e030ddbf2407.hot-update.js": "/chunks/settings-payment-methods.130014c6e030ddbf2407.hot-update.js",
+    "/chunks/settings-subscription.130014c6e030ddbf2407.hot-update.js": "/chunks/settings-subscription.130014c6e030ddbf2407.hot-update.js",
+    "/chunks/subscriptions.130014c6e030ddbf2407.hot-update.js": "/chunks/subscriptions.130014c6e030ddbf2407.hot-update.js",
+    "/chunks/upgrade-billing.130014c6e030ddbf2407.hot-update.js": "/chunks/upgrade-billing.130014c6e030ddbf2407.hot-update.js",
+    "/chunks/user.130014c6e030ddbf2407.hot-update.js": "/chunks/user.130014c6e030ddbf2407.hot-update.js",
+    "/chunks/user-subscription.130014c6e030ddbf2407.hot-update.js": "/chunks/user-subscription.130014c6e030ddbf2407.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.fb02177dfd2e751c8216.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.fb02177dfd2e751c8216.hot-update.js",
+    "/chunks/pages.fb02177dfd2e751c8216.hot-update.js": "/chunks/pages.fb02177dfd2e751c8216.hot-update.js",
+    "/chunks/settings.fb02177dfd2e751c8216.hot-update.js": "/chunks/settings.fb02177dfd2e751c8216.hot-update.js",
+    "/chunks/settings-payment-methods.fb02177dfd2e751c8216.hot-update.js": "/chunks/settings-payment-methods.fb02177dfd2e751c8216.hot-update.js",
+    "/chunks/settings-subscription.fb02177dfd2e751c8216.hot-update.js": "/chunks/settings-subscription.fb02177dfd2e751c8216.hot-update.js",
+    "/chunks/subscriptions.fb02177dfd2e751c8216.hot-update.js": "/chunks/subscriptions.fb02177dfd2e751c8216.hot-update.js",
+    "/chunks/upgrade-billing.fb02177dfd2e751c8216.hot-update.js": "/chunks/upgrade-billing.fb02177dfd2e751c8216.hot-update.js",
+    "/chunks/user.fb02177dfd2e751c8216.hot-update.js": "/chunks/user.fb02177dfd2e751c8216.hot-update.js",
+    "/chunks/user-subscription.fb02177dfd2e751c8216.hot-update.js": "/chunks/user-subscription.fb02177dfd2e751c8216.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.959ed7dbfea061f8fa28.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.959ed7dbfea061f8fa28.hot-update.js",
+    "/chunks/pages.959ed7dbfea061f8fa28.hot-update.js": "/chunks/pages.959ed7dbfea061f8fa28.hot-update.js",
+    "/chunks/settings.959ed7dbfea061f8fa28.hot-update.js": "/chunks/settings.959ed7dbfea061f8fa28.hot-update.js",
+    "/chunks/settings-payment-methods.959ed7dbfea061f8fa28.hot-update.js": "/chunks/settings-payment-methods.959ed7dbfea061f8fa28.hot-update.js",
+    "/chunks/settings-subscription.959ed7dbfea061f8fa28.hot-update.js": "/chunks/settings-subscription.959ed7dbfea061f8fa28.hot-update.js",
+    "/chunks/subscriptions.959ed7dbfea061f8fa28.hot-update.js": "/chunks/subscriptions.959ed7dbfea061f8fa28.hot-update.js",
+    "/chunks/upgrade-billing.959ed7dbfea061f8fa28.hot-update.js": "/chunks/upgrade-billing.959ed7dbfea061f8fa28.hot-update.js",
+    "/chunks/user.959ed7dbfea061f8fa28.hot-update.js": "/chunks/user.959ed7dbfea061f8fa28.hot-update.js",
+    "/chunks/user-subscription.959ed7dbfea061f8fa28.hot-update.js": "/chunks/user-subscription.959ed7dbfea061f8fa28.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.0b17b69065b6e26fb6f5.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.0b17b69065b6e26fb6f5.hot-update.js",
+    "/chunks/pages.0b17b69065b6e26fb6f5.hot-update.js": "/chunks/pages.0b17b69065b6e26fb6f5.hot-update.js",
+    "/chunks/settings.0b17b69065b6e26fb6f5.hot-update.js": "/chunks/settings.0b17b69065b6e26fb6f5.hot-update.js",
+    "/chunks/settings-payment-methods.0b17b69065b6e26fb6f5.hot-update.js": "/chunks/settings-payment-methods.0b17b69065b6e26fb6f5.hot-update.js",
+    "/chunks/settings-subscription.0b17b69065b6e26fb6f5.hot-update.js": "/chunks/settings-subscription.0b17b69065b6e26fb6f5.hot-update.js",
+    "/chunks/subscriptions.0b17b69065b6e26fb6f5.hot-update.js": "/chunks/subscriptions.0b17b69065b6e26fb6f5.hot-update.js",
+    "/chunks/upgrade-billing.0b17b69065b6e26fb6f5.hot-update.js": "/chunks/upgrade-billing.0b17b69065b6e26fb6f5.hot-update.js",
+    "/chunks/user.0b17b69065b6e26fb6f5.hot-update.js": "/chunks/user.0b17b69065b6e26fb6f5.hot-update.js",
+    "/chunks/user-subscription.0b17b69065b6e26fb6f5.hot-update.js": "/chunks/user-subscription.0b17b69065b6e26fb6f5.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.c715a830ddb9de8034a6.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.c715a830ddb9de8034a6.hot-update.js",
+    "/chunks/pages.c715a830ddb9de8034a6.hot-update.js": "/chunks/pages.c715a830ddb9de8034a6.hot-update.js",
+    "/chunks/settings.c715a830ddb9de8034a6.hot-update.js": "/chunks/settings.c715a830ddb9de8034a6.hot-update.js",
+    "/chunks/settings-payment-methods.c715a830ddb9de8034a6.hot-update.js": "/chunks/settings-payment-methods.c715a830ddb9de8034a6.hot-update.js",
+    "/chunks/settings-subscription.c715a830ddb9de8034a6.hot-update.js": "/chunks/settings-subscription.c715a830ddb9de8034a6.hot-update.js",
+    "/chunks/subscriptions.c715a830ddb9de8034a6.hot-update.js": "/chunks/subscriptions.c715a830ddb9de8034a6.hot-update.js",
+    "/chunks/upgrade-billing.c715a830ddb9de8034a6.hot-update.js": "/chunks/upgrade-billing.c715a830ddb9de8034a6.hot-update.js",
+    "/chunks/user.c715a830ddb9de8034a6.hot-update.js": "/chunks/user.c715a830ddb9de8034a6.hot-update.js",
+    "/chunks/user-subscription.c715a830ddb9de8034a6.hot-update.js": "/chunks/user-subscription.c715a830ddb9de8034a6.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.8ac5bd59e72365c61829.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.8ac5bd59e72365c61829.hot-update.js",
+    "/chunks/pages.8ac5bd59e72365c61829.hot-update.js": "/chunks/pages.8ac5bd59e72365c61829.hot-update.js",
+    "/chunks/settings.8ac5bd59e72365c61829.hot-update.js": "/chunks/settings.8ac5bd59e72365c61829.hot-update.js",
+    "/chunks/settings-payment-methods.8ac5bd59e72365c61829.hot-update.js": "/chunks/settings-payment-methods.8ac5bd59e72365c61829.hot-update.js",
+    "/chunks/settings-subscription.8ac5bd59e72365c61829.hot-update.js": "/chunks/settings-subscription.8ac5bd59e72365c61829.hot-update.js",
+    "/chunks/subscriptions.8ac5bd59e72365c61829.hot-update.js": "/chunks/subscriptions.8ac5bd59e72365c61829.hot-update.js",
+    "/chunks/upgrade-billing.8ac5bd59e72365c61829.hot-update.js": "/chunks/upgrade-billing.8ac5bd59e72365c61829.hot-update.js",
+    "/chunks/user.8ac5bd59e72365c61829.hot-update.js": "/chunks/user.8ac5bd59e72365c61829.hot-update.js",
+    "/chunks/user-subscription.8ac5bd59e72365c61829.hot-update.js": "/chunks/user-subscription.8ac5bd59e72365c61829.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.d36d7b057cc8458d5401.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.d36d7b057cc8458d5401.hot-update.js",
+    "/chunks/pages.d36d7b057cc8458d5401.hot-update.js": "/chunks/pages.d36d7b057cc8458d5401.hot-update.js",
+    "/chunks/settings.d36d7b057cc8458d5401.hot-update.js": "/chunks/settings.d36d7b057cc8458d5401.hot-update.js",
+    "/chunks/settings-payment-methods.d36d7b057cc8458d5401.hot-update.js": "/chunks/settings-payment-methods.d36d7b057cc8458d5401.hot-update.js",
+    "/chunks/settings-subscription.d36d7b057cc8458d5401.hot-update.js": "/chunks/settings-subscription.d36d7b057cc8458d5401.hot-update.js",
+    "/chunks/subscriptions.d36d7b057cc8458d5401.hot-update.js": "/chunks/subscriptions.d36d7b057cc8458d5401.hot-update.js",
+    "/chunks/upgrade-billing.d36d7b057cc8458d5401.hot-update.js": "/chunks/upgrade-billing.d36d7b057cc8458d5401.hot-update.js",
+    "/chunks/user.d36d7b057cc8458d5401.hot-update.js": "/chunks/user.d36d7b057cc8458d5401.hot-update.js",
+    "/chunks/user-subscription.d36d7b057cc8458d5401.hot-update.js": "/chunks/user-subscription.d36d7b057cc8458d5401.hot-update.js",
+    "/chunks/settings-subscription.459845cb0bd81ff208c9.hot-update.js": "/chunks/settings-subscription.459845cb0bd81ff208c9.hot-update.js",
+    "/chunks/settings-subscription.71f09cd184230cfe75f4.hot-update.js": "/chunks/settings-subscription.71f09cd184230cfe75f4.hot-update.js",
+    "/chunks/settings-subscription.dbac1764a9d17ae02812.hot-update.js": "/chunks/settings-subscription.dbac1764a9d17ae02812.hot-update.js",
+    "/chunks/settings-subscription.eda21f7108500ca6403a.hot-update.js": "/chunks/settings-subscription.eda21f7108500ca6403a.hot-update.js",
+    "/chunks/settings-subscription.16f3d693841c09b0dba2.hot-update.js": "/chunks/settings-subscription.16f3d693841c09b0dba2.hot-update.js",
+    "/chunks/settings-subscription.bc59d59f63ae91da84b5.hot-update.js": "/chunks/settings-subscription.bc59d59f63ae91da84b5.hot-update.js",
+    "/chunks/settings-subscription.84b9a0f8f6a3bdb9dfa4.hot-update.js": "/chunks/settings-subscription.84b9a0f8f6a3bdb9dfa4.hot-update.js"
 }
diff --git a/resources/js/components/Others/ColorLabel.vue b/resources/js/components/Others/ColorLabel.vue
index 5ef8e2ba..f6f99bb3 100644
--- a/resources/js/components/Others/ColorLabel.vue
+++ b/resources/js/components/Others/ColorLabel.vue
@@ -1,5 +1,5 @@
 <template>
-    <b class="color-label" :class="color">
+    <b class="color-label text-xs rounded-lg" :class="color">
         <slot></slot>
     </b>
 </template>
@@ -17,9 +17,7 @@
 
     .color-label {
         text-transform: capitalize;
-        @include font-size(12);
         display: inline-block;
-        border-radius: 6px;
         font-weight: 700;
         padding: 4px 6px;
 
diff --git a/resources/js/components/Others/Forms/InfoBox.vue b/resources/js/components/Others/Forms/InfoBox.vue
index 5a8565ad..22918a2e 100644
--- a/resources/js/components/Others/Forms/InfoBox.vue
+++ b/resources/js/components/Others/Forms/InfoBox.vue
@@ -87,6 +87,18 @@
         .info-box {
             background: $dark_mode_foreground;
 
+			&.error {
+				background: rgba($danger, 0.1);
+
+				p, a {
+					color: $danger;
+				}
+
+				a {
+					text-decoration: underline;
+				}
+			}
+
             p {
                 color: $dark_mode_text_primary;
             }
diff --git a/resources/js/helpers/functionHelpers.js b/resources/js/helpers/functionHelpers.js
index fe4771d0..d0ce9999 100644
--- a/resources/js/helpers/functionHelpers.js
+++ b/resources/js/helpers/functionHelpers.js
@@ -358,6 +358,13 @@ const FunctionHelpers = {
             }[type]
         }
 
+        Vue.prototype.$getTransactionStatusColor = function (type) {
+            return {
+                'completed': 'green',
+                'error': 'red',
+            }[type]
+        }
+
         Vue.prototype.$getTransactionTypeTextColor = function (type) {
 
             return {
diff --git a/resources/js/views/User/MeteredSubscription.vue b/resources/js/views/User/MeteredSubscription.vue
index 9b227124..94404c8b 100644
--- a/resources/js/views/User/MeteredSubscription.vue
+++ b/resources/js/views/User/MeteredSubscription.vue
@@ -1,7 +1,7 @@
 <template>
     <PageTab :is-loading="isLoading">
 
-		<!--Usage Estimates-->
+		<!--Failed Payments-->
 		<div v-if="user.data.relationships.failedPayments && user.data.relationships.failedPayments.data.length > 0" class="card shadow-card">
 			<FormLabel icon="frown">
                 {{ $t('Failed Payments') }}
@@ -27,7 +27,7 @@
 					</b>
 				</div>
 				<div class="text-left w-1/4">
-					<span class="text-sm font-bold text-gray-560">
+					<span class="text-sm font-bold text-gray-560 capitalize">
 						{{ $t(payment.data.attributes.source) }}
 					</span>
 				</div>
@@ -43,7 +43,7 @@
 				</div>
 			</div>
 
-			<InfoBox type="error" class="mt-4" style="margin-bottom: 0">
+			<InfoBox type="error" class="mt-7" style="margin-bottom: 0">
 				<p v-html="$t('Uh-oh! We are unable to charge your usage. Please register new credit card or fund your account with sufficient amount and we\'ll give it another try!')"></p>
 			</InfoBox>
 		</div>
@@ -257,12 +257,14 @@
 							</span>
                         </td>
                         <td>
-							<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
+							<ColorLabel class="capitalize" :color="$getTransactionStatusColor(row.data.attributes.status)">
                                 {{ row.data.attributes.status }}
 							</ColorLabel>
-							<ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
-                                {{ row.data.attributes.type }}
-							</ColorLabel>
+                        </td>
+						<td class="py-4">
+                            <span class="text-sm font-bold capitalize">
+								{{ $t(row.data.attributes.type) }}
+							</span>
                         </td>
                         <td>
                             <span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
@@ -366,6 +368,11 @@
 						field: 'status',
 						sortable: true
 					},
+					{
+						label: this.$t('Type'),
+						field: 'status',
+						sortable: true
+					},
 					{
 						label: this.$t('admin_page_invoices.table.total'),
 						field: 'amount',
diff --git a/src/App/Users/Resources/UserResource.php b/src/App/Users/Resources/UserResource.php
index ba79a3cb..84a49767 100644
--- a/src/App/Users/Resources/UserResource.php
+++ b/src/App/Users/Resources/UserResource.php
@@ -67,7 +67,7 @@ class UserResource extends JsonResource
                         'usages' => $this->getUsageEstimates(),
                     ]),
                     $this->mergeWhen($isMeteredSubscription, fn () => [
-                        'totalDebt' => format_currency($this->failedPayments->sum('amount'), $this->failedPayments->first()->currency),
+                        'totalDebt' => format_currency($this->failedPayments->sum('amount'), $this->subscription->plan->currency),
                     ]),
                 ],
             ],