From 3b4085f0ca0d083eb3bf489708b7961497606002 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Mon, 3 Jan 2022 17:27:39 +0100
Subject: [PATCH] UI improvements 2

---
 package-lock.json                             | 100 ++++++------------
 package.json                                  |  21 ++--
 public/mix-manifest.json                      |  85 +++++++++++++--
 .../js/components/Others/MobileNavigation.vue |   6 +-
 .../js/components/Others/PaymentMethod.vue    |   2 +-
 .../Others/SelectSingleChargeMethodPopup.vue  |  12 +--
 .../SelectPlanSubscriptionPopup.vue           |  62 ++++++-----
 .../Subscription/UserBillingAlerts.vue        |   4 +-
 .../Subscription/UserEditSubscription.vue     |   7 +-
 .../Subscription/UserEmptySubscription.vue    |  24 ++++-
 .../UserFixedSubscriptionDetail.vue           |   1 +
 .../Subscription/UserStoredPaymentMethods.vue |   5 +-
 .../UserTransactionsForFixedBilling.vue       |   4 +-
 .../UserTransactionsForMeteredBilling.vue     |   4 +-
 resources/js/helpers/SubscriptionHelpers.js   |  19 ++++
 resources/js/main.js                          |  81 +-------------
 resources/js/views/Profile.vue                |   2 +-
 resources/js/views/User/Billing.vue           |   5 +-
 18 files changed, 218 insertions(+), 226 deletions(-)
 create mode 100644 resources/js/helpers/SubscriptionHelpers.js

diff --git a/package-lock.json b/package-lock.json
index b1c8283c..2170999f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1108,32 +1108,6 @@
                 "to-fast-properties": "^2.0.0"
             }
         },
-        "@fortawesome/fontawesome-common-types": {
-            "version": "0.2.35",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
-            "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
-        },
-        "@fortawesome/fontawesome-svg-core": {
-            "version": "1.2.35",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
-            "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
-            "requires": {
-                "@fortawesome/fontawesome-common-types": "^0.2.35"
-            }
-        },
-        "@fortawesome/free-solid-svg-icons": {
-            "version": "5.15.3",
-            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
-            "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
-            "requires": {
-                "@fortawesome/fontawesome-common-types": "^0.2.35"
-            }
-        },
-        "@fortawesome/vue-fontawesome": {
-            "version": "0.1.10",
-            "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.10.tgz",
-            "integrity": "sha512-b2+SLF31h32LSepVcXe+BQ63yvbq5qmTCy4KfFogCYm2bn68H5sDWUnX+U7MBqnM2aeEk9M7xSoqGnu+wSdY6w=="
-        },
         "@gulp-sourcemaps/map-sources": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/map-sources/-/map-sources-1.0.0.tgz",
@@ -1229,11 +1203,11 @@
             }
         },
         "@paypal/paypal-js": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/@paypal/paypal-js/-/paypal-js-4.1.0.tgz",
-            "integrity": "sha512-fBPpNBfzIpn4hWgks+EmZmuwKopkkMRBAtvCuEkH0RQIUobH7Dtf3enyFAt1+u8ZdgdIvueSBB58lRCSP2RNkA==",
+            "version": "4.2.2",
+            "resolved": "https://registry.npmjs.org/@paypal/paypal-js/-/paypal-js-4.2.2.tgz",
+            "integrity": "sha512-Hl/h5DmVPRnMuK99+PuaQS0Ml3F3lgSHYetUiXS/uzaR+YULCZPH1x93UWtYRWFbpFnhmMEBeQUpJBOuXcLrIQ==",
             "requires": {
-                "promise-polyfill": "^8.2.0"
+                "promise-polyfill": "^8.2.1"
             }
         },
         "@stripe/stripe-js": {
@@ -1944,20 +1918,12 @@
             "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA=="
         },
         "axios": {
-            "version": "0.21.1",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-            "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+            "version": "0.21.4",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+            "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
             "dev": true,
             "requires": {
-                "follow-redirects": "^1.10.0"
-            },
-            "dependencies": {
-                "follow-redirects": {
-                    "version": "1.14.1",
-                    "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
-                    "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
-                    "dev": true
-                }
+                "follow-redirects": "^1.14.0"
             }
         },
         "babel-code-frame": {
@@ -10913,9 +10879,9 @@
             }
         },
         "tailwindcss-debug-screens": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/tailwindcss-debug-screens/-/tailwindcss-debug-screens-2.2.0.tgz",
-            "integrity": "sha512-0WJj6mu2EC93a9Ac762TdPF5vIOdZEIpvP5yvTDP5r6kk6/5usMmMVUTGipT4qzCUGcgvuA+azmDl34k2fckhw==",
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/tailwindcss-debug-screens/-/tailwindcss-debug-screens-2.2.1.tgz",
+            "integrity": "sha512-EMyA0CYBzqcZJHtVDvBfmYzfx3NxuK4qDyVO5wnzcGOrmJsv25D9xPpWefVTORTvhE6pCh90Z1WYnLUKsg3yMw==",
             "dev": true
         },
         "tapable": {
@@ -11177,13 +11143,13 @@
             "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
         },
         "twemoji": {
-            "version": "13.0.2",
-            "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-13.0.2.tgz",
-            "integrity": "sha512-R9tDS4pEVczjVYM5SvoAJ0AcZ4EgG1h3yw1oi1m/yrXOH17OOjaaRxZU4r5TIHEy3xYbuZQLB/tJZyC6rpQVmA==",
+            "version": "13.1.0",
+            "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-13.1.0.tgz",
+            "integrity": "sha512-e3fZRl2S9UQQdBFLYXtTBT6o4vidJMnpWUAhJA+yLGR+kaUTZAt3PixC0cGvvxWSuq2MSz/o0rJraOXrWw/4Ew==",
             "requires": {
                 "fs-extra": "^8.0.1",
                 "jsonfile": "^5.0.0",
-                "twemoji-parser": "13.0.0",
+                "twemoji-parser": "13.1.0",
                 "universalify": "^0.1.2"
             },
             "dependencies": {
@@ -11219,9 +11185,9 @@
             }
         },
         "twemoji-parser": {
-            "version": "13.0.0",
-            "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-13.0.0.tgz",
-            "integrity": "sha512-zMaGdskpH8yKjT2RSE/HwE340R4Fm+fbie4AaqjDa4H/l07YUmAvxkSfNl6awVWNRRQ0zdzLQ8SAJZuY5MgstQ=="
+            "version": "13.1.0",
+            "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-13.1.0.tgz",
+            "integrity": "sha512-AQOzLJpYlpWMy8n+0ATyKKZzWlZBJN+G0C+5lhX7Ftc2PeEVdUU/7ns2Pn2vVje26AIZ/OHwFoUbdv6YYD/wGg=="
         },
         "type-fest": {
             "version": "0.6.0",
@@ -11551,9 +11517,9 @@
             "dev": true
         },
         "vee-validate": {
-            "version": "3.4.5",
-            "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-3.4.5.tgz",
-            "integrity": "sha512-ZEcLqOAZzSkMhDvPcTx0xcwVOijFnMW9J+BA20j+rDmo24T8RCCqVQyRwwrDrcWJZV2dRYl/yYNa2GB6UCoBvg=="
+            "version": "3.4.14",
+            "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-3.4.14.tgz",
+            "integrity": "sha512-Hqqic8G9WcRSIzCxiCPqMZv4qB8JE1lIQqIOLDm2K5BXUiL8d4a2+kqkanv8gQSGDzYpnCQZ7BO/T99Aj05T1Q=="
         },
         "vendors": {
             "version": "1.0.4",
@@ -11628,9 +11594,9 @@
             "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
         },
         "vue": {
-            "version": "2.6.12",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
-            "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
+            "version": "2.6.14",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
+            "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
         },
         "vue-feather-icons": {
             "version": "5.1.0",
@@ -11647,9 +11613,9 @@
             "dev": true
         },
         "vue-i18n": {
-            "version": "8.24.4",
-            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.24.4.tgz",
-            "integrity": "sha512-RZE94WUAGxEiBAANxQ0pptbRwDkNKNSXl3fnJslpFOxVMF6UkUtMDSuYGuW2blDrVgweIXVpethOVkYoNNT9xw=="
+            "version": "8.26.8",
+            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.26.8.tgz",
+            "integrity": "sha512-BN2OXolO15AKS95yNF8oOtARibaO6RxyKkAYNV4XpOmL7S4eVZYMIDtyvDv+XGZaiUmBJSH9mdNqzexvGMnK2A=="
         },
         "vue-loader": {
             "version": "15.9.7",
@@ -11678,9 +11644,9 @@
             "integrity": "sha512-W+y2EAI/BxS4Vlcca9scQv8ifeBFck56DRtSwWJ2H4Cw1GLNUYxiZxUHHkuzuI5JPW/cYtL1bPO5xPyEXx4LmQ=="
         },
         "vue-router": {
-            "version": "3.5.1",
-            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
-            "integrity": "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
+            "version": "3.5.3",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
+            "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
         },
         "vue-style-loader": {
             "version": "4.1.3",
@@ -11693,9 +11659,9 @@
             }
         },
         "vue-template-compiler": {
-            "version": "2.6.12",
-            "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz",
-            "integrity": "sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==",
+            "version": "2.6.14",
+            "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
+            "integrity": "sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==",
             "dev": true,
             "requires": {
                 "de-indent": "^1.0.2",
diff --git a/package.json b/package.json
index f805bb3c..f301b354 100644
--- a/package.json
+++ b/package.json
@@ -10,19 +10,16 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
-        "axios": "^0.21",
+        "axios": "^0.21.4",
         "cross-env": "^5.1",
         "laravel-mix": "^5.0.9",
         "resolve-url-loader": "^2.3.1",
         "sass-loader": "^8.0.2",
-        "tailwindcss-debug-screens": "^2.2.0",
-        "vue-template-compiler": "^2.6.12"
+        "tailwindcss-debug-screens": "^2.2.1",
+        "vue-template-compiler": "^2.6.14"
     },
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.35",
-        "@fortawesome/free-solid-svg-icons": "^5.15.3",
-        "@fortawesome/vue-fontawesome": "^0.1.10",
-        "@paypal/paypal-js": "^4.1.0",
+        "@paypal/paypal-js": "^4.2.2",
         "@stripe/stripe-js": "^1.22.0",
         "autoprefixer": "^9.8.8",
         "lodash": "^4.17.21",
@@ -30,13 +27,13 @@
         "pdfvuer": "1.7.5",
         "postcss": "^7.0.39",
         "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
-        "twemoji": "^13.0.2",
-        "vee-validate": "^3.4.5",
-        "vue": "^2.6.12",
+        "twemoji": "^13.1.0",
+        "vee-validate": "^3.4.14",
+        "vue": "^2.6.14",
         "vue-feather-icons": "^5.1.0",
-        "vue-i18n": "^8.24.4",
+        "vue-i18n": "^8.26.8",
         "vue-paystack": "^2.0.4",
-        "vue-router": "^3.5.1",
+        "vue-router": "^3.5.3",
         "vuex": "^3.6.2"
     }
 }
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 4aa49912..867497ac 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -11,7 +11,7 @@
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js?id=7b94fd0c332ed326530d",
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js?id=e2d818009a4e2c1fffdf",
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js?id=510e6c1b1017a73a40a6",
-    "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=a8e78a3b0ce4dba71a6e",
+    "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=b943dfbcc963164556e1",
     "/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=3121d1c093031fba08ec",
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=9e90103c70ecef1771d1",
     "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=afeba4ebd13af7e995be",
