File: //home/arjun/projects/buyercall/buyercall/assets/vue/widgets/Inbox/components/Lead/index.vue
<template>
<div
class="card mx-3 panel-right lead_detail_worklist"
v-if="rootState.showProfileScreen && rootState.leadProfileData !== null"
>
<div class="card-body p-0">
<template v-if="!isEditMode">
<div class="heading">
<div class="heading-section">
<h4>{{ fullName }}</h4>
<div class="heading-section__date_wrapper">
<p><span>Modified</span> {{ updatedOn }}</p>
<p><span>Modified</span> {{ updatedOn }}</p>
</div>
</div>
<div class="button-section">
<b-button
@click="isEditMode = true"
variant="outline-primary"
class="edit-button"
>
<Icon icon="bx:edit-alt" style="color: #808080" />
Edit
</b-button>
<b-button
variant="outline-primary"
@click="showProfileScreen(false)"
class="close-button"
>
<Icon icon="bx:x" style="color: #808080" height="20" widith="20" />
</b-button>
</div>
</div>
<div class="option-tabs">
<div class="tabs">
<b-button-group class="d-flex w-100">
<b-button
:variant="`${selectedMode === v ? 'secondary' : 'primary'}`"
v-for="(v, index) in availableMode"
:key="index"
@click="selectedMode = v"
:class="`button-tab ${
selectedMode === v ? 'active' : ''
} message-action__tab_button`"
>
<span>{{ v }}</span>
</b-button>
</b-button-group>
</div>
</div>
<template v-if="selectedMode === 'Details'">
<div class="details">
<div class="meta_detail_wrapper">
<div class="meta-details">
<div
class="meta-detail-item"
v-for="(v, index) in leadMetaOptions"
:key="index"
>
<div class="heading_meta_item">{{ v.label }}</div>
<div class="body_meta_item">
<div :class="`progress ${v.color}`">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
</div>
<div class="progress_data">
<h3>{{ v.percentage }}%</h3>
<p>{{ v.subLabel }}</p>
</div>
</div>
</div>
</div>
<div class="lead_progress_bar">
<ul>
<li
:class="
selectedeLeadDetails &&
['lead', 'prospect', 'customer'].includes(
selectedeLeadDetails.leadDetails.primaryTag
)
? 'active'
: ''
"
>
<div class="icon-section">
<div class="icons">
<i class="bx bx-check"></i>
</div>
<div class="content">Customer</div>
</div>
</li>
<li
:class="
selectedeLeadDetails &&
['lead', 'prospect'].includes(
selectedeLeadDetails.leadDetails.primaryTag
)
? 'active'
: ''
"
>
<div class="icon-section">
<div class="icons">
<i class="bx bx-check"></i>
</div>
<div class="content">Lead</div>
</div>
</li>
<li
:class="
selectedeLeadDetails &&
['prospect'].includes(selectedeLeadDetails.leadDetails.primaryTag)
? 'active'
: ''
"
>
<div class="icon-section">
<div class="icons">
<i class="bx bx-check"></i>
</div>
<div class="content">Prospect</div>
</div>
</li>
</ul>
</div>
</div>
<div class="lead_details_panel_right">
<table class="table table-reponsive">
<tr>
<td class="left_td">Name</td>
<td class="right_td">{{ fullName }}</td>
</tr>
<tr>
<td class="left_td">Status</td>
<td class="right_td">
{{ rootState.leadProfileData.manualStatus }}
</td>
</tr>
<tr>
<td class="left_td">Type</td>
<td class="right_td">
{{ rootState.leadProfileData.primaryTag }}
</td>
</tr>
<tr>
<td class="left_td">Phone Number</td>
<td class="right_td">
<template v-if="rootState.leadProfileData.phonenumber_1"
>{{ rootState.leadProfileData.phonenumber_1 }}
</template>
<template v-if="rootState.leadProfileData.phonenumber_2"
>,{{ rootState.leadProfileData.phonenumber_2 }}</template
>
</td>
</tr>
<tr>
<td class="left_td">Email address</td>
<td class="right_td">
{{ rootState.leadProfileData.email }}
</td>
</tr>
<tr>
<td class="left_td">Address</td>
<td class="right_td">
<template v-if="rootState.leadProfileData.address_1">
{{ rootState.leadProfileData.address_1 }}</template
>
<template v-if="rootState.leadProfileData.address_2">
,{{ rootState.leadProfileData.address_2 }}</template
>
<template v-if="rootState.leadProfileData.city">
,{{ rootState.leadProfileData.city }}</template
>
<template v-if="rootState.leadProfileData.state">
,{{ rootState.leadProfileData.state }}</template
>
<template v-if="rootState.leadProfileData.country">
,{{ rootState.leadProfileData.country }}</template
>
<template v-if="rootState.leadProfileData.zip">
,{{ rootState.leadProfileData.zip }}</template
>
</td>
</tr>
<tr>
<td class="left_td">Sources</td>
<td class="right_td">
<div class="badges">
<span class="badge" v-for="(v, index) in sources" :key="index">{{
v
}}</span>
</div>
</td>
</tr>
<tr>
<td class="left_td">Unsubscibed</td>
<td class="right_td">No</td>
</tr>
<tr>
<td class="left_td">Tags</td>
<td class="right_td">
<div class="badges">
<span
class="badge"
v-for="(v, index) in secondaryTags"
:key="index"
>{{ v }}</span
>
</div>
</td>
</tr>
<tr>
<td class="left_td">Documents</td>
<td class="right_td">
<div class="documents">
<div class="document-head">
<div class="document_name">
<div class="avatar-xs">
<img
:src="Avatar1"
alt
class="img-thumbnail rounded-circle"
/>
</div>
<p>Kaylee White</p>
</div>
<div class="document_date">11 December 2022</div>
<div class="document_time">03:30PM</div>
</div>
<div class="document_set">
<div class="document_item">
<div class="document_icon">
<!-- <i class="bx bx-shuffle font-size-16 align-middle me-2"></i> -->
<Icon icon="bx:shuffle" style="color: #3c7be2" />
</div>
<div class="document_name">Hello.doc</div>
</div>
<div class="document_item">
<div class="document_icon">
<!-- <i class="bx bx-shuffle font-size-16 align-middle me-2"></i> -->
<Icon icon="bx:shuffle" style="color: #3c7be2" />
</div>
<div class="document_name">Hello.doc</div>
</div>
</div>
<div class="add_document">
<b-button variant="outline-secondary"
><i class="bx bx-smile font-size-16 align-middle me-2"></i>
Secondary</b-button
>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="extra_details">
<div class="extra_details_item">
<div class="extra_details_item_heading">Current Vehicle</div>
<div class="image_extra_details">
<div class="avatar-md">
<img :src="Avatar1" alt class="img-thumbnail" />
</div>
</div>
<div class="content_extra_details">
<table class="table table-responsive">
<tr>
<td class="left_td">Model</td>
<td>Value</td>
</tr>
<tr>
<td class="left_td">Model</td>
<td>Value</td>
</tr>
<tr>
<td class="left_td">Model</td>
<td>Value</td>
</tr>
</table>
</div>
</div>
<div class="extra_details_item">
<div class="extra_details_item_heading">Current Vehicle</div>
<div class="image_extra_details">
<div class="avatar-md">
<img :src="Avatar1" alt class="img-thumbnail" />
</div>
</div>
<div class="content_extra_details">
<table class="table table-responsive">
<tr>
<td class="left_td">Model</td>
<td>Value</td>
</tr>
<tr>
<td class="left_td">Model</td>
<td>Value</td>
</tr>
<tr>
<td class="left_td">Model</td>
<td>Value</td>
</tr>
</table>
</div>
</div>
</div>
<div class="see_full_details">
<b-button variant="outline-secondary"
>See Full Details
<i class="bx bx-smile font-size-16 align-middle me-2"></i
></b-button>
</div>
</div>
</template>
<template v-if="selectedMode === 'Appointments'">
<div class="appointments">
<table class="table table-responsive">
<tr>
<td>
<i class="bx bx-edit font-size-16 align-middle me-2"></i>
</td>
<td>11 December 2022</td>
<td>3.30PM</td>
<td>
<div class="d-flex">
<div class="avatar-xs" v-for="(v, index) in [1, 2, 3]" :key="index">
<img
:src="Avatar1"
alt
class="img-thumbnail"
:style="{ left: `-${5 * v}px` }"
/>
</div>
</div>
</td>
<td>
<div class="actions">
<span class="badge badge-soft-primary">lead</span>
<i class="bx bx-edit font-size-16 align-middle me-2"></i>
</div>
</td>
</tr>
</table>
</div>
</template>
<template v-if="selectedMode === 'Activities'">
<div class="activities">
<div class="activity_item">
<div class="items">
<div class="main_head">
<i class="bx bx-window-close font-size-16 align-middle me-2"></i>
<div class="heading">SMS Message Recieved</div>
</div>
<div class="tag_area">
<div class="tag_area_date">11 December 2022</div>
<div class="tag_area_time">03:30 PM</div>
<div class="tag_area_agent">
<div class="name">Kaylee White</div>
<div class="avatar-xs agent_image">
<img :src="Avatar1" alt class="img-thumbnail" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<template v-if="selectedMode === 'Oppurtunities'">
<div class="oppurtunities">
<div class="header">
<div class="form-check">
<input class="form-check-input" type="checkbox" />
<label class="form-check-label" for="twoFactor">Select All</label>
</div>
<b-dropdown right variant="black" menu-class="dropdown-menu-end">
<template v-slot:button-content>
<a class="nav-link" href="javascript: void(0);">
Mark as <i class="bx bx-chevron-down"></i>
</a>
</template>
<!-- item-->
<b-dropdown-item v-for="(s, index) in []" :key="index">
{{ s.label }}
</b-dropdown-item>
</b-dropdown>
</div>
<div class="oppurtunities_items">
<div class="oppurtunities_item">
<div class="oppurtunities_item_details_label">
<div class="form-check">
<input class="form-check-input" type="checkbox" />
<label class="form-check-label" for="twoFactor">Select All</label>
</div>
<p>This leads's vehicle is coming to lease end</p>
</div>
<div class="oppurtunities_item_details_sublabel">
<p>11 December 2022 03:30 PM</p>
<p>Expiration: 11 December 2022 03:30 PM</p>
</div>
</div>
</div>
</div>
</template>
</template>
<template v-else>
<div class="editForm">
<div class="heading">
<div class="heading-section">
<h3>Edit Customer Info</h3>
</div>
</div>
<div class="details">
<b-form @submit.prevent="formSubmit">
<div class="row">
<div class="col-md-4">
<b-form-group
class="mb-3"
label="First name"
label-for="formrow-partnershipname-input"
>
<b-form-input
id="formrow-firstname-input"
type="text"
placeholder="First name"
v-model="form.firstname"
name="firstname"
:class="{
'is-invalid': submitted && $v.form.firstname.$error,
}"
></b-form-input>
<div
v-if="submitted && $v.form.firstname.$error"
class="invalid-feedback"
>
<span v-if="!$v.form.firstname.required"
>This value is required.</span
>
</div>
</b-form-group>
</div>
<div class="col-md-4">
<b-form-group
class="mb-3"
label="Middle name"
label-for="formrow-middlename-input"
>
<b-form-input
id="formrow-middlename-input"
type="text"
placeholder="Middle name"
v-model="form.middlename"
name="middlename"
:class="{
'is-invalid': submitted && $v.form.middlename.$error,
}"
></b-form-input>
<div
v-if="submitted && $v.form.middlename.$error"
class="invalid-feedback"
>
<span v-if="!$v.form.middlename.required"
>This value is required.</span
>
</div>
</b-form-group>
</div>
<div class="col-md-4">
<b-form-group
class="mb-3"
label="Last Name"
label-for="formrow-lastname-input"
>
<b-form-input
id="formrow-lastname-input"
type="text"
placeholder="Last name"
v-model="form.lastname"
name="lastname"
:class="{
'is-invalid': submitted && $v.form.lastname.$error,
}"
></b-form-input>
<div
v-if="submitted && $v.form.lastname.$error"
class="invalid-feedback"
>
<span v-if="!$v.form.lastname.required"
>This value is required.</span
>
</div>
</b-form-group>
</div>
<div class="col-md-6">
<b-form-group
class="mb-3"
label="Phone Number 1"
label-for="formrow-phonenumber_1-input"
>
<b-form-input
id="formrow-phonenumber_1-input"
type="text"
placeholder="Phone Number 1"
v-model="form.phonenumber_1"
name="phonenumber_1"
:class="{
'is-invalid': submitted && $v.form.phonenumber_1.$error,
}"
></b-form-input>
<div
v-if="submitted && $v.form.phonenumber_1.$error"
class="invalid-feedback"
>
<span v-if="!$v.form.phonenumber_1.required"
>This value is required.</span
>
</div>
</b-form-group>
</div>
<div class="col-md-6">
<b-form-group
class="mb-3"
label="Phone Number 2"
label-for="formrow-phonenumber_2-input"
>
<b-form-input
id="formrow-phonenumber_2-input"
type="text"
placeholder="Phone Number 2"
v-model="form.phonenumber_2"
name="phonenumber_2"
:class="{
'is-invalid': submitted && $v.form.phonenumber_2.$error,
}"
></b-form-input>
<div
v-if="submitted && $v.form.phonenumber_2.$error"
class="invalid-feedback"
>
<span v-if="!$v.form.phonenumber_2.required"
>This value is required.</span
>
</div>
</b-form-group>
</div>
<div class="col-md-12">
<b-form-group
class="mb-3"
label="Email Address"
label-for="formrow-email-input"
>
<b-form-input
id="formrow-email-input"
type="text"
placeholder="Email Address"
v-model="form.email"
:disabled="true"
name="email"
:class="{
'is-invalid': submitted && $v.form.email.$error,
}"
></b-form-input>
<div
v-if="submitted && $v.form.email.$error"
class="invalid-feedback"
>
<span v-if="!$v.form.email.required">This value is required.</span>
</div>
</b-form-group>
</div>
<div class="col-md-6">
<b-form-group
class="mb-3"
label="Address 1"
label-for="formrow-address1-input"
>
<b-form-input
id="formrow-address1-input"
type="text"
placeholder="Address 1"
v-model="form.address1"
name="address1"
:class="{
'is-invalid': submitted && $v.form.address1.$error,
}"
></b-form-input>
<div
v-if="submitted && $v.form.address1.$error"
class="invalid-feedback"
>
<span v-if="!$v.form.address1.required"
>This value is required.</span
>
</div>
</b-form-group>
</div>
<div class="col-md-6">
<b-form-group
class="mb-3"
label="Address 2"
label-for="formrow-address2-input"
>
<b-form-input
id="formrow-address2-input"
type="text"
placeholder="Address 2"
v-model="form.address2"
name="address1"
:class="{
'is-invalid': submitted && $v.form.address2.$error,
}"
></b-form-input>
<div
v-if="submitted && $v.form.address2.$error"
class="invalid-feedback"
>
<span v-if="!$v.form.address2.required"
>This value is required.</span
>
</div>
</b-form-group>
</div>
<div class="col-md-4">
<b-form-group class="mb-3" label="City" label-for="formrow-city-input">
<b-form-input
id="formrow-city-input"
type="text"
placeholder="City"
v-model="form.city"
name="city"
:class="{
'is-invalid': submitted && $v.form.city.$error,
}"
></b-form-input>
<div v-if="submitted && $v.form.city.$error" class="invalid-feedback">
<span v-if="!$v.form.city.required">This value is required.</span>
</div>
</b-form-group>
</div>
<div class="col-md-4">
<b-form-group
class="mb-3"
label="State"
label-for="formrow-state-input"
>
<b-form-input
id="formrow-state-input"
type="text"
placeholder="State"
v-model="form.state"
name="state"
:class="{
'is-invalid': submitted && $v.form.state.$error,
}"
></b-form-input>
<div
v-if="submitted && $v.form.state.$error"
class="invalid-feedback"
>
<span v-if="!$v.form.state.required">This value is required.</span>
</div>
</b-form-group>
</div>
<div class="col-md-4">
<b-form-group
class="mb-3"
label="Zip Code"
label-for="formrow-zipcode-input"
>
<b-form-input
id="formrow-zipcode-input"
type="text"
placeholder="Zip Code"
v-model="form.zipcode"
name="zipcode"
:class="{
'is-invalid': submitted && $v.form.zipcode.$error,
}"
></b-form-input>
<div
v-if="submitted && $v.form.zipcode.$error"
class="invalid-feedback"
>
<span v-if="!$v.form.zipcode.required"
>This value is required.</span
>
</div>
</b-form-group>
</div>
<div class="col-md-6 mb-3">
<label for="fields">Type</label>
<multiselect
v-model="form.type"
:options="leadTypeValueOptions"
:multiple="false"
label="label"
:class="{
'is-invalid': submitted && $v.form.type.$error,
}"
></multiselect>
<div v-if="submitted && $v.form.type.$error" class="invalid-feedback">
<span v-if="!$v.form.type.required">This value is required.</span>
</div>
</div>
<div class="col-md-6 mb-3">
<label for="fields">User Tags</label>
<multiselect
v-model="form.secondaryTags"
:options="rootState.contactTags"
:multiple="true"
label="label"
></multiselect>
</div>
<div class="col-md-12 d-flex justify-content-end">
<b-button variant="light" @click="isEditMode = false"> Cancel</b-button>
<b-button variant="primary" type="submit"> Save</b-button>
</div>
</div>
</b-form>
</div>
</div>
</template>
</div>
</div>
</template>
<script>
export const leadTypeValueOptions = [
{
label: "Customer",
value: "customer",
},
{
label: "Prospect",
value: "prospect",
},
{
label: "Lead",
value: "lead",
},
];
import { mapActions, mapGetters } from "vuex";
import Multiselect from "vue-multiselect";
import Avatar1 from "../../../../../styles/2021-theme/images/users/avatar-1.jpg";
import {
ROOT_GETTER,
ROOT_GETTER_SELECTED_LEAD_DETAILS,
ROOT_ACTION_SHOW_PROFILE_SCREEN,
ROOT_ACTION_UDPATE_LEAD_DATA,
} from "../../constants";
import moment from "moment";
import * as _ from "lodash";
import { required } from "vuelidate/lib/validators";
import {
BButton,
BButtonGroup,
BForm,
BFormGroup,
BFormInput,
BDropdown,
BDropdownItem,
} from "bootstrap-vue-next";
import { Icon } from "@iconify/vue";
export default {
data() {
return {
Avatar1,
leadMetaOptions: [
{
label: "Quality Score",
percentage: "37",
subLabel: "7/8 Criteria match",
color: "blue",
},
{
label: "Response rate",
percentage: "37",
subLabel: "7/8 Responses",
color: "yellow",
},
{
label: "Credit Score",
percentage: "37",
subLabel: "Experian",
color: "red",
},
],
availableMode: ["Details", "Appointments", "Activities", "Oppurtunities"],
selectedMode: "Details",
leadTypeValueOptions,
submitted: false,
isEditMode: false,
form: {
firstname: "",
middlename: "",
lastname: "",
email: "",
phonenumber_1: "",
phonenumber_2: "",
address1: "",
address2: "",
city: "",
state: "",
zipcode: "",
type: "",
secondaryTags: [],
},
};
},
validations: {
form: {
firstname: { required },
middlename: "",
lastname: { required },
email: { required },
phonenumber_1: { required },
phonenumber_2: "",
address1: "",
address2: "",
city: "",
state: "",
zipcode: "",
type: { required },
},
},
computed: {
...mapGetters("root", {
rootState: ROOT_GETTER,
selectedeLeadDetails: ROOT_GETTER_SELECTED_LEAD_DETAILS,
}),
fullName() {
return `${this.rootState.leadProfileData.firstname} ${this.rootState.leadProfileData.lastname}`;
},
updatedOn() {
return moment(this.rootState.leadProfileData.updatedOn).format("L");
},
sources() {
return _.map(
_.filter(this.rootState.sources, ({ id }) =>
_.includes(this.selectedeLeadDetails.sources, id)
),
({ name }) => name
);
},
secondaryTags() {
return this.selectedeLeadDetails.leadDetails.secondaryTags;
},
},
methods: {
...mapActions("root", {
showProfileScreen: ROOT_ACTION_SHOW_PROFILE_SCREEN,
updateLeadData: ROOT_ACTION_UDPATE_LEAD_DATA,
}),
formSubmit() {
this.submitted = true;
// this.$v.$touch();
// if (this.$v.$invalid) {
// return;
// }
this.updateLeadData({
id: this.rootState.selectedLeadID,
data: {
first_name: this.form.firstname,
last_name: this.form.lastname,
phone_1: this.form.phonenumber_1,
phone_2: this.form.phonenumber_2,
email: this.form.email,
address_1: this.form.address1,
address_2: this.form.address2,
city: this.form.city,
state: this.form.state,
zip: this.form.zipcode,
// "is_subscribed": true,
"contact-type": this.form.type.value,
// "status":this.form.
secondaryTags: _.map(this.form.secondaryTags, ({ value }) => value),
},
});
this.isEditMode = false;
},
},
components: {
Multiselect,
BButton,
BButtonGroup,
BForm,
BFormGroup,
BFormInput,
BDropdown,
BDropdownItem,
Icon,
},
watch: {
isEditMode(v) {
if (!v) {
this.submitted = false;
this.isEditMode = false;
this.form = {
firstname: "",
middlename: "",
lastname: "",
email: "",
phonenumber_1: "",
phonenumber_2: "",
address1: "",
address2: "",
city: "",
state: "",
zipcode: "",
type: "",
secondaryTags: [],
};
} else {
this.form = {
firstname: this.rootState.leadProfileData.firstname,
middlename: "",
lastname: this.rootState.leadProfileData.lastname,
email: this.rootState.leadProfileData.email,
phonenumber_1: this.rootState.leadProfileData.phonenumber_1,
phonenumber_2: this.rootState.leadProfileData.phonenumber_2,
address1: this.rootState.leadProfileData.address_1,
address2: this.rootState.leadProfileData.address_2,
city: this.rootState.leadProfileData.city,
state: this.rootState.leadProfileData.state,
zipcode: this.rootState.leadProfileData.zip,
type: _.find(
this.leadTypeValueOptions,
({ value }) => value === this.rootState.leadProfileData.primaryTag
),
secondaryTags:
this.rootState.leadProfileData.secondaryTags &&
this.rootState.leadProfileData.secondaryTags.length
? _.map(this.rootState.leadProfileData.secondaryTags, (s) =>
_.find(this.rootState.contactTags, ({ value }) => value === s)
)
: [],
};
}
},
},
};
</script>