CopyInput.vue refactoring

config/content.php

@@ -185,11 +185,11 @@ return [
             ],
             [
                 'name'  => 'paystack_payment_description',
-                'value' => 'Available Bank Account, USSD, Mobile Money, Apple Pay',
+                'value' => 'Available Bank Account, USSD, Mobile Money, Apple Pay.',
             ],
             [
                 'name'  => 'stripe_payment_description',
-                'value' => 'Available credit card or Apple Pay',
+                'value' => 'Available credit card or Apple Pay.',
             ],
         ],
     ],

public/mix-manifest.json

@@ -25,8 +25,8 @@
     "/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/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=c1e42f111fd531672466",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=89d41188daef178a94b0",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=616abaab42fb4c218f33",
-    "/chunks/app-payments~chunks/settings.js": "/chunks/app-payments~chunks/settings.js?id=ec4c3e5b27d7ee2e2cd1",
+    "/chunks/app-payments~chunks/settings.js": "/chunks/app-payments~chunks/settings.js?id=5e454564895beb88469a",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=5968eed91e41e99efd4c",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=c3a013b11ae7bde6f39d",
     "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~2c1222b7.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~2c1222b7.js?id=f8d41224222e2bd2040e",
@@ -71,10 +71,10 @@
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a52c81995d29f51dfe05",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=2da6b9e5f951fb7f4312",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=8577d4c771602671b38a",
-    "/chunks/settings.js": "/chunks/settings.js?id=b5cae98f485e7e6f6ef9",
+    "/chunks/settings.js": "/chunks/settings.js?id=3b85172bcc9cfc7b6a35",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=1ab825f0be1d756e231b",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=f119a31771105baf2df9",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=6e69a64a01e345af8b55",
-    "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=2af24f8d9f3412ae0662",
+    "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=aafc9cd6aa47b01bc25a",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
     "/chunks/shared.js": "/chunks/shared.js?id=db60726012b6d246bd77",
     "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=cf39d503eef93bcc7f1c",