@@ -68,7 +68,7 @@
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=dfa4128d68360d5e1b3b",
     "/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=d40f8c73d3c8baa29600",
+    "/chunks/settings.js": "/chunks/settings.js?id=6c452b11084ec62fcdd3",
     "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=92b82ac5385e90f4bf77",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=5ff6ab3f66a1ea9b41f3",
     "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=5a0971b7e97d67546f9d",
@@ -104,10 +104,10 @@
     "/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",
-    "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js": "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js?id=37ce1e1ab9968c100712",
+    "/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=6a87fba09173d8d5f5b6",
+    "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js": "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js?id=ab29ab0a0c2d5a40b39d",
     "/vendors~chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/vendors~chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=a0fa80db175709ba340a",
-    "/vendors~chunks/settings.js": "/vendors~chunks/settings.js?id=34174f8e31c6707cdaef",
+    "/vendors~chunks/settings.js": "/vendors~chunks/settings.js?id=5bf155d80b2fb871ec84",
     "/chunks/settings-subscription.c05dc0dec859971d3bbc.hot-update.js": "/chunks/settings-subscription.c05dc0dec859971d3bbc.hot-update.js",
     "/chunks/settings.fd239372e7b567604123.hot-update.js": "/chunks/settings.fd239372e7b567604123.hot-update.js",
     "/chunks/settings.033f58957591a40467bc.hot-update.js": "/chunks/settings.033f58957591a40467bc.hot-update.js",
@@ -405,10 +405,10 @@
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.fac1b13bd1efc2f42f34.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.fac1b13bd1efc2f42f34.hot-update.js",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~217928f6.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~217928f6.js?id=9c4d17d768dc543a0e4b",
     "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~8729b0a3.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~8729b0a3.js?id=50f7067283a882b798bd",
-    "/chunks/billing.js": "/chunks/billing.js?id=8a75c805a916b03597d5",
+    "/chunks/billing.js": "/chunks/billing.js?id=cc6cbf1e8de67380ae40",
     "/chunks/billing~chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~ch~5d1c5841.js": "/chunks/billing~chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~ch~5d1c5841.js?id=f8f80b9b2ff56cb089fb",
     "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.js": "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.js?id=9bb4b7b4c8f9442fc828",
-    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~81844718.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~81844718.js?id=21edd02ba7123e444147",
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~81844718.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~81844718.js?id=d2f4a0c6226e4fcbd776",
     "/js/main.2701b65e37c8b8796a85.hot-update.js": "/js/main.2701b65e37c8b8796a85.hot-update.js",
     "/chunks/billing.580dad5d484c9e080cc1.hot-update.js": "/chunks/billing.580dad5d484c9e080cc1.hot-update.js",
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.643f2961de5c2d459f87.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.643f2961de5c2d459f87.hot-update.js",
@@ -423,5 +423,74 @@
     "/chunks/settings.74bc0ec39a2763776f82.hot-update.js": "/chunks/settings.74bc0ec39a2763776f82.hot-update.js",
     "/chunks/settings.c3d61ef320de2a2e416c.hot-update.js": "/chunks/settings.c3d61ef320de2a2e416c.hot-update.js",
     "/chunks/settings.ea354159b254df466a33.hot-update.js": "/chunks/settings.ea354159b254df466a33.hot-update.js",
