refactor sweet-alert and add related icons in alert

public/assets/icon/check-circle-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#55547A" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>

public/assets/icon/paper-plane-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="paper-plane" class="svg-inline--fa fa-paper-plane fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#55547A" d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"></path></svg>

resources/assets/js/plugins/en.js

@@ -303,7 +303,9 @@ export default {
     send_invoice: 'Send Invoice',
     invoice_template: 'Invoice Template',
     template: 'Template',
-    mark_as_sent: 'Mark as Sent',
+    mark_as_sent: 'Mark as sent',
+    invoice_mark_as_sent: 'This invoice will be marked as sent',
+    confirm_send: 'This invoice will be sent via email to the customer',
     invoice_date: 'Invoice Date',
     record_payment: 'Record Payment',
     add_new_invoice: 'Add New Invoice',

resources/assets/js/plugins/es.js

@@ -308,6 +308,8 @@ export default {
     invoice_template: 'Plantilla de factura',
     template: 'Modelo',
     mark_as_sent: 'Marcar como enviado',
+    invoice_mark_as_sent: 'Esta factura se marcará como enviada',
+    confirm_send: 'Estas facturas se enviarán por correo electrónico al cliente.',
     invoice_date: 'Fecha de la factura',
     record_payment: 'Registro de pago',
     add_new_invoice: 'Añadir nueva factura',

resources/assets/js/plugins/fr.js

@@ -308,6 +308,8 @@ export default {
     invoice_template: 'Modèle de facture',
     template: 'Modèle',
     mark_as_sent: 'Marquer comme envoyé',
+    invoice_mark_as_sent: 'Cette facture sera marquée comme envoyé',
+    confirm_send: 'Cette facture sera envoyée par courrier électronique au client.',
     invoice_date: 'Date de facturation',
     record_payment: 'Record de paiement',
     add_new_invoice: 'Ajouter une nouvelle facture',

resources/assets/js/views/invoices/Index.vue

@@ -247,13 +247,13 @@
                   {{ $t('invoices.view') }}
                 </router-link>
               </v-dropdown-item>
-              <v-dropdown-item>
+              <v-dropdown-item v-if="row.status == 'DRAFT'">
                 <a class="dropdown-item" href="#" @click="sendInvoice(row.id)" >
                   <font-awesome-icon icon="paper-plane" class="dropdown-item-icon" />
                   {{ $t('invoices.send_invoice') }}
                 </a>
               </v-dropdown-item>
-              <v-dropdown-item v-if="row.status === 'DRAFT'">
+              <v-dropdown-item v-if="row.status == 'DRAFT'">
                 <a class="dropdown-item" href="#" @click="sentInvoice(row.id)">
                   <font-awesome-icon icon="check-circle" class="dropdown-item-icon" />
                   {{ $t('invoices.mark_as_sent') }}
@@ -384,24 +384,44 @@ export default {
       'fetchCustomers'
     ]),
     async sendInvoice (id) {
-      const data = {
+      swal({
-        id: id
+        title: this.$t('general.are_you_sure'),
-      }
+        text: this.$t('invoices.confirm_send'),
-      let response = await this.sendEmail(data)
+        icon: '/assets/icon/paper-plane-solid.svg',
-      this.refreshTable()
+        buttons: true,
-      if (response.data) {
+        dangerMode: true
-        window.toastr['success'](this.$tc('invoices.send_invoice'))
+      }).then(async (Send_Invoice) => {
-      }
+        if (Send_Invoice) {
+          const data = {
+            id: id
+          }
+          let response = await this.sendEmail(data)
+          this.refreshTable()
+          if (response.data) {
+            window.toastr['success'](this.$tc('invoices.send_invoice'))
+          }
+        }
+      })
     },
     async sentInvoice (id) {
-      const data = {
+      swal({
-        id: id
+        title: this.$t('general.are_you_sure'),
-      }
+        text: this.$t('invoices.invoice_mark_as_sent'),
-      let response = await this.markAsSent(data)
+        icon: '/assets/icon/check-circle-solid.svg',
-      this.refreshTable()
+        buttons: true,
-      if (response.data) {
+        dangerMode: true
-        window.toastr['success'](this.$tc('invoices.mark_as_sent'))
+      }).then(async (MarkAsSend_Invoice) => {
-      }
+        if (MarkAsSend_Invoice) {
+          const data = {
+            id: id
+          }
+          let response = await this.markAsSent(data)
+          this.refreshTable()
+          if (response.data) {
+            window.toastr['success'](this.$tc('invoices.mark_as_sent'))
+          }
+        }
+      })
     },
     getStatus (val) {
       this.filters.status = {

resources/assets/sass/base.scss

@@ -111,3 +111,7 @@ code, .code {
     justify-content: center;
     align-items: center;
 }
+
+.swal-icon--custom {
+    height: 50px !important;
+}