Add New SweetAlert & Notification Components

resources/assets/js/views/payments/View.vue

@@ -282,6 +282,7 @@ export default {
       'searchPayment',
     ]),
     ...mapActions('modal', ['openModal']),
+    ...mapActions('notification', ['showNotification']),
 
     hasActiveUrl(id) {
       return this.$route.params.id == id
@@ -364,30 +365,39 @@ export default {
       let pdfUrl = `${window.location.origin}/payments/pdf/${this.payment.unique_hash}`
 
       let response = this.$utils.copyTextToClipboard(pdfUrl)
-
-      window.toastr['success'](this.$t('general.copied_pdf_url_clipboard'))
+      this.showNotification({
+        type: 'success',
+        message: this.$t('general.copied_pdf_url_clipboard'),
+      })
     },
     async removePayment(id) {
       this.id = id
-      window
-        .swal({
-          title: this.$t('general.are_you_sure'),
-          text: 'you will not be able to recover this payment!',
-          icon: '/assets/icon/trash-solid.svg',
-          buttons: true,
-          dangerMode: true,
-        })
-        .then(async (value) => {
-          if (value) {
-            let request = await this.deletePayment({ ids: [id] })
-            if (request.data.success) {
-              window.toastr['success'](this.$tc('payments.deleted_message', 1))
-              this.$router.push('/admin/payments')
-            } else if (request.data.error) {
-              window.toastr['error'](request.data.message)
-            }
+      this.$swal({
+        title: this.$t('general.are_you_sure'),
+        text: 'you will not be able to recover this payment!',
+        icon: 'error',
+        iconHtml: `<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-red-600"fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>`,
+        showCancelButton: true,
+        showConfirmButton: true,
+      }).then(async (result) => {
+        if (result.value) {
+          let request = await this.deletePayment({ ids: [id] })
+          if (request.data.success) {
+            this.showToaster({
+              type: 'success',
+              message: this.$tc('payments.deleted_message', 1),
+            })
+            this.$router.push('/admin/payments')
+          } else if (request.data.error) {
+            this.showToaster({
+              type: 'error',
+              message: request.data.message,
+            })
           }
-        })
+        }
+      })
     },
   },
 }