@@ -182,5 +182,46 @@
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3c23d5015727c88ad982.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3c23d5015727c88ad982.hot-update.js",
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4f8cae58dbe64014a0b2.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4f8cae58dbe64014a0b2.hot-update.js",
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.7dc07358ab58b00c9140.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.7dc07358ab58b00c9140.hot-update.js",
-    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b0ed5f0ca43eb55bb28f.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b0ed5f0ca43eb55bb28f.hot-update.js"
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b0ed5f0ca43eb55bb28f.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b0ed5f0ca43eb55bb28f.hot-update.js",
+    "/chunks/app-payments.ce10b09e11eb0a19ac32.hot-update.js": "/chunks/app-payments.ce10b09e11eb0a19ac32.hot-update.js",
+    "/chunks/app-payments~chunks/settings.4c85a18a52126d6dbca9.hot-update.js": "/chunks/app-payments~chunks/settings.4c85a18a52126d6dbca9.hot-update.js",
+    "/chunks/app-payments~chunks/settings.e9f026f327c87eaf7cec.hot-update.js": "/chunks/app-payments~chunks/settings.e9f026f327c87eaf7cec.hot-update.js",
+    "/chunks/app-payments~chunks/settings.77588e1a5df573dd2dd3.hot-update.js": "/chunks/app-payments~chunks/settings.77588e1a5df573dd2dd3.hot-update.js",
+    "/chunks/app-payments~chunks/settings.f086f3649d6a611a457f.hot-update.js": "/chunks/app-payments~chunks/settings.f086f3649d6a611a457f.hot-update.js",
+    "/chunks/app-payments~chunks/settings.ce24fb6690b104b59bb0.hot-update.js": "/chunks/app-payments~chunks/settings.ce24fb6690b104b59bb0.hot-update.js",
+    "/chunks/app-payments~chunks/settings.a1ce9e3e0ca08b79940a.hot-update.js": "/chunks/app-payments~chunks/settings.a1ce9e3e0ca08b79940a.hot-update.js",
+    "/chunks/app-payments~chunks/settings.5f06869bb89582d87a02.hot-update.js": "/chunks/app-payments~chunks/settings.5f06869bb89582d87a02.hot-update.js",
+    "/chunks/app-payments~chunks/settings.ae775fb4e7ce535e1cdc.hot-update.js": "/chunks/app-payments~chunks/settings.ae775fb4e7ce535e1cdc.hot-update.js",
+    "/chunks/app-payments~chunks/settings.c7151e71f4d094838a28.hot-update.js": "/chunks/app-payments~chunks/settings.c7151e71f4d094838a28.hot-update.js",
+    "/chunks/app-payments~chunks/settings.1e92bd3e5eb421dc61a5.hot-update.js": "/chunks/app-payments~chunks/settings.1e92bd3e5eb421dc61a5.hot-update.js",
+    "/chunks/app-payments~chunks/settings.13dcc5a457a405cc46bb.hot-update.js": "/chunks/app-payments~chunks/settings.13dcc5a457a405cc46bb.hot-update.js",
+    "/chunks/app-payments~chunks/settings.a48b5951153fc59f7daa.hot-update.js": "/chunks/app-payments~chunks/settings.a48b5951153fc59f7daa.hot-update.js",
+    "/chunks/app-payments~chunks/settings.07fe07171e8c140129d0.hot-update.js": "/chunks/app-payments~chunks/settings.07fe07171e8c140129d0.hot-update.js",
+    "/chunks/app-payments~chunks/settings.b1cf5bdeb55f263f5e72.hot-update.js": "/chunks/app-payments~chunks/settings.b1cf5bdeb55f263f5e72.hot-update.js",
+    "/chunks/app-payments~chunks/settings.93906131f80edb0f84fc.hot-update.js": "/chunks/app-payments~chunks/settings.93906131f80edb0f84fc.hot-update.js",
+    "/chunks/app-payments~chunks/settings.c17d38f5884d51848df8.hot-update.js": "/chunks/app-payments~chunks/settings.c17d38f5884d51848df8.hot-update.js",
+    "/chunks/app-payments~chunks/settings.6318889cecbafddba944.hot-update.js": "/chunks/app-payments~chunks/settings.6318889cecbafddba944.hot-update.js",
+    "/chunks/app-payments~chunks/settings.43da691d4482e1ed6282.hot-update.js": "/chunks/app-payments~chunks/settings.43da691d4482e1ed6282.hot-update.js",
+    "/chunks/app-payments~chunks/settings.dcb798201563c61a897c.hot-update.js": "/chunks/app-payments~chunks/settings.dcb798201563c61a897c.hot-update.js",
+    "/chunks/app-payments~chunks/settings.a316a3fe372c345f809c.hot-update.js": "/chunks/app-payments~chunks/settings.a316a3fe372c345f809c.hot-update.js",
+    "/chunks/app-payments~chunks/settings.d2b4f2b2d0d5a033d514.hot-update.js": "/chunks/app-payments~chunks/settings.d2b4f2b2d0d5a033d514.hot-update.js",
+    "/chunks/app-payments~chunks/settings.1b160fc77002e8f02987.hot-update.js": "/chunks/app-payments~chunks/settings.1b160fc77002e8f02987.hot-update.js",
+    "/chunks/app-payments~chunks/settings.38698aed876699475c61.hot-update.js": "/chunks/app-payments~chunks/settings.38698aed876699475c61.hot-update.js",
+    "/chunks/app-payments~chunks/settings.f42e8540a5093653022e.hot-update.js": "/chunks/app-payments~chunks/settings.f42e8540a5093653022e.hot-update.js",
+    "/chunks/app-payments~chunks/settings.b597fcc69cce25987eea.hot-update.js": "/chunks/app-payments~chunks/settings.b597fcc69cce25987eea.hot-update.js",
+    "/chunks/app-payments~chunks/settings.b7c2ccc8c0bea1ccb3a4.hot-update.js": "/chunks/app-payments~chunks/settings.b7c2ccc8c0bea1ccb3a4.hot-update.js",
+    "/chunks/app-payments~chunks/settings.c6471f6aff08488a1df5.hot-update.js": "/chunks/app-payments~chunks/settings.c6471f6aff08488a1df5.hot-update.js",
+    "/chunks/app-payments~chunks/settings.469679e90243da3043c5.hot-update.js": "/chunks/app-payments~chunks/settings.469679e90243da3043c5.hot-update.js",
+    "/chunks/app-payments~chunks/settings.a8315b543a2e037463b5.hot-update.js": "/chunks/app-payments~chunks/settings.a8315b543a2e037463b5.hot-update.js",
+    "/chunks/app-payments~chunks/settings.4fe45d6bc0cd42c8262c.hot-update.js": "/chunks/app-payments~chunks/settings.4fe45d6bc0cd42c8262c.hot-update.js",
+    "/js/main.8c4258961a0f086bb381.hot-update.js": "/js/main.8c4258961a0f086bb381.hot-update.js",
+    "/chunks/app-payments.8c4258961a0f086bb381.hot-update.js": "/chunks/app-payments.8c4258961a0f086bb381.hot-update.js",
+    "/chunks/settings.8c4258961a0f086bb381.hot-update.js": "/chunks/settings.8c4258961a0f086bb381.hot-update.js",
+    "/chunks/settings-password.8c4258961a0f086bb381.hot-update.js": "/chunks/settings-password.8c4258961a0f086bb381.hot-update.js",
+    "/chunks/app-payments.5277cfc30f1a9f50ad44.hot-update.js": "/chunks/app-payments.5277cfc30f1a9f50ad44.hot-update.js",
+    "/chunks/settings.5277cfc30f1a9f50ad44.hot-update.js": "/chunks/settings.5277cfc30f1a9f50ad44.hot-update.js",
+    "/chunks/app-payments.e2ec0051578a2c84e718.hot-update.js": "/chunks/app-payments.e2ec0051578a2c84e718.hot-update.js",
+    "/chunks/settings.e2ec0051578a2c84e718.hot-update.js": "/chunks/settings.e2ec0051578a2c84e718.hot-update.js",
+    "/chunks/app-payments.55ef7cd68b58e48de441.hot-update.js": "/chunks/app-payments.55ef7cd68b58e48de441.hot-update.js",
+    "/chunks/settings.55ef7cd68b58e48de441.hot-update.js": "/chunks/settings.55ef7cd68b58e48de441.hot-update.js"
 }

