mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-28 20:21:10 -04:00
connect mail sender with api
This commit is contained in:
yashkanakiya
123
resources/scripts/admin/components/FeedbackAlert.vue
Normal file
123
resources/scripts/admin/components/FeedbackAlert.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<!-- warning alert -->
|
||||
<div
|
||||
v-if="type == 'warning'"
|
||||
class="rounded-md p-4 m-5"
|
||||
:class="{
|
||||
'bg-yellow-50': type == 'warning',
|
||||
'bg-blue-50': type == 'info',
|
||||
'bg-red-50': type == 'error',
|
||||
'bg-green-50': type == 'success',
|
||||
}"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: solid/exclamation -->
|
||||
<svg
|
||||
v-if="type == 'warning'"
|
||||
class="h-5 w-5 text-yellow-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Heroicon name: solid/information-circle -->
|
||||
<svg
|
||||
v-else-if="type == 'info'"
|
||||
class="h-5 w-5 text-blue-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Heroicon name: solid/x-circle -->
|
||||
<svg
|
||||
v-else-if="type == 'error'"
|
||||
class="h-5 w-5 text-red-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Heroicon name: solid/check-circle -->
|
||||
<svg
|
||||
v-else
|
||||
class="h-5 w-5 text-green-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3
|
||||
class="text-sm font-medium"
|
||||
:class="{
|
||||
'text-yellow-800': type == 'warning',
|
||||
'text-blue-800': type == 'info',
|
||||
'text-red-800': type == 'error',
|
||||
'text-green-800': type == 'success',
|
||||
}"
|
||||
>
|
||||
{{ title }}
|
||||
</h3>
|
||||
<div
|
||||
class="text-sm"
|
||||
:class="{
|
||||
'text-yellow-700': type == 'warning',
|
||||
'text-blue-700': type == 'info',
|
||||
'text-red-700': type == 'error',
|
||||
'text-green-700': type == 'success',
|
||||
}"
|
||||
>
|
||||
<p>{{ description }}</p>
|
||||
</div>
|
||||
<slot name="action"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: null,
|
||||
required: false,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: null,
|
||||
required: false,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'success',
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -171,19 +171,14 @@ const loadMailDriver = computed(() => {
|
||||
switch (mailSenderStore.currentMailSender.driver) {
|
||||
case 'smtp':
|
||||
return SmtpDriver
|
||||
break
|
||||
case 'mail':
|
||||
return false
|
||||
break
|
||||
case 'sendmail':
|
||||
return false
|
||||
break
|
||||
case 'mailgun':
|
||||
return MailgunDriver
|
||||
break
|
||||
case 'ses':
|
||||
return SesDriver
|
||||
break
|
||||
default:
|
||||
return false
|
||||
}
|
||||
|
||||
@ -16,18 +16,28 @@
|
||||
</template>
|
||||
|
||||
<form v-if="!isPreview" action="">
|
||||
<div class="px-8 py-8 sm:p-6">
|
||||
<!-- v-if -->
|
||||
<div v-if="isMailSenderExist" class="px-8 py-8 sm:p-6">
|
||||
<BaseInputGrid layout="one-column">
|
||||
<BaseInputGroup
|
||||
:label="$t('general.from')"
|
||||
:label="$tc('settings.mail_sender.title', 1)"
|
||||
required
|
||||
:error="v$.from.$error && v$.from.$errors[0].$message"
|
||||
:error="
|
||||
v$.mail_sender_id.$error && v$.mail_sender_id.$errors[0].$message
|
||||
"
|
||||
>
|
||||
<BaseInput
|
||||
v-model="estimateMailForm.from"
|
||||
type="text"
|
||||
:invalid="v$.from.$error"
|
||||
@input="v$.from.$touch()"
|
||||
<BaseMultiselect
|
||||
v-model="estimateMailForm.mail_sender_id"
|
||||
:invalid="v$.mail_sender_id.$error"
|
||||
label="name"
|
||||
:options="mailSenders"
|
||||
value-prop="id"
|
||||
:can-deselect="false"
|
||||
:can-clear="false"
|
||||
:placeholder="$t(`settings.mail_sender.select_mail_sender`)"
|
||||
searchable
|
||||
track-by="name"
|
||||
:content-loading="isFetchingInitialData"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
<BaseInputGroup
|
||||
@ -62,6 +72,45 @@
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<!-- v-else -->
|
||||
<div v-else>
|
||||
<FeedbackAlert
|
||||
:title="$t('settings.mail_sender.no_mail_sender_found')"
|
||||
:description="
|
||||
$t('settings.mail_sender.no_mail_sender_found_description')
|
||||
"
|
||||
type="warning"
|
||||
>
|
||||
<template #action>
|
||||
<div class="mt-4">
|
||||
<div class="-mx-2 -my-1.5 flex">
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
bg-yellow-50
|
||||
px-2
|
||||
py-1.5
|
||||
rounded-md
|
||||
text-sm
|
||||
font-medium
|
||||
text-yellow-800
|
||||
hover:bg-yellow-100
|
||||
focus:outline-none
|
||||
focus:ring-2
|
||||
focus:ring-offset-2
|
||||
focus:ring-offset-yellow-50
|
||||
focus:ring-yellow-600
|
||||
"
|
||||
@click="gotoMailSender"
|
||||
>
|
||||
{{ $t('settings.mail_sender.manage_mail_sender') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</FeedbackAlert>
|
||||
</div>
|
||||
<!-- end v-if-else -->
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
@ -75,6 +124,7 @@
|
||||
</BaseButton>
|
||||
|
||||
<BaseButton
|
||||
v-if="isMailSenderExist"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
variant="primary"
|
||||
@ -141,18 +191,24 @@ import { useModalStore } from '@/scripts/stores/modal'
|
||||
import { useEstimateStore } from '@/scripts/admin/stores/estimate'
|
||||
import { useNotificationStore } from '@/scripts/stores/notification'
|
||||
import { useCompanyStore } from '@/scripts/admin/stores/company'
|
||||
import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
|
||||
import { useMailSenderStore } from '@/scripts/admin/stores/mail-sender'
|
||||
import FeedbackAlert from '@/scripts/admin/components/FeedbackAlert.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const modalStore = useModalStore()
|
||||
const estimateStore = useEstimateStore()
|
||||
const notificationStore = useNotificationStore()
|
||||
const companyStore = useCompanyStore()
|
||||
const mailDriverStore = useMailDriverStore()
|
||||
const mailSenderStore = useMailSenderStore()
|
||||
const router = useRouter()
|
||||
|
||||
const { t } = useI18n()
|
||||
const isLoading = ref(false)
|
||||
const templateUrl = ref('')
|
||||
const isPreview = ref(false)
|
||||
const mailSenders = ref(null)
|
||||
const isFetchingInitialData = ref(false)
|
||||
const emailTemplates = ref(null)
|
||||
|
||||
const estimateMailFields = ref([
|
||||
'customer',
|
||||
@ -164,7 +220,7 @@ const estimateMailFields = ref([
|
||||
|
||||
let estimateMailForm = reactive({
|
||||
id: null,
|
||||
from: null,
|
||||
mail_sender_id: null,
|
||||
to: null,
|
||||
subject: 'New Estimate',
|
||||
body: null,
|
||||
@ -181,9 +237,8 @@ const modalData = computed(() => {
|
||||
})
|
||||
|
||||
const rules = {
|
||||
from: {
|
||||
mail_sender_id: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
email: helpers.withMessage(t('validation.email_incorrect'), email),
|
||||
},
|
||||
to: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
@ -207,20 +262,26 @@ function cancelPreview() {
|
||||
}
|
||||
|
||||
async function setInitialData() {
|
||||
let admin = await companyStore.fetchBasicMailConfig()
|
||||
|
||||
estimateMailForm.id = modalStore.id
|
||||
|
||||
if (admin.data) {
|
||||
estimateMailForm.from = admin.data.from_mail
|
||||
}
|
||||
|
||||
if (modalData.value) {
|
||||
estimateMailForm.to = modalData.value.customer.email
|
||||
}
|
||||
|
||||
estimateMailForm.body =
|
||||
companyStore.selectedCompanySettings.estimate_mail_body
|
||||
|
||||
isFetchingInitialData.value = true
|
||||
let mailSenderData = await mailSenderStore.fetchMailSenderList()
|
||||
if (mailSenderData.data) {
|
||||
mailSenders.value = mailSenderData.data.data
|
||||
let defaultMailSender = mailSenderData.data.data.find(
|
||||
(mailSender) => mailSender.is_default == true
|
||||
)
|
||||
estimateMailForm.mail_sender_id = defaultMailSender
|
||||
? defaultMailSender.id
|
||||
: null
|
||||
isFetchingInitialData.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
@ -274,4 +335,18 @@ function closeSendEstimateModal() {
|
||||
templateUrl.value = null
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function getTickImage() {
|
||||
const imgUrl = new URL('/img/tick.png', import.meta.url)
|
||||
return imgUrl
|
||||
}
|
||||
|
||||
const isMailSenderExist = computed(() => {
|
||||
return mailSenders.value && mailSenders.value.length
|
||||
})
|
||||
|
||||
function gotoMailSender() {
|
||||
closeSendEstimateModal()
|
||||
router.push('/admin/settings/mail-sender')
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -15,18 +15,28 @@
|
||||
</div>
|
||||
</template>
|
||||
<form v-if="!isPreview" action="">
|
||||
<div class="px-8 py-8 sm:p-6">
|
||||
<!-- v-if -->
|
||||
<div v-if="isMailSenderExist" class="px-8 py-8 sm:p-6">
|
||||
<BaseInputGrid layout="one-column" class="col-span-7">
|
||||
<BaseInputGroup
|
||||
:label="$t('general.from')"
|
||||
:label="$tc('settings.mail_sender.title', 1)"
|
||||
required
|
||||
:error="v$.from.$error && v$.from.$errors[0].$message"
|
||||
:error="
|
||||
v$.mail_sender_id.$error && v$.mail_sender_id.$errors[0].$message
|
||||
"
|
||||
>
|
||||
<BaseInput
|
||||
v-model="invoiceMailForm.from"
|
||||
type="text"
|
||||
:invalid="v$.from.$error"
|
||||
@input="v$.from.$touch()"
|
||||
<BaseMultiselect
|
||||
v-model="invoiceMailForm.mail_sender_id"
|
||||
:invalid="v$.mail_sender_id.$error"
|
||||
label="name"
|
||||
:options="mailSenders"
|
||||
value-prop="id"
|
||||
:can-deselect="false"
|
||||
:can-clear="false"
|
||||
:placeholder="$t(`settings.mail_sender.select_mail_sender`)"
|
||||
searchable
|
||||
track-by="name"
|
||||
:content-loading="isFetchingInitialData"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
<BaseInputGroup
|
||||
@ -65,6 +75,45 @@
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<!-- v-else -->
|
||||
<div v-else>
|
||||
<FeedbackAlert
|
||||
:title="$t('settings.mail_sender.no_mail_sender_found')"
|
||||
:description="
|
||||
$t('settings.mail_sender.no_mail_sender_found_description')
|
||||
"
|
||||
type="warning"
|
||||
>
|
||||
<template #action>
|
||||
<div class="mt-4">
|
||||
<div class="-mx-2 -my-1.5 flex">
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
bg-yellow-50
|
||||
px-2
|
||||
py-1.5
|
||||
rounded-md
|
||||
text-sm
|
||||
font-medium
|
||||
text-yellow-800
|
||||
hover:bg-yellow-100
|
||||
focus:outline-none
|
||||
focus:ring-2
|
||||
focus:ring-offset-2
|
||||
focus:ring-offset-yellow-50
|
||||
focus:ring-yellow-600
|
||||
"
|
||||
@click="gotoMailSender"
|
||||
>
|
||||
{{ $t('settings.mail_sender.manage_mail_sender') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</FeedbackAlert>
|
||||
</div>
|
||||
<!-- end v-if-else -->
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
@ -77,6 +126,7 @@
|
||||
{{ $t('general.cancel') }}
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
v-if="isMailSenderExist"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
variant="primary"
|
||||
@ -154,18 +204,24 @@ import { useI18n } from 'vue-i18n'
|
||||
import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
|
||||
import { useVuelidate } from '@vuelidate/core'
|
||||
import { required, email, helpers } from '@vuelidate/validators'
|
||||
import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
|
||||
import { useMailSenderStore } from '@/scripts/admin/stores/mail-sender'
|
||||
import FeedbackAlert from '@/scripts/admin/components/FeedbackAlert.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const modalStore = useModalStore()
|
||||
const companyStore = useCompanyStore()
|
||||
const notificationStore = useNotificationStore()
|
||||
const invoiceStore = useInvoiceStore()
|
||||
const mailDriverStore = useMailDriverStore()
|
||||
const mailSenderStore = useMailSenderStore()
|
||||
const router = useRouter()
|
||||
|
||||
const { t } = useI18n()
|
||||
let isLoading = ref(false)
|
||||
const templateUrl = ref('')
|
||||
const isPreview = ref(false)
|
||||
const mailSenders = ref(null)
|
||||
const isFetchingInitialData = ref(false)
|
||||
const emailTemplates = ref(null)
|
||||
|
||||
const emit = defineEmits(['update'])
|
||||
|
||||
@ -179,7 +235,7 @@ const invoiceMailFields = ref([
|
||||
|
||||
const invoiceMailForm = reactive({
|
||||
id: null,
|
||||
from: null,
|
||||
mail_sender_id: null,
|
||||
to: null,
|
||||
subject: 'New Invoice',
|
||||
body: null,
|
||||
@ -198,9 +254,8 @@ const modalData = computed(() => {
|
||||
})
|
||||
|
||||
const rules = {
|
||||
from: {
|
||||
mail_sender_id: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
email: helpers.withMessage(t('validation.email_incorrect'), email),
|
||||
},
|
||||
to: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
@ -224,19 +279,25 @@ function cancelPreview() {
|
||||
}
|
||||
|
||||
async function setInitialData() {
|
||||
let admin = await companyStore.fetchBasicMailConfig()
|
||||
|
||||
invoiceMailForm.id = modalStore.id
|
||||
|
||||
if (admin.data) {
|
||||
invoiceMailForm.from = admin.data.from_mail
|
||||
}
|
||||
|
||||
if (modalData.value) {
|
||||
invoiceMailForm.to = modalData.value.customer.email
|
||||
}
|
||||
|
||||
invoiceMailForm.body = companyStore.selectedCompanySettings.invoice_mail_body
|
||||
|
||||
isFetchingInitialData.value = true
|
||||
let mailSenderData = await mailSenderStore.fetchMailSenderList()
|
||||
if (mailSenderData.data) {
|
||||
mailSenders.value = mailSenderData.data.data
|
||||
let defaultMailSender = mailSenderData.data.data.find(
|
||||
(mailSender) => mailSender.is_default == true
|
||||
)
|
||||
invoiceMailForm.mail_sender_id = defaultMailSender
|
||||
? defaultMailSender.id
|
||||
: null
|
||||
isFetchingInitialData.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
@ -287,4 +348,18 @@ function closeSendInvoiceModal() {
|
||||
templateUrl.value = null
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function getTickImage() {
|
||||
const imgUrl = new URL('/img/tick.png', import.meta.url)
|
||||
return imgUrl
|
||||
}
|
||||
|
||||
const isMailSenderExist = computed(() => {
|
||||
return mailSenders.value && mailSenders.value.length
|
||||
})
|
||||
|
||||
function gotoMailSender() {
|
||||
closeSendInvoiceModal()
|
||||
router.push('/admin/settings/mail-sender')
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -15,18 +15,28 @@
|
||||
</div>
|
||||
</template>
|
||||
<form v-if="!isPreview" action="">
|
||||
<div class="px-8 py-8 sm:p-6">
|
||||
<!-- v-if -->
|
||||
<div v-if="isMailSenderExist" class="px-8 py-8 sm:p-6">
|
||||
<BaseInputGrid layout="one-column" class="col-span-7">
|
||||
<BaseInputGroup
|
||||
:label="$t('general.from')"
|
||||
:label="$tc('settings.mail_sender.title', 1)"
|
||||
required
|
||||
:error="v$.from.$error && v$.from.$errors[0].$message"
|
||||
:error="
|
||||
v$.mail_sender_id.$error && v$.mail_sender_id.$errors[0].$message
|
||||
"
|
||||
>
|
||||
<BaseInput
|
||||
v-model="paymentMailForm.from"
|
||||
type="text"
|
||||
:invalid="v$.from.$error"
|
||||
@input="v$.from.$touch()"
|
||||
<BaseMultiselect
|
||||
v-model="paymentMailForm.mail_sender_id"
|
||||
:invalid="v$.mail_sender_id.$error"
|
||||
label="name"
|
||||
:options="mailSenders"
|
||||
value-prop="id"
|
||||
:can-deselect="false"
|
||||
:can-clear="false"
|
||||
:placeholder="$t(`settings.mail_sender.select_mail_sender`)"
|
||||
searchable
|
||||
track-by="name"
|
||||
:content-loading="isFetchingInitialData"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
<BaseInputGroup
|
||||
@ -65,6 +75,45 @@
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<!-- v-else -->
|
||||
<div v-else>
|
||||
<FeedbackAlert
|
||||
:title="$t('settings.mail_sender.no_mail_sender_found')"
|
||||
:description="
|
||||
$t('settings.mail_sender.no_mail_sender_found_description')
|
||||
"
|
||||
type="warning"
|
||||
>
|
||||
<template #action>
|
||||
<div class="mt-4">
|
||||
<div class="-mx-2 -my-1.5 flex">
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
bg-yellow-50
|
||||
px-2
|
||||
py-1.5
|
||||
rounded-md
|
||||
text-sm
|
||||
font-medium
|
||||
text-yellow-800
|
||||
hover:bg-yellow-100
|
||||
focus:outline-none
|
||||
focus:ring-2
|
||||
focus:ring-offset-2
|
||||
focus:ring-offset-yellow-50
|
||||
focus:ring-yellow-600
|
||||
"
|
||||
@click="gotoMailSender"
|
||||
>
|
||||
{{ $t('settings.mail_sender.manage_mail_sender') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</FeedbackAlert>
|
||||
</div>
|
||||
<!-- end v-if-else -->
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
@ -77,6 +126,7 @@
|
||||
{{ $t('general.cancel') }}
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
v-if="isMailSenderExist"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
variant="primary"
|
||||
@ -154,20 +204,26 @@ import { usePaymentStore } from '@/scripts/admin/stores/payment'
|
||||
import { useCompanyStore } from '@/scripts/admin/stores/company'
|
||||
import { useNotificationStore } from '@/scripts/stores/notification'
|
||||
import { useModalStore } from '@/scripts/stores/modal'
|
||||
import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
|
||||
import { useDialogStore } from '@/scripts/stores/dialog'
|
||||
import { useMailSenderStore } from '@/scripts/admin/stores/mail-sender'
|
||||
import FeedbackAlert from '@/scripts/admin/components/FeedbackAlert.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const paymentStore = usePaymentStore()
|
||||
const companyStore = useCompanyStore()
|
||||
const modalStore = useModalStore()
|
||||
const notificationStore = useNotificationStore()
|
||||
const mailDriversStore = useMailDriverStore()
|
||||
const dialogStore = useDialogStore()
|
||||
const mailSenderStore = useMailSenderStore()
|
||||
const router = useRouter()
|
||||
|
||||
const { t } = useI18n()
|
||||
let isLoading = ref(false)
|
||||
const templateUrl = ref('')
|
||||
const isPreview = ref(false)
|
||||
const mailSenders = ref(null)
|
||||
const isFetchingInitialData = ref(false)
|
||||
const emailTemplates = ref(null)
|
||||
|
||||
const paymentMailFields = ref([
|
||||
'customer',
|
||||
@ -179,7 +235,7 @@ const paymentMailFields = ref([
|
||||
|
||||
const paymentMailForm = reactive({
|
||||
id: null,
|
||||
from: null,
|
||||
mail_sender_id: null,
|
||||
to: null,
|
||||
subject: 'New Payment',
|
||||
body: null,
|
||||
@ -198,9 +254,8 @@ const modalData = computed(() => {
|
||||
})
|
||||
|
||||
const rules = {
|
||||
from: {
|
||||
mail_sender_id: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
email: helpers.withMessage(t('validation.email_incorrect'), email),
|
||||
},
|
||||
to: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
@ -221,18 +276,25 @@ function cancelPreview() {
|
||||
}
|
||||
|
||||
async function setInitialData() {
|
||||
let admin = await companyStore.fetchBasicMailConfig()
|
||||
paymentMailForm.id = modalStore.id
|
||||
|
||||
if (admin.data) {
|
||||
paymentMailForm.from = admin.data.from_mail
|
||||
}
|
||||
|
||||
if (modalData.value) {
|
||||
paymentMailForm.to = modalData.value.customer.email
|
||||
}
|
||||
|
||||
paymentMailForm.body = companyStore.selectedCompanySettings.payment_mail_body
|
||||
|
||||
isFetchingInitialData.value = true
|
||||
let mailSenderData = await mailSenderStore.fetchMailSenderList()
|
||||
if (mailSenderData.data) {
|
||||
mailSenders.value = mailSenderData.data.data
|
||||
let defaultMailSender = mailSenderData.data.data.find(
|
||||
(mailSender) => mailSender.is_default == true
|
||||
)
|
||||
paymentMailForm.mail_sender_id = defaultMailSender
|
||||
? defaultMailSender.id
|
||||
: null
|
||||
isFetchingInitialData.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function sendPaymentData() {
|
||||
@ -280,4 +342,18 @@ function closeSendPaymentModal() {
|
||||
modalStore.resetModalData()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function getTickImage() {
|
||||
const imgUrl = new URL('/img/tick.png', import.meta.url)
|
||||
return imgUrl
|
||||
}
|
||||
|
||||
const isMailSenderExist = computed(() => {
|
||||
return mailSenders.value && mailSenders.value.length
|
||||
})
|
||||
|
||||
function gotoMailSender() {
|
||||
closeSendPaymentModal()
|
||||
router.push('/admin/settings/mail-sender')
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user