feat: send one SMS from a person or lead and keep the dashboard inside the phone frame
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,287 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { MESSAGE_AUTOMATION_FIELDS, MESSAGE_AUTOMATION_SMS_SEGMENT } from '@mento/shared';
|
||||
import { api } from '@/lib/api';
|
||||
import { formatJalaliDay, toFaDigits } from '@/lib/jalali';
|
||||
import { UiButton, UiModal } from '@/components/ui';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
open: boolean;
|
||||
endpoint: string;
|
||||
name: string;
|
||||
phone: string;
|
||||
recordTitle?: string;
|
||||
company?: string;
|
||||
title?: string;
|
||||
defaultText?: string;
|
||||
nest?: boolean;
|
||||
}>(),
|
||||
{
|
||||
recordTitle: '',
|
||||
company: '',
|
||||
title: 'ارسال پیامک',
|
||||
defaultText: 'سلام {نام} عزیز',
|
||||
nest: false,
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
sent: [];
|
||||
}>();
|
||||
|
||||
const text = ref('');
|
||||
const busy = ref(false);
|
||||
const error = ref('');
|
||||
const done = ref('');
|
||||
const fieldsOpen = ref(false);
|
||||
const bodyEl = ref<HTMLTextAreaElement | null>(null);
|
||||
|
||||
const preview = computed(() => fill(text.value));
|
||||
const count = computed(() => text.value.length);
|
||||
const parts = computed(() => (count.value === 0 ? 0 : Math.ceil(count.value / MESSAGE_AUTOMATION_SMS_SEGMENT)));
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(open) => {
|
||||
if (!open) return;
|
||||
text.value = props.defaultText;
|
||||
error.value = '';
|
||||
done.value = '';
|
||||
fieldsOpen.value = false;
|
||||
busy.value = false;
|
||||
},
|
||||
);
|
||||
|
||||
function fill(source: string) {
|
||||
const map: Record<string, string> = {
|
||||
نام: props.name,
|
||||
name: props.name,
|
||||
شماره: props.phone,
|
||||
phone: props.phone,
|
||||
تاریخ: formatJalaliDay(new Date()),
|
||||
date: formatJalaliDay(new Date()),
|
||||
عنوان: props.recordTitle || props.name,
|
||||
title: props.recordTitle || props.name,
|
||||
شرکت: props.company,
|
||||
company: props.company,
|
||||
};
|
||||
return source.replace(/\{([^}]+)\}/g, (full, key: string) => {
|
||||
const next = map[key.trim()];
|
||||
return next === undefined ? full : next;
|
||||
});
|
||||
}
|
||||
|
||||
function insertField(token: string) {
|
||||
const el = bodyEl.value;
|
||||
const current = text.value;
|
||||
if (!el) {
|
||||
text.value = `${current}${token}`;
|
||||
} else {
|
||||
const start = el.selectionStart ?? current.length;
|
||||
const end = el.selectionEnd ?? start;
|
||||
text.value = `${current.slice(0, start)}${token}${current.slice(end)}`;
|
||||
const caret = start + token.length;
|
||||
requestAnimationFrame(() => {
|
||||
el.focus();
|
||||
el.setSelectionRange(caret, caret);
|
||||
});
|
||||
}
|
||||
fieldsOpen.value = false;
|
||||
}
|
||||
|
||||
function apiMessage(e: unknown, fallback: string) {
|
||||
if (!axios.isAxiosError(e)) return fallback;
|
||||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||||
if (Array.isArray(msg)) return msg.join('، ') || fallback;
|
||||
if (typeof msg === 'string' && msg.trim()) return msg;
|
||||
return fallback;
|
||||
}
|
||||
|
||||
async function send() {
|
||||
if (!props.endpoint || busy.value || done.value) return;
|
||||
busy.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
await api.post(props.endpoint, { text: text.value });
|
||||
done.value = 'پیامک ارسال شد.';
|
||||
emit('sent');
|
||||
} catch (e) {
|
||||
error.value = apiMessage(e, 'ارسال پیامک ناموفق بود.');
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UiModal :open="open" :nest="nest" :title="title" @close="emit('close')">
|
||||
<p class="who">
|
||||
برای {{ name || 'این شخص' }}
|
||||
<span v-if="phone" dir="ltr">{{ toFaDigits(phone) }}</span>
|
||||
<span v-else class="warn">شماره موبایل ندارد</span>
|
||||
</p>
|
||||
|
||||
<div class="tools">
|
||||
<button type="button" class="pill" @click="fieldsOpen = !fieldsOpen">فیلدهای پویا</button>
|
||||
<div v-if="fieldsOpen" class="fields">
|
||||
<button
|
||||
v-for="item in MESSAGE_AUTOMATION_FIELDS"
|
||||
:key="item.token"
|
||||
type="button"
|
||||
@click="insertField(item.token)"
|
||||
>
|
||||
<code>{{ item.token }}</code>
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea ref="bodyEl" v-model="text" rows="4" maxlength="500" placeholder="سلام {نام} عزیز" />
|
||||
<p class="count">{{ toFaDigits(count) }} نویسه · {{ toFaDigits(parts) }} پیامک</p>
|
||||
|
||||
<div class="preview">
|
||||
<span>پیشنمایش</span>
|
||||
<p>{{ preview || 'متن پیام هنوز نوشته نشده است.' }}</p>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="err">{{ error }}</p>
|
||||
<p v-if="done" class="ok">{{ done }}</p>
|
||||
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" :disabled="busy" @click="emit('close')">بستن</UiButton>
|
||||
<UiButton
|
||||
variant="primary"
|
||||
:loading="busy"
|
||||
:disabled="busy || !!done || !phone || text.trim().length < 2"
|
||||
@click="send"
|
||||
>
|
||||
ارسال پیامک
|
||||
</UiButton>
|
||||
</template>
|
||||
</UiModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.who {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin: 0 0 0.7rem;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.who span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #64748b;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.warn {
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.tools {
|
||||
position: relative;
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.pill,
|
||||
.fields button {
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 28%, #fff);
|
||||
background: var(--accent-subtle);
|
||||
color: var(--accent-deep);
|
||||
border-radius: 999px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 0.28rem 0.7rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.fields {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: calc(100% + 0.3rem);
|
||||
inset-inline: 0;
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
max-width: 100%;
|
||||
padding: 0.4rem;
|
||||
background: #fff;
|
||||
border: 1px solid #e7eef2;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.fields button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.6rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.35rem 0.5rem;
|
||||
background: #fff;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.fields code {
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 0.7rem 0.8rem;
|
||||
font: inherit;
|
||||
resize: vertical;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.count {
|
||||
margin: 0.35rem 0 0;
|
||||
color: #94a3b8;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.preview {
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.7rem 0.8rem;
|
||||
border-radius: 12px;
|
||||
background: var(--accent-subtle);
|
||||
}
|
||||
|
||||
.preview span {
|
||||
color: var(--accent-deep);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.preview p {
|
||||
margin: 0.3rem 0 0;
|
||||
color: #134e4a;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.err,
|
||||
.ok {
|
||||
margin: 0.55rem 0 0;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.err {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.ok {
|
||||
color: #16a34a;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user