Finalização do modulo campanha
adriano
parent
75eb24fe62
commit
5907fc6cb2
|
|
@ -75,7 +75,7 @@ export const initIO = (httpServer: Server): SocketIO => {
|
|||
});
|
||||
|
||||
socket.on("campaign_message_sent", async (data: any) => {
|
||||
console.log("campaign_message_sent: ", data);
|
||||
// console.log("campaign_message_sent: ", data);
|
||||
|
||||
const io = getIO();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,19 @@
|
|||
import React, { useState, useEffect, useContext, createContext } from 'react'
|
||||
import React, { useState, useEffect, useContext, } from 'react'
|
||||
import * as Yup from 'yup'
|
||||
import { Formik, Form, Field } from 'formik'
|
||||
import { Formik, Form, Field, } from 'formik'
|
||||
import { toast } from 'react-toastify'
|
||||
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import { green } from '@material-ui/core/colors'
|
||||
|
||||
import { AuthContext } from '../../context/Auth/AuthContext'
|
||||
import { Can } from '../../components/Can'
|
||||
|
||||
|
||||
import apiBroker from '../../services/apiBroker'
|
||||
|
||||
import Select from "@material-ui/core/Select"
|
||||
import MenuItem from "@material-ui/core/MenuItem"
|
||||
|
||||
import SelectField from "../../components/Report/SelectField"
|
||||
|
||||
import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext"
|
||||
|
||||
import {
|
||||
|
|
@ -26,14 +24,10 @@ import {
|
|||
DialogActions,
|
||||
CircularProgress,
|
||||
TextField,
|
||||
Switch,
|
||||
FormControlLabel,
|
||||
} from '@material-ui/core'
|
||||
|
||||
import api from '../../services/api'
|
||||
import { i18n } from '../../translate/i18n'
|
||||
import toastError from '../../errors/toastError'
|
||||
import QueueSelect from '../QueueSelect'
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
|
|
@ -67,6 +61,23 @@ const SessionSchema = Yup.object().shape({
|
|||
.min(2, 'Too Short!')
|
||||
.max(100, 'Too Long!')
|
||||
.required('Required'),
|
||||
|
||||
secondStart: Yup.number()
|
||||
.required('Min time is required')
|
||||
.min(3, 'Min time must be 3')
|
||||
.max(3600, 'Min must be less than 3600'),
|
||||
|
||||
secondEnd: Yup.number()
|
||||
.required('Max time is required')
|
||||
.min(3, 'Min time must be 3')
|
||||
.max(3600, 'Max must be less than 3600')
|
||||
.test('higher-than-lower', 'Tempo final deve ser maior que tempo inicio!', function (
|
||||
secondEnd
|
||||
) {
|
||||
const secondStart = this.resolve(Yup.ref('secondStart'))
|
||||
return secondStart === undefined || secondEnd === undefined || secondEnd > secondStart
|
||||
}),
|
||||
|
||||
})
|
||||
|
||||
const CampaignModal = ({ open, onClose, campaignId, dispatch }) => {
|
||||
|
|
@ -77,27 +88,21 @@ const CampaignModal = ({ open, onClose, campaignId, dispatch }) => {
|
|||
status: 'pending',
|
||||
whatsapp_sender: '',
|
||||
csv_original_file_name: '',
|
||||
secondStart: '3',
|
||||
secondEnd: '15',
|
||||
textToSeconds: true,
|
||||
}
|
||||
|
||||
const { user } = useContext(AuthContext)
|
||||
|
||||
const { whatsApps } = useContext(WhatsAppsContext)
|
||||
|
||||
console.log('------------> whatsApps: ', whatsApps)
|
||||
|
||||
const [campaign, setCampaign] = useState(initialState)
|
||||
// const [selectedQueueIds, setSelectedQueueIds] = useState([])
|
||||
const [file, setFile] = useState()
|
||||
|
||||
const [selectedNumber, setSelectedNumber] = useState('')
|
||||
|
||||
const [itemHover, setItemHover] = useState(-1)
|
||||
|
||||
useEffect(() => {
|
||||
console.log('selectedNumber: ', selectedNumber)
|
||||
}, [selectedNumber])
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSession = async () => {
|
||||
|
|
@ -122,7 +127,7 @@ const CampaignModal = ({ open, onClose, campaignId, dispatch }) => {
|
|||
}
|
||||
}
|
||||
fetchSession()
|
||||
}, [campaignId])
|
||||
}, [campaignId, user.id])
|
||||
|
||||
const handleSaveCampaign = async (values) => {
|
||||
let response = null
|
||||
|
|
@ -135,6 +140,9 @@ const CampaignModal = ({ open, onClose, campaignId, dispatch }) => {
|
|||
formData.append('file', file)
|
||||
formData.append('name', values.name)
|
||||
formData.append('whatsapp_sender', selectedNumber)
|
||||
formData.append('secondStart', values.secondStart)
|
||||
formData.append('secondEnd', values.secondEnd)
|
||||
formData.append('textToSeconds', values.textToSeconds)
|
||||
formData.append('message', values.message)
|
||||
formData.append('csv_original_file_name', file?.name)
|
||||
|
||||
|
|
@ -186,7 +194,6 @@ const CampaignModal = ({ open, onClose, campaignId, dispatch }) => {
|
|||
return
|
||||
}
|
||||
|
||||
console.log('event.target.files[0]: ', event.target.files[0])
|
||||
setFile(event.target.files[0])
|
||||
|
||||
} catch (err) {
|
||||
|
|
@ -194,6 +201,7 @@ const CampaignModal = ({ open, onClose, campaignId, dispatch }) => {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<Dialog
|
||||
|
|
@ -221,11 +229,6 @@ const CampaignModal = ({ open, onClose, campaignId, dispatch }) => {
|
|||
|
||||
<Form>
|
||||
<DialogContent dividers>
|
||||
<Can
|
||||
role={user.profile}
|
||||
perform="url-remote-session:show"
|
||||
yes={() => (
|
||||
<>
|
||||
<div>
|
||||
<div className={classes.multFieldLine}>
|
||||
<Field
|
||||
|
|
@ -251,8 +254,6 @@ const CampaignModal = ({ open, onClose, campaignId, dispatch }) => {
|
|||
<MenuItem
|
||||
key={whatsapp.id}
|
||||
value={whatsapp.number}
|
||||
onMouseEnter={() => setItemHover(whatsapp.id)}
|
||||
onMouseLeave={() => setItemHover(-1)}
|
||||
>{whatsapp.number}
|
||||
</MenuItem>
|
||||
))}
|
||||
|
|
@ -263,9 +264,6 @@ const CampaignModal = ({ open, onClose, campaignId, dispatch }) => {
|
|||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<Field
|
||||
|
|
@ -309,6 +307,39 @@ const CampaignModal = ({ open, onClose, campaignId, dispatch }) => {
|
|||
|
||||
<h3>{file?.name || campaign?.csv_original_file_name}</h3>
|
||||
</div>
|
||||
|
||||
<div className={classes.multFieldLine} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Field
|
||||
as={TextField}
|
||||
label='Inicio em segundos'
|
||||
autoFocus
|
||||
name="secondStart"
|
||||
error={touched.secondStart && Boolean(errors.secondStart)}
|
||||
helperText={touched.secondStart && errors.secondStart}
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
className={classes.textField}
|
||||
/>
|
||||
|
||||
<Field
|
||||
as={TextField}
|
||||
label='Fim em segundos'
|
||||
autoFocus
|
||||
name="secondEnd"
|
||||
error={touched.secondEnd && Boolean(errors.secondEnd)}
|
||||
helperText={touched.secondEnd && errors.secondEnd}
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
className={classes.textField}
|
||||
/>
|
||||
|
||||
<label>
|
||||
<Field type="checkbox" name="textToSeconds"/>
|
||||
Tamanho do texto para segundos
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@ import { Badge } from '@material-ui/core'
|
|||
import DashboardOutlinedIcon from '@material-ui/icons/DashboardOutlined'
|
||||
|
||||
import ReportOutlinedIcon from '@material-ui/icons/ReportOutlined'
|
||||
import CampaignIcon from '@material-ui/icons/Send';
|
||||
|
||||
|
||||
import SendOutlined from '@material-ui/icons/SendOutlined'
|
||||
|
||||
//import ReportOutlined from "@bit/mui-org.material-ui-icons.report-outlined";
|
||||
|
|
@ -145,7 +148,7 @@ const MainListItems = (props) => {
|
|||
<ListItemLink
|
||||
to="/campaign"
|
||||
primary="Campanha"
|
||||
icon={<ReportOutlinedIcon />}
|
||||
icon={<CampaignIcon />}
|
||||
/>
|
||||
|
||||
<Can
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useState, useCallback, useEffect, useReducer, useContext } from 'react'
|
||||
import { toast } from 'react-toastify'
|
||||
import { format, parseISO } from 'date-fns'
|
||||
|
||||
import openSocket from 'socket.io-client'
|
||||
|
||||
|
|
@ -15,17 +14,9 @@ import {
|
|||
Table,
|
||||
TableHead,
|
||||
Paper,
|
||||
Tooltip,
|
||||
Typography,
|
||||
CircularProgress,
|
||||
} from '@material-ui/core'
|
||||
import {
|
||||
Edit,
|
||||
CheckCircle,
|
||||
SignalCellularConnectedNoInternet2Bar,
|
||||
SignalCellularConnectedNoInternet0Bar,
|
||||
SignalCellular4Bar,
|
||||
CropFree,
|
||||
DeleteOutline,
|
||||
// Restore
|
||||
} from '@material-ui/icons'
|
||||
|
|
@ -63,8 +54,6 @@ const reducer = (state, action) => {
|
|||
}
|
||||
if (action.type === "UPDATE_CAMPAIGNS") {
|
||||
|
||||
console.log('STATE: ', state)
|
||||
|
||||
const campaign = action.payload
|
||||
const campaignIndex = state.findIndex((c) => c.id === campaign.id)
|
||||
|
||||
|
|
@ -123,30 +112,6 @@ const useStyles = makeStyles((theme) => ({
|
|||
},
|
||||
}))
|
||||
|
||||
const CustomToolTip = ({ title, content, children }) => {
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
arrow
|
||||
classes={{
|
||||
tooltip: classes.tooltip,
|
||||
popper: classes.tooltipPopper,
|
||||
}}
|
||||
title={
|
||||
<React.Fragment>
|
||||
<Typography gutterBottom color="inherit">
|
||||
{title}
|
||||
</Typography>
|
||||
{content && <Typography>{content}</Typography>}
|
||||
</React.Fragment>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
const Campaign = () => {
|
||||
//--------
|
||||
const { user } = useContext(AuthContext)
|
||||
|
|
@ -155,22 +120,12 @@ const Campaign = () => {
|
|||
|
||||
// const { whatsApps } = useContext(WhatsAppsContext)
|
||||
|
||||
// console.log('------------> whatsApps: ', whatsApps)
|
||||
|
||||
// const { campaigns, loading } = useContext(WhatsAppsContext)
|
||||
const [campaignModalOpen, setCampaignModalOpen] = useState(false)
|
||||
const [qrModalOpen, setQrModalOpen] = useState(false)
|
||||
const [selectedCampaign, setSelectedCampaign] = useState(null)
|
||||
const [confirmModalOpen, setConfirmModalOpen] = useState(false)
|
||||
|
||||
const [diskSpaceInfo, setDiskSpaceInfo] = useState({})
|
||||
|
||||
const [disabled, setDisabled] = useState(true)
|
||||
|
||||
const [settings, setSettings] = useState([])
|
||||
|
||||
const [buttons, setClicks] = useState([])
|
||||
|
||||
const [campaigns, dispatch] = useReducer(reducer, [])
|
||||
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
|
@ -199,7 +154,6 @@ const Campaign = () => {
|
|||
const fetchContacts = async () => {
|
||||
|
||||
try {
|
||||
console.log('process.env.REACT_APP_BACKEND_URL_PRIVATE: ', process.env.REACT_APP_BACKEND_URL_PRIVATE)
|
||||
|
||||
const { data } = await apiBroker.get('/campaign', {
|
||||
params: {
|
||||
|
|
@ -209,8 +163,6 @@ const Campaign = () => {
|
|||
}
|
||||
})
|
||||
|
||||
console.log('data.campaign : ', data.campaign)
|
||||
|
||||
dispatch({ type: "LOAD_CAMPAIGNS", payload: data.campaign })
|
||||
setLoading(false)
|
||||
|
||||
|
|
@ -222,7 +174,7 @@ const Campaign = () => {
|
|||
fetchContacts()
|
||||
}, 500)
|
||||
return () => clearTimeout(delayDebounceFn)
|
||||
}, [])
|
||||
}, [user.id])
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSession = async () => {
|
||||
|
|
@ -247,35 +199,6 @@ const Campaign = () => {
|
|||
fetchSession()
|
||||
}, [])
|
||||
|
||||
const getSettingValue = (key) => {
|
||||
const { value } = settings.find((s) => s.key === key)
|
||||
|
||||
return value
|
||||
}
|
||||
|
||||
const handleStartWhatsAppSession = async (campaignId) => {
|
||||
try {
|
||||
await api.post(`/whatsappsession/${campaignId}`)
|
||||
} catch (err) {
|
||||
toastError(err)
|
||||
}
|
||||
}
|
||||
|
||||
// useEffect(() => {
|
||||
// for (let i = 0; i < campaigns.length; i++) {
|
||||
// if (buttons.includes(campaigns[i].id)) {
|
||||
// campaigns[i].disabled = true
|
||||
// }
|
||||
// }
|
||||
// }, [campaigns, buttons])
|
||||
|
||||
const handleRequestNewQrCode = async (campaignId) => {
|
||||
try {
|
||||
await api.put(`/whatsappsession/${campaignId}`)
|
||||
} catch (err) {
|
||||
toastError(err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenCampaignModal = () => {
|
||||
setSelectedCampaign(null)
|
||||
|
|
@ -287,19 +210,11 @@ const Campaign = () => {
|
|||
setSelectedCampaign(null)
|
||||
}, [setSelectedCampaign, setCampaignModalOpen])
|
||||
|
||||
const handleOpenQrModal = (campaign) => {
|
||||
setSelectedCampaign(campaign)
|
||||
setQrModalOpen(true)
|
||||
}
|
||||
|
||||
const handleStart = async (campaign) => {
|
||||
console.log('start')
|
||||
|
||||
try {
|
||||
const { data } = await apiBroker.post(`/campaign/start/${campaign.id}`)
|
||||
|
||||
console.log('==============> data.campaign: ', data.campaign)
|
||||
|
||||
dispatch({ type: "UPDATE_CAMPAIGNS", payload: data.campaign })
|
||||
|
||||
toast.success('Campanha iniciada com sucesso')
|
||||
|
|
@ -310,13 +225,10 @@ const Campaign = () => {
|
|||
}
|
||||
|
||||
const handleStop = async (campaign) => {
|
||||
console.log('stop')
|
||||
|
||||
try {
|
||||
const { data } = await apiBroker.post(`/campaign/stop/${campaign.id}`)
|
||||
|
||||
console.log('==============> data.campaign: ', data.campaign)
|
||||
|
||||
dispatch({ type: "UPDATE_CAMPAIGNS", payload: data.campaign })
|
||||
|
||||
toast.success('Campanha parada com sucesso')
|
||||
|
|
@ -414,79 +326,6 @@ const Campaign = () => {
|
|||
)
|
||||
}
|
||||
|
||||
const renderStatusToolTips = (campaign) => {
|
||||
return (
|
||||
<div className={classes.customTableCell}>
|
||||
{campaign.status === 'DISCONNECTED' && (
|
||||
<CustomToolTip
|
||||
title={i18n.t('connections.toolTips.disconnected.title')}
|
||||
content={i18n.t('connections.toolTips.disconnected.content')}
|
||||
>
|
||||
<SignalCellularConnectedNoInternet0Bar color="secondary" />
|
||||
</CustomToolTip>
|
||||
)}
|
||||
{campaign.status === 'OPENING' && (
|
||||
<CircularProgress size={24} className={classes.buttonProgress} />
|
||||
)}
|
||||
{campaign.status === 'qrcode' && (
|
||||
<CustomToolTip
|
||||
title={i18n.t('connections.toolTips.qrcode.title')}
|
||||
content={i18n.t('connections.toolTips.qrcode.content')}
|
||||
>
|
||||
<CropFree />
|
||||
</CustomToolTip>
|
||||
)}
|
||||
{campaign.status === 'CONNECTED' && (
|
||||
<CustomToolTip title={i18n.t('connections.toolTips.connected.title')}>
|
||||
<SignalCellular4Bar style={{ color: green[500] }} />
|
||||
</CustomToolTip>
|
||||
)}
|
||||
{(campaign.status === 'TIMEOUT' || campaign.status === 'PAIRING') && (
|
||||
<CustomToolTip
|
||||
title={i18n.t('connections.toolTips.timeout.title')}
|
||||
content={i18n.t('connections.toolTips.timeout.content')}
|
||||
>
|
||||
<SignalCellularConnectedNoInternet2Bar color="secondary" />
|
||||
</CustomToolTip>
|
||||
)}
|
||||
|
||||
{/* {campaign.status === "RESTORING" && (
|
||||
<CustomToolTip
|
||||
title={i18n.t("connections.toolTips.disconnected.title")}
|
||||
content={i18n.t("connections.toolTips.disconnected.content")}
|
||||
>
|
||||
<Restore color="secondary" />
|
||||
</CustomToolTip>
|
||||
)} */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchQueries = async () => {
|
||||
try {
|
||||
await api.post(`/restartwhatsappsession/0`, {
|
||||
params: { status: 'status' },
|
||||
})
|
||||
|
||||
setDisabled(false)
|
||||
|
||||
setClicks((buttons) =>
|
||||
buttons.map((e) => {
|
||||
return { id: e.id, disabled: false }
|
||||
})
|
||||
)
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
fetchQueries()
|
||||
}, 500)
|
||||
return () => clearTimeout(delayDebounceFn)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
|
||||
|
||||
|
|
@ -508,34 +347,17 @@ const Campaign = () => {
|
|||
|
||||
socket.on('campaign', (data) => {
|
||||
|
||||
console.log('------------> CAMPAIGN: ', data)
|
||||
|
||||
if (data.action === 'update') {
|
||||
dispatch({ type: "UPDATE_CAMPAIGNS", payload: data.campaign })
|
||||
}
|
||||
})
|
||||
|
||||
socket.on('diskSpaceMonit', (data) => {
|
||||
if (data.action === 'update') {
|
||||
setDiskSpaceInfo(data.diskSpace)
|
||||
}
|
||||
})
|
||||
|
||||
socket.on('settings', (data) => {
|
||||
if (data.action === 'update') {
|
||||
setSettings((prevState) => {
|
||||
const aux = [...prevState]
|
||||
const settingIndex = aux.findIndex((s) => s.key === data.setting.key)
|
||||
aux[settingIndex].value = data.setting.value
|
||||
return aux
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return () => {
|
||||
socket.disconnect()
|
||||
}
|
||||
}, [])
|
||||
}, [user.id])
|
||||
|
||||
return (
|
||||
<Can
|
||||
|
|
@ -569,11 +391,6 @@ const Campaign = () => {
|
|||
<Title>Campanhas</Title>
|
||||
|
||||
<MainHeaderButtonsWrapper>
|
||||
<Can
|
||||
role={user.profile}
|
||||
perform="btn-add-whatsapp"
|
||||
updatedAt
|
||||
yes={() => (
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
|
|
@ -581,8 +398,6 @@ const Campaign = () => {
|
|||
>
|
||||
criar campanha
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
</MainHeaderButtonsWrapper>
|
||||
</MainHeader>
|
||||
|
||||
|
|
@ -661,9 +476,9 @@ const Campaign = () => {
|
|||
{campaign.message}
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="center">
|
||||
{campaign.status !== 'running' ? <TableCell align="center">
|
||||
|
||||
{campaign.status != 'success' && (
|
||||
{campaign.status !== 'success' && (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() =>
|
||||
|
|
@ -685,7 +500,8 @@ const Campaign = () => {
|
|||
>
|
||||
<DeleteOutline />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableCell> : <TableCell align="center"></TableCell>}
|
||||
|
||||
|
||||
|
||||
</TableRow>
|
||||
|
|
|
|||
Loading…
Reference in New Issue