-    "/chunks/settings.6743a7421e351e032520.hot-update.js": "/chunks/settings.6743a7421e351e032520.hot-update.js"
+    "/chunks/settings.6743a7421e351e032520.hot-update.js": "/chunks/settings.6743a7421e351e032520.hot-update.js",
+    "/chunks/settings.67540f945dc589664363.hot-update.js": "/chunks/settings.67540f945dc589664363.hot-update.js",
+    "/chunks/billing.2cb7bd8ff7d802a25341.hot-update.js": "/chunks/billing.2cb7bd8ff7d802a25341.hot-update.js",
+    "/chunks/billing.b04af48295daa321c694.hot-update.js": "/chunks/billing.b04af48295daa321c694.hot-update.js",
+    "/chunks/billing.e42c1b39b24b4afe5c19.hot-update.js": "/chunks/billing.e42c1b39b24b4afe5c19.hot-update.js",
+    "/chunks/billing.37686f6d3bdd12b2aee6.hot-update.js": "/chunks/billing.37686f6d3bdd12b2aee6.hot-update.js",
+    "/chunks/billing.02edde5f7a3bd9bf017f.hot-update.js": "/chunks/billing.02edde5f7a3bd9bf017f.hot-update.js",
+    "/chunks/billing.abccfb55749e7ac16e74.hot-update.js": "/chunks/billing.abccfb55749e7ac16e74.hot-update.js",
+    "/chunks/billing.f76569d76aa30a3e0810.hot-update.js": "/chunks/billing.f76569d76aa30a3e0810.hot-update.js",
+    "/chunks/billing.2352e38eace7fac66dd4.hot-update.js": "/chunks/billing.2352e38eace7fac66dd4.hot-update.js",
+    "/chunks/billing.71d35ea3976bdc07f746.hot-update.js": "/chunks/billing.71d35ea3976bdc07f746.hot-update.js",
+    "/chunks/billing.28d7b91a70a870093899.hot-update.js": "/chunks/billing.28d7b91a70a870093899.hot-update.js",
+    "/chunks/billing.6d6095684de60547875d.hot-update.js": "/chunks/billing.6d6095684de60547875d.hot-update.js",
+    "/chunks/billing.783ee246390af063983d.hot-update.js": "/chunks/billing.783ee246390af063983d.hot-update.js",
+    "/chunks/billing.d507f89f582a0f842359.hot-update.js": "/chunks/billing.d507f89f582a0f842359.hot-update.js",
+    "/chunks/billing.bf7df806c3ff24d88be7.hot-update.js": "/chunks/billing.bf7df806c3ff24d88be7.hot-update.js",
+    "/chunks/billing.91d391dffef53ecc0a7b.hot-update.js": "/chunks/billing.91d391dffef53ecc0a7b.hot-update.js",
+    "/chunks/billing.890e23884f7f4fac0dd1.hot-update.js": "/chunks/billing.890e23884f7f4fac0dd1.hot-update.js",
+    "/chunks/billing.504ff2c5b62c85026404.hot-update.js": "/chunks/billing.504ff2c5b62c85026404.hot-update.js",
+    "/chunks/billing.18923c845a6409d5c783.hot-update.js": "/chunks/billing.18923c845a6409d5c783.hot-update.js",
+    "/chunks/billing.31fddb9f25a4607f6a03.hot-update.js": "/chunks/billing.31fddb9f25a4607f6a03.hot-update.js",
+    "/chunks/billing.ccf52b26bf70b4df1232.hot-update.js": "/chunks/billing.ccf52b26bf70b4df1232.hot-update.js",
+    "/chunks/billing.11710a7628bbe7e6c183.hot-update.js": "/chunks/billing.11710a7628bbe7e6c183.hot-update.js",
+    "/chunks/billing.a23ab0606fe21a5f5079.hot-update.js": "/chunks/billing.a23ab0606fe21a5f5079.hot-update.js",
+    "/chunks/billing.9ec5c71671a18a6dc691.hot-update.js": "/chunks/billing.9ec5c71671a18a6dc691.hot-update.js",
+    "/chunks/settings.a8d587b2f515f72f25c9.hot-update.js": "/chunks/settings.a8d587b2f515f72f25c9.hot-update.js",
+    "/chunks/settings.e31a0992f157240e412f.hot-update.js": "/chunks/settings.e31a0992f157240e412f.hot-update.js",
+    "/chunks/settings.3fa2a2542eaaa63d99ff.hot-update.js": "/chunks/settings.3fa2a2542eaaa63d99ff.hot-update.js",
+    "/chunks/settings.3d172760b22fb0cf8b10.hot-update.js": "/chunks/settings.3d172760b22fb0cf8b10.hot-update.js",
+    "/chunks/settings.b0fc78c3cc30dcde09b4.hot-update.js": "/chunks/settings.b0fc78c3cc30dcde09b4.hot-update.js",
+    "/chunks/settings.d980f8b0782125544192.hot-update.js": "/chunks/settings.d980f8b0782125544192.hot-update.js",
+    "/chunks/settings.0c93b11173f53a8b9956.hot-update.js": "/chunks/settings.0c93b11173f53a8b9956.hot-update.js",
+    "/chunks/settings.6d1a2f16185a06324ed0.hot-update.js": "/chunks/settings.6d1a2f16185a06324ed0.hot-update.js",
+    "/chunks/settings.d503efa09d9e1a6b2d31.hot-update.js": "/chunks/settings.d503efa09d9e1a6b2d31.hot-update.js",
+    "/chunks/settings.22e2206e1afbfb1afbf1.hot-update.js": "/chunks/settings.22e2206e1afbfb1afbf1.hot-update.js",
+    "/chunks/settings.07fdba0b382ed1355592.hot-update.js": "/chunks/settings.07fdba0b382ed1355592.hot-update.js",
+    "/chunks/settings.5a1b3af526cf4d9664fe.hot-update.js": "/chunks/settings.5a1b3af526cf4d9664fe.hot-update.js",
+    "/chunks/settings.8fcb0cc9c930577ef3db.hot-update.js": "/chunks/settings.8fcb0cc9c930577ef3db.hot-update.js",
+    "/chunks/settings.7d80986c72449fd9c678.hot-update.js": "/chunks/settings.7d80986c72449fd9c678.hot-update.js",
+    "/chunks/settings.8d050fae5629be26e926.hot-update.js": "/chunks/settings.8d050fae5629be26e926.hot-update.js",
+    "/chunks/settings.969a33600925c2b7b89a.hot-update.js": "/chunks/settings.969a33600925c2b7b89a.hot-update.js",
+    "/chunks/settings.0a2fe6b0ce0f8d34e5ac.hot-update.js": "/chunks/settings.0a2fe6b0ce0f8d34e5ac.hot-update.js",
+    "/chunks/settings.3edca82e2519dc445831.hot-update.js": "/chunks/settings.3edca82e2519dc445831.hot-update.js",
+    "/chunks/settings~chunks/settings-password.3edca82e2519dc445831.hot-update.js": "/chunks/settings~chunks/settings-password.3edca82e2519dc445831.hot-update.js",
+    "/chunks/admin~chunks/platform.449e1ac47da600ba9b73.hot-update.js": "/chunks/admin~chunks/platform.449e1ac47da600ba9b73.hot-update.js",
+    "/chunks/admin~chunks/platform.c472b19b13ed0eaa6304.hot-update.js": "/chunks/admin~chunks/platform.c472b19b13ed0eaa6304.hot-update.js",
+    "/chunks/settings.e7622a2289d8d536c0e7.hot-update.js": "/chunks/settings.e7622a2289d8d536c0e7.hot-update.js",
+    "/chunks/settings-password.e7622a2289d8d536c0e7.hot-update.js": "/chunks/settings-password.e7622a2289d8d536c0e7.hot-update.js",
+    "/chunks/settings.f7bed7c6c76be31709eb.hot-update.js": "/chunks/settings.f7bed7c6c76be31709eb.hot-update.js",
+    "/chunks/settings.3775cbc404316fcdbed2.hot-update.js": "/chunks/settings.3775cbc404316fcdbed2.hot-update.js",
+    "/chunks/settings.01b9dfd8730d4db40f45.hot-update.js": "/chunks/settings.01b9dfd8730d4db40f45.hot-update.js",
+    "/chunks/settings.6da18860a21eccad1238.hot-update.js": "/chunks/settings.6da18860a21eccad1238.hot-update.js",
+    "/chunks/settings.9f7ce6e52d2a4b1b327d.hot-update.js": "/chunks/settings.9f7ce6e52d2a4b1b327d.hot-update.js",
+    "/chunks/settings.1c1a961d479bdb7e9cf9.hot-update.js": "/chunks/settings.1c1a961d479bdb7e9cf9.hot-update.js",
+    "/chunks/settings.10b549a63f7399b1b7f7.hot-update.js": "/chunks/settings.10b549a63f7399b1b7f7.hot-update.js",
+    "/chunks/settings.fd683227f7d52fd88a7d.hot-update.js": "/chunks/settings.fd683227f7d52fd88a7d.hot-update.js",
+    "/js/main.fe8736de788fe2984e0f.hot-update.js": "/js/main.fe8736de788fe2984e0f.hot-update.js",
+    "/js/main.7c4dcdc4432230caebb9.hot-update.js": "/js/main.7c4dcdc4432230caebb9.hot-update.js",
+    "/chunks/settings.a377350b493441a72ca7.hot-update.js": "/chunks/settings.a377350b493441a72ca7.hot-update.js",
+    "/chunks/settings.ef3b5914a88be72d8af2.hot-update.js": "/chunks/settings.ef3b5914a88be72d8af2.hot-update.js",
+    "/chunks/settings.dd455fdabe7f9ef81c5f.hot-update.js": "/chunks/settings.dd455fdabe7f9ef81c5f.hot-update.js",
+    "/js/main.15208bb45006a7cba219.hot-update.js": "/js/main.15208bb45006a7cba219.hot-update.js",
+    "/js/main.0817897a0a327c8ac045.hot-update.js": "/js/main.0817897a0a327c8ac045.hot-update.js",
+    "/js/main.906379fbf4e387ba0e36.hot-update.js": "/js/main.906379fbf4e387ba0e36.hot-update.js",
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~5ef927fd.906379fbf4e387ba0e36.hot-update.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~5ef927fd.906379fbf4e387ba0e36.hot-update.js",
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~81844718.906379fbf4e387ba0e36.hot-update.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~81844718.906379fbf4e387ba0e36.hot-update.js",
+    "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.906379fbf4e387ba0e36.hot-update.js": "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.906379fbf4e387ba0e36.hot-update.js",
+    "/vendors~chunks/settings.906379fbf4e387ba0e36.hot-update.js": "/vendors~chunks/settings.906379fbf4e387ba0e36.hot-update.js",
+    "/js/main.126880f557f98a043736.hot-update.js": "/js/main.126880f557f98a043736.hot-update.js",
+    "/chunks/settings.f0a2e8f029feda55e2cc.hot-update.js": "/chunks/settings.f0a2e8f029feda55e2cc.hot-update.js"
 }
diff --git a/resources/js/components/Others/MobileNavigation.vue b/resources/js/components/Others/MobileNavigation.vue
index ba4c2291..55dc3a28 100644
--- a/resources/js/components/Others/MobileNavigation.vue
+++ b/resources/js/components/Others/MobileNavigation.vue
@@ -39,11 +39,7 @@
                 <Option @click.native="goToRoute('Profile')" :title="$t('menu.profile')" icon="user" is-hover-disabled="true" />
                 <Option @click.native="goToRoute('Storage')" :title="$t('menu.storage')" icon="hard-drive" is-hover-disabled="true" />
                 <Option @click.native="goToRoute('Password')" :title="$t('menu.password')" icon="lock" is-hover-disabled="true" />
-            </OptionGroup>
-            <OptionGroup v-if="clickedSubmenu === 'settings' && config.isSaaS">
-                <Option v-if="" @click.native="goToRoute('Subscription')" :title="$t('menu.subscription')" icon="cloud" is-hover-disabled="true" />
-                <Option @click.native="goToRoute('PaymentMethods')" :title="$t('menu.payment_cards')" icon="credit-card" is-hover-disabled="true" />
-                <Option @click.native="goToRoute('Invoice')" :title="$t('menu.invoices')" icon="file-text" is-hover-disabled="true" />
+				<Option @click.native="goToRoute('Billing')" v-if="config.isSaaS" :title="$t('Billing')" icon="cloud" is-hover-disabled="true" />
             </OptionGroup>
 
             <!--Submenu: Admin settings-->
diff --git a/resources/js/components/Others/PaymentMethod.vue b/resources/js/components/Others/PaymentMethod.vue
index fa1f8fc8..2faaea78 100644
--- a/resources/js/components/Others/PaymentMethod.vue
+++ b/resources/js/components/Others/PaymentMethod.vue
@@ -6,7 +6,7 @@
 				{{ description }}
 			</small>
 		</div>
-		<div v-if="$slots.default" class="bg-theme-200 inline-block px-3 py-1 rounded-lg">
+		<div v-if="$slots.default" class="bg-theme-200 inline-block px-3 py-1 rounded-lg relative">
 			<slot></slot>
 		</div>
 	</div>
diff --git a/resources/js/components/Others/SelectSingleChargeMethodPopup.vue b/resources/js/components/Others/SelectSingleChargeMethodPopup.vue
index b0d87fc3..9f24357b 100644
--- a/resources/js/components/Others/SelectSingleChargeMethodPopup.vue
+++ b/resources/js/components/Others/SelectSingleChargeMethodPopup.vue
@@ -37,7 +37,7 @@
 					:amount="singleChargeAmount * 100"
 					:email="user.data.attributes.email"
 					:paystackkey="config.paystack_public_key"