resources/js/components/Others/Forms/CopyInput.vue

@@ -1,39 +1,44 @@
 <template>
-    <div class="inline-wrapper icon-append copy-input" :class="size" @click="copyUrl">
+    <div @click="copyUrl" class="flex items-center relative">
-        <input ref="sel" :value="str" id="link-input" type="text" class="focus-border-theme input-dark" readonly>
+        <input ref="sel" :value="str" :id="id" type="text" class="pr-8 focus-border-theme input-dark" readonly>
-        <div class="multi-icon">
+
-            <div class="icon-item group hover-bg-theme-100">
+		<!--Copy icon-->
-                <copy-icon v-if="! isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
+        <div class="absolute right-0 px-4">
-                <check-icon v-if="isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
+			<copy-icon v-if="! isCopiedLink" size="16" class="cursor-pointer hover-text-theme vue-feather"/>
-            </div>
+			<check-icon v-if="isCopiedLink" size="16" class="cursor-pointer text-theme vue-feather"/>
         </div>
     </div>
 </template>
 
 <script>
-import { CopyIcon, CheckIcon, SendIcon } from 'vue-feather-icons'
+import {
+	CopyIcon,
+	CheckIcon,
+	SendIcon
+} from 'vue-feather-icons'
 
 export default {
     name: 'CopyInput',
     props: [
 		'size',
-		'str'
+		'str',
 	],
     components: {
         CheckIcon,
         CopyIcon,
-        SendIcon
+        SendIcon,
     },
     data() {
         return {
-            isCopiedLink: false
+            isCopiedLink: false,
+			id: 'link-input-' + Math.floor(Math.random() * 10000000),
         }
     },
     methods: {
         copyUrl() {
 
             // Get input value
-            var copyText = document.getElementById('link-input')
+            let copyText = document.getElementById(this.id)
 
             // select link
             copyText.select()
@@ -53,119 +58,3 @@ export default {
     }
 }
 </script>
-
-<style lang="scss" scoped>
-@import '/resources/sass/vuefilemanager/_variables';
-@import '/resources/sass/vuefilemanager/_mixins';
-@import "resources/sass/vuefilemanager/_inapp-forms.scss";
-@import "resources/sass/vuefilemanager/_forms.scss";
-
-.multi-icon {
-    display: flex;
-    align-items: center;
-    background: $light_background;
-    border-bottom-right-radius: 8px;
-    border-top-right-radius: 8px;
-
-    line,
-	rect,
-    path,
-    polygon {
-        color: $text;
-    }
-
-    .icon-item {
-        padding: 13px 10px;
-        display: flex;
-        align-items: center;
-        border-left: 1px solid $light_mode_border_darken;
-        cursor: pointer;
-
-        &:hover {
-
-            line,
-            polyline,
-            path,
-			rect,
-            polygon {
-                color: inherit;
-            }
-        }
-
-        &:first-child {
-            border-left: none;
-        }
-
-        &:last-child {
-            border-bottom-right-radius: 8px;
-            border-top-right-radius: 8px;
-        }
-    }
-
-
-}
-
-// Single page
-.copy-input {
-    border: 1px solid $light_mode_border_darken;
-    border-radius: 8px;
-
-    &.small {
-
-        &.icon-append {
-
-            .icon {
-                padding: 10px;
-            }
-        }
-
-        input {
-            padding: 6px 10px;
-            @include font-size(13);
-        }
-    }
-
-    .icon {
-        cursor: pointer;
-    }
-
-    input {
-        text-overflow: ellipsis;
-        box-shadow: none;
-
-        &:disabled {
-            color: $text;
-            cursor: pointer;
-        }
-    }
-}
-
-.dark {
-
-    .copy-input {
-        border-color: #333333;
-    }
-
-    .multi-icon {
-        background: $dark_mode_foreground;
-        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
-
-        line,
-        path,
-		rect,
-        polygon {
-            color: inherit !important;
-        }
-
-        .icon-item {
-            border-color: #333333;
-        }
-    }
-
-    .copy-input {
-        input {
-            color: $dark_mode_text_primary;
-        }
-    }
-}
-</style>

resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue

@@ -1,7 +1,7 @@
 <template>
     <PageTab>
 		<!--Global payment settings-->
-		<div class="card shadow-card">
+		<div v-if="false" class="card shadow-card">
 			<FormLabel icon="dollar">
 				{{ $t('Subscription Payments') }}
 			</FormLabel>