feat: Email forwarding
This commit is contained in:
iamsivin
+94
@@ -0,0 +1,94 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { Letter } from 'vue-letter';
|
||||
import { allowedCssProperties } from 'lettersanitizer';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import EmailMeta from 'dashboard/components-next/message/bubbles/Email/EmailMeta.vue';
|
||||
|
||||
// import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
|
||||
import Editor from 'dashboard/components-next/Editor/Editor.vue';
|
||||
|
||||
defineProps({
|
||||
hasQuotedMessage: { type: Boolean, default: false },
|
||||
fullHtml: { type: String, default: '' },
|
||||
unquotedHtml: { type: String, default: '' },
|
||||
textToShow: { type: String, default: '' },
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const modelValue = defineModel({
|
||||
type: String,
|
||||
default: '',
|
||||
});
|
||||
|
||||
const showQuotedMessage = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-1 h-full">
|
||||
<Editor
|
||||
v-model="modelValue"
|
||||
:placeholder="t('FORWARD_MESSAGE_FORM.EMAIL_EDITOR_PLACEHOLDER')"
|
||||
class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[200px] [&_.ProseMirror-woot-style]:!min-h-fit"
|
||||
enable-variables
|
||||
:show-character-count="false"
|
||||
/>
|
||||
<div class="px-4 pb-4 flex flex-col gap-2">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div
|
||||
class="h-px w-20 bg-n-alpha-2 border-t border-dashed border-n-slate-12"
|
||||
/>
|
||||
<span class="font-semibold text-sm text-n-slate-12">
|
||||
{{ t('FORWARD_MESSAGE_FORM.FORWARDED_MESSAGE') }}
|
||||
</span>
|
||||
<div
|
||||
class="h-px w-20 bg-n-alpha-2 border-t border-dashed border-n-slate-12"
|
||||
/>
|
||||
</div>
|
||||
<EmailMeta />
|
||||
</div>
|
||||
<div class="px-4 pb-4">
|
||||
<Letter
|
||||
v-if="showQuotedMessage"
|
||||
class-name="prose prose-bubble !max-w-none letter-render"
|
||||
:allowed-css-properties="[
|
||||
...allowedCssProperties,
|
||||
'transform',
|
||||
'transform-origin',
|
||||
]"
|
||||
:html="fullHtml"
|
||||
:text="textToShow"
|
||||
/>
|
||||
<Letter
|
||||
v-else
|
||||
class-name="prose prose-bubble !max-w-none letter-render"
|
||||
:html="unquotedHtml"
|
||||
:allowed-css-properties="[
|
||||
...allowedCssProperties,
|
||||
'transform',
|
||||
'transform-origin',
|
||||
]"
|
||||
:text="textToShow"
|
||||
/>
|
||||
<button
|
||||
v-if="hasQuotedMessage"
|
||||
class="text-n-slate-11 px-1 leading-none text-sm bg-n-alpha-black2 text-center flex items-center gap-1 mt-2"
|
||||
@click="showQuotedMessage = !showQuotedMessage"
|
||||
>
|
||||
<template v-if="showQuotedMessage">
|
||||
{{ t('FORWARD_MESSAGE_FORM.HIDE_QUOTED_TEXT') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ t('FORWARD_MESSAGE_FORM.SHOW_QUOTED_TEXT') }}
|
||||
</template>
|
||||
<Icon
|
||||
:icon="
|
||||
showQuotedMessage ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'
|
||||
"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
+187
@@ -0,0 +1,187 @@
|
||||
<script setup>
|
||||
import { ref, computed, reactive } from 'vue';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { required } from '@vuelidate/validators';
|
||||
import { buildContactableInboxesList } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';
|
||||
import {
|
||||
appendSignature,
|
||||
removeSignature,
|
||||
} from 'dashboard/helper/editorHelper';
|
||||
|
||||
import ContactSelector from 'dashboard/components-next/NewConversation/components/ContactSelector.vue';
|
||||
import ActionButtons from 'dashboard/components-next/NewConversation/components/ActionButtons.vue';
|
||||
import EmailMessageEditor from './EmailMessageEditor.vue';
|
||||
|
||||
const props = defineProps({
|
||||
forwardType: { type: String, default: 'email' }, // eslint-disable-line vue/no-unused-properties
|
||||
contacts: { type: Array, default: () => [] },
|
||||
selectedContact: { type: Object, default: null },
|
||||
isLoading: { type: Boolean, default: false },
|
||||
isCreatingContact: { type: Boolean, default: false },
|
||||
fromEmail: { type: String, default: null },
|
||||
messageSignature: { type: String, default: '' },
|
||||
fullHtml: { type: String, default: '' },
|
||||
unquotedHtml: { type: String, default: '' },
|
||||
textToShow: { type: String, default: '' },
|
||||
hasQuotedMessage: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
'searchContacts',
|
||||
'updateSelectedContact',
|
||||
'clearSelectedContact',
|
||||
'discard',
|
||||
'forwardMessage',
|
||||
]);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const state = reactive({
|
||||
message: '',
|
||||
attachedFiles: [],
|
||||
});
|
||||
|
||||
const showContactsDropdown = ref(false);
|
||||
|
||||
const contactableInboxesList = computed(() => {
|
||||
return buildContactableInboxesList(props.selectedContact?.contactInboxes);
|
||||
});
|
||||
|
||||
const validationRules = computed(() => ({
|
||||
selectedContact: { required },
|
||||
}));
|
||||
|
||||
const v$ = useVuelidate(validationRules, {
|
||||
selectedContact: computed(() => props.selectedContact),
|
||||
});
|
||||
|
||||
const validationStates = computed(() => ({
|
||||
isContactInvalid:
|
||||
v$.value.selectedContact.$dirty && v$.value.selectedContact.$invalid,
|
||||
}));
|
||||
|
||||
const handleContactSearch = value => {
|
||||
showContactsDropdown.value = true;
|
||||
emit('searchContacts', {
|
||||
keys: ['email'],
|
||||
query: value,
|
||||
});
|
||||
};
|
||||
|
||||
const setSelectedContact = async ({ value, action, ...rest }) => {
|
||||
v$.value.$reset();
|
||||
emit('updateSelectedContact', { value, action, ...rest });
|
||||
showContactsDropdown.value = false;
|
||||
};
|
||||
|
||||
const clearSelectedContact = () => {
|
||||
emit('clearSelectedContact');
|
||||
// state.attachedFiles = [];
|
||||
};
|
||||
|
||||
const handleDropdownUpdate = (type, value) => {
|
||||
showContactsDropdown.value = value;
|
||||
};
|
||||
|
||||
const onClickInsertEmoji = emoji => {
|
||||
state.message += emoji;
|
||||
};
|
||||
|
||||
const handleAddSignature = signature => {
|
||||
state.message = appendSignature(state.message, signature);
|
||||
};
|
||||
|
||||
const handleRemoveSignature = signature => {
|
||||
state.message = removeSignature(state.message, signature);
|
||||
};
|
||||
|
||||
const handleAttachFile = files => {
|
||||
state.attachedFiles = files;
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
Object.assign(state, {
|
||||
message: '',
|
||||
attachedFiles: [],
|
||||
});
|
||||
v$.value.$reset();
|
||||
};
|
||||
|
||||
const handleSendMessage = async () => {
|
||||
const isValid = await v$.value.$validate();
|
||||
if (!isValid) return;
|
||||
|
||||
try {
|
||||
const success = await emit('forwardMessage', { state });
|
||||
if (success) {
|
||||
clearForm();
|
||||
}
|
||||
} catch (error) {
|
||||
// Form will not be cleared if conversation creation fails
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="w-[42rem] max-h-[31.25rem] overflow-y-scroll divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
|
||||
>
|
||||
<div class="relative flex-1 px-4 py-3 overflow-y-visible bg-n-alpha-3">
|
||||
<div class="flex items-baseline w-full gap-3 min-h-7">
|
||||
<label class="text-sm font-medium text-n-slate-11 whitespace-nowrap">
|
||||
{{ t('FORWARD_MESSAGE_FORM.FROM') }}
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7 min-w-0"
|
||||
>
|
||||
<span class="text-sm truncate text-n-slate-12">
|
||||
{{ fromEmail }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ContactSelector
|
||||
class="bg-n-alpha-3"
|
||||
:contacts="contacts"
|
||||
:selected-contact="selectedContact"
|
||||
:show-contacts-dropdown="showContactsDropdown"
|
||||
:is-loading="isLoading"
|
||||
:is-creating-contact="isCreatingContact"
|
||||
:contactable-inboxes-list="contactableInboxesList"
|
||||
:show-inboxes-dropdown="false"
|
||||
:has-errors="validationStates.isContactInvalid"
|
||||
@search-contacts="handleContactSearch"
|
||||
@set-selected-contact="setSelectedContact"
|
||||
@clear-selected-contact="clearSelectedContact"
|
||||
@update-dropdown="handleDropdownUpdate"
|
||||
/>
|
||||
<EmailMessageEditor
|
||||
v-model="state.message"
|
||||
class="bg-n-alpha-3"
|
||||
:has-quoted-message="hasQuotedMessage"
|
||||
:full-html="fullHtml"
|
||||
:unquoted-html="unquotedHtml"
|
||||
:text-to-show="textToShow"
|
||||
/>
|
||||
<ActionButtons
|
||||
class="bg-n-alpha-3 sticky bottom-0 backdrop-blur-[100px]"
|
||||
:attached-files="state.attachedFiles"
|
||||
is-email-or-web-widget-inbox
|
||||
channel-type="Channel::Email"
|
||||
:is-loading="false"
|
||||
:disable-send-button="false"
|
||||
has-selected-inbox
|
||||
:has-no-inbox="false"
|
||||
:is-dropdown-active="showContactsDropdown"
|
||||
:message-signature="messageSignature"
|
||||
@insert-emoji="onClickInsertEmoji"
|
||||
@add-signature="handleAddSignature"
|
||||
@remove-signature="handleRemoveSignature"
|
||||
@attach-file="handleAttachFile"
|
||||
@discard="$emit('discard')"
|
||||
@send-message="handleSendMessage"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user