-					:reference="reference"
+					:reference="$generatePaystackReference()"
 					:callback="paystackPaymentSuccessful"
 					:close="paystackClosed"
 				>
@@ -94,16 +94,6 @@ export default {
 			'config',
 			'user',
 		]),
-		reference() {
-			let text = "";
-			let possible =
-				"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-
-			for (let i = 0; i < 10; i++)
-				text += possible.charAt(Math.floor(Math.random() * possible.length));
-
-			return text;
-		},
 	},
 	methods: {
 		pickedPaymentMethod(driver) {
diff --git a/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue b/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
index 377ff17d..ba4fb658 100644
--- a/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
+++ b/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
@@ -13,25 +13,31 @@
 					driver="stripe"
 					:description="$t('Pay by your credit card or Apple Pay')"
 				>
-					<span v-if="! paypalMethodsLoaded" @click="payByStripe" class="text-sm text-theme font-bold cursor-pointer">
+					<div v-if="stripe.isGettingCheckoutLink" class="transform scale-50 translate-y-3">
+						<Spinner />
+					</div>
+					<span @click="payByStripe" :class="{'opacity-0': stripe.isGettingCheckoutLink}" class="text-sm text-theme font-bold cursor-pointer">
 						{{ $t('Select') }}
 					</span>
 				</PaymentMethod>
 
 				<!--PayPal implementation-->
-				<div v-if="config.isPayPal" :class="{'dark:bg-2x-dark-foreground bg-light-background rounded-xl px-4 mb-2': paypalMethodsLoaded}">
+				<div
+					v-if="config.isPayPal"
+					:class="{'dark:bg-2x-dark-foreground bg-light-background rounded-xl px-4 mb-2': paypal.isMethodsLoaded}"
+				>
 					<PaymentMethod
 						@click.native="pickedPaymentMethod('paypal')"
 						driver="paypal"
 						:description="$t('Available PayPal Credit, Debit or Credit Card.')"
 					>
-						<span v-if="! paypalMethodsLoaded" class="text-sm text-theme font-bold cursor-pointer">
+						<span v-if="! paypal.isMethodsLoaded" class="text-sm text-theme font-bold cursor-pointer">
 							{{ $t('Select') }}
 						</span>
 					</PaymentMethod>
 
 					<!--PayPal Buttons-->
-					<div v-if="paypalMethodsLoaded">
+					<div v-if="paypal.isMethodsLoaded">
 						<div id="paypal-button-container"></div>
 					</div>
 				</div>
@@ -51,7 +57,7 @@
 						:amount="selectedPlan.data.attributes.amount * 100"
 						:email="user.data.attributes.email"
 						:paystackkey="config.paystack_public_key"
-						:reference="reference"
+						:reference="$generatePaystackReference()"
 						:callback="paymentSuccessful"
 						:close="paystackClosed"
 					>
@@ -77,7 +83,7 @@
 		<div v-if="! isPaymentOptionPage">
 			<PopupContent>
 
-				<!--Toggle amid monthly and yearly billing-->
+				<!--Toggle yearly billing-->
 				<div class="px-5 mb-2 text-right">
 					<label :class="{'text-gray-400': !isYearlyPlans}" class="font-bold cursor-pointer text-xs">
 						{{ $t('Billed Annually') }}
@@ -87,18 +93,17 @@
 					</div>
 				</div>
 
-				<!--Form to set team folder-->
+				<!--List available plans-->
 				<div class="px-4" v-if="plans">
 					<PlanDetail
 						v-for="(plan, i) in plans"
 						:plan="plan"
 						:key="plan.data.id"
-						v-if="plan.data.attributes.interval === intervalPlanType"
+						v-if="plan.data.attributes.interval === intervalPlanType && userActivePlanId !== plan.data.id"
 						:is-selected="selectedPlan && selectedPlan.data.id === plan.data.id"
 						@click.native="selectPlan(plan)"
 					/>
 				</div>
-
 			</PopupContent>
 
 			<!--Actions-->
@@ -122,8 +127,8 @@
 
 <script>
 	import PaymentMethod from "../Others/PaymentMethod";
-	import { loadScript } from "@paypal/paypal-js";
-    import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
+	import {loadScript} from "@paypal/paypal-js";
+	import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
 	import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
 	import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
 	import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
@@ -134,10 +139,12 @@
 	import {mapGetters} from "vuex";
 	import {events} from "../../bus";
 	import axios from "axios";
+	import Spinner from "../FilesView/Spinner";
 
 	export default {
 		name: 'SelectPlanSubscriptionPopup',
 		components: {
+			Spinner,
 			PaymentMethod,
 			paystack,
 			PlanDetail,
@@ -158,16 +165,6 @@
 				'config',
 				'user',
 			]),
-			reference() {
-				let text = "";
-				let possible =
-					"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-
-				for (let i = 0; i < 10; i++)
-					text += possible.charAt(Math.floor(Math.random() * possible.length));
-
-				return text;
-			},
 			intervalPlanType() {
 				return this.isYearlyPlans
 					? 'year'
@@ -177,12 +174,19 @@
 				return this.selectedPlan
 					? 'theme'
 					: 'secondary'
-			}
+			},
+			userActivePlanId() {
+				return this.user && this.user.data.relationships.subscription.data.relationships.plan.data.id
+			},
 		},
 		data() {
 			return {
-				paypalMethodsLoaded: false,
-
+				stripe: {
+					isGettingCheckoutLink: false,
+				},
+				paypal: {
+					isMethodsLoaded: false,
+				},
 				isPaymentOptionPage: false,
 				isYearlyPlans: false,
 				isLoading: false,
@@ -195,12 +199,12 @@
 				if (driver === 'paystack') {
 					this.$closePopup()
 				}
-				if (driver === 'paypal' && !this.paypalMethodsLoaded) {
+				if (driver === 'paypal' && !this.paypal.isMethodsLoaded) {
 					this.PayPalInitialization()
 				}
 			},
 			async PayPalInitialization() {
-				this.paypalMethodsLoaded = true
+				this.paypal.isMethodsLoaded = true
 
 				let paypal;
 
@@ -222,18 +226,20 @@
 
 				// Initialize paypal buttons for single charge
 				await paypal.Buttons({
-					createSubscription: function(data, actions) {
+					createSubscription: function (data, actions) {
 						return actions.subscription.create({
 							plan_id: planId,
 							custom_id: userId
 						});
 					},
-					onApprove: function(data, actions) {
+					onApprove: function (data, actions) {
 						app.paymentSuccessful()
 					}
 				}).render('#paypal-button-container');
 			},
 			payByStripe() {
+				this.stripe.isGettingCheckoutLink = true
+
 				axios.post('/api/stripe/checkout', {
 						planCode: this.selectedPlan.data.meta.driver_plan_id.stripe
 					})
diff --git a/resources/js/components/Subscription/UserBillingAlerts.vue b/resources/js/components/Subscription/UserBillingAlerts.vue
index f876fa24..24ebf6e4 100644
--- a/resources/js/components/Subscription/UserBillingAlerts.vue
+++ b/resources/js/components/Subscription/UserBillingAlerts.vue
@@ -39,7 +39,7 @@
 		<ValidationObserver v-if="! user.data.relationships.alert" ref="billingAlertForm" @submit.prevent="setBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
 			<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Billing Alert" rules="required">
 				<AppInputText :description="$t('You will receive an email whenever your monthly balance reaches the specified amount above.')" :error="errors[0]" :is-last="true">
-					<div class="flex space-x-4">
+					<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
 						<input v-model="billingAlertAmount"
 							   :placeholder="$t('Alert Amount...')"
 							   type="number"
@@ -48,7 +48,7 @@
 							   class="focus-border-theme input-dark"
 							   :class="{'border-red-700': errors[0]}"
 						/>
-						<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="submit-button">
+						<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="sm:w-auto w-full">
 							{{ $t('Set Alert') }}
 						</ButtonBase>
 					</div>
diff --git a/resources/js/components/Subscription/UserEditSubscription.vue b/resources/js/components/Subscription/UserEditSubscription.vue
index 16d77762..8baaa737 100644
--- a/resources/js/components/Subscription/UserEditSubscription.vue
+++ b/resources/js/components/Subscription/UserEditSubscription.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="card shadow-card">
+	<div v-if="hasSubscription" class="card shadow-card">
 		<FormLabel>
 			{{ $t('Edit your Subscription') }}
 		</FormLabel>
@@ -35,7 +35,10 @@
 		computed: {
 			subscription() {
 				return this.$store.getters.user.data.relationships.subscription.data
-			}
+			},
+			hasSubscription() {
+				return this.$store.getters.user.data.relationships.subscription
+			},
 		},
 		data() {
 			return {
diff --git a/resources/js/components/Subscription/UserEmptySubscription.vue b/resources/js/components/Subscription/UserEmptySubscription.vue
index a854e490..e41e7817 100644
--- a/resources/js/components/Subscription/UserEmptySubscription.vue
+++ b/resources/js/components/Subscription/UserEmptySubscription.vue
@@ -1,18 +1,34 @@
 <template>
 	<div v-if="! hasSubscription" class="card shadow-card">
-		<InfoBox style="margin-bottom: 0">
-			<p>{{ $t("You don't have any subscription") }}</p>
-		</InfoBox>
+		<FormLabel>
+			{{ $t('Subscription') }}
+		</FormLabel>
+
+		<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+			{{ $t('Free Plan') }}
+		</b>
+
+		<b class="mb-3 block text-sm text-gray-400 mb-8">
+			{{ $t('1GB Free storage space with 5 Team members') }}
+		</b>
+
+		<ButtonBase @click.native="$openUpgradeOptions" type="submit" button-style="theme" class="w-full mt-4">
+			{{ $t('Upgrade Your Account') }}
+		</ButtonBase>
 	</div>
 </template>
 
 <script>
 	import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
+	import FormLabel from "../Others/Forms/FormLabel"
+	import ButtonBase from "../FilesView/ButtonBase"
 
 	export default {
 		name: 'UserEmptySubscription',
 		components: {
-			InfoBox
+			ButtonBase,
+			FormLabel,
+			InfoBox,
 		},
 		computed: {
 			hasSubscription() {
diff --git a/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue b/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
index a78f55ca..9be0512e 100644
--- a/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
+++ b/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
@@ -7,6 +7,7 @@
 		<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
 			{{ status }}
 		</b>
+
 		<b class="mb-3 block text-sm text-gray-400 mb-8">
 			{{ subscription.data.relationships.plan.data.attributes.name }} / {{ price }}
 		</b>
diff --git a/resources/js/components/Subscription/UserStoredPaymentMethods.vue b/resources/js/components/Subscription/UserStoredPaymentMethods.vue
index 1f34c6a9..edb85d01 100644
--- a/resources/js/components/Subscription/UserStoredPaymentMethods.vue
+++ b/resources/js/components/Subscription/UserStoredPaymentMethods.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="config.isStripe" class="card shadow-card">
+	<div v-if="config.isStripe && hasSubscription" class="card shadow-card">
 		<FormLabel icon="credit-card">
 			{{ $t('Payment Method') }}
 		</FormLabel>
@@ -75,6 +75,9 @@
 				'config',
 				'user',
 			]),
+			hasSubscription() {
+				return this.$store.getters.user.data.relationships.subscription
+			},
 			hasPaymentMethod() {
 				return this.user.data.relationships.creditCards && this.user.data.relationships.creditCards.data.length > 0
 			},
diff --git a/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue b/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
index 8891c880..f1ff25fc 100644
--- a/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
+++ b/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
@@ -39,8 +39,8 @@
 
 			<!--Empty page-->
 			<template v-slot:empty-page>
-				<InfoBox>
-					<p>{{ $t('admin_page_user.invoices.empty') }}</p>
+				<InfoBox style="margin-bottom: 0">
+					<p>{{ $t('user_invoices.empty') }}</p>
 				</InfoBox>
 			</template>
 		</DatatableWrapper>
diff --git a/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue b/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
index e3f34f31..583877a7 100644
--- a/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
+++ b/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
@@ -44,8 +44,8 @@
 
 			<!--Empty page-->
 			<template v-slot:empty-page>
-				<InfoBox>
-					<p>{{ $t('admin_page_user.invoices.empty') }}</p>
+				<InfoBox style="margin-bottom: 0">
+					<p>{{ $t('user_invoices.empty') }}</p>
 				</InfoBox>
 			</template>
 		</DatatableWrapper>
diff --git a/resources/js/helpers/SubscriptionHelpers.js b/resources/js/helpers/SubscriptionHelpers.js
new file mode 100644
index 00000000..f0a8ba0b
--- /dev/null
+++ b/resources/js/helpers/SubscriptionHelpers.js
@@ -0,0 +1,19 @@
+import store from '../store/index'
+
+const ValidatorHelpers = {
+	install(Vue) {
+
+		Vue.prototype.$generatePaystackReference = function () {
+			let text = "";
+
+			let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+			for (let i = 0; i < 10; i++)
+				text += possible.charAt(Math.floor(Math.random() * possible.length));
+
+			return text;
+		}
+	}
+}
+
+export default ValidatorHelpers
\ No newline at end of file
diff --git a/resources/js/main.js b/resources/js/main.js
index cc46017f..8720b1c4 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -6,87 +6,14 @@ import router from "./router";
 import App from "./App.vue";
 import store from "./store";
 import {events} from "./bus";
+
+import SubscriptionHelpers from "./helpers/SubscriptionHelpers";
 import ValidatorHelpers from "./helpers/ValidatorHelpers";
 import functionHelpers from "./helpers/functionHelpers";
 import itemHelpers from "./helpers/itemHelpers"
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import {
-  faLock,
-  faLockOpen,
-  faDownload,
-  faUserFriends,
-  faCheck,
-  faLink,
-  faUserEdit,
-  faUser,
-  faFileAudio,
-  faFileVideo,
-  faSyncAlt,
-  faShare,
-  faHome,
-  faEyeSlash,
-  faBars,
-  faSearch,
-  faEllipsisV,
-  faChevronLeft,
-  faChevronRight,
-  faChevronDown,
-  faUpload,
-  faFolderPlus,
-  faTh,
-  faThList,
-  faInfo,
-  faFolder,
-  faFile,
-  faFileImage,
-  faTimes,
-  faSort,
-  faTrashAlt,
-  faHdd,
-  faEllipsisH,
-  faPencilAlt,
-} from "@fortawesome/free-solid-svg-icons";
-
-library.add(
-  faLock,
-  faLockOpen,
-  faDownload,
-  faUserFriends,
-  faCheck,
-  faLink,
-  faUserEdit,
-  faUser,
-  faFileAudio,
-  faFileVideo,
-  faHdd,
-  faSyncAlt,
-  faShare,
-  faHome,
-  faEyeSlash,
-  faBars,
-  faSearch,
-  faEllipsisV,
-  faChevronLeft,
-  faChevronRight,
-  faChevronDown,
-  faUpload,
-  faTrashAlt,
-  faFolderPlus,
-  faTh,
-  faThList,
-  faInfo,
-  faFolder,
-  faFile,
-  faFileImage,
-  faTimes,
-  faSort,
-  faEllipsisH,
-  faPencilAlt
-);
-Vue.component("FontAwesomeIcon", FontAwesomeIcon);
 
 Vue.use(VueRouter);
+Vue.use(SubscriptionHelpers);
 Vue.use(ValidatorHelpers);
 Vue.use(functionHelpers);
 Vue.use(itemHelpers);
@@ -107,7 +34,7 @@ document.addEventListener("dragend", () => {
   events.$emit('drop')
 }, false);
 
-var vueFileManager = new Vue({
+let vueFileManager = new Vue({
   i18n,
   store,
   router,
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index 863a2279..f1ea54eb 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -165,7 +165,7 @@
             }
         },
 		created() {
-			// setTimeout(() => this.$openUpgradeOptions(), 300)
+			setTimeout(() => this.$openUpgradeOptions(), 300)
 		}
 	}
 </script>
diff --git a/resources/js/views/User/Billing.vue b/resources/js/views/User/Billing.vue
index 04d0dca7..037c32fa 100644
--- a/resources/js/views/User/Billing.vue
+++ b/resources/js/views/User/Billing.vue
@@ -23,6 +23,8 @@
 
 		<!-- Fixed subscription components -->
 		<div v-if="config.subscriptionType === 'fixed'">
+			<!-- Empty subscription -->
+			<UserEmptySubscription />
 
 			<!-- Subscription Detail -->
 			<UserFixedSubscriptionDetail />
@@ -38,9 +40,6 @@
 
 			<!-- Transactions -->
 			<UserTransactionsForFixedBilling />
-
-			<!-- Empty subscription -->
-			<UserEmptySubscription />
 		</div>
 
     </PageTab>