fix: added lead detail section on right sidebar with phone call button and more
now agent can call the customer using that button
This commit is contained in:
Shariq Ansari
parent
e31b6cdf72
commit
d9bf3388fe
@ -333,8 +333,7 @@ function handleDisconnectedIncomingCall() {
|
||||
counterUp.value.stop()
|
||||
}
|
||||
|
||||
async function makeOutgoingCall(close) {
|
||||
close()
|
||||
async function makeOutgoingCall() {
|
||||
if (device) {
|
||||
log.value = `Attempting to call +917666980887 ...`
|
||||
|
||||
@ -428,7 +427,7 @@ watch(
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
provide('showPhoneCall', showPhoneCall)
|
||||
provide('makeOutgoingCall', makeOutgoingCall)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,18 +1,12 @@
|
||||
<template>
|
||||
<div class="max-w-[81.7%] pl-16 p-4 pt-2">
|
||||
<button
|
||||
class="flex gap-2 w-full items-center rounded-lg p-1 bg-gray-100 hover:bg-gray-200"
|
||||
class="flex gap-2 w-full items-center rounded-lg p-2 bg-gray-100 hover:bg-gray-200"
|
||||
@click="showCommunicationBox = true"
|
||||
v-show="!showCommunicationBox"
|
||||
>
|
||||
<UserAvatar class="m-1" :user="getUser().name" size="sm" />
|
||||
<div class="flex-1 text-left text-base text-gray-600">Add a reply...</div>
|
||||
<Tooltip text="Make a call..." class="m-1">
|
||||
<PhoneIcon
|
||||
class="bg-gray-900 rounded-full text-white fill-white p-[3px]"
|
||||
@click.stop="showPhoneCall = true"
|
||||
/>
|
||||
</Tooltip>
|
||||
<UserAvatar :user="getUser().name" size="sm" />
|
||||
<div class="text-base text-gray-600">Add a reply...</div>
|
||||
</button>
|
||||
<div
|
||||
v-show="showCommunicationBox"
|
||||
@ -55,14 +49,12 @@ import EmailEditor from '@/components/EmailEditor.vue'
|
||||
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import { Tooltip, call, Button } from 'frappe-ui'
|
||||
import { ref, watch, computed, defineModel, inject } from 'vue'
|
||||
import { ref, watch, computed, defineModel } from 'vue'
|
||||
|
||||
const modelValue = defineModel()
|
||||
|
||||
const { getUser } = usersStore()
|
||||
|
||||
let showPhoneCall = inject('showPhoneCall')
|
||||
|
||||
const showCommunicationBox = ref(false)
|
||||
const newEmail = ref('')
|
||||
const newEmailEditor = ref(null)
|
||||
|
||||
@ -69,123 +69,148 @@
|
||||
<Activities :title="tab.activityTitle" :activities="tab.content" />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
<CommunicationArea v-if="[0, 1].includes(selectedIndex)" v-model="lead" />
|
||||
<CommunicationArea
|
||||
v-if="[0, 1].includes(selectedIndex)"
|
||||
v-model="lead"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col justify-between border-l w-[390px] overflow-hidden"
|
||||
>
|
||||
<div class="flex flex-col gap-6.5 p-3 overflow-y-auto">
|
||||
<div
|
||||
v-for="section in detailSections"
|
||||
:key="section.label"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
|
||||
<div
|
||||
class="flex items-center gap-2 text-base font-semibold leading-5 pl-2 pr-3 cursor-pointer max-w-fit"
|
||||
@click="toggle()"
|
||||
>
|
||||
<FeatherIcon
|
||||
name="chevron-right"
|
||||
class="h-4 text-gray-600 transition-all duration-300 ease-in-out"
|
||||
:class="{ 'rotate-90': opened }"
|
||||
/>
|
||||
{{ section.label }}
|
||||
</div>
|
||||
<transition
|
||||
enter-active-class="duration-300 ease-in"
|
||||
leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
|
||||
enter-to-class="max-h-[200px] overflow-hidden"
|
||||
leave-from-class="max-h-[200px] overflow-hidden"
|
||||
enter-from-class="max-h-0 overflow-hidden"
|
||||
leave-to-class="max-h-0 overflow-hidden"
|
||||
>
|
||||
<div v-if="opened" class="flex flex-col gap-3">
|
||||
<div
|
||||
v-for="field in section.fields"
|
||||
:key="field.label"
|
||||
class="flex items-center px-3 gap-2 text-base leading-5 first:mt-4.5"
|
||||
>
|
||||
<div class="text-gray-600 w-[106px]">{{ field.label }}</div>
|
||||
<div class="flex-1 w-full">
|
||||
<FormControl
|
||||
v-if="field.type === 'select'"
|
||||
type="select"
|
||||
:options="field.options"
|
||||
v-model="lead.data[field.name]"
|
||||
>
|
||||
<template #prefix>
|
||||
<IndicatorIcon
|
||||
:class="indicatorColor[lead.data[field.name]]"
|
||||
/>
|
||||
</template>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'email'"
|
||||
type="email"
|
||||
v-model="lead.data[field.name]"
|
||||
/>
|
||||
<Autocomplete
|
||||
v-else-if="field.type === 'link'"
|
||||
:options="activeAgents"
|
||||
:value="getUser(lead.data[field.name]).full_name"
|
||||
@change="
|
||||
(option) => (lead.data[field.name] = option.email)
|
||||
"
|
||||
placeholder="Lead owner"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserAvatar
|
||||
class="mr-2"
|
||||
:user="lead.data[field.name]"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
<template #item-prefix="{ option }">
|
||||
<UserAvatar
|
||||
class="mr-2"
|
||||
:user="option.email"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
</Autocomplete>
|
||||
<Dropdown
|
||||
v-else-if="field.type === 'dropdown'"
|
||||
:options="statusDropdownOptions"
|
||||
class="w-full flex-1"
|
||||
>
|
||||
<template #default="{ open }">
|
||||
<Button
|
||||
:label="lead.data[field.name]"
|
||||
class="justify-between w-full"
|
||||
>
|
||||
<template #prefix>
|
||||
<IndicatorIcon
|
||||
:class="indicatorColor[lead.data[field.name]]"
|
||||
/>
|
||||
</template>
|
||||
<template #default>{{
|
||||
lead.data[field.name]
|
||||
}}</template>
|
||||
<template #suffix>
|
||||
<FeatherIcon
|
||||
:name="open ? 'chevron-up' : 'chevron-down'"
|
||||
class="h-4"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
<FormControl
|
||||
v-else
|
||||
type="text"
|
||||
v-model="lead.data[field.name]"
|
||||
/>
|
||||
<div class="flex flex-col justify-between border-l w-[360px]">
|
||||
<div
|
||||
class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
|
||||
>
|
||||
<Avatar
|
||||
size="3xl"
|
||||
:label="lead.data.first_name"
|
||||
:image="lead.data.image"
|
||||
/>
|
||||
<div class="font-medium text-2xl">{{ lead.data.lead_name }}</div>
|
||||
<div class="flex gap-3">
|
||||
<Button class="rounded-full h-8 w-8" @click="makeCall">
|
||||
<PhoneIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button class="rounded-full h-8 w-8">
|
||||
<EmailIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button icon="message-square" class="rounded-full h-8 w-8" />
|
||||
<Button icon="more-horizontal" class="rounded-full h-8 w-8" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between overflow-hidden">
|
||||
<div class="flex flex-col gap-6.5 p-3 overflow-y-auto">
|
||||
<div
|
||||
v-for="section in detailSections"
|
||||
:key="section.label"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
|
||||
<div
|
||||
class="flex items-center gap-2 text-base font-semibold leading-5 pl-2 pr-3 cursor-pointer max-w-fit"
|
||||
@click="toggle()"
|
||||
>
|
||||
<FeatherIcon
|
||||
name="chevron-right"
|
||||
class="h-4 text-gray-600 transition-all duration-300 ease-in-out"
|
||||
:class="{ 'rotate-90': opened }"
|
||||
/>
|
||||
{{ section.label }}
|
||||
</div>
|
||||
<transition
|
||||
enter-active-class="duration-300 ease-in"
|
||||
leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
|
||||
enter-to-class="max-h-[200px] overflow-hidden"
|
||||
leave-from-class="max-h-[200px] overflow-hidden"
|
||||
enter-from-class="max-h-0 overflow-hidden"
|
||||
leave-to-class="max-h-0 overflow-hidden"
|
||||
>
|
||||
<div v-if="opened" class="flex flex-col gap-3">
|
||||
<div
|
||||
v-for="field in section.fields"
|
||||
:key="field.label"
|
||||
class="flex items-center px-3 gap-2 text-base leading-5 first:mt-4.5"
|
||||
>
|
||||
<div class="text-gray-600 w-[106px]">
|
||||
{{ field.label }}
|
||||
</div>
|
||||
<div class="flex-1 w-full">
|
||||
<FormControl
|
||||
v-if="field.type === 'select'"
|
||||
type="select"
|
||||
:options="field.options"
|
||||
v-model="lead.data[field.name]"
|
||||
>
|
||||
<template #prefix>
|
||||
<IndicatorIcon
|
||||
:class="indicatorColor[lead.data[field.name]]"
|
||||
/>
|
||||
</template>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'email'"
|
||||
type="email"
|
||||
v-model="lead.data[field.name]"
|
||||
/>
|
||||
<Autocomplete
|
||||
v-else-if="field.type === 'link'"
|
||||
:options="activeAgents"
|
||||
:value="getUser(lead.data[field.name]).full_name"
|
||||
@change="
|
||||
(option) => (lead.data[field.name] = option.email)
|
||||
"
|
||||
placeholder="Lead owner"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserAvatar
|
||||
class="mr-2"
|
||||
:user="lead.data[field.name]"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
<template #item-prefix="{ option }">
|
||||
<UserAvatar
|
||||
class="mr-2"
|
||||
:user="option.email"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
</Autocomplete>
|
||||
<Dropdown
|
||||
v-else-if="field.type === 'dropdown'"
|
||||
:options="statusDropdownOptions"
|
||||
class="w-full flex-1"
|
||||
>
|
||||
<template #default="{ open }">
|
||||
<Button
|
||||
:label="lead.data[field.name]"
|
||||
class="justify-between w-full"
|
||||
>
|
||||
<template #prefix>
|
||||
<IndicatorIcon
|
||||
:class="indicatorColor[lead.data[field.name]]"
|
||||
/>
|
||||
</template>
|
||||
<template #default>{{
|
||||
lead.data[field.name]
|
||||
}}</template>
|
||||
<template #suffix>
|
||||
<FeatherIcon
|
||||
:name="open ? 'chevron-up' : 'chevron-down'"
|
||||
class="h-4"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
<FormControl
|
||||
v-else
|
||||
type="text"
|
||||
v-model="lead.data[field.name]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</Toggler>
|
||||
</transition>
|
||||
</Toggler>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -217,7 +242,7 @@ import Toggler from '@/components/Toggler.vue'
|
||||
import Activities from '@/components/Activities.vue'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import CommunicationArea from '../components/CommunicationArea.vue'
|
||||
import CommunicationArea from '@/components/CommunicationArea.vue'
|
||||
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
||||
import { TransitionPresets, useTransition } from '@vueuse/core'
|
||||
import { dateFormat, timeAgo, dateTooltipFormat } from '@/utils'
|
||||
@ -230,11 +255,14 @@ import {
|
||||
FormControl,
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
Avatar,
|
||||
} from 'frappe-ui'
|
||||
import { ref, computed, h } from 'vue'
|
||||
import { ref, computed, h, inject } from 'vue'
|
||||
|
||||
const { getUser, users } = usersStore()
|
||||
|
||||
const makeCall = inject('makeOutgoingCall')
|
||||
|
||||
const props = defineProps({
|
||||
leadId: {
|
||||
type: String,
|
||||
@ -406,9 +434,14 @@ const detailSections = computed(() => {
|
||||
opened: true,
|
||||
fields: [
|
||||
{
|
||||
label: 'Name',
|
||||
label: 'First Name',
|
||||
type: 'data',
|
||||
name: 'lead_name',
|
||||
name: 'first_name',
|
||||
},
|
||||
{
|
||||
label: 'Last Name',
|
||||
type: 'data',
|
||||
name: 'last_name',
|
||||
},
|
||||
{
|
||||
label: 'Email',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user