crm/frontend/src/pages/Lead.vue

755 lines
22 KiB
Vue

<template>
<LayoutHeader v-if="lead.data">
<template #left-header>
<Breadcrumbs :items="breadcrumbs">
<template #prefix="{ item }">
<Icon v-if="item.icon" :icon="item.icon" class="mr-2 h-4" />
</template>
</Breadcrumbs>
</template>
<template #right-header>
<CustomActions
v-if="lead.data._customActions?.length"
:actions="lead.data._customActions"
/>
<CustomActions
v-if="document.actions?.length"
:actions="document.actions"
/>
<AssignTo
v-model="assignees.data"
:data="document.doc"
doctype="CRM Lead"
/>
<Dropdown
v-if="document.doc"
:options="
statusOptions(
'lead',
document,
lead.data._customStatuses,
triggerOnChange,
)
"
>
<template #default="{ open }">
<Button :label="document.doc.status">
<template #prefix>
<IndicatorIcon
:class="getLeadStatus(document.doc.status).color"
/>
</template>
<template #suffix>
<FeatherIcon
:name="open ? 'chevron-up' : 'chevron-down'"
class="h-4"
/>
</template>
</Button>
</template>
</Dropdown>
<Button
:label="__('Convert to Deal')"
variant="solid"
@click="showConvertToDealModal = true"
/>
</template>
</LayoutHeader>
<div v-if="lead?.data" class="flex h-full overflow-hidden">
<Tabs as="div" v-model="tabIndex" :tabs="tabs">
<template #tab-panel>
<Activities
ref="activities"
doctype="CRM Lead"
:tabs="tabs"
v-model:reload="reload"
v-model:tabIndex="tabIndex"
v-model="lead"
@afterSave="reloadAssignees"
/>
</template>
</Tabs>
<Resizer class="flex flex-col justify-between border-l" side="right">
<div
class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-medium text-ink-gray-9"
@click="copyToClipboard(lead.data.name)"
>
{{ __(lead.data.name) }}
</div>
<FileUploader
@success="(file) => updateField('image', file.file_url)"
:validateFile="validateIsImageFile"
>
<template #default="{ openFileSelector, error }">
<div class="flex items-center justify-start gap-5 border-b p-5">
<div class="group relative size-12">
<Avatar
size="3xl"
class="size-12"
:label="title"
:image="lead.data.image"
/>
<component
:is="lead.data.image ? Dropdown : 'div'"
v-bind="
lead.data.image
? {
options: [
{
icon: 'upload',
label: lead.data.image
? __('Change image')
: __('Upload image'),
onClick: openFileSelector,
},
{
icon: 'trash-2',
label: __('Remove image'),
onClick: () => updateField('image', ''),
},
],
}
: { onClick: openFileSelector }
"
class="!absolute bottom-0 left-0 right-0"
>
<div
class="z-1 absolute bottom-0.5 left-0 right-0.5 flex h-9 cursor-pointer items-center justify-center rounded-b-full bg-black bg-opacity-40 pt-3 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
style="
-webkit-clip-path: inset(12px 0 0 0);
clip-path: inset(12px 0 0 0);
"
>
<CameraIcon class="size-4 cursor-pointer text-white" />
</div>
</component>
</div>
<div class="flex flex-col gap-2.5 truncate">
<Tooltip :text="lead.data.lead_name || __('Set first name')">
<div class="truncate text-2xl font-medium text-ink-gray-9">
{{ title }}
</div>
</Tooltip>
<div class="flex gap-1.5">
<Tooltip v-if="callEnabled" :text="__('Make a call')">
<div>
<Button
@click="
() =>
lead.data.mobile_no
? makeCall(lead.data.mobile_no)
: toast.error(__('No phone number set'))
"
>
<template #icon>
<PhoneIcon />
</template>
</Button>
</div>
</Tooltip>
<Tooltip :text="__('Send an email')">
<div>
<Button
@click="
lead.data.email
? openEmailBox()
: toast.error(__('No email set'))
"
>
<template #icon>
<Email2Icon />
</template>
</Button>
</div>
</Tooltip>
<Tooltip :text="__('Go to website')">
<div>
<Button
@click="
lead.data.website
? openWebsite(lead.data.website)
: toast.error(__('No website set'))
"
>
<template #icon>
<LinkIcon />
</template>
</Button>
</div>
</Tooltip>
<Tooltip :text="__('Attach a file')">
<div>
<Button @click="showFilesUploader = true">
<template #icon>
<AttachmentIcon />
</template>
</Button>
</div>
</Tooltip>
</div>
<ErrorMessage :message="__(error)" />
</div>
</div>
</template>
</FileUploader>
<SLASection
v-if="lead.data.sla_status"
v-model="lead.data"
@updateField="updateField"
/>
<div
v-if="sections.data"
class="flex flex-1 flex-col justify-between overflow-hidden"
>
<SidePanelLayout
:sections="sections.data"
doctype="CRM Lead"
:docname="lead.data.name"
@reload="sections.reload"
@afterFieldChange="reloadAssignees"
/>
</div>
</Resizer>
</div>
<ErrorPage
v-else-if="errorTitle"
:errorTitle="errorTitle"
:errorMessage="errorMessage"
/>
<Dialog
v-model="showConvertToDealModal"
:options="{
size: 'xl',
actions: [
{
label: __('Convert'),
variant: 'solid',
onClick: convertToDeal,
},
],
}"
>
<template #body-header>
<div class="mb-6 flex items-center justify-between">
<div>
<h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
{{ __('Convert to Deal') }}
</h3>
</div>
<div class="flex items-center gap-1">
<Button
v-if="isManager() && !isMobileView"
variant="ghost"
class="w-7"
@click="openQuickEntryModal"
>
<template #icon>
<EditIcon class="h-4 w-4" />
</template>
</Button>
<Button
variant="ghost"
class="w-7"
@click="showConvertToDealModal = false"
>
<template #icon>
<FeatherIcon name="x" class="h-4 w-4" />
</template>
</Button>
</div>
</div>
</template>
<template #body-content>
<div class="mb-4 flex items-center gap-2 text-ink-gray-5">
<OrganizationsIcon class="h-4 w-4" />
<label class="block text-base">{{ __('Organization') }}</label>
</div>
<div class="ml-6 text-ink-gray-9">
<div class="flex items-center justify-between text-base">
<div>{{ __('Choose Existing') }}</div>
<Switch v-model="existingOrganizationChecked" />
</div>
<Link
v-if="existingOrganizationChecked"
class="form-control mt-2.5"
size="md"
:value="existingOrganization"
doctype="CRM Organization"
@change="(data) => (existingOrganization = data)"
/>
<div v-else class="mt-2.5 text-base">
{{
__(
'New organization will be created based on the data in details section',
)
}}
</div>
</div>
<div class="mb-4 mt-6 flex items-center gap-2 text-ink-gray-5">
<ContactsIcon class="h-4 w-4" />
<label class="block text-base">{{ __('Contact') }}</label>
</div>
<div class="ml-6 text-ink-gray-9">
<div class="flex items-center justify-between text-base">
<div>{{ __('Choose Existing') }}</div>
<Switch v-model="existingContactChecked" />
</div>
<Link
v-if="existingContactChecked"
class="form-control mt-2.5"
size="md"
:value="existingContact"
doctype="Contact"
@change="(data) => (existingContact = data)"
/>
<div v-else class="mt-2.5 text-base">
{{ __("New contact will be created based on the person's details") }}
</div>
</div>
<div v-if="dealTabs.data?.length" class="h-px w-full border-t my-6" />
<FieldLayout
v-if="dealTabs.data?.length"
:tabs="dealTabs.data"
:data="deal"
doctype="CRM Deal"
/>
</template>
</Dialog>
<FilesUploader
v-if="lead.data?.name"
v-model="showFilesUploader"
doctype="CRM Lead"
:docname="lead.data.name"
@after="
() => {
activities?.all_activities?.reload()
changeTabTo('attachments')
}
"
/>
<DeleteLinkedDocModal
v-if="showDeleteLinkedDocModal"
v-model="showDeleteLinkedDocModal"
:doctype="'CRM Lead'"
:docname="props.leadId"
name="Leads"
/>
</template>
<script setup>
import ErrorPage from '@/components/ErrorPage.vue'
import Icon from '@/components/Icon.vue'
import Resizer from '@/components/Resizer.vue'
import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
import EmailIcon from '@/components/Icons/EmailIcon.vue'
import Email2Icon from '@/components/Icons/Email2Icon.vue'
import CommentIcon from '@/components/Icons/CommentIcon.vue'
import DetailsIcon from '@/components/Icons/DetailsIcon.vue'
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import TaskIcon from '@/components/Icons/TaskIcon.vue'
import NoteIcon from '@/components/Icons/NoteIcon.vue'
import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
import CameraIcon from '@/components/Icons/CameraIcon.vue'
import LinkIcon from '@/components/Icons/LinkIcon.vue'
import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
import EditIcon from '@/components/Icons/EditIcon.vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
import Activities from '@/components/Activities/Activities.vue'
import AssignTo from '@/components/AssignTo.vue'
import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
import Link from '@/components/Controls/Link.vue'
import SidePanelLayout from '@/components/SidePanelLayout.vue'
import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
import SLASection from '@/components/SLASection.vue'
import CustomActions from '@/components/CustomActions.vue'
import {
openWebsite,
setupCustomizations,
copyToClipboard,
validateIsImageFile,
} from '@/utils'
import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
import { getView } from '@/utils/view'
import { getSettings } from '@/stores/settings'
import { sessionStore } from '@/stores/session'
import { usersStore } from '@/stores/users'
import { globalStore } from '@/stores/global'
import { statusesStore } from '@/stores/statuses'
import { getMeta } from '@/stores/meta'
import { useDocument } from '@/data/document'
import {
whatsappEnabled,
callEnabled,
isMobileView,
} from '@/composables/settings'
import { capture } from '@/telemetry'
import {
createResource,
FileUploader,
Dropdown,
Tooltip,
Avatar,
Tabs,
Switch,
Breadcrumbs,
call,
usePageMeta,
toast,
} from 'frappe-ui'
import { useOnboarding } from 'frappe-ui/frappe'
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useActiveTabManager } from '@/composables/useActiveTabManager'
const { brand } = getSettings()
const { user } = sessionStore()
const { isManager } = usersStore()
const { $dialog, $socket, makeCall } = globalStore()
const { statusOptions, getLeadStatus, getDealStatus } = statusesStore()
const { doctypeMeta } = getMeta('CRM Lead')
const { updateOnboardingStep } = useOnboarding('frappecrm')
const route = useRoute()
const router = useRouter()
const props = defineProps({
leadId: {
type: String,
required: true,
},
})
const errorTitle = ref('')
const errorMessage = ref('')
const showDeleteLinkedDocModal = ref(false)
const lead = createResource({
url: 'crm.fcrm.doctype.crm_lead.api.get_lead',
params: { name: props.leadId },
cache: ['lead', props.leadId],
onSuccess: (data) => {
errorTitle.value = ''
errorMessage.value = ''
setupCustomizations(lead, {
doc: data,
$dialog,
$socket,
router,
toast,
updateField,
createToast: toast.create,
deleteDoc: deleteLead,
resource: { lead, sections },
call,
})
},
onError: (err) => {
if (err.messages?.[0]) {
errorTitle.value = __('Not permitted')
errorMessage.value = __(err.messages?.[0])
} else {
router.push({ name: 'Leads' })
}
},
})
onMounted(() => {
if (lead.data) return
lead.fetch()
})
const reload = ref(false)
const showFilesUploader = ref(false)
function updateLead(fieldname, value, callback) {
value = Array.isArray(fieldname) ? '' : value
if (!Array.isArray(fieldname) && validateRequired(fieldname, value)) return
createResource({
url: 'frappe.client.set_value',
params: {
doctype: 'CRM Lead',
name: props.leadId,
fieldname,
value,
},
auto: true,
onSuccess: () => {
lead.reload()
reload.value = true
toast.success(__('Lead updated successfully'))
callback?.()
},
onError: (err) => {
toast.error(err.messages?.[0] || __('Error updating lead'))
},
})
}
function validateRequired(fieldname, value) {
let meta = lead.data.fields_meta || {}
if (meta[fieldname]?.reqd && !value) {
toast.error(__('{0} is a required field', [meta[fieldname].label]))
return true
}
return false
}
const breadcrumbs = computed(() => {
let items = [{ label: __('Leads'), route: { name: 'Leads' } }]
if (route.query.view || route.query.viewType) {
let view = getView(route.query.view, route.query.viewType, 'CRM Lead')
if (view) {
items.push({
label: __(view.label),
icon: view.icon,
route: {
name: 'Leads',
params: { viewType: route.query.viewType },
query: { view: route.query.view },
},
})
}
}
items.push({
label: title.value,
route: { name: 'Lead', params: { leadId: lead.data.name } },
})
return items
})
const title = computed(() => {
let t = doctypeMeta['CRM Lead']?.title_field || 'name'
return lead.data?.[t] || props.leadId
})
usePageMeta(() => {
return {
title: title.value,
icon: brand.favicon,
}
})
const tabs = computed(() => {
let tabOptions = [
{
name: 'Activity',
label: __('Activity'),
icon: ActivityIcon,
},
{
name: 'Emails',
label: __('Emails'),
icon: EmailIcon,
},
{
name: 'Comments',
label: __('Comments'),
icon: CommentIcon,
},
{
name: 'Data',
label: __('Data'),
icon: DetailsIcon,
},
{
name: 'Calls',
label: __('Calls'),
icon: PhoneIcon,
},
{
name: 'Tasks',
label: __('Tasks'),
icon: TaskIcon,
},
{
name: 'Notes',
label: __('Notes'),
icon: NoteIcon,
},
{
name: 'Attachments',
label: __('Attachments'),
icon: AttachmentIcon,
},
{
name: 'WhatsApp',
label: __('WhatsApp'),
icon: WhatsAppIcon,
condition: () => whatsappEnabled.value,
},
]
return tabOptions.filter((tab) => (tab.condition ? tab.condition() : true))
})
const { tabIndex, changeTabTo } = useActiveTabManager(tabs, 'lastLeadTab')
watch(tabs, (value) => {
if (value && route.params.tabName) {
let index = value.findIndex(
(tab) => tab.name.toLowerCase() === route.params.tabName.toLowerCase(),
)
if (index !== -1) {
tabIndex.value = index
}
}
})
const sections = createResource({
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
cache: ['sidePanelSections', 'CRM Lead'],
params: { doctype: 'CRM Lead' },
auto: true,
})
function updateField(name, value, callback) {
updateLead(name, value, () => {
lead.data[name] = value
callback?.()
})
}
async function deleteLead(name) {
await call('frappe.client.delete', {
doctype: 'CRM Lead',
name,
})
router.push({ name: 'Leads' })
}
async function deleteLeadWithModal(name) {
showDeleteLinkedDocModal.value = true
}
// Convert to Deal
const showConvertToDealModal = ref(false)
const existingContactChecked = ref(false)
const existingOrganizationChecked = ref(false)
const existingContact = ref('')
const existingOrganization = ref('')
const { triggerConvertToDeal, triggerOnChange, assignees, document } =
useDocument('CRM Lead', props.leadId)
async function convertToDeal() {
if (existingContactChecked.value && !existingContact.value) {
toast.error(__('Please select an existing contact'))
return
}
if (existingOrganizationChecked.value && !existingOrganization.value) {
toast.error(__('Please select an existing organization'))
return
}
if (!existingContactChecked.value && existingContact.value) {
existingContact.value = ''
}
if (!existingOrganizationChecked.value && existingOrganization.value) {
existingOrganization.value = ''
}
await triggerConvertToDeal?.(
lead.data,
deal,
() => (showConvertToDealModal.value = false),
)
let _deal = await call('crm.fcrm.doctype.crm_lead.crm_lead.convert_to_deal', {
lead: lead.data.name,
deal,
existing_contact: existingContact.value,
existing_organization: existingOrganization.value,
}).catch((err) => {
toast.error(__('Error converting to deal: {0}', [err.messages?.[0]]))
})
if (_deal) {
showConvertToDealModal.value = false
existingContactChecked.value = false
existingOrganizationChecked.value = false
existingContact.value = ''
existingOrganization.value = ''
updateOnboardingStep('convert_lead_to_deal', true, false, () => {
localStorage.setItem('firstDeal' + user, _deal)
})
capture('convert_lead_to_deal')
router.push({ name: 'Deal', params: { dealId: _deal } })
}
}
const activities = ref(null)
function openEmailBox() {
let currentTab = tabs.value[tabIndex.value]
if (!['Emails', 'Comments', 'Activities'].includes(currentTab.name)) {
activities.value.changeTabTo('emails')
}
nextTick(() => (activities.value.emailBox.show = true))
}
const deal = reactive({})
const dealStatuses = computed(() => {
let statuses = statusOptions('deal')
if (!deal.status) {
deal.status = statuses[0].value
}
return statuses
})
const dealTabs = createResource({
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
cache: ['RequiredFields', 'CRM Deal'],
params: { doctype: 'CRM Deal', type: 'Required Fields' },
auto: true,
transform: (_tabs) => {
let hasFields = false
let parsedTabs = _tabs?.forEach((tab) => {
tab.sections?.forEach((section) => {
section.columns?.forEach((column) => {
column.fields?.forEach((field) => {
hasFields = true
if (field.fieldname == 'status') {
field.fieldtype = 'Select'
field.options = dealStatuses.value
field.prefix = getDealStatus(deal.status).color
}
if (field.fieldtype === 'Table') {
deal[field.fieldname] = []
}
})
})
})
})
return hasFields ? parsedTabs : []
},
})
function openQuickEntryModal() {
showQuickEntryModal.value = true
quickEntryProps.value = {
doctype: 'CRM Deal',
onlyRequired: true,
}
showConvertToDealModal.value = false
}
function reloadAssignees(data) {
if (data?.hasOwnProperty('lead_owner')) {
assignees.reload()
}
}
</script>