Add New SweetAlert & Notification Components

resources/assets/js/components/base/modal/SendEstimateModal.vue

@@ -61,8 +61,8 @@
             v-model="formData.body"
             :fields="estimateMailFields"
             :invalid="$v.formData.body.$error"
-            @input="$v.formData.body.$touch()"
             class="mt-2"
+            @input="$v.formData.body.$touch()"
           />
         </sw-input-group>
       </div>
@@ -140,6 +140,7 @@ export default {
   computed: {
     ...mapGetters('modal', ['modalDataID', 'modalData', 'modalActive']),
     ...mapGetters('user', ['currentUser']),
+    ...mapActions('notification', ['showNotification']),
     getEmailUrl() {
       return this.url
     },
@@ -224,15 +225,31 @@ export default {
       if (this.$v.$invalid) {
         return true
       }
-      swal({
+      this.$swal({
         title: this.$t('general.are_you_sure'),
         text: this.$t('estimates.confirm_send_estimate'),
-        icon: '/assets/icon/check-circle-solid.svg',
-        buttons: true,
-        dangerMode: true,
-      }).then(async (value) => {
+        icon: 'question',
+        iconHtml: `<svg
+            aria-hidden="true"
+            class="w-6 h-6"
+            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>`,
+        showCancelButton: true,
+        showConfirmButton: true,
+      }).then(async (result) => {
         try {
-          if (value) {
+          if (result.value) {
             let data = {
               ...this.formData,
               id: this.modalDataID,
@@ -244,21 +261,26 @@ export default {
             this.closeModal()
             if (res.data.success) {
               this.isLoading = false
-              window.toastr['success'](
-                this.$tc('estimates.send_estimate_successfully')
-              )
+              this.showNotification({
+                type: 'success',
+                message: this.$tc('estimates.send_estimate_successfully'),
+              })
               return true
             }
             if (res.data.error === 'estimates.user_email_does_not_exist') {
-              window.toastr['error'](
-                this.$tc('estimates.user_email_does_not_exist')
-              )
+              this.showNotification({
+                type: 'error',
+                message: this.$tc('estimates.user_email_does_not_exist'),
+              })
               return false
             }
           }
         } catch (error) {
           this.isLoading = false
-          window.toastr['error'](this.$tc('estimates.something_went_wrong'))
+          this.showNotification({
+            type: 'error',
+            message: this.$tc('estimates.something_went_wrong'),
+          })
         }
       })
     },