Finalização do modulo campanha

backend/src/libs/socket.ts

@@ -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();
 

frontend/src/components/CampaignModal/index.js

@@ -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

frontend/src/layout/MainListItems.js

@@ -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

frontend/src/pages/Campaign/index.js

@@ -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>