ikan Uploader :
Directory : /var/www/html/shardahospital.org/shardalms/lms/lms/react/src/pages/superbot/
Upload File : |
| Current File : /var/www/html/shardahospital.org/shardalms/lms/lms/react/src/pages/superbot/AddedLeads.jsx |
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState, useRef } from "react";
import Service from "../../services/Service";
import LeadsFilterForm from "./LeadsFilterForm";
import util from "../../util";
import FileSaver from 'file-saver';
import {Row, Button, message, Modal, Table, Card} from "antd";
import {
ExclamationCircleOutlined, ReloadOutlined
} from '@ant-design/icons';
const $ = window.$;
function AddLeadsModal({ refOb, masters, campaignId, callback }) {
const [showModal, setShowModal] = useState(false);
const [loading, setLoading] = useState(false);
const [filterFd, setFilterFd] = useState({});
const [result, setResult] = useState([]);
const [paging, setPaging] = useState({ p: 1, ps: 10 });
const cols = [
{
title: 'Name',
render:(row)=>(
<div>
<div>{row.name}</div>
<div className="pt5 pb5 bold600" style={{color:'purple'}}>{row.application_no}</div>
<div className="text-secondary fs11 d-flex" style={{flexDirection:'column', gap:"3px"}}>
<div className="bold600">{row.email}</div>
<div>Mob: <span className="bold600">{row.mob}</span></div>
</div>
</div>
)
},
{
title: 'Course Applied',
render:(row)=>(
<div>
<div>{row.program}</div>
<div className="text-secondary mt5">
{row.plan}
</div>
<div className="fs11 bold600" style={{color:row.followup_count_all>0?'purple':'#ccc', marginTop:'10px'}}>{row.followup_count_all} Followup</div>
</div>
)
},
{ title: 'State', dataIndex: 'state' },
{
title: 'Utm Source',
render:(row)=>(
<div>
<div>{row.utm_source}</div>
<div className="text-secondary mt5">{row.utm_group}</div>
</div>
)
},
{ title: 'Step', dataIndex: 'step_completed', width:80, render:(n)=>`Step ${n}` },
{
title: 'Created',
width:100,
render:(row)=>(
<div>
<div>{util.getDate(row.created, 'DD MMM YYYY')}</div>
</div>
)
},
];
const getList = () => {
setLoading(true);
Service.leadsN(filterFd).then(({ data }) => {
data.result.forEach((v) => { v.key = v.id; });
setResult(data.result);
setPaging({ ...paging, p: 1 });
}).catch(e => {
message.error(e.message);
}).finally(() => {
setLoading(false);
})
}
const addLeadsToSuperbotCampaign = () => {
if(result.length>=2000){
message.error("Leads count must be less than 2000");
return;
}
const fn=()=>{
message.destroy();
setLoading(true);
const fd={campaign_id:campaignId, leads:[], filters:filterFd};
fd.leads=result.map(v=>({
id:v.id,
phone:'+91'+v.mob,
//phone:'+919958808167',
name:v.name,
location:v.state,
course:v.plan,
reference_id:v.application_no
}));
Service.addLeadsToSuperbotCampaign(fd).then(({ data }) => {
message.success(data.message || 'Sent');
callback();
setShowModal(false);
}).catch(e => {
message.error(e.message);
}).finally(() => {
setLoading(false);
});
}
Modal.confirm({
title: `Are you sure to send these leads to superbot?`,
icon: <ExclamationCircleOutlined />,
content: '',
okText: 'Yes',
okType: 'danger',
cancelText: 'No',
onOk() {
fn();
},
onCancel() {
},
})
}
const handleCancel = () => {
setShowModal(false);
setResult([]);
}
refOb.current = {
open: () => {
setShowModal(true);
}
}
return (
<Modal
title="Leads"
open={showModal}
okText="Send to Superbot"
onOk={addLeadsToSuperbotCampaign}
okButtonProps={{ loading, disabled:result.length<1 }}
onCancel={handleCancel}
cancelText="Close"
destroyOnClose
maskClosable={false}
width={1100}
style={{ top: 20 }}
>
<Card size="small" className="mb15" title="Filter Creteria">
<LeadsFilterForm masters={masters} onChange={(data)=>setFilterFd(data)} />
<div className="bdr-top" style={{margin:'10px -12px 0 -12px', padding:'12px 12px 0 12px'}}>
<Button type="primary" size="small" onClick={getList} loading={loading}>Apply Filter</Button>
</div>
</Card>
<div className="def-pag-custom bdr ant-table-text-top">
<Table
size="small"
dataSource={result}
columns={cols}
loading={loading}
pagination={{
showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
showSizeChanger: true,
pageSize: paging.ps,
current: paging.p,
onChange: (p, ps) => {
setPaging({ p, ps });
}
}}
/>
</div>
</Modal>
)
}
export default function AddedLeads({campaignDtl, masters}){
const addleadRef=useRef({});
const [loading, setLoading] = useState(false);
const [result, setResult] = useState([]);
const [paging, setPaging] = useState({ p: 1, ps: 10 });
const wh = $(window).height();
const cols=[
{title:'System Id', dataIndex:'application_no'},
{title:'Name', dataIndex:'name'},
{title:'Phone', dataIndex:'mob'},
{title:'State', dataIndex:'state'},
{title:'Course', dataIndex:'plan'},
{title:'Step Completed', dataIndex:'step_completed'},
{title:'Followups', dataIndex:'followup_count_all'},
{title:'Superbot Disposition', dataIndex:'superbot_disposition'},
{title:'Sent On', dataIndex:'sent_to_superbot_on'},
];
const getList = () => {
setLoading(true);
Service.superbotCampaignLeads(campaignDtl?.id).then(({ data }) => {
data.result.forEach((v) => {
v.key = v.id;
v.superbot_disposition=v.superbot_disposition || 'Call Not Made Yet';
});
setResult(data.result);
setPaging({ ...paging, p: 1 });
}).catch(e => {
message.error(e.message);
}).finally(() => {
setLoading(false);
})
}
const downloadCsv=()=>{
let header = {};
cols.forEach(v => {
if (v.title) {
header[v.dataIndex] = v.title.toUpperCase();
}
});
let blob = util.convertToCSVBlob(result, header);
FileSaver.saveAs(blob, 'leads_sent_to_superbot.csv');
}
useEffect(()=>{
if(campaignDtl){
getList();
}
}, [campaignDtl]);
return(
<div>
<Row justify="space-between" className="mb15">
<div>
<Button type="dashed" onClick={downloadCsv}>Download CSV</Button>
<Button className="ml5" onClick={getList}><ReloadOutlined spin={loading} /></Button>
</div>
<Button type="primary" onClick={()=>addleadRef.current.open()} disabled={campaignDtl?.status==='Published'}>Add Leads</Button>
</Row>
<Card size="small" bodyStyle={{padding:0}}>
<div className="def-pag-custom ant-table-text-top1">
<Table
size="small"
dataSource={result}
columns={cols}
loading={loading}
scroll={{y:wh-250}}
pagination={{
showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
showSizeChanger: true,
pageSize: paging.ps,
current: paging.p,
onChange: (p, ps) => {
setPaging({ p, ps });
}
}}
/>
</div>
</Card>
<AddLeadsModal refOb={addleadRef} masters={masters} campaignId={campaignDtl?.id} callback={()=>{getList(); campaignDtl.status='Published';}} />
</div>
)
}
Kontol Shell Bypass