forked from verdnatura/salix-front
Updated SMS component
This commit is contained in:
parent
c43f743804
commit
f7c9da6ad1
|
|
@ -44,6 +44,11 @@ function responseError(error) {
|
|||
let message = error.message;
|
||||
let logOut = false;
|
||||
|
||||
const response = error.response;
|
||||
if (response && response.data.error) {
|
||||
message = response.data.error.message;
|
||||
}
|
||||
|
||||
switch (error.response?.status) {
|
||||
case 401:
|
||||
message = 'login.loginError';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { ref, computed, reactive } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
|
@ -21,22 +21,35 @@ const props = defineProps({
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
locale: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'es',
|
||||
},
|
||||
send: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const maxLength = 160;
|
||||
const locale = ref('es');
|
||||
const locale = ref(props.locale);
|
||||
const subject = ref(props.subject);
|
||||
const phone = ref(props.phone);
|
||||
const message = ref('');
|
||||
|
||||
// const templates = ['pendingPayment', 'minAmount'];
|
||||
const template = reactive(props.template);
|
||||
|
||||
updateMessage();
|
||||
|
||||
function updateMessage() {
|
||||
const params = { orderId: 123 };
|
||||
message.value = t(`templates['${template}']`, params, { locale: locale.value });
|
||||
const params = props.data;
|
||||
const key = `templates['${props.template}']`;
|
||||
|
||||
message.value = t(key, params, { locale: locale.value });
|
||||
}
|
||||
|
||||
const totalLength = computed(() => message.value.length);
|
||||
|
|
@ -47,6 +60,18 @@ const color = computed(() => {
|
|||
});
|
||||
|
||||
const languages = availableLocales.map((locale) => ({ label: t(locale), value: locale }));
|
||||
|
||||
const isLoading = ref(false);
|
||||
async function send() {
|
||||
isLoading.value = true;
|
||||
await props.send({
|
||||
destination: phone.value,
|
||||
message: message.value,
|
||||
});
|
||||
isLoading.value = false;
|
||||
|
||||
onDialogOK();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -57,11 +82,16 @@ const languages = availableLocales.map((locale) => ({ label: t(locale), value: l
|
|||
{{ t('Send SMS') }}
|
||||
</span>
|
||||
<q-space />
|
||||
<q-btn icon="close" flat round dense v-close-popup />
|
||||
<q-btn icon="close" :disable="isLoading" flat round dense v-close-popup />
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-banner class="bg-warning" rounded dense>
|
||||
This user uses "" as default language
|
||||
<q-banner class="bg-amber text-white" rounded dense>
|
||||
<template #avatar>
|
||||
<q-icon name="warning" />
|
||||
</template>
|
||||
<span
|
||||
v-html="t('CustomerDefaultLanguage', { locale: t(props.locale) })"
|
||||
></span>
|
||||
</q-banner>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pb-xs">
|
||||
|
|
@ -111,7 +141,6 @@ const languages = availableLocales.map((locale) => ({ label: t(locale), value: l
|
|||
stack-label
|
||||
outlined
|
||||
autofocus
|
||||
dense
|
||||
>
|
||||
<template #append>
|
||||
<q-icon
|
||||
|
|
@ -129,8 +158,19 @@ const languages = availableLocales.map((locale) => ({ label: t(locale), value: l
|
|||
</q-input>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn :label="t('globals.cancel')" color="primary" flat v-close-popup />
|
||||
<q-btn :label="t('globals.confirm')" color="primary" @click="confirm" />
|
||||
<q-btn
|
||||
:label="t('globals.cancel')"
|
||||
color="primary"
|
||||
:disable="isLoading"
|
||||
flat
|
||||
v-close-popup
|
||||
/>
|
||||
<q-btn
|
||||
:label="t('globals.confirm')"
|
||||
@click="send()"
|
||||
:loading="isLoading"
|
||||
color="primary"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
|
@ -141,38 +181,53 @@ const languages = availableLocales.map((locale) => ({ label: t(locale), value: l
|
|||
transition: background 0.36s;
|
||||
}
|
||||
.q-card {
|
||||
width: 400px;
|
||||
width: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
Message: Message
|
||||
CustomerDefaultLanguage: This customer uses <strong>{locale}</strong> as their default language
|
||||
en: English
|
||||
es: Spanish
|
||||
fr: French
|
||||
templates:
|
||||
pendingPayment: 'Your order is pending of payment.
|
||||
Please, enter the website and make the payment with a credit card. Thank you.'
|
||||
minAmount: Test 2
|
||||
minAmount: 'A minimum amount of 50€ (VAT excluded) is required for your order
|
||||
{ orderId } of { shipped } to receive it without additional shipping costs.'
|
||||
orderChanges: 'Order {orderId} of { shipped }\r
|
||||
{ changes }'
|
||||
es:
|
||||
Send SMS: Enviar SMS
|
||||
CustomerDefaultLanguage: Este cliente utiliza <strong>{locale}</strong> como idioma por defecto
|
||||
Language: Idioma
|
||||
Phone: Móvil
|
||||
Subject: Asunto
|
||||
Message: Mensaje
|
||||
templates:
|
||||
pendingPayment: 'Su pedido está pendiente de pago.
|
||||
Por favor, entre en la página web y efectue el pago con tarjeta. Muchas gracias.'
|
||||
minAmount: 'Es necesario un importe mínimo de 50€ (Sin IVA) en su pedido { orderId } del día 08/03/2023 para recibirlo sin portes adicionales.'
|
||||
minAmount: 'Es necesario un importe mínimo de 50€ (Sin IVA) en su pedido
|
||||
{ orderId } del día { shipped } para recibirlo sin portes adicionales.'
|
||||
orderChanges: 'Pedido {orderId} día { shipped }
|
||||
{ changes }'
|
||||
en: Inglés
|
||||
es: Español
|
||||
fr: Francés
|
||||
fr:
|
||||
Send SMS: Envoyer SMS
|
||||
CustomerDefaultLanguage: Ce client utilise l'{locale} comme langue par défaut
|
||||
Language: Langage
|
||||
Phone: Mobile
|
||||
Subject: Affaire
|
||||
Message: Message
|
||||
templates:
|
||||
pendingPayment: 'Votre commande est en attente de paiement.
|
||||
Veuillez vous connecter sur le site web et effectuer le paiement par carte. Merci beaucoup.'
|
||||
minAmount: 'Un montant minimum de 50€ (TVA non incluse) est requis pour votre commande
|
||||
4101055 du 03/08/2023 afin de la recevoir sans frais de port supplémentaires.'
|
||||
{ orderId } du { shipped } afin de la recevoir sans frais de port supplémentaires.'
|
||||
orderChanges: 'Commande { orderId } du { shipped }\r { changes }'
|
||||
en: Anglais
|
||||
es: Espagnol
|
||||
fr: Français
|
||||
|
|
|
|||
|
|
@ -59,9 +59,9 @@ watch(props, async () => {
|
|||
:to="{ name: `${module}Summary`, params: { id: entity.id } }"
|
||||
>
|
||||
<q-btn round flat dense size="md" icon="launch" color="white">
|
||||
<q-tooltip>{{
|
||||
t('components.cardDescriptor.summary')
|
||||
}}</q-tooltip>
|
||||
<q-tooltip>
|
||||
{{ t('components.cardDescriptor.summary') }}
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,11 +24,25 @@ const entityId = computed(() => {
|
|||
|
||||
const filter = {
|
||||
include: [
|
||||
{
|
||||
relation: 'address',
|
||||
scope: {
|
||||
fields: ['id', 'name', 'mobile', 'phone'],
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'client',
|
||||
scope: {
|
||||
fields: ['id', 'name', 'salesPersonFk'],
|
||||
include: { relation: 'salesPersonUser' },
|
||||
fields: ['id', 'name', 'salesPersonFk', 'phone', 'mobile'],
|
||||
include: [
|
||||
{
|
||||
relation: 'user',
|
||||
scope: {
|
||||
fields: ['id', 'lang'],
|
||||
},
|
||||
},
|
||||
{ relation: 'salesPersonUser' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -125,6 +139,16 @@ function stateColor(state) {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-card-actions class="q-gutter-md">
|
||||
<q-icon
|
||||
v-if="entity.isDeleted == true"
|
||||
name="vn:deletedTicket"
|
||||
size="xs"
|
||||
color="primary"
|
||||
>
|
||||
<q-tooltip>{{ t('This ticket is deleted') }}</q-tooltip>
|
||||
</q-icon>
|
||||
</q-card-actions>
|
||||
|
||||
<q-card-actions>
|
||||
<q-btn
|
||||
|
|
@ -139,3 +163,8 @@ function stateColor(state) {
|
|||
</template>
|
||||
</card-descriptor>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
This ticket is deleted: Este ticket está eliminado
|
||||
</i18n>
|
||||
|
|
@ -3,13 +3,14 @@ import axios from 'axios';
|
|||
import { ref } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { usePrintService } from 'composables/usePrintService';
|
||||
import SendEmailDialog from 'components/common/SendEmailDialog.vue';
|
||||
// import SendEmailDialog from 'components/common/SendEmailDialog.vue';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import VnSmsDialog from 'components/common/VnSmsDialog.vue';
|
||||
import toDate from 'filters/toDate';
|
||||
|
||||
const $props = defineProps({
|
||||
const props = defineProps({
|
||||
ticket: {
|
||||
type: Object,
|
||||
required: true,
|
||||
|
|
@ -17,11 +18,12 @@ const $props = defineProps({
|
|||
});
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const quasar = useQuasar();
|
||||
const { t } = useI18n();
|
||||
const { openReport, sendEmail } = usePrintService();
|
||||
|
||||
const ticket = ref($props.ticket);
|
||||
const ticket = ref(props.ticket);
|
||||
|
||||
function openDeliveryNote(type = 'deliveryNote', documentType = 'pdf') {
|
||||
const path = `Tickets/${ticket.value.id}/delivery-note-${documentType}`;
|
||||
|
|
@ -34,31 +36,63 @@ function openDeliveryNote(type = 'deliveryNote', documentType = 'pdf') {
|
|||
function sendDeliveryNote(type = 'deliveryNote', documentType = 'pdf') {
|
||||
const id = ticket.value.id;
|
||||
const customer = ticket.value.client;
|
||||
return sendEmail(`Tickets/${id}/delivery-note-email`, {
|
||||
let pathName = 'delivery-note-email';
|
||||
if (documentType == 'csv') pathName = 'delivery-note-csv-email';
|
||||
|
||||
const path = `Tickets/${id}/${pathName}`;
|
||||
return sendEmail(path, {
|
||||
recipientId: customer.id,
|
||||
type: type,
|
||||
});
|
||||
}
|
||||
|
||||
// function confirmPickupOrder() {
|
||||
// const customer = ticket.value.client;
|
||||
// quasar.dialog({
|
||||
// component: SendEmailDialog,
|
||||
// componentProps: {
|
||||
// address: customer.email,
|
||||
// send: sendPickupOrder,
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
const shipped = toDate(ticket.value.shipped);
|
||||
function showSmsDialog(template, customData) {
|
||||
const ticket = props.ticket;
|
||||
const address = ticket.address;
|
||||
const client = ticket.client;
|
||||
const phone =
|
||||
route.params.phone ||
|
||||
address.mobile ||
|
||||
address.phone ||
|
||||
client.mobile ||
|
||||
client.phone;
|
||||
|
||||
const data = {
|
||||
orderId: ticket.id,
|
||||
shipped: shipped,
|
||||
};
|
||||
|
||||
if (typeof customData === 'object') {
|
||||
console.log('merge');
|
||||
Object.assign(data, customData);
|
||||
}
|
||||
|
||||
function sendSms() {
|
||||
quasar.dialog({
|
||||
component: VnSmsDialog,
|
||||
componentProps: {
|
||||
phone: '123',
|
||||
template: 'pendingPayment'
|
||||
}
|
||||
})
|
||||
phone: phone,
|
||||
template: template,
|
||||
locale: client.user.lang,
|
||||
send: sendSms,
|
||||
data: data,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function showSmsDialogWithChanges() {
|
||||
const query = `TicketLogs/${route.params.id}/getChanges`;
|
||||
const response = await axios.get(query);
|
||||
|
||||
showSmsDialog('orderChanges', { changes: response.data });
|
||||
}
|
||||
|
||||
async function sendSms(body) {
|
||||
await axios.post(`Tickets/${route.params.id}/sendSms`, body);
|
||||
quasar.notify({
|
||||
message: 'Notification sent',
|
||||
type: 'positive',
|
||||
});
|
||||
}
|
||||
|
||||
function confirmDelete() {
|
||||
|
|
@ -70,12 +104,16 @@ function confirmDelete() {
|
|||
}
|
||||
|
||||
async function remove() {
|
||||
const id = ticket.value.id;
|
||||
await axios.delete(`Claims/${id}`);
|
||||
const id = route.params.id;
|
||||
await axios.post(`Tickets/${id}/setDeleted`);
|
||||
|
||||
quasar.notify({
|
||||
message: t('globals.dataDeleted'),
|
||||
message: t('Ticket deleted'),
|
||||
type: 'positive',
|
||||
icon: 'check',
|
||||
});
|
||||
quasar.notify({
|
||||
message: t('You can undo this action within the first hour'),
|
||||
icon: 'info',
|
||||
});
|
||||
await router.push({ name: 'TicketList' });
|
||||
}
|
||||
|
|
@ -83,42 +121,27 @@ async function remove() {
|
|||
<template>
|
||||
<q-item v-ripple clickable>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="summarize" />
|
||||
<q-icon name="picture_as_pdf" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('Open Delivery Note...') }}</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="keyboard_arrow_right" />
|
||||
</q-item-section>
|
||||
<q-menu anchor="top end" self="top start" auto-close>
|
||||
<q-menu anchor="top end" self="top start" auto-close bordered>
|
||||
<q-list>
|
||||
<q-item @click="openDeliveryNote()" v-ripple clickable>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="picture_as_pdf" />
|
||||
</q-item-section>
|
||||
<q-item @click="openDeliveryNote('deliveryNote')" v-ripple clickable>
|
||||
<q-item-section>{{ t('With prices') }}</q-item-section>
|
||||
</q-item>
|
||||
<q-item @click="openDeliveryNote('withoutPrices')" v-ripple clickable>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="picture_as_pdf" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('Without Prices') }}</q-item-section>
|
||||
<q-item-section>{{ t('Without prices') }}</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
@click="openDeliveryNote('deliveryNote', 'csv')"
|
||||
v-ripple
|
||||
clickable
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="picture_as_pdf" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('As CSV') }}</q-item-section>
|
||||
</q-item>
|
||||
<q-item @click="confirmPickupOrder" v-ripple clickable>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="send" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('Send Delivery Note') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-item>
|
||||
|
|
@ -132,11 +155,11 @@ async function remove() {
|
|||
</q-item-section>
|
||||
<q-menu anchor="top end" self="top start" auto-close>
|
||||
<q-list>
|
||||
<q-item @click="sendDeliveryNote()" v-ripple clickable>
|
||||
<q-item @click="sendDeliveryNote('deliveryNote')" v-ripple clickable>
|
||||
<q-item-section>{{ t('With prices') }}</q-item-section>
|
||||
</q-item>
|
||||
<q-item @click="sendDeliveryNote('withoutPrices')" v-ripple clickable>
|
||||
<q-item-section>{{ t('Without Prices') }}</q-item-section>
|
||||
<q-item-section>{{ t('Without prices') }}</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
@click="sendDeliveryNote('deliveryNote', 'csv')"
|
||||
|
|
@ -164,48 +187,46 @@ async function remove() {
|
|||
</q-item-section>
|
||||
<q-menu anchor="top end" self="top start" auto-close>
|
||||
<q-list>
|
||||
<q-item @click="sendSms()" v-ripple clickable>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="picture_as_pdf" />
|
||||
</q-item-section>
|
||||
<q-item @click="showSmsDialog('pendingPayment')" v-ripple clickable>
|
||||
<q-item-section>{{ t('Pending payment') }}</q-item-section>
|
||||
</q-item>
|
||||
<q-item @click="showSmsDialog('minAmount')" v-ripple clickable>
|
||||
<q-item-section>{{ t('Minimum amount') }}</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
@click="showSmsDialogWithChanges('orderChanges')"
|
||||
v-ripple
|
||||
clickable
|
||||
>
|
||||
<q-item-section>{{ t('Order changes') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item @click="confirmDelete()" v-ripple clickable>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="delete" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('Delete ticket') }}</q-item-section>
|
||||
</q-item>
|
||||
<template v-if="!ticket.isDeleted">
|
||||
<q-separator />
|
||||
<q-item @click="confirmDelete()" v-ripple clickable>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="delete" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('Delete ticket') }}</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Delivery Note: Albarán
|
||||
Open Delivery Note: Abrir albarán
|
||||
Open Delivery Note...: Abrir albarán...
|
||||
Send Delivery Note...: Enviar albarán...
|
||||
With prices: Con precios
|
||||
Without prices: Sin precios
|
||||
As CSV: Como CSV
|
||||
Open Proforma Invoice: Abrir factura proforma
|
||||
Delete ticket: Eliminar ticket
|
||||
Send SMS...: Enviar SMS
|
||||
Pending payment: Pago pendiente
|
||||
Minimum amount: Importe mínimo
|
||||
Order changes: Cambios del pedido
|
||||
Ticket deleted: Ticket eliminado
|
||||
You can undo this action within the first hour: Puedes deshacer esta acción dentro de la primera hora
|
||||
</i18n>
|
||||
<!--
|
||||
<i18n>
|
||||
{
|
||||
"en": {
|
||||
"pickupOrder": "Pickup order",
|
||||
"openPickupOrder": "Open pickup order",
|
||||
"sendPickupOrder": "Send pickup order",
|
||||
"deleteClaim": "Delete claim",
|
||||
"confirmDeletion": "Confirm deletion",
|
||||
"confirmDeletionMessage": "Are you sure you want to delete this claim?"
|
||||
},
|
||||
"es": {
|
||||
"pickupOrder": "Orden de recogida",
|
||||
"openPickupOrder": "Abrir orden de recogida",
|
||||
"sendPickupOrder": "Enviar orden de recogida",
|
||||
"deleteClaim": "Eliminar reclamación",
|
||||
"confirmDeletion": "Confirmar eliminación",
|
||||
"confirmDeletionMessage": "Seguro que quieres eliminar esta reclamación?"
|
||||
}
|
||||
}
|
||||
</i18n> -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue