\n \n \n \n \n \n \n \n {from}\n \n \n \n {moment(email.createdAt).format('MM-DD-YYYY, hh:mm a')}\n {email.subject}\n \n \n );\n}\n\nEmailListItem.propTypes = {\n email: PropTypes.shape({\n id: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n from: PropTypes.string.isRequired,\n to: PropTypes.string.isRequired,\n lead: PropTypes.shape({\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n }),\n subject: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default EmailListItem;\n","import React, { useMemo } from 'react';\nimport { Loader, Text, Row } from '@8base/boost';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport EmailListItem from './EmailListItem';\n\nconst Container = styled.div`\n overflow-y: auto;\n width: 100%;\n\n & > div:not(:last-child) {\n border-bottom: 1px solid #d8d8d8;\n }\n`;\n\nconst LoaderBlock = styled.div`\n width: 100%;\n position: relative;\n padding: 20px 20px;\n text-align: center;\n`;\n\nconst TouchableText = styled(Text)`\n font-family: Poppins !important;\n font-size: 13px !important;\n line-height: 20px !important;\n color: #3db4aa !important;\n font-weight: 400 !important;\n cursor: pointer !important;\n\n &:first-letter {\n text-transform: capitalize !important;\n }\n`;\n\n/**\n * List of emails for a specific user component\n *\n * @param {object} props - Component props\n * @param {Array} props.items - Email list to render\n * @param {boolean} props.loading - Whether the email list is loading or not\n * @param {boolean} props.available - Whether there are more emails available to fetch or not\n * @param {Function} props.onItemClick - Function to fire when user clicks an item in the list\n * @param {Function} props.onNextPage - Function to fire when the \"load more button is clicked\n *\n * @returns {React.Component} React component to render\n */\nfunction EmailList({ items, loading, available, onNextPage }) {\n const emails = useMemo(\n () => items.map((email) => ),\n [items],\n );\n\n return (\n \n {emails}\n {loading && (\n \n \n \n )}\n {!loading && available && (\n \n Load more\n
\n )}\n \n );\n}\n\nEmailList.propTypes = {\n items: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n from: PropTypes.string.isRequired,\n to: PropTypes.string.isRequired,\n lead: PropTypes.shape({\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n }),\n subject: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n }).isRequired,\n ).isRequired,\n loading: PropTypes.bool.isRequired,\n available: PropTypes.bool.isRequired,\n onNextPage: PropTypes.func.isRequired,\n};\n\nexport default EmailList;\n","import { LIST_FILTER_OPTIONS } from './email-model';\nconst { INBOX, SEND, ARCHIVE, TRASH } = LIST_FILTER_OPTIONS;\n\n/**\n * Returns the label corresponding to the option\n *\n * @param {number} option - The type of filter\n *\n * @returns {string} The corresponding filter label\n */\nexport const getSelectedListOptionLabel = (option) => {\n switch (option) {\n case INBOX:\n return 'Inbox';\n case SEND:\n return 'Sent';\n case ARCHIVE:\n return 'Archived';\n case TRASH:\n return 'Trash';\n default:\n return 'Inbox';\n }\n};\n\nexport const getSelectedGmailOptionLabel = (option) => {\n switch (option) {\n case 'INBOX':\n return 'Inbox';\n case 'SENT':\n return 'Sent';\n case 'STARRED':\n return 'Starred';\n case 'TRASH':\n return 'Trash';\n default:\n return 'Inbox';\n }\n};\n\nexport const getSelectedOutlookOptionLabel = (option) => {\n switch (option) {\n case 'inbox':\n return 'Inbox';\n case 'sentitems':\n return 'Sent';\n case 'deleteditems':\n return 'Trash';\n default:\n return 'Inbox';\n }\n};\n\n/**\n * Recovers the email id from the current path from url\n *\n * @param {string} path - Current path of the app\n *\n * @returns {string} - The email id recovered from the path or empty\n */\nexport const getEmailIdFromPath = (path) => {\n const result = /\\/email\\/([a-zA-z0-9]+)\\/thread\\/([a-zA-z0-9]+)/.exec(path);\n\n if (result) {\n const emailId = result[1];\n\n return emailId;\n }\n\n return '';\n};\n\n/**\n * Formats subject for response\n *\n * @param {string} subject - The current format of the email\n *\n * @returns {string} - The desired format for the response mail\n */\nexport const formatResponseSubject = (subject) => {\n const result = /^Re:/.exec(subject);\n\n if (result) return subject;\n\n return `Re: ${subject.trim()}`;\n};\n\n/**\n * Gets text from first paragraph of the body\n *\n * @param {string} body - The content to get the paragraph from\n *\n * @returns {string} The first paragraph of the provided body\n */\nexport const getFirstParagraph = (body) => {\n const result = /([^<]*)<\\/p>/.exec(body);\n\n if (!result) return '';\n\n const { 1: paragraph } = result;\n\n return paragraph;\n};\n","import React from 'react';\nimport { Icon, Button as BoostButton, styled } from '@8base/boost';\nimport PropTypes from 'prop-types';\n\nexport const Button = styled(BoostButton)`\n background-color: #fff;\n border: 2px solid #000;\n color: #000;\n\n &:after {\n border: 4px solid #000;\n border-top-color: transparent;\n }\n\n ${(props) =>\n props.disabled\n ? `\n color: #CFD7DE;\n background-color: #E8EFF5;\n border: 1px solid #CFD7DE;\n\n & > span > i {\n display: none;\n }\n `\n : `\n &:hover {\n border: 2px solid #000;\n background-color: #fff;\n }\n \n &:active {\n border: 2px solid #000;\n background-color: #fff;\n }\n `}\n`;\n\nexport const GoogleButton = ({ children, ...rest }) => {\n return (\n \n );\n};\n\nGoogleButton.propTypes = {\n children: PropTypes.node.isRequired,\n};\n","import React from 'react';\nimport { Icon, Button as BoostButton, styled } from '@8base/boost';\nimport PropTypes from 'prop-types';\n\nexport const Button = styled(BoostButton)`\n background-color: #fff;\n border: 2px solid #000;\n color: #000;\n\n &:after {\n border: 4px solid #000;\n border-top-color: transparent;\n }\n\n ${(props) =>\n props.disabled\n ? `\n color: #CFD7DE;\n background-color: #E8EFF5;\n border: 1px solid #CFD7DE;\n\n & > span > i {\n display: none;\n }\n `\n : `\n &:hover {\n border: 2px solid #000;\n background-color: #fff;\n }\n \n &:active {\n border: 2px solid #000;\n background-color: #fff;\n }\n `}\n`;\n\nexport const MicrosoftButton = ({ children, ...rest }) => {\n return (\n \n );\n};\n\nMicrosoftButton.propTypes = {\n children: PropTypes.node.isRequired,\n};\n","import React, { useState, useEffect, useMemo } from 'react';\nimport { Column, Row, Button, Icon } from '@8base/boost';\nimport { GoogleButton } from '../../../shared/components/GoogleButton';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { FileInput } from '@8base-react/file-input';\nimport styled from 'styled-components';\nimport {\n OnCreateEmailError,\n OnFetchEmailConfig,\n OnFetchEmailConfigError,\n OnCreateOutlookEmailError,\n} from '../email-store';\nimport { MicrosoftButton } from '../../../shared/components/MicrosoftButton';\nimport { PRE_SIGNATURE } from '../email-model';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { IconTrash } from '../../../shared/components/ui/Icons';\nimport PropTypes from 'prop-types';\nimport { fetchEmailConfiguration, fetchUserSignature } from '../email-actions';\nimport { Editor } from '@tinymce/tinymce-react';\nimport { useUser } from '../../../shared/hooks/useUser';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport { OnCreateGoogleEmailError, OnUserSignatureEvent } from '../email-events';\n\nconst FormColumn = styled(Column)`\n & > div:not(:last-child) {\n border-bottom: 1px solid #e9eff4;\n }\n\n & > *:not(:last-child) {\n margin-bottom: 0px !important;\n }\n`;\n\nconst InputColumn = styled(Column)`\n padding: 5px 0px;\n`;\n\nconst Actions = styled.div`\n padding: 24px 0px;\n width: 100%;\n`;\n\nconst Label = styled.label`\n color: #9b9b9b;\n margin-right: 5px;\n`;\n\nconst Section = styled.div`\n ${(props) => (props.paddingLess ? 'padding: 0px !important' : 'padding: 0px 24px !important;')}\n display: flex;\n align-items: center;\n ${(props) => (props.stretch ? `width: 100%;` : '')}\n`;\n\nconst Div = styled.div`\n width: 50%;\n text-align: ${(props) => props.textAlign};\n`;\n\nconst Input = styled.input`\n width: ${(props) => (props.width ? props.width : '100%')};\n border: none !important;\n &:focus {\n outline: none !important;\n }\n\n &::placeholder {\n color: #cfd7de;\n }\n`;\n\nconst ReadOnly = styled.p`\n font-weight: 600;\n width: 100%;\n`;\n\nconst Normal = styled.span`\n font-weight: 400;\n`;\n\nconst TextBody = styled.p`\n font-size: 12px;\n text-align: center;\n width: 100%;\n`;\n\nconst IconDelete = styled.div`\n display: inline-flex;\n width: 16px;\n height: 16px;\n border-radius: 100%;\n background-color: #ccc;\n justify-content: center;\n align-items: center;\n > div {\n width: 10px;\n height: 3px;\n background: #fff;\n }\n`;\n\nconst onLoading = { config: true, signature: true };\n\nconst onNotLoading = { config: false, signature: false };\n\n/**\n * Email form component\n *\n * @param {object} props - The component's props object\n * @param {object} props.dest - The destination object\n * @param {string} props.dest.id - Id of the lead to relate the email\n * @param {string} props.threadId - The thread id where the email is going to be created\n * @param {string} props.initialSubject - Subject to initialize the input\n * @param {object} props.onSubmit - Handler of the click event on the submit button\n * @param {object} props.onTrash - Handler of the click event on the trash button\n *\n * @returns {React.Component} Component to render\n */\nfunction EmailForm({ dest, onSubmit, onSubmitWithGoogle, onSubmitWithOutlook, onTrash }) {\n const [to, setTo] = useState(dest?.to || '');\n const [cc, setCc] = useState(dest?.cc || '');\n let [subject, setSubject] = useState(dest?.subject || '');\n const [body, setBody] = useState('');\n const [attachments, setAttachments] = useState([]);\n const [loading, setLoading] = useState({ config: true, signature: true });\n const [signature, setSignature] = useState(null);\n const [config, setConfig] = useState(null);\n const [service, setService] = useState(null);\n const [user] = useUser();\n const agency = useAgency();\n\n useEffect(() => {\n setLoading(onLoading);\n\n fetchUserSignature();\n fetchEmailConfiguration(user.id, agency.id);\n }, [user, agency]);\n\n useEffect(() => {\n if (signature) {\n setBody((prevBody) => `${prevBody}${PRE_SIGNATURE}${signature}`);\n }\n }, [signature]);\n\n useEventSubscription(\n OnFetchEmailConfig,\n ({ gmail, outlook, outbound }) => {\n if (gmail && gmail.active) {\n setService(gmail);\n setConfig('GMAIL');\n } else if (outlook && outlook.active) {\n setService(outlook);\n setConfig('OUTLOOK');\n } else {\n setService(outbound);\n setConfig('MANUAL');\n }\n\n setLoading((prevState) => ({\n ...prevState,\n config: false,\n }));\n },\n [],\n );\n\n useEventSubscription(\n OnFetchEmailConfigError,\n (e) => {\n onErrorMixinFC(e);\n },\n [],\n );\n\n useEventSubscription(\n OnCreateEmailError,\n (e) => {\n setLoading(onNotLoading);\n\n onErrorMixinFC(e);\n },\n [],\n );\n\n useEventSubscription(\n OnCreateOutlookEmailError,\n (e) => {\n setLoading(onNotLoading);\n\n onErrorMixinFC(e);\n },\n [],\n );\n\n useEventSubscription(OnUserSignatureEvent, (data) => {\n if (data.user.isEnableSignature) {\n if (data.user.signature !== null) {\n setSignature(data.user.signature);\n }\n }\n\n setLoading((prevState) => ({\n ...prevState,\n signature: false,\n }));\n });\n\n const addFile = (value) => {\n const aux = [...attachments];\n aux.push(value);\n setAttachments(aux);\n };\n\n const deleteFile = (i) => {\n const aux = attachments.filter((file) => {\n return file !== attachments[i];\n });\n\n setAttachments(aux);\n };\n\n useEventSubscription(OnCreateGoogleEmailError, () => {\n setLoading(onNotLoading);\n });\n\n const emailAttachList = useMemo(\n () =>\n attachments.map((file) => {\n const url = file.downloadUrl;\n return `${file.filename}`;\n }),\n [attachments],\n );\n\n const handleSubmit = () => {\n setLoading(onLoading);\n\n let sub = subject.trim();\n\n if (dest && dest.isReply) {\n if (!/^Re: /.test(subject.match)) {\n sub = `Re: ${sub}`;\n }\n }\n\n onSubmit({\n to,\n cc,\n subject: sub,\n from: service.username,\n body: `${body}${attachments.length > 0 ? `
Attachments: ${emailAttachList}` : ''}`,\n attachments: attachments,\n lead: dest?.id ? { id: dest.id } : undefined,\n agency: { id: agency.id },\n user: { id: user.id },\n });\n };\n\n const handleSubmitWithGoogle = () => {\n setLoading(onLoading);\n\n onSubmitWithGoogle({\n subject,\n to,\n cc,\n content: body,\n agency: agency.id,\n });\n };\n\n const handleSubmitWithOutlook = () => {\n setLoading(onLoading);\n\n onSubmitWithOutlook({\n subject,\n cc,\n to,\n body,\n agency: agency.id,\n });\n };\n\n const attachmentsList = attachments.map((file, i) => {\n return (\n \n {file.filename}
\n deleteFile(i)}>\n \n \n
\n );\n });\n\n let submit = (\n <>\n \n \n {({ pick }) => (\n pick()} name=\"PaperClip\" color=\"ICON_GRAY\" cursor=\"pointer\" />\n )}\n \n \n );\n\n let from = service ? service.username : '';\n\n if (config === 'GMAIL') {\n submit = (\n \n Send\n \n );\n\n from = service.profile.email;\n }\n\n if (config === 'OUTLOOK') {\n submit = (\n \n Send\n \n );\n\n from = service.profile.email;\n }\n\n return (\n \n \n \n \n \n \n {from}\n \n
\n \n \n {dest ? (\n \n {dest.to}\n \n ) : (\n setTo(e.target.value)}\n placeholder=\"Emails\"\n />\n )}\n
\n \n \n setCc(e.target.value)}\n placeholder=\"Emails\"\n />\n
\n \n \n \n \n \n \n {dest && dest.subject ? (\n \n {subject}\n \n ) : (\n setSubject(e.target.value)}\n />\n )}\n
\n \n \n \n \n {attachmentsList.length < 1 ? There are no files : attachmentsList}\n \n \n \n \n \n \n {submit}\n
\n
\n \n \n
\n
\n \n \n \n );\n}\n\nEmailForm.propTypes = {\n dest: PropTypes.shape({\n id: PropTypes.string,\n to: PropTypes.string,\n cc: PropTypes.string,\n subject: PropTypes.string,\n isReply: PropTypes.bool,\n }),\n onSubmit: PropTypes.func.isRequired,\n onSubmitWithGoogle: PropTypes.func,\n onSubmitWithOutlook: PropTypes.func,\n onTrash: PropTypes.func.isRequired,\n};\n\nEmailForm.defaultProps = {\n onSubmitWithGoogle: () => {},\n onSubmitWithOutlook: () => {},\n initialSubject: '',\n threadId: '',\n dest: null,\n};\n\nexport default EmailForm;\n","import React from 'react';\nimport { Button, Modal, Card, Icon, Row, Heading } from '@8base/boost';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { OnCreateEmail, OnCreateOutlookEmail } from '../email-store';\nimport EmailForm from './EmailForm';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport * as toast from '../../../shared/components/toast/Toast';\n\nconst Body = styled(Card.Body)`\n min-width: 50vw;\n`;\n\n/**\n * Renders the Email form in a dialog\n *\n * @param {object} props - The component's prop object\n * @param {object} props.dest - The data to initially fill the form\n * @param {boolean} props.isOpen - Open/Closes the dialog\n * @param {Function} props.onSubmit - Handles submit operation\n * @param {Function} props.onClose - Handles close operation\n *\n * @returns {React.Component} Component to render\n */\nfunction EmailDialog({ dest, isOpen, onSubmit, onSubmitWithGoogle, onSubmitWithOutlook, onClose }) {\n useSubscription(\n OnCreateEmail,\n () => {\n onClose();\n\n toast.success('Success', 'Email sent successfully');\n },\n [onClose],\n );\n\n useSubscription(\n OnCreateOutlookEmail,\n () => {\n onClose();\n\n toast.success('Success', 'Email sent successfuly');\n },\n [onClose],\n );\n\n return (\n \n \n \n \n Compose Email\n \n
\n \n \n {isOpen && (\n \n )}\n \n \n \n );\n}\n\nEmailDialog.propTypes = {\n dest: PropTypes.object,\n isOpen: PropTypes.bool.isRequired,\n onSubmit: PropTypes.func.isRequired,\n onSubmitWithGoogle: PropTypes.func.isRequired,\n onSubmitWithOutlook: PropTypes.func.isRequired,\n onClose: PropTypes.func.isRequired,\n};\n\nEmailDialog.defaultProps = {\n dest: null,\n};\n\nexport default EmailDialog;\n","import React, { useState } from 'react';\nimport EmailDialog from './EmailDialog';\nimport { createNewEmail, createGoogleEmail, createOutlookEmail } from '../email-actions';\nimport PropTypes from 'prop-types';\nimport * as toast from '../../../shared/components/toast/Toast';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { OnCreateGoogleEmailError, OnCreateGoogleEmailEvent } from '../email-events';\n\nexport const ComposeEmailContext = React.createContext();\n\nexport const ComposeEmailProvider = ({ children }) => {\n const [isOpen, setIsOpen] = useState(false);\n const [dest, setDest] = useState(null);\n\n const onCompose = (dest = null) => {\n setIsOpen(true);\n setDest(dest);\n };\n\n const onSubmit = (form) => {\n createNewEmail(form);\n };\n\n const onSubmitWithGoogle = (form) => {\n createGoogleEmail(form);\n };\n\n const onSubmitWithOutlook = (form) => {\n createOutlookEmail(form);\n };\n\n const onClose = () => {\n setIsOpen(false);\n setDest(null);\n };\n\n useEventSubscription(OnCreateGoogleEmailEvent, () => {\n setIsOpen(false);\n setDest(null);\n\n toast.success('Success', 'Email sent successfully');\n });\n\n useEventSubscription(OnCreateGoogleEmailError, (e) => {\n toast.error(e.message);\n });\n\n return (\n \n {children}\n \n \n );\n};\n\nComposeEmailProvider.propTypes = {\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n};\n","import { useState, useEffect, useCallback } from 'react';\nimport { fetchEmails } from '../email-actions';\nimport { OnFetchEmails, OnFetchEmailsError } from '../email-store';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\n\nconst initialState = {\n items: [],\n count: 0,\n loading: false,\n error: null,\n};\n\n/**\n * Email list hook\n *\n * @param {string} user - The user id\n * @param {string} agency - The agency id\n * @param {object} filters - The data to filter the results\n *\n * @returns {object} Returns an Object\n */\nexport function useEmailList(user, agency, filters = {}) {\n const [state, setState] = useState(initialState);\n const [page, setPage] = useState(1);\n\n const fetch = useCallback(() => {\n if (filters.folder) {\n setState((prevState) => ({\n ...prevState,\n loading: true,\n items: page === 1 ? [] : prevState.items,\n }));\n\n fetchEmails(user, agency, filters, page);\n }\n }, [user, agency, filters, page]);\n\n const next = useCallback(() => {\n setPage((prevPage) => prevPage + 1);\n }, []);\n\n const refresh = useCallback(() => {\n if (page === 1) {\n setState((prevState) => ({\n ...prevState,\n loading: true,\n items: [],\n }));\n\n fetchEmails(user, agency, filters, page);\n } else {\n setPage(1);\n }\n }, [user, agency, filters, page]);\n\n useSubscription(\n OnFetchEmails,\n ({ mailList }) => {\n setState((prevState) => ({\n ...prevState,\n items: page === 1 ? mailList.items : [...prevState.items, ...mailList.items],\n count: mailList.count,\n loading: false,\n error: null,\n }));\n },\n [page],\n );\n\n useSubscription(\n OnFetchEmailsError,\n (e) => {\n setState((prevState) => ({\n ...prevState,\n loading: false,\n error: e,\n }));\n },\n [],\n );\n\n useEffect(() => {\n setPage(1);\n }, [filters]);\n\n useEffect(() => {\n fetch();\n }, [fetch]);\n\n return {\n ...state,\n next,\n refresh,\n };\n}\n","import React from 'react';\n\nexport const EmailProfileContext = React.createContext(null);\n","import React, { useEffect, useState, useContext, useCallback } from 'react';\nimport { Card, Icon, Row, Loader, Text, Paragraph, styled } from '@8base/boost';\nimport { useParams } from 'react-router';\nimport { fetchEmail } from '../email-actions';\nimport { OnFetchEmail, OnFetchEmailError } from '../email-store';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { useURLQuery } from '../../../shared/hooks/useURLQuery';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { Box } from '../../../shared/components/Box';\nimport { ComposeEmailContext } from './ComposeEmailProvider';\nimport { EmailProfileContext } from './EmailProfileContext';\n\nconst Body = styled(Card.Body)`\n height: 100%;\n`;\n\nexport const EmailDetails = () => {\n const { emailId } = useParams();\n const [loading, setLoading] = useState(true);\n const [query, setQuery] = useURLQuery();\n const [email, setEmail] = useState(null);\n const { onCompose } = useContext(ComposeEmailContext);\n const outbound = useContext(EmailProfileContext);\n\n useEffect(() => {\n setLoading(true);\n\n fetchEmail(emailId);\n }, [emailId]);\n\n const onReply = useCallback(() => {\n const cc = [...(email.to || '').split(','), ...(email.ccopy || '').split(',')]\n .filter((address) => address.trim() !== outbound.username)\n .join(',');\n\n onCompose({\n id: email.lead?.id,\n from: outbound.username,\n to: email.from,\n cc,\n subject: email.subject,\n isReply: true,\n });\n }, [email, outbound, onCompose]);\n\n useSubscription(\n OnFetchEmail,\n ({ mail }) => {\n setEmail(mail);\n setLoading(false);\n },\n [],\n );\n\n useSubscription(\n OnFetchEmailError,\n (e) => {\n onErrorMixinFC(e);\n\n setLoading(false);\n },\n [],\n );\n\n const onClose = () => setQuery('/email', query);\n\n const canReply = email?.type === 'INBOX';\n\n const users =\n email && !loading ? (\n \n \n \n \n From\n \n {email.from}\n
\n \n \n \n \n To\n \n {email.to}\n
\n \n \n \n \n CC\n \n {email.ccopy}\n
\n \n \n ) : null;\n\n const content = loading ? (\n \n \n
\n ) : (\n \n \n \n );\n\n return (\n \n \n \n \n \n {email?.subject}\n \n \n \n {email && canReply && (\n \n )}\n \n
\n
\n \n \n {users}\n {content}\n \n \n );\n};\n","import React, { useState, useEffect, useCallback, useContext, useRef } from 'react';\nimport { Switch, Route } from 'react-router-dom';\nimport { Icon, Dropdown, Menu, Row, Column, Button } from '@8base/boost';\nimport { ButtonIcon } from '../../../shared/components/ui/buttons/ButtonIcon';\nimport SearchInput from './SearchInput';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { Title } from '../../../shared/components/ui/text/Title';\nimport composeEmail from '../../../shared/assets/images/compose-email.svg';\nimport { IconUpdateGrey } from '../../../shared/components/ui/Icons';\nimport styled from '@emotion/styled';\nimport { useUser } from '../../../shared/hooks/useUser';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport EmailList from './EmailList';\nimport { LIST_FILTER_OPTIONS } from '../email-model';\nimport { getSelectedListOptionLabel } from '../email-utils';\n// import Thread from './Thread';\n// import ThreadFallback from './ThreadFallback';\nimport { ComposeEmailContext } from './ComposeEmailProvider';\nimport { useEmailList } from '../hooks/useEmailList';\nimport { useURLQuery } from '../../../shared/hooks/useURLQuery';\nimport { EmailDetails } from './EmailDetails';\n\nconst { INBOX, SEND, ARCHIVE, TRASH } = LIST_FILTER_OPTIONS;\n\nconst MailListToolbarRow = styled(Row)`\n width: 100%;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 0px !important;\n`;\n\nconst StyledColumn = styled(Column)`\n margin-right: 0px !important;\n height: 100%;\n position: relative;\n`;\n\nconst StyledDivBorder = styled(Column)`\n border-bottom: 1px solid #d8d8d8;\n padding: 24px;\n`;\n\nconst Container = styled.div`\n height: ${({ top }) => (top ? `calc(100vh - ${top}px)` : 'auto')};\n`;\n\nconst StyledRow = styled(Row)`\n margin-top: 16px;\n width: 100%;\n`;\n\nconst InboxSection = styled.div`\n width: 385px;\n height: 100%;\n border-right: 1px solid #d8d8d8;\n overflow: auto;\n`;\n\nconst ThreadContainer = styled.div`\n width: 100%;\n height: 100%;\n padding: 24px;\n`;\n\nexport const ManualEmailsView = () => {\n const [user] = useUser();\n const agency = useAgency();\n const [query, setQuery] = useURLQuery();\n const [top, setTop] = useState(null);\n const { onCompose } = useContext(ComposeEmailContext);\n const container = useRef(null);\n const { items, loading, count, next, refresh, error } = useEmailList(user.id, agency.id, query);\n\n useEffect(() => {\n if (!query.folder) {\n setQuery('/email', {\n ...query,\n folder: INBOX,\n });\n }\n }, [query, setQuery]);\n\n useEffect(() => {\n const { top } = container.current.getBoundingClientRect();\n setTop(top);\n }, []);\n\n useEffect(() => {\n if (error) {\n onErrorMixinFC(error);\n }\n }, [error]);\n\n const onFolderChange = useCallback(\n (folder, callback) => {\n setQuery('/email', {\n ...query,\n folder,\n });\n\n if (callback) {\n callback();\n }\n },\n [query, setQuery],\n );\n\n const onSearch = useCallback(\n (search) => {\n setQuery('/email', {\n ...query,\n search: search ? search : undefined,\n });\n },\n [query, setQuery],\n );\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n {({ toggleDropdown }) => (\n \n )}\n \n \n \n \n onCompose()}\n />\n \n \n \n \n \n \n \n \n \n \n \n \n \n {/* */}\n \n \n
\n \n \n );\n};\n","import { useState, useEffect, useCallback, useRef } from 'react';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { OnFetchGmailList, OnFetchGmailListError } from '../email-store';\nimport { fetchGoogleEmails } from '../email-actions';\n\nconst initialState = {\n items: [],\n count: 0,\n loading: true,\n error: null,\n next: null,\n};\n\n/**\n * Manages email fetching with the gmail api\n *\n * @param {string} agency - The agency id\n * @param {object} filters - Object with the data to filter\n *\n * @returns {object} The hook state\n */\nexport function useGmailList(agency, filters = {}) {\n const [state, setState] = useState(initialState);\n const after = useRef(null);\n\n const fetch = useCallback(() => {\n setState((prevState) => ({ ...prevState, loading: true }));\n\n fetchGoogleEmails(agency, 10, state.next, filters);\n }, [agency, state.next, filters]);\n\n const refresh = useCallback(() => {\n if (state.next) {\n setState((prevState) => ({\n ...prevState,\n items: [],\n count: 0,\n error: null,\n next: null,\n }));\n } else {\n setState((prevState) => ({\n ...prevState,\n items: [],\n count: 0,\n error: null,\n }));\n\n fetch();\n }\n }, [state.next, fetch]);\n\n const next = useCallback(() => {\n setState((prevState) => ({\n ...prevState,\n next: after.current,\n }));\n }, []);\n\n useSubscription(\n OnFetchGmailList,\n ({ googleEmailsList }) => {\n after.current = googleEmailsList.next;\n\n setState((prevState) => ({\n ...prevState,\n count: googleEmailsList.count,\n items:\n prevState.next === null\n ? googleEmailsList.items\n : [...prevState.items, ...googleEmailsList.items],\n loading: false,\n error: null,\n }));\n },\n [],\n );\n\n useSubscription(\n OnFetchGmailListError,\n (e) => {\n setState((prevState) => ({\n ...prevState,\n loading: false,\n error: e,\n }));\n },\n [],\n );\n\n useEffect(() => {\n after.current = null;\n\n setState(initialState);\n }, [filters]);\n\n useEffect(() => {\n fetch();\n }, [fetch]);\n\n return {\n ...state,\n refresh,\n next,\n hasMore: after.current !== null,\n };\n}\n","import React, { useCallback, useMemo } from 'react';\nimport { Grid, Avatar, Text, Column, Paragraph } from '@8base/boost';\nimport { Box } from '../../../shared/components/Box';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { useURLQuery } from '../../../shared/hooks/useURLQuery';\n\nexport const GmailListItem = ({ email }) => {\n const [query, setQuery] = useURLQuery();\n\n const onClick = useCallback(() => {\n setQuery(`/email/${email.id}`, query);\n }, [query, email, setQuery]);\n\n const from = useMemo(\n () => email.payload.headers.find((header) => header.name.toLowerCase() === 'from'),\n [email],\n );\n\n const subject = useMemo(\n () => email.payload.headers.find((header) => header.name.toLowerCase() === 'subject'),\n [email],\n );\n\n const [firstName, lastName] = from.value.split(' ');\n\n return (\n \n \n \n \n \n \n \n \n {from.value}\n \n \n \n {moment(parseInt(email.internalDate)).format('MM-DD-YYYY, hh:mm a')}\n {subject.value}\n \n \n );\n};\n\nGmailListItem.propTypes = {\n email: PropTypes.shape({\n id: PropTypes.string.isRequired,\n payload: PropTypes.shape({\n headers: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n }),\n ),\n }).isRequired,\n internalDate: PropTypes.string.isRequired,\n }).isRequired,\n};\n","import React, { useMemo } from 'react';\nimport { Box } from '../../../shared/components/Box';\nimport { GmailListItem } from './GmailListItem';\nimport { Row, Loader, Link } from '@8base/boost';\nimport PropTypes from 'prop-types';\n\nexport const GmailList = (props) => {\n const emails = useMemo(\n () => props.items.map((email) => ),\n [props.items],\n );\n\n const loading = props.loading ? (\n \n \n \n
\n \n ) : null;\n\n const next =\n !props.loading && props.hasMore ? (\n \n \n \n Load more\n \n
\n \n ) : null;\n\n return (\n \n {emails}\n {loading}\n {next}\n \n );\n};\n\nGmailList.propTypes = {\n items: PropTypes.arrayOf({\n id: PropTypes.string.isRequired,\n payload: PropTypes.shape({\n headers: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n }),\n ),\n }).isRequired,\n internalDate: PropTypes.string.isRequired,\n }).isRequired,\n loading: PropTypes.bool.isRequired,\n hasMore: PropTypes.bool.isRequired,\n onMore: PropTypes.bool.isRequired,\n};\n","import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { GoogleButton } from '../../../shared/components/GoogleButton';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { fetchUserSignature, replyGoogleEmail } from '../email-actions';\nimport { OnReplyGoogleEmail, OnReplyGoogleEmailError } from '../email-store';\nimport { Box } from '../../../shared/components/Box';\nimport { Editor } from '@tinymce/tinymce-react';\nimport { Dialog, Row, Icon, useModal, Loader, Card, Text } from '@8base/boost';\nimport * as toast from '../../../shared/components/toast/Toast';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport { useURLQuery } from '../../../shared/hooks/useURLQuery';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { OnUserSignatureEvent } from '../email-events';\n\nexport const modalId = 'gmail-reply-dialog';\n\nexport const GmailReplyDialog = () => {\n const { isOpen, args, closeModal } = useModal(modalId);\n const [loading, setLoading] = useState(true);\n const [submitting, setSubmitting] = useState(false);\n const [signature, setSignature] = useState('');\n const [, setQuery] = useURLQuery();\n const editorRef = useRef(null);\n const agency = useAgency();\n\n useEffect(() => {\n if (isOpen) {\n setLoading(true);\n\n fetchUserSignature();\n } else {\n setSignature('');\n }\n }, [isOpen]);\n\n useEventSubscription(OnUserSignatureEvent, ({ user }) => {\n if (user && user.isEnableSignature) {\n setSignature(user.signature || '');\n }\n\n setLoading(false);\n });\n\n useEventSubscription(\n OnReplyGoogleEmail,\n ({ googleEmailCreate }) => {\n toast.success('Success', 'Email sent successfuly');\n\n setQuery(`/email/${googleEmailCreate.id}`, {\n type: 'SENT',\n });\n\n closeModal(modalId);\n },\n [setQuery, closeModal],\n );\n\n useEventSubscription(\n OnReplyGoogleEmailError,\n (e) => {\n onErrorMixinFC(e);\n },\n [],\n );\n\n const close = useCallback(() => {\n if (!submitting) {\n closeModal(modalId);\n }\n }, [submitting, closeModal]);\n\n const onSubmit = useCallback(() => {\n if (editorRef.current) {\n setSubmitting(true);\n\n replyGoogleEmail({\n to: args.to,\n subject: args.subject,\n content: editorRef.current.getContent(),\n agency: agency.id,\n threadId: args.threadId,\n });\n }\n }, [args, agency]);\n\n const content = loading ? (\n \n \n \n
\n \n ) : (\n (editorRef.current = editor)}\n apiKey={process.env.REACT_APP_EDITOR_API_KEY}\n initialValue={signature}\n init={{\n height: 300,\n width: '100%',\n menubar: false,\n plugins: [\n 'advlist autolink lists link image charmap print preview anchor',\n 'searchreplace visualblocks code fullscreen',\n 'insertdatetime media table paste code',\n ],\n toolbar:\n 'fontselect fontsizeselect capitalize | bold italic underline forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code',\n }}\n />\n );\n\n return (\n \n );\n};\n","import React, { useCallback, useEffect, useState, useMemo } from 'react';\nimport { useParams } from 'react-router';\nimport { Card, Row, Loader, Icon, useModal, styled } from '@8base/boost';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { fetchGoogleEmail } from '../email-actions';\nimport { OnFetchGmailItem, OnFetchGmailItemError } from '../email-store';\nimport { useURLQuery } from '../../../shared/hooks/useURLQuery';\nimport { GmailReplyDialog, modalId } from './GmailReplyDialog';\n\nconst Body = styled(Card.Body)`\n height: 100%;\n`;\n\nexport const GmailDetails = () => {\n const { emailId } = useParams();\n const agency = useAgency();\n const [query, setQuery] = useURLQuery();\n const [email, setEmail] = useState(null);\n const [loading, setLoading] = useState(true);\n const { openModal } = useModal(modalId);\n\n useEffect(() => {\n setLoading(true);\n setEmail(null);\n fetchGoogleEmail(emailId, agency.id);\n }, [emailId, agency]);\n\n useSubscription(\n OnFetchGmailItem,\n ({ googleEmail }) => {\n setEmail(googleEmail);\n setLoading(false);\n },\n [],\n );\n\n useSubscription(\n OnFetchGmailItemError,\n (e) => {\n onErrorMixinFC(e);\n },\n [],\n );\n\n const onClose = useCallback(() => {\n setQuery('/email', query);\n }, [query, setQuery]);\n\n const onReply = useCallback(() => {\n if (!loading) {\n const subject = email.payload.headers.find(\n (header) => header.name.toLowerCase() === 'subject',\n );\n\n const to = email.payload.headers.find((header) => header.name.toLowerCase() === 'from');\n\n openModal(modalId, {\n subject: subject.value,\n to: to.value,\n threadId: email.threadId,\n });\n }\n }, [loading, email, openModal]);\n\n const canReply = useMemo(() => {\n if (!email) {\n return false;\n }\n\n return !email.labelIds.includes('SENT');\n }, [email]);\n\n const content = loading ? (\n \n \n
\n ) : (\n \n \n \n );\n\n return (\n \n \n \n {canReply && (\n \n )}\n \n
\n \n {content}\n \n \n );\n};\n","import React, { useCallback, useEffect, useContext } from 'react';\nimport { Switch, Route } from 'react-router-dom';\nimport { Grid, Dropdown, Button, Menu, Icon, Row, Column, styled } from '@8base/boost';\nimport { useGmailList } from '../hooks/useGmailList';\nimport { ButtonIcon } from '../../../shared/components/ui/buttons/ButtonIcon';\nimport { Title } from '../../../shared/components/ui/text/Title';\nimport { GmailList } from './GmailList';\nimport { getSelectedGmailOptionLabel } from '../email-utils';\nimport { Box } from '../../../shared/components/Box';\nimport { useURLQuery } from '../../../shared/hooks/useURLQuery';\nimport { IconUpdateGrey } from '../../../shared/components/ui/Icons';\nimport google from '../../../shared/assets/images/google.svg';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport SearchInput from './SearchInput';\nimport { GmailDetails } from './GmailDetails';\nimport { ComposeEmailContext } from './ComposeEmailProvider';\n\nconst Layout = styled(Grid.Layout)`\n height: 100%;\n max-height: 100%;\n`;\n\nexport const GmailEmailsView = () => {\n const agency = useAgency();\n const [query, setQuery] = useURLQuery();\n const { items, loading, hasMore, next, refresh } = useGmailList(agency.id, query);\n const { onCompose } = useContext(ComposeEmailContext);\n\n useEffect(() => {\n if (!query.type) {\n setQuery('/email', {\n ...query,\n type: 'INBOX',\n });\n }\n }, [query, setQuery]);\n\n const handleType = useCallback(\n (type, callback) => {\n setQuery('/email', {\n ...query,\n type,\n });\n\n if (callback) {\n callback();\n }\n },\n [query, setQuery],\n );\n\n const handleSearch = useCallback(\n (value) => {\n setQuery('/email', {\n ...query,\n q: value || undefined,\n });\n },\n [query, setQuery],\n );\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n {({ toggleDropdown }) => (\n \n )}\n \n \n onCompose()}\n disabled={loading}\n />\n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n","import { useState, useEffect, useCallback, useRef } from 'react';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { OnFetchOutlookEmails, OnFetchOutlookEmailsError } from '../email-store';\nimport { fetchOutlookEmails } from '../email-actions';\n\nconst initialState = {\n items: [],\n count: 0,\n loading: true,\n error: null,\n next: null,\n};\n\n/**\n * Manages email fetching with the outlook api\n *\n * @param {string} agency - The agency id\n * @param {object} filters - Object with the data to filter\n *\n * @returns {object} The hook state\n */\nexport function useOutlookList(agency, filters = {}) {\n const [state, setState] = useState(initialState);\n const after = useRef(null);\n\n const fetch = useCallback(() => {\n if (filters.folder) {\n setState((prevState) => ({ ...prevState, loading: true }));\n\n fetchOutlookEmails(agency, state.next, filters);\n }\n }, [agency, state.next, filters]);\n\n const refresh = useCallback(() => {\n if (state.next) {\n setState((prevState) => ({\n ...prevState,\n items: [],\n count: 0,\n error: null,\n next: null,\n }));\n } else {\n setState((prevState) => ({\n ...prevState,\n items: [],\n count: 0,\n error: null,\n }));\n\n fetch();\n }\n }, [state.next, fetch]);\n\n const next = useCallback(() => {\n setState((prevState) => ({\n ...prevState,\n next: after.current,\n }));\n }, []);\n\n useSubscription(\n OnFetchOutlookEmails,\n ({ outlookEmailsList }) => {\n after.current = outlookEmailsList.next;\n\n setState((prevState) => ({\n ...prevState,\n count: outlookEmailsList.count,\n items:\n prevState.next === null\n ? outlookEmailsList.items\n : [...prevState.items, ...outlookEmailsList.items],\n loading: false,\n error: null,\n }));\n },\n [],\n );\n\n useSubscription(\n OnFetchOutlookEmailsError,\n (e) => {\n setState((prevState) => ({\n ...prevState,\n loading: false,\n error: e,\n }));\n },\n [],\n );\n\n useEffect(() => {\n after.current = null;\n\n setState(initialState);\n }, [filters]);\n\n useEffect(() => {\n fetch();\n }, [fetch]);\n\n return {\n ...state,\n refresh,\n next,\n hasMore: after.current !== null,\n };\n}\n","import React, { useCallback } from 'react';\nimport { Grid, Avatar, Text, Column, Paragraph } from '@8base/boost';\nimport { Box } from '../../../shared/components/Box';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { useURLQuery } from '../../../shared/hooks/useURLQuery';\n\nexport const OutlookListItem = ({ email }) => {\n const [query, setQuery] = useURLQuery();\n\n const onClick = useCallback(() => {\n setQuery(`/email/${email.id}`, query);\n }, [query, email, setQuery]);\n\n const [firstName, lastName] = email.from.name.split(' ');\n\n return (\n \n \n \n \n \n \n \n \n {email.from.address}\n \n \n \n {moment(email.createdAt).format('MM-DD-YYYY, hh:mm a')}\n {email.subject}\n \n \n );\n};\n\nOutlookListItem.propTypes = {\n email: PropTypes.shape({\n id: PropTypes.string.isRequired,\n subject: PropTypes.string.isRequired,\n from: PropTypes.shape({\n name: PropTypes.string.isRequired,\n address: PropTypes.string.isRequired,\n }).isRequired,\n createdAt: PropTypes.string.isRequired,\n }).isRequired,\n};\n","import React, { useMemo } from 'react';\nimport { Box } from '../../../shared/components/Box';\nimport { OutlookListItem } from './OutlookListItem';\nimport { Row, Loader, Link } from '@8base/boost';\nimport PropTypes from 'prop-types';\n\nexport const OutlookList = (props) => {\n const emails = useMemo(\n () => props.items.map((email) => ),\n [props.items],\n );\n\n const loading = props.loading ? (\n \n \n \n
\n \n ) : null;\n\n const next =\n !props.loading && props.hasMore ? (\n \n \n \n Load more\n \n
\n \n ) : null;\n\n return (\n \n {emails}\n {loading}\n {next}\n \n );\n};\n\nOutlookList.propTypes = {\n items: PropTypes.arrayOf({\n id: PropTypes.string.isRequired,\n subject: PropTypes.string.isRequired,\n from: PropTypes.shape({\n name: PropTypes.string.isRequired,\n address: PropTypes.string.isRequired,\n }).isRequired,\n createdAt: PropTypes.string.isRequired,\n }).isRequired,\n loading: PropTypes.bool.isRequired,\n hasMore: PropTypes.bool.isRequired,\n onMore: PropTypes.bool.isRequired,\n};\n","import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { MicrosoftButton } from '../../../shared/components/MicrosoftButton';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { fetchUserSignature, replyOutlookEmail } from '../email-actions';\nimport { OnReplyOutlookEmail, OnReplyOutlookEmailError } from '../email-store';\nimport { Box } from '../../../shared/components/Box';\nimport { Editor } from '@tinymce/tinymce-react';\nimport { Dialog, Row, Icon, useModal, Loader, Card, Text } from '@8base/boost';\nimport * as toast from '../../../shared/components/toast/Toast';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport { useURLQuery } from '../../../shared/hooks/useURLQuery';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { OnUserSignatureEvent } from '../email-events';\n\nexport const modalId = 'outlook-reply-dialog';\n\nexport const OutlookReplyDialog = () => {\n const { isOpen, args, closeModal } = useModal(modalId);\n const [loading, setLoading] = useState(true);\n const [submitting, setSubmitting] = useState(false);\n const [signature, setSignature] = useState('');\n const [, setQuery] = useURLQuery();\n const editorRef = useRef(null);\n const agency = useAgency();\n\n useEffect(() => {\n if (isOpen) {\n setLoading(true);\n\n fetchUserSignature();\n } else {\n setSignature('');\n }\n }, [isOpen]);\n\n useEventSubscription(OnUserSignatureEvent, ({ user }) => {\n if (user && user.isEnableSignature) {\n setSignature(user.signature || '');\n }\n\n setLoading(false);\n });\n\n useEventSubscription(\n OnReplyOutlookEmail,\n () => {\n toast.success('Success', 'Email sent successfuly');\n\n setLoading(false);\n\n setQuery('/email', {\n folder: 'sentitems',\n });\n\n closeModal(modalId);\n },\n [setQuery, closeModal],\n );\n\n useEventSubscription(\n OnReplyOutlookEmailError,\n (e) => {\n onErrorMixinFC(e);\n },\n [],\n );\n\n const close = useCallback(() => {\n if (!submitting) {\n closeModal(modalId);\n }\n }, [submitting, closeModal]);\n\n const onSubmit = useCallback(() => {\n if (editorRef.current) {\n setSubmitting(true);\n\n replyOutlookEmail({\n agency: agency.id,\n body: editorRef.current.getContent(),\n replyId: args.emailId,\n });\n }\n }, [args, agency]);\n\n const content = loading ? (\n \n \n \n
\n \n ) : (\n (editorRef.current = editor)}\n apiKey={process.env.REACT_APP_EDITOR_API_KEY}\n initialValue={signature}\n init={{\n height: 300,\n width: '100%',\n menubar: false,\n plugins: [\n 'advlist autolink lists link image charmap print preview anchor',\n 'searchreplace visualblocks code fullscreen',\n 'insertdatetime media table paste code',\n ],\n toolbar:\n 'fontselect fontsizeselect capitalize | bold italic underline forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code',\n }}\n />\n );\n\n return (\n \n );\n};\n","import React, { useCallback, useEffect, useState, useMemo, useContext } from 'react';\nimport { useParams } from 'react-router';\nimport { Card, Row, Loader, Icon, useModal, Text, styled } from '@8base/boost';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { fetchOutlookEmail } from '../email-actions';\nimport { OnFetchOutlookEmailError, OnFetchOutlookEmail } from '../email-store';\nimport { useURLQuery } from '../../../shared/hooks/useURLQuery';\nimport { OutlookReplyDialog, modalId } from './OutlookReplyDialog';\nimport { EmailProfileContext } from './EmailProfileContext';\nimport { Box } from '../../../shared/components/Box';\n\nconst Body = styled(Card.Body)`\n height: 100%;\n`;\n\nexport const OutlookDetails = () => {\n const { emailId } = useParams();\n const agency = useAgency();\n const [query, setQuery] = useURLQuery();\n const [email, setEmail] = useState(null);\n const [loading, setLoading] = useState(true);\n const outlookProfile = useContext(EmailProfileContext);\n const { openModal } = useModal(modalId);\n\n useEffect(() => {\n setLoading(true);\n setEmail(null);\n fetchOutlookEmail(emailId, agency.id);\n }, [emailId, agency]);\n\n useSubscription(\n OnFetchOutlookEmail,\n ({ outlookEmail }) => {\n setEmail(outlookEmail);\n setLoading(false);\n },\n [],\n );\n\n useSubscription(\n OnFetchOutlookEmailError,\n (e) => {\n onErrorMixinFC(e);\n },\n [],\n );\n\n const onClose = useCallback(() => {\n setQuery('/email', query);\n }, [query, setQuery]);\n\n const onReply = useCallback(() => {\n if (!loading) {\n openModal(modalId, {\n subject: email.subject,\n emailId: email.id,\n });\n }\n }, [loading, email, openModal]);\n\n const canReply = email?.from?.address !== outlookProfile?.email;\n\n const to = useMemo(() => {\n if (!email) {\n return '';\n }\n\n return email.to.map((address) => address.address).join(', ');\n }, [email]);\n\n const users = email ? (\n \n \n From: {email.from.address}\n \n \n To: {to}\n \n \n ) : null;\n\n const content = loading ? (\n \n \n
\n ) : (\n \n \n \n );\n\n return (\n \n \n \n {email && canReply && (\n \n )}\n \n
\n \n \n {users}\n {content}\n \n \n \n );\n};\n","import React, { useCallback, useEffect, useContext } from 'react';\nimport { Switch, Route } from 'react-router-dom';\nimport { Grid, Dropdown, Button, Menu, Icon, Row, Column, styled } from '@8base/boost';\nimport { useOutlookList } from '../hooks/useOutlookList';\nimport { ButtonIcon } from '../../../shared/components/ui/buttons/ButtonIcon';\nimport { Title } from '../../../shared/components/ui/text/Title';\nimport { OutlookList } from './OutlookList';\nimport { getSelectedOutlookOptionLabel } from '../email-utils';\nimport { Box } from '../../../shared/components/Box';\nimport { useURLQuery } from '../../../shared/hooks/useURLQuery';\nimport { IconUpdateGrey } from '../../../shared/components/ui/Icons';\nimport microsoft from '../../../shared/assets/images/microsoft.svg';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport SearchInput from './SearchInput';\nimport { OutlookDetails } from './OutlookDetails';\nimport { ComposeEmailContext } from './ComposeEmailProvider';\n\nconst Layout = styled(Grid.Layout)`\n height: 100%;\n max-height: 100%;\n`;\n\nexport const OutlookEmailsView = () => {\n const agency = useAgency();\n const [query, setQuery] = useURLQuery();\n const { items, loading, hasMore, next, refresh } = useOutlookList(agency.id, query);\n const { onCompose } = useContext(ComposeEmailContext);\n\n useEffect(() => {\n if (!query.folder) {\n setQuery('/email', {\n ...query,\n folder: 'inbox',\n });\n }\n }, [query, setQuery]);\n\n const handlFolder = useCallback(\n (folder, callback) => {\n setQuery('/email', {\n ...query,\n folder,\n });\n\n if (callback) {\n callback();\n }\n },\n [query, setQuery],\n );\n\n const handleSearch = useCallback(\n (value) => {\n setQuery('/email', {\n ...query,\n search: value || undefined,\n });\n },\n [query, setQuery],\n );\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n {({ toggleDropdown }) => (\n \n )}\n \n \n onCompose()}\n disabled={loading}\n />\n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n","import React, { useState, useEffect } from 'react';\nimport { ManualEmailsView } from './components/ManualEmailsView';\nimport { GmailEmailsView } from './components/GmailEmailsView';\nimport { Row, Loader } from '@8base/boost';\nimport { useAgency } from '../../shared/hooks/useAgency';\nimport { Box } from '../../shared/components/Box';\nimport { useUser } from '../../shared/hooks/useUser';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { fetchEmailConfiguration } from './email-actions';\nimport { OnFetchEmailConfig, OnFetchEmailConfigError } from './email-store';\nimport { onErrorMixinFC } from '../../shared/mixins';\nimport { OutlookEmailsView } from './components/OutlookEmailsView';\nimport { EmailProfileContext } from './components/EmailProfileContext';\n\n/**\n * Email view\n *\n * @returns {React.Component} The component to render\n */\nfunction Email() {\n const agency = useAgency();\n const [user] = useUser();\n const [loading, setLoading] = useState(true);\n const [mode, setMode] = useState('manual');\n const [profile, setProfile] = useState(null);\n\n useEffect(() => {\n setLoading(true);\n\n fetchEmailConfiguration(user.id, agency.id);\n }, [agency.id, user.id]);\n\n useSubscription(\n OnFetchEmailConfig,\n ({ gmail, outlook, outbound }) => {\n if (gmail && gmail.active) {\n setProfile(gmail.profile);\n setMode('gmail');\n }\n\n if (outlook && outlook.active) {\n setProfile(outlook.profile);\n setMode('outlook');\n }\n\n if (outbound && outbound.active) {\n setProfile(outbound);\n setMode('manual');\n }\n\n setLoading(false);\n },\n [],\n );\n\n useSubscription(\n OnFetchEmailConfigError,\n (e) => {\n onErrorMixinFC(e);\n\n setLoading(false);\n },\n [],\n );\n\n if (loading) {\n return (\n \n \n \n
\n \n );\n }\n\n if (mode === 'gmail') {\n return (\n \n \n \n );\n }\n\n if (mode === 'outlook') {\n return (\n \n \n \n );\n }\n\n return (\n \n \n \n );\n}\n\nexport default Email;\n","import { useState, useCallback, useEffect } from 'react';\nimport { fetchLeadsLight, createFilter } from '../leads-actions';\nimport { useSubscription } from '@apollo/client/react/hooks';\nimport { LEADS_LIST_LIGHT_SUBSCRIPTION } from '../leads-queries';\nimport { SUBSCRIPTIONS_OPERATIONS } from '../../../shared/constants/8base';\n\nconst initialState = {\n items: [],\n count: 0,\n loading: true,\n error: null,\n};\n\n/**\n * Hook that fetches a list of leads in an agency\n *\n * @param {string} agency - The agency id\n * @param {string} sort - The order of the results\n * @param {string} filters - Data to create a filter from\n * @param {string} filters.firstName - To search leads by their first name\n * @param {string} filters.middleName - To search leads by their middle name\n * @param {string} filters.lastName - To searcg leads by their last name\n * @param {string} filters.createdAfter - Filter for leads created after the date (YYYY-MM-DD hh:mm:ss)\n * @param {string} filters.createdBefore - Filter for leads created before the date (YYYY-MM-DD hh:mm:ss)\n * @param {string} filters.leadType - Type of the lead (Auto, Comercial Auto, Employee, etc)\n * @param {string} filters.campaign - The campaign id\n * @param {string} filters.leadVendor - Lead vendor id\n * @param {string} filters.assignedTo - The id of the user assigned to the lead (, \"None\" or Empty)\n * @param {string} filters.hasNotes - If the lead should have notes or not\n * @param {string} filters.phoneNumber - A phone number to filter leads from\n *\n * @returns {object} The list state\n */\nexport function useAgencyLeads(agency, sort, filters = {}) {\n const [page, setPage] = useState(1);\n const [state, setState] = useState(initialState);\n\n const fetch = useCallback(async () => {\n setState((prevState) => ({ ...prevState, loading: true }));\n\n const data = await fetchLeadsLight(\n page,\n {\n agency,\n sort,\n ...filters,\n },\n filters.search || '',\n );\n\n if (data && data.leadsList) {\n setState((prevState) => ({\n ...prevState,\n items: data.leadsList.items,\n count: data.leadsList.count,\n loading: false,\n error: null,\n }));\n } else {\n setState((prevState) => ({\n ...prevState,\n items: [],\n count: 0,\n loading: false,\n error: new Error('Something happened while fetching the leads'),\n }));\n }\n }, [agency, sort, page, filters]);\n\n useEffect(() => {\n setPage(1);\n }, [filters]);\n\n useEffect(() => {\n fetch();\n }, [fetch]);\n\n const { data } = useSubscription(LEADS_LIST_LIGHT_SUBSCRIPTION, {\n variables: { filter: createFilter(filters, filters.search) },\n });\n\n useEffect(() => {\n if (!data) return;\n\n const { mutation, node } = data.Lead;\n\n if (mutation === SUBSCRIPTIONS_OPERATIONS.UPDATE) {\n setState((prevState) => {\n if (prevState.items.length === 0) {\n return prevState;\n }\n\n return {\n ...prevState,\n items: prevState.items.map((item) => (item.id === node.id ? node : item)),\n };\n });\n } else {\n fetch();\n }\n }, [data, fetch]);\n\n return {\n ...state,\n refresh: fetch,\n page,\n setPage,\n };\n}\n","import React, { useState } from 'react';\nimport { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { compose } from 'recompose';\nimport { withAuth } from '@8base/react-sdk';\nimport { withApollo } from '@apollo/client/react/hoc';\nimport MainLoader from 'shared/components/ui/MainLoader';\nimport { useHistory } from 'react-router-dom';\n\n//Component to monitor statuses of registration for messaging and phone services\nconst Welcome = ({ checkRegistration, ...restProps }) => {\n const history = useHistory();\n const [registration, setRegistration] = useState(undefined);\n\n useEffect(() => {\n checkRegistration().then((res) => {\n setRegistration(res);\n });\n }, [checkRegistration]);\n useEffect(() => {\n if (registration === true) {\n history.push('/dashboard');\n }\n if (registration === false && restProps.location.pathname !== '/waiting-phone-registration') {\n history.push('/waiting-phone-registration');\n }\n }, [history, registration, restProps.location.pathname]);\n return ;\n};\n\nexport default compose(withApollo, withAuth)(Welcome);\n","export const ENTITIES = {\n LEAD: 'LEAD',\n NOTE: 'NOTE',\n TASK: 'TASK',\n EMAIL: 'EMAIL',\n CALL: 'CALL',\n SMS: 'SMS',\n STAGE: 'STAGE',\n};\n\nexport const OPERATIONS = {\n CREATE: 'CREATE',\n UPDATE: 'Update',\n};\n\nexport const ENTITY_SELECTOR_OPTIONS = [\n { label: 'No Filter', value: '' },\n { label: 'Lead', value: 'LEAD' },\n { label: 'Note', value: 'NOTE' },\n { label: 'Task', value: 'TASK' },\n { label: 'Email', value: 'EMAIL' },\n { label: 'Call', value: 'CALL' },\n { label: 'Sms', value: 'SMS' },\n { label: 'Stage', value: 'STAGE' },\n];\n\nexport const RESULTS_PER_PAGE = 15;\n","import { Column, Grid } from '@8base/boost';\nimport styled from 'styled-components';\n\nexport const IconContainer = styled.div`\n width: ${(props) => (props.horizontal ? '12%' : '100%')};\n ${(props) => !props.horizontal && 'text-align: center;'}\n`;\n\nexport const DateContainer = styled.div`\n width: ${(props) => (props.horizontal ? '25%' : '100%')};\n`;\n\nexport const InfoContainer = styled.div`\n width: ${(props) => (props.horizontal ? '58%' : '100%')};\n`;\n\nexport const MarginLessCol = styled(Column)`\n & > *:not(:last-child) {\n margin-bottom: 0px !important;\n }\n`;\n\nexport const Layout = styled(Grid.Layout)`\n ${(props) => props.padding && ' padding: 0px 14px;'}\n ${(props) =>\n props.border &&\n `\n padding-bottom: 14px;\n border-bottom: 1px solid #e8eff5;\n `}\n`;\nLayout.defaultProps = {\n padding: true,\n};\nexport const Box = styled(Grid.Box)`\n justify-content: ${(props) => props.justifyContent};\n align-items: ${(props) => props.alignItems};\n`;\n\nexport const Content = styled.div`\n border-bottom: 1px solid #e8eff5;\n transition: opacity 1s;\n overflow: hidden;\n width: 100%;\n ${({ state, isData }) => {\n switch (state) {\n case 'entering':\n case 'entered':\n return `\n ${isData &&\n `\n padding: 14px; \n `}\n height: auto;\n opacity: 1;\n `;\n case 'exiting':\n case 'exited':\n return `\n padding: 0px;\n height: 0px !important;\n opacity: 0; \n `;\n default:\n return ``;\n }\n }}\n`;\n","import styled from 'styled-components';\nimport { Grid } from '@8base/boost';\n\nexport const ColumnInfo = styled(Grid.Box)`\n padding: 12px 0px 12px 24px;\n`;\n\nexport const ColumnName = styled.span`\n font-family: 'Poppins';\n font-size: 13px;\n line-height: 20px;\n font-weight: 600;\n`;\n\nexport const ColumnValue = styled.span`\n font-family: 'Poppins';\n font-size: 13px;\n line-height: 20px;\n`;\n\nexport const RowHeader = styled.div`\n height: 36px;\n color: #9b9b9b;\n font-size: 12px;\n font-weight: bold;\n line-height: 18px;\n font-family: 'Poppins';\n letter-spacing: 0.5px;\n background-color: #fcfcfc;\n border-top: 1px solid #d3d3d3;\n border-bottom: 1px solid #d3d3d3;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding-left: 24px;\n`;\n","import { ColumnName, ColumnValue } from '../../components/ColumnInfo';\nimport styled from 'styled-components';\n\nexport const Name = styled(ColumnName)`\n ${(props) =>\n props.clickable &&\n `\n color: #3db4aa;\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n `}\n`;\n\nexport const Value = styled(ColumnValue)`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n","import React from 'react';\nimport { Row, Avatar, Grid, Column } from '@8base/boost';\nimport moment from 'moment';\nimport { MarginLessCol, Layout, Content } from './containers';\nimport { Name, Value } from './interfaces';\nimport { Transition } from 'react-transition-group';\nimport ReactJsonView from 'react-json-view';\nimport { OPERATIONS } from '../leads-history-model';\nimport PropTypes from 'prop-types';\n\n/**\n * Item for a history event on the lead, either create or update\n *\n * @param {object} props - The props object of the component\n * @param {object} props.event - The object defining the event\n * @param {string} props.event.operation - CREATE / UPDATE / DELETE the entity\n * @param {string} props.event.difference - JSON changes details\n * @param {string} props.event.createdAt - Timestamp of the event\n * @param {object} props.event.lead - The lead associated with the event\n * @param {string} props.event.lead.firstName - First name of the lead\n * @param {string} props.event.lead.lastName - Last name of the lead\n * @param {object} props.event.createdBy - The user that initiated the event\n * @param {string} props.event.createdBy.firstName - First name of the user who initiated the event\n * @param {boolean} props.isFullHistory - Renders the object in a horizontal orientation if true\n * @param {boolean} props.horizontal - Renders the object in a horizontal orientation if true\n * @param {Function} props.onDetailsClick - Function to handle the update label click\n *\n * @returns {React.FC} The component to render\n */\nfunction LeadHistoryItem({ event, onDetailsClick, isFullHistory, horizontal }) {\n const now = moment().startOf('day');\n const yesterday = now\n .clone()\n .subtract(1, 'days')\n .startOf('day');\n const created = moment(event.createdAt);\n\n const InnerWrapper = horizontal ? MarginLessCol : Row;\n\n const columns = '35px 100px minmax(200px, 1fr)';\n\n return (\n \n \n {horizontal && (\n \n \n \n )}\n \n \n {created.isSame(now, 'day') ? (\n Today\n ) : created.isSame(yesterday, 'day') ? (\n Yesterday\n ) : (\n {created.format('MM/DD/YYYY')}\n )}\n {created.format('LT')}\n \n \n \n \n {horizontal ? (\n <>\n {event.operation === OPERATIONS.CREATE ? (\n Created By\n ) : (\n onDetailsClick(event.difference)}>\n Updated By\n \n )}\n {event.createdBy && (\n \n {event.createdBy.firstName} {event.createdBy.lastName}\n \n )}\n \n ) : (\n {event.operation === OPERATIONS.CREATE ? 'Created' : 'Updated'}\n )}\n \n \n \n \n {(state) => (\n \n {event.operation === OPERATIONS.UPDATE && (\n \n )}\n \n )}\n \n \n );\n}\n\nLeadHistoryItem.propTypes = {\n event: PropTypes.shape({\n operation: PropTypes.string.isRequired,\n difference: PropTypes.string,\n createdAt: PropTypes.string.isRequired,\n lead: PropTypes.shape({\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n }).isRequired,\n createdBy: PropTypes.shape({\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n horizontal: PropTypes.bool,\n isFullHistory: PropTypes.bool,\n onDetailsClick: PropTypes.func.isRequired,\n};\n\nLeadHistoryItem.defaultProps = {\n horizontal: true,\n isFullHistory: false,\n};\n\nexport default LeadHistoryItem;\n","import React from 'react';\nimport moment from 'moment';\nimport { Row, Icon, Grid, Column } from '@8base/boost';\nimport { MarginLessCol, Content, Layout } from './containers';\nimport { Transition } from 'react-transition-group';\nimport FormValues from '../../../../shared/components/forms/FormValues';\nimport { Name, Value } from './interfaces';\nimport PropTypes from 'prop-types';\n\nconst rows = [\n [\n {\n key: 'text',\n type: 'text',\n },\n ],\n];\n\nconst columns = '35px 100px minmax(200px, 1fr)';\n\n/**\n * Item for a history event on the lead, either create or update\n *\n * @param {object} props - The props object of the component\n * @param {object} props.event - The object defining the event\n * @param {string} props.event.operation - CREATE / UPDATE / DELETE the entity\n * @param {string} props.event.difference - JSON changes details\n * @param {string} props.event.createdAt - Timestamp of the event\n * @param {object} props.event.note - The note object related with the event\n * @param {string} props.event.note.title - The title of the note\n * @param {boolean} props.horizontal - Renders the object in a horizontal orientation if true\n * @param {boolean} props.isFullHistory - If true, renders all component information\n * @param {Function} props.onNoteClick - Function to pass more information about the note\n * @param {Function} props.onDetailsClick - Function to pass more information on the difference when updated\n *\n * @returns {React.FC} The component to render\n */\nfunction NoteHistoryItem({ event, horizontal, isFullHistory, onNoteClick, onDetailsClick }) {\n const now = moment().startOf('day');\n const created = moment(event.createdAt);\n const yesterday = now\n .clone()\n .subtract(1, 'days')\n .startOf('day');\n\n const InnerWrapper = horizontal ? MarginLessCol : Row;\n\n const data = {\n text: event.note.text,\n };\n\n const handleInfoClick = () => {\n if (horizontal) {\n onNoteClick({\n title: event.note.title,\n data,\n rows,\n });\n }\n };\n\n return (\n \n \n \n \n \n \n \n {created.isSame(now, 'day') ? (\n Today\n ) : created.isSame(yesterday, 'day') ? (\n Yesterday\n ) : (\n {created.format('MM/DD/YYYY')}\n )}\n {created.format('LT')}\n \n \n \n \n {horizontal ? (\n <>\n {event.operation === 'CREATE' ? (\n \n New note created\n \n ) : (\n onDetailsClick(event.difference)}>\n Updated Note\n \n )}\n {event.note.title}\n \n ) : (\n {event.operation === 'CREATE' ? 'Created' : 'Updated'}\n )}\n \n \n \n \n {(state) => (\n \n \n \n )}\n \n \n );\n}\n\nNoteHistoryItem.propTypes = {\n event: PropTypes.shape({\n operation: PropTypes.string.isRequired,\n difference: PropTypes.string,\n createdAt: PropTypes.string.isRequired,\n note: PropTypes.shape({\n title: PropTypes.string.isRequired,\n text: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n horizontal: PropTypes.bool,\n isFullHistory: PropTypes.bool,\n onNoteClick: PropTypes.func,\n onDetailsClick: PropTypes.func,\n};\n\nNoteHistoryItem.defaultProps = {\n horizontal: true,\n isFullHistory: false,\n onNoteClick: () => {},\n onDetailsClick: () => {},\n};\n\nexport default NoteHistoryItem;\n","import React from 'react';\nimport { Row, Grid, Column } from '@8base/boost';\nimport { IconTasksGreen } from '../../../../shared/components/ui/Icons';\nimport { ColumnName, ColumnValue } from '../../components/ColumnInfo';\nimport { MarginLessCol, Layout, Content } from './containers';\nimport FormValues from '../../../../shared/components/forms/FormValues';\nimport { Transition } from 'react-transition-group';\nimport { Name, Value } from './interfaces';\nimport moment from 'moment';\nimport PropTypes from 'prop-types';\n\nconst rows = [\n [\n {\n key: 'description',\n label: 'Description',\n type: 'text',\n },\n ],\n [\n {\n key: 'date',\n label: 'Date',\n type: 'text',\n },\n {\n key: 'priority',\n label: 'Priority',\n type: 'text',\n },\n ],\n [\n {\n key: 'status',\n label: 'Status',\n type: 'text',\n },\n {\n key: 'type',\n label: 'Type',\n type: 'text',\n },\n ],\n];\n\nconst columns = '35px 100px minmax(200px, 1fr)';\n\n/**\n * Email history item component\n *\n * @param {object} props - The component's prop object\n * @param {object} props.event - The object defining the event\n * @param {string} props.event.operation - CREATE / UPDATE / DELETE the entity\n * @param {string} props.event.difference - JSON changes details\n * @param {string} props.event.createdAt - Timestamp of the event\n * @param {object} props.event.task - The task object related with the event\n * @param {string} props.event.task.title - The title of the task\n * @param {boolean} props.horizontal - Renders the object in a horizontal orientation if true\n * @param {boolean} props.isFullHistory - If true, renders all component information\n * @param {Function} props.onTaskClick - Function to pass more information about the task\n * @param {Function} props.onDetailsClick - Function to pass more information on the difference when updated\n *\n * @returns {React.FC} The component to render\n */\nfunction TaskHistoryItem({ event, onDetailsClick, onTaskClick, isFullHistory, horizontal }) {\n const now = moment().startOf('day');\n const created = moment(event.createdAt);\n const yesterday = now\n .clone()\n .subtract(1, 'days')\n .startOf('day');\n\n const InnerWrapper = horizontal ? MarginLessCol : Row;\n\n const data = {\n date: moment(event.task.date).format('MM/DD/YYYY'),\n priority: event.task.priority,\n status: event.task.status,\n type: event.task.type.name,\n description: event.task.description,\n };\n\n const handleInfoClick = () => {\n if (horizontal) {\n onTaskClick({\n title: event.task.title,\n data,\n rows,\n });\n }\n };\n\n return (\n \n \n \n \n \n \n \n {created.isSame(now, 'day') ? (\n Today\n ) : created.isSame(yesterday, 'day') ? (\n Yesterday\n ) : (\n {created.format('MM/DD/YYYY')}\n )}\n {created.format('LT')}\n \n \n \n \n {event.operation === 'CREATE' ? (\n New Task\n ) : horizontal ? (\n onDetailsClick(event.difference)}>\n Updated Task\n \n ) : (\n Updated Task\n )}\n {horizontal && {event.task.title}}\n \n \n \n \n {(state) => (\n \n \n \n )}\n \n \n );\n}\n\nTaskHistoryItem.propTypes = {\n event: PropTypes.shape({\n operation: PropTypes.string.isRequired,\n difference: PropTypes.string,\n createdAt: PropTypes.string.isRequired,\n task: PropTypes.shape({\n title: PropTypes.string.isRequired,\n date: PropTypes.string.isRequired,\n priority: PropTypes.string.isRequired,\n status: PropTypes.string.isRequired,\n type: PropTypes.shape({\n name: PropTypes.string.isRequired,\n }).isRequired,\n description: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n horizontal: PropTypes.bool,\n isFullHistory: PropTypes.bool,\n onTaskClick: PropTypes.func,\n onDetailsClick: PropTypes.func,\n};\n\nTaskHistoryItem.defaultProps = {\n horizontal: true,\n isFullHistory: false,\n onTaskClick: () => {},\n onDetailsClick: () => {},\n};\n\nexport default TaskHistoryItem;\n","import React from 'react';\nimport { Grid, Row, Column } from '@8base/boost';\nimport { IconInboxGreen } from '../../../../shared/components/ui/Icons';\nimport { ColumnValue } from '../../components/ColumnInfo';\nimport { MarginLessCol, Content, Layout } from './containers';\nimport { Transition } from 'react-transition-group';\nimport { Value, Name } from './interfaces';\nimport FormValues from '../../../../shared/components/forms/FormValues';\nimport moment from 'moment';\nimport PropTypes from 'prop-types';\n\nconst rows = [\n [\n {\n key: 'subject',\n label: 'Subject:',\n type: 'text',\n inline: true,\n },\n ],\n [\n {\n key: 'from',\n label: 'From:',\n type: 'text',\n inline: true,\n },\n ],\n [\n {\n key: 'to',\n label: 'To:',\n type: 'text',\n inline: true,\n },\n ],\n [\n {\n key: 'body',\n label: 'Content',\n type: 'html',\n margin: { top: '10px' },\n },\n ],\n];\n\nconst columns = '35px 100px minmax(200px, 1fr)';\n\n/**\n * Email history item component\n *\n * @param {object} props - The component's prop object\n * @param {object} props.event - The object defining the event\n * @param {string} props.event.operation - CREATE / UPDATE / DELETE the entity\n * @param {string} props.event.createdAt - Timestamp of the event\n * @param {object} props.event.email - The email object related with the event\n * @param {object} props.event.email.to - The destinatary\n * @param {string} props.event.email.subject - The subject of the email\n * @param {object} props.event.email.thread - Thread related to the email\n * @param {object} props.event.email.thread.lead - The lead related to the conversation\n * @param {object} props.event.email.thread.lead.email - Email of the lead related to the conversation\n * @param {boolean} props.horizontal - Renders the object in a horizontal orientation if true\n * @param {boolean} props.isFullHistory - If true, renders all component information\n * @param {Function} props.onEmailClick - Function to trigger to pass email info\n *\n * @returns {React.FC} The component to render\n */\nfunction EmailHistoryItem({ event, horizontal, isFullHistory, onEmailClick }) {\n const now = moment().startOf('day');\n const created = moment(event.createdAt);\n const yesterday = now.clone().subtract(1, 'days').startOf('day');\n\n const InnerWrapper = horizontal ? MarginLessCol : Row;\n const { thread } = event.email;\n\n const data = {\n subject: event.email.subject,\n from: event.email.from,\n to: event.email.to,\n body: event.email.body,\n };\n\n const handleInfoClick = () => {\n if (horizontal) {\n onEmailClick({\n title: `Email ${event.email.to === thread.lead.email ? 'Sent' : 'Reply'}`,\n space: 5,\n data,\n rows,\n });\n }\n };\n\n return (\n \n \n \n \n \n \n \n {created.isSame(now, 'day') ? (\n Today\n ) : created.isSame(yesterday, 'day') ? (\n Yesterday\n ) : (\n {created.format('MM/DD/YYYY')}\n )}\n {created.format('LT')}\n \n \n \n \n {thread?.lead ? (\n event.email.to === thread.lead.email ? (\n \n Email Sent\n \n ) : (\n \n Email Reply\n \n )\n ) : event.email.to && thread.email && event.email.to === thread.email ? (\n \n Email Sent\n \n ) : (\n \n Email Reply\n \n )}\n {horizontal && {event.email.subject}}\n \n \n \n \n {(state) => (\n \n \n \n )}\n \n \n );\n}\n\nEmailHistoryItem.propTypes = {\n event: PropTypes.shape({\n operation: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n email: PropTypes.shape({\n to: PropTypes.string.isRequired,\n from: PropTypes.string.isRequired,\n subject: PropTypes.string.isRequired,\n body: PropTypes.string.isRequired,\n thread: PropTypes.shape({\n email: PropTypes.string,\n lead: PropTypes.shape({\n email: PropTypes.string.isRequired,\n }),\n }).isRequired,\n }).isRequired,\n }).isRequired,\n onEmailClick: PropTypes.func,\n isFullHistory: PropTypes.bool,\n horizontal: PropTypes.bool,\n};\n\nEmailHistoryItem.defaultProps = {\n horizontal: true,\n isFullHistory: false,\n onEmailClick: () => {},\n};\n\nexport default EmailHistoryItem;\n","import React from 'react';\nimport moment from 'moment';\nimport { Row, Grid, Column } from '@8base/boost';\nimport { IconCallGreen } from '../../../../shared/components/ui/Icons';\nimport { formatDuration } from '../../../phone-calls/phone-calls-utils';\nimport { Layout, Content, MarginLessCol } from './containers';\nimport { Transition } from 'react-transition-group';\nimport FormValues from '../../../../shared/components/forms/FormValues';\nimport { Name, Value } from './interfaces';\nimport PropTypes from 'prop-types';\n\nconst rows = [\n [\n {\n key: 'carrier',\n label: 'Carrier',\n type: 'text',\n },\n {\n key: 'currentPremium',\n label: 'Current Premium',\n type: 'text',\n },\n {\n key: 'quotedPremium',\n label: 'Quoted Premium',\n type: 'text',\n },\n {\n key: 'status',\n label: 'Status',\n type: 'text',\n },\n ],\n [\n {\n key: 'insurance',\n label: 'Insurance',\n type: 'text',\n },\n {\n key: 'expirationDate',\n label: 'Expiration Date',\n type: 'text',\n },\n ],\n [\n {\n key: 'score',\n label: 'Score',\n type: 'text',\n },\n {\n key: 'createdAt',\n label: 'Dispositon created at',\n type: 'text',\n },\n ],\n [\n {\n key: 'createdBy',\n label: 'Created By',\n type: 'text',\n },\n ],\n];\n\nconst columns = '35px 100px minmax(200px, 1fr)';\n\n/**\n * Item for a history event on the lead, either create or update\n *\n * @param {object} props - The props object of the component\n * @param {object} props.event - The object defining the event\n * @param {string} props.event.operation - CREATE / UPDATE / DELETE the entity\n * @param {string} props.event.createdAt - Timestamp of the event\n * @param {object} props.event.call - The call object related with the event\n * @param {string} props.event.call.duration - The duration of the call\n * @param {string} props.event.call.status - The status of the call\n * @param {object} props.event.phoneCallDispositionRelation - The disposition related with this call\n * @param {string} props.event.phoneCallDispositionRelation.carrier - The carrier info\n * @param {object} props.event.phoneCallDispositionRelation.status - The status assigned to the lead while calling\n * @param {string} props.event.phoneCallDispositionRelation.status.name - The name of status\n * @param {string} props.event.phoneCallDispositionRelation.expirationDate - The expiration date info\n * @param {string} props.event.phoneCallDispositionRelation.insurance - The insuance info\n * @param {string} props.event.phoneCallDispositionRelation.notes - A note for the call\n * @param {string} props.event.phoneCallDispositionRelation.score - The score info\n * @param {boolean} props.onDispositionClick - Function to trigger to pass disposition info\n * @param {boolean} props.horizontal - Renders the object in a horizontal orientation if true\n * @param {boolean} props.isFullHistory - If true, renders all component information\n *\n * @returns {React.FC} The component to render\n */\nfunction CallHistoryItem({ event, horizontal, isFullHistory, onDispositionClick }) {\n const now = moment().startOf('day');\n const created = moment(event.createdAt);\n const yesterday = now\n .clone()\n .subtract(1, 'days')\n .startOf('day');\n\n const InnerWrapper = horizontal ? MarginLessCol : Row;\n const durationLabel = formatDuration(event.call.duration);\n\n const { phoneCallDispositionRelation: disposition } = event.call;\n\n const data = disposition\n ? {\n carrier: disposition.carrier,\n currentPremium: disposition.currentPremium,\n quotedPremium: disposition.quotedPremium,\n status: disposition?.status?.name,\n expirationDate: disposition?.expirationDate\n ? moment(disposition?.expirationDate).format('MM/DD/YYYY')\n : '',\n insurance: disposition?.insurance,\n notes: disposition.notes,\n ifsScore: '',\n createdAt: moment(disposition.createdAt).format('MM/DD/YYYY'),\n createdBy: `${disposition.createdBy.firstName} ${disposition.createdBy.lastName} (${disposition.createdBy.email})`,\n }\n : null;\n\n const handleInfoClick = () => onDispositionClick({ title: 'Disposition', data, rows });\n\n return (\n \n \n \n \n \n \n \n {created.isSame(now, 'day') ? (\n Today\n ) : created.isSame(yesterday, 'day') ? (\n Yesterday\n ) : (\n {created.format('DD/MM-YYYY')}\n )}\n {created.format('LT')}\n \n \n \n \n {horizontal ? (\n data ? (\n \n Disposition\n \n ) : (\n {event.call.status}\n )\n ) : (\n {event.call.status}\n )}\n {horizontal && Duration: {durationLabel}}\n \n \n \n \n {(state) => (\n \n {data !== null && }\n \n )}\n \n \n );\n}\n\nCallHistoryItem.propTypes = {\n event: PropTypes.shape({\n operation: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n call: PropTypes.shape({\n duration: PropTypes.number.isRequired,\n status: PropTypes.string.isRequired,\n phoneCallDispositionRelation: PropTypes.shape({\n carrier: PropTypes.string.isRequired,\n currentPremium: PropTypes.string.isRequired,\n quotedPremium: PropTypes.string.isRequired,\n status: PropTypes.shape({\n name: PropTypes.string.isRequired,\n }).isRequired,\n expirationDate: PropTypes.string.isRequired,\n insurance: PropTypes.string.isRequired,\n notes: PropTypes.string.isRequired,\n score: PropTypes.shape({\n name: PropTypes.string.isRequired,\n }).isRequired,\n }),\n }).isRequired,\n }).isRequired,\n horizontal: PropTypes.bool,\n isFullHistory: PropTypes.bool,\n onDispositionClick: PropTypes.func,\n};\n\nCallHistoryItem.defaultProps = {\n onDispositionClick: () => {},\n horizontal: true,\n isFullHistory: false,\n};\n\nexport default CallHistoryItem;\n","import React from 'react';\nimport moment from 'moment';\nimport styled from 'styled-components';\nimport { FaArrowUp, FaArrowDown } from 'react-icons/fa';\nimport { Row, Grid, Column } from '@8base/boost';\nimport { IconChatGreen } from '../../../../shared/components/ui/Icons';\nimport { MarginLessCol, Content, Layout } from './containers';\nimport { Name, Value } from './interfaces';\nimport { Transition } from 'react-transition-group';\nimport FormValues from '../../../../shared/components/forms/FormValues';\nimport PropTypes from 'prop-types';\n\nconst IconContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nconst ArrowContainer = styled.div`\n padding-top: 5px;\n margin-left: 5px;\n`;\n\nconst rows = [\n [\n {\n key: 'from',\n label: 'From:',\n type: 'text',\n inline: true,\n },\n ],\n [\n {\n key: 'to',\n label: 'To:',\n type: 'text',\n inline: true,\n },\n ],\n [\n {\n key: 'text',\n label: 'Text',\n type: 'text',\n margin: {\n top: '10px',\n },\n },\n ],\n];\n\nconst columns = '35px 100px minmax(200px, 1fr)';\n\n/**\n * Item for a history event on the lead, either create or update\n *\n * @param {object} props - The props object of the component\n * @param {object} props.event - The object defining the event\n * @param {string} props.event.operation - CREATE / UPDATE / DELETE the entity\n * @param {string} props.event.createdAt - Timestamp of the event\n * @param {object} props.event.sms - The sms object related with the event\n * @param {string} props.event.sms.text - The text of the sms\n * @param {object} props.event.sms.createdBy - The user that initially sent the message\n * @param {string} props.event.sms.createdBy.firstName - The author's first name\n * @param {string} props.event.sms.createdBy.lastName - The author's last name\n * @param {string} props.event.sms.lead.firstName - The author's first name\n * @param {string} props.event.sms.lead.lastName - The author's last name\n * @param {boolean} props.onSmsClick - Function to trigger to pass sms info\n * @param {boolean} props.isFullHistory - Renders the object in a horizontal orientation if true\n * @param {boolean} props.horizontal - Renders the object in a horizontal orientation if true\n *\n * @returns {React.FC} The component to render\n */\nfunction SmsHistoryItem({ event, horizontal, isFullHistory, onSmsClick }) {\n const now = moment().startOf('day');\n const created = moment(event.createdAt);\n const yesterday = now\n .clone()\n .subtract(1, 'days')\n .startOf('day');\n\n const InnerWrapper = horizontal ? MarginLessCol : Row;\n const from = event.sms.createdBy\n ? `${event.sms.createdBy.firstName} ${event.sms.createdBy.lastName}`\n : '';\n\n const data = {\n from,\n to: `(${event.sms.phoneNumber})`,\n text: event.sms.text,\n };\n\n const handleInfoClick = () => {\n if (horizontal) {\n onSmsClick({\n title: 'Message sent',\n space: 5,\n data,\n rows,\n });\n }\n };\n\n const arrowIcon =\n event.sms?.type === 'INCOMING' ? (\n \n ) : (\n \n );\n\n return (\n \n \n \n \n \n \n {arrowIcon}\n \n \n \n {created.isSame(now, 'day') ? (\n Today\n ) : created.isSame(yesterday, 'day') ? (\n Yesterday\n ) : (\n {created.format('DD/MM-YYYY')}\n )}\n {created.format('LT')}\n \n \n \n \n {event.sms?.type === 'INCOMING' ? (\n \n Message received\n \n ) : (\n \n Message sent\n \n )}\n\n {horizontal && {event.sms.text}}\n \n \n \n \n {(state) => (\n \n \n \n )}\n \n \n );\n}\n\nSmsHistoryItem.propTypes = {\n event: PropTypes.shape({\n operation: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n sms: PropTypes.shape({\n text: PropTypes.string.isRequired,\n phoneNumber: PropTypes.string.isRequired,\n lead: PropTypes.shape({\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n }).isRequired,\n createdBy: PropTypes.shape({\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n }),\n type: PropTypes.string,\n }).isRequired,\n }).isRequired,\n onSmsClick: PropTypes.func,\n isFullHistory: PropTypes.bool,\n horizontal: PropTypes.bool,\n};\n\nSmsHistoryItem.defaultProps = {\n onSmsClick: () => {},\n isFullHistory: false,\n horizontal: true,\n};\n\nexport default SmsHistoryItem;\n","import React from 'react';\nimport { Row, Icon, Grid } from '@8base/boost';\nimport { ColumnName, ColumnValue } from '../../components/ColumnInfo';\nimport { MarginLessCol, Layout } from './containers';\nimport { Value } from './interfaces';\nimport moment from 'moment';\nimport PropTypes from 'prop-types';\n\nconst columns = '35px 100px minmax(200px, 1fr)';\n\n/**\n * Stage history item component\n *\n * @param {event} props - The component's prop object\n * @param {object} props.event - The object defining the event\n * @param {string} props.event.operation - CREATE / UPDATE / DELETE the entity\n * @param {string} props.event.createdAt - Timestamp of the event\n * @param {object} props.event.stage - The stage object related with the event\n * @param {string} props.event.stage.name - The name of the stage\n * @param {boolean} props.horizontal - Renders the object in a horizontal orientation if true\n * @param {boolean} props.isFullHistory - If true, renders all component information\n *\n * @returns {React.FC} The component to render\n */\nfunction StageHistoryItem({ event, horizontal, isFullHistory }) {\n const now = moment().startOf('day');\n const yesterday = now\n .clone()\n .subtract(1, 'days')\n .startOf('day');\n const created = moment(event.createdAt);\n\n const InnerWrapper = horizontal ? MarginLessCol : Row;\n\n return (\n \n \n \n \n \n \n {created.isSame(now, 'day') ? (\n Today\n ) : created.isSame(yesterday, 'day') ? (\n Yesterday\n ) : (\n {created.format('MM/DD/YYYY')}\n )}\n {created.format('LT')}\n \n \n \n \n {horizontal ? (\n <>\n Status changed to\n {event.stage.name}\n \n ) : (\n {event.stage.name}\n )}\n \n \n \n );\n}\n\nStageHistoryItem.propTypes = {\n event: PropTypes.shape({\n operation: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n stage: PropTypes.shape({\n name: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n horizontal: PropTypes.bool,\n isFullHistory: PropTypes.bool,\n};\n\nStageHistoryItem.defaultProps = {\n horizontal: true,\n isFullHistory: false,\n};\n\nexport default StageHistoryItem;\n","import React from 'react';\nimport { Row, Grid } from '@8base/boost';\nimport { ColumnName, ColumnValue } from '../../components/ColumnInfo';\nimport { MarginLessCol, Layout } from './containers';\nimport { Name } from './interfaces';\nimport moment from 'moment';\nimport PropTypes from 'prop-types';\nimport {\n IconCallGreen,\n IconInboxGreen,\n IconChatGreen,\n IconTasksGreen,\n} from '../../../../shared/components/ui/Icons';\nimport { ENTITIES } from '../leads-history-model';\nimport { Avatar, Icon } from '@8base/boost';\n\nconst columns = '35px 100px minmax(200px, 1fr)';\n\n/**\n * Item rendered when entity is deleted\n *\n * @param {object} props - The component's prop object\n * @param {object} props.event - The object defining the event\n * @param {object} props.event.entity - The object defining the event\n * @param {string} props.event.operation - CREATE / UPDATE / DELETE the entity\n * @param {string} props.event.createdAt - Timestamp of the event\n * @param {boolean} props.isFullHistory - If true, renders all component information\n * @param {boolean} props.horizontal - Renders the object in a horizontal orientation if true\n *\n * @returns {React.FC} The component to render\n */\nfunction DeletedHistoryItem({ event, horizontal, isFullHistory }) {\n const now = moment().startOf('day');\n const created = moment(event.createdAt);\n const yesterday = now\n .clone()\n .subtract(1, 'days')\n .startOf('day');\n\n const InnerWrapper = horizontal ? MarginLessCol : Row;\n let icon = null;\n\n switch (event.entity) {\n case ENTITIES.LEAD:\n icon = ;\n break;\n case ENTITIES.NOTE:\n icon = (\n \n );\n break;\n case ENTITIES.TASK:\n icon = ;\n break;\n case ENTITIES.EMAIL:\n icon = ;\n break;\n case ENTITIES.CALL:\n icon = ;\n break;\n case ENTITIES.SMS:\n icon = ;\n break;\n case ENTITIES.STAGE:\n icon = ;\n break;\n default:\n icon = null;\n }\n\n return (\n \n {icon}\n \n \n {created.isSame(now, 'day') ? (\n Today\n ) : created.isSame(yesterday, 'day') ? (\n Yesterday\n ) : (\n {created.format('MM/DD/YYYY')}\n )}\n {created.format('LT')}\n \n \n \n \n {event.operation === 'CREATE' ? (\n New {event.entity.toLowerCase()}\n ) : (\n Updated {event.entity.toLowerCase()}\n )}\n \n \n \n );\n}\n\nDeletedHistoryItem.propTypes = {\n event: PropTypes.shape({\n entity: PropTypes.string.isRequired,\n lead: PropTypes.shape({\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n }).isRequired,\n operation: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n }).isRequired,\n horizontal: PropTypes.bool,\n isFullHistory: PropTypes.bool,\n};\n\nDeletedHistoryItem.defaultProps = {\n horizontal: true,\n isFullHistory: false,\n};\n\nexport default DeletedHistoryItem;\n","import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { PhoneNumberUtil } from 'google-libphonenumber';\nimport { usePhoneCallComponent } from '../phone-calls-hooks';\nimport { Button, Loader } from '@8base/boost';\nimport * as toast from '../../../shared/components/toast/Toast';\n\n/**\n * @param {object} props Props.\n * @param {object} props.children Children element.\n * @param {string} props.tel Phone number as tel prop.\n * @param {string} props.data Lead data for get lead name oand other info\n * @returns {object} React Element\n */\nexport const PhoneNumber = ({ children, tel, name, lead }) => {\n const phoneUtil = PhoneNumberUtil.getInstance();\n\n const { makeCall, ready, startingCall } = usePhoneCallComponent() || {};\n\n const call = useCallback(() => {\n if (tel) {\n const isValidNumber = phoneUtil.isValidNumberForRegion(phoneUtil.parse(tel, 'US'), 'US');\n\n if (isValidNumber) {\n makeCall(tel, name, lead);\n } else {\n toast.error('Invalid phone number!');\n }\n } else {\n toast.error('You must register a phone number for this lead');\n }\n }, [makeCall, tel, name, lead, phoneUtil]);\n\n return (\n \n );\n};\n\nPhoneNumber.defaultProps = {\n name: 'Unknown',\n lead: undefined,\n};\n\nPhoneNumber.propTypes = {\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n tel: PropTypes.string.isRequired,\n name: PropTypes.string,\n lead: PropTypes.string,\n};\n","import gql from 'graphql-tag';\n\nexport const LEAD_STAGE_FRAGMENT = gql`\n fragment leadStageFragment on LeadStage {\n id\n name\n createdAt\n }\n`;\n\nexport const QUERY_LEADS_STAGES = gql`\n query FetchLeadStages {\n leadStagesList {\n items {\n ...leadStageFragment\n }\n }\n }\n ${LEAD_STAGE_FRAGMENT}\n`;\n\nexport const CREATE_LEAD_STAGE_HISTORY = gql`\n mutation CreateLeadStage($data: LeadStageHistoryCreateInput!, $stage: ID!, $lead: ID!) {\n leadStageHistoryCreate(data: $data) {\n stage {\n ...leadStageFragment\n }\n }\n leadUpdate(filter: { id: $lead }, data: { stage: { connect: { id: $stage } } }) {\n id\n }\n }\n ${LEAD_STAGE_FRAGMENT}\n`;\n\nexport const ASSING_LEAD_STAGE = gql`\n mutation AssignLeadStage($stage: ID!, $lead: ID!) {\n leadUpdate(filter: { id: $lead }, data: { stage: { connect: { id: $stage } } }) {\n id\n }\n }\n`;\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnFetchLeadStages = createEvent();\n\nexport const OnFetchLeadStagesError = createEvent();\n\nexport const OnSetLeadStage = createEvent();\n\nexport const OnSetLeadStageError = createEvent();\n","import { error, log } from '@cobuildlab/pure-logger';\nimport { createAction } from '@cobuildlab/react-simple-state';\nimport {\n QUERY_LEADS_STAGES,\n CREATE_LEAD_STAGE_HISTORY,\n ASSING_LEAD_STAGE as ASSING_LEAD_STAGE_MUTATION,\n} from './leads-stage-queries';\nimport { OnApolloClient } from '../../../shared/session/session-events';\nimport {\n OnFetchLeadStages,\n OnFetchLeadStagesError,\n OnSetLeadStage,\n OnSetLeadStageError,\n} from './leads-stage-store';\n\n/**\n * Fetch lead stages\n *\n * @returns {Promise}\n */\nexport const fetchLeadStages = createAction(OnFetchLeadStages, OnFetchLeadStagesError, async () => {\n const client = OnApolloClient.get();\n\n const response = await client.query({\n query: QUERY_LEADS_STAGES,\n });\n\n return response.data;\n});\n\n/**\n * Assigns the provided stage to the provided lead\n *\n * @param {number} lead - The lead id\n * @param {number} stage - The stage id\n *\n * @returns {Promise} result function\n */\nexport const assignLeadStage = createAction(\n OnSetLeadStage,\n OnSetLeadStageError,\n async (lead, stage) => {\n const client = OnApolloClient.get();\n\n const response = await client.mutate({\n mutation: CREATE_LEAD_STAGE_HISTORY,\n variables: {\n data: {\n lead: { connect: { id: lead } },\n stage: { connect: { id: stage } },\n },\n lead,\n stage,\n },\n });\n\n return response.data;\n },\n);\n\n/**\n * Assigns the provided stage to the provided lead\n * without creating leadStageHistory\n *\n * @param {number} leadId - Lead id\n * @param {number} stageId - Stage id\n *\n * @returns {Promise} The function's result function.\n */\nexport const assignLeadToStage = async (leadId, stageId) => {\n const client = OnApolloClient.get();\n\n try {\n const { data } = await client.mutate({\n mutation: ASSING_LEAD_STAGE_MUTATION,\n variables: { lead: leadId, stage: stageId },\n });\n\n log('assignLeadStage without creating leadStageHistory', data);\n\n return data;\n } catch (e) {\n error('assignLeadStage', e);\n }\n};\n","import React from 'react';\nimport { Table } from '@8base/boost';\nimport styled from 'styled-components';\nimport { useHistory } from 'react-router-dom';\nimport {\n priorityMap,\n findPriority,\n canAssignAgents,\n getLeadFullName,\n getLeadPhoneNumbers,\n} from '../leads-utils';\nimport { updateLeadPriority, updateLeadUsers } from '../leads-actions';\nimport {\n DropdownWithCheck,\n TextContact,\n DateBox,\n SelectInput,\n SimpleDropdown,\n} from 'shared/components';\nimport { getAssignedUsersLabel, mapUserToDropdownWithCheck } from '../../users/user-utils';\nimport { getActionItem } from '../leads-history/leads-history-utils';\n\nimport { PRIORITY_OPTIONS } from '../../../shared/constants';\nimport { PropTypes } from 'prop-types';\nimport { PhoneNumber } from '../../phone-calls/Components/PhoneNumber';\nimport { formatPhoneNumber, parseListToSelectOptions } from '../../phone-calls/phone-calls-utils';\nimport { assignLeadToStage } from '../leads-stage/leads-stage-action';\n\nconst TableBodyCell = styled(Table.BodyCell)`\n word-break: break-word !important;\n`;\n\nconst TextContactContainer = styled.div`\n & span p {\n text-align: start !important;\n }\n`;\n\nconst LeadCell = ({ columnName, lead, users, user, agency, stages }) => {\n const [stagesList] = stages;\n const stagesOptions = parseListToSelectOptions(stagesList);\n const history = useHistory();\n let cell;\n\n switch (columnName) {\n case 'ID':\n cell = (\n \n ID
\n \n );\n break;\n case 'Received':\n cell = (\n \n \n \n );\n break;\n case 'Contact': {\n const phones = getLeadPhoneNumbers(lead);\n const contact = (\n \n \n history.push(`/leads/${lead.id}`)}\n style={{ color: '#3DB4AA' }}>\n {lead.firstName} {lead.lastName}\n \n {phones && phones.length > 0 && (\n \n {formatPhoneNumber(phones[0].phone.number)}\n \n )}\n \n \n );\n\n cell = {contact};\n break;\n }\n case 'Stage':\n cell = (\n \n {\n assignLeadToStage(lead.id, value);\n }}\n // TODO: remove optional operator when all the lead has a default stage\n value={lead?.stage?.id}\n options={stagesOptions}\n placeholder={''}\n />\n \n );\n break;\n case 'IFS Score':\n cell = (\n \n {lead.ifsScore}
\n \n );\n break;\n case 'Assigned To':\n if (users) {\n if (canAssignAgents(user, agency)) {\n cell = (\n \n updateLeadUsers(lead.id, values)}\n />\n \n );\n } else {\n cell = (\n \n ({\n id: u.id,\n label: `${u.firstName} ${u.lastName}`,\n value: u.id,\n }))}\n header={getAssignedUsersLabel(lead.assignees.items)}\n />\n \n );\n }\n } else {\n cell = ;\n }\n break;\n case 'Campaign':\n cell = (\n \n {lead.campaign ? lead.campaign.name : ''}
\n \n );\n break;\n case 'Last Action':\n cell = (\n \n {lead.lastHistoryActionType &&\n getActionItem(lead.lastHistoryActionType, lead.lastHistoryActionData)}\n \n );\n break;\n case 'Priority':\n cell = (\n \n updateLeadPriority(lead.id, findPriority(value))}\n value={findPriority(lead.priority)}\n options={priorityMap(PRIORITY_OPTIONS)}\n placeholder={''}\n />\n \n );\n break;\n default:\n cell = (\n \n default
\n \n );\n }\n return cell;\n};\n\nLeadCell.propTypes = {\n lead: PropTypes.object.isRequired,\n user: PropTypes.object.isRequired,\n agency: PropTypes.object.isRequired,\n columnName: PropTypes.string.isRequired,\n stages: PropTypes.array.isRequired,\n};\n\nexport default LeadCell;\n","import React from 'react';\nimport { ENTITIES } from './leads-history-model';\nimport LeadHistoryItem from './components/LeadHistoryItem';\nimport NoteHistoryItem from './components/NoteHistoryItem';\nimport TaskHistoryItem from './components/TaskHistoryItem';\nimport EmailHistoryItem from './components/EmailHistoryItem';\nimport CallHistoryItem from './components/CallHistoryItem';\nimport SmsHistoryItem from './components/SmsHistoryItem';\nimport StageHistoryItem from './components/StageHistoryItem';\nimport DeletedHistoryItem from './components/DeletedHistoryItem';\n\n/**\n * Chooses the right component for the given history event\n *\n * @param {string} lastHistoryActionType - Type of action.\n * @param {string} lastHistoryActionData - Data.\n * @param {boolean} horizontal - Tiny version of the component.\n * @param {boolean} fullHistory - If true, every item would be rendered with all of its information\n * @param {Function} onDetailsClick - Function to trigger when a difference button in an update event item is clicked\n \n * @param {Function} onInfoClick - Function to trigger when the item wants to pass some information\n * @returns {React.FC} Component to render\n */\nexport const getActionItem = (\n lastHistoryActionType,\n lastHistoryActionData,\n horizontal = false,\n fullHistory = false,\n onDetailsClick = () => {},\n onInfoClick = () => {},\n) => {\n const action = JSON.parse(lastHistoryActionData);\n\n if (!action.entity) {\n return (\n \n );\n }\n\n switch (lastHistoryActionType) {\n case ENTITIES.LEAD:\n return (\n \n );\n case ENTITIES.NOTE:\n return (\n \n );\n case ENTITIES.TASK:\n return (\n \n );\n case ENTITIES.EMAIL:\n return (\n \n );\n case ENTITIES.CALL:\n return (\n \n );\n case ENTITIES.SMS:\n return (\n \n );\n case ENTITIES.STAGE:\n return (\n \n );\n default:\n return null;\n }\n};\n/**\n * Chooses the right component for the given history event\n *\n * @param {object} event - A history item object\n * @param {boolean} horizontal - Tiny version of the component\n * @param {boolean} fullHistory - If true, every item would be rendered with all of its information\n * @param {Function} onDetailsClick - Function to trigger when a difference button in an update event item is clicked\n * @param {Function} onInfoClick - Function to trigger when the item wants to pass some information\n * @returns {React.FC} Component to render\n */\nexport const getHistoryItem = (\n event,\n horizontal = true,\n fullHistory = false,\n onDetailsClick = () => {},\n onInfoClick = () => {},\n) => {\n if (event[event.entity.toLowerCase()] === null) {\n return (\n \n );\n }\n\n switch (event.entity) {\n case ENTITIES.LEAD:\n return (\n \n );\n case ENTITIES.NOTE:\n return (\n \n );\n case ENTITIES.TASK:\n return (\n \n );\n case ENTITIES.EMAIL:\n return (\n \n );\n case ENTITIES.CALL:\n return (\n \n );\n case ENTITIES.SMS:\n return (\n \n );\n case ENTITIES.STAGE:\n return (\n \n );\n default:\n return null;\n }\n};\n\n/**\n * Returns if an event is related with the specified search string\n *\n * @param {string} search - The search string\n * @param {object} event - The event object\n *\n * @returns {boolean} Is item related or not with the search term\n */\nexport const filterItem = (search, event) => {\n const regexp = new RegExp(`${search}`, 'i');\n const name = `${event.lead.firstName} ${event.lead.middleName} ${event.lead.lastName}`;\n\n if (regexp.test(event.operation)) return true;\n\n if (regexp.test(name)) return true;\n\n switch (event.entity) {\n case ENTITIES.NOTE:\n return event.note && (regexp.test(event.note.title) || regexp.test(event.note.title));\n case ENTITIES.TASK:\n return (\n event.task &&\n (regexp.test(event.task.title) ||\n regexp.test(event.task.type) ||\n regexp.test(event.task.priority) ||\n regexp.test(event.task.description))\n );\n case ENTITIES.EMAIL:\n return (\n event.email &&\n (regexp.test(event.email.thread.identifier) ||\n regexp.test(event.email.subject) ||\n regexp.test(event.email.body) ||\n regexp.test(event.email.to) ||\n regexp.test(event.email.from))\n );\n case ENTITIES.CALL:\n return (\n event.call &&\n (regexp.test(event.call.status) ||\n (event.call.phoneCallDispositionRelation &&\n (regexp.test(event.call.phoneCallDispositionRelation.notes) ||\n regexp.test(event.call.phoneCallDispositionRelation.score?.name))))\n );\n case ENTITIES.SMS:\n return event.text && regexp.test(event.sms.text);\n case ENTITIES.STAGE:\n return event.stage && regexp.test(event.stage.name);\n default:\n return false;\n }\n};\n","import React, { useState, useCallback, useEffect, useMemo } from 'react';\nimport { Dropdown } from '@8base/boost';\nimport styled from 'styled-components';\nimport { PropTypes } from 'prop-types';\nimport { DropdownBodyOnTable, FilterFooter, FilterCategory } from 'shared/components';\nimport filterIconGrey from 'shared/assets/images/filter-grey.svg';\nimport filterIconGreen from 'shared/assets/images/filter-green.svg';\nimport { fetchFilterOptions } from '../leads-actions';\nimport { FILTER_CATEGORIES } from '../leads-model';\nimport { usePromise } from '@cobuildlab/hooks-utils';\nimport moment from 'moment';\n\nconst DropdownBody = styled.div`\n background-color: #fff;\n position: relative;\n z-index: 2000;\n border: solid 1px #d0d7dd;\n border-radius: 5px;\n`;\n\nconst FilterBody = styled.div`\n display: grid;\n /* grid-template-rows: repeat(3, min-content); */\n grid-template-columns: repeat(3, [col-start] 1fr [col-end]);\n gap: 12px;\n padding: 12px;\n`;\n\nconst FilterBtn = styled.div`\n display: flex;\n border-radius: 5px;\n border: solid 1px ${({ active }) => (active ? '#3db4aa' : '#d0d7dd')};\n padding: 0px 16px;\n height: 36px;\n box-sizing: border-box;\n align-items: center;\n`;\n\nconst FilterIcon = styled.img`\n width: 2rem;\n height: 2rem;\n`;\n\nconst LeadFilter = (props) => {\n const [filters, setFilters] = useState(props.query);\n const [categories, setCategories] = useState(FILTER_CATEGORIES);\n const [options] = usePromise(() => fetchFilterOptions(props.agency), { initialState: null });\n\n useEffect(() => {\n if (options) {\n const { campaignsList, agencyUsersList } = options;\n\n setCategories((prevCategories) => ({\n ...prevCategories,\n assignedTo: {\n ...prevCategories.assignedTo,\n options: [\n { label: 'Anyone', value: '' },\n { label: 'None', value: 'none' },\n ...agencyUsersList.items.map((agent) => ({\n label: `${agent.user.firstName} ${agent.user.lastName}`,\n value: agent.user.id,\n })),\n ],\n },\n campaign: {\n ...prevCategories.campaign,\n options: [\n { label: 'All Campaigns', value: '' },\n ...campaignsList.items.map((campaign) => ({\n label: campaign.name,\n value: campaign.id,\n })),\n ],\n },\n }));\n }\n }, [options]);\n\n useEffect(() => {\n setFilters(props.query);\n }, [props.query]);\n\n const onChange = useCallback((name, value) => {\n if (name === 'createdAfter' && value) {\n value = moment(value)\n .startOf('day')\n .toISOString();\n }\n\n if (name === 'createdBefore' && value) {\n value = moment(value)\n .endOf('day')\n .toISOString();\n }\n\n setFilters((prevFilters) => ({\n ...prevFilters,\n [name]: value || undefined,\n }));\n }, []);\n\n const onSubmit = useCallback(() => {\n props.onConfirm(filters);\n }, [filters, props]);\n\n const onClose = useCallback(() => {\n setFilters(props.query);\n }, [props.query]);\n\n const fields = useMemo(\n () =>\n Object.entries(categories).map(([identifier, category]) => (\n \n )),\n [categories, filters, onChange],\n );\n\n const active = useMemo(\n () => Object.keys(props.query).some((key) => key !== 'search' && props.query[key]),\n [props.query],\n );\n\n const icon = active ? : ;\n\n return (\n \n \n \n {icon}\n Filters\n \n \n \n {({ closeDropdown }) => (\n \n {fields}\n \n \n )}\n \n \n );\n};\n\nLeadFilter.propTypes = {\n agency: PropTypes.string.isRequired,\n query: PropTypes.object.isRequired,\n onConfirm: PropTypes.func.isRequired,\n onCancel: PropTypes.func,\n};\n\nLeadFilter.defaultProps = {\n onCancel: () => {},\n};\n\nexport default LeadFilter;\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport { PropTypes } from 'prop-types';\n\nimport { YesNoDialog } from '../../../shared/components';\n\nconst BoldText = styled.span`\n font-weight: bold;\n`;\n\nconst LeadsDialog = ({ isOpen, onYes, onClose, selectedLead, selectedLeads, isLoading }) => {\n const text = (\n \n \n {`Are you sure you want to delete ${\n selectedLead.length > 0 || selectedLeads.length === 1 ? 'this Lead?' : 'these Leads?'\n } `}\n \n This action can’t be undone.\n \n );\n return (\n 0 || selectedLeads.length === 1 ? 'Lead' : 'Leads'}`}\n text={text}\n isLoading={isLoading}\n />\n );\n};\n\nLeadsDialog.propTypes = {\n isOpen: PropTypes.bool.isRequired,\n isLoading: PropTypes.bool.isRequired,\n onYes: PropTypes.func.isRequired,\n onClose: PropTypes.func.isRequired,\n selectedLead: PropTypes.string.isRequired,\n selectedLeads: PropTypes.array.isRequired,\n};\n\nexport default React.memo(LeadsDialog);\n","import React, { useState, useEffect, useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { LeadPhoneType } from '@cobuildlab/lead-volt-share';\nimport { Form, Grid, Select, Row, Label, Icon, Button, Tooltip } from '@8base/boost';\nimport styled from 'styled-components';\nimport {\n GENDER_OPTIONS,\n BIRTHMONTH_OPTIONS,\n BIRTHDAY_OPTIONS,\n BIRTHYEAR_OPTIONS,\n STATES_OPTIONS,\n LEAD_TYPE_OPTIONS,\n} from '../../leads-model';\nimport { Margin, SelectMultipleAgents } from '../../../../shared/components';\nimport { PRIORITY_OPTIONS } from '../../leads-model';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { fetchManagerAndAgents } from '../../../users/user-actions';\nimport * as toast from '../../../../shared/components/toast/Toast';\nimport Field from '../../../../shared/components/Field';\nimport { PhoneNumberUtil } from 'google-libphonenumber';\nimport {\n OnFetchManagerAndAgentUsersError,\n OnFetchManagerAndAgentUsersEvent,\n} from 'modules/users/user-events';\n\nconst phoneUtil = PhoneNumberUtil.getInstance();\n\nconst GridBoxFlexEnd = styled(Grid.Box)`\n justify-content: flex-end;\n`;\n\nconst Add = styled(Icon)`\n margin-right: 0px !important;\n`;\n\nconst CenteredIcon = styled(Icon)`\n margin-top: 20px;\n`;\n\n/**\n * Lead form fields\n *\n * @param {object} props component props\n * @param {object} props.lead lead data\n * @param {boolean} props.isUpdate is edit or not\n * @param {Array} props.campaigns campaigns list\n * @param {Array} props.phoneList phones list\n * @param {Function} props.setPhoneList set for list phones\n * @param {string} props.activeAgency ID of active agency\n * @param {Function} props.handleOnChangeInput handle on change\n * @returns {React.ReactElement} component\n */\nconst LeadForm = ({\n lead,\n isUpdate,\n campaigns,\n phoneList,\n setPhoneList,\n activeAgency,\n handleOnChangeInput,\n}) => {\n const [users, setUsers] = useState([]);\n\n useEffect(() => {\n activeAgency && fetchManagerAndAgents(activeAgency.id);\n setPhoneList(lead.phones);\n }, [activeAgency, lead.phones, setPhoneList]);\n\n useEventSubscription(OnFetchManagerAndAgentUsersEvent, ({ usersList }) =>\n setUsers(usersList.items),\n );\n useEventSubscription(OnFetchManagerAndAgentUsersError, (e) =>\n toast.error('There was an error fetching the users, please try again.'),\n );\n\n const handleAddInputPhone = (e) => {\n e.preventDefault();\n setPhoneList([\n ...phoneList,\n {\n phone: {\n code: '1',\n number: '',\n },\n },\n ]);\n };\n\n const handleDeleteInputPhone = useCallback(\n (i) => {\n setPhoneList((prevState) => {\n if (prevState.length === 1) {\n toast.error('At least one phone number is required');\n\n return prevState;\n }\n\n return prevState\n .map((phone, j) => (i === j ? { ...phone, delete: true } : phone))\n .filter((phone) => (phone.delete && !phone.id ? false : true));\n });\n },\n [setPhoneList],\n );\n\n const handleOnChangeNumber = useCallback(\n (value, i) => {\n if (value.length > 1) {\n let phone = null;\n\n try {\n phone = phoneUtil.parse(value, 'US');\n } catch (e) {\n toast.error(`The phone #${i + 1} is not valid`);\n\n return;\n }\n\n setPhoneList((prevState) =>\n prevState.map((state, j) => {\n if (i === j) {\n let isValid = true;\n\n if (\n phoneUtil.isPossibleNumber(phone) === false ||\n phoneUtil.isValidNumber(phone) === false\n ) {\n isValid = false;\n\n toast.error(`The phone #${i + 1} is not valid`);\n }\n\n /**\n * Checks if the number actually changes\n */\n const update =\n state.id && isValid\n ? lead.phones.some((p) => p.id === state.id && p.phone.number !== value)\n : false;\n\n return {\n ...state,\n update,\n phone: {\n ...state.phone,\n number: value,\n },\n };\n }\n\n return state;\n }),\n );\n }\n },\n [lead, setPhoneList],\n );\n\n const handleOnChangeCode = useCallback(\n (value, i) => {\n setPhoneList((prevState) =>\n prevState.map((phone, j) => {\n if (i === j) {\n return {\n ...phone,\n phone: {\n ...phone.phone,\n code: value,\n },\n };\n }\n\n return phone;\n }),\n );\n },\n [setPhoneList],\n );\n\n const handleBlur = useCallback(\n (e) => {\n const {\n target: { value, name },\n } = e;\n\n handleOnChangeInput(value, name);\n },\n [handleOnChangeInput],\n );\n\n const phones = useMemo(\n () =>\n phoneList.map((phone, i) => {\n if (phone.delete) {\n return null;\n }\n\n const label = `Phone Number ${i + 1}`;\n let icon = 'MobilePhoneIcon';\n let tooltip = 'Mobile phone number';\n\n if (phone.type === LeadPhoneType.UNREACHABLE) {\n icon = 'Alert';\n tooltip =\n \"This phone number is probably not valid, it couldn't be reached in previous attempts\";\n }\n\n if (phone.type === LeadPhoneType.LANDLINE) {\n icon = 'LandlineIcon';\n tooltip =\n \"This phone number has been detected as a landline, therefore it can't receive sms messages\";\n }\n\n return (\n \n handleOnChangeCode(value, i)}\n options={[\n {\n label: '+1',\n value: '1',\n },\n ]}\n />\n handleOnChangeNumber(e.target.value, i)}\n />\n \n \n \n handleDeleteInputPhone(i)}\n />\n
\n );\n }),\n [phoneList, handleOnChangeCode, handleOnChangeNumber, handleDeleteInputPhone],\n );\n\n return (\n \n );\n};\n\nLeadForm.propTypes = {\n lead: PropTypes.object.isRequired,\n isUpdate: PropTypes.bool.isRequired,\n activeAgency: PropTypes.object.isRequired,\n phoneList: PropTypes.array.isRequired,\n campaigns: PropTypes.array.isRequired,\n handleOnChangeInput: PropTypes.func.isRequired,\n setPhoneList: PropTypes.func.isRequired,\n};\n\nexport default LeadForm;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { DialogForm } from 'shared/components';\nimport * as R from 'ramda';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { createLead, updateLead } from '../leads-actions';\nimport LeadForm from './forms/LeadForm';\nimport { LEAD } from '../leads-model';\nimport {\n LEAD_TYPE_AUTO,\n LEAD_TYPE_COMMERCIAL_AUTO,\n LEAD_TYPE_HOME,\n LEAD_TYPE_LIFE,\n LEAD_TYPE_GENERAL_LIABILITY,\n LEAD_TYPE_WORKERS_COMPENSATION,\n LEAD_TYPE_EMPLOYEE_BENEFITS,\n} from '../../../shared/constants';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport * as toast from 'shared/components/toast/Toast';\nimport { getLeadPhoneNumberRelationInput } from '../leads-utils';\nimport { OnLeadCreateEvent, OnLeadsError, OnLeadsUpdateEvent } from '../leads-events';\n\nconst LeadFormDialog = ({\n isOpen,\n onCloseDialog,\n afterSubmit,\n lead,\n isUpdate,\n campaigns,\n activeAgency,\n}) => {\n const [fields, setFields] = useState(lead || R.clone(LEAD));\n const [phoneList, setPhoneList] = useState([]);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n if (lead) {\n setFields(lead);\n }\n }, [lead]);\n\n const handleCloseDialog = () => {\n isUpdate ? setFields(lead) : setFields(R.clone(LEAD));\n onCloseDialog();\n };\n\n const handleOnSubmit = () => {\n const {\n firstName,\n middleName,\n lastName,\n gender,\n birthMonth,\n birthDay,\n birthYear,\n campaign,\n email,\n assignees,\n firstAddress,\n secondAddress,\n zipCode,\n city,\n state,\n priority,\n leadType,\n creditScore,\n ifsScore,\n amount,\n } = fields;\n\n console.log({ phoneList });\n\n let leadLeadPhoneNumberRelation = getLeadPhoneNumberRelationInput(phoneList, isUpdate);\n\n console.log({ leadLeadPhoneNumberRelation });\n const dataLead = {\n firstName,\n middleName,\n lastName,\n gender,\n birthMonth,\n birthDay,\n birthYear,\n campaign,\n email,\n assignees: assignees.map((user) => (user.value ? user.value : user.id)),\n leadLeadPhoneNumberRelation,\n address: {\n street1: firstAddress,\n street2: secondAddress,\n zip: zipCode,\n city,\n state,\n },\n creditScore,\n priority,\n ifsScore,\n amount: amount ? amount : '0',\n };\n\n if (!isUpdate) {\n if (leadType === LEAD_TYPE_AUTO) {\n dataLead.leadLeadTypeAutoRelation = { create: {} };\n }\n\n if (leadType === LEAD_TYPE_COMMERCIAL_AUTO) {\n dataLead.leadLeadTypeCommercialAutoRelation = { create: {} };\n }\n\n if (leadType === LEAD_TYPE_HOME) {\n dataLead.leadLeadTypeHomeRelation = { create: {} };\n }\n\n if (leadType === LEAD_TYPE_LIFE) {\n dataLead.leadLeadTypeLifeRelation = { create: {} };\n }\n\n if (leadType === LEAD_TYPE_GENERAL_LIABILITY) {\n dataLead.leadLeadTypeGeneralLiabilityRelation = { create: {} };\n }\n\n if (leadType === LEAD_TYPE_WORKERS_COMPENSATION) {\n dataLead.leadLeadTypeWorkersCompensationRelation = { create: {} };\n }\n\n if (leadType === LEAD_TYPE_EMPLOYEE_BENEFITS) {\n dataLead.leadLeadTypeEmployeeBenefitRelation = { create: {} };\n }\n }\n\n setLoading(true);\n\n if (isUpdate) {\n updateLead(lead.id, {\n ...fields,\n phones: phoneList,\n });\n } else {\n console.log('datalead', dataLead);\n createLead(dataLead);\n }\n };\n\n useEffect(() => {\n if (!lead && campaigns.length > 0) {\n setFields({\n ...R.clone(LEAD),\n campaign: campaigns[0].id,\n });\n }\n }, [lead, campaigns]);\n\n const handleOnChangeInput = (value, name) => {\n const newLead = { ...fields };\n newLead[name] = value;\n\n if (name === 'assignees' && value === null) newLead[name] = [];\n if (name === 'users' && value === null) newLead[name] = [];\n if (name === 'phones' && value === null) newLead[name] = [];\n\n setFields(newLead);\n };\n\n // const handleOnChangePhones = (value, i) => {\n // let aux = [...phoneList];\n // aux[i].number = value;\n // setPhoneList(aux);\n // };\n\n useEventSubscription(OnLeadCreateEvent, () => {\n setLoading(false);\n setFields(R.clone(LEAD)); // set default values.\n onCloseDialog();\n afterSubmit(); // after create function from parent component.\n });\n\n useEventSubscription(OnLeadsError, (err) => {\n if (err) {\n setLoading(false);\n\n onErrorMixinFC(err);\n }\n });\n\n useEventSubscription(OnLeadsUpdateEvent, () => {\n onCloseDialog();\n setLoading(false);\n afterSubmit();\n\n toast.success('Lead Management', 'Lead Successfully Updated');\n });\n\n return (\n \n \n \n );\n};\n\nLeadFormDialog.propTypes = {\n lead: PropTypes.object,\n isUpdate: PropTypes.bool,\n afterSubmit: PropTypes.func,\n isOpen: PropTypes.bool.isRequired,\n campaigns: PropTypes.array.isRequired,\n activeAgency: PropTypes.object.isRequired,\n onCloseDialog: PropTypes.func.isRequired,\n};\n\nLeadFormDialog.defaultProps = {\n lead: null,\n isUpdate: false,\n afterSubmit: () => {},\n};\n\nexport default LeadFormDialog;\n","import styled from 'styled-components';\nimport { Card, Table } from '@8base/boost';\n\nconst MainCard = styled(Card)`\n margin: 20px 20px 20px 270px;\n`;\n/**\n * @param {object} props props\n * @param {boolean} props.withPadding if the body has to have padding\n * @returns {object} React component\n */\nconst Body = styled(Card.Body)`\n ${({ withPadding }) => (withPadding ? '' : 'padding: 0 !important;')}\n`;\nconst Footer = styled(Card.Footer)`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n`;\nconst Header = styled(Card.Header)`\n display: flex;\n justify-content: space-between;\n`;\nconst CardTitle = styled.h3`\n font-size: 16px;\n font-weight: bold;\n line-height: 28px;\n`;\nconst PaginationWrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n & > div > div > *::before {\n background-color: var(--color-primary);\n transition: all 0.2s;\n }\n\n & > div > span {\n display: inline-block;\n padding: 0.5rem 1.5rem;\n border: solid 1px #d0d7dd;\n border-radius: 5px;\n }\n`;\n\nconst TableBody = styled(Table.Body)`\n min-height: ${({ height }) => height};\n`;\nexport { MainCard as Card, Body, Header, CardTitle, PaginationWrapper, TableBody, Footer };\n","import React, { useState, useEffect } from 'react';\nimport styled from 'styled-components';\nimport { PropTypes } from 'prop-types';\nimport { Button, Modal, Card, Icon } from '@8base/boost';\nimport { Header, CardTitle } from '../../my-account/components/Card';\nimport RadioInputField from '../../../shared/components/ui/inputs/RadioInputField';\nimport { PrimaryBtn } from '../../../shared/components/ui/buttons/PrimaryBtn';\n\nconst Body = styled(Card.Body)`\n min-width: 25vw;\n`;\n\nconst ButtonContainer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst LeadAssignUserDialog = ({ users, isOpen, onClose, onAssignUsersToLeads, loading }) => {\n const [selectedUsers, setSelectedUsers] = useState([]);\n\n const handleSelectedUser = (userId) => {\n if (!loading) {\n if (selectedUsers.includes(userId)) {\n setSelectedUsers((prevSelectedUsers) =>\n prevSelectedUsers.filter((prevUserId) => prevUserId !== userId),\n );\n } else {\n setSelectedUsers((prevSelectedUsers) => [...prevSelectedUsers, userId]);\n }\n }\n };\n\n const handleSave = () => {\n if (selectedUsers.length && !loading) {\n onAssignUsersToLeads(selectedUsers);\n }\n };\n\n const handleClose = () => {\n if (!loading) {\n onClose();\n }\n };\n\n useEffect(() => {\n if (!isOpen) {\n setSelectedUsers([]);\n }\n }, [isOpen]);\n\n return (\n \n \n \n Assign Users\n \n \n \n {users.map((user) => (\n handleSelectedUser(user.id)}\n />\n ))}\n \n \n \n \n Cancel\n \n \n Save\n \n \n \n \n \n );\n};\n\nLeadAssignUserDialog.propTypes = {\n users: PropTypes.array.isRequired,\n isOpen: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n onAssignUsersToLeads: PropTypes.func.isRequired,\n loading: PropTypes.bool.isRequired,\n};\n\nexport default LeadAssignUserDialog;\n","import React, { useMemo } from 'react';\nimport styled from 'styled-components';\nimport moment from 'moment';\nimport { PRIMARY, BLACK } from 'shared/constants/colors';\n\nconst Msg = styled.div`\n display: flex;\n width: 100%;\n flex-direction: column;\n align-items: ${(props) => (props.isLeadUser ? 'flex-start' : 'flex-end')};\n text-align: ${(props) => (props.isLeadUser ? 'flex-start' : 'flex-end')};\n // background-color: teal;\n`;\n\nconst MsgAuthor = styled.div`\n font-size: 0.9em;\n font-weight: bold;\n`;\n\nconst MsgText = styled.div`\n // font-size:1em;\n\n font-weight: 500;\n max-width: 70%;\n padding: 10px 15px;\n background-color: ${({ isLeadUser }) => (isLeadUser ? PRIMARY : BLACK)};\n border-radius: ${({ isLeadUser }) => (isLeadUser ? '15px 15px 15px 0' : '15px 15px 0 15px ')};\n color: #fff;\n`;\n\nconst MsgDate = styled.div`\n font-size: 0.75em;\n color: #aaa;\n margin-top: 5px;\n font-weight: 600;\n`;\n\n/**\n * @param {object} props - Component props.\n * @param {object} props.message - Message object.\n * @param {string} props.message.type - Type of the message.\n * @param {string} props.message.text - Content of the message.\n * @param {string} props.message.createdAt - Date when the message was created.\n * @param {object} props.lead - Lead object.\n * @param {string} props.lead.firstName - First name of the prospect.\n * @returns {React.ReactNode} Message component.\n */\nexport function Message({ message, lead }) {\n const isLeadUser = useMemo(() => {\n return message.type === 'INCOMING' ? true : false;\n }, [message]);\n\n const formattedDate = useMemo(() => {\n return moment(message.createdAt).format('MMM D, YYYY [at] h:mm A');\n }, [message]);\n\n return (\n \n {isLeadUser ? lead.firstName : 'you'}\n {message.text}\n {formattedDate}\n \n );\n}\n","import React, { useState, useEffect, useMemo } from 'react';\nimport { LeadPhoneType } from '@cobuildlab/lead-volt-share';\nimport { useEvent } from '@cobuildlab/react-simple-state';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { OnLeadMessageCreate, OnLeadMessageCreateError } from '../../leads-store';\nimport { onPhoneNumberList } from '../../../phone-calls/phone-calls-events';\nimport { getBestPhoneNumber } from '../../../phone-calls/phone-calls-utils';\nimport styled from 'styled-components';\nimport { PropTypes } from 'prop-types';\nimport { SelectField, TextAreaField, Card } from '@8base/boost';\nimport { DialogForm } from '../../../../shared/components';\nimport { getLeadPhoneNumbers } from '../../leads-utils';\nimport { createSms } from '../../leads-actions';\nimport { FileInput } from '@8base-react/file-input';\nimport PlusBtn from '../../../../shared/components/ui/buttons/PlusBtn';\nimport { FaMinusCircle } from 'react-icons/fa';\nimport * as Toast from '../../../../shared/components/toast/Toast';\nimport { useUser } from '../../../../shared/hooks/useUser';\nimport { onErrorMixinFC } from '../../../../shared/mixins';\nimport { OnApolloClient } from 'shared/session/session-events';\nimport gql from 'graphql-tag';\nimport { fetchSession } from 'modules/auth/auth.actions';\nimport { Message } from './Message';\n\nconst MsgContainer = styled.div`\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n row-gap: 12px;\n`;\nconst MsgNumber = styled.div`\n grid-column: 1/-1;\n`;\nconst MsgBody = styled.div`\n grid-column: 1/-1;\n & textarea {\n height: 55px;\n }\n`;\n\nconst IconDelete = styled(FaMinusCircle)`\n width: 30px;\n cursor: pointer;\n color: #bababa;\n`;\n\nconst CardMargin = styled(Card)`\n margin: 20px 20px 20px 20px;\n`;\n\nconst Row = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n margin-bottom: 5px;\n`;\n\nconst RowPhone = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n`;\n\nconst MsgHistory = styled.div`\n display: flex;\n flex-direction: column;\n width: 100%;\n gap: 1em;\n`;\n\nconst TitleCardHeader = styled.p`\n font-size: 16px;\n line-height: 28px;\n`;\n\nconst TitlePhones = styled.p`\n font-size: 14px;\n line-height: 22px;\n`;\n\nconst TextBody = styled.p`\n font-size: 12px;\n text-aling: center;\n width: 100%;\n`;\n\nconst MsgForm = ({ onClose, isOpen, lead, agencyId, messages = [] }) => {\n // eslint-disable-next-line\n const client = OnApolloClient.get();\n const [msg, setMsg] = useState('');\n const [user] = useUser();\n const [numbers, setNumbers] = useState([]);\n const [selected, setSelected] = useState('');\n const [files, setFiles] = useState([]);\n const [loading, setLoading] = useState(false);\n const phoneNumbers = useEvent(onPhoneNumberList);\n const [userId, setUserId] = useState(null);\n\n const handlePhoneNumbersFrom = () => {\n if (\n user?.selectedAgency?.phoneNumbersRelation?.items &&\n user.selectedAgency.phoneNumbersRelation.items.length > 0\n ) {\n return user.selectedAgency.phoneNumbersRelation.items;\n }\n if (phoneNumbers.length > 0) return phoneNumbers;\n return [];\n };\n\n useEffect(() => {\n const fetchData = async () => {\n try {\n const sessionData = await fetchSession();\n //console.log('session from msgform', sessionData);\n\n // Assuming the sessionData contains the user information\n const user = sessionData.user.id;\n setUserId(user); // Set the user state with the retrieved data\n //console.log('USER ID FROM MSG FORM', userId);\n } catch (error) {\n // Handle errors\n console.log('error fetching user in msg form', error);\n }\n };\n\n fetchData();\n }, []);\n\n useEffect(() => {\n const phones = getLeadPhoneNumbers(lead);\n\n setNumbers(phones);\n\n if (phones && phones.length > 0) {\n setSelected(phones[0].id);\n }\n }, [lead]);\n\n useSubscription(\n OnLeadMessageCreate,\n () => {\n setLoading(false);\n onClose();\n setMsg('');\n setFiles([]);\n },\n [onClose],\n );\n\n useSubscription(\n OnLeadMessageCreateError,\n (e) => {\n setLoading(false);\n\n onErrorMixinFC(e);\n },\n [],\n );\n const QUERY_AGENCY_TYPE = gql`\n query FETCH_AGENCY_TYPE($id: ID) {\n user(id: $id) {\n selectedAgency {\n twilioBusinessType\n }\n }\n }\n `;\n\n const onSubmit = async () => {\n const phoneNumbersFrom = handlePhoneNumbersFrom();\n let agencyTypeQuery;\n\n if (phoneNumbersFrom.length === 0) {\n return Toast.error(\n 'This agency does not have any phone number, please buy one to send an sms',\n );\n }\n setLoading(true);\n\n const number = numbers.find((n) => n.id === selected);\n\n try {\n agencyTypeQuery = await client.query({\n query: QUERY_AGENCY_TYPE,\n fetchPolicy: 'no-cache',\n variables: { id: user.id },\n });\n } catch (e) {\n console.error('error on agency types query', e);\n }\n const agencyType = agencyTypeQuery?.data?.user?.selectedAgency?.twilioBusinessType;\n\n const from = getBestPhoneNumber(\n phoneNumbersFrom,\n number.phone.number,\n agencyType === 'Sole Proprietorship', //to determine if number used must be toll-free\n );\n console.log('from msg', from);\n createSms({\n text: msg,\n number: number.phone,\n lead: lead.id,\n user: user.id,\n from: from.id,\n agency: agencyId,\n leadPhoneNumber: number.id,\n files: files,\n });\n };\n\n const addFile = (value) => {\n const aux = [...files];\n aux.push(value);\n setFiles(aux);\n };\n\n const deleteFile = (i) => {\n const aux = files.filter((file) => {\n return file !== files[i];\n });\n\n setFiles(aux);\n };\n\n const fileList = files.map((file, i) => {\n return (\n \n {file.filename}
\n deleteFile(i)} />\n
\n );\n });\n\n const options = useMemo(\n () =>\n numbers\n .filter(({ type, phone }) => {\n if (!type) return !!phone.code && !!phone.number && phone.__typename === 'SmartPhone';\n return !!phone.code && !!phone.number && type === LeadPhoneType.MOBILE;\n })\n .map((phone) => ({\n label: `+${phone.phone.code} ${phone.phone.number}`,\n value: phone.id,\n })),\n [numbers],\n );\n\n const invalidOptions = useMemo(\n () =>\n numbers\n .filter(({ type, phone }) => {\n if (!type) return !!phone.code && !!phone.number && phone.__typename !== 'SmartPhone';\n return !!phone.code && !!phone.number && type !== LeadPhoneType.MOBILE;\n })\n .map((phone, i) => (\n \n \n +{phone.phone.code} {phone.phone.number}\n \n \n )),\n [numbers],\n );\n\n let invalidPhoneContent;\n if (invalidOptions.length) {\n invalidPhoneContent = (\n \n \n \n \n This numbers are invalid or unreachable\n \n \n {invalidOptions}\n \n \n );\n }\n\n return (\n onSubmit()}\n onCloseDialog={onClose}\n tabs={['Send text message', 'Messages']}>\n \n \n \n \n {invalidPhoneContent}\n \n setMsg(value),\n }}\n />\n \n \n \n Files \n {\n addFile(file);\n }}\n value={'input.value'}\n maxFiles={1}>\n {({ pick }) => pick()} />}\n \n
\n \n \n {fileList.length < 1 ? There are no files : fileList}\n \n \n \n \n \n {messages.length > 0\n ? messages.map((message, idx) => {\n return ;\n })\n : 'No messages yet.'}\n \n \n );\n};\n\nMsgForm.defaultProps = {\n messages: [],\n};\n\nMsgForm.propTypes = {\n onClose: PropTypes.func.isRequired,\n isOpen: PropTypes.bool.isRequired,\n lead: PropTypes.object.isRequired,\n agencyId: PropTypes.string.isRequired,\n messages: PropTypes.array,\n};\n\nexport default MsgForm;\n","import { ValidationError } from '../../../shared/errors';\nimport { isValidString } from '../../../shared/validators';\n\n/**\n * Validate that the Note has all the fields necessaries with the right format.\n *\n * @param {object} note - the note to be validated\n */\nexport const createNoteValidator = (note) => {\n let errorMessages = [];\n\n if (!isValidString(note.title)) errorMessages.push('The Note must have a valid title.');\n\n if (!isValidString(note.text) || note.text.lenght > 245)\n errorMessages.push('The Note text must be valid, between 1 and 245 characters.');\n\n if (errorMessages.length !== 0) throw new ValidationError(errorMessages);\n};\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const onLeadNoteUpdate = createEvent();\n\nexport const onLeadNoteDelete = createEvent();\n\nexport const OnFetchLeadNotes = createEvent();\n\nexport const OnFetchLeadNotesError = createEvent();\n\nexport const OnNoteCreateEvent = createEvent();\n\nexport const OnNoteError = createEvent();\n","import { createAction } from '@cobuildlab/react-simple-state';\nimport { error, log } from '@cobuildlab/pure-logger';\nimport {\n NOTE_CREATE_MUTATION,\n NOTE_UPDATE_MUTATION,\n NOTE_DELETE_MUTATION,\n FETCH_LEAD_NOTES,\n} from './leads-notes-queries';\nimport { OnApolloClient } from '../../../shared/session/session-events';\nimport { sanitize8BaseReference } from 'shared/utils';\nimport { createNoteValidator } from './leads-notes-validators';\nimport {\n onLeadNoteUpdate,\n onLeadNoteDelete,\n OnFetchLeadNotes,\n OnFetchLeadNotesError,\n OnNoteCreateEvent,\n OnNoteError,\n} from './leads-notes-events';\n\n/**\n * Creates a lead note\n *\n * @param {object} note lead note\n * @returns {object} response data\n */\nexport const createNote = async (note) => {\n const client = OnApolloClient.get();\n let response;\n\n try {\n createNoteValidator(note);\n } catch (e) {\n error('createNote', e);\n return OnNoteError.dispatch(e);\n }\n\n sanitize8BaseReference(note, 'notesLeadRelation');\n\n try {\n response = await client.mutate({\n mutation: NOTE_CREATE_MUTATION,\n variables: { data: note },\n });\n } catch (e) {\n error('createNote', e);\n return OnNoteError.dispatch(e);\n }\n\n log('createNote', response);\n OnNoteCreateEvent.dispatch(response.data);\n\n return response.data;\n};\n\n/**\n * Update a lead note\n *\n * @param {object} note lead note\n * @returns {object} response data\n */\nexport const updateNote = async (note) => {\n const client = OnApolloClient.get();\n\n let response;\n\n try {\n createNoteValidator(note);\n } catch (e) {\n error('createNote', e);\n return OnNoteError.dispatch(e);\n }\n\n try {\n response = await client.mutate({\n mutation: NOTE_UPDATE_MUTATION,\n variables: { data: note },\n });\n } catch (e) {\n error('updateNote', e);\n return OnNoteError.dispatch(e);\n }\n\n log('updateNote', response);\n onLeadNoteUpdate.dispatch(response.data);\n\n return response.data;\n};\n\n/**\n * Delete a lead note\n *\n * @param {string} id lead note\n * @returns {object} response data\n */\nexport const deleteNote = async (id) => {\n const client = OnApolloClient.get();\n\n let response;\n\n try {\n response = await client.mutate({\n mutation: NOTE_DELETE_MUTATION,\n variables: { id },\n });\n } catch (e) {\n error('deleteNote', e);\n return OnNoteError.dispatch(e);\n }\n\n log('deleteNote', response);\n onLeadNoteDelete.dispatch(response.data);\n\n return response.data;\n};\n\n/**\n * Fetches the notes from the specified lead\n *\n * @param {string} lead - The lead id\n *\n * @returns {Promise} The request result\n */\nexport const fetchLeadNotes = createAction(\n OnFetchLeadNotes,\n OnFetchLeadNotesError,\n async (lead) => {\n const client = OnApolloClient.get();\n\n const response = await client.query({\n query: FETCH_LEAD_NOTES,\n fetchPolicy: 'network-only',\n variables: {\n filterLeadNotes: {\n notesLeadRelation: {\n id: {\n equals: lead,\n },\n },\n },\n filterDispositionNotes: {\n notes: {\n is_not_empty: true,\n },\n lead: {\n id: {\n equals: lead,\n },\n },\n },\n },\n });\n\n return response.data;\n },\n);\n","import React, { useState, useEffect } from 'react';\nimport styled from 'styled-components';\nimport { PropTypes } from 'prop-types';\nimport { TextAreaField, InputField } from '@8base/boost';\nimport { DialogForm } from '../../../../shared/components';\nimport { createNote, updateNote } from '../../leads-notes/leads-notes-actions';\n\nconst NoteContainer = styled.div`\n display: grid;\n grid-template-columns: 1fr;\n row-gap: 12px;\n column-gap: 15px;\n`;\n\nconst TextAreaContainer = styled.div`\n & textarea {\n height: 85px;\n }\n`;\n\nconst Noteform = ({ isOpen, onClose, leadId, note: selectedNote }) => {\n const [title, setTitle] = useState('');\n const [note, setNote] = useState('');\n const [loading, setLoading] = useState(false);\n const isUpdate = selectedNote;\n\n useEffect(() => {\n if (!selectedNote) return;\n\n setNote(selectedNote.text);\n setTitle(selectedNote.title);\n }, [selectedNote]);\n\n useEffect(() => {\n if (!isOpen) {\n setTitle('');\n setNote('');\n }\n }, [isOpen]);\n\n const noteCreateHandler = async () => {\n const data = {\n text: note,\n title,\n notesLeadRelation: leadId,\n };\n\n setLoading(true);\n\n const result = await createNote(data);\n\n setLoading(false);\n\n if (result) {\n onClose();\n setTitle('');\n setNote('');\n }\n };\n\n const noteUpdateHandler = async () => {\n const data = {\n text: note,\n title,\n id: selectedNote.id,\n };\n setLoading(true);\n\n const result = await updateNote(data);\n\n setLoading(false);\n\n if (result) {\n onClose();\n }\n };\n\n return (\n \n \n setTitle(value),\n }}\n />\n \n setNote(value),\n }}\n />\n \n\n {/* */}\n \n \n );\n};\n\nNoteform.propTypes = {\n leadId: PropTypes.string.isRequired,\n onClose: PropTypes.func.isRequired,\n isOpen: PropTypes.bool.isRequired,\n note: PropTypes.object,\n};\nNoteform.defaultProps = {\n note: null,\n};\nexport default Noteform;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { PropTypes } from 'prop-types';\nimport { useHistory } from 'react-router-dom';\n\nimport { Menu, Icon, Dropdown, Table } from '@8base/boost';\nimport { DropdownBodyOnTable } from 'shared/components';\n\nimport informationIcon from 'shared/assets/images/information.svg';\nimport callIcon from 'shared/assets/images/call-green.svg';\n\nimport MsgForm from './forms/MsgForm';\nimport NoteForm from './forms/NoteForm';\nimport { PhoneNumber } from '../../phone-calls/Components/PhoneNumber';\nimport { getLeadFullName, getLeadPhoneNumbers } from '../leads-utils';\n\nconst ActionsCell = styled(Table.BodyCell)`\n display: flex;\n justify-content: space-around !important;\n`;\n\nconst CustomIcon = styled.img`\n width: 23px;\n height: 23px;\n cursor: pointer;\n min-width: 23px;\n`;\n\nconst MenuItem = styled(Menu.Item)`\n color: ${({ danger }) => (danger ? '#FF0000' : 'rgb(50, 60, 71)')}!important;\n &:hover {\n ${({ danger }) => (danger ? '' : 'color: #3db4aa !important;')}\n }\n`;\n\nconst LeadActions = ({ lead, onDelete, setLeadForTask, canDelete, agencyId }) => {\n const [isNoteModalOpen, setIsNoteModalOpen] = useState(false);\n const [isMsgModalOpen, setIsMsgModalOpen] = useState(false);\n const history = useHistory();\n\n let dropdown = (\n \n \n \n \n \n {({ closeDropdown }) => (\n \n )}\n \n \n );\n if (canDelete) {\n dropdown = (\n \n \n \n \n \n {({ closeDropdown }) => (\n \n )}\n \n \n );\n }\n const phones = getLeadPhoneNumbers(lead);\n return (\n <>\n \n {phones && phones.length > 0 && (\n \n \n \n )}\n history.push(`/leads/${lead.id}`)}\n alt=\"lead detail icon\"\n />\n {dropdown}\n {\n setIsMsgModalOpen(false);\n }}\n />\n {\n setIsNoteModalOpen(false);\n }}>\n \n \n );\n};\n\nLeadActions.propTypes = {\n agencyId: PropTypes.string.isRequired,\n onDelete: PropTypes.func.isRequired,\n lead: PropTypes.object.isRequired,\n setLeadForTask: PropTypes.any.isRequired,\n canDelete: PropTypes.bool.isRequired,\n};\n\nexport default LeadActions;\n","import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';\nimport { Card, Table, Dropdown, Menu, Pagination, Paper, Button, Icon } from '@8base/boost';\nimport { useHistory } from 'react-router-dom';\nimport SearchInput from '../email/components/SearchInput';\nimport { useAgencyLeads } from './hooks/useAgencyLeads';\nimport styled from 'styled-components';\nimport * as R from 'ramda';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { OnLeadMessageCreate } from './leads-store';\nimport { deleteLeads, fetchLeadTaskTypes, assignUsersToLeads } from './leads-actions';\nimport LeadCell from './components/LeadCell';\nimport LeadFilter from './components/LeadFilter';\nimport LeadsDialog from './components/LeadsDialog';\nimport LeadFormDialog from './components/LeadFormDialog';\nimport LeadAssignUserDialog from './components/LeadAssignUserDialog';\nimport { SORT_OPTIONS, TABLE_COLUMNS, ACTIVE_COLUMNS } from './leads-model';\nimport { fetchAgents } from '../agents/agents-actions';\nimport sortTableIcon from '../../shared/assets/images/table-sort-grey.svg';\nimport { canSeeBatchActions, canDeleteLeads, getColumnsSizes } from './leads-utils';\nimport TaskForm from './components/forms/TaskForm';\nimport {\n DropdownBodyOnTable,\n ItemFilter,\n RadioInputField,\n ListCardBody as ListCard,\n Loader,\n} from '../../shared/components';\nimport * as toast from '../../shared/components/toast/Toast';\nimport LeadActions from './components/LeadActions';\nimport { fetchCampaignsLight } from '../campaigns/campaigns-actions';\nimport { useLeadStages } from '../phone-calls/phone-calls-hooks';\nimport { useAgency } from '../../shared/hooks/useAgency';\nimport { useUser } from '../../shared/hooks/useUser';\nimport { onLeadDispositionCreate } from '../phone-calls/phone-calls-events';\nimport {\n OnAssignUserstoLeadError,\n OnAssignUserstoLeadEvent,\n OnDeleteLeadsResult,\n OnLeadCreateEvent,\n onTaskCreate,\n} from './leads-events';\nimport { useURLQuery } from '../../shared/hooks/useURLQuery';\nimport { OnCampaignsList } from 'modules/campaigns/campaign-events';\nimport { OnNoteCreateEvent } from './leads-notes/leads-notes-events';\n\nconst SortFilter = styled(ItemFilter)`\n & input {\n max-width: 180px !important;\n min-width: 120px !important;\n }\n`;\n\nconst TableBody = styled(Table.Body)`\n max-height: 50vh;\n height: 50vh;\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\nconst CustomHeader = styled.div`\n width: 100px;\n text-transform: uppercase;\n height: 17px;\n color: #9b9b9b;\n font-family: 'Poppins';\n font-size: 11px;\n font-weight: bold;\n letter-spacing: 0.5px;\n line-height: 18px;\n`;\n\nconst CustomGrid = styled.div`\n display: grid;\n width: ${(props) => props.width};\n grid-template-columns: ${(props) => props.columns};\n column-gap: ${(props) => props.columnGap};\n grid-template-areas: ${(props) => props.areas};\n ${(props) => (props.alignItems ? `align-items:${props.alignItems} ` : '')};\n`;\n\nconst CustomGridCell = styled.div`\n grid-area: ${(props) => props.area};\n display: flex;\n ${(props) =>\n props.area === 'right'\n ? `\n align-items: center;\n justify-content: flex-end;\n > div {\n margin-left: 15px;\n }\n > button {\n margin-left: 15px;\n }\n `\n : `\n align-items: center;\n justify-content: flex-start;\n > div {\n margin-right: 15px;\n }\n `};\n`;\n\nconst PaginationContainer = styled.div`\n display: flex;\n justify-content: center;\n font-size: 1.2rem;\n padding: 0 1rem;\n & > div > div > *::before {\n background-color: var(--color-primary);\n transition: all 0.2s;\n }\n & > div > span {\n display: inline-block;\n padding: 0.5rem 1.5rem;\n border: solid 1px #d0d7dd;\n border-radius: 5px;\n }\n`;\n\nconst CustomBtn = styled.button`\n max-width: 200px;\n min-width: 130px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n border-radius: 5px;\n padding: 8px 0px;\n box-sizing: border-box;\n cursor: pointer;\n border: 1px solid #d0d7dd;\n background-color: #ffffff;\n opacity: 0.9;\n color: #323c47;\n font-family: 'Poppins';\n font-size: 13px;\n line-height: 18px;\n text-align: center;\n font-weight: 400;\n & strong {\n font-weight: 600 !important;\n }\n &:focus {\n outline: none;\n }\n\n ${({ disabled }) => (disabled ? 'cursor: not-allowed;' : '')};\n`;\n\nconst CreateButton = styled(CustomBtn)`\n &:hover {\n box-shadow: 0 2px 4px 0 rgba(50, 50, 93, 0.2);\n }\n &:active {\n box-shadow: inset 0 1px 3px 0 rgba(50, 50, 93, 0.14), inset 0 4px 6px 0 rgba(51, 80, 107, 0.08);\n }\n > span:not(:last-child) {\n margin-right: 5px;\n }\n`;\n\nconst BtnText = styled.span`\n color: #3db4aa;\n font-size: 1.5rem;\n font-weight: 600;\n line-height: 2rem;\n`;\n\nconst ListCardBody = styled(ListCard)`\n padding: 0 !important;\n`;\n\nconst SortTableBtn = styled.div`\n display: flex;\n border-radius: 5px;\n border: solid 1px ${({ active }) => (active ? '#3db4aa' : '#d0d7dd')};\n width: 36px;\n height: 36px;\n box-sizing: border-box;\n justify-content: center;\n align-items: center;\n &::before {\n content: '';\n display: inline-block;\n height: 20px;\n width: 17px;\n background-color: ${({ active }) => (active ? '#3db4aa' : '#aeb7be')};\n -webkit-mask-image: url(${(props) => props.src});\n -webkit-mask-size: cover;\n mask-image: url(${(props) => props.src});\n mask-size: cover;\n }\n &:focus::before {\n background-color: #3db4aa;\n }\n`;\n\nconst SortTableConfirm = styled.div`\n border-top: 1px solid #d0d7dd;\n padding: 10px 15px;\n display: flex;\n align-items: center;\n justify-content: space-around;\n`;\nconst SortTableConfirmOptions = styled.span`\n color: ${(props) => (props.active ? '#3db4aa' : '#384A59')};\n cursor: pointer;\n`;\n\nconst SortTableMenu = styled(Menu)`\n padding-bottom: 0 !important;\n`;\n\nconst MenuItem = styled(Menu.Item)`\n color: #323c47 !important;\n padding: 0 !important;\n height: auto !important;\n`;\n\nconst RadioButton = styled.span`\n height: 22px;\n width: 22px;\n border: 1px solid #d0d7dd;\n border-radius: 4px;\n display: inline-block;\n position: absolute;\n left: 15px;\n &::after {\n height: 10px;\n width: 10px;\n content: '';\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #3db4aa;\n opacity: 0;\n }\n`;\n\nconst RadioInput = styled.input`\n display: none;\n &:checked ~ label span::after {\n opacity: 1;\n }\n`;\n\nconst RadioLabel = styled.label`\n padding: 10px 30px 10px 50px;\n display: flex;\n align-items: center;\n width: 100%;\n cursor: pointer;\n`;\n\nconst HeaderCellContainer = styled.div`\n display: flex;\n align-items: center;\n font-weight: bold;\n`;\n\nconst BatchHeader = styled(CustomHeader)`\n height: auto;\n margin-left: 0 !important;\n`;\n\nconst TableRow = styled(Table.BodyRow)`\n ${(props) => (props.active ? `background-color: #fcfcfc !important` : '')};\n`;\n\nconst StyledHeaderCell = styled(Table.HeaderCell)`\n padding-left: 24px !important;\n`;\n\nconst StyledTableHeader = styled(Table.Header)`\n height: 36px !important;\n`;\n\nconst CardHeader = styled(Card.Header)`\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n`;\n\nconst LeadsView = () => {\n const history = useHistory();\n const agency = useAgency();\n const [sort, setSort] = useState('newest');\n const [assignUsersLoading, setAssignUsersLoading] = useState(false);\n const [deletingLead, setDeletingLead] = useState(false);\n const [selectedLeads, setSelectedLeads] = useState([]);\n const [selectedLead, setSelectedLead] = useState('');\n const [leadForTask, setLeadForTask] = useState();\n const [isOpenDelete, setIsOpenDelete] = useState(false);\n const [isOpenAssignUser, setIsOpenAssignUser] = useState(false);\n const [sortTableActive, setSortTableActive] = useState(false);\n const [tableColumns, setTableColumns] = useState(() => R.clone(TABLE_COLUMNS));\n const [activeColumns, setActiveColumns] = useState(() => R.clone(ACTIVE_COLUMNS));\n const [agents, setAgents] = useState([]);\n const [users, setUsers] = useState([]);\n const [isOpenForm, setIsOpenForm] = useState(false);\n const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);\n // eslint-disable-next-line\n const [leadTaskTypeList, setLeadTaskTypeList] = useState([]);\n const [user] = useUser();\n const paginationCtnRef = useRef();\n const [campaigns, setCampaigns] = useState([]);\n const [query, setQuery] = useURLQuery();\n\n const { items, count, loading, error, page, setPage, refresh } = useAgencyLeads(\n agency.id,\n sort,\n query || {},\n );\n\n const onSubmitSearch = useCallback(\n (value) => {\n setQuery('/leads', {\n ...query,\n search: value || undefined,\n });\n },\n [query, setQuery],\n );\n\n const onSubmitFilters = useCallback(\n (filters) => {\n setQuery('/leads', {\n ...query,\n ...filters,\n });\n },\n [query, setQuery],\n );\n\n const onClearFilters = useCallback(() => {\n setQuery('/leads', {\n search: query.search || undefined,\n });\n }, [query.search, setQuery]);\n\n useEffect(() => {\n setSelectedLeads([]);\n }, [page]);\n\n useEffect(() => {\n if (error) {\n toast.error(error.message);\n }\n }, [error]);\n\n useEventSubscription(OnLeadCreateEvent, (data) => {\n if (data) {\n toast.success('Lead Management', 'Lead Successfully Created');\n }\n });\n\n useEventSubscription(OnDeleteLeadsResult, (data) => {\n if (data) {\n setDeletingLead(false);\n refresh();\n setIsOpenDelete(false);\n\n if (data) {\n const { success, errors } = data;\n\n if (errors) {\n toast.warn(`${errors} lead${errors > 1 ? 's' : ''} could not be deleted`);\n }\n\n if (success) {\n toast.success('Success', `${success} lead${success > 1 ? 's' : ''} successfully deleted`);\n }\n }\n }\n });\n\n useEventSubscription(OnAssignUserstoLeadEvent, ({ success }) => {\n setAssignUsersLoading(false);\n setIsOpenAssignUser(false);\n setSelectedLeads([]);\n refresh();\n toast.success('Lead Management', `Users assigned to lead${success > 1 ? 's' : ''}`);\n });\n\n useEventSubscription(OnAssignUserstoLeadError, ({ success, errors }) => {\n setAssignUsersLoading(false);\n setIsOpenAssignUser(false);\n setSelectedLeads([]);\n refresh();\n\n if (errors) {\n toast.warn(`${errors} lead${errors > 1 ? 's' : ''} could not assign users`);\n }\n\n if (success) {\n toast.success('Success', `${success} lead${success > 1 ? 's' : ''} successfully assigned`);\n }\n });\n\n useEventSubscription(OnNoteCreateEvent, () => {\n toast.success('Lead Management', 'Note Created!');\n refresh();\n });\n\n useEventSubscription(OnCampaignsList, (data) => {\n if (data) {\n setCampaigns(data?.campaignsList?.items || []);\n }\n });\n\n useEventSubscription(\n onTaskCreate,\n () => {\n toast.success('Lead Management', 'Task Created!');\n refresh();\n },\n [refresh],\n );\n\n useEventSubscription(\n OnLeadMessageCreate,\n (data) => {\n if (data !== null) {\n toast.success('Lead Management', 'Message sent successfully!');\n }\n refresh();\n },\n [refresh],\n );\n\n useEventSubscription(\n onLeadDispositionCreate,\n () => {\n refresh();\n },\n [refresh],\n );\n\n const handleOpenForm = () => setIsOpenForm(true);\n\n const handleCloseForm = () => setIsOpenForm(false);\n\n const leadCheckboxChangeHandler = (id) => {\n setSelectedLeads((oldSelectedList) => {\n let newSelectedList;\n if (oldSelectedList.includes(id)) {\n newSelectedList = oldSelectedList.filter((oldId) => oldId !== id);\n } else {\n newSelectedList = oldSelectedList.concat([id]);\n }\n return newSelectedList;\n });\n };\n\n const headerCheckboxHandler = useCallback(() => {\n setSelectedLeads((oldSelectedLeads) => {\n let newSelectedLeads;\n if (oldSelectedLeads.length === items.length) {\n newSelectedLeads = [];\n } else {\n newSelectedLeads = items.map((lead) => lead.id);\n }\n return newSelectedLeads;\n });\n }, [items]);\n\n const tableSortHandler = useCallback(\n (sortIdentifier) => {\n const newColumnList = { ...tableColumns };\n newColumnList[sortIdentifier] = { ...tableColumns[sortIdentifier] };\n newColumnList[sortIdentifier].active = !newColumnList[sortIdentifier].active;\n setTableColumns(newColumnList);\n },\n [tableColumns],\n );\n const confirmSortTableHandler = (closeDropdown) => {\n const newActiveList = [];\n for (const key in tableColumns) {\n const columnClone = { ...tableColumns[key] };\n if (columnClone.active) {\n newActiveList.push(columnClone.value);\n }\n }\n setActiveColumns(newActiveList);\n setSortTableActive(false);\n closeDropdown();\n };\n const cancelSortTableHandler = (closeDropdown) => {\n const newLeadsColumns = { ...tableColumns };\n for (const key in newLeadsColumns) {\n newLeadsColumns[key] = { ...tableColumns[key] };\n if (activeColumns.includes(newLeadsColumns[key].value)) {\n newLeadsColumns[key].active = true;\n }\n }\n setTableColumns(newLeadsColumns);\n setSortTableActive(false);\n closeDropdown();\n };\n\n const deleteLeadsHandler = (leads) => {\n setDeletingLead(true);\n\n let leadsToDelete;\n if (typeof leads === 'string') {\n leadsToDelete = [leads];\n setSelectedLead('');\n if (selectedLeads.includes(leads)) {\n setSelectedLeads((prevValue) => {\n return prevValue.filter((l) => l !== leads);\n });\n }\n } else {\n leadsToDelete = [...selectedLeads];\n setSelectedLeads([]);\n }\n\n deleteLeads(leadsToDelete);\n };\n const onDeleteLeads = useCallback(\n (leadId) => {\n if (leadId || selectedLeads.length > 0) {\n if (leadId) {\n setSelectedLead(leadId);\n }\n setIsOpenDelete(true);\n }\n },\n [selectedLeads],\n );\n\n const onAssignUsersLeads = useCallback(\n (leadId) => {\n if (leadId || selectedLeads.length > 0) {\n if (leadId) {\n setSelectedLead(leadId);\n }\n setIsOpenAssignUser(true);\n }\n },\n [selectedLeads],\n );\n\n const handleOnAssingUserClose = () => {\n if (selectedLead.length > 0) {\n setSelectedLead('');\n }\n\n setIsOpenAssignUser(false);\n };\n\n const handleAssingUsersToLeads = useCallback(\n async (selectedUsers) => {\n const filteredLeads = items.filter((lead) => selectedLeads.includes(lead.id));\n\n if (filteredLeads.length) {\n setAssignUsersLoading(true);\n assignUsersToLeads(filteredLeads, selectedUsers);\n }\n },\n [items, selectedLeads],\n );\n\n const handleOnYes = () => {\n if (selectedLead.length > 0) {\n deleteLeadsHandler(selectedLead);\n } else {\n deleteLeadsHandler(selectedLeads);\n }\n };\n const handleOnNo = () => {\n if (selectedLead.length > 0) {\n setSelectedLead('');\n }\n setIsOpenDelete(false);\n };\n\n const handleOnClickBtnCsv = () => {\n if (campaigns.length === 0) {\n toast.error('This operation is not possible without campaigns');\n } else {\n history.push('/leads/upload', {\n params: {\n previousPath: '/leads/upload',\n campaigns,\n agency,\n },\n });\n }\n };\n\n useEffect(() => {\n fetchLeadTaskTypes().then((data) => {\n setLeadTaskTypeList(data.leadTaskTypesList.items);\n });\n\n paginationCtnRef.current.children[0].children[3].childNodes[5].textContent = ' leads';\n }, [agency.id]);\n\n useEffect(() => {\n fetchCampaignsLight({\n filterData: { agency: agency.id },\n });\n\n fetchAgents({ agency: agency.id }).then((data) => {\n if (data.agentsList) {\n setAgents(data.agentsList.items.map((item) => item.user));\n setUsers(data.agentsList.items.map((item) => item.user));\n }\n });\n }, [agency.id]);\n\n const leadStages = useLeadStages();\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const columnsSize = useMemo(() => getColumnsSizes(tableColumns), [activeColumns]);\n\n const headerCols = useMemo(\n () =>\n activeColumns.map((col) => {\n let icon;\n\n return (\n \n \n {col}\n {icon}\n \n \n );\n }),\n [activeColumns],\n );\n\n const tableHeader = useMemo(\n () => (\n \n \n {items && (\n \n )}\n \n {headerCols}\n Actions\n \n ),\n [columnsSize, headerCheckboxHandler, headerCols, items, selectedLeads.length],\n );\n\n const sortColumns = useMemo(\n () =>\n Object.entries(tableColumns).map(([identifier, column]) => {\n return (\n \n );\n }),\n [tableColumns, tableSortHandler],\n );\n\n const batchActions = canSeeBatchActions(user, agency) && (\n <>\n Batch Actions\n \n Assign to Leads\n \n \n Delete Leads\n \n {/* Assign to agent */}\n \n );\n\n const setTaskModal = useCallback((lead) => {\n setIsTaskModalOpen(true);\n setLeadForTask(lead);\n }, []);\n\n //console.log('selected leads', selectedLeads);\n return (\n \n
\n \n \n \n \n \n \n \n \n {batchActions}\n \n \n setSortTableActive(!sortTableActive)}\n />\n \n \n {({ closeDropdown }) => (\n \n {sortColumns}\n \n {\n confirmSortTableHandler(closeDropdown);\n }}>\n Accept\n \n {\n cancelSortTableHandler(closeDropdown);\n }}>\n Cancel\n \n \n \n )}\n \n \n <>\n \n \n \n Create Lead\n \n \n \n \n \n \n \n {tableHeader}\n {loading ? (\n \n ) : (\n {}} data={items}>\n {(lead, index) => {\n // const isLast = index === leadsList.length - 1;\n // const pageLoader = isLast && loadingPage ? : null;\n const columnList = activeColumns.map((columnName) => (\n \n ));\n return (\n <>\n \n \n {\n leadCheckboxChangeHandler(lead.id);\n }}\n />\n \n {columnList}\n {\n onDeleteLeads(lead.id);\n }}\n lead={lead}\n />\n \n \n );\n }}\n \n )}\n {isTaskModalOpen && (\n {\n setLeadForTask();\n setIsTaskModalOpen(false);\n }}\n onClose={() => {\n setIsTaskModalOpen(false);\n setLeadForTask();\n }}\n />\n )}\n
\n \n \n \n \n \n \n \n \n \n \n
\n \n {content}\n \n
\n );\n } else if (columnIndex === 0) {\n return (\n \n \n {rowIndex}\n \n
\n );\n }\n\n const value = data.rows[rowIndex - 1][columnIndex - 1];\n const header = data.headers[columnIndex - 1];\n const fieldProps = getFieldProps(header, data.campaignOptions, data.ifsOptions);\n\n const onChange = (val) =>\n data.onChange(rowIndex - 1, columnIndex - 1, { target: { value: val } });\n\n return (\n \n \n data.onChange(rowIndex - 1, columnIndex - 1, e)}\n onChange={fieldProps.type === 'select' || fieldProps.type === 'date' ? onChange : null}\n {...fieldProps}\n />\n \n
\n );\n }\n}\n\nCsvPreviewCell.propTypes = {\n rowIndex: PropTypes.number.isRequired,\n columnIndex: PropTypes.number.isRequired,\n style: PropTypes.object.isRequired,\n data: PropTypes.shape({\n headers: PropTypes.arrayOf(PropTypes.string).isRequired,\n rows: PropTypes.arrayOf(PropTypes.string).isRequired,\n campaignOptions: PropTypes.array.isRequired,\n ifsOptions: PropTypes.array.isRequired,\n onChange: PropTypes.func.isRequired,\n }).isRequired,\n};\n","import React, { useEffect, useState, useCallback, useRef } from 'react';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport PropTypes from 'prop-types';\nimport { Modal, Row, SelectField, Heading, Column, Button, Icon, Text } from '@8base/boost';\nimport { VariableSizeGrid } from 'react-window';\nimport { PrimaryBtn } from 'shared/components';\nimport { LEAD_CSV_FORMATS } from '../../../shared/constants';\nimport { LEAD_TYPE_OPTIONS } from '../leads-model';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { Box } from '../../../shared/components/Box';\nimport { CsvPreviewCell } from './CsvPreviewCell';\nimport { OnLeadsError } from '../leads-events';\n\nconst { RICOCHET } = LEAD_CSV_FORMATS;\n\n/**\n * Leads Csv data preview in dialog\n *\n * @param {object} props props component\n * @param {boolean} props.isOpen bool value for dialog\n * @param {Function} props.onClose handle for close the dialog\n * @param {Array} props.csvData array of data\n * @param {boolean} props.loading loading for PrimaryBtn\n * @param {Array} props.csvColumns columns for table header\n * @param {Function} props.onBlurInput handle on blur for each field\n * @param {Function} props.onUploadCsv handle for upload the CSV\n * @param {Array} props.campaignOptions campaigns options for select\n * @param {Array} props.ifsScoresOptions ifs scores of the agency\n * @returns {React.ReactElement} component\n */\nconst LeadsCsvPreviewDialog = ({\n isOpen,\n onClose,\n csvData,\n loading,\n csvColumns,\n csvFormat,\n onBlurInput,\n onUploadCsv,\n campaignOptions,\n ifsScoresOptions,\n}) => {\n const [campaign, setCampaign] = useState(null);\n const [leadsType, setLeadsType] = useState(LEAD_TYPE_OPTIONS[0].value);\n const [uploading, setUploading] = useState(false);\n const [isMassiveUpload, setMassiveUpload] = useState(false);\n const [height, setHeight] = useState(0);\n const [width, setWidth] = useState(0);\n const worker = useRef(null);\n const ref = useRef(null);\n\n useEventSubscription(OnLeadsError, () => {\n setUploading(false);\n });\n\n useEffect(() => {\n if (isOpen && ref.current) {\n setWidth(ref.current.clientWidth);\n setHeight(ref.current.clientHeight);\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (ref && ref.current) {\n let timeout = '';\n\n const onResize = () => {\n clearTimeout(timeout);\n\n timeout = setTimeout(() => {\n setWidth(ref.current.clientWidth);\n setHeight(ref.current.clientHeight);\n }, 500);\n };\n\n window.addEventListener('resize', onResize);\n\n return () => {\n window.removeEventListener('resize', onResize);\n };\n }\n });\n\n useEffect(() => {\n if (window.Worker) {\n worker.current = new Worker('/workers/csv-validation.js');\n\n worker.current.addEventListener('message', ({ data }) => {\n setUploading(false);\n\n if (data.errors) {\n console.log('window.Worker data.errors', data.errors);\n const errors = [\n 'This may be because you selected a wrong format for the csv.',\n\n ...(data.errors?.arr || []),\n ];\n if (data.errors?.message) {\n errors.push(data.errors?.message);\n }\n\n return onErrorMixinFC({ arr: errors });\n }\n\n onUploadCsv(campaign, leadsType, data.leads);\n });\n\n return () => worker.current.terminate();\n }\n }, [campaign, leadsType, onUploadCsv]);\n\n useEffect(() => {\n if (!isOpen) {\n setUploading(false);\n }\n }, [isOpen]);\n\n useEffect(() => {\n setMassiveUpload(csvData.length > 2500);\n }, [csvData]);\n\n useEffect(() => {\n if (campaign === null && campaignOptions.length > 0) {\n setCampaign(campaignOptions[0].value);\n }\n }, [campaign, campaignOptions]);\n\n const onContinue = useCallback(() => {\n setUploading(true);\n\n if (worker.current) {\n worker.current.postMessage({\n headers: csvColumns,\n body: csvData,\n format: csvFormat,\n campaign,\n leadsType,\n });\n } else {\n setTimeout(() => onUploadCsv(campaign, leadsType, []), 1000);\n }\n }, [csvColumns, csvData, csvFormat, campaign, leadsType, onUploadCsv]);\n\n if (!isOpen) {\n return null;\n }\n\n const content = isMassiveUpload ? (\n \n \n Ready for uploading\n \n \n
\n ) : (\n (index === 0 ? 50 : 250)}\n rowCount={csvData.length + 1}\n rowHeight={() => 50}\n height={height}\n width={width}\n itemData={{\n headers: csvColumns,\n rows: csvData,\n ifsOptions: ifsScoresOptions,\n campaignOptions: campaignOptions,\n onChange: onBlurInput,\n }}>\n {CsvPreviewCell}\n \n );\n\n return (\n \n \n \n Add Leads - Data Preview\n \n \n \n setCampaign(value),\n }}\n options={campaignOptions}\n />\n {csvFormat === RICOCHET && (\n \n )}\n \n \n {content}\n \n \n \n \n \n Upload CSV\n \n \n \n \n );\n};\n\nLeadsCsvPreviewDialog.propTypes = {\n isOpen: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n csvData: PropTypes.array.isRequired,\n loading: PropTypes.bool.isRequired,\n csvColumns: PropTypes.array.isRequired,\n csvFormat: PropTypes.string.isRequired,\n onBlurInput: PropTypes.func.isRequired,\n onUploadCsv: PropTypes.func.isRequired,\n campaignOptions: PropTypes.array.isRequired,\n ifsScoresOptions: PropTypes.array.isRequired,\n};\n\nexport default LeadsCsvPreviewDialog;\n","import React, { useCallback, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDropzone } from 'react-dropzone';\nimport styled from 'styled-components';\nimport { fileToBase64 } from '../../shared/utils';\nimport { Text } from '@8base/boost';\nimport { Loader } from 'shared/components';\nimport { IconClose } from './ui/Icons';\n\nconst Dropzone = styled.div`\n width: 100%;\n padding: 30px;\n height: 100px;\n display: flex;\n cursor: pointer;\n position: relative;\n border-radius: 5px;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n background-color: #ffffff;\n border: 1px dashed #d0d7dd;\n`;\n\nconst Label = styled.p`\n color: #878c93;\n font-size: 12px;\n line-height: 16px;\n margin-bottom: 5px;\n font-family: 'Poppins';\n`;\n\nconst TextDanger = styled(Text)`\n margin-top: 5px;\n`;\n\nconst TextDropzone = styled(Text)`\n color: #323c47;\n font-family: 'Poppins';\n font-size: 13px;\n letter-spacing: 0;\n line-height: 20px;\n font-weight: 600 !important;\n text-align: center;\n`;\n\nconst FileName = styled.span`\n margin-left: 6px;\n font-size: 16px;\n`;\n\nconst FileUpload = ({ text, label, accept, maxFiles, onChange, onClickRemoveFile }) => {\n const [files, setFiles] = useState([]);\n const [message, setMessage] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n const onDrop = useCallback((acceptedFiles) => {\n // eslint-disable-next-line\n if (acceptedFiles.length <= maxFiles) {\n const newFiles = [];\n\n setIsLoading(true);\n acceptedFiles.forEach(async (file) => {\n const base64 = await fileToBase64(file);\n\n newFiles.push({\n ...file,\n preview: base64,\n });\n });\n\n setMessage('');\n setFiles(newFiles);\n onChange(acceptedFiles);\n } else {\n setMessage(`Only accept ${maxFiles} file${maxFiles > 1 ? 's' : ''}`);\n }\n // eslint-disable-next-line\n }, []);\n const handleOnClickClose = useCallback(\n (file) => {\n onClickRemoveFile();\n setIsLoading(false);\n setFiles(files.filter((_file) => file.preview !== _file.preview));\n },\n [files, onClickRemoveFile],\n );\n const { getRootProps, getInputProps } = useDropzone({ onDrop, accept });\n\n return (\n <>\n \n {files.length ? (\n \n {files.map((file, key) => {\n return (\n \n handleOnClickClose(file)} />\n {file.path}\n
\n );\n })}\n \n ) : (\n \n \n {isLoading ? : {text}}\n \n )}\n {message !== '' && {message}}\n \n );\n};\n\nFileUpload.propTypes = {\n text: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n accept: PropTypes.array.isRequired,\n onChange: PropTypes.func.isRequired,\n maxFiles: PropTypes.number.isRequired,\n onClickRemoveFile: PropTypes.func.isRequired,\n};\n\nexport default FileUpload;\n","import React, { useState, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { PrimaryBtn } from 'shared/components';\nimport { Dialog, Button, Heading, Column, SelectField, Link } from '@8base/boost';\nimport FileUpload from '../../../shared/components/FileUpload';\nimport { LEAD_CSV_FORMATS, LEAD_CSV_FORMAT_OPTIONS } from '../../../shared/constants';\n\nimport leads from '../../../shared/assets/documents/csv/leads.csv';\nimport leads_drivers from '../../../shared/assets/documents/csv/leads_drivers.csv';\nimport leads_auto from '../../../shared/assets/documents/csv/leads_auto.csv';\nimport leads_auto_with_drivers from '../../../shared/assets/documents/csv/leads_auto_with_drivers.csv';\nimport leads_commercial_auto from '../../../shared/assets/documents/csv/leads_commercial_auto.csv';\nimport leads_commercial_auto_with_drivers from '../../../shared/assets/documents/csv/leads_commercial_auto_with_drivers.csv';\nimport leads_home from '../../../shared/assets/documents/csv/leads_home.csv';\nimport leads_home_with_drivers from '../../../shared/assets/documents/csv/leads_home_with_drivers.csv';\nimport leads_life from '../../../shared/assets/documents/csv/leads_life.csv';\nimport leads_life_with_drivers from '../../../shared/assets/documents/csv/leads_life_with_drivers.csv';\nimport leads_employee_benefits from '../../../shared/assets/documents/csv/leads_employee_benefits.csv';\nimport leads_employee_benefits_with_drivers from '../../../shared/assets/documents/csv/leads_employee_benefits_with_drivers.csv';\nimport leads_general_liability from '../../../shared/assets/documents/csv/leads_general_liability.csv';\nimport leads_general_liability_with_drivers from '../../../shared/assets/documents/csv/leads_general_liability_with_drivers.csv';\nimport leads_workers_compensation from '../../../shared/assets/documents/csv/leads_workers_compensation.csv';\nimport leads_workers_compensation_with_drivers from '../../../shared/assets/documents/csv/leads_workers_compensation_with_drivers.csv';\nimport leads_ricochet from '../../../shared/assets/documents/csv/leads_ricochet.csv';\n\nconst links = {\n [LEAD_CSV_FORMATS.STANDARD]: [\n {\n name: 'Leads',\n file: 'leads.csv',\n url: leads,\n },\n {\n name: 'Leads with Drivers',\n file: 'leads_drivers.csv',\n url: leads_drivers,\n },\n {\n name: 'Leads Type Auto',\n file: 'leads_auto.csv',\n url: leads_auto,\n },\n {\n name: 'Leads Type Auto with Drivers',\n file: 'leads_auto_with_drivers.csv',\n url: leads_auto_with_drivers,\n },\n {\n name: 'Leads Type Commercial Auto',\n file: 'leads_commercial_auto.csv',\n url: leads_commercial_auto,\n },\n {\n name: 'Leads Type Commercial Auto with Drivers',\n file: 'leads_commercial_auto_with_drivers.csv',\n url: leads_commercial_auto_with_drivers,\n },\n {\n name: 'Leads Type Home',\n file: 'leads_home.csv',\n url: leads_home,\n },\n {\n name: 'Leads Type Home with Drivers',\n file: 'leads_home_with_drivers.csv',\n url: leads_home_with_drivers,\n },\n {\n name: 'Leads Type Life',\n file: 'leads_life.csv',\n url: leads_life,\n },\n {\n name: 'Leads Type Life with Drivers',\n file: 'leads_life_with_drivers.csv',\n url: leads_life_with_drivers,\n },\n {\n name: 'Leads Type Employee Benefits',\n file: 'leads_employee_benefits.csv',\n url: leads_employee_benefits,\n },\n {\n name: 'Leads Type Employee Benefits with Drivers',\n file: 'leads_employee_benefits_with_drivers.csv',\n url: leads_employee_benefits_with_drivers,\n },\n {\n name: 'Leads Type General Liability',\n file: 'leads_general_liability.csv',\n url: leads_general_liability,\n },\n {\n name: 'Leads Type General Liability with Drivers',\n file: 'leads_general_liability_with_drivers.csv',\n url: leads_general_liability_with_drivers,\n },\n {\n name: 'Leads Type Workers Compensation',\n file: 'leads_workers_compensation.csv',\n url: leads_workers_compensation,\n },\n {\n name: 'Leads Type Workers Compensation with Drivers',\n file: 'leads_workers_compensation_with_drivers.csv',\n url: leads_workers_compensation_with_drivers,\n },\n ],\n [LEAD_CSV_FORMATS.RICOCHET]: [\n {\n name: 'Leads',\n file: 'leads_ricochet.csv',\n url: leads_ricochet,\n },\n ],\n};\n\n/**\n * Leads Csv upload in dialog\n *\n * @param {object} props props component\n * @param {boolean} props.isOpen bool value for dialog\n * @param {Function} props.onClose handle for close the dialog\n * @param {boolean} props.loading loading for PrimaryBtn\n * @param {Function} props.onClickContinue handle on click for btn continue\n * @param {Function} props.onChangeFileUpload handle on change for file upload\n * @param {Function} props.onClickRemoveFile handle on remove for file upload\n * @param {boolean} props.hasData bool value for check if has data CSV\n *\n * @returns {React.FC} The component to render\n */\nconst LeadsCsvUploadDialog = ({\n isOpen,\n onClose,\n loading,\n onClickContinue,\n onChangeFileUpload,\n onClickRemoveFile,\n hasData,\n}) => {\n const [format, setFormat] = useState(LEAD_CSV_FORMATS.STANDARD);\n\n const handleContinue = useCallback(() => {\n onClickContinue(format);\n }, [format, onClickContinue]);\n\n return (\n \n );\n};\n\nLeadsCsvUploadDialog.propTypes = {\n isOpen: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n loading: PropTypes.bool.isRequired,\n onClickContinue: PropTypes.func.isRequired,\n onChangeFileUpload: PropTypes.func.isRequired,\n onClickRemoveFile: PropTypes.func.isRequired,\n hasData: PropTypes.bool.isRequired,\n};\n\nexport default LeadsCsvUploadDialog;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Dialog, Progress } from '@8base/boost';\n\nconst LeadsCsvStatusUploadDialog = ({ isOpen, accumulatorLeads, totalLeads }) => {\n return (\n <>\n \n \n );\n};\n\nLeadsCsvStatusUploadDialog.propTypes = {\n isOpen: PropTypes.bool.isRequired,\n accumulatorLeads: PropTypes.number.isRequired,\n totalLeads: PropTypes.number.isRequired,\n};\n\nexport default LeadsCsvStatusUploadDialog;\n","import React, { useCallback, useState, useEffect } from 'react';\nimport { Row, Loader } from '@8base/boost';\nimport { useHistory, useLocation } from 'react-router-dom';\nimport Papa from 'papaparse';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { createLeads, createLeadsFromRicochet } from '../leads-actions';\nimport { preprocessDataFromCsv } from '../leads-utils';\nimport { useSubscription as useSub } from '@cobuildlab/react-simple-state';\nimport LeadsCsvPreviewDialog from './LeadsCsvPreviewDialog';\nimport LeadsCsvUploadDialog from './LeadsCsvUploadDialog';\nimport LeadsCsvStatusUploadDialog from './LeadsCsvStatusUploadDialog';\nimport { onErrorMixinFC } from 'shared/mixins';\nimport * as toast from 'shared/components/toast/Toast';\nimport { LEAD_CSV_FORMATS } from '../../../shared/constants';\nimport {\n OnCsvUploadFinised,\n OnLeadsChunkBulkCreateEvent,\n OnLeadsError,\n OnValidatedLeadDataForUploadEvent,\n} from '../leads-events';\n\nconst { STANDARD, RICOCHET } = LEAD_CSV_FORMATS;\n\n/**\n * Leads CSV button with dialog upload and data preview.\n *\n * @param {object} props - Component props\n *\n * @returns {React.FC} Component to render\n */\nconst LeadsCsvDialogs = (props) => {\n // Dependencies\n const history = useHistory();\n const location = useLocation();\n // Data\n const [csvData, setCsvData] = useState([]);\n const [csvColumns, setCsvColumns] = useState([]);\n const [csvFormat, setCsvFormat] = useState(STANDARD);\n const [accumulatorLeads, setAccumulatorLeads] = useState(0);\n const [totalLeads, setTotalLeads] = useState(0);\n // Controls\n const [isOpenLoaderCSVDialog, setIsOpenLoaderCSVDialog] = useState(true);\n const [isOpenPreviewDialog, setIsOpenPreviewDialog] = useState(false);\n const [isOpenStatusUploadDialog, setIsOpenStatusUploadDialog] = useState(false);\n const [isLoadingPreview, setIsLoadingPreview] = useState(false);\n const [hasData, setHasData] = useState(false);\n const [loading, setLoading] = useState(true);\n\n // Verifies that data is obtained from the lead management\n // If don't, go to leads\n useEffect(() => {\n if (!location.state?.params) {\n history.replace('/leads');\n } else {\n setLoading(false);\n }\n }, [history, location]);\n\n const handleOnChangeFileUpload = useCallback(\n (files) => {\n const file = files[0];\n setIsLoadingPreview(true);\n Papa.parse(file, {\n complete: async (results) => {\n const columns = [...results.data[0]];\n\n // remove the rows with all the empty fields\n const data = [...results.data.slice(1).filter((row) => !row.every((e) => !e))];\n\n // const [newColumns, newData] = await getDataFromCsv(columns, data);\n\n setCsvData(data);\n setCsvColumns(columns);\n setHasData(true);\n },\n skipEmptyLines: true,\n });\n setIsLoadingPreview(false);\n },\n [setIsLoadingPreview],\n );\n\n const handleOnClickRemoveFile = useCallback(() => {\n setCsvData([]);\n setCsvColumns([]);\n setHasData(false);\n }, []);\n\n const handleOnBlurInput = useCallback(\n (rowIndex, keyIndex, event) => {\n const value = event.target.value;\n csvData[rowIndex][keyIndex] = value;\n },\n [csvData],\n );\n\n const handleOnUploadCsv = useCallback(\n (campaign, leadsType, leads) => {\n if (csvFormat === STANDARD) {\n createLeads(csvColumns, csvData, campaign, leads);\n } else if (csvFormat === RICOCHET) {\n createLeadsFromRicochet(csvColumns, csvData, campaign, leadsType, leads);\n }\n },\n [csvColumns, csvData, csvFormat],\n );\n\n const handleOnClosePreview = useCallback(() => {\n setIsOpenPreviewDialog(false);\n setCsvData([]);\n setCsvColumns([]);\n setHasData(false);\n setIsOpenLoaderCSVDialog(true);\n }, []);\n\n const handleOnClickContinue = useCallback(\n async (format) => {\n const { campaigns } = location.state?.params;\n\n if (csvData.length === 0) {\n toast.error('The file is empty');\n } else if (campaigns.length === 0) {\n toast.error('This operation is not possible without campaigns');\n } else {\n setIsLoadingPreview(true);\n const [csvNewColumns, csvNewData] = await preprocessDataFromCsv(csvColumns, csvData);\n setCsvData(csvNewData);\n setCsvColumns(csvNewColumns);\n setCsvFormat(format);\n setTimeout(() => {\n setIsLoadingPreview(false);\n setIsOpenLoaderCSVDialog(false);\n setIsOpenPreviewDialog(true);\n }, 1000);\n }\n },\n [location.state, csvData, csvColumns],\n );\n useSub(OnCsvUploadFinised, () => {\n setTimeout(() => {\n toast.success('Lead Management', `Leads created successfully!`);\n history.goBack();\n }, 2000);\n });\n\n useEventSubscription(OnLeadsChunkBulkCreateEvent, (response) => {\n if (response) {\n setAccumulatorLeads(accumulatorLeads + response.totalChunk);\n }\n });\n\n useEventSubscription(OnLeadsError, (err) => {\n if (err) {\n onErrorMixinFC(err);\n }\n });\n\n useEventSubscription(OnValidatedLeadDataForUploadEvent, () => {\n setTotalLeads(csvData.length);\n setIsOpenPreviewDialog(false);\n setIsOpenStatusUploadDialog(true);\n });\n\n if (loading) {\n return (\n \n \n
\n );\n }\n\n const CAMPAIGNS_OPTIONS = location.state.params.campaigns.map((campaign) => ({\n label: campaign.name,\n value: campaign.id,\n }));\n\n return (\n <>\n \n ({\n label: score,\n value: score,\n }))\n : []\n }\n />\n \n \n );\n};\n\nexport default LeadsCsvDialogs;\n","import { TASKS_INITIAL_STATUS, TASK_STATUS_CLOSED } from '../../shared/constants';\r\n\r\nexport default {\r\n id: null,\r\n title: '',\r\n description: '',\r\n leads: [],\r\n date: null,\r\n priority: null,\r\n agents: [],\r\n types: [],\r\n status: TASKS_INITIAL_STATUS,\r\n};\r\n\r\nexport const PRIORITIES = [\r\n { value: 1, label: 'LOW' },\r\n { value: 2, label: 'NORMAL' },\r\n { value: 3, label: 'HIGH' },\r\n { value: 4, label: 'VERY HIGH' },\r\n];\r\n\r\nexport const TABLE_COLUMNS = {\r\n TaskTitle: { active: true, value: 'Task Title', property: '' },\r\n Lead: { active: true, value: 'Lead', property: '' },\r\n Date: { active: true, value: 'Date', property: '' },\r\n Type: { active: true, value: 'Type', property: '' },\r\n Priority: { active: true, value: 'Priority', property: '' },\r\n AssignedTo: { active: true, value: 'Assigned To', property: '' },\r\n Description: { active: true, value: 'Description', property: '' },\r\n};\r\n\r\nexport const ACTIVE_COLUMNS = [\r\n 'Task Title',\r\n 'Lead',\r\n 'Date',\r\n 'Type',\r\n 'Priority',\r\n 'Assigned To',\r\n 'Description',\r\n];\r\n\r\nexport const FILTER_DATA = {\r\n assignedTo: '',\r\n onDate: '',\r\n onStatus: '',\r\n};\r\n\r\nexport const FILTER_CATEGORIES = {\r\n assignedTo: {\r\n title: 'Assigned to',\r\n placeholher: 'Select',\r\n identifier: 'assignedTo',\r\n options: [],\r\n },\r\n};\r\n\r\nexport const SORT_OPTIONS = [\r\n { label: 'Priority: Top First', value: 'top' },\r\n { label: 'Priority: Low First', value: 'low' },\r\n { label: 'Date: Newest First', value: 'newest' },\r\n { label: 'Date: Oldest First', value: 'oldest' },\r\n];\r\n\r\nexport const CALENDAR_EVENT_RENDER = (event) => {\r\n if (event.event._def.extendedProps.status === TASK_STATUS_CLOSED) {\r\n event.el.classList.add('fc-status-closed');\r\n }\r\n};\r\n\r\nexport const CALENDAR_EVENT_TIME_FORMAT = {\r\n hour: '2-digit',\r\n minute: '2-digit',\r\n meridiem: false,\r\n hour12: false,\r\n};\r\n\r\nexport const CALENDAR_HEADER = {\r\n left: 'today prev,next',\r\n center: 'title',\r\n right: 'dayGridMonth,timeGridWeek createTask, toTasksList',\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Table } from '@8base/boost';\r\nimport { RadioInputField } from 'shared/components';\r\nimport styled from 'styled-components';\r\n\r\nconst StyledTableHeader = styled(Table.Header)`\r\n display: flex;\r\n`;\r\n\r\nconst HeaderCellContainer = styled.div`\r\n display: flex;\r\n align-items: center;\r\n`;\r\n\r\nconst TableHeader = (props) => {\r\n const { data, headers, columns, selectedTasks, headerCheckboxHandler } = props;\r\n\r\n const headerCols = headers.map((col) => {\r\n let icon;\r\n return (\r\n \r\n \r\n {col}\r\n {icon}\r\n \r\n \r\n );\r\n });\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {headerCols}\r\n Actions\r\n \r\n );\r\n};\r\n\r\nTableHeader.propTypes = {\r\n headers: PropTypes.array.isRequired,\r\n columns: PropTypes.string.isRequired,\r\n selectedTasks: PropTypes.array.isRequired,\r\n data: PropTypes.array.isRequired,\r\n headerCheckboxHandler: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default TableHeader;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Dropdown, Menu, Icon } from '@8base/boost';\r\nimport { DropdownBodyOnTable } from 'shared/components';\r\nimport { IconInfo, IconCheck } from 'shared/components/ui/Icons';\r\nimport styled from 'styled-components';\r\n\r\nconst StyledIconInfo = styled(IconInfo)`\r\n width: 24px;\r\n height: 24px;\r\n cursor: pointer;\r\n min-width: 24px;\r\n`;\r\n\r\nconst StyledIconCheck = styled(IconCheck)`\r\n width: 24px;\r\n height: 24px;\r\n cursor: pointer;\r\n min-width: 24px;\r\n`;\r\n\r\nconst MenuItem = styled(Menu.Item)`\r\n color: ${({ danger }) => (danger ? '#FF0000' : 'rgb(50, 60, 71)')}!important;\r\n &:hover {\r\n ${({ danger }) => (danger ? '' : 'color: #3db4aa !important;')}\r\n }\r\n`;\r\n\r\nconst RowActions = ({ task, handleOnDeleteTask, handleInfoModal, handleOnChangeStatus }) => {\r\n const dropdown = (\r\n \r\n \r\n \r\n \r\n \r\n {({ closeDropdown }) => (\r\n \r\n )}\r\n \r\n \r\n );\r\n\r\n return (\r\n <>\r\n {\r\n handleInfoModal(task.id);\r\n }}\r\n />\r\n {\r\n handleOnChangeStatus(task);\r\n }}\r\n />\r\n {dropdown}\r\n \r\n );\r\n};\r\n\r\nRowActions.propTypes = {\r\n task: PropTypes.object.isRequired,\r\n handleOnDeleteTask: PropTypes.func.isRequired,\r\n handleInfoModal: PropTypes.func.isRequired,\r\n handleOnChangeStatus: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default RowActions;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Dropdown } from 'shared/components';\r\nimport { PRIORITIES } from '../lead-task-model';\r\nimport styled from 'styled-components';\r\nimport { updateLeadTask } from '../lead-task-actions';\r\n\r\nconst DropdownOption = styled.div`\r\n padding: 0px ${(props) => (props.isHead ? '0px' : '16px')};\r\n`;\r\nconst component = (priority) => (props) => {priority};\r\n\r\nconst PriorityCell = ({ rowData, value }) => {\r\n const [priority, setPriority] = useState(value);\r\n const handleOnChange = (value) => {\r\n setPriority(value);\r\n updateLeadTask({ id: rowData.id, priority: value.toString() });\r\n };\r\n\r\n return (\r\n {\r\n return {\r\n value: value,\r\n Component: component(label),\r\n };\r\n })}\r\n onChange={handleOnChange}\r\n />\r\n );\r\n};\r\n\r\nPriorityCell.propTypes = {\r\n value: PropTypes.string.isRequired,\r\n rowData: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default PriorityCell;\r\n","import React from 'react';\r\nimport { PropTypes } from 'prop-types';\r\nimport { Table, Text, Link } from '@8base/boost';\r\nimport styled from 'styled-components';\r\nimport PriorityCell from '../PriorityCell';\r\n\r\nconst TableBodyCell = styled(Table.BodyCell)`\r\n word-break: break-word !important;\r\n`;\r\n\r\nconst TableTextEllipsis = styled(Text)`\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-width: 200px;\r\n`;\r\n\r\nconst LeadCell = ({ columnName, task }) => {\r\n let cell;\r\n switch (columnName) {\r\n case 'ID':\r\n cell = (\r\n \r\n ID
\r\n \r\n );\r\n break;\r\n case 'Task Title':\r\n cell = (\r\n \r\n {task.title}\r\n \r\n );\r\n break;\r\n case 'Lead': {\r\n const { lead } = task;\r\n\r\n cell = (\r\n \r\n {lead && (\r\n \r\n {`${lead.firstName} ${lead.lastName}`}\r\n \r\n )}\r\n \r\n );\r\n\r\n break;\r\n }\r\n case 'Date': {\r\n cell = {task.date};\r\n break;\r\n }\r\n case 'Type':\r\n cell = {task.type};\r\n break;\r\n case 'Priority':\r\n cell = (\r\n \r\n \r\n \r\n );\r\n break;\r\n case 'Assigned To':\r\n cell = {task.agentsFormat};\r\n break;\r\n case 'Description':\r\n cell = (\r\n \r\n \r\n {task.description}\r\n \r\n \r\n );\r\n break;\r\n default:\r\n cell = (\r\n \r\n default
\r\n \r\n );\r\n }\r\n return cell;\r\n};\r\n\r\nLeadCell.PropTypes = {\r\n lead: PropTypes.object.isRequired,\r\n columnName: PropTypes.string.isRequired,\r\n};\r\n\r\nexport default LeadCell;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Table } from '@8base/boost';\r\nimport { RadioInputField } from 'shared/components';\r\nimport RowActions from './RowActions';\r\nimport styled from 'styled-components';\r\nimport RowCell from './RowCell';\r\n\r\nconst TableRow = styled(Table.BodyRow)`\r\n ${(props) => (props.active ? `background-color: #fcfcfc !important` : '')};\r\n`;\r\n\r\nconst TableRows = (props) => {\r\n const {\r\n task,\r\n columns,\r\n selectedTasks,\r\n activeColumns,\r\n handleInfoModal,\r\n handleOnChangeStatus,\r\n handleOnDeleteTask,\r\n taskCheckboxChangeHandler,\r\n } = props;\r\n\r\n const Row = () => {\r\n const columnList = activeColumns.map((columnName) => (\r\n \r\n ));\r\n return (\r\n \r\n \r\n {\r\n taskCheckboxChangeHandler(task.id);\r\n }}\r\n />\r\n \r\n {columnList}\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n\r\n return |
;\r\n};\r\n\r\nTableRows.propTypes = {\r\n task: PropTypes.object.isRequired,\r\n columns: PropTypes.string.isRequired,\r\n selectedTasks: PropTypes.isRequired,\r\n activeColumns: PropTypes.array.isRequired,\r\n taskCheckboxChangeHandler: PropTypes.func.isRequired,\r\n handleInfoModal: PropTypes.func.isRequired,\r\n handleOnChangeStatus: PropTypes.func.isRequired,\r\n handleOnDeleteTask: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default TableRows;\r\n","import React from 'react';\r\nimport { Dialog, Grid, Button, Text, Paragraph, Heading, Link } from '@8base/boost';\r\nimport PropTypes from 'prop-types';\r\nimport PriorityCell from '../PriorityCell';\r\nimport moment from 'moment';\r\n\r\nconst InfoModal = ({\r\n task,\r\n updating,\r\n onClose,\r\n dialogTitle,\r\n isOpenInfoModal,\r\n updateTask,\r\n handleOnChangeStatus,\r\n}) => {\r\n const { lead } = task;\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nInfoModal.propTypes = {\r\n updating: PropTypes.bool,\r\n onClose: PropTypes.func.isRequired,\r\n dialogTitle: PropTypes.string.isRequired,\r\n task: PropTypes.object,\r\n updateTask: PropTypes.func.isRequired,\r\n handleOnChangeStatus: PropTypes.func.isRequired,\r\n isOpenInfoModal: PropTypes.string.isRequired,\r\n};\r\n\r\nInfoModal.defaultProps = {\r\n updating: false,\r\n task: {},\r\n};\r\n\r\nexport default InfoModal;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Table } from '@8base/boost';\r\nimport Loader from '../../../../shared/components/ui/Loader';\r\nimport TaskForm from '../../../leads/components/forms/TaskForm';\r\nimport TableRows from './TableRows';\r\nimport InfoModal from './InfoModal';\r\nimport styled from 'styled-components';\r\n\r\nconst Body = styled(Table.Body)`\r\n min-height: 400px;\r\n`;\r\n\r\nconst TableBody = (props) => {\r\n const {\r\n users,\r\n leads,\r\n data,\r\n tasks,\r\n loading,\r\n taskFormIsOpen,\r\n columns,\r\n selectedTasks,\r\n handleInfoModal,\r\n activeColumns,\r\n taskCheckboxChangeHandler,\r\n handleOnChangeStatus,\r\n isOpenInfoModal,\r\n handleOnDeleteTask,\r\n onCloseInfoModal,\r\n openTaskFormDialog,\r\n closeTaskFormDialog,\r\n refetchTasks,\r\n } = props;\r\n\r\n return (\r\n <>\r\n {loading ? (\r\n \r\n ) : (\r\n \r\n {(task) => (\r\n <>\r\n \r\n \r\n {taskFormIsOpen && (\r\n task.id === t.id)}\r\n onSuccess={refetchTasks}\r\n isOpen={taskFormIsOpen}\r\n onClose={closeTaskFormDialog}\r\n />\r\n )}\r\n \r\n )}\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nTableBody.propTypes = {\r\n users: PropTypes.array.isRequired,\r\n leads: PropTypes.object.isRequired,\r\n data: PropTypes.array.isRequired,\r\n tasks: PropTypes.array.isRequired,\r\n loading: PropTypes.bool.isRequired,\r\n taskFormIsOpen: PropTypes.bool.isRequired,\r\n columns: PropTypes.string.isRequired,\r\n selectedTasks: PropTypes.array.isRequired,\r\n activeColumns: PropTypes.array.isRequired,\r\n isOpenInfoModal: PropTypes.array.isRequired,\r\n taskCheckboxChangeHandler: PropTypes.func.isRequired,\r\n onCloseInfoModal: PropTypes.func.isRequired,\r\n handleInfoModal: PropTypes.func.isRequired,\r\n openTaskFormDialog: PropTypes.func.isRequired,\r\n closeTaskFormDialog: PropTypes.func.isRequired,\r\n handleOnChangeStatus: PropTypes.func.isRequired,\r\n handleOnDeleteTask: PropTypes.func.isRequired,\r\n refetchTasks: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default TableBody;\r\n","import React from 'react';\r\nimport { Table, Pagination } from '@8base/boost';\r\nimport PropTypes from 'prop-types';\r\nimport styled from 'styled-components';\r\n\r\nconst PaginationContainer = styled.div`\r\n display: flex;\r\n justify-content: center;\r\n font-size: 1.2rem;\r\n padding: 0 1rem;\r\n\r\n & > div > div > *::before {\r\n background-color: var(--color-primary);\r\n transition: all 0.2s;\r\n }\r\n\r\n & > div > span {\r\n display: inline-block;\r\n padding: 0.5rem 1.5rem;\r\n border: solid 1px #d0d7dd;\r\n border-radius: 5px;\r\n }\r\n`;\r\n\r\nconst TableFooter = (props) => {\r\n const { data, page, handlePageChange } = props;\r\n\r\n return (\r\n \r\n \r\n {\r\n handlePageChange(page);\r\n }}\r\n defaultPage={1}\r\n total={data.length}\r\n page={page}\r\n />\r\n \r\n \r\n );\r\n};\r\n\r\nTableFooter.propTypes = {\r\n data: PropTypes.array.isRequired,\r\n page: PropTypes.string.isRequired,\r\n handlePageChange: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default TableFooter;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Dropdown, Menu } from '@8base/boost';\r\nimport { DropdownBodyOnTable } from 'shared/components';\r\nimport sortTableIcon from '../../../../shared/assets/images/table-sort-grey.svg';\r\nimport styled from 'styled-components';\r\n\r\nconst CustomGridCell = styled.div`\r\n grid-area: ${(props) => props.area};\r\n ${(props) => (props.justifySelf ? `justify-self:${props.justifySelf} ` : '')};\r\n`;\r\n\r\nconst SortTableMenu = styled(Menu)`\r\n padding-bottom: 0 !important;\r\n`;\r\n\r\nconst SortTableBtn = styled.div`\r\n display: flex;\r\n border-radius: 5px;\r\n border: solid 1px ${({ active }) => (active ? '#3db4aa' : '#d0d7dd')};\r\n padding: 0.5rem 1rem;\r\n box-sizing: border-box;\r\n &::before {\r\n content: '';\r\n display: inline-block;\r\n height: 2.5rem;\r\n width: 2rem;\r\n\r\n background-color: ${({ active }) => (active ? '#3db4aa' : '#aeb7be')};\r\n -webkit-mask-image: url(${(props) => props.src});\r\n -webkit-mask-size: cover;\r\n mask-image: url(${(props) => props.src});\r\n mask-size: cover;\r\n }\r\n\r\n &:focus::before {\r\n background-color: #3db4aa;\r\n }\r\n`;\r\n\r\nconst SortTableConfirm = styled.div`\r\n border-top: 1px solid #d0d7dd;\r\n padding: 10px 15px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-around;\r\n`;\r\n\r\nconst SortTableConfirmOptions = styled.span`\r\n color: ${(props) => (props.active ? '#3db4aa' : '#384A59')};\r\n cursor: pointer;\r\n`;\r\n\r\nconst StyledDropdownBodyOnTable = styled(DropdownBodyOnTable)`\r\n transform: translate3d(1720px, 167px, 0px) !important;\r\n`;\r\n\r\nconst MenuItem = styled(Menu.Item)`\r\n color: #323c47 !important;\r\n padding: 0 !important;\r\n height: auto !important;\r\n`;\r\n\r\nconst RadioButton = styled.span`\r\n height: 22px;\r\n width: 22px;\r\n border: 1px solid #d0d7dd;\r\n border-radius: 4px;\r\n display: inline-block;\r\n position: absolute;\r\n left: 15px;\r\n\r\n &::after {\r\n height: 10px;\r\n width: 10px;\r\n content: '';\r\n display: block;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background-color: #3db4aa;\r\n opacity: 0;\r\n }\r\n`;\r\n\r\nconst RadioInput = styled.input`\r\n display: none;\r\n &:checked ~ label span::after {\r\n opacity: 1;\r\n }\r\n`;\r\n\r\nconst RadioLabel = styled.label`\r\n padding: 10px 30px 10px 50px;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n cursor: pointer;\r\n`;\r\n\r\nconst OnTopHideShowColumns = (props) => {\r\n const {\r\n headers,\r\n hideShowColumns,\r\n tableSortHandler,\r\n handleHideShowColumns,\r\n confirmSortTableHandler,\r\n cancelSortTableHandler,\r\n } = props;\r\n\r\n const sortColumns = Object.entries(headers).map(([identifier, column]) => {\r\n return (\r\n \r\n );\r\n });\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {({ closeDropdown }) => (\r\n \r\n {sortColumns}\r\n \r\n {\r\n confirmSortTableHandler(closeDropdown);\r\n }}>\r\n Accept\r\n \r\n {\r\n cancelSortTableHandler(closeDropdown);\r\n }}>\r\n Cancel\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nOnTopHideShowColumns.propTypes = {\r\n headers: PropTypes.array.isRequired,\r\n hideShowColumns: PropTypes.bool.isRequired,\r\n tableSortHandler: PropTypes.func.isRequired,\r\n handleHideShowColumns: PropTypes.func.isRequired,\r\n confirmSortTableHandler: PropTypes.func.isRequired,\r\n cancelSortTableHandler: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default OnTopHideShowColumns;\r\n","import React from 'react';\r\nimport { YesNoDialog } from 'shared/components';\r\n\r\nconst DialogDeleteLeadTask = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default DialogDeleteLeadTask;\r\n","import React from 'react';\r\nimport { YesNoDialog } from 'shared/components';\r\n\r\nconst DialogUpdateLeadTaskStatus = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default DialogUpdateLeadTaskStatus;\r\n","import React, { useState, useEffect, useCallback } from 'react';\r\nimport { Paper, Grid, SelectField, Table } from '@8base/boost';\r\nimport { useSubscription as useSimpleSubscription } from '@cobuildlab/react-simple-state';\r\nimport { onErrorMixinFC } from '../../shared/mixins';\r\nimport { SORT_OPTIONS, TABLE_COLUMNS, ACTIVE_COLUMNS } from './lead-task-model';\r\nimport * as R from 'ramda';\r\nimport { useAgency } from 'shared/hooks/useAgency';\r\nimport { useUser } from 'shared/hooks/useUser';\r\nimport TableHeader from './components/LeadTasksListTable/TableHeader';\r\nimport TableBody from './components/LeadTasksListTable/TableBody';\r\nimport TableFooter from './components/LeadTasksListTable/TableFooter';\r\nimport OnTopHideShowColumns from './components/LeadTasksListTable/OnTopHideShowColumns';\r\nimport { leadTaskMap, leadTaskMapTable } from './lead-task-utils';\r\nimport { fetchLeadTask, updateLeadTask, deleteLeadTask } from './lead-task-actions';\r\nimport { fetchLeadTaskTypes } from '../leads/leads-actions';\r\nimport { fetchLeads } from '../leads/leads-actions';\r\nimport { fetchManagerAndAgents } from '../users/user-actions';\r\nimport { fetchAgents } from '../agents/agents-actions';\r\nimport { SearchInput, Margin } from 'shared/components';\r\nimport { FILTER_DATA as FILTER_DATA_LEADS } from '../leads/leads-model';\r\nimport { FILTER_DATA, FILTER_CATEGORIES } from './lead-task-model';\r\nimport { TASKS_INITIAL_STATUS, TASK_STATUS_CLOSED } from '../../shared/constants';\r\nimport DialogDeleteLeadTask from './components/DialogDeleteLeadTask';\r\nimport DialogUpdateLeadTaskStatus from './components/DialogUpdateLeadTaskStatus';\r\nimport { getActiveAgency } from '../../shared/utils/agency-utils';\r\nimport * as toast from '../../shared/components/toast/Toast';\r\nimport { Link } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport { OnFetchManagerAndAgentUsersEvent } from 'modules/users/user-events';\r\nimport { OnLeadsListEvent } from 'modules/leads/leads-events';\r\nimport {\r\n OnLeadTaskDelete,\r\n OnLeadTaskError,\r\n OnLeadTaskList,\r\n OnLeadTaskUpdate,\r\n} from './lead-task-events';\r\nimport { OnAgentsError, OnAgentsListEvent } from 'modules/agents/agents-events';\r\n\r\nconst StyledLayout = styled(Grid.Layout)`\r\n padding: 16px;\r\n`;\r\n\r\nconst StyledBox = styled(Grid.Box)`\r\n display: grid;\r\n align-items: flex-end;\r\n justify-content: flex-end;\r\n flex-direction: row !important;\r\n`;\r\n\r\nconst ButtonLink = styled(Link)`\r\n display: flex;\r\n border-radius: 4px;\r\n border: solid 1px #d0d7dd;\r\n padding: 0.6rem 1rem;\r\n box-sizing: border-box;\r\n text-decoration: none;\r\n color: #2c3e50;\r\n`;\r\n\r\nconst columnsSize =\r\n '80px minmax(150px, 1fr) minmax(150px, 1fr) 125px 125px 125px 150px minmax(150px, 1fr) 150px';\r\n\r\nexport const LeadTaskView = () => {\r\n const agency = useAgency();\r\n const [user] = useUser();\r\n const [users, setUsers] = useState([]);\r\n const [leads, setLeads] = useState([]);\r\n const [page, setPage] = useState('');\r\n const [sort, setSort] = useState('');\r\n // eslint-disable-next-line no-unused-vars\r\n const [agents, setAgents] = useState([]);\r\n const [leadTasks, setLeadTasks] = useState([]);\r\n const [leadTaskForUpdateOrDelete, setLeadTaskForUpdateOrDelete] = useState(null);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [taskFormIsOpen, setTaskFormIsOpen] = useState(false);\r\n const [selectedTasks, setSelectedTasks] = useState([]);\r\n const [isOpenInfoModal, setIsOpenInfoModal] = useState([]);\r\n const [sortTableActive, setSortTableActive] = useState(false);\r\n const [statusDialogOpen, setStatusDialogOpen] = useState(false);\r\n const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);\r\n const [tableColumns, setTableColumns] = useState(R.clone(TABLE_COLUMNS));\r\n const [activeColumns, setActiveColumns] = useState(R.clone(ACTIVE_COLUMNS));\r\n const [filterCategories, setFilterCategories] = useState(R.clone(FILTER_CATEGORIES));\r\n const [filters, setFilters] = useState({\r\n search: '',\r\n ...R.clone(FILTER_DATA),\r\n });\r\n\r\n const getTasks = useCallback(() => {\r\n const filterData = user.id\r\n ? {\r\n assignedTo: user.id,\r\n onStatus: TASKS_INITIAL_STATUS,\r\n agency: getActiveAgency().id,\r\n }\r\n : {};\r\n setIsLoading(true);\r\n fetchLeadTask({ filterData });\r\n }, [user.id]);\r\n\r\n const handleOnClickBtnSearch = () => {\r\n setIsLoading(true);\r\n const filterData = user.id\r\n ? {\r\n assignedTo: user.id,\r\n }\r\n : {};\r\n\r\n fetchLeadTask({ search: filters.search, filterData });\r\n };\r\n\r\n const handleExecuteSearch = (value) => {\r\n setSort(value);\r\n setIsLoading(true);\r\n fetchLeadTask({\r\n search: filters.search,\r\n sortData: sort,\r\n filterData: { ...R.clone(FILTER_DATA), assignedTo: user.id },\r\n });\r\n };\r\n\r\n const handleOnChange = (value) => {\r\n handleExecuteSearch(value);\r\n };\r\n\r\n const handlePageChange = (pageNum) => {\r\n const filterData = user.id\r\n ? {\r\n assignedTo: user.id,\r\n }\r\n : {};\r\n setIsLoading(true);\r\n setPage(pageNum);\r\n fetchLeadTask({ page: pageNum, filterData });\r\n setSelectedTasks([]);\r\n };\r\n const handleHideShowColumns = () => setSortTableActive(!sortTableActive);\r\n\r\n const taskCheckboxChangeHandler = (id) => {\r\n let newList;\r\n\r\n if (selectedTasks.includes(id)) {\r\n newList = selectedTasks.filter((oldId) => oldId !== id);\r\n } else {\r\n newList = [...selectedTasks, id];\r\n }\r\n setSelectedTasks(newList);\r\n };\r\n\r\n const headerCheckboxHandler = () => {\r\n let allTasks;\r\n\r\n if (selectedTasks.length === leadTasks.length) {\r\n allTasks = [];\r\n } else {\r\n allTasks = leadTasks.map((lead) => lead.id);\r\n }\r\n setSelectedTasks(allTasks);\r\n };\r\n const tableSortHandler = (sortIdentifier) => {\r\n const newColumnList = { ...tableColumns };\r\n newColumnList[sortIdentifier] = { ...tableColumns[sortIdentifier] };\r\n newColumnList[sortIdentifier].active = !newColumnList[sortIdentifier].active;\r\n setTableColumns(newColumnList);\r\n };\r\n\r\n const confirmSortTableHandler = (closeDropdown) => {\r\n const newActiveList = [];\r\n for (const key in tableColumns) {\r\n const columnClone = { ...tableColumns[key] };\r\n if (columnClone.active) {\r\n newActiveList.push(columnClone.value);\r\n }\r\n }\r\n setActiveColumns(newActiveList);\r\n setSortTableActive(false);\r\n closeDropdown();\r\n };\r\n\r\n const cancelSortTableHandler = (closeDropdown) => {\r\n const newLeadsColumns = { ...tableColumns };\r\n for (const key in newLeadsColumns) {\r\n newLeadsColumns[key] = { ...tableColumns[key] };\r\n if (activeColumns.includes(newLeadsColumns[key].value)) {\r\n newLeadsColumns[key].active = true;\r\n }\r\n }\r\n\r\n setTableColumns(newLeadsColumns);\r\n setSortTableActive(false);\r\n closeDropdown();\r\n };\r\n\r\n const handleInfoModal = (id) => {\r\n setLeadTaskForUpdateOrDelete(leadTasks.find((t) => id === t.id));\r\n setIsOpenInfoModal([...isOpenInfoModal, id]);\r\n };\r\n\r\n const openTaskFormDialog = () => {\r\n setTaskFormIsOpen(true);\r\n setIsOpenInfoModal([]);\r\n };\r\n\r\n const closeTaskFormDialog = () => {\r\n setTaskFormIsOpen(false);\r\n setIsOpenInfoModal([]);\r\n };\r\n\r\n const onCloseInfoModal = () => {\r\n setIsOpenInfoModal([]);\r\n };\r\n\r\n /**\r\n * Change the Task Status\r\n */\r\n\r\n const handleOnChangeStatus = (task) => {\r\n setLeadTaskForUpdateOrDelete(task);\r\n setStatusDialogOpen(!statusDialogOpen);\r\n };\r\n\r\n const handleChangeStatusYes = () => {\r\n handleChangeStatus(leadTaskForUpdateOrDelete);\r\n };\r\n\r\n const handleChangeStatusNo = () => {\r\n handleOnChangeStatus();\r\n };\r\n const handleChangeStatus = (leadTaskForUpdate) => {\r\n updateLeadTask({ id: leadTaskForUpdate.id, status: TASK_STATUS_CLOSED });\r\n handleChangeStatusNo();\r\n };\r\n\r\n /**\r\n * Delete the Task\r\n */\r\n\r\n const handleOnDeleteTask = (leadTaskForDelete = null) => {\r\n setDeleteDialogOpen(!deleteDialogOpen);\r\n if (leadTaskForDelete) setLeadTaskForUpdateOrDelete(leadTaskForDelete);\r\n };\r\n\r\n const handleDeleteTaskYes = () => {\r\n handleDeleteTask(leadTaskForUpdateOrDelete);\r\n };\r\n const handleDeleteTaskNo = () => {\r\n handleOnDeleteTask();\r\n };\r\n\r\n const handleDeleteTask = (leadTaskForDelete) => {\r\n deleteLeadTask(leadTaskForDelete.id);\r\n handleDeleteTaskNo();\r\n };\r\n\r\n const handleOnChangeFilter = (name, value) => {\r\n setFilters({\r\n ...filters,\r\n [name]: value,\r\n });\r\n };\r\n\r\n useSimpleSubscription(OnFetchManagerAndAgentUsersEvent, (data) => {\r\n if (data) {\r\n setUsers(data.usersList.items);\r\n setIsLoading(false);\r\n }\r\n });\r\n\r\n useSimpleSubscription(OnLeadsListEvent, (data) => {\r\n if (data) {\r\n setLeads(data.leadsList);\r\n setIsLoading(false);\r\n }\r\n });\r\n\r\n useSimpleSubscription(OnLeadTaskError, (err) => {\r\n if (err) {\r\n onErrorMixinFC(err);\r\n setIsLoading(false);\r\n }\r\n });\r\n\r\n useSimpleSubscription(OnLeadTaskList, (data) => {\r\n if (data) {\r\n setIsLoading(false);\r\n setLeadTasks(data.leadTasksList.items.map(leadTaskMap));\r\n }\r\n });\r\n\r\n useSimpleSubscription(OnLeadTaskUpdate, (data) => {\r\n if (data) {\r\n const updatedLeadTask = data.leadTaskUpdate;\r\n toast.success(`Task \"${updatedLeadTask.title}\" Updated!`);\r\n\r\n if (updatedLeadTask.status === TASK_STATUS_CLOSED) {\r\n setLeadTaskForUpdateOrDelete(null);\r\n }\r\n setIsLoading(true);\r\n getTasks();\r\n }\r\n });\r\n\r\n useSimpleSubscription(OnLeadTaskDelete, (data) => {\r\n if (data.leadTaskDelete.success) {\r\n setIsLoading(false);\r\n setLeadTaskForUpdateOrDelete(null);\r\n getTasks();\r\n toast.success('Task Deleted!');\r\n } else {\r\n setIsLoading(false);\r\n }\r\n });\r\n\r\n useSimpleSubscription(OnAgentsError, (err) => {\r\n if (err) {\r\n onErrorMixinFC(err);\r\n setIsLoading(false);\r\n }\r\n });\r\n\r\n useSimpleSubscription(OnAgentsListEvent, (data) => {\r\n if (data) {\r\n const filterCategoriesClone = R.clone(filterCategories);\r\n\r\n filterCategoriesClone.assignedTo.options = data.agentsList.items.map((agent) => ({\r\n label: `${agent.user.firstName} ${agent.user.lastName}`,\r\n value: agent.id,\r\n }));\r\n setFilterCategories(filterCategoriesClone);\r\n setAgents(\r\n data.agentsList.items.filter((agent) => {\r\n return agent.agency.id === agency.id;\r\n }),\r\n );\r\n }\r\n });\r\n\r\n useEffect(() => {\r\n fetchManagerAndAgents(agency.id);\r\n fetchLeads(1, {\r\n ...R.clone(FILTER_DATA_LEADS),\r\n agency: agency.id,\r\n });\r\n setPage(1);\r\n }, [agency.id]);\r\n\r\n useEffect(() => {\r\n setIsLoading(true);\r\n fetchLeadTaskTypes();\r\n fetchAgents();\r\n }, [agency.id]);\r\n\r\n useEffect(() => {\r\n getTasks();\r\n }, [getTasks]);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n handleOnChangeFilter('search', value)}\r\n placeholder=\"Search tasks\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n handleOnChange(value);\r\n },\r\n }}\r\n placeholder=\"Sort tasks by\"\r\n options={SORT_OPTIONS}\r\n />\r\n \r\n Tasks Calendar\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\n Lead History\n {\n closeModal(modalId);\n setFullHistory(false);\n }}\n />\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {!loading && history}\n {loading && (\n \n \n
\n )}\n\n {\n // {!loading && !load.completed && (\n // \n // setPage(page + 1)}>Load more\n //
\n //)\n }\n \n \n \n \n \n \n {difference !== null && (\n \n )}\n {info !== null && (\n \n )}\n \n )}\n \n );\n};\n\nLeadHistory.propTypes = {\n id: PropTypes.string.isRequired,\n isOpen: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n};\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { fetchLeadRecordings } from 'modules/leads/leads-actions';\nimport { LeadRecording } from '../types';\n\nconst initialState = {\n /**@type {LeadRecording[]}*/\n items: [],\n count: 0,\n loading: true,\n /**@type {Error | null}*/\n error: null,\n};\n\n/**\n * @param {string} leadId - Lead id to fetch recordings to.\n * @returns {{\n refresh: () => Promise;\n items: LeadRecording[];\n count: number;\n loading: boolean;\n error: Error | null;\n page: number;\n setPage: React.Dispatch>;\n}} - Logic to handle lead recordings pagination. */\nexport function useLeadRecordings(leadId) {\n const [page, setPage] = useState(1);\n const [queryState, setQueryState] = useState(initialState);\n\n const fetchLeadRecordingsData = useCallback(async () => {\n setQueryState((prevState) => ({ ...prevState, loading: true }));\n\n const leadRecordingsData = await fetchLeadRecordings(leadId, page);\n\n if (!leadRecordingsData?.phoneCallRecordingsList) {\n setQueryState((prevState) => ({\n ...prevState,\n error: new Error('Could not fetch lead recordings data'),\n }));\n return;\n }\n\n setQueryState((prevState) => ({\n ...prevState,\n items: leadRecordingsData.phoneCallRecordingsList.items,\n count: leadRecordingsData.phoneCallRecordingsList.count,\n loading: false,\n error: null,\n }));\n }, [leadId, page]);\n\n useEffect(() => {\n fetchLeadRecordingsData();\n }, [fetchLeadRecordingsData]);\n\n return { page, setPage, ...queryState, refresh: fetchLeadRecordingsData };\n}\n","import styled from 'styled-components';\n\nexport const PaginationContainer = styled.div`\n display: flex;\n justify-content: center;\n font-size: 1.2rem;\n`;\n","import React, { useMemo } from 'react';\nimport { Table } from '@8base/boost';\nimport styled from 'styled-components';\nimport moment from 'moment';\nimport AudioPlayer from 'react-h5-audio-player';\nimport { ColumnName, ColumnValue } from 'modules/leads/components/ColumnInfo';\nimport { formatPhoneNumber } from 'modules/phone-calls/phone-calls-utils';\nimport { CALL_TYPES } from 'modules/phone-calls/phone-calls-model';\n\nconst RecordingPlayerCell = styled(Table.BodyCell)`\n padding-left: 0px !important;\n`;\n\nconst DateContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n`;\n\nconst StyledText = styled.text`\n word-break: auto-phrase;\n`;\n\n/**\n * @param {object} props - Component props.\n * @param {LeadRecording} props.leadRecording - Component props.\n * @param {string} props.tableCols - Number of columns of the table.\n * @returns {React.ReactNode} Recording Item component.\n */\nexport function RecordingItem({ leadRecording, tableCols }) {\n const callType = useMemo(() => (leadRecording.call ? CALL_TYPES.OUTBOUND : CALL_TYPES.INBOUND), [\n leadRecording,\n ]);\n\n const call = useMemo(() => {\n return callType === CALL_TYPES.OUTBOUND ? leadRecording.call : leadRecording.inboundCall;\n }, [leadRecording, callType]);\n\n const recordingDate = useMemo(() => {\n const now = moment().startOf('day');\n const created = moment(call.createdAt);\n const yesterday = now\n .clone()\n .subtract(1, 'days')\n .startOf('day');\n\n if (created.isSame(now, 'day')) return 'Today';\n if (created.isSame(yesterday, 'day')) return 'Yesterday';\n return created.format('DD-MM-YYYY');\n }, [call]);\n\n const recordingTime = useMemo(() => {\n return moment(call.createdAt).format('LT');\n }, [call]);\n\n const from = useMemo(() => {\n return callType === CALL_TYPES.OUTBOUND\n ? `${call.user.firstName} ${call.user.lastName} ${formatPhoneNumber(\n `+${call.from.number.code}${call.from.number.number}`,\n )}`\n : formatPhoneNumber(call.from);\n }, [call, callType]);\n\n const to = useMemo(() => {\n return callType === CALL_TYPES.OUTBOUND\n ? call.lead\n ? `${call.lead.firstName} ${call.lead.lastName} ${formatPhoneNumber(call.to)}`\n : formatPhoneNumber(call.to)\n : formatPhoneNumber(`+${call.to.number.code}${call.to.number.number}`);\n }, [call, callType]);\n\n return (\n \n \n \n {recordingDate}\n {recordingTime}\n \n \n \n {from}\n \n \n {to}\n \n\n \n \n \n \n );\n}\n","import styled, { css, keyframes } from 'styled-components';\n\nconst slideIn = keyframes`\n 0% {\n transform: translateX(100%);\n }\n 100% {\n transform: translateX(0);\n }\n`;\n\nconst slideOut = keyframes`\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(100%);\n }\n`;\n\nconst animate = css`\n animation: 0.3s\n ${({ state }) => {\n switch (state) {\n case 'entering':\n return slideIn;\n case 'exiting':\n return slideOut;\n default:\n return '';\n }\n }}\n ease-in-out;\n`;\n\nexport const SideBar = styled.div`\n display: flex;\n gap: 0.5em;\n flex-direction: column;\n position: fixed;\n background-color: #fff;\n height: 100%;\n width: 800px;\n max-width: 940px;\n top: 0;\n right: 0;\n height: 100vh;\n box-shadow: 0 0px 3px 3px rgba(50, 50, 93, 0.14);\n transition: width 1s;\n z-index: 2;\n ${animate}\n`;\n","import React, { useEffect, useMemo, useRef } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { Card, Row, Column, Icon, Table, Pagination, useModal } from '@8base/boost';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { Title } from 'shared/components';\nimport { error as toastError } from 'shared/components/toast/Toast';\nimport { onErrorMixinFC } from 'shared/mixins';\nimport { OnFetchLeadRecordingsError } from '../leads-store';\nimport { useLeadRecordings } from './hooks/useLeadRecordings';\nimport { PaginationContainer } from './components/PaginationContainer';\nimport { RecordingItem } from './components/RecordingItem';\nimport { SideBar } from './components/SideBar';\n\nexport const leadRecordingsModalId = 'lead-recordings-modal';\n\n/**\n * @param {object} props - Component props.\n * @param {string} props.leadId - Lead id to fetch recordings for.\n * @returns {React.ReactNode} LeadRecordingsDrawer component\n */\nexport function LeadRecordingsDrawer({ leadId }) {\n const nodeRef = useRef(null);\n const { isOpen, closeModal } = useModal(leadRecordingsModalId);\n const {\n items: leadRecordings,\n loading: isLoadingLeadRecordings,\n count,\n page,\n setPage,\n error,\n } = useLeadRecordings(leadId);\n\n const tableCols = useMemo(() => '1fr 1fr 1fr 2fr', []);\n\n useSubscription(OnFetchLeadRecordingsError, (e) => {\n onErrorMixinFC(e);\n });\n\n useEffect(() => {\n if (!error) return;\n toastError(error.message);\n }, [error]);\n\n return (\n \n {(state) => (\n \n \n \n \n Lead Recordings\n {\n closeModal(leadRecordingsModalId);\n }}\n />\n
\n \n \n\n \n \n Date\n From\n To\n Play\n \n\n \n {(leadRecording) => (\n \n )}\n \n\n \n \n \n \n \n
\n \n )}\n \n );\n}\n","import React, { useState, useContext, useCallback, useEffect } from 'react';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport {\n Row,\n Button,\n Text,\n Icon,\n Dropdown,\n Menu,\n Heading as BoostHeading,\n styled,\n useModal,\n} from '@8base/boost';\nimport { modalId as decisionModalId } from '../../../shared/components/dialog/DecisionDialog';\nimport { modalId } from '../leads-history/components/LeadHistory';\nimport {\n LeadRecordingsDrawer,\n leadRecordingsModalId,\n} from '../leads-recordings/LeadRecordingsDrawer';\nimport { PhoneNumber } from '../../phone-calls/Components/PhoneNumber';\nimport { formatPhoneNumber } from '../../phone-calls/phone-calls-utils';\nimport { Box } from '../../../shared/components/Box';\nimport { ComposeEmailContext } from '../../email/components/ComposeEmailProvider';\nimport { deleteLead } from '../leads-actions';\nimport { OnFetchLeadMessages, OnFetchLeadMessagesError, OnLeadMessageCreate } from '../leads-store';\nimport { fetchLeadMessages } from '../leads-actions';\nimport MsgForm from './forms/MsgForm';\nimport {\n IconCallGreen,\n IconChatGreen,\n IconComposeEmailGreen,\n IconRecordingGreen,\n} from '../../../shared/components/ui/Icons';\nimport PropTypes from 'prop-types';\nimport { useHistory } from 'react-router';\nimport * as toast from '../../../shared/components/toast/Toast';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { useUser } from 'shared/hooks/useUser';\nimport { OnDeleteLeadEvent } from '../leads-events';\n\nconst Heading = styled(BoostHeading)`\n opacity: 0.9;\n color: #323c47 !important;\n font-family: 'Poppins';\n display: inline-block;\n font-size: 22px !important;\n line-height: 24px !important;\n font-weight: 600 !important;\n white-space: nowrap;\n`;\n\nconst NavBar = styled(Row)`\n width: 100%;\n\n @media screen and (max-width: 1200px) {\n width: 100%;\n flex-wrap: wrap !important;\n }\n`;\n\nconst NavInfo = styled.div`\n width: 30%;\n display: flex;\n\n & > *:not(:last-child) {\n margin-right: 8px;\n }\n\n @media screen and (max-width: 1200px) {\n width: 100%;\n }\n`;\n\nconst NavActions = styled(Row)`\n width: 70%;\n\n @media screen and (max-width: 1200px) {\n width: 100%;\n justify-content: center !important;\n padding-bottom: 16px;\n }\n\n @media screen and (max-width: 870px) {\n flex-wrap: wrap !important;\n }\n`;\n\nconst NavItem = styled.div`\n padding: 0 10px;\n\n @media screen and (max-width: 870px) {\n width: 100%;\n padding: 10px 0px;\n }\n`;\n\nexport const LeadDetailsHeader = ({ lead }) => {\n const { onCompose } = useContext(ComposeEmailContext);\n const { openModal, closeModal } = useModal(modalId);\n const [messages, setMessages] = useState([]);\n const [loadingMessages, setLoadingLeadMessages] = useState(true);\n const [isOpen, setOpen] = useState(false);\n const agency = useAgency();\n const user = useUser();\n const history = useHistory();\n useEffect(() => {\n setLoadingLeadMessages(true);\n\n fetchLeadMessages(lead.id);\n }, [lead]);\n\n useSubscription(OnDeleteLeadEvent, () => {\n closeModal(decisionModalId);\n\n toast.success('Success', 'Lead deleted successfully');\n\n history.replace('/leads');\n });\n\n useSubscription(\n OnFetchLeadMessages,\n ({ sMSMessagesList }) => {\n setLoadingLeadMessages(false);\n setMessages(sMSMessagesList.items);\n },\n [],\n );\n\n useSubscription(\n OnFetchLeadMessagesError,\n (e) => {\n onErrorMixinFC(e);\n\n setMessages([]);\n\n setLoadingLeadMessages(false);\n },\n [],\n );\n\n useSubscription(\n OnLeadMessageCreate,\n () => {\n toast.success('Success', 'Message sent successfully');\n\n setLoadingLeadMessages(true);\n\n fetchLeadMessages(lead.id);\n },\n [lead],\n );\n\n const onDelete = useCallback(\n (callback) => {\n openModal(decisionModalId, {\n title: 'Delete Lead',\n text: 'Are you sure you want to delete this lead ?',\n confirmText: 'Yes, Delete',\n cancelText: 'Cancel',\n onClose: () => closeModal(decisionModalId),\n onCancel: () => closeModal(decisionModalId),\n onConfirm: () => deleteLead(lead.id),\n });\n\n callback();\n },\n [lead, openModal, closeModal],\n );\n\n const name = `${lead.firstName} ${lead.lastName}`;\n const [phone] = lead.leadLeadPhoneNumberRelation.items;\n\n return (\n \n \n \n {name}\n {phone && (\n \n {formatPhoneNumber(phone.phone.number)}\n \n )}\n \n \n \n openModal(leadRecordingsModalId, { customArg: 1 })}>\n {' '}\n Recordings\n \n \n {phone && (\n \n \n {' '}\n Call\n \n \n )}\n \n setOpen(true)}>\n {' '}\n Text\n \n \n \n \n onCompose({\n id: lead.id,\n to: lead.email,\n })\n }\n color=\"neutral\"\n variant=\"link\">\n {' '}\n Email\n \n \n \n \n openModal(modalId, {\n user: user[0].id,\n agency: agency.id,\n })\n }>\n {' '}\n History\n \n \n \n \n \n \n \n \n {({ closeDropdown: close }) => (\n \n )}\n \n \n \n \n \n \n setOpen(false)}\n />\n \n );\n};\n\nLeadDetailsHeader.propTypes = {\n lead: PropTypes.shape({\n id: PropTypes.string.isRequired,\n email: PropTypes.string.isRequired,\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n leadLeadPhoneNumberRelation: PropTypes.shape({\n items: PropTypes.arrayOf(PropTypes.object.isRequired),\n }),\n }).isRequired,\n};\n","import React, { useState, useEffect } from 'react';\nimport { Column, Input, Text } from '@8base/boost';\nimport { updateLeadAmount } from '../../leads-actions';\nimport { Box } from '../../../../shared/components/Box';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { OnUpdateLeadAmount, OnUpdateLeadAmountError } from '../../leads-store';\nimport * as toast from '../../../../shared/components/toast/Toast';\nimport { onErrorMixinFC } from '../../../../shared/mixins';\nimport PropTypes from 'prop-types';\n\n/**\n * LeadAmountForm - Component for handling the lead amount form.\n *\n * @param {object} props - The properties passed to the component.\n * @param {string} props.id - The identifier for the lead.\n * @param {string} [props.amount = '0'] - The amount associated with the lead.\n * @param {boolean} props.refresh - Indicates whether the form should refresh after an action.\n *\n * @returns {React.ReactNode} The form for managing the lead amount.\n */\nexport const LeadAmountForm = ({ id, amount = '0', refresh }) => {\n const [value, setValue] = useState(0);\n\n useEffect(() => {\n if (amount) {\n setValue(parseFloat(amount));\n }\n }, [amount]);\n\n useSubscription(\n OnUpdateLeadAmount,\n () => {\n toast.success('Success', 'Amount updated successfully');\n\n refresh();\n },\n [refresh],\n );\n\n useSubscription(\n OnUpdateLeadAmountError,\n (e) => {\n onErrorMixinFC(e);\n },\n [],\n );\n\n const handleUpdate = () => {\n const prev = amount ? parseFloat(amount) : 0;\n const next = value ? value : 0;\n\n if(next === prev) return;\n\n updateLeadAmount(id, String(next));\n };\n\n return (\n \n \n Amount\n \n \n \n );\n};\n\nLeadAmountForm.propTypes = {\n id: PropTypes.string.isRequired,\n amount: PropTypes.string,\n refresh: PropTypes.func.isRequired,\n};\n\nLeadAmountForm.defaultProps = {\n amount: '0',\n};\n","import React, { useState, useMemo, useCallback, useEffect } from 'react';\nimport { Column, Select, Text } from '@8base/boost';\nimport { Box } from '../../../../shared/components/Box';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport {\n OnFetchLeadStages,\n OnFetchLeadStagesError,\n OnSetLeadStage,\n OnSetLeadStageError,\n} from '../../leads-stage/leads-stage-store';\nimport { fetchLeadStages, assignLeadStage } from '../../leads-stage/leads-stage-action';\nimport { onErrorMixinFC } from '../../../../shared/mixins';\nimport * as toast from '../../../../shared/components/toast/Toast';\nimport PropTypes from 'prop-types';\n\nexport const LeadStageForm = ({ id, stage, refresh }) => {\n const [stages, setStages] = useState([]);\n const [value, setValue] = useState(stage);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n fetchLeadStages();\n }, []);\n\n const onChange = useCallback(\n (selected) => {\n setLoading(true);\n setValue(selected);\n\n assignLeadStage(id, selected);\n },\n [id],\n );\n\n useSubscription(\n OnFetchLeadStages,\n ({ leadStagesList }) => {\n setStages(leadStagesList.items);\n setLoading(false);\n },\n [],\n );\n\n useSubscription(\n OnFetchLeadStagesError,\n (e) => {\n onErrorMixinFC(e);\n },\n [],\n );\n\n useSubscription(\n OnSetLeadStage,\n () => {\n setLoading(false);\n refresh();\n\n toast.success('Success', 'Lead stage updated successfuly');\n },\n [refresh],\n );\n\n useSubscription(\n OnSetLeadStageError,\n (e) => {\n setLoading(false);\n\n onErrorMixinFC(e);\n },\n [],\n );\n\n const options = useMemo(\n () =>\n stages.map((stage) => ({\n label: stage.name,\n value: stage.id,\n })),\n [stages],\n );\n\n return (\n \n \n Stage\n \n \n \n );\n};\n\nLeadStageForm.propTypes = {\n id: PropTypes.string.isRequired,\n stage: PropTypes.string,\n refresh: PropTypes.func.isRequired,\n};\n\nLeadStageForm.defaultProps = {\n stage: '',\n};\n","import React, { useState, useMemo, useCallback, useEffect } from 'react';\nimport { Column, Select, Text } from '@8base/boost';\nimport { Box } from '../../../../shared/components/Box';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { OnUpdateLeadCampaign, OnUpdateLeadCampaignError } from '../../leads-store';\nimport { updateLeadCampaign } from '../../leads-actions';\nimport { onErrorMixinFC } from '../../../../shared/mixins';\nimport * as toast from '../../../../shared/components/toast/Toast';\nimport PropTypes from 'prop-types';\n\nexport const LeadCampaignForm = ({ id, campaign, campaigns, refresh }) => {\n const [value, setValue] = useState(campaign);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n setLoading(false);\n }, [campaign]);\n\n const onChange = useCallback(\n (selected) => {\n setLoading(true);\n setValue(selected);\n\n updateLeadCampaign(id, selected);\n },\n [id],\n );\n\n useSubscription(\n OnUpdateLeadCampaign,\n () => {\n setLoading(false);\n refresh();\n\n toast.success('Success', 'Lead campaign updated successfuly');\n },\n [refresh],\n );\n\n useSubscription(\n OnUpdateLeadCampaignError,\n (e) => {\n setLoading(false);\n\n onErrorMixinFC(e);\n },\n [],\n );\n\n const options = useMemo(\n () =>\n campaigns.map((stage) => ({\n label: stage.name,\n value: stage.id,\n })),\n [campaigns],\n );\n\n return (\n \n \n Campaign\n \n \n \n );\n};\n\nLeadCampaignForm.propTypes = {\n id: PropTypes.string.isRequired,\n campaign: PropTypes.string.isRequired,\n campaigns: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n name: PropTypes.string,\n }),\n ).isRequired,\n refresh: PropTypes.func.isRequired,\n};\n","import React, { useState, useCallback, useMemo, useEffect } from 'react';\nimport { Column, Input, Text, Icon, Dropdown, Menu, Checkbox, Button } from '@8base/boost';\nimport { getAssignedUsersLabel } from '../../../users/user-utils';\nimport { Box } from '../../../../shared/components/Box';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { OnUpdateLeadAssignees, OnUpdateLeadAssigneesError } from '../../leads-store';\nimport { updateLeadAssignees } from '../../leads-actions';\nimport { onErrorMixinFC } from '../../../../shared/mixins';\nimport * as toast from '../../../../shared/components/toast/Toast';\nimport PropTypes from 'prop-types';\n\nexport const LeadAssigneesForm = ({ id, assignees, users, refresh }) => {\n const [selected, setSelected] = useState(assignees);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n setSelected(assignees);\n }, [assignees]);\n\n const onSelect = useCallback((user, checked) => {\n if (checked) {\n setSelected((prevState) => [...prevState, user]);\n } else {\n setSelected((prevState) => prevState.filter((u) => u.id !== user.id));\n }\n }, []);\n\n const onAccept = (callback) => {\n setLoading(true);\n\n updateLeadAssignees(\n id,\n selected.map((user) => user.id),\n );\n\n callback();\n };\n\n useSubscription(\n OnUpdateLeadAssignees,\n () => {\n setLoading(false);\n\n toast.success('Success', 'Users assigned correctly to lead');\n\n refresh();\n },\n [refresh],\n );\n\n useSubscription(\n OnUpdateLeadAssigneesError,\n (e) => {\n setLoading(false);\n\n onErrorMixinFC(e);\n },\n [],\n );\n\n const value = getAssignedUsersLabel(assignees);\n\n const options = useMemo(\n () =>\n users.map((user) => (\n \n sel.id === user.id)}\n onChange={(value) => onSelect(user, value)}\n />\n \n )),\n [users, selected, onSelect],\n );\n\n return (\n \n \n Assigned To\n \n \n }\n />\n \n \n {({ closeDropdown: close }) => (\n \n \n onAccept(close)}>\n Accept\n \n \n \n \n )}\n \n \n \n \n );\n};\n\nLeadAssigneesForm.propTypes = {\n id: PropTypes.string.isRequired,\n assignees: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n }),\n ).isRequired,\n users: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n }),\n ).isRequired,\n refresh: PropTypes.func.isRequired,\n};\n","import React, { useState, useMemo, useContext } from 'react';\nimport { Row, Heading, Grid, Text, Button } from '@8base/boost';\nimport { Box } from '../../../../shared/components/Box';\nimport { ColumnInfo } from '../ColumnInfo';\nimport { formatContactData, leadDetailMap } from '../../lead-details-utils';\nimport LeadFormDialog from '../LeadFormDialog';\nimport { ComposeEmailContext } from '../../../email/components/ComposeEmailProvider';\nimport { useAgency } from '../../../../shared/hooks/useAgency';\nimport PropTypes from 'prop-types';\n\nexport const LeadInfoCard = ({ lead, users, campaigns, refresh }) => {\n const { onCompose } = useContext(ComposeEmailContext);\n const [isOpen, setOpen] = useState(false);\n const agency = useAgency();\n\n const data = useMemo(\n () =>\n formatContactData(lead).map((row, i) => (\n \n \n {row.map((column, j) => (\n \n {column.label}\n {column.isTextContact ? (\n column.label === 'Email' ? (\n onCompose(lead)}>\n {column.value}\n \n ) : (\n {column.value}\n )\n ) : (\n column.value\n )}\n \n ))}\n \n \n )),\n [lead, onCompose],\n );\n\n return (\n \n \n \n Contact Information\n \n
\n \n \n \n {data}\n \n \n setOpen(false)}\n />\n \n );\n};\n\nLeadInfoCard.propTypes = {\n lead: PropTypes.object.isRequired,\n users: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n }),\n ).isRequired,\n campaigns: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n }),\n ).isRequired,\n refresh: PropTypes.func.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Form,\n Grid,\n InputField,\n styled,\n SelectField,\n CheckboxField,\n DateInputField,\n} from '@8base/boost';\nimport { Margin } from 'shared/components';\n\nconst GridBoxFlexEnd = styled(Grid.Box)`\n justify-content: flex-end;\n`;\n\n/**\n * Form with fields\n *\n * @param {object} props component props\n * @param {object} props.data data\n * @param {object} props.rows rows with fields\n * @param {Function} props.onChangeInput handle for onChange input\n * @returns {React.Component} - Input Component\n */\nconst FormFields = ({ data, rows, onChangeInput }) => {\n return (\n \n );\n};\n\nFormFields.propTypes = {\n rows: PropTypes.array.isRequired,\n data: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n};\n\nexport default FormFields;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport FormFields from '../../../../shared/components/forms/FormFields';\n\nconst LeadTypeAutoForm = ({ leadTypeData, onChangeInput }) => {\n const rows = [\n [\n {\n key: 'alternate',\n label: 'Alternate',\n type: 'text',\n },\n {\n key: 'otherInfo',\n label: 'Other Info',\n type: 'text',\n },\n ],\n [\n {\n key: 'currentBodilyInjuryCoverages',\n label: 'Current Bodily Injury Coverages',\n type: 'text',\n },\n {\n key: 'currentPropertyDamageCoverages',\n label: 'Current Property Damage Coverages',\n type: 'text',\n },\n ],\n ];\n\n return ;\n};\n\nLeadTypeAutoForm.propTypes = {\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n};\n\nexport default LeadTypeAutoForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DialogForm } from 'shared/components';\nimport LeadTypeAutoForm from './LeadTypeAutoForm';\n\nconst LeadTypeAutoFormDialog = ({\n isOpen,\n isUpdate,\n loading,\n onSubmit,\n leadTypeData,\n onCloseDialog,\n onChangeInput,\n}) => {\n return (\n \n \n \n );\n};\n\nLeadTypeAutoFormDialog.propTypes = {\n isUpdate: PropTypes.bool,\n isOpen: PropTypes.bool.isRequired,\n loading: PropTypes.bool.isRequired,\n onSubmit: PropTypes.func.isRequired,\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n onCloseDialog: PropTypes.func.isRequired,\n};\n\nLeadTypeAutoFormDialog.defaultProps = {\n isUpdate: false,\n};\n\nexport default LeadTypeAutoFormDialog;\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnleadsAutoUpdateEvent = createEvent();\n\nexport const OnleadsAutoError = createEvent();\n","import { error, log } from '@cobuildlab/pure-logger';\nimport { OnApolloClient } from '../../../shared/session/session-events';\nimport { LEAD_TYPE_AUTO_UPDATE_MUTATION } from './leads-type-auto-queries';\nimport { leadAutoValidations } from './leads-type-auto-utils';\nimport { OnleadsAutoError, OnleadsAutoUpdateEvent } from './leads-type-auto-events';\n\n/**\n * Update a lead type auto\n *\n * @param {object} leadAuto lead type auto\n * @returns {object} response data\n */\nexport const updateLeadAuto = async (leadAuto) => {\n const client = OnApolloClient.get();\n let response;\n\n try {\n leadAutoValidations(leadAuto);\n } catch (e) {\n error('updateLeadAuto', e);\n\n return OnleadsAutoError.dispatch(e);\n }\n\n try {\n response = await client.mutate({\n mutation: LEAD_TYPE_AUTO_UPDATE_MUTATION,\n variables: { data: leadAuto },\n });\n } catch (e) {\n error('updateLeadAuto', e);\n\n return OnleadsAutoError.dispatch(e);\n }\n\n log('updateLeadAuto', response);\n OnleadsAutoUpdateEvent.dispatch(response.data);\n\n return response.data;\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { Card, Row, Loader } from '@8base/boost';\nimport { Box } from '../../../shared/components/Box';\nimport { Title, ButtonWithoutIcon } from 'shared/components';\n\nconst Body = styled(Card.Body)`\n max-height: 576px;\n\n &::-webkit-scrollbar {\n width: 8px; /* Tamaño del scroll en vertical */\n height: 8px; /* Tamaño del scroll en horizontal */\n }\n &::-webkit-scrollbar-thumb,\n &::-webkit-scrollbar-track {\n transition: all 1s ease-in-out;\n }\n &::-webkit-scrollbar-thumb {\n background: #ccc;\n border-radius: 4px;\n }\n &:hover::-webkit-scrollbar-thumb:hover {\n background: #b3b3b3;\n box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);\n }\n &::-webkit-scrollbar-thumb:active {\n background-color: #999999;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-track:hover,\n &::-webkit-scrollbar-track:active {\n background: #d4d4d4;\n }\n`;\n\nconst PaperInfo = ({ title, loading, btnText, children, onClickBtn }) => {\n const content = loading ? (\n \n \n
\n ) : (\n children\n );\n\n return (\n \n \n \n {title}\n \n
\n \n {content}\n \n );\n};\n\nPaperInfo.propTypes = {\n title: PropTypes.string.isRequired,\n loading: PropTypes.bool,\n btnText: PropTypes.string.isRequired,\n onClickBtn: PropTypes.func.isRequired,\n children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,\n};\n\nPaperInfo.defaultProps = {\n loading: false,\n};\n\nexport default PaperInfo;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@8base/boost';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport * as R from 'ramda';\nimport LeadTypeAutoFormDialog from './LeadTypeAutoDialogForm';\nimport { updateLeadAuto } from '../leads-type-auto-actions';\nimport { onErrorMixinFC, onChangeDataHookMixin } from '../../../../shared/mixins';\nimport { formatData, leadAutoMap, leadAutoCreateMap } from '../leads-type-auto-utils';\nimport { ColumnInfo, ColumnName, ColumnValue } from '../../components/ColumnInfo';\nimport PaperInfo from '../../components/PaperInfo';\nimport { OnleadsAutoError, OnleadsAutoUpdateEvent } from '../leads-type-auto-events';\n\nconst LeadTypeAutoInfo = ({ leadTypeData }) => {\n const [loading, setLoading] = useState(false);\n const [leadTypeInfo, setLeadTypeInfo] = useState(R.clone(leadTypeData));\n const [leadTypeFields, setLeadTypeFields] = useState(leadAutoMap(R.clone(leadTypeData)));\n const [isOpenForm, setIsOpenForm] = useState(false);\n const handleOnSubmitForm = () => {\n const leadAutoToUpdate = {\n id: leadTypeFields.id,\n ...leadAutoCreateMap(leadTypeFields),\n };\n\n setLoading(true);\n updateLeadAuto(leadAutoToUpdate);\n };\n const handleOnChangeInput = (value, key) => {\n onChangeDataHookMixin(leadTypeFields, setLeadTypeFields, key, value);\n };\n\n useEventSubscription(OnleadsAutoUpdateEvent, (data) => {\n if (data) {\n setLoading(false);\n setIsOpenForm(false);\n setLeadTypeInfo(data.leadTypeAutoUpdate);\n }\n });\n\n useEventSubscription(OnleadsAutoError, (err) => {\n if (err) {\n setLoading(false);\n onErrorMixinFC(err);\n }\n });\n\n return (\n <>\n setIsOpenForm(true)}>\n \n {leadTypeInfo &&\n formatData(leadTypeInfo).map((row, i) => {\n return (\n \n \n {row.map((column, j) => {\n return (\n \n {column.label}\n {column.value}\n \n );\n })}\n \n \n );\n })}\n \n \n setIsOpenForm(false)}\n />\n \n );\n};\n\nLeadTypeAutoInfo.propTypes = {\n leadTypeData: PropTypes.object.isRequired,\n};\n\nexport default LeadTypeAutoInfo;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport FormFields from '../../../../shared/components/forms/FormFields';\n\n/**\n * Lead type commercial auto form\n *\n * @param {object} props component props\n * @param {object} props.leadTypeData data\n * @param {Function} props.onChangeInput handle for onChange input\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeCommercialAutoForm = ({ leadTypeData, onChangeInput }) => {\n const rows = [\n [\n {\n key: 'businessName',\n label: 'Company Name',\n type: 'text',\n },\n {\n key: 'name',\n label: 'Name',\n type: 'text',\n },\n ],\n [\n {\n key: 'yearsInBusiness',\n label: 'Years in Business',\n type: 'number',\n },\n {\n key: 'numberOfEmployees',\n label: 'Number Of Employees',\n type: 'number',\n },\n ],\n [\n {\n key: 'businessType',\n label: 'Business Type',\n type: 'text',\n },\n {\n key: 'coverageAmount',\n label: 'Coverage Amount',\n type: 'number',\n },\n ],\n [\n {\n key: 'payroll',\n label: 'Payroll',\n type: 'text',\n },\n {\n key: 'sales',\n label: 'Sales',\n type: 'text',\n },\n ],\n [\n {\n key: 'numberOfVehicles',\n label: 'Number Of Vehicles',\n type: 'number',\n },\n {\n key: 'numberOfDrivers',\n label: 'Number Of Drivers',\n type: 'number',\n },\n ],\n ];\n\n return ;\n};\n\nLeadTypeCommercialAutoForm.propTypes = {\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n};\n\nexport default LeadTypeCommercialAutoForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DialogForm } from 'shared/components';\nimport LeadTypeCommercialAutoForm from './LeadTypeCommercialAutoForm';\n\nconst LeadTypeCommercialAutoFormDialog = ({\n isOpen,\n isUpdate,\n loading,\n onSubmit,\n leadTypeData,\n onCloseDialog,\n onChangeInput,\n}) => {\n return (\n \n \n \n );\n};\n\nLeadTypeCommercialAutoFormDialog.propTypes = {\n isUpdate: PropTypes.bool,\n isOpen: PropTypes.bool.isRequired,\n loading: PropTypes.bool.isRequired,\n onSubmit: PropTypes.func.isRequired,\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n onCloseDialog: PropTypes.func.isRequired,\n};\n\nLeadTypeCommercialAutoFormDialog.defaultProps = {\n isUpdate: false,\n};\n\nexport default LeadTypeCommercialAutoFormDialog;\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnLeadsCommercialAutoUpdateEvent = createEvent();\n\nexport const OnLeadsCommercialAutoError = createEvent();\n","import { error, log } from '@cobuildlab/pure-logger';\nimport { OnApolloClient } from '../../../shared/session/session-events';\nimport {\n OnLeadsCommercialAutoError,\n OnLeadsCommercialAutoUpdateEvent,\n} from './leads-type-commercial-auto-events';\nimport { LEADS_TYPE_COMMERCIAL_AUTO_UPDATE_MUTATION } from './leads-type-commercial-auto-queries';\nimport { leadCommercialAutoValidations } from './leads-type-commercial-auto-utils';\n\n/**\n * Update a lead type commercial auto\n *\n * @param {object} leadCommercialAuto lead type commercial auto\n * @returns {object} response data\n */\nexport const updateLeadCommercialAuto = async (leadCommercialAuto) => {\n const client = OnApolloClient.get();\n let response;\n\n try {\n leadCommercialAutoValidations(leadCommercialAuto);\n } catch (e) {\n error('updateLeadCommercialAuto', e);\n\n return OnLeadsCommercialAutoError.dispatch(e);\n }\n\n try {\n response = await client.mutate({\n mutation: LEADS_TYPE_COMMERCIAL_AUTO_UPDATE_MUTATION,\n variables: { data: leadCommercialAuto },\n });\n } catch (e) {\n error('updateLeadCommercialAuto', e);\n\n return OnLeadsCommercialAutoError.dispatch(e);\n }\n\n log('updateLeadCommercialAuto', response);\n OnLeadsCommercialAutoUpdateEvent.dispatch(response.data);\n\n return response.data;\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@8base/boost';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport * as R from 'ramda';\nimport LeadTypeCommercialAutoFormDialog from './LeadTypeCommercialAutoDialogForm';\nimport { updateLeadCommercialAuto } from '../leads-type-commercial-auto-actions';\nimport { onErrorMixinFC, onChangeDataHookMixin } from '../../../../shared/mixins';\nimport {\n formatData,\n leadCommercialAutoMap,\n leadCommercialAutoCreateMap,\n} from '../leads-type-commercial-auto-utils';\nimport { ColumnInfo, ColumnName, ColumnValue } from '../../components/ColumnInfo';\nimport PaperInfo from '../../components/PaperInfo';\nimport {\n OnLeadsCommercialAutoError,\n OnLeadsCommercialAutoUpdateEvent,\n} from '../leads-type-commercial-auto-events';\n\nconst LeadTypeCommercialAutoInfo = ({ leadTypeData }) => {\n const [loading, setLoading] = useState(false);\n const [leadTypeInfo, setLeadTypeInfo] = useState(R.clone(leadTypeData));\n const [leadTypeFields, setLeadTypeFields] = useState(\n leadCommercialAutoMap(R.clone(leadTypeData)),\n );\n const [isOpenForm, setIsOpenForm] = useState(false);\n const handleOnSubmitForm = () => {\n const leadCommercialAutoToUpdate = {\n id: leadTypeFields.id,\n ...leadCommercialAutoCreateMap(leadTypeFields),\n };\n\n setLoading(true);\n updateLeadCommercialAuto(leadCommercialAutoToUpdate);\n };\n const handleOnChangeInput = (value, key) => {\n onChangeDataHookMixin(leadTypeFields, setLeadTypeFields, key, value);\n };\n\n useEventSubscription(OnLeadsCommercialAutoUpdateEvent, (data) => {\n setLoading(false);\n setIsOpenForm(false);\n setLeadTypeInfo(data.leadTypeCommercialAutoUpdate);\n });\n\n useEventSubscription(OnLeadsCommercialAutoError, (err) => {\n setLoading(false);\n onErrorMixinFC(err);\n });\n\n return (\n <>\n setIsOpenForm(true)}>\n \n {leadTypeInfo &&\n formatData(leadTypeInfo).map((row, i) => {\n return (\n \n \n {row.map((column, j) => {\n return (\n \n {column.label}\n {column.value}\n \n );\n })}\n \n \n );\n })}\n \n \n setIsOpenForm(false)}\n />\n \n );\n};\n\nLeadTypeCommercialAutoInfo.propTypes = {\n leadTypeData: PropTypes.object.isRequired,\n};\n\nexport default LeadTypeCommercialAutoInfo;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Form, Grid, InputField, DateInputField } from '@8base/boost';\n\n/**\n * Lead type form\n *\n * @param {object} props component props\n * @param {object} props.leadTypeData data\n * @param {Function} props.onChangeInput handle for onChange input\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeGeneralLiabilityForm = ({ leadTypeData, onChangeInput }) => {\n return (\n \n );\n};\n\nLeadTypeGeneralLiabilityForm.propTypes = {\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n};\n\nexport default LeadTypeGeneralLiabilityForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DialogForm } from 'shared/components';\nimport LeadTypeGeneralLiabilityForm from './LeadTypeGeneralLiabilityForm';\n\n/**\n * Lead type dialog that contains the form\n *\n * @param {object} props component props\n * @param {boolean} props.isOpen dialog open value\n * @param {boolean} props.isUpdate bool for change the title of the dialog\n * @param {boolean} props.loading bool for indicates if the request is loading\n * @param {Function} props.onSubmit handle for on submit form\n * @param {object} props.leadTypeData lead type data\n * @param {Function} props.onCloseDialog handle for close the dialog\n * @param {Function} props.onChangeInput handle on change for the fields\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeGeneralLiabilityFormDialog = ({\n isOpen,\n isUpdate,\n loading,\n onSubmit,\n leadTypeData,\n onCloseDialog,\n onChangeInput,\n}) => {\n return (\n \n \n \n );\n};\n\nLeadTypeGeneralLiabilityFormDialog.propTypes = {\n isUpdate: PropTypes.bool,\n isOpen: PropTypes.bool.isRequired,\n loading: PropTypes.bool.isRequired,\n onSubmit: PropTypes.func.isRequired,\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n onCloseDialog: PropTypes.func.isRequired,\n};\n\nLeadTypeGeneralLiabilityFormDialog.defaultProps = {\n isUpdate: false,\n};\n\nexport default LeadTypeGeneralLiabilityFormDialog;\n","import { ValidationError } from '../../../shared/errors';\nimport { isValidString, isValidNumber } from '../../../shared/validators';\n\nconst leadGeneralLiabilityMessage = 'The lead type must have a ';\nconst leadGeneralLiabilityMessageValid = `${leadGeneralLiabilityMessage} valid`;\nconst messages = {\n natureOfBusiness: leadGeneralLiabilityMessageValid + ' nature of business',\n companyName: leadGeneralLiabilityMessageValid + ' company name',\n grossSales: leadGeneralLiabilityMessageValid + ' gross sales',\n numberOfEmployees: leadGeneralLiabilityMessageValid + ' number of employees',\n payroll: leadGeneralLiabilityMessageValid + ' payroll',\n};\n\n/**\n * Validate that the lead type has all the fields necessaries with the right format.\n *\n * @param {object} leadGeneralLiability - the lead type type to be validated\n */\nexport const updateLeadGeneralLiabilityValidator = (leadGeneralLiability) => {\n let errorMessages = [];\n\n if (!isValidString(leadGeneralLiability.natureOfBusiness))\n errorMessages.push(messages.natureOfBusiness);\n\n if (!isValidString(leadGeneralLiability.companyName)) errorMessages.push(messages.companyName);\n\n if (!isValidNumber(leadGeneralLiability.grossSales)) errorMessages.push(messages.grossSales);\n\n if (!isValidNumber(leadGeneralLiability.numberOfEmployees))\n errorMessages.push(messages.numberOfEmployees);\n\n if (errorMessages.length !== 0) throw new ValidationError(errorMessages);\n};\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnLeadsGeneralLiabilityUpdateEvent = createEvent();\n\nexport const OnLeadsGeneralLiabilityError = createEvent();\n","import { error, log } from '@cobuildlab/pure-logger';\nimport { OnApolloClient } from 'shared/session/session-events';\nimport { LEAD_TYPE_GENERAL_LIABILITY_UPDATE_MUTATION } from './leads-type-general-liability-queries';\nimport { updateLeadGeneralLiabilityValidator } from './leads-type-general-liability-validators';\nimport {\n OnLeadsGeneralLiabilityError,\n OnLeadsGeneralLiabilityUpdateEvent,\n} from './leads-type-general-liability-events';\n\n/**\n * Update a lead type\n *\n * @param {object} leadGeneralLiability lead type\n * @returns {object} response data\n */\nexport const updateLeadGeneralLiability = async (leadGeneralLiability) => {\n const client = OnApolloClient.get();\n let response;\n\n try {\n updateLeadGeneralLiabilityValidator(leadGeneralLiability);\n } catch (e) {\n error('updateGeneralLiability', e);\n\n return OnLeadsGeneralLiabilityError.dispatch(e);\n }\n\n try {\n response = await client.mutate({\n mutation: LEAD_TYPE_GENERAL_LIABILITY_UPDATE_MUTATION,\n variables: { data: leadGeneralLiability },\n });\n } catch (e) {\n error('updateGeneralLiability', e);\n\n return OnLeadsGeneralLiabilityError.dispatch(e);\n }\n\n log('updateGeneralLiability', response);\n OnLeadsGeneralLiabilityUpdateEvent.dispatch(response.data);\n\n return response.data;\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@8base/boost';\nimport * as R from 'ramda';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport LeadTypeGeneralLiabilityFormDialog from './LeadTypeGeneralLiabilityDialogForm';\nimport { updateLeadGeneralLiability } from '../leads-type-general-liability-actions';\nimport { onErrorMixinFC, onChangeDataHookMixin } from '../../../../shared/mixins';\nimport {\n formatData,\n leadGeneralLiabilityMap,\n leadGeneralLiabilityCreateMap,\n} from '../leads-type-general-liability-utils';\nimport { ColumnInfo, ColumnName, ColumnValue } from '../../components/ColumnInfo';\nimport PaperInfo from '../../components/PaperInfo';\nimport {\n OnLeadsGeneralLiabilityError,\n OnLeadsGeneralLiabilityUpdateEvent,\n} from '../leads-type-general-liability-events';\n\n/**\n * Lead type table info component\n *\n * @param {object} props component props\n * @param {object} props.leadTypeData data\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeGeneralLiabilityInfo = ({ leadTypeData }) => {\n const [loading, setLoading] = useState(false);\n const [leadTypeInfo, setLeadTypeInfo] = useState(R.clone(leadTypeData));\n const [leadTypeFields, setLeadTypeFields] = useState(\n leadGeneralLiabilityMap(R.clone(leadTypeData)),\n );\n const [isOpenForm, setIsOpenForm] = useState(false);\n const handleOnSubmitForm = () => {\n const leadTypeToUpdate = {\n id: leadTypeFields.id,\n ...leadGeneralLiabilityCreateMap(leadTypeFields),\n };\n\n setLoading(true);\n updateLeadGeneralLiability(leadTypeToUpdate);\n };\n const handleOnChangeInput = (value, key) => {\n onChangeDataHookMixin(leadTypeFields, setLeadTypeFields, key, value);\n };\n\n useEventSubscription(OnLeadsGeneralLiabilityUpdateEvent, (data) => {\n setLoading(false);\n setIsOpenForm(false);\n setLeadTypeInfo(data.leadTypeGeneralLiabilityUpdate);\n });\n\n useEventSubscription(OnLeadsGeneralLiabilityError, (err) => {\n setLoading(false);\n onErrorMixinFC(err);\n });\n\n return (\n <>\n setIsOpenForm(true)}>\n \n {leadTypeInfo &&\n formatData(leadTypeInfo).map((row, i) => {\n return (\n \n \n {row.map((column, j) => {\n return (\n \n {column.label}\n {column.value}\n \n );\n })}\n \n \n );\n })}\n \n \n setIsOpenForm(false)}\n />\n \n );\n};\n\nLeadTypeGeneralLiabilityInfo.propTypes = {\n leadTypeData: PropTypes.array.isRequired,\n};\n\nexport default LeadTypeGeneralLiabilityInfo;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { BIRTHDAY_OPTIONS, BIRTHYEAR_OPTIONS, BIRTHMONTH_OPTIONS } from '../../leads-model';\nimport FormFields from '../../../../shared/components/forms/FormFields';\n\n/**\n * Lead type life form\n *\n * @param {object} props component props\n * @param {object} props.leadTypeData data\n * @param {Function} props.onChangeInput handle for onChange input\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeLifeForm = ({ leadTypeData, onChangeInput }) => {\n const rows = [\n [\n {\n key: 'lifeInsuranceInformation',\n label: 'Life Insurance Information',\n type: 'text',\n },\n {\n key: 'policyType',\n label: 'Policy Type',\n type: 'text',\n },\n ],\n [\n {\n key: 'birthMonth',\n label: 'Date of Birth',\n type: 'select',\n options: BIRTHMONTH_OPTIONS,\n },\n {\n key: 'birthDay',\n label: '',\n type: 'select',\n options: BIRTHDAY_OPTIONS,\n },\n {\n key: 'birthYear',\n label: '',\n type: 'select',\n options: BIRTHYEAR_OPTIONS,\n },\n ],\n [\n {\n key: 'heightFeet',\n label: 'Height Feet',\n type: 'text',\n },\n {\n key: 'heightInches',\n label: 'Height Inches',\n type: 'text',\n },\n ],\n [\n {\n key: 'age',\n label: 'Age',\n type: 'text',\n },\n {\n key: 'weight',\n label: 'Weight',\n type: 'text',\n },\n ],\n [\n {\n key: 'term',\n label: 'Term',\n type: 'text',\n },\n {\n key: 'faceAmount',\n label: 'Face Amount',\n type: 'text',\n },\n ],\n [\n {\n key: 'telemarketerName',\n label: 'Telemarketer Name',\n type: 'text',\n },\n {\n key: 'callbackTime',\n label: 'Callback Time',\n type: 'text',\n },\n ],\n [\n {\n key: 'beneficiary',\n label: 'Beneficiary',\n type: 'text',\n },\n {\n key: 'callbackTime',\n label: 'Callback Time',\n type: 'text',\n },\n ],\n [\n {\n key: 'spouse',\n label: 'Spouse',\n type: 'checkbox',\n },\n {\n key: 'spouseAge',\n label: 'Spouse Age',\n type: 'text',\n },\n ],\n [\n {\n key: 'code',\n label: 'Code',\n type: 'text',\n },\n {\n key: 'driveRecording',\n label: 'Drive Recording',\n type: 'text',\n },\n ],\n [\n {\n key: 'knownMedicalCondition',\n label: 'Known Medical Condition',\n type: 'checkbox',\n },\n {\n key: 'smoke',\n label: 'Smoke',\n type: 'checkbox',\n },\n ],\n [\n {\n key: 'bankAccount',\n label: 'Bank Account',\n type: 'checkbox',\n },\n ],\n ];\n\n return ;\n};\n\nLeadTypeLifeForm.propTypes = {\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n};\n\nexport default LeadTypeLifeForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DialogForm } from 'shared/components';\nimport LeadTypeLifeForm from './LeadTypeLifeForm';\n\n/**\n * Lead type life dialog that contains the form\n *\n * @param {object} props component props\n * @param {boolean} props.isOpen dialog open value\n * @param {boolean} props.isUpdate bool for change the title of the dialog\n * @param {boolean} props.loading bool for indicates if the request is loading\n * @param {Function} props.onSubmit handle for on submit form\n * @param {object} props.leadTypeData lead type life data\n * @param {Function} props.onCloseDialog handle for close the dialog\n * @param {Function} props.onChangeInput handle on change for the fields\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeLifeFormDialog = ({\n isOpen,\n isUpdate,\n loading,\n onSubmit,\n leadTypeData,\n onCloseDialog,\n onChangeInput,\n}) => {\n return (\n \n \n \n );\n};\n\nLeadTypeLifeFormDialog.propTypes = {\n isUpdate: PropTypes.bool,\n isOpen: PropTypes.bool.isRequired,\n loading: PropTypes.bool.isRequired,\n onSubmit: PropTypes.func.isRequired,\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n onCloseDialog: PropTypes.func.isRequired,\n};\n\nLeadTypeLifeFormDialog.defaultProps = {\n isUpdate: false,\n};\n\nexport default LeadTypeLifeFormDialog;\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnLeadsLifeUpdateEvent = createEvent();\n\nexport const OnLeadsLifeError = createEvent();\n","import { error, log } from '@cobuildlab/pure-logger';\nimport { OnApolloClient } from 'shared/session/session-events';\nimport { LEAD_TYPE_LIFE_UPDATE_MUTATION } from './leads-type-life-queries';\nimport { leadLifeValidations } from './leads-type-life-utils';\nimport { OnLeadsLifeError, OnLeadsLifeUpdateEvent } from './leads-type-life-events';\n\n/**\n * Update a lead type life\n *\n * @param {object} leadLife lead type life\n * @returns {object} response data\n */\nexport const updateLeadLife = async (leadLife) => {\n const client = OnApolloClient.get();\n let response;\n\n try {\n leadLifeValidations(leadLife);\n } catch (e) {\n error('updateLeadLife', e);\n\n return OnLeadsLifeError.dispatch(e);\n }\n\n try {\n response = await client.mutate({\n mutation: LEAD_TYPE_LIFE_UPDATE_MUTATION,\n variables: { data: leadLife },\n });\n } catch (e) {\n error('updateLeadLife', e);\n\n return OnLeadsLifeError.dispatch(e);\n }\n\n log('updateLeadLife', response);\n OnLeadsLifeUpdateEvent.dispatch(response.data);\n\n return response.data;\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@8base/boost';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport * as R from 'ramda';\nimport LeadTypeLifeFormDialog from './LeadTypeLifeDialogForm';\nimport { updateLeadLife } from '../leads-type-life-actions';\nimport { onErrorMixinFC, onChangeDataHookMixin } from '../../../../shared/mixins';\nimport { formatData, leadLifeMap, leadLifeCreateMap } from '../leads-type-life-utils';\nimport { ColumnInfo, ColumnName, ColumnValue } from '../../components/ColumnInfo';\nimport PaperInfo from '../../components/PaperInfo';\nimport { OnLeadsLifeError, OnLeadsLifeUpdateEvent } from '../leads-type-life-events';\n\n/**\n * Lead type life table info component\n *\n * @param {object} props component props\n * @param {object} props.leadTypeData data\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeLifeInfo = ({ leadTypeData }) => {\n const [loading, setLoading] = useState(false);\n const [leadTypeInfo, setLeadTypeInfo] = useState(R.clone(leadTypeData));\n const [leadTypeFields, setLeadTypeFields] = useState(leadLifeMap(R.clone(leadTypeData)));\n const [isOpenForm, setIsOpenForm] = useState(false);\n const handleOnSubmitForm = () => {\n const leadLifeToUpdate = {\n id: leadTypeFields.id,\n ...leadLifeCreateMap(leadTypeFields),\n };\n\n setLoading(true);\n updateLeadLife(leadLifeToUpdate);\n };\n const handleOnChangeInput = (value, key) => {\n onChangeDataHookMixin(leadTypeFields, setLeadTypeFields, key, value);\n };\n\n useEventSubscription(OnLeadsLifeUpdateEvent, (data) => {\n setLoading(false);\n setIsOpenForm(false);\n setLeadTypeInfo(data.leadTypeLifeUpdate);\n });\n\n useEventSubscription(OnLeadsLifeError, (err) => {\n setLoading(false);\n onErrorMixinFC(err);\n });\n\n return (\n <>\n setIsOpenForm(true)}>\n \n {leadTypeInfo &&\n formatData(leadTypeInfo).map((row, i) => {\n return (\n \n \n {row.map((column, j) => {\n return (\n \n {column.label}\n {column.value}\n \n );\n })}\n \n \n );\n })}\n \n \n setIsOpenForm(false)}\n />\n \n );\n};\n\nLeadTypeLifeInfo.propTypes = {\n leadTypeData: PropTypes.object.isRequired,\n};\n\nexport default LeadTypeLifeInfo;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport FormFields from '../../../../shared/components/forms/FormFields';\nimport { STATES_OPTIONS, YES_OR_NOT } from '../../leads-model';\nimport { Grid, styled, InputField, DateInputField } from '@8base/boost';\nimport { Margin } from 'shared/components';\n\nconst BtnAdd = styled.button`\n margin-top: 10px;\n display: flex;\n align-items: center;\n background: transparent;\n outline: none;\n cursor: pointer;\n`;\n\nconst BtnPlusChar = styled.p`\n box-sizing: border-box;\n height: 16px;\n width: 16px;\n border: 0.67px solid #3db4aa;\n border-radius: 100px;\n color: #3db4aa;\n font-size: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: 8px;\n`;\n\nconst BtnText = styled.p`\n color: #3db4aa;\n font-family: Poppins;\n font-size: 12px;\n letter-spacing: 0.18px;\n line-height: 20px;\n`;\n\nconst BtnDelete = styled.button`\n margin-top: 28px;\n height: 20px;\n width: 20px;\n border: 1px solid #eb4235;\n border-radius: 100px;\n background: transparent;\n outline: none;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nconst BtnLess = styled.p`\n margin-left: 2px;\n height: 20px;\n width: 20px;\n color: #eb4235;\n font-size: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nconst ClaimRow = ({ index, claim, onChangeClaim, onDeleteClaim }) => {\n return (\n <>\n \n onChangeClaim('type', index, value),\n }}\n />\n \n \n onChangeClaim('date', index, value),\n }}\n />\n \n \n onChangeClaim('amount', index, value),\n }}\n />\n \n \n onDeleteClaim(index)}>\n -\n \n \n \n );\n};\n\nClaimRow.propTypes = {\n index: PropTypes.number.isRequired,\n claim: PropTypes.object.isRequired,\n onChangeClaim: PropTypes.func.isRequired,\n onDeleteClaim: PropTypes.func.isRequired,\n};\n\n/**\n * Lead type home form\n *\n * @param {object} props component props\n * @param {object} props.leadTypeData data\n * @param {Function} props.onChangeInput handle for onChange input\n * @returns {React.Component} - Form Component\n */\nconst LeadTypeHomeForm = ({\n leadTypeData,\n onChangeInput,\n onAddNewClaim,\n onChangeClaim,\n onDeleteClaim,\n}) => {\n const rows = [\n [\n {\n key: 'bestTimeToContact',\n label: 'Best Time To Contact',\n type: 'datetime',\n },\n {\n key: 'dob',\n label: 'DOB',\n type: 'date',\n },\n {\n key: 'otherInfo',\n label: 'Other Info',\n type: 'text',\n },\n ],\n [\n {\n key: 'timeAtCurrentResidence',\n label: 'Time At Current Residence',\n type: 'text',\n },\n {\n key: 'timeAtPreviousResidence',\n label: 'Time At Previous Residence',\n type: 'text',\n },\n {\n key: 'sauna',\n label: 'Sauna',\n type: 'text',\n },\n ],\n [\n {\n key: 'woodBurningStove',\n label: 'Wood Burning Stove',\n type: 'text',\n },\n {\n key: 'smokerInHousehold',\n label: 'Smoker in Household',\n type: 'text',\n },\n {\n key: 'sumpPump',\n label: 'Sump Pump',\n type: 'text',\n },\n ],\n [\n {\n key: 'copperWaterPipes',\n label: 'Copper Water Pipes',\n type: 'text',\n },\n {\n key: 'brushHazardWithin500Feet',\n label: 'Brush Hazard Within 500 Feet',\n type: 'text',\n },\n {\n key: 'homeValue',\n label: 'Home Value',\n type: 'text',\n },\n ],\n [\n {\n key: 'comments',\n label: 'Comments',\n type: 'text',\n },\n {\n key: 'burglarAlarm',\n label: 'Burglar Alarm',\n type: 'text',\n },\n {\n key: 'deadBolts',\n label: 'Deadbolts',\n type: 'text',\n },\n ],\n [\n {\n key: 'fireAlarm',\n label: 'Fire Alarm',\n type: 'text',\n },\n {\n key: 'fireExtinguishers',\n label: 'Fire Extinguishers',\n type: 'text',\n },\n {\n key: 'mannedSecurityStation',\n label: 'Manned Security Station',\n type: 'text',\n },\n ],\n [\n {\n key: 'monitoredBurglarAlarm',\n label: 'Monitored Burglar Alarm',\n type: 'text',\n },\n {\n key: 'smokeDetectors',\n label: 'Smoke Detectors',\n type: 'text',\n },\n {\n key: 'tennisCourts',\n label: 'Tennis Courts',\n type: 'text',\n },\n ],\n [\n {\n key: 'centralHeatingAir',\n label: 'Central Heating Air',\n type: 'text',\n },\n {\n key: 'cathedralVaultedCeilings',\n label: 'Cathedral Vaulted Ceilings',\n type: 'text',\n },\n {\n key: 'hardwoodFloors',\n label: 'Hardwood Floors',\n type: 'text',\n },\n ],\n [\n {\n key: 'enclosedPorchPatio',\n label: 'Enclosed Porch Patio',\n type: 'text',\n },\n {\n key: 'swimmingPool',\n label: 'Swimming Pool',\n type: 'text',\n },\n {\n key: 'fencedInPool',\n label: 'Fenced In Pool',\n type: 'text',\n },\n ],\n [\n {\n key: 'hotTub',\n label: 'Hot Tub',\n type: 'text',\n },\n {\n key: 'indoorSprinklers',\n label: 'Indoor Sprinklers',\n type: 'text',\n },\n {\n key: 'coverageNeededOnHouse',\n label: 'Coverage Needed On House',\n type: 'text',\n },\n ],\n [\n {\n key: 'coverageNeededOnContents',\n label: 'Coverage Needed On Contents',\n type: 'text',\n },\n {\n key: 'requestedLiability',\n label: 'Requested Liability',\n type: 'text',\n },\n {\n key: 'requestedDeductible',\n label: 'Requested Deductible',\n type: 'text',\n },\n ],\n [\n {\n key: 'credit',\n label: 'Credit',\n type: 'text',\n },\n {\n key: 'numberOfClaims',\n label: 'Number Of Claims',\n type: 'number',\n },\n {\n key: 'frequencyOfPayment',\n label: 'Frequency Of Payment',\n type: 'text',\n },\n ],\n [\n {\n key: 'premium',\n label: 'Premium',\n type: 'text',\n },\n {\n key: 'currentInsuranceCompany',\n label: 'Current Insurance Company',\n type: 'text',\n },\n {\n key: 'insuredSince',\n label: 'Insured Since',\n type: 'date',\n },\n ],\n [\n {\n key: 'policyExpiration',\n label: 'Policy Expiration',\n type: 'date',\n },\n {\n key: 'continuouslyInsured',\n label: 'Continuously Insured',\n type: 'select',\n options: YES_OR_NOT,\n },\n {\n key: 'timeWithCurrentCompany',\n label: 'Time With Current Company',\n type: 'text',\n },\n ],\n [\n {\n key: 'countyToBeInsured',\n label: 'County To Be Insured',\n type: 'text',\n },\n {\n key: 'servicePanelType',\n label: 'Service Panel Type',\n type: 'text',\n },\n {\n key: 'wiringType',\n label: 'Wiring Type',\n type: 'text',\n },\n ],\n [\n {\n key: 'ageOfRoof',\n label: 'Age Of Roof',\n type: 'text',\n },\n {\n key: 'floodPlain',\n label: 'Flood Plain',\n type: 'text',\n },\n {\n key: 'businessConductedOnPremises',\n label: 'Business Conducted On Premises',\n type: 'text',\n },\n ],\n [\n {\n key: 'heatType',\n label: 'Heat Type',\n type: 'text',\n },\n {\n key: 'fireplaces',\n label: 'Fireplaces',\n type: 'text',\n },\n {\n key: 'garageType',\n label: 'Garage Type',\n type: 'text',\n },\n ],\n [\n {\n key: 'roofing',\n label: 'Roofing',\n type: 'text',\n },\n {\n key: 'foundationType',\n label: 'Foundation Type',\n type: 'text',\n },\n {\n key: 'fireStationProximity',\n label: 'Fire Station Proximity',\n type: 'text',\n },\n ],\n [\n {\n key: 'fireHydrantProximity',\n label: 'Fire Hydrant Proximity',\n type: 'text',\n },\n {\n key: 'homeUpgrades',\n label: 'Home Upgrades',\n type: 'select',\n options: YES_OR_NOT,\n },\n {\n key: 'homeUpgradesDescribed',\n label: 'Home Upgrades Described',\n type: 'text',\n },\n ],\n [\n {\n key: 'dwellingType',\n label: 'Dwelling Type',\n type: 'text',\n },\n {\n key: 'occupancyStatus',\n label: 'Occupancy Status',\n type: 'text',\n },\n {\n key: 'dogType',\n label: 'Dog Type',\n type: 'text',\n },\n ],\n [\n {\n key: 'squareFootage',\n label: 'Square Footage',\n type: 'text',\n },\n {\n key: 'stories',\n label: 'Stories',\n type: 'text',\n },\n {\n key: 'bedrooms',\n label: 'Bedrooms',\n type: 'text',\n },\n ],\n [\n {\n key: 'porches',\n label: 'Porches',\n type: 'text',\n },\n {\n key: 'constructionType',\n label: 'Construction Type',\n type: 'text',\n },\n {\n key: 'bathrooms',\n label: 'Bathrooms',\n type: 'text',\n },\n {\n key: 'yearBuilt',\n label: 'Year Built',\n type: 'text',\n },\n ],\n [\n {\n key: 'addressLineToBeInsured',\n label: 'Address To Be Insured',\n type: 'text',\n },\n {\n key: 'cityToBeInsured',\n label: 'City To Be Insured',\n type: 'text',\n },\n {\n key: 'stateToBeInsured',\n label: 'State To Be Insured',\n type: 'select',\n options: STATES_OPTIONS,\n },\n {\n key: 'zipToBeInsured',\n label: 'Zip To Be Insured',\n type: 'text',\n },\n ],\n [\n {\n key: 'newPurchase',\n label: 'New Purchase',\n type: 'checkbox',\n },\n {\n key: 'currentlyInsured',\n label: 'Currently Insured',\n type: 'checkbox',\n },\n ],\n ];\n\n return (\n <>\n \n \n \n {leadTypeData.claims.map((claim, claimIndex) => {\n return (\n \n );\n })}\n \n \n +\n Add Claim\n \n \n \n \n \n );\n};\n\nLeadTypeHomeForm.propTypes = {\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n onAddNewClaim: PropTypes.func.isRequired,\n onChangeClaim: PropTypes.func.isRequired,\n onDeleteClaim: PropTypes.func.isRequired,\n};\n\nexport default LeadTypeHomeForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DialogForm } from 'shared/components';\nimport LeadTypeHomeForm from './LeadTypeHomeForm';\n\n/**\n * Lead type home dialog that contains the form\n *\n * @param {object} props component props\n * @param {boolean} props.isOpen dialog open value\n * @param {boolean} props.isUpdate bool for change the title of the dialog\n * @param {boolean} props.loading bool for indicates if the request is loading\n * @param {Function} props.onSubmit handle for on submit form\n * @param {object} props.leadTypeData lead type home data\n * @param {Function} props.onCloseDialog handle for close the dialog\n * @param {Function} props.onChangeInput handle on change for the fields\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeHomeFormDialog = ({\n isOpen,\n isUpdate,\n loading,\n onSubmit,\n leadTypeData,\n onCloseDialog,\n onChangeInput,\n onAddNewClaim,\n onChangeClaim,\n onDeleteClaim,\n}) => {\n return (\n \n \n \n );\n};\n\nLeadTypeHomeFormDialog.propTypes = {\n isUpdate: PropTypes.bool,\n isOpen: PropTypes.bool.isRequired,\n loading: PropTypes.bool.isRequired,\n onSubmit: PropTypes.func.isRequired,\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n onCloseDialog: PropTypes.func.isRequired,\n onAddNewClaim: PropTypes.func.isRequired,\n onChangeClaim: PropTypes.func.isRequired,\n onDeleteClaim: PropTypes.func.isRequired,\n};\n\nLeadTypeHomeFormDialog.defaultProps = {\n isUpdate: false,\n};\n\nexport default LeadTypeHomeFormDialog;\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnLeadsHomeUpdateEvent = createEvent();\n\nexport const OnLeadsHomeError = createEvent();\n","import { error, log } from '@cobuildlab/pure-logger';\nimport { OnApolloClient } from 'shared/session/session-events';\nimport { OnLeadsHomeError, OnLeadsHomeUpdateEvent } from './leads-type-home-events';\nimport { LEAD_TYPE_HOME_UPDATE_MUTATION } from './leads-type-home-queries';\nimport { leadHomeValidations } from './leads-type-home-utils';\n\n/**\n * Update a lead type home\n *\n * @param {object} leadHome lead type home\n * @returns {object} response data\n */\nexport const updateLeadHome = async (leadHome) => {\n const client = OnApolloClient.get();\n let response;\n\n try {\n leadHomeValidations(leadHome);\n } catch (e) {\n error('updateLeadHome', e);\n\n return OnLeadsHomeError.dispatch(e);\n }\n\n try {\n response = await client.mutate({\n mutation: LEAD_TYPE_HOME_UPDATE_MUTATION,\n variables: { data: leadHome },\n });\n } catch (e) {\n error('updateLeadHome', e);\n\n return OnLeadsHomeError.dispatch(e);\n }\n\n log('updateLeadHome', response);\n OnLeadsHomeUpdateEvent.dispatch(response.data);\n\n return response.data;\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@8base/boost';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport * as R from 'ramda';\nimport LeadTypeHomeFormDialog from './LeadTypeHomeDialogForm';\nimport { updateLeadHome } from '../leads-type-home-actions';\nimport { onErrorMixinFC, onChangeDataHookMixin } from '../../../../shared/mixins';\nimport { formatData, leadHomeMap, leadHomeCreateMap } from '../leads-type-home-utils';\nimport { ColumnInfo, ColumnName, ColumnValue, RowHeader } from '../../components/ColumnInfo';\nimport PaperInfo from '../../components/PaperInfo';\nimport { capitalize } from '../../../../shared/utils';\nimport { OnLeadsHomeError, OnLeadsHomeUpdateEvent } from '../leads-type-home-events';\n\n/**\n * Lead type home table info component\n *\n * @param {object} props component props\n * @param {object} props.leadTypeData data\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeHomeInfo = ({ leadTypeData }) => {\n const [loading, setLoading] = useState(false);\n const [leadTypeInfo, setLeadTypeInfo] = useState(R.clone(leadTypeData));\n const [leadTypeFields, setLeadTypeFields] = useState(leadHomeMap(R.clone(leadTypeData)));\n const [isOpenForm, setIsOpenForm] = useState(false);\n\n const handleOnSubmitForm = () => {\n const leadHomeToUpdate = {\n id: leadTypeFields.id,\n ...leadHomeCreateMap(leadTypeFields),\n };\n\n setLoading(true);\n updateLeadHome(leadHomeToUpdate);\n };\n\n const handleOnChangeInput = (value, key) => {\n onChangeDataHookMixin(leadTypeFields, setLeadTypeFields, key, value);\n };\n\n const handleOnAddNewClaim = () => {\n const newClaim = { type: '', date: '', amount: '' };\n const newLeadHomeData = R.clone(leadTypeFields);\n\n newLeadHomeData.claims.push(newClaim);\n\n setLeadTypeFields(newLeadHomeData);\n };\n\n const handleOnChangeClaim = (key, index, value) => {\n const newClaims = R.clone(leadTypeFields.claims);\n\n newClaims[index - 1][key] = value;\n\n setLeadTypeFields({\n ...leadTypeFields,\n claims: newClaims,\n });\n };\n const handleOnDeleteClaim = (index) => {\n let newClaims = R.clone(leadTypeFields.claims);\n\n newClaims = newClaims.filter((claim, claimIndex) => claimIndex !== index - 1);\n\n setLeadTypeFields({\n ...leadTypeFields,\n claims: newClaims,\n });\n };\n\n useEventSubscription(OnLeadsHomeUpdateEvent, (data) => {\n setLoading(false);\n setIsOpenForm(false);\n setLeadTypeInfo(data.leadTypeHomeUpdate);\n });\n\n useEventSubscription(OnLeadsHomeError, (err) => {\n setLoading(false);\n onErrorMixinFC(err);\n });\n\n return (\n <>\n setIsOpenForm(true)}>\n \n {leadTypeInfo &&\n formatData(leadTypeInfo).map((row, i) => {\n return (\n \n \n {row.map((column, j) => {\n return (\n \n {column.label}\n {column.value}\n \n );\n })}\n \n \n );\n })}\n \n {leadTypeFields.claims.map((claim, claimIndex) => {\n return (\n <>\n Claim #{claimIndex + 1}\n \n {Object.keys(claim).map((key) => {\n return (\n \n {capitalize(key)}\n {claim[key]}\n \n );\n })}\n \n \n );\n })}\n \n setIsOpenForm(false)}\n />\n \n );\n};\n\nLeadTypeHomeInfo.propTypes = {\n leadTypeData: PropTypes.object.isRequired,\n};\n\nexport default LeadTypeHomeInfo;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport FormFields from '../../../../shared/components/forms/FormFields';\n\n/**\n * Lead type workers compensation form\n *\n * @param {object} props component props\n * @param {object} props.leadTypeData data\n * @param {Function} props.onChangeInput handle for onChange input\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeWorkersCompensationForm = ({ leadTypeData, onChangeInput }) => {\n const rows = [\n [\n {\n key: 'annualPayroll',\n label: 'Annual Payroll',\n type: 'number',\n },\n {\n key: 'companyName',\n label: 'Company Name',\n type: 'text',\n },\n ],\n [\n {\n key: 'natureOfBusiness',\n label: 'Nature Of Business',\n type: 'text',\n },\n {\n key: 'numberOfEmployees',\n label: 'Number Of Employees',\n type: 'number',\n },\n ],\n [\n {\n key: 'policyExpirationDate',\n label: 'Policy Expiration Date',\n type: 'date',\n },\n ],\n ];\n\n return ;\n};\n\nLeadTypeWorkersCompensationForm.propTypes = {\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n};\n\nexport default LeadTypeWorkersCompensationForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DialogForm } from 'shared/components';\nimport LeadTypeWorkersCompensationForm from './LeadTypeWorkersCompensationForm';\n\n/**\n * Lead type workers compensation dialog that contains the form\n *\n * @param {object} props component props\n * @param {boolean} props.isOpen dialog open value\n * @param {boolean} props.isUpdate bool for change the title of the dialog\n * @param {boolean} props.loading bool for indicates if the request is loading\n * @param {Function} props.onSubmit handle for on submit form\n * @param {object} props.leadTypeData lead type workers compensation data\n * @param {Function} props.onCloseDialog handle for close the dialog\n * @param {Function} props.onChangeInput handle on change for the fields\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeWorkersCompensationFormDialog = ({\n isOpen,\n isUpdate,\n loading,\n onSubmit,\n leadTypeData,\n onCloseDialog,\n onChangeInput,\n}) => {\n return (\n \n \n \n );\n};\n\nLeadTypeWorkersCompensationFormDialog.propTypes = {\n isUpdate: PropTypes.bool,\n isOpen: PropTypes.bool.isRequired,\n loading: PropTypes.bool.isRequired,\n onSubmit: PropTypes.func.isRequired,\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n onCloseDialog: PropTypes.func.isRequired,\n};\n\nLeadTypeWorkersCompensationFormDialog.defaultProps = {\n isUpdate: false,\n};\n\nexport default LeadTypeWorkersCompensationFormDialog;\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnLeadsWorkersCompensationUpdateEvent = createEvent();\n\nexport const OnLeadsWorkersCompensationError = createEvent();\n","import { error, log } from '@cobuildlab/pure-logger';\nimport { OnApolloClient } from 'shared/session/session-events';\nimport { LEAD_TYPE_WORKERS_COMPENSATION_UPDATE_MUTATION } from './leads-type-workers-compensation-queries';\nimport { leadWorkersCompensationValidations } from './leads-type-workers-compensation-utils';\nimport {\n OnLeadsWorkersCompensationError,\n OnLeadsWorkersCompensationUpdateEvent,\n} from './leads-type-workers-compensation-events';\n\n/**\n * Update a lead type workers compensation\n *\n * @param {object} leadWorkersCompensation lead type workers compensation\n * @returns {object} response data\n */\nexport const updateLeadWorkersCompensation = async (leadWorkersCompensation) => {\n const client = OnApolloClient.get();\n let response;\n\n try {\n leadWorkersCompensationValidations(leadWorkersCompensation);\n } catch (e) {\n error('updateWorkersCompensation', e);\n\n return OnLeadsWorkersCompensationError.dispatch(e);\n }\n\n try {\n response = await client.mutate({\n mutation: LEAD_TYPE_WORKERS_COMPENSATION_UPDATE_MUTATION,\n variables: { data: leadWorkersCompensation },\n });\n } catch (e) {\n error('updateWorkersCompensation', e);\n\n return OnLeadsWorkersCompensationError.dispatch(e);\n }\n\n log('updateWorkersCompensation', response);\n OnLeadsWorkersCompensationUpdateEvent.dispatch(response.data);\n\n return response.data;\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@8base/boost';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport * as R from 'ramda';\nimport LeadTypeWorkersCompensationFormDialog from './LeadTypeWorkersCompensationDialogForm';\nimport { updateLeadWorkersCompensation } from '../leads-type-workers-compensation-actions';\nimport { onErrorMixinFC, onChangeDataHookMixin } from '../../../../shared/mixins';\nimport {\n formatData,\n leadWorkersCompensationMap,\n leadWorkersCompensationCreateMap,\n} from '../leads-type-workers-compensation-utils';\nimport { ColumnInfo, ColumnName, ColumnValue } from '../../components/ColumnInfo';\nimport PaperInfo from '../../components/PaperInfo';\nimport {\n OnLeadsWorkersCompensationError,\n OnLeadsWorkersCompensationUpdateEvent,\n} from '../leads-type-workers-compensation-events';\n\n/**\n * Lead type workers compensation table info component\n *\n * @param {object} props component props\n * @param {object} props.leadTypeData data\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeWorkersCompensationInfo = ({ leadTypeData }) => {\n const [loading, setLoading] = useState(false);\n const [leadTypeInfo, setLeadTypeInfo] = useState(R.clone(leadTypeData));\n const [leadTypeFields, setLeadTypeFields] = useState(\n leadWorkersCompensationMap(R.clone(leadTypeData)),\n );\n const [isOpenForm, setIsOpenForm] = useState(false);\n const handleOnSubmitForm = () => {\n const leadWorkersCompensationToUpdate = {\n id: leadTypeFields.id,\n ...leadWorkersCompensationCreateMap(leadTypeFields),\n };\n\n setLoading(true);\n updateLeadWorkersCompensation(leadWorkersCompensationToUpdate);\n };\n const handleOnChangeInput = (value, key) => {\n onChangeDataHookMixin(leadTypeFields, setLeadTypeFields, key, value);\n };\n\n useEventSubscription(OnLeadsWorkersCompensationUpdateEvent, (data) => {\n setLoading(false);\n setIsOpenForm(false);\n setLeadTypeInfo(data.leadTypeWorkersCompensationUpdate);\n });\n\n useEventSubscription(OnLeadsWorkersCompensationError, (err) => {\n setLoading(false);\n onErrorMixinFC(err);\n });\n\n return (\n <>\n setIsOpenForm(true)}>\n \n {leadTypeInfo &&\n formatData(leadTypeInfo).map((row, i) => {\n return (\n \n \n {row.map((column, j) => {\n return (\n \n {column.label}\n {column.value}\n \n );\n })}\n \n \n );\n })}\n \n \n setIsOpenForm(false)}\n />\n \n );\n};\n\nLeadTypeWorkersCompensationInfo.propTypes = {\n leadTypeData: PropTypes.object.isRequired,\n};\n\nexport default LeadTypeWorkersCompensationInfo;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport FormFields from '../../../../shared/components/forms/FormFields';\n\nconst LeadTypeEmployeeBenefitsForm = ({ leadTypeData, onChangeInput }) => {\n const rows = [\n [\n {\n key: 'annualPayroll',\n label: 'Annual Payroll',\n type: 'text',\n },\n {\n key: 'companyName',\n label: 'Company Name',\n type: 'text',\n },\n ],\n [\n {\n key: 'natureOfBusiness',\n label: 'Nature Of Business',\n type: 'text',\n },\n {\n key: 'numberOfEmployees',\n label: 'Number Of Employees',\n type: 'text',\n },\n ],\n ];\n\n return ;\n};\n\nLeadTypeEmployeeBenefitsForm.propTypes = {\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n};\n\nexport default LeadTypeEmployeeBenefitsForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DialogForm } from 'shared/components';\nimport LeadTypeEmployeeBenefitsForm from './LeadTypeEmployeeBenefitsForm';\n\n/**\n * Lead type employee benefits dialog that contains the form\n *\n * @param {object} props component props\n * @param {boolean} props.isOpen dialog open value\n * @param {boolean} props.isUpdate bool for change the title of the dialog\n * @param {boolean} props.loading bool for indicates if the request is loading\n * @param {Function} props.onSubmit handle for on submit form\n * @param {object} props.leadTypeData lead type employee benefits data\n * @param {Function} props.onCloseDialog handle for close the dialog\n * @param {Function} props.onChangeInput handle on change for the fields\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeEmployeeBenefitsFormDialog = ({\n isOpen,\n isUpdate,\n loading,\n onSubmit,\n leadTypeData,\n onCloseDialog,\n onChangeInput,\n}) => {\n return (\n \n \n \n );\n};\n\nLeadTypeEmployeeBenefitsFormDialog.propTypes = {\n isUpdate: PropTypes.bool,\n isOpen: PropTypes.bool.isRequired,\n loading: PropTypes.bool.isRequired,\n onSubmit: PropTypes.func.isRequired,\n leadTypeData: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n onCloseDialog: PropTypes.func.isRequired,\n};\n\nLeadTypeEmployeeBenefitsFormDialog.defaultProps = {\n isUpdate: false,\n};\n\nexport default LeadTypeEmployeeBenefitsFormDialog;\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnLeadsEmployeeBenefitsUpdateEvent = createEvent();\n\nexport const OnLeadsEmployeeBenefitsError = createEvent();\n","import { error, log } from '@cobuildlab/pure-logger';\nimport { OnApolloClient } from 'shared/session/session-events';\nimport { LEAD_TYPE_EMPLOYEE_BENEFITS_UPDATE_MUTATION } from './leads-type-employee-benefits-queries';\nimport { leadEmployeeBenefitsValidations } from './leads-type-employee-benefits-utils';\nimport {\n OnLeadsEmployeeBenefitsError,\n OnLeadsEmployeeBenefitsUpdateEvent,\n} from './leads-type-employee-benefits-events';\n\n/**\n * Update a lead type employee benefits\n *\n * @param {object} leadEmployeeBenefits lead type employee benefits\n * @returns {object} response data\n */\nexport const updateLeadEmployeeBenefits = async (leadEmployeeBenefits) => {\n const client = OnApolloClient.get();\n let response;\n\n try {\n leadEmployeeBenefitsValidations(leadEmployeeBenefits);\n } catch (e) {\n error('updateEmployeeBenefits', e);\n\n return OnLeadsEmployeeBenefitsError.dispatch(e);\n }\n\n try {\n response = await client.mutate({\n mutation: LEAD_TYPE_EMPLOYEE_BENEFITS_UPDATE_MUTATION,\n variables: { data: leadEmployeeBenefits },\n });\n } catch (e) {\n error('updateEmployeeBenefits', e);\n\n return OnLeadsEmployeeBenefitsError.dispatch(e);\n }\n\n log('updateEmployeeBenefits', response);\n OnLeadsEmployeeBenefitsUpdateEvent.dispatch(response.data);\n return response.data;\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@8base/boost';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport * as R from 'ramda';\nimport LeadTypeEmployeeBenefitsFormDialog from './LeadTypeEmployeeBenefitsDialogForm';\nimport { updateLeadEmployeeBenefits } from '../leads-type-employee-benefits-actions';\nimport { onErrorMixinFC, onChangeDataHookMixin } from '../../../../shared/mixins';\nimport {\n formatData,\n leadEmployeeBenefitsMap,\n leadEmployeeBenefitsCreateMap,\n} from '../leads-type-employee-benefits-utils';\nimport { ColumnInfo, ColumnName, ColumnValue } from '../../components/ColumnInfo';\nimport PaperInfo from '../../components/PaperInfo';\nimport {\n OnLeadsEmployeeBenefitsError,\n OnLeadsEmployeeBenefitsUpdateEvent,\n} from '../leads-type-employee-benefits-events';\n\n/**\n * Lead type employee benefits table info component\n *\n * @param {object} props component props\n * @param {object} props.leadTypeData data\n *\n * @returns {React.FC} The react component\n */\nconst LeadTypeEmployeeBenefitsInfo = ({ leadTypeData }) => {\n const [loading, setLoading] = useState(false);\n const [leadTypeInfo, setLeadTypeInfo] = useState(R.clone(leadTypeData));\n const [leadTypeFields, setLeadTypeFields] = useState(\n leadEmployeeBenefitsMap(R.clone(leadTypeData)),\n );\n const [isOpenForm, setIsOpenForm] = useState(false);\n const handleOnSubmitForm = () => {\n const leadEmployeeBenefitsToUpdate = {\n id: leadTypeFields.id,\n ...leadEmployeeBenefitsCreateMap(leadTypeFields),\n };\n\n setLoading(true);\n updateLeadEmployeeBenefits(leadEmployeeBenefitsToUpdate);\n };\n const handleOnChangeInput = (value, key) => {\n onChangeDataHookMixin(leadTypeFields, setLeadTypeFields, key, value);\n };\n\n useEventSubscription(OnLeadsEmployeeBenefitsUpdateEvent, (data) => {\n setLoading(false);\n setIsOpenForm(false);\n setLeadTypeInfo(data.leadTypeEmployeeBenefitUpdate);\n });\n\n useEventSubscription(OnLeadsEmployeeBenefitsError, (err) => {\n setLoading(false);\n onErrorMixinFC(err);\n });\n\n return (\n <>\n setIsOpenForm(true)}>\n \n {leadTypeInfo &&\n formatData(leadTypeInfo).map((row, i) => {\n return (\n \n \n {row.map((column, j) => {\n return (\n \n {column.label}\n {column.value}\n \n );\n })}\n \n \n );\n })}\n \n \n setIsOpenForm(false)}\n />\n \n );\n};\n\nLeadTypeEmployeeBenefitsInfo.propTypes = {\n leadTypeData: PropTypes.object.isRequired,\n};\n\nexport default LeadTypeEmployeeBenefitsInfo;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { PropTypes } from 'prop-types';\nimport {} from '@8base/boost';\nimport { TextContact, PriorityBadge, OptionsDropdown } from '../../../shared/components';\nimport moment from 'moment';\nimport { TextContactHeader } from 'shared/components/ui/text/TextContact';\n\nconst MiniCardContainer = styled.div`\n padding: 8px 16px;\n`;\n\nconst MiniCardHeader = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst MiniCardTitle = styled.span`\n & span {\n font-weight: 600 !important;\n }\n`;\n\nconst MiniCardFooter = styled.div`\n display: flex;\n margin-top: 20px;\n`;\n\nconst TypeBox = styled.div`\n margin-right: auto;\n color: #9b9b9b;\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 11px;\n background-color: #f4f5f6;\n display: flex;\n align-items: center;\n`;\n\nconst MiniCard = ({ data, options, canSeeOptions }) => {\n const { createdAt, title, priority, description, type, notes, createdBy } = data;\n const formatedDate = moment(createdAt).format('MM/DD/YYYY, hh:mm a');\n const firstName = createdBy?.firstName || '';\n const lastName = createdBy?.lastName || '';\n\n let typeBox;\n if (type) {\n typeBox = {type.name};\n }\n\n let priorityBadge;\n if (priority) {\n priorityBadge = ;\n }\n\n let optionsDropdown;\n if (canSeeOptions) {\n optionsDropdown = ;\n }\n\n return (\n \n \n \n {`${notes ? 'Disposition Note' : 'Lead Note'}`}\n
\n {`${title || notes}`}\n
\n {`${firstName} ${lastName} ${formatedDate}`}\n
\n \n {optionsDropdown}\n \n {description}
\n \n {typeBox}\n {priorityBadge}\n \n \n );\n};\n\nMiniCard.defaultProps = {\n canSeeOptions: false,\n};\n\nMiniCard.propTypes = {\n data: PropTypes.object.isRequired,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired,\n danger: PropTypes.bool,\n }),\n ).isRequired,\n canSeeOptions: PropTypes.bool,\n};\n\nexport default MiniCard;\n","import React, { useEffect, useMemo, useState, useCallback } from 'react';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport PropTypes from 'prop-types';\nimport { Row, Heading, Icon, Loader, useModal } from '@8base/boost';\nimport NoteForm from './forms/NoteForm';\nimport { modalId } from '../../../shared/components/dialog/DecisionDialog';\nimport { fetchLeadNotes, deleteNote } from '../leads-notes/leads-notes-actions';\nimport { canSeeTaskAndNotesOptions } from '../lead-details-utils';\nimport {\n OnFetchLeadNotes,\n OnFetchLeadNotesError,\n onLeadNoteUpdate,\n onLeadNoteDelete,\n OnNoteCreateEvent,\n OnNoteError,\n} from '../leads-notes/leads-notes-events';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { Box } from '../../../shared/components/Box';\nimport NoteItem from './MiniCardNotes';\nimport { useUser } from '../../../shared/hooks/useUser';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport * as toast from '../../../shared/components/toast/Toast';\n\nconst LeadNotes = ({ id }) => {\n const [notes, setNotes] = useState([]);\n const [loading, setLoading] = useState(true);\n const [selected, setSelected] = useState(null);\n const [isOpen, setOpen] = useState(false);\n const { openModal, closeModal } = useModal(modalId);\n const [user] = useUser();\n const agency = useAgency();\n\n useEffect(() => {\n setLoading(true);\n\n fetchLeadNotes(id);\n }, [id]);\n\n const onCreate = useCallback(() => {\n setSelected(null);\n setOpen(true);\n }, []);\n\n const onUpdate = useCallback((note) => {\n setSelected(note);\n setOpen(true);\n }, []);\n\n const onDelete = useCallback(\n (note) => {\n openModal(modalId, {\n title: 'Delete note',\n text: 'Are you sure you want to delete this note ?',\n confirmText: 'Yes, Delete',\n cancelText: 'Cancel',\n onCancel: () => closeModal(modalId),\n onClose: () => closeModal(modalId),\n onConfirm: () => deleteNote(note.id),\n });\n },\n [openModal, closeModal],\n );\n\n const onClose = useCallback(() => {\n setOpen(false);\n setSelected(null);\n }, []);\n\n useSubscription(\n OnFetchLeadNotes,\n ({ leadNotesList, leadDispositionsList }) => {\n setNotes([...leadNotesList.items, ...leadDispositionsList.items]);\n\n setLoading(false);\n },\n [],\n );\n\n useSubscription(\n OnFetchLeadNotesError,\n (e) => {\n setLoading(false);\n\n onErrorMixinFC(e);\n },\n [],\n );\n\n useSubscription(OnNoteCreateEvent, () => {\n toast.success('Success', 'Note created successfully');\n\n setLoading(true);\n\n fetchLeadNotes(id);\n });\n\n useSubscription(\n onLeadNoteUpdate,\n () => {\n toast.success('Success', 'Note updated successfully');\n\n setLoading(true);\n\n fetchLeadNotes(id);\n },\n [],\n );\n\n useSubscription(\n onLeadNoteDelete,\n () => {\n toast.success('Success', 'Note deleted successfully');\n\n closeModal(modalId);\n\n setLoading(true);\n\n fetchLeadNotes(id);\n },\n [closeModal],\n );\n\n useSubscription(OnNoteError, (err) => {\n onErrorMixinFC(err);\n });\n\n const items = useMemo(\n () =>\n notes.map((note) => (\n onUpdate(note),\n },\n {\n label: 'Delete',\n onClick: () => onDelete(note),\n danger: true,\n },\n ]}\n canSeeOptions={canSeeTaskAndNotesOptions(user, agency)}\n data={note}\n />\n )),\n [notes, user, agency, onUpdate, onDelete],\n );\n\n const content = loading ? (\n \n \n
\n ) : (\n items\n );\n\n return (\n \n \n \n Notes\n \n
\n \n \n {content}\n \n \n \n );\n};\n\nLeadNotes.propTypes = {\n id: PropTypes.string.isRequired,\n};\n\nexport default LeadNotes;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { PropTypes } from 'prop-types';\nimport {} from '@8base/boost';\nimport { TextContact, PriorityBadge, OptionsDropdown } from '../../../shared/components';\nimport moment from 'moment';\n\nconst MiniCardContainer = styled.div`\n padding: 8px 16px;\n`;\n\nconst MiniCardHeader = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst MiniCardTitle = styled.span`\n & span {\n font-weight: 600 !important;\n }\n`;\n\nconst MiniCardFooter = styled.div`\n display: flex;\n margin-top: 20px;\n`;\n\nconst TypeBox = styled.div`\n margin-right: auto;\n color: #9b9b9b;\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 11px;\n background-color: #f4f5f6;\n display: flex;\n align-items: center;\n`;\n\nconst MiniCard = ({ data, options, canSeeOptions }) => {\n const { date, title, priority, description, type } = data;\n const formatedDate = moment(date).format('MM/DD/YYYY');\n\n let typeBox;\n if (type) {\n typeBox = {type.name};\n }\n\n let priorityBadge;\n if (priority) {\n priorityBadge = ;\n }\n\n let optionsDropdown;\n if (canSeeOptions) {\n optionsDropdown = ;\n }\n\n return (\n \n \n \n {`${title} - ${formatedDate}`}\n \n {optionsDropdown}\n \n {description}
\n \n {typeBox}\n {priorityBadge}\n \n \n );\n};\n\nMiniCard.defaultProps = {\n canSeeOptions: false,\n};\n\nMiniCard.propTypes = {\n data: PropTypes.object.isRequired,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired,\n danger: PropTypes.bool,\n }),\n ).isRequired,\n canSeeOptions: PropTypes.bool,\n};\n\nexport default MiniCard;\n","import React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { Heading, Row, Icon, Loader, useModal } from '@8base/boost';\nimport { Box } from '../../../shared/components/Box';\nimport TaskForm from './forms/TaskForm';\nimport { fetchLeadTasks } from '../leads-actions';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { OnFetchLeadTasks, OnFetchLeadTasksError } from '../leads-store';\nimport { canSeeTaskAndNotesOptions } from '../lead-details-utils';\nimport { deleteLeadTask } from '../../lead-task/lead-task-actions';\nimport TaskItem from './MiniCard';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport { modalId } from '../../../shared/components/dialog/DecisionDialog';\nimport { useUser } from '../../../shared/hooks/useUser';\nimport { onTaskCreate, onTaskUpdateEvent } from '../leads-events';\nimport { OnLeadTaskDelete } from 'modules/lead-task/lead-task-events';\n\nconst LeadTasks = ({ id, users }) => {\n const [tasks, setTasks] = useState([]);\n const [loading, setLoading] = useState(true);\n const [isOpen, setOpen] = useState(false);\n const [selected, setSelected] = useState(null);\n const { openModal, closeModal } = useModal(modalId);\n const [user] = useUser();\n const agency = useAgency();\n\n useEffect(() => {\n setLoading(true);\n\n fetchLeadTasks(id);\n }, [id]);\n\n const onCreate = useCallback(() => {\n setSelected(null);\n setOpen(true);\n }, []);\n\n const onUpdate = useCallback((task) => {\n setSelected(task);\n setOpen(true);\n }, []);\n\n const onDelete = useCallback(\n (task) => {\n openModal(modalId, {\n title: 'Delete Task',\n text: 'Are you sure you want to delete this task ?',\n confirmText: 'Yes, Delete',\n cancelText: 'Cancel',\n onClose: () => closeModal(modalId),\n onCancel: () => closeModal(modalId),\n onConfirm: () => deleteLeadTask(task.id),\n });\n },\n [openModal, closeModal],\n );\n\n const onClose = useCallback(() => {\n setOpen(false);\n setSelected(null);\n }, []);\n\n useSubscription(\n OnFetchLeadTasks,\n ({ leadTasksList }) => {\n setTasks(leadTasksList.items);\n setLoading(false);\n },\n [],\n );\n\n useSubscription(\n OnFetchLeadTasksError,\n (e) => {\n setLoading(false);\n onErrorMixinFC(e);\n },\n [],\n );\n\n useSubscription(onTaskCreate, () => {\n setLoading(true);\n\n fetchLeadTasks(id);\n });\n\n useSubscription(onTaskUpdateEvent, () => {\n setLoading(true);\n\n fetchLeadTasks(id);\n });\n\n useSubscription(OnLeadTaskDelete, () => {\n setLoading(true);\n\n fetchLeadTasks(id);\n\n closeModal(modalId);\n });\n\n const items = useMemo(\n () =>\n tasks.map((task) => (\n onUpdate(task),\n },\n {\n label: 'Delete',\n onClick: () => onDelete(task),\n danger: true,\n },\n ]}\n canSeeOptions={canSeeTaskAndNotesOptions(user, agency)}\n key={task.id}\n data={task}\n />\n )),\n [tasks, user, agency, onUpdate, onDelete],\n );\n\n const content = loading ? (\n \n \n
\n ) : (\n items\n );\n\n return (\n \n \n \n Tasks\n \n
\n \n \n {content}\n \n {isOpen && (\n \n )}\n \n );\n};\n\nLeadTasks.propTypes = {\n id: PropTypes.string.isRequired,\n users: PropTypes.arrayOf(PropTypes.object).isRequired,\n};\n\nexport default LeadTasks;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Form, Grid } from '@8base/boost';\nimport { GENDER_OPTIONS, STATES_OPTIONS } from '../../leads-model';\nimport Field from '../../../../shared/components/Field';\n\nconst sections = [\n {\n title: 'Personal Data',\n rows: [\n [\n {\n label: 'First Name',\n type: 'text',\n key: 'firstName',\n },\n {\n label: 'Last Name',\n type: 'text',\n key: 'lastName',\n },\n {\n label: 'Email',\n type: 'text',\n key: 'email',\n },\n ],\n [\n {\n label: 'Birth Date',\n type: 'date',\n key: 'birthDate',\n },\n {\n label: 'Gender',\n type: 'select',\n key: 'gender',\n options: GENDER_OPTIONS,\n },\n {\n label: 'Marital Status',\n type: 'select',\n key: 'maritalStatus',\n options: [\n { label: 'WIDOW', value: 'WIDOW' },\n { label: 'SINGLE', value: 'SINGLE' },\n { label: 'MARRIED', value: 'MARRIED' },\n ],\n },\n ],\n [\n {\n label: 'Age First Licensed',\n type: 'date',\n key: 'ageFirstLicensed',\n },\n {\n label: 'Licensed State',\n type: 'select',\n key: 'licensedState',\n options: STATES_OPTIONS,\n },\n {\n label: 'Licensed Status',\n type: 'text',\n key: 'licenseStatus',\n },\n ],\n [\n {\n label: 'Fulltime Student',\n type: 'checkbox',\n key: 'fullTimeStudent',\n },\n {\n label: 'Education',\n type: 'text',\n key: 'education',\n },\n {\n label: 'Occupation',\n type: 'text',\n key: 'occupation',\n },\n ],\n [\n {\n label: 'Relationship To Applicant',\n type: 'text',\n key: 'relationshipToApplicant',\n },\n {\n label: 'Credit Rating',\n type: 'text',\n key: 'creditRating',\n },\n ],\n ],\n },\n {\n title: 'Contact Data',\n rows: [\n [\n {\n label: 'Cell Phone',\n type: 'text',\n key: 'cellPhone',\n },\n {\n label: 'Daytime Phone',\n type: 'text',\n key: 'daytimePhone',\n },\n {\n label: 'Evening Phone',\n type: 'text',\n key: 'eveningPhone',\n },\n ],\n [\n {\n label: 'Preferred Contact Number',\n type: 'text',\n key: 'preferredContactNumber',\n },\n {\n label: 'Preferred Contact Time',\n type: 'date',\n key: 'preferredContactTime',\n },\n ],\n ],\n },\n {\n title: 'Vehicle Data',\n rows: [\n [\n {\n label: 'Make Of Vehicle',\n type: 'text',\n key: 'makeOfVehicle',\n },\n {\n label: 'Model Of Vehicle',\n type: 'text',\n key: 'modelOfVehicle',\n },\n {\n label: 'Year Of Vehicle',\n type: 'text',\n key: 'yearOfVehicle',\n },\n ],\n [\n {\n label: 'Trim',\n type: 'text',\n key: 'trim',\n },\n {\n label: 'Style',\n type: 'text',\n key: 'style',\n },\n {\n label: 'Ownership',\n type: 'text',\n key: 'ownership',\n },\n ],\n [\n {\n label: 'Primary Use',\n type: 'text',\n key: 'primaryUse',\n },\n {\n label: 'Average One Way Mileage',\n type: 'text',\n key: 'averageOneWayMileage',\n },\n {\n label: 'Annual Mileage',\n type: 'text',\n key: 'annualMileage',\n },\n ],\n [\n {\n label: 'Vehicle Parking',\n type: 'text',\n key: 'vehicleParking',\n },\n {\n label: 'Anti Lock Breaks',\n type: 'text',\n key: 'antiLockBreaks',\n },\n {\n label: 'Security System',\n type: 'text',\n key: 'securitySystem',\n },\n ],\n [\n {\n label: 'salvagedVehicle',\n type: 'text',\n key: 'salvagedVehicle',\n },\n ],\n ],\n },\n {\n title: 'Residence Data',\n rows: [\n [\n {\n label: 'Years At Current Residence',\n type: 'text',\n key: 'yearsAtCurrentResidence',\n },\n {\n label: 'City',\n type: 'text',\n key: 'city',\n },\n {\n label: 'State',\n type: 'text',\n key: 'state',\n },\n ],\n [\n {\n label: 'Address Line 1',\n type: 'text',\n key: 'street1',\n },\n {\n label: 'Address Line 2',\n type: 'text',\n key: 'street2',\n },\n {\n label: 'zip',\n type: 'text',\n key: 'zip',\n },\n ],\n ],\n },\n {\n title: 'Insurance Data',\n rows: [\n [\n {\n label: 'Insurance Company',\n type: 'text',\n key: 'insuranceCompany',\n },\n {\n label: 'Continuously Insured Years',\n type: 'text',\n key: 'continuouslyInsuredYears',\n },\n {\n label: 'Continuously Insured Months',\n type: 'text',\n key: 'continuouslyInsuredMonths',\n },\n ],\n [\n {\n label: 'Current Insurance Company Years',\n type: 'text',\n key: 'currentInsuranceCompanyYears',\n },\n {\n label: 'Current Insurance Company Months',\n type: 'text',\n key: 'currentInsuranceCompanyMonths',\n },\n {\n label: 'Insured In The Past 30 Days',\n type: 'checkbox',\n key: 'insuredPast30Days',\n },\n ],\n ],\n },\n {\n title: 'Other Data',\n rows: [\n [\n {\n label: 'Years In Field',\n type: 'text',\n key: 'yearsInField',\n },\n {\n label: 'Policy Expiration Date',\n type: 'text',\n key: 'policyExpirationDate',\n },\n {\n label: 'How Many Incidents Past 5 Years',\n type: 'text',\n key: 'howManyIncidentsInThePast5Years',\n },\n ],\n [\n {\n label: 'Incidents Past 5 Years',\n type: 'text',\n key: 'incidentsPast5Years',\n },\n {\n label: 'Violations Past 5 Years',\n type: 'text',\n key: 'violationsPast5Years',\n },\n {\n label: 'Activity Past 5 Years',\n type: 'text',\n key: 'activityPast5Years',\n },\n ],\n [\n {\n label: 'Vin',\n type: 'text',\n key: 'vin',\n },\n {\n label: 'Tickets Accidents Claims Past 3 Years',\n type: 'checkbox',\n key: 'ticketsAccidentsClaimsPast3Years',\n },\n {\n label: 'Additional Drivers',\n type: 'checkbox',\n key: 'additionalDrivers',\n },\n ],\n [\n {\n label: 'Additional Vehicles',\n type: 'checkbox',\n key: 'additionalVehicles',\n },\n {\n label: 'Completed Behind The Wheel',\n type: 'checkbox',\n key: 'completedBehindTheWheel',\n },\n {\n label: 'Current Bodily Injury Coverages',\n type: 'text',\n key: 'currentBodilyInjuryCoverages',\n },\n ],\n [\n {\n label: 'Current Property Damage Coverages',\n type: 'text',\n key: 'currentPropertyDamageCoverages',\n },\n {\n label: 'Current Coverage Level',\n type: 'text',\n key: 'currentCoverageLevel',\n },\n {\n label: 'Coverage Level',\n type: 'text',\n key: 'coverageLevel',\n },\n ],\n [\n {\n label: 'Current Comprehensive Deductible',\n type: 'text',\n key: 'currentComprehensiveDeductible',\n },\n {\n label: 'Current Collision Deductible',\n type: 'text',\n key: 'currentCollisionDeductible',\n },\n {\n label: 'Filling Required',\n type: 'text',\n key: 'fillingRequired',\n },\n ],\n [\n {\n label: 'Bankruptcy In Past 5 Years',\n type: 'checkbox',\n key: 'bankruptcyInPast5Years',\n },\n {\n label: 'Multiple Policy Discount',\n type: 'text',\n key: 'multiplePolicyDiscount',\n },\n {\n label: 'eNewsletter',\n type: 'text',\n key: 'eNewsletter',\n },\n ],\n [\n {\n label: 'Suspended Or Revoked In The Past 5 Years',\n type: 'checkbox',\n key: 'suspendedOrRevokedInThePast5Years',\n },\n {\n label: 'DUIDWI In The Past 5 Years',\n type: 'date',\n key: 'dUIDWIInThePast5Years',\n },\n {\n label: 'Date Of DUIDWI',\n type: 'date',\n key: 'dateOfDUIDWI',\n },\n ],\n [\n {\n label: 'Desired Collision Coverage',\n type: 'text',\n key: 'desiredCollisionCoverage',\n },\n {\n label: 'Desired Comprehensive Coverage',\n type: 'text',\n key: 'desiredComprehensiveCoverage',\n },\n {\n label: 'Average Days Per Week Used',\n type: 'text',\n key: 'averageDaysPerWeekUsed',\n },\n ],\n [\n {\n label: 'Primary Driver',\n type: 'text',\n key: 'primaryDriver',\n },\n ],\n ],\n },\n];\n\n/**\n * Lead driver form\n *\n * @param {object} props component props\n * @param {object} props.leadDriver lead driver data\n * @param {Function} props.onBlurInput handle on blur for the fields\n * @returns {React.ReactElement} component\n */\nconst LeadDriverForm = ({ leadDriver, onBlurInput }) => {\n return (\n \n );\n};\n\nLeadDriverForm.propTypes = {\n leadDriver: PropTypes.object.isRequired,\n onBlurInput: PropTypes.func.isRequired,\n};\n\nexport default LeadDriverForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DialogForm } from 'shared/components';\nimport LeadDriverForm from './LeadDriverForm';\n\n/**\n * Lead driver dialog that contains the form\n *\n * @param {object} props component props\n * @param {boolean} props.isOpen dialog open value\n * @param {boolean} props.isUpdate bool for change the title of the dialog\n * @param {boolean} props.loading bool for indicates if the request is loading\n * @param {Function} props.onSubmit handle for on submit form\n * @param {object} props.leadDriver lead driver data\n * @param {Function} props.onCloseDialog handle for close the dialog\n * @param {Function} props.onBlurInput handle on change for the fields\n * @returns {React.ReactElement} component\n */\nconst LeadDriverDialogForm = ({\n isOpen,\n isUpdate,\n loading,\n onSubmit,\n leadDriver,\n onCloseDialog,\n onBlurInput,\n}) => {\n return (\n \n \n \n );\n};\n\nLeadDriverDialogForm.propTypes = {\n isUpdate: PropTypes.bool,\n isOpen: PropTypes.bool.isRequired,\n loading: PropTypes.bool.isRequired,\n onSubmit: PropTypes.func.isRequired,\n leadDriver: PropTypes.object.isRequired,\n onBlurInput: PropTypes.func.isRequired,\n onCloseDialog: PropTypes.func.isRequired,\n};\n\nLeadDriverDialogForm.defaultProps = {\n isUpdate: false,\n};\n\nexport default LeadDriverDialogForm;\n","import moment from 'moment';\n\nexport const LEAD_DRIVER = {\n // Personal Data\n firstName: '',\n lastName: '',\n email: '',\n birthDate: moment().format('YYYY-MM-DD'),\n gender: '',\n maritalStatus: '',\n ageFirstLicensed: moment().format('YYYY-MM-DD'),\n licensedState: '',\n licenseStatus: '',\n fullTimeStudent: false,\n education: '',\n occupation: '',\n creditRating: 0,\n relationshipToApplicant: '',\n // Contact Data\n cellPhone: '',\n daytimePhone: '',\n eveningPhone: '',\n preferredContactNumber: '',\n preferredContactTime: moment().format('YYYY-MM-DD'),\n // Vehicle Data\n makeOfVehicle: '',\n modelOfVehicle: '',\n yearOfVehicle: 0,\n trim: '',\n style: '',\n ownership: '',\n primaryUse: '',\n averageOneWayMileage: 0,\n annualMileage: 0,\n vehicleParking: '',\n antiLockBreaks: '',\n securitySystem: '',\n salvagedVehicle: '',\n // Residence Data\n yearsAtCurrentResidence: 0,\n city: '',\n state: '',\n street1: '',\n street2: '',\n zip: '',\n // Insurance Data\n insuranceCompany: '',\n continuouslyInsuredYears: 0,\n continuouslyInsuredMonths: 0,\n currentInsuranceCompanyYears: 0,\n currentInsuranceCompanyMonths: 0,\n insuredPast30Days: false,\n // Other Data\n yearsInField: 0,\n policyExpirationDate: moment().format('YYYY-MM-DD'),\n howManyIncidentsInThePast5Years: 0,\n incidentsPast5Years: '',\n violationsPast5Years: '',\n activityPast5Years: '',\n vin: '',\n ticketsAccidentsClaimsPast3Years: true,\n additionalDrivers: false,\n additionalVehicles: false,\n completedBehindTheWheel: false,\n currentBodilyInjuryCoverages: '',\n currentPropertyDamageCoverages: '',\n currentCoverageLevel: '',\n coverageLevel: '',\n currentComprehensiveDeductible: 0,\n currentCollisionDeductible: '',\n fillingRequired: '',\n bankruptcyInPast5Years: false,\n multiplePolicyDiscount: '',\n eNewsletter: 0,\n suspendedOrRevokedInThePast5Years: false,\n dUIDWIInThePast5Years: moment().format('YYYY-MM-DD'),\n dateOfDUIDWI: moment().format('YYYY-MM-DD'),\n desiredCollisionCoverage: 0,\n desiredComprehensiveCoverage: 0,\n averageDaysPerWeekUsed: 0,\n primaryDriver: '',\n};\n","import Flux from '@cobuildlab/flux-state';\nimport { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnFetchLeadDrivers = createEvent();\n\nexport const OnFetchLeadDriversError = createEvent();\n\n/**\n * Event that triggers an error.\n *\n * @type {string}\n */\nexport const LEAD_DRIVER_ERROR_EVENT = 'onLeadDriverError';\n\n/**\n * Event that triggers a Lead Driver create event.\n *\n * @type {string}\n */\nexport const LEAD_DRIVER_CREATE_EVENT = 'onLeadDriverCreate';\n\n/**\n * Event that triggers a Lead Driver update event.\n *\n * @type {string}\n */\nexport const LEAD_DRIVER_UPDATE_EVENT = 'onLeadDriverUpdate';\n\n/**\n * Event that triggers a Lead Driver delete event.\n *\n * @type {string}\n */\nexport const LEAD_DRIVER_DELETE_EVENT = 'onLeadDriverDelete';\n\nclass LeadDriverStore extends Flux.DashStore {\n constructor() {\n super();\n this.addEvent(LEAD_DRIVER_ERROR_EVENT);\n this.addEvent(LEAD_DRIVER_UPDATE_EVENT);\n this.addEvent(LEAD_DRIVER_CREATE_EVENT);\n this.addEvent(LEAD_DRIVER_DELETE_EVENT);\n }\n}\n\nexport default new LeadDriverStore();\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnLeadDriverCreateEvent = createEvent();\n\nexport const OnLeadDriverCreateError = createEvent();\n\nexport const OnLeadDriverUpdateEvent = createEvent();\n\nexport const OnLeadDriverDeleteEvent = createEvent();\n\nexport const OnLeadDriverError = createEvent();\n","import { createAction } from '@cobuildlab/react-simple-state';\nimport { error, log } from '@cobuildlab/pure-logger';\nimport { OnApolloClient } from '../../../shared/session/session-events';\nimport {\n LEAD_DRIVER_UPDATE_MUTATION,\n LEAD_DRIVER_CREATE_MUTATION,\n LEAD_DRIVER_DELETE_MUTATION,\n FETCH_LEAD_DRIVERS,\n} from './leads-drivers-queries';\nimport { OnFetchLeadDrivers, OnFetchLeadDriversError } from './leads-drivers-store';\nimport { sanitize8BaseReference } from '../../../shared/utils';\nimport { leadDriverValidations } from './leads-drivers-utils';\nimport {\n OnLeadDriverCreateError,\n OnLeadDriverCreateEvent,\n OnLeadDriverDeleteEvent,\n OnLeadDriverError,\n OnLeadDriverUpdateEvent,\n} from './leads-driver-events';\n\n/**\n * Fetches the drivers for the specified lead\n *\n * @param {string} id - The lead id\n *\n * @returns {Promise} The request result\n */\nexport const fetchLeadDrivers = createAction(\n OnFetchLeadDrivers,\n OnFetchLeadDriversError,\n async (id) => {\n const client = OnApolloClient.get();\n\n const { data } = await client.query({\n query: FETCH_LEAD_DRIVERS,\n fetchPolicy: 'network-only',\n variables: {\n id,\n },\n });\n\n return {\n leadDriversList: {\n items: data.lead.drivers.items,\n },\n };\n },\n);\n\n/**\n * Creates a lead driver\n *\n * @param {object} leadDriver lead driver to create\n * @returns {object} response data\n */\nexport const createLeadDriver = async (leadDriver) => {\n const client = OnApolloClient.get();\n let response;\n\n try {\n leadDriverValidations(leadDriver);\n } catch (e) {\n error('createLeadDriver', e);\n\n return OnLeadDriverError.dispatch(e);\n }\n\n sanitize8BaseReference(leadDriver, 'driversLeadRelation');\n\n try {\n response = await client.mutate({\n mutation: LEAD_DRIVER_CREATE_MUTATION,\n variables: { data: leadDriver },\n });\n } catch (e) {\n error('createLeadDriver', e);\n\n return OnLeadDriverCreateError.dispatch(response.data);\n }\n\n log('createLeadDriver', response);\n OnLeadDriverCreateEvent.dispatch(response.data);\n return response.data;\n};\n\n/**\n * Update a lead driver\n *\n * @param {object} leadDriver lead driver to update\n * @returns {object} response data\n */\nexport const updateLeadDriver = async (leadDriver) => {\n const client = OnApolloClient.get();\n let response;\n\n try {\n leadDriverValidations(leadDriver);\n } catch (e) {\n error('updateLeadDriver', e);\n\n return OnLeadDriverError.dispatch(e);\n }\n\n try {\n response = await client.mutate({\n mutation: LEAD_DRIVER_UPDATE_MUTATION,\n variables: { data: leadDriver },\n });\n } catch (e) {\n error('updateLeadDriver', e);\n\n return OnLeadDriverError.dispatch(e);\n }\n\n log('updateLeadDriver', response);\n OnLeadDriverUpdateEvent.dispatch(response.data);\n return response.data;\n};\n\n/**\n * Delete a lead driver\n *\n * @param {string} leadDriverId lead driver id to delete\n * @returns {object} response data\n */\nexport const deleteLeadDriver = async (leadDriverId) => {\n const client = OnApolloClient.get();\n let response;\n\n try {\n response = await client.mutate({\n mutation: LEAD_DRIVER_DELETE_MUTATION,\n variables: { data: { id: leadDriverId } },\n });\n } catch (e) {\n error('deleteLeadDriver', e);\n\n return OnLeadDriverError.dispatch(e);\n }\n\n log('deleteLeadDriver', response);\n OnLeadDriverDeleteEvent.dispatch(response.data);\n\n return response.data;\n};\n","import React, { useEffect, useState } from 'react';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport PropTypes from 'prop-types';\nimport PaperInfo from '../../components/PaperInfo';\nimport { styled, Grid } from '@8base/boost';\nimport { RowHeader, ColumnInfo, ColumnName, ColumnValue } from '../../components/ColumnInfo';\nimport { IconTrash, IconUpdate } from '../../../../shared/components/ui/Icons';\nimport { TextContact, YesNoDialog } from '../../../../shared/components';\nimport * as R from 'ramda';\nimport LeadDriverDialogForm from './LeadDriverDialogForm';\nimport { formatDriversData, driverMap, driverCreateMap } from '../leads-drivers-utils';\nimport { LEAD_DRIVER } from '../leads-drivers-model';\nimport {\n fetchLeadDrivers,\n updateLeadDriver,\n createLeadDriver,\n deleteLeadDriver,\n} from '../leads-drivers-actions';\nimport { OnFetchLeadDrivers, OnFetchLeadDriversError } from '../leads-drivers-store';\nimport { onErrorMixinFC } from '../../../../shared/mixins';\nimport * as toast from 'shared/components/toast/Toast';\nimport {\n OnLeadDriverCreateEvent,\n OnLeadDriverDeleteEvent,\n OnLeadDriverError,\n OnLeadDriverUpdateEvent,\n} from '../leads-driver-events';\n\nconst DriverHeader = styled(RowHeader)`\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n`;\n\nconst StyledMargin = styled.div`\n display: flex;\n justify-content: flex-end;\n margin: 0 6px;\n\n > img {\n margin: 0 5px;\n }\n`;\n\nconst LeadDriverInfo = ({ id }) => {\n const [drivers, setDrivers] = useState([]);\n const [loading, setLoading] = useState(true);\n const [leadDriver, setLeadDriver] = useState(R.clone(LEAD_DRIVER));\n const [isOpenLeadDriverForm, setIsOpenLeadDriverForm] = useState(false);\n const [loadingLeadDriver, setLoadingLeadDriver] = useState(false);\n const [loadingDeleteDriver, setLoadingDeleteDriver] = useState(false);\n const [isUpdateLeadDriver, setIsUpdateLeadDriver] = useState(false);\n const [isOpenLeadDriverDelete, setIsOpenLeadDriverDelete] = useState(false);\n\n useEffect(() => {\n setLoading(true);\n\n fetchLeadDrivers(id);\n }, [id]);\n\n useEventSubscription(\n OnFetchLeadDrivers,\n ({ leadDriversList }) => {\n setDrivers(leadDriversList.items);\n setLoading(false);\n },\n [],\n );\n\n useEventSubscription(\n OnFetchLeadDriversError,\n (e) => {\n onErrorMixinFC(e);\n setLoading(false);\n },\n [],\n );\n\n const handleOnBlur = (key, event) => {\n leadDriver[key] = event.target.value;\n };\n\n const handleOnSubmitLeadDriver = () => {\n const dataLeadDriver = driverCreateMap(leadDriver);\n\n setLoadingLeadDriver(true);\n\n if (isUpdateLeadDriver) {\n dataLeadDriver.id = leadDriver.id;\n\n updateLeadDriver(dataLeadDriver);\n } else {\n dataLeadDriver.driversLeadRelation = id;\n\n createLeadDriver(dataLeadDriver);\n }\n };\n const handleOnYesLeadDriverDelete = () => {\n setLoadingDeleteDriver(true);\n deleteLeadDriver(leadDriver.id);\n };\n const handleOnNoLeadDriverDelete = () => {\n setLeadDriver(R.clone(LEAD_DRIVER));\n setIsOpenLeadDriverDelete(false);\n };\n\n useEventSubscription(OnLeadDriverCreateEvent, () => {\n setLoadingLeadDriver(false);\n setIsOpenLeadDriverForm(false);\n\n setLoading(true);\n\n fetchLeadDrivers(id);\n\n toast.success('Lead Management', 'Lead Driver Successfully Created');\n });\n\n useEventSubscription(OnLeadDriverUpdateEvent, () => {\n setLoadingLeadDriver(false);\n setIsOpenLeadDriverForm(false);\n setIsUpdateLeadDriver(false);\n setLeadDriver(R.clone(LEAD_DRIVER));\n\n setLoading(true);\n\n fetchLeadDrivers(id);\n\n toast.success('Lead Management', 'Lead Driver Successfully Updated');\n });\n\n useEventSubscription(OnLeadDriverError, (err) => {\n onErrorMixinFC(err);\n setLoadingLeadDriver(false);\n });\n\n useEventSubscription(OnLeadDriverDeleteEvent, (err) => {\n setLeadDriver(R.clone(LEAD_DRIVER));\n setIsOpenLeadDriverDelete(false);\n setLoadingDeleteDriver(false);\n\n setLoading(true);\n\n fetchLeadDrivers(id);\n\n toast.success('Lead Management', 'Lead Driver Successfully Delete');\n });\n\n return (\n <>\n setIsOpenLeadDriverForm(true)}>\n {formatDriversData(drivers).map((driver, driverIndex) => {\n const driverData = drivers[driverIndex];\n const driverMapped = driverMap(driverData);\n\n return (\n \n \n {driver.header}\n \n {\n setLeadDriver(driverMapped);\n setIsOpenLeadDriverDelete(true);\n }}\n />\n {\n setLeadDriver(driverMapped);\n setIsUpdateLeadDriver(true);\n setIsOpenLeadDriverForm(true);\n }}\n />\n \n \n \n {driver.rows.map((row, rowIndex) => {\n return (\n \n \n {row.map((column, columnIndex) => {\n return (\n \n {column.label}\n \n {column.isTextContact ? (\n {column.value}\n ) : (\n column.value\n )}\n \n \n );\n })}\n \n \n );\n })}\n \n
\n );\n })}\n \n {\n setIsOpenLeadDriverForm(false);\n setIsUpdateLeadDriver(false);\n setLeadDriver(R.clone(LEAD_DRIVER));\n }}\n />\n \n \n );\n};\n\nLeadDriverInfo.propTypes = {\n id: PropTypes.string.isRequired,\n};\n\nexport default LeadDriverInfo;\n","import React, { useState, useEffect, useCallback, useMemo } from 'react';\nimport { useSubscription as useSimpleSubscription } from '@cobuildlab/react-simple-state';\nimport { Box } from '../../shared/components/Box';\nimport { useHistory, useLocation, useParams } from 'react-router-dom';\nimport { Loader, Row, Text } from '@8base/boost';\nimport { LeadDetailsHeader } from './components/LeadDetailsHeader';\nimport { LeadAmountForm } from './components/forms/LeadAmountForm';\nimport { LeadStageForm } from './components/forms/LeadStageForm';\nimport { LeadCampaignForm } from './components/forms/LeadCampaignForm';\nimport { LeadAssigneesForm } from './components/forms/LeadAssigneesForm';\nimport { LeadInfoCard } from './components/forms/LeadInfoCard';\nimport LeadTypeAutoInfo from './leads-type-auto/components/LeadTypeAutoInfo';\nimport LeadTypeCommercialAutoInfo from './leads-type-commercial-auto/components/LeadTypeCommercialAutoInfo';\nimport LeadTypeGeneralLiabilityInfo from './leads-type-general-liability/components/LeadTypeGeneralLiabilityInfo';\nimport LeadTypeLifeInfo from './leads-type-life/components/LeadTypeLifeInfo';\nimport LeadTypeHomeInfo from './leads-type-home/components/LeadTypeHomeInfo';\nimport LeadTypeWorkersCompensationInfo from './leads-type-workers-compensation/components/LeadTypeWorkersCompensationInfo';\nimport LeadTypeEmployeeBenefitsInfo from './leads-type-employee-benefits/components/LeadTypeEmployeeBenefitsInfo';\nimport DecisionDialog from '../../shared/components/dialog/DecisionDialog';\nimport {\n OnFetchLeadEvent,\n OnFetchLeadEventError,\n OnFetchCampaigns,\n OnFetchCampaignsError,\n} from './leads-store';\nimport { fetchLeadDetails, fetchAgencyCampaigns } from './leads-actions';\nimport { fetchAgencyAgents } from './../users/user-actions';\nimport { onErrorMixinFC } from '../../shared/mixins';\nimport * as toast from 'shared/components/toast/Toast';\nimport LeadNotes from './components/LeadNotes';\nimport LeadTasks from './components/LeadTasks';\nimport LeadDriverInfo from './leads-drivers/components/LeadDriverInfo';\nimport { LeadHistory } from './leads-history/components/LeadHistory';\nimport { useAgency } from '../../shared/hooks/useAgency';\nimport { OnFetchAgents, OnFetchAgentsError } from '../users/user-events';\nimport moment from 'moment';\n\nconst LeadDetailsView = () => {\n const { id } = useParams();\n const agency = useAgency();\n const [lead, setLead] = useState(null);\n const [loading, setLoading] = useState(true);\n const [campaigns, setCampaigns] = useState([]);\n const [users, setUsers] = useState([]);\n const history = useHistory();\n\n const fetch = useCallback(() => {\n fetchLeadDetails(id);\n }, [id]);\n\n const leadLastCalled = useMemo(() => {\n return lead?.callCadence?.lastCalled\n ? moment(lead.callCadence.lastCalled).format('MM-DD-YYYY - LT')\n : 'Lead has not been called yet';\n }, [lead]);\n\n useEffect(() => {\n setLoading(true);\n\n fetch();\n }, [fetch]);\n\n useEffect(() => {\n fetchAgencyCampaigns(agency.id);\n fetchAgencyAgents(agency.id);\n }, [agency]);\n\n useSimpleSubscription(\n OnFetchLeadEvent,\n (data) => {\n if (data.lead) {\n setLead(data.lead);\n setLoading(false);\n } else {\n toast.warn('The lead you tried to reach does not exist');\n\n history.replace('/dashboard');\n }\n },\n [],\n );\n\n useSimpleSubscription(\n OnFetchLeadEventError,\n (e) => {\n onErrorMixinFC(e);\n },\n [],\n );\n\n useSimpleSubscription(\n OnFetchCampaigns,\n ({ campaignsList }) => {\n setCampaigns(campaignsList.items);\n },\n [],\n );\n\n useSimpleSubscription(\n OnFetchCampaignsError,\n (e) => {\n toast.error('Could not get campaigns: ' + e.message);\n },\n [],\n );\n\n useSimpleSubscription(\n OnFetchAgents,\n ({ usersList }) => {\n setUsers(usersList.items);\n },\n [],\n );\n\n useSimpleSubscription(\n OnFetchAgentsError,\n (e) => {\n toast.error('Could not get users in agency: ' + e.message);\n },\n [],\n );\n\n if (loading) {\n return (\n \n \n \n );\n }\n\n return (\n \n \n \n \n \n \n \n \n \n Created: \n {moment(lead.createdAt).format('MM-DD-YYYY - LT')}\n
\n \n Last Update: \n {moment(lead.updatedAt).format('MM-DD-YYYY - LT')}\n
\n \n Last Called: \n {leadLastCalled}\n
\n \n \n \n \n \n \n {/* LEAD TYPES */}\n {lead.leadLeadTypeAutoRelation && (\n \n )}\n {lead.leadLeadTypeCommercialAutoRelation && (\n \n )}\n {lead.leadLeadTypeGeneralLiabilityRelation && (\n \n )}\n {lead.leadLeadTypeLifeRelation && (\n \n )}\n {lead.leadLeadTypeHomeRelation && (\n \n )}\n {lead.leadLeadTypeWorkersCompensationRelation && (\n \n )}\n {lead.leadLeadTypeEmployeeBenefitRelation && (\n \n )}\n \n \n \n \n \n );\n};\n\nexport default LeadDetailsView;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport StyledBadge from '../../../../shared/components/ui/StyledBadge';\n\nexport const Status = ({ status }) => {\n let priority;\n if (status === 'APPROVED') {\n priority = 1;\n } else if (status === 'PENDING') {\n priority = 2;\n } else if (status === 'EXPIRED') {\n priority = 3;\n } else if (status === 'REJECTED') {\n priority = 4;\n }\n return {status};\n};\nStatus.propTypes = {\n status: PropTypes.string.isRequired,\n};\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnCreateInvitationCompanyEvent = createEvent();\n\nexport const OnCreateInvitationCompanyError = createEvent();\n\nexport const OnDeleteinvitationEvent = createEvent();\n\nexport const OnDeleteinvitationError = createEvent();\n\nexport const OnResendInvitationEvent = createEvent();\n\nexport const OnResendInvitationError = createEvent();\n\nexport const OnInvitationListEvent = createEvent();\n\nexport const OnInvitationListError = createEvent();\n\nexport const OnCreateInvitationEvent = createEvent();\n\nexport const OnCreateInvitationError = createEvent();\n","import { OnApolloClient, OnSessionFetch } from '../../../shared/session/session-events';\nimport { error, log } from '@cobuildlab/pure-logger';\nimport {\n QUERY_INVITATIONS,\n CREATE_INVITATION,\n RESEND_INVITATION,\n DELETE_INVITATION,\n CREATE_INVITATION_COMPANY,\n} from './invitations-queries';\nimport {\n createAgencyInvitationValidator,\n createCompanyInvitationValidator,\n} from '@cobuildlab/lead-volt-share';\nimport { normalize8baseReferenceConnect } from '@cobuildlab/8base-utils';\nimport {\n OnCreateInvitationCompanyError,\n OnCreateInvitationCompanyEvent,\n OnCreateInvitationError,\n OnCreateInvitationEvent,\n OnDeleteinvitationError,\n OnDeleteinvitationEvent,\n OnInvitationListError,\n OnInvitationListEvent,\n OnResendInvitationError,\n OnResendInvitationEvent,\n} from './invitation-events';\n\nexport const fetchInvitationList = async (agencyId, pageSize, queryOffset) => {\n const client = OnApolloClient.get();\n const variables = { agencyId: agencyId, limit: pageSize, offset: queryOffset };\n try {\n const response = await client.query({\n query: QUERY_INVITATIONS,\n fetchPolicy: 'network-only',\n variables,\n });\n OnInvitationListEvent.dispatch(response.data);\n return response.data;\n } catch (e) {\n return OnInvitationListError.dispatch(e);\n }\n};\n\nexport const createInvitation = async (data) => {\n const client = OnApolloClient.get();\n const { user } = OnSessionFetch.get();\n let response = null;\n\n try {\n createAgencyInvitationValidator(user, data);\n } catch (e) {\n error('createInvitation', e);\n\n return OnCreateInvitationError.dispatch(e);\n }\n\n try {\n response = await client.mutate({\n mutation: CREATE_INVITATION,\n variables: { data },\n });\n } catch (e) {\n error('createInvitation', e);\n\n return OnCreateInvitationError.dispatch(e);\n }\n\n log('createInvitation', response.data);\n OnCreateInvitationEvent.dispatch(response.data);\n\n return response.data;\n};\n\nexport const deleteInvitation = async (invitationId) => {\n const client = OnApolloClient.get();\n try {\n const response = await client.mutate({\n mutation: DELETE_INVITATION,\n variables: { id: invitationId },\n });\n OnDeleteinvitationEvent.dispatch(response.data);\n return response.data;\n } catch (e) {\n return OnDeleteinvitationError.dispatch(e);\n }\n};\nexport const resendInvitation = async (invitationId, resend) => {\n const client = OnApolloClient.get();\n try {\n const response = await client.mutate({\n mutation: RESEND_INVITATION,\n variables: { id: invitationId, resend },\n });\n OnResendInvitationEvent.dispatch(response.data);\n return response.data;\n } catch (e) {\n return OnResendInvitationError.dispatch(e);\n }\n};\n\nexport const createInvitationCompany = async (data) => {\n const client = OnApolloClient.get();\n const { user } = OnSessionFetch.get();\n let response = null;\n\n try {\n createCompanyInvitationValidator(user, data);\n } catch (e) {\n error('createInvitationCompany', e);\n return OnCreateInvitationCompanyError.dispatch(response.data);\n }\n\n normalize8baseReferenceConnect(data, 'company');\n\n try {\n response = await client.mutate({\n mutation: CREATE_INVITATION_COMPANY,\n variables: { data },\n });\n } catch (e) {\n error('companyInvitationCompany', e);\n return OnCreateInvitationCompanyError.dispatch(response.data);\n }\n\n OnCreateInvitationCompanyEvent.dispatch(response.data);\n return response.data;\n};\n","import React, { useState, useCallback } from 'react';\nimport moment from 'moment';\nimport { Dropdown, Pagination, Icon, Table, Menu, Dialog, Paragraph, Button } from '@8base/boost';\nimport * as toast from 'shared/components/toast/Toast';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { Status } from './Status';\nimport { deleteInvitation, resendInvitation } from '../invitations-actions';\nimport { deleteCompanyInvitation } from '../../../company-invitation/company-invitation-actions';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport {\n OnDeleteinvitationError,\n OnDeleteinvitationEvent,\n OnResendInvitationError,\n OnResendInvitationEvent,\n} from '../invitation-events';\nimport {\n OnDeleteCompanyInvitationError,\n OnDeleteCompanyInvitationEvent,\n} from 'modules/company/campany-events';\n\nconst tableColumns = '80px minmax(250px,1fr) 150px 200px 100px';\n\nconst PaginationWrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n & > div > div > *::before {\n background-color: var(--color-primary);\n transition: all 0.2s;\n }\n\n & > div > span {\n display: inline-block;\n padding: 0.5rem 1.5rem;\n border: solid 1px #d0d7dd;\n border-radius: 5px;\n }\n`;\n\nconst TableBody = styled(Table.Body)`\n min-height: ${({ height }) => height};\n`;\n\nexport const InvitationsList = ({\n loading,\n page,\n pageSize,\n total,\n handleChange,\n offset,\n invitations,\n refetch,\n CompanyInvitationList,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [menuOpen, setMenuOpen] = useState('');\n const [invitation, setInvitation] = useState('');\n const [loadingDelete, setLoadingDelete] = useState(false);\n const [loadingResend, setLoadingResend] = useState(false);\n const deleteModal = useCallback((id) => {\n setInvitation(id);\n setIsOpen(true);\n }, []);\n\n useEventSubscription(OnDeleteinvitationEvent, () => {\n setInvitation('');\n setIsOpen(false);\n refetch('network-only');\n toast.success('Invitation deleted successfully');\n setLoadingDelete(false);\n });\n\n useEventSubscription(OnDeleteinvitationError, (err) => {\n toast.error(`${JSON.stringify(err)}`);\n setLoadingDelete(false);\n });\n\n useEventSubscription(OnDeleteCompanyInvitationEvent, () => {\n setInvitation('');\n setIsOpen(false);\n refetch('network-only');\n toast.success('Invitation deleted successfully');\n setLoadingDelete(false);\n });\n\n useEventSubscription(OnDeleteCompanyInvitationError, (error) => {\n toast.error(`${JSON.stringify(error)}`);\n setLoadingDelete(false);\n });\n\n useEventSubscription(OnResendInvitationEvent, () => {\n toast.success('Invitation was resend successfully');\n setMenuOpen('');\n setLoadingDelete(false);\n });\n\n useEventSubscription(OnResendInvitationError, (error) => {\n toast.error(`${JSON.stringify(error)}`);\n setLoadingDelete(false);\n });\n\n const deleteInvitationAction = useCallback(() => {\n setLoadingDelete(true);\n if (CompanyInvitationList) {\n deleteCompanyInvitation(invitation);\n } else {\n deleteInvitation(invitation);\n }\n }, [invitation, CompanyInvitationList]);\n\n const resendInvitationAction = useCallback((invitation) => {\n setLoadingResend(true);\n resendInvitation(invitation, moment().format('x'));\n }, []);\n\n const height = `${pageSize * 47}px`;\n\n return (\n <>\n \n \n #\n Email\n Status\n Updated At\n Actions\n \n \n {(item, i) => (\n \n {i + 1 + offset}\n {item.email}\n \n \n \n {moment(item.updatedAt).format('MM/DD/YYYY HH:mm')}\n \n {item.status === 'APPROVED' || item.status === 'REJECTED' ? (\n '-'\n ) : (\n setMenuOpen((id) => (id === item.id ? '' : item.id))}>\n \n \n \n \n \n \n \n )}\n \n \n )}\n \n \n \n \n \n \n
\n \n \n );\n};\n\nInvitationsList.propTypes = {\n loading: PropTypes.bool.isRequired,\n page: PropTypes.number.isRequired,\n pageSize: PropTypes.number.isRequired,\n total: PropTypes.number.isRequired,\n handleChange: PropTypes.func.isRequired,\n offset: PropTypes.number.isRequired,\n invitations: PropTypes.arrayOf(PropTypes.object).isRequired,\n refetch: PropTypes.func.isRequired,\n CompanyInvitationList: PropTypes.bool,\n};\n\nInvitationsList.defaultProps = {\n CompanyInvitationList: false,\n};\n","export const USER_INVITATION_TYPES = [\n { value: 'MANAGER', label: 'Manager' },\n { value: 'AGENT', label: 'Agent' },\n];\n\nexport const PAGE_SIZE = 10;\n","import React, { useState, useCallback } from 'react';\nimport * as toast from 'shared/components/toast/Toast';\nimport PropTypes from 'prop-types';\nimport { Button, Form, SelectField, InputField, Dialog } from '@8base/boost';\nimport { hasError } from 'apollo-client/core/ObservableQuery';\nimport { createInvitation } from '../invitations-actions';\nimport { USER_INVITATION_TYPES } from '../invitations-model';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { onErrorMixinFC } from '../../../../shared/mixins';\nimport { OnCreateInvitationError, OnCreateInvitationEvent } from '../invitation-events';\n\nexport const Invitation = ({ close, isOpen, agencyId, agencyName, refetch }) => {\n const formDefault = {\n type: '',\n email: '',\n };\n const [form, setForm] = useState(formDefault);\n const [formErrors, setFormErrors] = useState({\n type: {},\n email: {},\n });\n const [loading, setLoading] = useState(false);\n const handleChange = useCallback(({ target }) => {\n const { value, name } = target;\n setFormErrors((state) => ({ ...state, [name]: {} }));\n setForm((state) => ({ ...state, [name]: value }));\n }, []);\n\n const handleSelectChange = useCallback((type) => {\n setFormErrors((state) => ({ ...state, type: {} }));\n setForm((state) => ({ ...state, type }));\n }, []);\n\n useEventSubscription(OnCreateInvitationEvent, () => {\n refetch('network-only');\n setForm(formDefault);\n close();\n toast.success('Success', 'Invitation send successfully');\n setLoading(false);\n });\n\n useEventSubscription(OnCreateInvitationError, (error) => {\n onErrorMixinFC(error);\n setLoading(false);\n });\n\n const saveInvitation = useCallback(() => {\n const data = {\n ...form,\n agency: {\n connect: {\n id: agencyId,\n },\n },\n };\n\n setLoading(true);\n createInvitation(data);\n }, [form, agencyId]);\n\n const disabledSubmit = hasError(formErrors);\n\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n );\n};\nInvitation.propTypes = {\n close: PropTypes.func.isRequired,\n isOpen: PropTypes.bool.isRequired,\n agencyId: PropTypes.string.isRequired,\n agencyName: PropTypes.string.isRequired,\n refetch: PropTypes.func.isRequired,\n};\n","import React, { useState, useEffect, useCallback } from 'react';\nimport * as toast from 'shared/components/toast/Toast';\nimport { useHistory } from 'react-router-dom';\nimport { Card, Loader, Row } from '@8base/boost';\nimport { OnSessionFetch } from '../../../shared/session/session-events';\nimport { InvitationsList } from './components/InvitationsList';\nimport { Invitation } from './components/Invitation';\nimport { fetchInvitationList } from './invitations-actions';\nimport { PAGE_SIZE } from './invitations-model';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport { Box } from '../../../shared/components/Box';\nimport { CreateButton } from 'shared/components';\nimport { OnInvitationListError, OnInvitationListEvent } from './invitation-events';\n\nexport const InvitationsView = () => {\n const [user, setUser] = useState(null);\n const [page, setPage] = useState(1);\n const [modal, setModal] = useState(false);\n const [loadingUser, setLoadingUser] = useState(true);\n const history = useHistory();\n const [invitations, setInvitations] = useState([]);\n const [loading, setLoading] = useState(false);\n const [total, setTotal] = useState(0);\n const agency = useAgency();\n\n useEffect(() => {\n const user = OnSessionFetch.get().user;\n const validUser = user?.userAdminRelation.count > 0;\n const userRole = user.userAgencyUserRelation.items[0].roles[0];\n\n if (!validUser && userRole !== 'MANAGER') {\n history.goBack();\n } else {\n setLoadingUser(false);\n setUser(user);\n }\n }, [history]);\n\n const userId = user?.id;\n\n const queryOffset = (page - 1) * PAGE_SIZE;\n\n useEventSubscription(OnInvitationListEvent, (data) => {\n const {\n agencyInvitationsList: { count, items },\n } = data;\n setInvitations(items);\n setTotal(count);\n setLoading(false);\n });\n useEventSubscription(OnInvitationListError, (data) => {\n toast.error(JSON.stringify(data));\n setLoading(false);\n });\n const fetchInviations = useCallback(() => {\n setLoading((state) => !state);\n fetchInvitationList(agency.id, PAGE_SIZE, queryOffset);\n }, [agency, queryOffset]);\n\n useEffect(() => {\n if (!userId) {\n return;\n }\n fetchInviations();\n }, [userId, fetchInviations]);\n\n const handlePageChange = useCallback((value) => {\n setPage(value);\n }, []);\n\n const closeModal = useCallback(() => {\n setModal(false);\n }, []);\n\n const refetch = fetchInviations;\n\n if (loadingUser) {\n return (\n \n \n
\n );\n }\n\n return (\n \n \n \n \n setModal((modal) => !modal)}\n text=\"Create Invitation\"\n />\n
\n \n \n \n \n \n \n \n );\n};\n","import React, { useCallback } from 'react';\nimport { Table, Dropdown, Menu, Icon, Tag as BoostTag } from '@8base/boost';\nimport { DropdownBodyOnTable } from '../../../../shared/components';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst MenuItem = styled(Menu.Item)`\n color: ${({ danger }) => (danger ? '#FF0000' : 'rgb(50, 60, 71)')}!important;\n &:hover {\n ${({ danger }) => (danger ? '' : 'color: #3db4aa !important;')}\n }\n`;\n\nconst Tag = styled(BoostTag)`\n ${(props) => {\n switch (props.status) {\n case 'active':\n return `\n color: #3DB4AA !important;\n background-color: rgba(61, 180, 170, .1) !important;\n border-color: rgba(61, 180, 170, .4) !important;\n `;\n case 'invited':\n return `\n color: #62ABFE !important;\n background-color: rgba(98, 171, 254, .1) !important;\n border-color: rgba(98, 171, 254, .4) !important;\n `;\n case 'inactive':\n return `\n color: #FF0606 !important;\n background-color: rgba(255, 6, 6, .1) !important;\n border-color: rgba(255, 6, 6, .4) !important;\n `;\n default:\n return `\n color: #3DB4AA !important;\n background-color: rgba(61, 180, 170, .1) !important;\n border-color: rgba(61, 180, 170, .4) !important;\n `;\n }\n }}\n`;\n\n/**\n * Admin table row compnent\n *\n * @param {object} props - The component's prop object\n * @param {number} props.index - The number of the row in the table\n * @param {object} props.admin - The user object to display the data from\n * @param {Function} props.onDelete - Callback that is triggered when the delete button is clicked\n *\n * @returns {React.FC} The component to render\n */\nconst AdminsTableRow = ({ index, admin, onDelete }) => {\n const handleDelete = useCallback(\n (callback) => {\n onDelete(admin);\n callback();\n },\n [admin, onDelete],\n );\n\n return (\n <>\n {index}\n \n {admin.user.firstName} {admin.user.lastName}\n \n {admin.user.email}\n \n {admin.user.status}\n \n \n \n \n \n \n \n {({ closeDropdown }) => (\n \n )}\n \n \n \n \n );\n};\n\nAdminsTableRow.propTypes = {\n index: PropTypes.number.isRequired,\n admin: PropTypes.shape({\n user: PropTypes.shape({\n id: PropTypes.string.isRequired,\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n email: PropTypes.string.isRequired,\n status: PropTypes.array.isRequired,\n }).isRequired,\n __typename: PropTypes.string.isRequired,\n }).isRequired,\n onDelete: PropTypes.func.isRequired,\n};\n\nexport default AdminsTableRow;\n","import React, { useState, useCallback } from 'react';\nimport { Table } from '@8base/boost';\nimport AdminsTableRow from './AdminsTableRow';\nimport PropTypes from 'prop-types';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport YesNoDialog from '../../../../shared/components/YesNoDialog';\nimport { onErrorMixinFC } from '../../../../shared/mixins';\nimport { fetchCompany } from '../../../company/company-actions';\nimport { removeAdminFromCompany } from '../../../users/user-actions';\nimport styled from 'styled-components';\nimport { OnAdminDeletedError, OnAdminDeletedEvent } from 'modules/users/user-events';\n\nconst Body = styled(Table.Body)`\n min-height: 335px;\n`;\n\nconst columns = '68px repeat(3 , 1fr) 105px';\n\nconst AdminsTable = ({ user, companyId, admins, page, onUsersCount, setLoaderUpdate }) => {\n const [deleteModal, setDeleteModal] = useState({ open: false, selected: {}, loading: false });\n\n useEventSubscription(OnAdminDeletedError, (err) => {\n setDeleteModal((state) => ({ ...state, open: false, loading: false }));\n onErrorMixinFC(err);\n });\n\n useEventSubscription(OnAdminDeletedEvent, () => {\n setDeleteModal({ open: false, selected: {}, loading: false });\n setLoaderUpdate(true);\n fetchCompany(companyId, user.id);\n });\n\n const handleDeleteClick = useCallback(\n (admin) =>\n setDeleteModal({\n open: true,\n selected: admin,\n }),\n [],\n );\n\n const handleDelete = useCallback(async () => {\n const admin = deleteModal.selected;\n setDeleteModal((state) => ({ ...state, loading: true }));\n removeAdminFromCompany(admin);\n }, [deleteModal]);\n\n return (\n \n \n #\n NAME\n EMAIL\n STATUS\n ACTIONS\n \n \n {(admin, i) => (\n \n \n \n )}\n \n setDeleteModal((state) => ({ ...state, open: false }))}\n onYes={handleDelete}\n onNo={() => setDeleteModal((state) => ({ ...state, open: false }))}\n isLoading={deleteModal.loading}\n />\n
\n );\n};\n\nAdminsTable.propTypes = {\n user: PropTypes.object.isRequired,\n companyId: PropTypes.string.isRequired,\n admins: PropTypes.array.isRequired,\n page: PropTypes.number.isRequired,\n onUsersCount: PropTypes.func.isRequired,\n setLoaderUpdate: PropTypes.func.isRequired,\n};\n\nexport default AdminsTable;\n","import React, { useState, useCallback } from 'react';\nimport * as toast from 'shared/components/toast/Toast';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { Button, Form, InputField, Dialog } from '@8base/boost';\nimport { hasError } from 'apollo-client/core/ObservableQuery';\nimport PropTypes from 'prop-types';\nimport { createInvitationCompany } from './../../invitations/invitations-actions';\nimport { onErrorMixinFC } from '../../../../shared/mixins';\nimport {\n OnCreateInvitationCompanyError,\n OnCreateInvitationCompanyEvent,\n} from 'modules/my-account/invitations/invitation-events';\n\nexport const Invitation = ({ onClose, isOpen, companyId, companyName }) => {\n const formDefault = {\n email: '',\n };\n const [form, setForm] = useState(formDefault);\n const [formErrors, setFormErrors] = useState({\n email: {},\n });\n const [loading, setLoading] = useState(false);\n const handleChange = useCallback(({ target }) => {\n const { value, name } = target;\n setFormErrors((state) => ({ ...state, [name]: {} }));\n setForm((state) => ({ ...state, [name]: value }));\n }, []);\n\n useEventSubscription(OnCreateInvitationCompanyEvent, () => {\n setForm(formDefault);\n onClose();\n toast.success('Success', 'Invitation send successfully');\n setLoading(false);\n });\n\n useEventSubscription(OnCreateInvitationCompanyError, (err) => {\n onErrorMixinFC(err);\n setLoading(false);\n });\n\n const saveInvitation = useCallback(() => {\n const data = {\n ...form,\n company: companyId,\n };\n\n setLoading(true);\n createInvitationCompany(data);\n }, [form, companyId]);\n\n const disabledSubmit = hasError(formErrors);\n\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n );\n};\nInvitation.propTypes = {\n onClose: PropTypes.func.isRequired,\n isOpen: PropTypes.bool.isRequired,\n companyId: PropTypes.string.isRequired,\n companyName: PropTypes.string.isRequired,\n};\n","import React, { useCallback, useState, useEffect } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport {\n Button,\n Card,\n Column,\n Dialog,\n Grid,\n Form,\n InputField,\n Pagination,\n Paragraph,\n Row,\n SelectField,\n Loader,\n} from '@8base/boost';\nimport { fetchCompanies, updateCompany } from '../../company/company-actions';\nimport AdminsTable from './components/AdminsTable';\nimport { Invitation } from './components/Invitation';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport { OnSessionFetch } from '../../../shared/session/session-events';\nimport { CreateButton, PrimaryBtn } from '../../../shared/components';\nimport { Box } from '../../../shared/components/Box';\nimport * as toast from 'shared/components/toast/Toast';\nimport styled from 'styled-components';\nimport {\n OnCompanyfetched,\n OnCompanyUpdated,\n OnfetchCompanyList,\n} from 'modules/company/campany-events';\n\nconst CardHeaderWithButton = styled(Card.Header)`\n display: flex;\n justify-content: flex-end;\n`;\n\nconst CardTitle = styled.h3`\n font-size: 16px;\n font-weight: bold;\n line-height: 28px;\n margin-right: 20px !important;\n`;\n\nconst CardBody = styled(Card.Body)`\n padding: 0 !important;\n`;\n\nconst ColumnLeft = styled(Grid.Box)`\n padding-right: 10px !important;\n`;\n\nconst ColumnRight = styled(Grid.Box)`\n padding-left: 10px !important;\n`;\n//for updating companies in settings\nconst CompanyView = () => {\n const defaultPageSize = 10;\n const agency = useAgency();\n const [user, setUser] = useState(null);\n const [isOpenUpdate, setIsOpenUpdate] = useState(false);\n const [loaderUpdate, setLoaderUpdate] = useState(false);\n const [isInviteModalOpen, setisInviteModalOpen] = useState(false);\n const [data, setData] = useState({\n company: null,\n companies: [],\n options: [],\n total: 0,\n page: 1,\n loading: true,\n });\n // Form\n const [companyId, setCompanyId] = useState('');\n const [companyName, setCompanyName] = useState('');\n const history = useHistory();\n\n const handleOpenUpdate = () => setIsOpenUpdate(true);\n const handleCloseUpdate = () => setIsOpenUpdate(false);\n\n const handleSubmit = () => {\n setLoaderUpdate(true);\n\n const companyData = {\n id: companyId,\n name: companyName,\n };\n\n updateCompany(companyData, user.id);\n };\n\n const initOptionsSelectCompany = (companies) => {\n return companies.map((company) => {\n return { label: company.name, value: company.id };\n });\n };\n\n useEffect(() => {\n const user = OnSessionFetch.get().user;\n const validUser = user?.userAdminRelation.count > 0;\n if (!validUser) {\n history.goBack();\n } else {\n setUser(user);\n const companyIds = user.userAdminRelation.items.map((companyData) => companyData.company.id);\n fetchCompanies({ companyIds }, user.id);\n }\n }, [history, data.page, setUser]);\n\n useEventSubscription(OnfetchCompanyList, ({ companiesList }) => {\n const options = initOptionsSelectCompany(companiesList.items);\n let company = null;\n let total = 0;\n\n if (options.length === 1) {\n setCompanyId(options[0].value);\n setCompanyName(options[0].label);\n company = companiesList.items[0];\n total = company.adminCompanyRelation.count;\n } else if (options.length > 1) {\n const companyOfActiveAgency = companiesList.items.find(\n (company) => company.id === agency.company.id,\n );\n setCompanyId(companyOfActiveAgency.id);\n setCompanyName(companyOfActiveAgency.name);\n company = companyOfActiveAgency;\n total = companyOfActiveAgency.adminCompanyRelation.count;\n }\n\n setData((state) => ({\n ...state,\n companies: companiesList.items,\n loading: false,\n company,\n total,\n options,\n }));\n });\n\n useEventSubscription(OnCompanyfetched, ({ company }) => {\n setLoaderUpdate(false);\n setData((state) => {\n const companies = state.companies.map((currentCompany) =>\n currentCompany.id === company.id ? company : currentCompany,\n );\n return {\n ...state,\n companies: companies,\n options: initOptionsSelectCompany(companies),\n company: company,\n total: company.adminCompanyRelation.count,\n page: 1,\n };\n });\n toast.success('Company', 'Admin successfully removed from company');\n });\n\n useEventSubscription(OnCompanyUpdated, ({ companyUpdate }) => {\n setLoaderUpdate(false);\n handleCloseUpdate();\n toast.success('Company', 'Updated Successfully!');\n setData((state) => {\n const companiesWithCompanyUpdated = state.companies.map((company) =>\n company.id === companyUpdate.id ? companyUpdate : company,\n );\n return {\n ...state,\n companies: companiesWithCompanyUpdated,\n options: initOptionsSelectCompany(companiesWithCompanyUpdated),\n company: companyUpdate,\n total: companyUpdate.adminCompanyRelation.count,\n page: 1,\n };\n });\n });\n\n const handlePageChange = useCallback((page) => {\n setData((state) => ({ ...state, page }));\n }, []);\n\n const handleTotalChange = useCallback((total) => {\n setData((state) => ({ ...state, total: total }));\n }, []);\n\n const handleSelectChange = useCallback(\n (value) => {\n setCompanyId(value);\n setCompanyName(data.options.find((option) => option.value === value).label);\n setData((state) => {\n const company = state.companies.find((company) => company.id === value);\n return {\n ...state,\n company: company,\n total: company.adminCompanyRelation.count,\n page: 1,\n };\n });\n },\n [data.options],\n );\n\n let admins = data.company ? data.company.adminCompanyRelation.items : [];\n\n if (admins.length > 0 && data.total > 0) {\n admins = admins.slice((data.page - 1) * defaultPageSize, data.page * defaultPageSize);\n }\n\n let renderInputCompany = null;\n if (data.options.length === 1) {\n renderInputCompany = (\n \n );\n } else {\n renderInputCompany = (\n \n );\n }\n\n if (data.loading) {\n return (\n \n \n
\n );\n }\n\n return (\n \n \n \n \n Company\n {renderInputCompany}\n \n \n \n \n \n \n \n Save Changes\n \n
\n \n \n \n \n setisInviteModalOpen(true)}\n text=\"Create Company's Admin\"\n disabled={data.company ? false : true}\n />\n \n \n \n \n \n \n \n
\n \n \n \n setisInviteModalOpen(false)}\n companyId={data.company ? data.company.id : null}\n companyName={data.company ? data.company.name : ''}\n />\n \n \n );\n};\n\nexport default CompanyView;\n","import React, { useState, useCallback } from 'react';\r\nimport * as toast from 'shared/components/toast/Toast';\r\nimport PropTypes from 'prop-types';\r\nimport { Button, Form, SelectField, InputField, Dialog } from '@8base/boost';\r\nimport { hasError } from 'apollo-client/core/ObservableQuery';\r\nimport { createCompanyInvitation } from '../../../company-invitation/company-invitation-actions';\r\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\r\nimport { onErrorMixinFC } from '../../../../shared/mixins';\r\nimport {\r\n OnCreateCompanyInvitationError,\r\n OnCreateCompanyInvitationEvent,\r\n} from 'modules/company/campany-events';\r\n\r\nconst formDefault = {\r\n company: '',\r\n email: '',\r\n};\r\n\r\nexport const Invitation = ({ close, companies, isOpen, refetch }) => {\r\n const [form, setForm] = useState(formDefault);\r\n const [formErrors, setFormErrors] = useState({\r\n company: {},\r\n email: '',\r\n });\r\n const [loading, setLoading] = useState(false);\r\n const handleChange = useCallback(({ target }) => {\r\n const { value, name } = target;\r\n setFormErrors((state) => ({ ...state, [name]: {} }));\r\n setForm((state) => ({ ...state, [name]: value }));\r\n }, []);\r\n\r\n const companyOptions = companies.map((item) => {\r\n return { value: item.company.id, label: item.company.name };\r\n });\r\n\r\n const handleSelectChange = useCallback((company) => {\r\n setFormErrors((state) => ({ ...state, company: {} }));\r\n setForm((state) => ({ ...state, company }));\r\n }, []);\r\n\r\n useEventSubscription(OnCreateCompanyInvitationEvent, () => {\r\n refetch('network-only');\r\n setForm(formDefault);\r\n close();\r\n toast.success('Invitation Management', 'Invitation send successfully');\r\n setLoading(false);\r\n });\r\n\r\n useEventSubscription(OnCreateCompanyInvitationError, (err) => {\r\n onErrorMixinFC(err);\r\n setLoading(false);\r\n });\r\n\r\n const saveInvitation = useCallback(() => {\r\n setLoading(true);\r\n createCompanyInvitation(form);\r\n }, [form]);\r\n\r\n const disabledSubmit = hasError(formErrors);\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nInvitation.propTypes = {\r\n close: PropTypes.func.isRequired,\r\n isOpen: PropTypes.bool.isRequired,\r\n companies: PropTypes.array.isRequired,\r\n refetch: PropTypes.func.isRequired,\r\n};\r\n","import React, { useState, useEffect, useCallback } from 'react';\r\nimport * as toast from 'shared/components/toast/Toast';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Card, Row, Loader } from '@8base/boost';\r\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\r\nimport { OnSessionFetch } from '../../../shared/session/session-events';\r\nimport { InvitationsList } from '../invitations/components/InvitationsList';\r\nimport { Invitation } from './components/Invitation';\r\nimport { fetchCompanyInvitationList } from '../../company-invitation/company-invitation-actions';\r\nimport { PAGE_SIZE } from '../invitations/invitations-model';\r\nimport { CreateButton } from 'shared/components';\r\nimport { Box } from '../../../shared/components/Box';\r\nimport styled from 'styled-components';\r\nimport {\r\n OnCompanyinvitationError,\r\n OnCompanyinvitationListEvent,\r\n} from 'modules/company-invitation/company-invitation-events';\r\n\r\nconst CardTitle = styled.h3`\r\n font-size: 16px;\r\n font-weight: bold;\r\n line-height: 28px;\r\n`;\r\n\r\nconst CompanyInvitationsView = () => {\r\n const [user, setUser] = useState(null);\r\n const [page, setPage] = useState(1);\r\n const [modal, setModal] = useState(false);\r\n const [companies, setCompanies] = useState('');\r\n const [loadingUser, setLoadingUser] = useState(true);\r\n const history = useHistory();\r\n const [invitations, setInvitations] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n const [total, setTotal] = useState(0);\r\n useEffect(() => {\r\n const user = OnSessionFetch.get().user;\r\n const validUser = user?.userAdminRelation.count > 0;\r\n if (!validUser) {\r\n history.goBack();\r\n } else {\r\n setLoadingUser(false);\r\n setUser(user);\r\n setCompanies(user.userAdminRelation.items);\r\n }\r\n }, [history]);\r\n\r\n const userId = user?.id;\r\n\r\n const queryOffset = (page - 1) * PAGE_SIZE;\r\n\r\n useEventSubscription(OnCompanyinvitationListEvent, (data) => {\r\n const {\r\n companyInvitationsList: { count, items },\r\n } = data;\r\n setInvitations(items);\r\n setTotal(count);\r\n setLoading(false);\r\n });\r\n\r\n useEventSubscription(OnCompanyinvitationError, (err) => {\r\n toast.error(JSON.stringify(err));\r\n setLoading(false);\r\n });\r\n\r\n const fetchCompanyInvitations = useCallback(\r\n (fetchPolicy = 'cache-first') => {\r\n setLoading((state) => !state);\r\n fetchCompanyInvitationList(userId, PAGE_SIZE, queryOffset, fetchPolicy);\r\n },\r\n [userId, queryOffset],\r\n );\r\n useEffect(() => {\r\n if (!userId) {\r\n return;\r\n }\r\n fetchCompanyInvitations();\r\n // eslint-disable-next-line\r\n }, [userId]);\r\n const handlePageChange = useCallback(\r\n (value) => {\r\n setPage(value);\r\n setLoading((state) => !state);\r\n fetchCompanyInvitationList(userId, PAGE_SIZE, (value - 1) * PAGE_SIZE, 'no-cache');\r\n },\r\n [userId],\r\n );\r\n\r\n const closeModal = useCallback(() => {\r\n setModal(false);\r\n }, []);\r\n\r\n const refetch = fetchCompanyInvitations;\r\n\r\n if (loadingUser) {\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Company Invitations\r\n setModal((modal) => !modal)}\r\n text=\"Create Invitation\"\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default CompanyInvitationsView;\r\n","export const TABLE_COLUMNS = [{ name: 'Name' }, { name: 'Campaigns' }];\n\nexport const VENDOR = {\n name: '',\n};\n","import { Table, styled } from '@8base/boost';\n\nexport const StyledHeaderCell = styled(Table.HeaderCell)`\n padding-left: 16px !important;\n padding-right: 6px !important;\n`;\n\nexport const StyledTableBody = styled(Table.Body)`\n max-height: 50vh;\n\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\nexport const StyledCell = styled(Table.BodyCell)`\n padding: 8px 16px !important;\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Form, InputField, Grid } from '@8base/boost';\n\n/**\n * Vendor form\n *\n * @param {object} props component props\n * @param {object} props.vendor data\n * @param {Function} props.onChangeInput handle for onChange input\n * @param {Function} props.onSubmit handle on submit\n * @returns {React.ReactElement} component\n */\nconst VendorForm = ({ vendor, onChangeInput, onSubmit }) => {\n return (\n {\n event.preventDefault();\n onSubmit();\n }}>\n \n \n \n onChangeInput('name', value),\n }}\n />\n \n \n \n \n );\n};\n\nVendorForm.propTypes = {\n vendor: PropTypes.object.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n onSubmit: PropTypes.func.isRequired,\n};\n\nexport default VendorForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport DialogForm from '../../../shared/components/dialog/DialogForm';\nimport VendorForm from './VendorForm';\n\nconst VendorFormDialog = ({\n vendor,\n isOpen,\n isUpdate,\n loading,\n onSubmit,\n campaigns,\n onChangeInput,\n onCloseDialog,\n}) => {\n return (\n \n \n \n );\n};\n\nVendorFormDialog.propTypes = {\n isOpen: PropTypes.bool.isRequired,\n isUpdate: PropTypes.bool.isRequired,\n loading: PropTypes.bool.isRequired,\n onSubmit: PropTypes.func.isRequired,\n vendor: PropTypes.object.isRequired,\n campaigns: PropTypes.array.isRequired,\n onChangeInput: PropTypes.func.isRequired,\n onCloseDialog: PropTypes.func.isRequired,\n};\n\nexport default VendorFormDialog;\n","/**\n * Map for the form fields.\n *\n * @param {object} vendor data\n * @returns {object} vendor mapped\n */\nexport const vendorMap = (vendor) => {\n return {\n ...vendor,\n campaigns: vendor.vendorCampaignRelation.items.map((campaign) => ({\n value: campaign.id,\n label: campaign.name,\n })),\n };\n};\n\n/**\n * Map for table\n *\n * @param {Array} vendors data\n * @returns {Array} mapped vendors\n */\nexport const vendorsMap = (vendors) => {\n return vendors.map((vendor) => ({\n id: vendor.id,\n name: vendor.name,\n campaigns: vendor.vendorCampaignRelation.count,\n }));\n};\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { Paper, Grid, Row, styled, Table } from '@8base/boost';\nimport { SearchInput, Loader, TextEllipsis } from 'shared/components';\nimport { useSubscription as useSimpleSubscription } from '@cobuildlab/react-simple-state';\nimport { onChangeDataHookMixin, onErrorMixinFC } from '../../shared/mixins';\nimport { TABLE_COLUMNS, VENDOR } from './vendors-model';\nimport { fetchVendors, createVendor, updateVendor, deleteVendor } from './vendors-actions';\nimport { IconTrash, IconUpdate } from '../../shared/components/ui/Icons';\nimport {\n StyledHeaderCell,\n StyledTableBody,\n StyledCell,\n} from '../../shared/components/tables/CustomTable';\nimport VendorFormDialog from './components/VendorFormDialog';\nimport * as R from 'ramda';\nimport withSession from '../../shared/hoc/withSession';\nimport { vendorMap, vendorsMap } from './vendors-utils';\nimport YesNoDialog from '../../shared/components/YesNoDialog';\nimport { CreateButton } from 'shared/components';\nimport { Box } from '../../shared/components/Box';\nimport {\n OnVendorCreateEvent,\n OnVendorDeleteEvent,\n OnVendorsError,\n OnVendorsEvent,\n OnVendorUpdateEvent,\n} from './vendors-events';\n\nconst StyledLayout = styled(Grid.Layout)`\n padding: 16px;\n`;\n\n/**\n * Vendors view\n *\n * @param {object} props components props\n * @param {string} props.activeAgencyId active agency ID\n *\n * @returns {React.FC} The react component\n */\nconst VendorsView = ({ activeAgencyId }) => {\n const [filters, setFilters] = useState({ search: '', agency: activeAgencyId });\n const [loading, setLoading] = useState(false);\n const [loadingForm, setLoadingForm] = useState(false);\n const [vendors, setVendors] = useState([]);\n const [isOpenForm, setIsOpenForm] = useState(false);\n const [isUpdateForm, setIsUpdateForm] = useState(false);\n const [vendor, setVendor] = useState(R.clone(VENDOR));\n const [isOpenDelete, setIsOpenDelete] = useState(false);\n const handleOnClickBtnSearch = () => {\n setLoading(true);\n fetchVendors(filters);\n };\n const handleOnSubmitForm = () => {\n setLoadingForm(true);\n\n if (isUpdateForm) {\n updateVendor({\n id: vendor.id,\n name: vendor.name,\n });\n } else {\n createVendor(vendor);\n }\n };\n const handleOnChangeInput = (key, value) => {\n onChangeDataHookMixin(vendor, setVendor, key, value);\n };\n const handleOnYesDelete = () => {\n setLoading(true);\n setIsOpenDelete(false);\n deleteVendor(vendor.id);\n };\n const handleOnNoDelete = () => {\n setVendor(R.clone(VENDOR));\n setIsOpenDelete(false);\n };\n const handleVendorEvent = () => {\n setIsOpenForm(false);\n setLoadingForm(false);\n setLoading(true);\n fetchVendors(filters);\n setVendor(R.clone(VENDOR));\n };\n const columnsSize = '45% 45% 10%';\n const ignoreColumns = ['id'];\n\n useEffect(() => {\n setLoading(true);\n fetchVendors(filters);\n }, []);\n\n useSimpleSubscription(OnVendorsEvent, (data) => {\n if (data) {\n setLoading(false);\n setVendors(data.vendorsList.items);\n }\n });\n\n useSimpleSubscription(OnVendorsError, (e) => {\n if (e) {\n setLoading(false);\n setLoadingForm(false);\n onErrorMixinFC(e);\n }\n });\n\n useSimpleSubscription(OnVendorCreateEvent, (data) => {\n if (data) handleVendorEvent();\n });\n\n useSimpleSubscription(OnVendorUpdateEvent, (data) => {\n if (data) {\n handleVendorEvent();\n setIsUpdateForm(false);\n }\n });\n\n useSimpleSubscription(OnVendorDeleteEvent, () => {\n fetchVendors(filters);\n setVendor(R.clone(VENDOR));\n });\n\n return (\n \n \n \n \n onChangeDataHookMixin(filters, setFilters, 'search', value)}\n placeholder=\"Search Vendors\"\n />\n \n \n setIsOpenForm(true)}\n text=\"Create Vendor\"\n />\n
\n \n \n \n {TABLE_COLUMNS.map((column, index) => {\n return {column.name};\n })}\n Actions\n \n {loading ? (\n \n ) : (\n \n {(row, index) => (\n \n {Object.keys(row)\n .filter((key) => ignoreColumns.indexOf(key) === -1)\n .map((key, index) => {\n if (\n TABLE_COLUMNS[index] &&\n TABLE_COLUMNS[index].customBodyRender !== undefined\n ) {\n const { customBodyRender } = TABLE_COLUMNS[index];\n const CustomCellValue = customBodyRender(row, row[key]);\n\n return (\n \n \n \n );\n }\n\n return (\n \n {row[key]}\n \n );\n })}\n \n {\n setIsUpdateForm(true);\n setIsOpenForm(true);\n setVendor(vendorMap(vendors[index]));\n }}\n />\n {\n setVendor(row);\n setIsOpenDelete(true);\n }}\n />\n
\n \n )}\n \n )}\n
\n {\n setIsOpenForm(false);\n setIsUpdateForm(false);\n setVendor(R.clone(VENDOR));\n }}\n />\n \n \n \n );\n};\n\nVendorsView.propTypes = {\n activeAgencyId: PropTypes.string.isRequired,\n};\n\nexport default withSession(VendorsView);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport StyledBadge from '../../../../shared/components/ui/StyledBadge';\n\n/**\n * @param {object} props Props\n * @param {boolean} props.status status boolean\n * @returns {object} react component\n */\nexport function PhoneStatus({ status }) {\n const priority = status ? 1 : 4;\n const text = status ? 'ACTIVE' : 'INACTIVE';\n\n return {text};\n}\nPhoneStatus.propTypes = {\n status: PropTypes.bool.isRequired,\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Dialog, Button, Paragraph } from '@8base/boost';\nimport { deletePhoneNumber } from '../phone-numbers-actions';\n\n/**\n * @param {object} props Props\n * @param {boolean} props.isOpen To show or not\n * @param {Function} props.close Close callback\n * @param {string} props.id Id to delete\n * @returns {object} React componet\n *\n */\nfunction DeleteNumberModal({ isOpen, close, id }) {\n const [loading, setLoading] = useState(false);\n return (\n \n );\n}\n\nDeleteNumberModal.propTypes = {\n isOpen: PropTypes.bool.isRequired,\n close: PropTypes.func.isRequired,\n id: PropTypes.string.isRequired,\n};\n\nexport default DeleteNumberModal;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, Icon, Loader } from '@8base/boost';\nimport styled from 'styled-components';\nimport { updatePhoneNumber } from '../phone-numbers-actions';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { OnPhoneNumberUpdateError, OnPhoneNumberUpdateEvent } from '../phone-numbers-events';\n\nconst Span = styled.span`\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: 20px;\n`;\n/**\n *\n * @typedef {object} PhoneNumber\n * @property {{code:string,number:string}} number\n * @property {number} priority\n * @property {string} id\n */\n/**\n * @param {object} props Props\n * @param {PhoneNumber} props.number Props\n * @returns {object} React Component\n */\nfunction PhoneNumberPriority({ number }) {\n const [loading, setLoading] = useState(false);\n const { priority, id, number: phoneNumber } = number;\n const canBeUp = priority > 1;\n const canBeDown = priority < 10;\n const priorityUp = priority - 1;\n const priorityDown = priority + 1;\n\n useEventSubscription(OnPhoneNumberUpdateEvent, () => {\n setLoading(false);\n });\n useEventSubscription(OnPhoneNumberUpdateError, () => {\n setLoading(false);\n });\n if (loading) {\n return ;\n }\n return (\n <>\n {canBeDown ? (\n {\n setLoading(true);\n updatePhoneNumber(id, {\n priority: priorityDown,\n number: phoneNumber,\n });\n }}>\n \n \n ) : (\n \n )}\n {priority}\n {canBeUp ? (\n {\n setLoading(true);\n updatePhoneNumber(number.id, {\n priority: priorityUp,\n number: phoneNumber,\n });\n }}>\n \n \n ) : (\n \n )}\n \n );\n}\n\nPhoneNumberPriority.propTypes = {\n number: PropTypes.object.isRequired,\n};\n\nexport default PhoneNumberPriority;\n","import React, { useState, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { Pagination, Table, Dropdown, Icon, Menu } from '@8base/boost';\nimport { usePhoneNumbersList } from '../phone-numbers-hooks';\nimport { formatPhoneNumber } from '../../../phone-calls/phone-calls-utils';\nimport { PhoneStatus } from './PhoneStatus';\nimport { TableBody, PaginationWrapper } from '../../components/Card';\nimport styled from 'styled-components';\nimport { updatePhoneNumber } from '../phone-numbers-actions';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport * as toast from 'shared/components/toast/Toast';\nimport DeleteNumberModal from './DeleteNumberModal';\nimport PhoneNumberPriority from './PhoneNumberPriority';\nimport {\n OnPhoneNumberDeleteError,\n OnPhoneNumberDeleteEvent,\n OnPhoneNumberUpdateError,\n OnPhoneNumberUpdateEvent,\n OnPurchasedPhoneNumbersEvent,\n} from '../phone-numbers-events';\nconst tableColumns = '80px minmax(150px,1fr) minmax(250px,1fr) minmax(150px,1fr) minmax(150px,1fr)';\nconst PAGE_SIZE = 10;\n\nconst BodyCell = styled(Table.BodyCell)`\n justify-content: center !important;\n`;\nconst HeaderCell = styled(Table.HeaderCell)`\n justify-content: center !important;\n`;\n/**\n * @param {object} props Props\n * @param {string} props.agency Agency id\n * @returns {object} React Component\n */\nfunction PhoneNumbersList({ agency }) {\n const [page, setPage] = useState(1);\n const [deleteModal, setDeleteModal] = useState('');\n const queryOffset = (page - 1) * PAGE_SIZE;\n const [menuOpen, setMenuOpen] = useState('');\n const [numbers, loading, total, refetch] = usePhoneNumbersList(agency, PAGE_SIZE, queryOffset);\n\n // to pass up in the tree the refecth function so the list can be updated when an phone number is added\n\n const openMenu = useCallback((itemId) => {\n setMenuOpen((id) => (id === itemId ? '' : itemId));\n }, []);\n\n const closeDeleteModal = useCallback(() => {\n setDeleteModal('');\n }, []);\n\n useEventSubscription(OnPurchasedPhoneNumbersEvent, (numbers) => {\n refetch();\n });\n useEventSubscription(OnPhoneNumberUpdateEvent, () => {\n toast.success('Updated successfully');\n refetch();\n });\n useEventSubscription(OnPhoneNumberUpdateError, (e) => {\n toast.error(`Failed to update ${JSON.stringify(e)}`);\n });\n\n useEventSubscription(OnPhoneNumberDeleteEvent, () => {\n toast.success('Delete successfully');\n refetch();\n closeDeleteModal();\n });\n\n useEventSubscription(OnPhoneNumberDeleteError, (e) => {\n toast.error(`Failed to delete ${JSON.stringify(e)}`);\n closeDeleteModal();\n });\n\n const shouldShowDeleteModal = deleteModal !== '';\n\n return (\n <>\n \n \n #\n Number\n Status\n Priority\n Actions\n \n \n {(item, i) => (\n \n {i + 1 + queryOffset}\n {formatPhoneNumber(`${item.number.code}${item.number.number}`)}\n \n \n \n \n \n \n \n openMenu(item.id)}>\n \n \n \n \n \n \n \n \n \n )}\n \n \n \n \n \n \n
\n {shouldShowDeleteModal && (\n \n )}\n \n );\n}\n\nPhoneNumbersList.defaultProps = {\n setRefetch: () => null,\n};\nPhoneNumbersList.propTypes = {\n agency: PropTypes.string.isRequired,\n};\n\nexport default PhoneNumbersList;\n","import { useState, useEffect, useCallback } from 'react';\nimport { fetchPhoneNumbersList, fetchTwilioPhoneNumbersList } from './phone-numbers-actions';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport * as toast from 'shared/components/toast/Toast';\nimport { fetchSession } from '../../auth/auth.actions';\nimport {\n OnPhoneNumbersListError,\n OnPhoneNumbersListEvent,\n OnTwilioPhonenumbersListError,\n OnTwilioPhonenumbersListEvent,\n} from './phone-numbers-events';\n\n/**\n * @typedef {object} PhoneNumber\n * @property {object.<{number:string,code:string}>} number Phone number object with code and number properties\n * @property {number} priority priority of the phone number\n * @property {boolean} status status active/inactive\n * @property {string} id Id of the phone\n */\n/**\n * @typedef {[Array., boolean,number]} HookState array\n * @param {string} agency Agency Id\n * @param {number} pageSize Page size\n * @param {number} queryOffset Offset\n * @returns {HookState} Hook array\n */\nexport function usePhoneNumbersList(agency, pageSize, queryOffset) {\n const [numbers, setNumbers] = useState([]);\n const [count, setCount] = useState(0);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n if (!agency) {\n return;\n }\n fetchPhoneNumbersList(agency, pageSize, queryOffset);\n }, [agency, pageSize, queryOffset]);\n const refetch = useCallback(\n (fetchPolicy = 'network-only') => {\n fetchPhoneNumbersList(agency, pageSize, queryOffset, fetchPolicy);\n fetchSession();\n },\n [agency, pageSize, queryOffset],\n );\n useEventSubscription(OnPhoneNumbersListEvent, (data) => {\n const {\n phoneNumbersList: { items, count },\n } = data;\n setLoading(false);\n setCount(count);\n setNumbers(items);\n });\n useEventSubscription(OnPhoneNumbersListError, (data) => {\n toast.error(JSON.stringify(data));\n setLoading(false);\n });\n return [numbers, loading, count, refetch];\n}\n/**\n * @typedef {object} TwilioPhoneNumber\n * @property {string} friendlyName Formated phone number (555) 555-5555\n * @property {string} phoneNumber Phone number +15555555555\n * @property {string} region Phone region NJ\n */\n/**\n * @typedef {[Array., boolean,Function]} TwilioHookState array\n * @returns {TwilioHookState} Hook state\n */\nexport function useTwilioPhoneNumbersList(type) {\n const [{ numbers, loading }, setState] = useState({\n numbers: [],\n loading: true,\n });\n\n useEffect(() => {\n console.log('FROM useTwilioPhoneNumbersList', type);\n setState((state) => ({ ...state, loading: true }));\n fetchTwilioPhoneNumbersList(null, type);\n }, [type]);\n\n const refetch = useCallback(\n (search) => {\n setState((state) => ({ ...state, loading: true }));\n fetchTwilioPhoneNumbersList(search, type);\n },\n [type],\n );\n\n useEventSubscription(OnTwilioPhonenumbersListEvent, (phoneNumbers) => {\n setState((state) => ({\n ...state,\n loading: false,\n numbers: phoneNumbers,\n }));\n });\n\n useEventSubscription(OnTwilioPhonenumbersListError, () => {\n toast.error('Error loading phone numbers');\n setState((state) => ({ ...state, loading: false }));\n });\n return [numbers, loading, refetch];\n}\n","import React, { useState, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, InputField, Row } from '@8base/boost';\n\n/**\n * @param {object} props Props\n * @returns {object} React component\n */\nfunction SearchBarNumbers({ search: searchAction }) {\n const [search, setSearch] = useState('');\n const handleSearchChange = useCallback(({ target }) => {\n const { value } = target;\n setSearch(value);\n }, []);\n\n return (\n \n \n \n
\n );\n}\n\nSearchBarNumbers.propTypes = {\n search: PropTypes.func.isRequired,\n};\n\nexport default SearchBarNumbers;\n","import React, { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport { Table, Checkbox } from '@8base/boost';\nimport { ALL_PHONE_NUMBERS } from '../phone-numbers-model';\n\n/**\n * @param {object} props props\n * @param {Function} props.handleChange Handle change\n * @param {Array} props.numbers Numbers array\n * @param {Array} props.selectedNumbers Selacted Numbers array\n * @param {boolean} props.loading Loading state\n * @returns {object} React component\n */\nfunction AvailablePhoneNumberList({ handleChange, numbers, selectedNumbers, loading }) {\n const allSelected = selectedNumbers.length === numbers.length && !loading;\n return (\n \n \n \n handleChange(value, ALL_PHONE_NUMBERS)}\n />\n \n Number\n Friendly Number\n Region\n \n\n \n {(item, i) => (\n \n \n handleChange(value, item.phoneNumber)}\n checked={selectedNumbers.includes(item.phoneNumber)}\n />\n \n {item.phoneNumber}\n {item.friendlyName}\n {item.region}\n \n )}\n \n
\n );\n}\nAvailablePhoneNumberList.propTypes = {\n handleChange: PropTypes.func.isRequired,\n numbers: PropTypes.arrayOf(PropTypes.object).isRequired,\n selectedNumbers: PropTypes.arrayOf(PropTypes.string).isRequired,\n loading: PropTypes.bool.isRequired,\n};\nexport default memo(AvailablePhoneNumberList);\n","export const ALL_PHONE_NUMBERS = 'ALL';\n","import gql from 'graphql-tag';\n\nexport const SubscriptionPlanItemFragment = gql`\n fragment SubscriptionPlanItemFragment on SubscriptionPlanItem {\n id\n name\n price\n initialQuantity\n stripePriceId\n description\n }\n`;\n\nexport const FETCH_SUBSCRIPTION_PLAN_ITEMS = gql`\n query FetchSubscriptionPlanItems(\n $filter: SubscriptionPlanItemFilter\n $first: Int\n $skip: Int\n $orderBy: [SubscriptionPlanItemOrderBy]\n ) {\n subscriptionPlanItemsList(filter: $filter, first: $first, skip: $skip, orderBy: $orderBy) {\n items {\n ...SubscriptionPlanItemFragment\n }\n }\n }\n ${SubscriptionPlanItemFragment}\n`;\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnSubItemFetchByName = createEvent();\n\nexport const OnSubItemFetchByNameError = createEvent();\n","import { FETCH_SUBSCRIPTION_PLAN_ITEMS } from './subscription-plan-item-queries';\nimport { OnSubItemFetchByName, OnSubItemFetchByNameError } from './subscription-plan-item-events';\nimport { OnApolloClient } from '../../../shared/session/session-events';\nimport { error, log } from '@cobuildlab/pure-logger';\n\n/**\n * Fetches a subscription item by its name\n *\n * @param {string} name - The subscription item name to search\n *\n * @returns {Promise} The request result\n */\nexport const fetchSubscriptionItemByName = async (name) => {\n const client = OnApolloClient.get();\n const first = 1;\n const skip = 0;\n const filter = { name: { equals: name } };\n let response = null;\n\n try {\n response = await client.query({\n query: FETCH_SUBSCRIPTION_PLAN_ITEMS,\n variables: { first, skip, filter },\n fetchPolicy: 'network-only',\n });\n } catch (e) {\n error('fetchSubscriptionItemByName', e);\n\n return OnSubItemFetchByNameError.dispatch(e);\n }\n\n log('fetchSubscriptionItemByName', response.data);\n\n return OnSubItemFetchByName.dispatch(response.data);\n};\n","export const SUBSCRIPTION_ITEMS = {\n PHONE_NUMBER: 'Phone Number',\n};\n","import React, { useCallback, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, Row, Modal, Card, Icon } from '@8base/boost';\nimport { useTwilioPhoneNumbersList } from '../phone-numbers-hooks';\nimport { ALL_PHONE_NUMBERS } from '../phone-numbers-model';\nimport SearchBarNumbers from './SearchBarNumbers';\nimport AvailablePhoneNumberList from './AvailablePhoneNumberList';\nimport { parsePhoneNumber, getPhoneNumbersString } from '../phone-numbers-utils';\nimport { purchasePhoneNumbers } from '../phone-numbers-actions';\nimport { useSubscriptionItem } from '../../../subscription-plan/subscription-plan-item/subscription-plan-item-hooks';\nimport { SUBSCRIPTION_ITEMS } from '../../../subscription-plan/subscription-plan-item/subscription-plan-item-model';\nimport * as toast from 'shared/components/toast/Toast';\nimport { onErrorMixinFC } from '../../../../shared/mixins';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { Header, CardTitle } from '../../components/Card';\nimport styled from 'styled-components';\nimport {\n OnPurchasedPhoneNumbersError,\n OnPurchasedPhoneNumbersEvent,\n} from '../phone-numbers-events';\nimport { OnApolloClient } from 'shared/session/session-events';\nimport gql from 'graphql-tag';\n\nconst { PHONE_NUMBER } = SUBSCRIPTION_ITEMS;\n\nconst Body = styled(Card.Body)`\n max-height: 60vh;\n`;\n\nconst AGENCY_STATUS_QUERY = gql`\n query agency_status($id: ID) {\n agency(id: $id) {\n twilioBusinessType\n }\n }\n`;\n/**\n * @param {object} props Props\n * @param {Function} props.close Function to close the modal\n * @param {boolean} props.isOpen Boolean to show or hide the modal\n * @returns {object} React component\n */\nfunction AddPhoneNumbers({ close, isOpen, user, agency, company }) {\n const [selectedNumbers, setSelectedNumbers] = useState([]);\n const [purchasing, setPurchasing] = useState(false);\n const { item, loading: loadingItem, error } = useSubscriptionItem(PHONE_NUMBER);\n const [phoneType, setPhoneType] = useState('Local');\n const [numbers, loading, search] = useTwilioPhoneNumbersList(phoneType);\n\n const changePhoneType = (type) => {\n console.log('PHONE TYPE CHANGED');\n if (type === 'Toll-Free') {\n setPhoneType('Toll-Free');\n } else {\n setPhoneType('Local');\n }\n };\n\n useEffect(() => {\n console.log('phoneType', phoneType);\n }, [phoneType]);\n\n useEffect(() => {\n if (error) {\n onErrorMixinFC(error);\n }\n }, [error]);\n\n const handlePhonesChange = useCallback(\n (value, number) => {\n if (number === ALL_PHONE_NUMBERS) {\n if (value) {\n const allNumbers = numbers.map((item) => item.phoneNumber);\n setSelectedNumbers(allNumbers);\n } else {\n setSelectedNumbers([]);\n }\n } else {\n if (value) {\n setSelectedNumbers((currentNumbers) => [...currentNumbers, number]);\n } else {\n // filter the current array to remove the selected number\n setSelectedNumbers((currentNumbers) => currentNumbers.filter((num) => num !== number));\n }\n }\n },\n [numbers],\n );\n const purchase = useCallback(() => {\n const parsedNumbers = selectedNumbers.map((item) => parsePhoneNumber(item));\n\n setPurchasing(true);\n purchasePhoneNumbers({ user, agency, company, item: item.id }, parsedNumbers);\n }, [selectedNumbers, user, agency, company, item]);\n\n useEventSubscription(OnPurchasedPhoneNumbersEvent, (numbers) => {\n const string = getPhoneNumbersString(numbers);\n\n toast.success(`The numbers ${string} were purchased successfully`);\n\n setPurchasing(false);\n close();\n });\n useEventSubscription(OnPurchasedPhoneNumbersError, (error) => {\n if (Array.isArray(error)) {\n const string = getPhoneNumbersString(error);\n\n toast.error(`The numbers ${string} are not available anymore`);\n } else {\n onErrorMixinFC(error);\n }\n\n setPurchasing(false);\n });\n\n return (\n <>\n \n \n \n Phone Numbers\n \n \n \n \n \n changePhoneType('Local')}>\n Local Phone Numbers\n \n changePhoneType('Toll-Free')}>\n Toll-Free Phone Numbers\n \n
\n \n \n
\n \n \n \n \n \n
\n \n \n \n \n );\n}\n\nAddPhoneNumbers.propTypes = {\n close: PropTypes.func.isRequired,\n isOpen: PropTypes.bool.isRequired,\n user: PropTypes.string.isRequired,\n agency: PropTypes.string.isRequired,\n company: PropTypes.string.isRequired,\n};\n\nexport default AddPhoneNumbers;\n","import { useState, useEffect } from 'react';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { fetchSubscriptionItemByName } from './subscription-plan-item-actions';\nimport { OnSubItemFetchByName, OnSubItemFetchByNameError } from './subscription-plan-item-events';\n\n/**\n * Hook that returns the subscription item by its name\n *\n * @param {string} itemName - The item name\n *\n * @returns {object} The hook state\n */\nexport function useSubscriptionItem(itemName) {\n const [name, setName] = useState(itemName);\n const [state, setState] = useState({\n item: null,\n loading: true,\n error: null,\n setName,\n });\n\n useEffect(() => {\n setState((state) => ({\n ...state,\n loading: true,\n }));\n\n fetchSubscriptionItemByName(name);\n }, [name]);\n\n useSubscription(\n OnSubItemFetchByName,\n ({ subscriptionPlanItemsList }) => {\n const [item] = subscriptionPlanItemsList.items;\n\n setState((state) => ({\n ...state,\n item: item,\n loading: false,\n error: null,\n }));\n },\n [],\n );\n\n useSubscription(\n OnSubItemFetchByNameError,\n (e) => {\n setState((state) => ({\n ...state,\n item: null,\n loading: false,\n error: e,\n }));\n },\n [],\n );\n\n return state;\n}\n","import React, { useState, useCallback } from 'react';\nimport { Card, Row } from '@8base/boost';\nimport { Body } from '../components/Card';\nimport { useUser } from '../../../shared/hooks/useUser';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport PhoneNumbersList from './components/PhoneNumbersList';\nimport AddPhoneNumbers from './components/AddPhoneNumbers';\nimport { CreateButton } from 'shared/components';\nimport { Box } from '../../../shared/components/Box';\n\n/**\n * View of the phone numbers management in settings\n *\n * @returns {object} Phone numbers view component\n */\nexport default function PhoneNumberView() {\n const [showModal, setShowModal] = useState(false);\n const agency = useAgency();\n const [user] = useUser();\n\n const closeModal = useCallback(() => {\n setShowModal(false);\n }, []);\n\n const openModal = useCallback(() => {\n setShowModal(true);\n }, []);\n\n return (\n \n \n \n \n \n
\n \n \n \n \n {showModal && (\n \n )}\n \n \n );\n}\n","import { ValidationError } from '../../../shared/errors';\nimport { isValidString } from '../../../shared/validators';\n\nexport const updateUserSignatureValidator = (data) => {\n let errorMessages = [];\n if (data.isEnableSignature && !isValidString(data.signature)) {\n errorMessages.push('Signature can not be empty.');\n }\n if (data.signature.length > 2000) {\n errorMessages.push('Very long Signature');\n }\n\n if (errorMessages.length !== 0) throw new ValidationError(errorMessages);\n};\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnUserSignatureUpdateEvent = createEvent();\n\nexport const OnUserSignatureUpdateError = createEvent();\n\nexport const OnTestConnectEvent = createEvent();\n\nexport const OnTestConnectError = createEvent();\n","import { error, log } from '@cobuildlab/pure-logger';\nimport { UPDATE_USER } from '../../auth/queries';\nimport { OnApolloClient, OnSessionFetch } from '../../../shared/session/session-events';\nimport { updateUserSignatureValidator } from './email-validators';\nimport {\n OnTestConnectError,\n OnTestConnectEvent,\n OnUserSignatureUpdateError,\n OnUserSignatureUpdateEvent,\n} from './email-events';\n\n/**\n * Update user signature\n *\n * @param {object} data - the fields to update the user signature\n */\nexport const updateUserSignature = async (data) => {\n const client = OnApolloClient.get();\n const user = OnSessionFetch.get().user;\n data.id = user.id;\n let response;\n\n try {\n updateUserSignatureValidator(data);\n } catch (e) {\n error('updateUserSignature', e);\n console.log(e);\n return OnUserSignatureUpdateError.dispatch(e);\n }\n\n try {\n response = await client.mutate({\n mutation: UPDATE_USER,\n variables: { data },\n });\n } catch (e) {\n error('updateUserSignature', e);\n return OnUserSignatureUpdateError.dispatch(e);\n }\n\n log('updateUserSignature', response);\n OnUserSignatureUpdateEvent.dispatch(response.data);\n return response.data;\n};\n\n/**\n * Tests the connection with the give parameters\n *\n * @param {object} data - Data sent to the endpoint to test the connection\n * @param {string} type - The type of service to be tested\n *\n * @returns {Promise} The request result\n */\nexport const testConnection = async (data, type = 'inbound') => {\n let response = null;\n\n try {\n response = await fetch(\n `${process.env.REACT_APP_WORKSPACE_ENDPOINT}/webhook/email/test/${type}/connection`,\n {\n method: 'POST',\n body: JSON.stringify(data),\n },\n );\n } catch (e) {\n error('testConnection', e);\n\n return OnTestConnectError.dispatch(e);\n }\n\n if (response.status !== 200) {\n error('testConnection');\n\n return OnTestConnectError.dispatch();\n }\n\n log('testConnection');\n OnTestConnectEvent.dispatch();\n};\n","import React, { useState, useCallback } from 'react';\nimport { Button, Icon } from '@8base/boost';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { testConnection } from '../../my-account/email/email-actions';\nimport * as Toast from '../../../shared/components/toast/Toast';\nimport PropTypes from 'prop-types';\nimport { OnTestConnectError, OnTestConnectEvent } from 'modules/my-account/email/email-events';\n\n/**\n * Renders a button used to test SMTP, POP and IMAP connections\n *\n * @param {object} props - The compoment props\n * @param {object} props.data - The connection parameters\n * @param {string} props.type - Type of connection, either \"inbound\" or \"outbound\"\n *\n * @returns {React.FC} The component to render\n */\nfunction TestConnectionButton({ data, type, disabled }) {\n const [loading, setLoading] = useState();\n const [color, setColor] = useState('neutral');\n\n const handleClick = useCallback(() => {\n setLoading(true);\n setColor('neutral');\n\n testConnection(data, type);\n }, [data, type]);\n\n useEventSubscription(OnTestConnectEvent, () => {\n setLoading(false);\n setColor('success');\n\n setTimeout(() => setColor('neutral'), 5000);\n\n Toast.success('Success', `Connected successfully to client`);\n });\n\n useEventSubscription(OnTestConnectError, () => {\n setLoading(false);\n setColor('danger');\n\n setTimeout(() => setColor('neutral'), 5000);\n\n Toast.error(`The connection with the client failed`);\n });\n\n let text = 'Test Connection';\n\n if (color === 'success') {\n text = 'Success';\n } else if (color === 'danger') {\n text = 'Wrong Credentials';\n }\n\n return (\n \n );\n}\n\nTestConnectionButton.propTypes = {\n data: PropTypes.object.isRequired,\n type: PropTypes.string.isRequired,\n disabled: PropTypes.bool,\n};\n\nTestConnectionButton.defaultProps = {\n disabled: false,\n};\n\nexport default TestConnectionButton;\n","import gql from 'graphql-tag';\n\nexport const InboundFragment = gql`\n fragment InboundFragment on EmailInboundService {\n id\n description\n protocol\n server\n port\n connection\n username\n password\n active\n }\n`;\n\nexport const INBOUND_SERVICE_SETTINGS_QUERY = gql`\n query FetchInboundServiceSettings($first: Int, $filter: EmailInboundServiceFilter) {\n emailInboundServicesList(first: $first, filter: $filter) {\n items {\n ...InboundFragment\n }\n }\n }\n ${InboundFragment}\n`;\n\nexport const CREATE_INBOUND_SERVICE_MUTATION = gql`\n mutation CreateEmailInboundService($data: EmailInboundServiceCreateInput!) {\n emailInboundServiceCreate(data: $data) {\n ...InboundFragment\n }\n }\n ${InboundFragment}\n`;\n\nexport const UPDATE_INBOUND_SERVICE_MUTATION = gql`\n mutation UpdateEmailInboundService($data: EmailInboundServiceUpdateInput!) {\n emailInboundServiceUpdate(data: $data) {\n ...InboundFragment\n }\n }\n ${InboundFragment}\n`;\n\nexport const UPDATE_MANY_INBOUND_SERVICES = gql`\n mutation UpdateEmailInboundServices(\n $data: EmailInboundServiceUpdateByFilterInput!\n $filter: EmailInboundServiceFilter!\n ) {\n emailInboundServiceUpdateByFilter(data: $data, filter: $filter) {\n count\n }\n }\n`;\n","import gql from 'graphql-tag';\n\nexport const OutboundFragment = gql`\n fragment OutboundFragment on EmailOutboundService {\n id\n description\n server\n port\n connection\n username\n password\n active\n fallback\n }\n`;\n\nexport const QUERY_OUTBOUND_SERVICE_SETTINGS = gql`\n query FetchOutboundEmailServices($first: Int, $filter: EmailOutboundServiceFilter) {\n emailOutboundServicesList(first: $first, filter: $filter) {\n items {\n ...OutboundFragment\n }\n }\n }\n ${OutboundFragment}\n`;\n\nexport const CREATE_OUTBOUND_SERVICE_MUTATION = gql`\n mutation CreateOutboundEmailService($data: EmailOutboundServiceCreateInput!) {\n emailOutboundServiceCreate(data: $data) {\n ...OutboundFragment\n }\n }\n ${OutboundFragment}\n`;\n\nexport const DISABLE_EMAIL_SERVICES = gql`\n mutation DisableEmailServices($agency: ID!, $user: ID!) {\n emailOutboundServiceUpdateByFilter(\n filter: { user: { id: { equals: $user } }, agency: { id: { equals: $agency } } }\n data: { active: [{ set: false }] }\n ) {\n count\n }\n emailInboundServiceUpdateByFilter(\n filter: { user: { id: { equals: $user } }, agency: { id: { equals: $agency } } }\n data: { active: [{ set: false }] }\n ) {\n count\n }\n gmailServiceUpdateByFilter(\n filter: { user: { id: { equals: $user } }, agency: { id: { equals: $agency } } }\n data: { active: [{ set: false }] }\n ) {\n count\n }\n outlookServiceUpdateByFilter(\n filter: { user: { id: { equals: $user } }, agency: { id: { equals: $agency } } }\n data: { active: [{ set: false }] }\n ) {\n count\n }\n }\n`;\n\nexport const DISABLE_THIRD_PARTY_SERVICES = gql`\n mutation DisableThirdPartyServices($agency: ID!, $user: ID!) {\n gmailServiceUpdateByFilter(\n filter: { user: { id: { equals: $user } }, agency: { id: { equals: $agency } } }\n data: { active: [{ set: false }] }\n ) {\n count\n }\n outlookServiceUpdateByFilter(\n filter: { user: { id: { equals: $user } }, agency: { id: { equals: $agency } } }\n data: { active: [{ set: false }] }\n ) {\n count\n }\n }\n`;\n\nexport const UPDATE_OUTBOUND_SERVICE_MUTATION = gql`\n mutation UpdateOutboundEmailService($data: EmailOutboundServiceUpdateInput!) {\n emailOutboundServiceUpdate(data: $data) {\n ...OutboundFragment\n }\n }\n ${OutboundFragment}\n`;\n\nexport const UPDATE_MANY_OUTBOUND_SERVICES = gql`\n mutation UpdateOuboundEmailServices(\n $data: EmailOutboundServiceUpdateByFilterInput!\n $filter: EmailOutboundServiceFilter!\n ) {\n emailOutboundServiceUpdateByFilter(data: $data, filter: $filter) {\n count\n }\n }\n`;\n\nexport const FETCH_GMAIL_SERVICE = gql`\n query FetchGmailServices(\n $filter: GmailServiceFilter\n $first: Int\n $skip: Int\n $sort: [GmailServiceSort!]\n ) {\n gmailServicesList(filter: $filter, first: $first, skip: $skip, sort: $sort) {\n items {\n id\n active\n profile {\n id\n name\n email\n avatar\n }\n }\n }\n }\n`;\n\nexport const CREATE_GMAIL_SERVICE = gql`\n mutation CreateGmailService($data: GmailServiceCreateInput!) {\n gmailServiceCreate(data: $data) {\n id\n active\n profile {\n id\n name\n email\n avatar\n }\n }\n }\n`;\n\nexport const UPDATE_GMAIL_SERVICE = gql`\n mutation UpdateGmailSerivce(\n $filter: GmailServiceKeyFilter\n $data: GmailServiceUpdateInput!\n $force: Boolean\n ) {\n gmailServiceUpdate(filter: $filter, data: $data, force: $force) {\n id\n active\n profile {\n id\n name\n email\n avatar\n }\n }\n }\n`;\n\nexport const LOGOUT_FROM_GMAIL_SERVICE = gql`\n mutation LogoutFromGmailService($agency: ID!) {\n googleLogout(agency: $agency) {\n id\n active\n profile {\n id\n name\n email\n avatar\n }\n }\n }\n`;\n\nexport const FETCH_GOOGLE_AUTH_URL = gql`\n query FetchGoogleAuthUrl($agency: ID!, $from: AuthFrom!) {\n googleAuthUrl(agency: $agency, from: $from) {\n url\n }\n }\n`;\n\nexport const EXCHANGE_CODE_FOR_TOKENS = gql`\n mutation ExchangeGoogleCodeForToken($agency: ID!, $code: String!, $from: AuthFrom!) {\n googleExchangeTokens(agency: $agency, code: $code, from: $from) {\n id\n active\n name\n email\n avatar\n accessToken\n refreshToken\n }\n }\n`;\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnFetchInboundService = createEvent();\n\nexport const OnFetchInboundServiceError = createEvent();\n\nexport const OnUpdateInboundService = createEvent();\n\nexport const OnUpdateInboundServiceError = createEvent();\n\nexport const OnDisableInboundServices = createEvent();\n\nexport const OnDisableInboundServicesError = createEvent();\n","export const CONNECTION_SECURITY_OPTIONS = [\n {\n label: 'None',\n value: 'None',\n },\n {\n label: 'TLS',\n value: 'TLS',\n },\n];\n\nexport const PROTOCOL_OPTIONS = [\n {\n label: 'POP',\n value: 'POP',\n },\n {\n label: 'IMAP',\n value: 'IMAP',\n },\n];\n","import { ValidationError } from '../../../shared/errors';\nimport { isValidString, isValidInteger } from '../../../shared/validators';\nimport { CONNECTION_SECURITY_OPTIONS, PROTOCOL_OPTIONS } from './inbound-model';\n\n/**\n * Validates the input when creating a outbound service\n *\n * @param {object} service - The service object\n * @param {string} service.id - Indicates the identifier of the service to update\n * @param {boolean} service.active - Indicates if the current configuration is active\n * @param {number} service.priority - This email service priority\n * @param {string} service.server - The service smtp server\n * @param {number} service.port - The service smtp port\n * @param {string} service.connection - The service authentication option\n * @param {string} service.username - The authentication username\n * @param {string} service.password - The authentication password\n *\n * @returns {void}\n */\nexport const updateInboundServiceValidation = (service) => {\n const errors = [];\n\n if (!isValidString(service.id)) errors.push('The outbound service identifier is not correct');\n\n if (!service.active) {\n if (errors.length > 0) throw new ValidationError(errors);\n\n return;\n }\n\n if (!isValidString(service.server)) errors.push('The server must be a valid string');\n\n if (!isValidInteger(service.port)) errors.push('The port has to be an integer bigger than zero');\n\n if (CONNECTION_SECURITY_OPTIONS.every((con) => con.value !== service.connection))\n errors.push('The connection must be a valid option');\n\n if (PROTOCOL_OPTIONS.every((con) => con.value !== service.protocol))\n errors.push('The protocol must be a valid option');\n\n if (!isValidString(service.username)) errors.push('The username must be a valid string');\n\n if (!isValidString(service.password)) errors.push('The password must be a valid string');\n\n if (errors.length > 0) throw new ValidationError(errors);\n};\n","import { createAction } from '@cobuildlab/react-simple-state';\nimport {\n INBOUND_SERVICE_SETTINGS_QUERY,\n CREATE_INBOUND_SERVICE_MUTATION,\n UPDATE_INBOUND_SERVICE_MUTATION,\n UPDATE_MANY_INBOUND_SERVICES,\n} from './inbound-queries';\nimport {\n QUERY_OUTBOUND_SERVICE_SETTINGS,\n CREATE_OUTBOUND_SERVICE_MUTATION,\n DISABLE_THIRD_PARTY_SERVICES,\n} from '../outbound/outbound-queries';\nimport {\n OnFetchInboundService,\n OnFetchInboundServiceError,\n OnUpdateInboundService,\n OnUpdateInboundServiceError,\n OnDisableInboundServices,\n OnDisableInboundServicesError,\n} from './inbound-store';\nimport { updateInboundServiceValidation } from './inbound-validation';\nimport { OnApolloClient } from '../../../shared/session/session-events';\n\n/**\n * Fetches an inbound service binded to a agency\n *\n * @param {string} agencyId - The agency id\n * @param {string} userId - The user id\n *\n * @returns {Promise} The action result\n */\nexport const fetchInboundServices = createAction(\n OnFetchInboundService,\n OnFetchInboundServiceError,\n async (agencyId, userId) => {\n const client = OnApolloClient.get();\n const first = 1;\n const filter = {\n agency: { id: { equals: agencyId } },\n user: { id: { equals: userId } },\n };\n\n const {\n data: { emailInboundServicesList },\n } = await client.query({\n query: INBOUND_SERVICE_SETTINGS_QUERY,\n fetchPolicy: 'network-only',\n variables: {\n first,\n filter,\n },\n });\n\n const {\n data: { emailOutboundServicesList },\n } = await client.query({\n query: QUERY_OUTBOUND_SERVICE_SETTINGS,\n fetchPolicy: 'network-only',\n variables: {\n first,\n filter,\n },\n });\n\n let [inbound] = emailInboundServicesList.items;\n let [outbound] = emailOutboundServicesList.items;\n\n if (!outbound) {\n await client.mutate({\n mutation: CREATE_OUTBOUND_SERVICE_MUTATION,\n variables: {\n data: {\n description: 'Example connection configuration',\n server: 'smtp.example.com',\n port: 465,\n connection: 'None',\n active: false,\n agency: { connect: { id: agencyId } },\n user: { connect: { id: userId } },\n },\n },\n });\n }\n\n if (!inbound) {\n const {\n data: { emailInboundServiceCreate },\n } = await client.mutate({\n mutation: CREATE_INBOUND_SERVICE_MUTATION,\n variables: {\n data: {\n active: false,\n description: 'Example connection configuration',\n server: 'imap.example.com',\n protocol: 'IMAP',\n port: 993,\n connection: 'TLS',\n agency: { connect: { id: agencyId } },\n user: { connect: { id: userId } },\n },\n },\n });\n\n inbound = emailInboundServiceCreate;\n }\n\n return { emailInboundService: inbound };\n },\n);\n\n/**\n * Updates the email inbound service configuration\n *\n * @param {object} data - The inbound service object to update\n * @param {string} userId - The user id\n * @param {string} agencyId - The agency id\n *\n * @returns {Promise} - The action result\n */\nexport const updateInboundService = createAction(\n OnUpdateInboundService,\n OnUpdateInboundServiceError,\n async (data, userId, agencyId) => {\n const client = OnApolloClient.get();\n\n updateInboundServiceValidation(data);\n\n await client.mutate({\n mutation: DISABLE_THIRD_PARTY_SERVICES,\n variables: {\n user: userId,\n agency: agencyId,\n },\n });\n\n const response = await client.mutate({\n mutation: UPDATE_INBOUND_SERVICE_MUTATION,\n variables: { data },\n });\n\n return response.data;\n },\n);\n\n/**\n * Disable all inbound services\n *\n * @param {string} userId - The user id\n * @param {string} agencyId - The agency id\n *\n * @returns {Promise} The request result\n */\nexport const disableInboundServices = createAction(\n OnDisableInboundServices,\n OnDisableInboundServicesError,\n async (userId, agencyId) => {\n const client = OnApolloClient.get();\n\n await client.mutate({\n mutation: DISABLE_THIRD_PARTY_SERVICES,\n variables: {\n user: userId,\n agency: agencyId,\n },\n });\n\n await client.mutate({\n mutation: UPDATE_MANY_INBOUND_SERVICES,\n variables: {\n filter: {\n user: { id: { equals: userId } },\n agency: { id: { equals: agencyId } },\n },\n data: {\n active: [{ set: false }],\n },\n },\n });\n },\n);\n","import React, { useState, useEffect } from 'react';\nimport TestConnectionButton from '../../../email/components/TestConnectionButton';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { fetchInboundServices, updateInboundService } from '../inbound-actions';\nimport { PROTOCOL_OPTIONS, CONNECTION_SECURITY_OPTIONS } from '../inbound-model';\nimport { Box } from '../../../../shared/components/Box';\nimport {\n Card as BoostCard,\n Row as BoostRow,\n Grid,\n SelectField,\n Column,\n Form,\n Radio,\n InputField,\n Button,\n styled,\n} from '@8base/boost';\nimport {\n OnFetchInboundService,\n OnFetchInboundServiceError,\n OnUpdateInboundService,\n OnUpdateInboundServiceError,\n} from '../inbound-store';\nimport * as toast from '../../../../shared/components/toast/Toast';\nimport { onErrorMixinFC } from '../../../../shared/mixins';\nimport { useAgency } from '../../../../shared/hooks/useAgency';\nimport { useUser } from '../../../../shared/hooks/useUser';\nimport PropTypes from 'prop-types';\n\nconst Card = styled(BoostCard)`\n ${(props) => props.fullWidth && `width: 100%;`}\n`;\n\nconst Row = styled(BoostRow)`\n ${(props) => props.fullWidth && `width: 100%;`}\n`;\n\nconst initialForm = {\n id: null,\n active: false,\n description: '',\n protocol: 'POP',\n server: '',\n port: 0,\n connection: 'None',\n username: '',\n password: '',\n loading: false,\n};\n\nexport const InboundForm = ({ type, setType }) => {\n const [form, setForm] = useState(initialForm);\n const [loading, setLoading] = useState(true);\n const agency = useAgency();\n const [user] = useUser();\n\n useEffect(() => {\n setLoading(true);\n\n fetchInboundServices(agency.id, user.id);\n }, [agency.id, user.id]);\n\n useSubscription(\n OnFetchInboundService,\n ({ emailInboundService }) => {\n setLoading(false);\n\n setForm((prevState) => ({\n ...prevState,\n ...emailInboundService,\n }));\n\n if (emailInboundService.active) {\n setType('CUSTOM');\n }\n },\n [],\n );\n\n useSubscription(\n OnFetchInboundServiceError,\n (e) => {\n setLoading(false);\n\n onErrorMixinFC(e);\n },\n [],\n );\n\n useSubscription(\n OnUpdateInboundService,\n ({ emailInboundServiceUpdate }) => {\n setForm((prevState) => ({\n ...prevState,\n ...emailInboundServiceUpdate,\n }));\n\n setLoading(false);\n\n toast.success('Success', 'Email inbound service updated');\n },\n [],\n );\n\n useSubscription(\n OnUpdateInboundServiceError,\n (e) => {\n setLoading(false);\n\n onErrorMixinFC(e);\n },\n [],\n );\n\n const handleSubmit = () => {\n setLoading(true);\n\n updateInboundService(\n {\n id: form.id,\n active: true,\n description: form.description,\n protocol: form.protocol,\n server: form.server,\n port: form.port,\n connection: form.connection,\n username: form.username,\n password: form.password,\n },\n user.id,\n agency.id,\n );\n };\n\n const isCustom = type === 'CUSTOM';\n\n return (\n \n \n \n \n \n \n \n
\n \n \n );\n};\n\nInboundForm.propTypes = {\n type: PropTypes.string.isRequired,\n setType: PropTypes.func.isRequired,\n};\n","import gql from 'graphql-tag';\n\nexport const FETCH_OUTLOOK_SERVICES = gql`\n query FetchOurlookServices(\n $filter: OutlookServiceFilter\n $first: Int\n $skip: Int\n $sort: [OutlookServiceSort!]\n ) {\n outlookServicesList(filter: $filter, first: $first, skip: $skip, sort: $sort) {\n count\n items {\n id\n active\n profile {\n id\n name\n email\n }\n }\n }\n }\n`;\n\nexport const CREATE_OUTLOOK_SERVICE = gql`\n mutation CreateOulookService($data: OutlookServiceCreateInput!) {\n outlookServiceCreate(data: $data) {\n id\n active\n profile {\n id\n name\n email\n }\n }\n }\n`;\n\nexport const UPDATE_OUTLOOK_SERVICE = gql`\n mutation UpdateOutlookService(\n $data: OutlookServiceUpdateInput!\n $filter: OutlookServiceKeyFilter\n ) {\n outlookServiceUpdate(data: $data, filter: $filter) {\n id\n active\n profile {\n id\n name\n email\n }\n }\n }\n`;\n\nexport const FETCH_AZURE_AUTH_URL = gql`\n query FetchAzureAuthUrl($agency: ID!, $from: AuthFrom!) {\n azureAuthUrl(agency: $agency, from: $from) {\n url\n }\n }\n`;\n\nexport const EXCHANGE_CODE_FOR_TOKENS = gql`\n mutation ExchangeOutlookCodeForTokens($agency: ID!, $code: String!, $from: AuthFrom!) {\n azureExchangeTokens(agency: $agency, code: $code, from: $from) {\n id\n active\n profile {\n id\n name\n email\n }\n }\n }\n`;\n\nexport const LOGOUT_FROM_AZURE = gql`\n mutation LogoutFromAzure($agency: ID!) {\n azureLogout(agency: $agency) {\n id\n active\n profile {\n id\n name\n email\n }\n }\n }\n`;\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnAzureAuthUrl = createEvent();\n\nexport const OnAzureAuthUrlError = createEvent();\n\nexport const OnFetchOutlookService = createEvent();\n\nexport const OnFetchOutlookServiceError = createEvent();\n\nexport const OnEnableOutlookService = createEvent();\n\nexport const OnEnableOutlookServiceError = createEvent();\n\nexport const OnExchangeOutlookCode = createEvent();\n\nexport const OnExchangeOutlookCodeError = createEvent();\n\nexport const OnAzureLogout = createEvent();\n\nexport const OnAzureLogoutError = createEvent();\n","import { createAction } from '@cobuildlab/react-simple-state';\nimport {\n CREATE_OUTLOOK_SERVICE,\n FETCH_AZURE_AUTH_URL,\n FETCH_OUTLOOK_SERVICES,\n UPDATE_OUTLOOK_SERVICE,\n EXCHANGE_CODE_FOR_TOKENS,\n LOGOUT_FROM_AZURE,\n} from './azure-queries';\nimport { DISABLE_EMAIL_SERVICES } from '../settings/outbound/outbound-queries';\nimport {\n OnAzureAuthUrl,\n OnAzureAuthUrlError,\n OnFetchOutlookService,\n OnFetchOutlookServiceError,\n OnEnableOutlookService,\n OnEnableOutlookServiceError,\n OnExchangeOutlookCode,\n OnExchangeOutlookCodeError,\n OnAzureLogout,\n OnAzureLogoutError,\n} from './azure-events';\nimport { OnApolloClient } from '../../shared/session/session-events';\n\n/**\n * Fetches the user's outlook service in the\n * specified agency\n *\n * @param {string} user - The id of the user\n * @param {string} agency - The id of the agency\n *\n * @returns {Promise
\n);\n\nconst TeamView = (props) => {\n const [pagination, setPagination] = useState({ page: 1, total: 0 });\n const [isInviteModalOpen, setisInviteModalOpen] = useState(false);\n const agency = useAgency();\n const history = useHistory();\n\n useEffect(() => {\n const user = OnSessionFetch.get().user;\n const validUser = user?.userAdminRelation.count > 0;\n if (!validUser) {\n history.goBack();\n }\n }, [history]);\n\n useEventSubscription(OnUpdateUserAgencyRolesEvent, () => {\n if (pagination.page !== 1) {\n setPagination((state) => ({ ...state, page: 1 }));\n }\n });\n\n useEventSubscription(OnRemoveUserFromAgencyEvent, () => {\n if (pagination.page !== 1) {\n setPagination((state) => ({ ...state, page: 1 }));\n }\n });\n\n const handlePageChange = useCallback(\n (page) => setPagination((state) => ({ ...state, page })),\n [],\n );\n\n const handleTotalChange = useCallback(\n (total) => setPagination((state) => ({ ...state, total })),\n [],\n );\n\n return (\n \n \n \n setisInviteModalOpen(true)}\n text=\"Create Team Member\"\n />\n \n \n \n \n \n \n \n
\n \n setisInviteModalOpen(false)}\n agencyId={agency.id}\n agencyName={agency.name}\n />\n \n \n );\n};\n\nStatusTeam.propTypes = {\n dato: PropTypes.string.isRequired,\n color1: PropTypes.string.isRequired,\n color2: PropTypes.string.isRequired,\n};\n\nexport { TeamView };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport SettingsMenu from '../../settings/SettingsView';\nimport { Loader, Row } from '@8base/boost';\nimport { Margin } from '../../../shared/components';\n/**\n * Component that renders it's children with the layout of the settings\n *\n * @param {object} props Props\n * @param {object} props.children React element\n * @returns {object} React element\n */\nexport default function SettingsLayout({ children, loading }) {\n return (\n <>\n \n {loading ? (\n \n \n
\n ) : (\n \n {children}\n \n )}\n \n );\n}\nSettingsLayout.defaultProps = {\n loading: false,\n};\nSettingsLayout.propTypes = {\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n loading: PropTypes.bool,\n};\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnUpdateCompanySubscription = createEvent();\n\nexport const OnUpdateCompanySubscriptionError = createEvent();\n\nexport const OnConfirmSubscriptionChange = createEvent();\n\nexport const OnConfirmSubscriptionChangeError = createEvent();\n\nexport const OnCancelSubscriptionChange = createEvent();\n\nexport const OnCancelSubscriptionChangeError = createEvent();\n\nexport const OnFetchCompanySubscriptionPlanEvent = createEvent();\n\nexport const OnFetchCompanySubscriptionPlanError = createEvent();\n\nexport const OnFetchAvailableSubscriptionPlansEvent = createEvent();\n\nexport const OnFetchAvailableSubscriptionPlansError = createEvent();\n","import { isValidString, isValidInteger } from '@cobuildlab/validation-utils';\nimport { ValidationError } from '../../../../shared/errors';\n\n/**\n * Create payment method validator\n *\n * @param {object} data - The data to create the payment method\n *\n * @returns {void}\n */\nexport function updateCompanySubscriptionValidator(data) {\n const errors = [];\n\n if (!isValidString(data.companySubscriptionId)) {\n errors.push('The company should have a valid subscription plan already');\n }\n\n if (!isValidString(data.subscriptionPlanId)) {\n errors.push('The selected company should be a valid one');\n }\n\n if (!isValidInteger(data.numberOfSeats)) {\n errors.push('The number of seats should be a valid integer');\n }\n\n if (errors.length > 0) throw new ValidationError(errors);\n}\n","import { OnApolloClient } from '../../../../shared/session/session-events';\nimport { INVOICE_STATUS } from '@cobuildlab/lead-volt-share';\nimport { fetchPaymentIntentFromInvoice } from '../billing-actions';\nimport { voidInvoice } from '../billing-actions';\nimport { log, error } from '@cobuildlab/pure-logger';\nimport {\n FETCH_COMPANY_SUBSCRIPTION_PLAN,\n FETCH_COMPANY_SUBSCRIPTION_PLANS,\n FETCH_SUBSCRIPTION_PLANS,\n} from './subscription-plan-queries';\nimport {\n OnUpdateCompanySubscription,\n OnUpdateCompanySubscriptionError,\n OnConfirmSubscriptionChange,\n OnConfirmSubscriptionChangeError,\n OnCancelSubscriptionChange,\n OnCancelSubscriptionChangeError,\n OnFetchCompanySubscriptionPlanEvent,\n OnFetchCompanySubscriptionPlanError,\n OnFetchAvailableSubscriptionPlansEvent,\n OnFetchAvailableSubscriptionPlansError,\n} from './subscription-plan-events';\nimport { updateCompanySubscriptionValidator } from './subscription-plan-validators';\n\n/**\n * Fetches a subscription plan\n *\n * @param {string} id - The subscription plan id\n *\n * @returns {Promise} The request result\n */\nexport const fetchSubscriptionPlan = async (id) => {\n const client = OnApolloClient.get();\n let response = null;\n\n try {\n response = await client.query({\n query: FETCH_COMPANY_SUBSCRIPTION_PLAN,\n variables: { id },\n fetchPolicy: 'network-only',\n });\n } catch (e) {\n error('fetchSubscriptionPlan', e);\n\n return OnFetchCompanySubscriptionPlanError.dispatch(e);\n }\n\n log('fetchSubscriptionPlan', response.data);\n\n return OnFetchCompanySubscriptionPlanEvent.dispatch(response.data);\n};\n\n/**\n * Fetches the current company subscription plan\n *\n * @param {string} id - The company id\n *\n * @returns {Promise} The request result\n */\nexport const fetchCompanyCurrentSubscription = async (id) => {\n const client = OnApolloClient.get();\n const first = 1;\n const skip = 0;\n const orderBy = 'createdAt_DESC';\n const filter = { company: { id: { equals: id } } };\n let response = null;\n\n try {\n response = await client.query({\n query: FETCH_COMPANY_SUBSCRIPTION_PLANS,\n variables: { filter, first, skip, orderBy },\n fetchPolicy: 'network-only',\n });\n } catch (e) {\n error('fetchCompanyCurrentSubscription', e);\n\n return OnFetchCompanySubscriptionPlanError.dispatch(e);\n }\n\n log('fetchCompanyCurrentSubscription', response.data);\n\n return OnFetchCompanySubscriptionPlanEvent.dispatch(response.data);\n};\n\n/**\n * Updates a company subscription\n *\n * @param {object} data - The data object\n *\n * @returns {Promise} The request result\n */\nexport const updateCompanySubscription = async (data) => {\n let response = null;\n\n try {\n updateCompanySubscriptionValidator(data);\n } catch (e) {\n error('updateCompanySubscription', e);\n\n return OnUpdateCompanySubscriptionError.dispatch(e);\n }\n\n try {\n response = await fetch(\n `${process.env.REACT_APP_WORKSPACE_ENDPOINT}/webhook/change-subscription`,\n {\n method: 'post',\n body: JSON.stringify({\n ...data,\n }),\n },\n );\n } catch (e) {\n error('updateCompanySubscription', e);\n\n return OnUpdateCompanySubscriptionError.dispatch(e);\n }\n\n const result = await response.json();\n\n if (!response.ok) {\n const message = result.message ? result.message : 'Something happened, please try again';\n\n error('updateCompanySubscription', message);\n\n return OnUpdateCompanySubscriptionError.dispatch(new Error(message));\n }\n\n log('updateCompanySubscription', result);\n\n return OnUpdateCompanySubscription.dispatch(result);\n};\n\n/**\n * Confirms the subscription change in case it requires a payment method\n * or the card was declined\n *\n * @param {object} data - The data needed to confirm subscription payment\n * @param {object} stripe - The stripe object\n *\n * @returns {Promise} The request result\n */\nexport const confirmSubscriptionChange = async (data, stripe) => {\n const { invoice, paymentMethodId } = data;\n\n if (invoice.status === INVOICE_STATUS.OPEN) {\n let paymentIntent = null;\n\n try {\n paymentIntent = await fetchPaymentIntentFromInvoice(invoice.invoiceId);\n } catch (e) {\n error('confirmSubscriptionChange', e);\n\n return OnConfirmSubscriptionChangeError.dispatch(e);\n }\n\n if (\n paymentIntent.status === 'requires_action' ||\n paymentIntent.status === 'requires_payment_method'\n ) {\n let result = null;\n\n try {\n result = await stripe.confirmCardPayment(paymentIntent.client_secret, {\n payment_method: paymentMethodId,\n });\n } catch (e) {\n error('confirmSubscriptionChange', e);\n\n return OnConfirmSubscriptionChangeError.dispatch(e);\n }\n\n if (result.error) {\n return OnConfirmSubscriptionChangeError.dispatch(new Error(result.error.message));\n }\n\n return OnConfirmSubscriptionChange.dispatch(result);\n }\n\n if (paymentIntent.status === 'requires_payment_method') {\n return OnConfirmSubscriptionChangeError.dispatch(\n new Error(paymentIntent.last_payment_error.message),\n );\n }\n }\n};\n\n/**\n * Cancels the specified invoice that belongs to a\n * pending update in a subscription\n *\n * @param {string} stripeInvoiceId - The stripe invoice id\n *\n * @returns {Promise} The request result\n */\nexport const cancelSubscriptionChange = async (stripeInvoiceId) => {\n let invoice = null;\n\n try {\n invoice = await voidInvoice(stripeInvoiceId);\n } catch (e) {\n error('cancelSubscriptionChange', e);\n\n return OnCancelSubscriptionChangeError.dispatch(e);\n }\n\n log('cancelSubscriptionChange', invoice);\n\n return OnCancelSubscriptionChange.dispatch(invoice);\n};\n\n/**\n * Fetches the available plans\n *\n * @param {string} currentPlanId - The current plan id\n *\n * @returns {Promise} The request result\n */\nexport const fetchAvailablePlans = async (currentPlanId) => {\n const client = OnApolloClient.get();\n const orderBy = 'order_ASC';\n let response = null;\n const filter = {\n OR: [{ isFreeTrial: { equals: false } }, { id: { equals: currentPlanId } }],\n };\n\n try {\n response = await client.query({\n query: FETCH_SUBSCRIPTION_PLANS,\n variables: { filter, orderBy },\n fetchPolicy: 'network-only',\n });\n } catch (e) {\n error('fetchAvailablePlans', e);\n\n return OnFetchAvailableSubscriptionPlansError.dispatch(e);\n }\n\n log('fetchAvailablePlans', response.data);\n\n return OnFetchAvailableSubscriptionPlansEvent.dispatch(response.data);\n};\n","import React, { useState, useEffect, useCallback } from 'react';\nimport {\n Heading as BoostHeading,\n Dialog,\n Row,\n Column,\n Loader,\n Button,\n useModal,\n} from '@8base/boost';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { useSubscriptionPlans } from '../../../../onboarding/onboarding-hooks';\nimport { PlanCard } from '../../../../company/components/PlanCard';\nimport { PrimaryBtn as PrimaryButton } from '../../../../../shared/components/ui/buttons/PrimaryBtn';\nimport { updateCompanySubscription } from '../subscription-plan-actions';\nimport {\n OnUpdateCompanySubscription,\n OnUpdateCompanySubscriptionError,\n} from '../subscription-plan-events';\nimport { onErrorMixinFC } from '../../../../../shared/mixins';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nconst Heading = styled(BoostHeading)`\n letter-spacing: 0.5px !important;\n ${(props) => {\n switch (props.color) {\n case 'primary':\n return 'color: #3DB4AA';\n default:\n return 'color: #7D828C';\n }\n }}\n`;\n\nexport const modalId = 'change-subscription-plan-dialog';\n\n/**\n * Change plan dialog component\n *\n * @param {object} props - The component props object\n * @param {string} props.id - The id of the modal\n * @param {string} props.currentPlanId - The id of the currently used plan\n *\n * @returns {React.FC} The component to render\n */\nfunction ChangePlanDialog({ companySubscription, companyUsersCount }) {\n const { isOpen, closeModal } = useModal(modalId);\n const { items, loading, fetch } = useSubscriptionPlans({ isFreeTrial: false });\n const [dialogLoading, setDialogLoading] = useState(false);\n const [selected, setSelected] = useState('');\n const [seats, setSeats] = useState(0);\n\n useEffect(() => {\n if (isOpen) {\n fetch();\n }\n }, [fetch, isOpen]);\n\n useEffect(() => {\n if (companySubscription) {\n setSeats(companySubscription.numberOfSeats);\n setSelected(companySubscription.subscriptionPlan.id);\n }\n }, [companySubscription]);\n\n useSubscription(\n OnUpdateCompanySubscription,\n () => {\n setDialogLoading(false);\n },\n [],\n );\n\n useSubscription(\n OnUpdateCompanySubscriptionError,\n (e) => {\n setDialogLoading(false);\n onErrorMixinFC(e);\n },\n [],\n );\n\n const handleChange = useCallback((plan) => {\n setSelected(plan.id);\n }, []);\n\n const handleSubmit = useCallback(() => {\n setDialogLoading(true);\n\n updateCompanySubscription({\n companySubscriptionId: companySubscription.id,\n subscriptionPlanId: selected,\n numberOfSeats: seats,\n });\n }, [seats, selected, companySubscription]);\n\n const plans = loading ? (\n \n ) : (\n items.map((subscription) => (\n \n ))\n );\n\n return (\n \n );\n}\n\nChangePlanDialog.propTypes = {\n companySubscription: PropTypes.object,\n companyUsersCount: PropTypes.number.isRequired,\n};\n\nChangePlanDialog.defaultProps = {\n companySubscription: null,\n};\n\nexport default ChangePlanDialog;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { Loader, Row as BoostRow, Paragraph, Text } from '@8base/boost';\nimport { retrieveUpcomingInvoice } from '../../billing-actions';\nimport { OnUpcomingInvoiceFetch, OnUpcomingInvoiceFetchError } from '../../billing-events';\nimport PropTypes from 'prop-types';\nimport * as Toast from '../../../../../shared/components/toast/Toast';\nimport * as moment from 'moment';\nimport styled from 'styled-components';\n\nconst Row = styled(BoostRow)`\n width: 150px;\n`;\n\n/**\n * Next invoice information component\n *\n * @param {object} props - The component's prop object\n * @param {string} props.companyId - The company id\n *\n * @returns {React.FC} The component to render\n */\nfunction NextInvoiceInformation({ companyId }) {\n const [invoice, setInvoice] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n setLoading(true);\n retrieveUpcomingInvoice(companyId);\n }, [companyId]);\n\n const retryFetch = useCallback(() => {\n setLoading(true);\n retrieveUpcomingInvoice(companyId);\n }, [companyId]);\n\n useSubscription(\n OnUpcomingInvoiceFetch,\n ({ invoice: nextInvoice }) => {\n setInvoice(nextInvoice);\n\n setLoading(false);\n setError(null);\n },\n [],\n );\n\n useSubscription(\n OnUpcomingInvoiceFetchError,\n (e) => {\n setError(e);\n setLoading(false);\n\n Toast.error('Could not show next invoice information, please try again.');\n },\n [],\n );\n\n if (loading) {\n return (\n \n \n
\n );\n }\n\n if (error) {\n return (\n \n Retry\n \n );\n }\n\n return (\n \n You will be charged ${invoice.amount_due / 100} on{' '}\n {moment.unix(invoice.period_end).format('MM/DD/YYYY')}\n \n );\n}\n\nNextInvoiceInformation.propTypes = {\n companyId: PropTypes.string.isRequired,\n};\n\nexport default NextInvoiceInformation;\n","import React, { useEffect, useState, useCallback } from 'react';\nimport { Card, Loader, Button, Row, Paragraph, Column, Icon, Paper, withModal } from '@8base/boost';\nimport { useStripe } from '@stripe/react-stripe-js';\nimport { PrimaryBtn as PrimaryButton } from '../../../../../shared/components/ui/buttons/PrimaryBtn';\nimport ChangePlanDialog, { modalId } from './ChangePlanDialog';\nimport NextInvoiceInformation from './NextInvoiceInformation';\nimport { PlanCard } from '../../../../company/components/PlanCard';\nimport styled from 'styled-components';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { confirmSubscriptionChange, cancelSubscriptionChange } from '../subscription-plan-actions';\nimport {\n OnUpdateCompanySubscription,\n OnConfirmSubscriptionChange,\n OnConfirmSubscriptionChangeError,\n OnCancelSubscriptionChange,\n OnCancelSubscriptionChangeError,\n} from '../subscription-plan-events';\nimport { onErrorMixinFC } from '../../../../../shared/mixins';\nimport * as Toast from '../../../../../shared/components/toast/Toast';\nimport PropTypes from 'prop-types';\n\nconst Title = styled.h3`\n font-size: 16px;\n font-weight: bold;\n line-height: 28px;\n`;\n\nconst Alert = styled(Paper)`\n box-shadow: none !important;\n border: 1px solid #d0d7dd;\n`;\n\n/**\n * Subscription plan changed component\n *\n * @returns {React.FC} The component to render\n */\nfunction SubscriptionPlanChanger({ company, companyUsersCount, openModal, closeModal }) {\n const stripe = useStripe();\n const [subscription, setSubscription] = useState(null);\n const [loading, setLoading] = useState(true);\n const [confirming, setConfirming] = useState(false);\n const [canceling, setCanceling] = useState(false);\n\n useEffect(() => {\n const sub = company?.subscriptions?.items[0];\n\n if (sub) {\n setSubscription(sub ? sub : null);\n setLoading(false);\n }\n }, [company]);\n\n useSubscription(\n OnUpdateCompanySubscription,\n ({ subscription: sub }) => {\n closeModal(modalId);\n\n if (!sub.pending_update) {\n return Toast.success('Success', 'Subscription plan changed successfully');\n }\n\n Toast.info('Info', 'Processing payment...');\n const [{ paymentMethodId }] = company.companyPaymentMethods.items;\n\n setConfirming(true);\n\n confirmSubscriptionChange(\n {\n invoice: {\n invoiceId: sub.latest_invoice.id,\n status: sub.latest_invoice.status,\n },\n paymentMethodId,\n },\n stripe,\n );\n },\n [company, stripe, closeModal],\n );\n\n useSubscription(\n OnConfirmSubscriptionChange,\n () => {\n setConfirming(false);\n\n Toast.success('Success', 'Subscription plan changed successfully');\n },\n [],\n );\n\n useSubscription(\n OnCancelSubscriptionChange,\n () => {\n setCanceling(false);\n\n Toast.success('Success', 'Subscription plan change canceled successfully');\n },\n [],\n );\n\n useSubscription(\n OnConfirmSubscriptionChangeError,\n (e) => {\n setConfirming(false);\n onErrorMixinFC(e);\n },\n [],\n );\n\n useSubscription(\n OnCancelSubscriptionChangeError,\n (e) => {\n setCanceling(false);\n onErrorMixinFC(e);\n },\n [],\n );\n\n const handleChange = useCallback(() => {\n if (!company) return Toast.warn('Wait until the form loads');\n\n const [paymentMethod] = company.companyPaymentMethods.items;\n\n if (!paymentMethod) return Toast.error('You need to register a payment method first');\n\n openModal(modalId);\n }, [company, openModal]);\n\n const handlePaySubscription = useCallback(() => {\n setConfirming(true);\n\n const [invoice] = company.companyInvoices.items;\n const [{ paymentMethodId }] = company.companyPaymentMethods.items;\n\n confirmSubscriptionChange(\n {\n invoice,\n paymentMethodId,\n },\n stripe,\n );\n }, [company, stripe]);\n\n const handleCancelChange = useCallback(() => {\n setCanceling(true);\n const [{ invoiceId }] = company.companyInvoices.items;\n\n cancelSubscriptionChange(invoiceId);\n }, [company]);\n\n return (\n \n \n Subscription Plan\n \n \n {loading ? (\n \n \n
\n ) : (\n \n {subscription?.pendingUpdate && (\n \n \n \n \n You have a pending subscription change to another plan, please confirm or cancel\n this chage to continue let us know what are your preferences\n \n
\n \n )}\n \n \n )}\n \n \n {subscription?.pendingUpdate ? (\n \n \n Confirm Payment\n \n \n Cancel Payment\n \n
\n ) : (\n \n \n Change Plan\n \n \n
\n )}\n \n \n \n );\n}\n\nSubscriptionPlanChanger.propTypes = {\n company: PropTypes.shape({\n id: PropTypes.string.isRequired,\n companyInvoices: PropTypes.shape({\n items: PropTypes.arrayOf(\n PropTypes.shape({\n invoiceId: PropTypes.string,\n }),\n ).isRequired,\n }).isRequired,\n companyPaymentMethods: PropTypes.shape({\n items: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n nameOnCard: PropTypes.string,\n addressLine1: PropTypes.string,\n addressLine2: PropTypes.string,\n city: PropTypes.string,\n state: PropTypes.string,\n last4: PropTypes.string,\n expireDate: PropTypes.string,\n paymentMethodId: PropTypes.string,\n }),\n ).isRequired,\n }).isRequired,\n subscriptions: PropTypes.shape({\n items: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n status: PropTypes.string,\n numberOfSeatsh: PropTypes.number,\n subscriptionPlan: PropTypes.object,\n stripeCustomerId: PropTypes.string,\n }),\n ).isRequired,\n }).isRequired,\n }).isRequired,\n companyUsersCount: PropTypes.number.isRequired,\n openModal: PropTypes.func.isRequired,\n closeModal: PropTypes.func.isRequired,\n};\n\nexport default withModal(SubscriptionPlanChanger);\n","import gql from 'graphql-tag';\n\nexport const FETCH_COMPANY_PAYMENT_METHOD = gql`\n query FetchCompanyPaymentMethod($id: ID) {\n companyPaymentMethod(id: $id) {\n id\n nameOnCard\n expireDate\n last4\n addressLine1\n addressLine2\n city\n state\n country\n paymentMethodId\n company {\n id\n name\n }\n }\n }\n`;\n\nexport const FETCH_PAYMENT_METHODS = gql`\n query FetchPaymentMethods(\n $filter: CompanyPaymentMethodFilter\n $skip: Int\n $first: Int\n $last: Int\n $orderBy: [CompanyPaymentMethodOrderBy]\n ) {\n companyPaymentMethodsList(\n filter: $filter\n skip: $skip\n first: $first\n last: $last\n orderBy: $orderBy\n ) {\n count\n items {\n id\n nameOnCard\n expireDate\n last4\n addressLine1\n addressLine2\n city\n state\n country\n paymentMethodId\n company {\n id\n name\n }\n }\n }\n }\n`;\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnPaymentMethodUpdate = createEvent();\n\nexport const OnPaymentMethodUpdateError = createEvent();\n\nexport const OnFetchPaymentMethod = createEvent();\n\nexport const OnFetchPaymentMethodError = createEvent();\n\nexport const OnFetchCurrentPaymentMethodEvent = createEvent();\n\nexport const OnFetchCurrentPaymentMethodError = createEvent();\n","import { isValidString } from '@cobuildlab/validation-utils';\nimport { ValidationError } from '../../../../shared/errors';\n\n/**\n * Create payment method validator\n *\n * @param {object} data - The data to create the payment method\n *\n * @returns {void}\n */\nexport function updatePaymentMethodValidator(data) {\n const errors = [];\n\n if (!isValidString(data.cardHolderName)) {\n errors.push('The name on the card should be a valid string');\n }\n\n if (!isValidString(data.addressLine1)) {\n errors.push('The address line 1 should be a valid string');\n }\n\n if (!isValidString(data.city)) {\n errors.push('The city should be a valid string');\n }\n\n if (!isValidString(data.state)) {\n errors.push('The state should be a valid string');\n }\n\n if (errors.length > 0) throw new ValidationError(errors);\n}\n","import { FETCH_PAYMENT_METHODS, FETCH_COMPANY_PAYMENT_METHOD } from './payment-method-queries';\nimport { OnApolloClient, OnSessionFetch } from '../../../../shared/session/session-events';\nimport { createPaymentMethod } from '../billing-actions';\nimport {\n OnFetchCurrentPaymentMethodError,\n OnFetchCurrentPaymentMethodEvent,\n OnFetchPaymentMethod,\n OnFetchPaymentMethodError,\n OnPaymentMethodUpdate,\n OnPaymentMethodUpdateError,\n} from './payment-method-events';\nimport { error, log } from '@cobuildlab/pure-logger';\nimport { updatePaymentMethodValidator } from './payment-method-validators';\n\n/**\n * Updates the customer payment method\n *\n * @param {object} method - The data to create the payment method\n * @param {object} stripe - The stripe object\n * @param {object} elements - The elements object\n * @returns {Promise} The request result\n */\nexport const updatePaymentMethod = async (method, stripe, elements) => {\n const { user } = OnSessionFetch.get();\n const { addressLine1, addressLine2, city, state, cardHolderName, customerId, companyId } = method;\n let paymentMethod = null;\n\n try {\n updatePaymentMethodValidator(method);\n } catch (e) {\n error('updatePaymentMethod', e);\n\n return OnPaymentMethodUpdateError.dispatch(e);\n }\n\n const data = {\n billing_details: {\n address: {\n line1: addressLine1,\n line2: addressLine2,\n city: city,\n state: state,\n country: 'US',\n },\n email: user.email,\n name: cardHolderName,\n },\n metadata: { company_id: companyId },\n };\n\n try {\n paymentMethod = await createPaymentMethod(data, customerId, stripe, elements);\n } catch (e) {\n error('updatePaymentMethod', e);\n\n return OnPaymentMethodUpdateError.dispatch(e);\n }\n\n log('updatePaymentMethod', paymentMethod);\n\n return OnPaymentMethodUpdate.dispatch(paymentMethod);\n};\n\n/**\n * Fetches the specified company payment method\n *\n * @param {string} id - The payment method id\n *\n * @returns {Promise} The request result\n */\nexport const fetchCompanyPaymentMethod = async (id) => {\n const client = OnApolloClient.get();\n let response = null;\n\n try {\n response = await client.query({\n query: FETCH_COMPANY_PAYMENT_METHOD,\n variables: { id },\n fetchPolicy: 'network-only',\n });\n } catch (e) {\n error('fetchCompanyPaymentMethod', e);\n\n return OnFetchPaymentMethodError.dispatch(e);\n }\n\n log('fetchCompanyPaymentMethod', response.data);\n\n return OnFetchPaymentMethod.dispatch(response.data);\n};\n\n/**\n * Fetches the current payment method used\n *\n * @param {string} id - The company id\n *\n * @returns {Promise} The request result\n */\nexport const fetchCurrentPaymentMethod = async (id) => {\n const client = OnApolloClient.get();\n let response = null;\n const first = 1;\n const orderBy = 'createdAt_DESC';\n const filter = { company: { id: { equals: id } } };\n\n try {\n response = await client.query({\n query: FETCH_PAYMENT_METHODS,\n variables: { filter, first, orderBy },\n fetchPolicy: 'network-only',\n });\n } catch (e) {\n error('fetchCurrentPaymentMethod', e);\n\n return OnFetchCurrentPaymentMethodError.dispatch(e);\n }\n\n log('fetchCurrentPaymentMethod', response.data);\n\n return OnFetchCurrentPaymentMethodEvent.dispatch(response.data);\n};\n","import React, { useCallback, useState, useEffect } from 'react';\nimport { PropTypes } from 'prop-types';\nimport DialogForm from '../../../../../shared/components/dialog/DialogForm';\nimport { PaymentForm } from './PaymentForm';\nimport { updatePaymentMethod } from '../payment-method-actions';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { OnPaymentMethodUpdate, OnPaymentMethodUpdateError } from '../payment-method-events';\nimport * as Toast from '../../../../../shared/components/toast/Toast';\nimport { useModal } from '@8base/boost';\nimport { onErrorMixinFC } from '../../../../../shared/mixins';\nimport { useElements, useStripe } from '@stripe/react-stripe-js';\n\n/**\n * This component is a Dialog/Modal with a form to update the Payment.\n *\n * @param {object} props - The component props object\n * @param {string} props.id - The id of the dialog\n *\n * @returns {React.FC} - The View in a Dialog/Modal\n */\nconst PaymentDialogForm = ({ id }) => {\n const elements = useElements();\n const stripe = useStripe();\n const { isOpen, args, closeModal } = useModal(id);\n const [ready, setReady] = useState(false);\n const [loading, setLoading] = useState(true);\n const [form, setForm] = useState(args.data ? args.data : {});\n\n useEffect(() => {\n if (!isOpen) {\n setReady(false);\n setLoading(true);\n }\n }, [isOpen]);\n\n useEffect(() => {\n setForm(\n args.data\n ? {\n customerId: args.data.customerId,\n companyId: args.data.companyId,\n cardHolderName: args.data.nameOnCard,\n addressLine1: args.data.addressLine1,\n addressLine2: args.data.addressLine2,\n city: args.data.city,\n state: args.data.state,\n card: {},\n }\n : { card: {} },\n );\n }, [args.data]);\n\n useEffect(() => {\n if (elements && stripe && ready) {\n setLoading(false);\n }\n }, [elements, stripe, ready]);\n\n useSubscription(\n OnPaymentMethodUpdate,\n () => {\n setLoading(false);\n\n Toast.success('Success', 'Payment method updated successfully');\n\n closeModal(id);\n },\n [],\n );\n\n useSubscription(\n OnPaymentMethodUpdateError,\n (e) => {\n setLoading(false);\n\n onErrorMixinFC(e);\n },\n [],\n );\n\n const handleSubmit = useCallback(() => {\n if (!stripe || !elements) {\n return Toast.warn('Wait a few seconds and try again...');\n }\n\n setLoading(true);\n\n updatePaymentMethod(form, stripe, elements);\n }, [stripe, elements, form]);\n\n const handleChange = useCallback((name, value) => {\n setForm((state) => ({\n ...state,\n [name]: value,\n }));\n }, []);\n\n const handleReady = useCallback(() => {\n setReady(true);\n }, []);\n\n return (\n closeModal(id)}\n onClickCreate={handleSubmit}\n isOpen={isOpen}\n isLoading={loading}>\n \n \n );\n};\n\nPaymentDialogForm.propTypes = {\n id: PropTypes.string.isRequired,\n};\n\nexport { PaymentDialogForm };\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { Row, Card, Button, Loader, NoData, Grid, useModal, styled } from '@8base/boost';\nimport { PaymentDialogForm } from './PaymentDialogForm';\nimport { fetchCompanyPaymentMethod } from '../payment-method-actions';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { useAgency } from '../../../../../shared/hooks/useAgency';\nimport {\n OnFetchPaymentMethod,\n OnFetchPaymentMethodError,\n OnPaymentMethodUpdate,\n} from '../payment-method-events';\nimport { onErrorMixinFC } from '../../../../../shared/mixins';\nimport PropTypes from 'prop-types';\n\nconst Section = styled(Card.Section)`\n padding: 12px 24px !important;\n`;\n\nconst id = 'change-payment-dialog';\n\n/**\n * Payment method changed component\n *\n * @returns {React.FC} The component to render\n */\nfunction PaymentMethodChanger({ customerId, paymentMethodId }) {\n const agency = useAgency();\n const [companyId, setCompanyId] = useState(agency.company.id);\n const [method, setPaymentMethod] = useState(null);\n const [loading, setLoading] = useState(paymentMethodId ? true : false);\n const { openModal } = useModal(id);\n\n const fetch = useCallback(() => {\n if (paymentMethodId) {\n setLoading(true);\n fetchCompanyPaymentMethod(paymentMethodId);\n }\n }, [paymentMethodId]);\n\n useEffect(() => {\n if (agency.company.id !== companyId) {\n setCompanyId(agency.company.id);\n }\n }, [agency, companyId]);\n\n useEffect(() => {\n fetch();\n }, [fetch]);\n\n const handleClick = useCallback(() => {\n openModal(id, {\n data: {\n ...method,\n companyId,\n customerId,\n },\n });\n }, [openModal, customerId, companyId, method]);\n\n useSubscription(\n OnFetchPaymentMethod,\n ({ companyPaymentMethod }) => {\n setPaymentMethod(companyPaymentMethod);\n setLoading(false);\n },\n [],\n );\n\n useSubscription(\n OnPaymentMethodUpdate,\n () => {\n fetch();\n },\n [fetch],\n );\n\n useSubscription(\n OnFetchPaymentMethodError,\n (e) => {\n onErrorMixinFC(e);\n },\n [],\n );\n\n let content = null;\n\n /**\n * If component is loading, then render a loader\n */\n if (loading)\n content = (\n \n );\n\n /**\n * If component finished loading and payment method exists,\n * render card information\n */\n if (!loading && method && method.last4)\n content = (\n <>\n \n \n Credit Card\n {`**** **** **** ${method.last4}`}\n \n \n \n \n Expiration Date\n {method.expireDate}\n \n \n \n );\n\n /**\n * If component finished loading and there is no payment method,\n * then render the no data component\n */\n if (!loading && (!method || !method.last4))\n content = (\n \n );\n\n return (\n \n \n \n \n
\n \n {content}\n \n \n );\n}\n\nPaymentMethodChanger.propTypes = {\n paymentMethodId: PropTypes.string,\n customerId: PropTypes.string,\n};\n\nPaymentMethodChanger.defaultProps = {\n paymentMethodId: null,\n customerId: null,\n};\n\nexport default PaymentMethodChanger;\n","import React from 'react';\r\nimport { INVOICE_STATUS } from '@cobuildlab/lead-volt-share';\r\nimport { Tag as BoostTag } from '@8base/boost';\r\nimport PropTypes from 'prop-types';\r\nimport styled from 'styled-components';\r\n\r\nconst Tag = styled(BoostTag)`\r\n ${(props) => {\r\n switch (props.type) {\r\n case INVOICE_STATUS.DRAFT:\r\n return `\r\n color: #1E87F6 !important;\r\n border-color: #1E87F6 !important;\r\n background-color: rgba(30, 195, 246, 0.15) !important;\r\n `;\r\n case INVOICE_STATUS.OPEN:\r\n return `\r\n color: #F6C01E !important;\r\n border-color: #F6C01E !important;\r\n background-color: rgba(246,192,30,0.15) !important;\r\n `;\r\n case INVOICE_STATUS.PAID:\r\n return `\r\n color: #3DB4AA !important;\r\n border-color: #3DB4AA !important;\r\n background-color: rgba(61,180,170,0.1) !important;\r\n `;\r\n case INVOICE_STATUS.VOID:\r\n return `\r\n color: rgb(125, 130, 140) !important;\r\n border-color: rgb(125, 130, 140) !important;\r\n background-color: rgba(125, 130, 140, 0.1) !important;\r\n `;\r\n case INVOICE_STATUS.UNCOLLECTIBLE:\r\n return `\r\n color: #FF0000 !important;\r\n border-color: #FF0000 !important;\r\n background-color: rgba(255,0,0,0.08) !important;\r\n `;\r\n default:\r\n return `\r\n color: #3DB4AA !important;\r\n border-color: #3DB4AA !important;\r\n background-color: rgba(61,180,170,0.1) !important;\r\n `;\r\n }\r\n }}\r\n`;\r\n\r\n/**\r\n * This component show a text with a pre-format text\r\n *\r\n * @param {string} status - refer to the status text/string for the History Table\r\n * @returns {string} return a Pre-format Text\r\n */\r\n\r\nconst StatusCell = ({ status }) => {\r\n return {status.split('_').join(' ')};\r\n};\r\n\r\nStatusCell.propTypes = {\r\n status: PropTypes.string.isRequired,\r\n};\r\n\r\nexport default StatusCell;\r\n","import React, { useState, useEffect } from 'react';\nimport { Card, Grid, Table, Row, Pagination, styled } from '@8base/boost';\nimport StatusCell from './StatusCell';\nimport { DateBox } from '../../../../shared/components';\nimport { useCompanyInvoices } from '../billing-hooks';\nimport PropTypes from 'prop-types';\n\nconst TableContainer = styled(Table)`\n & div[role='loader'] > div[role='loader'] div {\n border-color: #3db4aa !important;\n }\n`;\n\nconst Body = styled(Table.Body)`\n height: 275px;\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\n/**\n * Billing history component\n *\n * @param {object} props - The components prop object\n * @param {string} props.companyId - The company id\n * @param {string} props.invoice - The latest invoice\n *\n * @returns {React.FC} The component to render\n */\nfunction BillingHistory({ companyId, latestInvoice }) {\n const [page, setPage] = useState(1);\n const { items, count, loading, refetch } = useCompanyInvoices(companyId, page);\n\n useEffect(() => {\n if (latestInvoice.id || latestInvoice.status) {\n refetch();\n }\n }, [latestInvoice.id, latestInvoice.status, refetch]);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n Date\n Item Name\n Status\n Amount\n \n \n {(invoice) => (\n \n \n \n \n Subscription\n \n \n \n ${invoice.total}\n \n )}\n \n \n \n \n \n \n
\n \n \n );\n}\n\nBillingHistory.propTypes = {\n companyId: PropTypes.string.isRequired,\n latestInvoice: PropTypes.object,\n};\n\nBillingHistory.defaultProps = {\n latestInvoice: {},\n};\n\nexport default BillingHistory;\n","import { useState, useEffect, useCallback } from 'react';\nimport { fetchCompanyInvoices } from './billing-actions';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { LIST_INITIAL_STATE } from '../../../shared/constants';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { OnFetchCompanyInvoicesError, OnFetchCompanyInvoicesEvent } from './billing-events';\n\n/**\n * Hook to use company invoices as a list of items\n *\n * @param {string} companyId - The company id\n * @param {number} page - The page to fetch\n *\n * @returns {Promise} The request result\n */\nexport function useCompanyInvoices(companyId, page = 1) {\n const [state, setState] = useState(LIST_INITIAL_STATE);\n\n const fetch = useCallback(() => {\n setState((state) => ({\n ...state,\n loading: true,\n }));\n fetchCompanyInvoices(companyId, page);\n }, [companyId, page]);\n\n useEffect(() => {\n fetch();\n }, [fetch]);\n\n useEventSubscription(OnFetchCompanyInvoicesEvent, ({ companyInvoicesList }) => {\n setState((state) => ({\n ...state,\n items: companyInvoicesList.items,\n count: companyInvoicesList.count,\n loading: false,\n }));\n });\n\n useEventSubscription(OnFetchCompanyInvoicesError, (e) => {\n onErrorMixinFC(e);\n\n setState((state) => ({\n ...state,\n items: [],\n count: 0,\n loading: true,\n }));\n });\n\n return {\n ...state,\n refetch: fetch,\n };\n}\n","import React, { useCallback, useState, useEffect } from 'react';\r\nimport { Dialog, Paragraph, Row, Button, Column, Text as BoostText, useModal } from '@8base/boost';\r\nimport { useSubscription } from '@cobuildlab/react-simple-state';\r\nimport { OnSubscriptionCanceled, OnSubscriptionCanceledError } from '../billing-events';\r\nimport { cancelSubscription } from '../billing-actions';\r\nimport { PlanCard } from '../../../company/components/PlanCard';\r\nimport { onErrorMixinFC } from '../../../../shared/mixins';\r\nimport PropTypes from 'prop-types';\r\nimport moment from 'moment';\r\nimport styled from '@emotion/styled';\r\n\r\nconst Note = styled(Paragraph)`\r\n color: #a5afb6;\r\n margin-top: 5px;\r\n`;\r\n\r\nconst Text = styled(BoostText)`\r\n font-size: 1.3rem !important;\r\n`;\r\n\r\nexport const modalId = 'cancel-subscription-dialog';\r\n\r\n/**\r\n * This Component show the Name and description of the Plan to Cancel\r\n *\r\n * @returns {React.FC} - The component to render\r\n */\r\nfunction CancelSubscriptionDialog() {\r\n const [loading, setLoading] = useState(false);\r\n const { isOpen, args, closeModal } = useModal(modalId);\r\n\r\n useEffect(() => {\r\n if (!isOpen) {\r\n setLoading(false);\r\n }\r\n }, [isOpen]);\r\n\r\n const handleClose = useCallback(() => {\r\n closeModal(modalId);\r\n }, [closeModal]);\r\n\r\n const handleConfirm = useCallback(() => {\r\n setLoading(true);\r\n\r\n cancelSubscription(args.companySubscription.id);\r\n }, [args.companySubscription]);\r\n\r\n useSubscription(\r\n OnSubscriptionCanceled,\r\n () => {\r\n closeModal(modalId);\r\n },\r\n [],\r\n );\r\n\r\n useSubscription(\r\n OnSubscriptionCanceledError,\r\n (e) => {\r\n setLoading(false);\r\n\r\n onErrorMixinFC(e);\r\n },\r\n [],\r\n );\r\n\r\n const companySubscription = args.companySubscription || {};\r\n const expireDate = companySubscription.expireDate\r\n ? moment(companySubscription.expireDate).format('MM/DD/YYYY')\r\n : null;\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nCancelSubscriptionDialog.propTypes = {\r\n companySubscription: PropTypes.shape({\r\n expireDate: PropTypes.string.isRequired,\r\n subscriptionPlan: PropTypes.object.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nexport default CancelSubscriptionDialog;\r\n","import React, { useCallback } from 'react';\nimport { Card, Row, Text, Button, useModal } from '@8base/boost';\nimport { PropTypes } from 'prop-types';\nimport CancelSubscriptionDialog, { modalId } from './CancelSubscriptionDialog';\nimport styled from 'styled-components';\n\nconst Title = styled.h3`\n font-size: 16px;\n font-weight: bold;\n line-height: 28px;\n`;\n\n/**\n * Cancel plan card component\n *\n * @param {object} props - The component's prop object\n * @param {object} props.companySubscription - The current company subscription\n *\n * @returns {React.FC} The component to render\n */\nfunction CancelPlanCard({ companySubscription }) {\n const { openModal } = useModal(modalId);\n\n const handleCancel = useCallback(() => {\n openModal(modalId, {\n companySubscription,\n });\n }, [openModal, companySubscription]);\n\n return (\n \n \n Cancel Subscription\n \n \n \n \n You can cancel at anytime\n
\n \n \n \n );\n}\n\nCancelPlanCard.propTypes = {\n companySubscription: PropTypes.object.isRequired,\n};\n\nexport default CancelPlanCard;\n","import React, { useState, useCallback, useEffect } from 'react';\nimport { Card, Column, Row, Loader, Scrollable } from '@8base/boost';\nimport { useStripe, useElements } from '@stripe/react-stripe-js';\nimport { useSubscription } from '@cobuildlab/react-simple-state';\nimport { PlanCard } from '../../../company/components/PlanCard';\nimport { PrimaryBtn as Button } from '../../../../shared/components/ui/buttons/PrimaryBtn';\nimport { SUBSCRIPTION_STATUS } from '@cobuildlab/lead-volt-share';\nimport { renewCompanySubscription } from '../billing-actions';\nimport { OnSubscriptionRenew, OnSubscriptionRenewError } from '../billing-events';\nimport { useSubscriptionPlans } from '../../../onboarding/onboarding-hooks';\nimport { onErrorMixinFC } from '../../../../shared/mixins';\nimport * as Toast from '../../../../shared/components/toast/Toast';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nconst Title = styled.h3`\n font-size: 16px;\n font-weight: bold;\n line-height: 28px;\n`;\n\nconst PlanList = styled.div`\n max-height: 200px;\n`;\n\nconst { CANCELED } = SUBSCRIPTION_STATUS;\n\n/**\n * The renovate subscription component\n *\n * @param {object} props - The component props\n * @param {object} props.company - The company to renew the subscription from\n *\n * @returns {React.FC} The component to render\n */\nfunction RenovateSubscription({ company }) {\n const { items, loading: fetchLoading } = useSubscriptionPlans({ isFreeTrial: false });\n const [loading, setLoading] = useState(false);\n const [form, setForm] = useState({});\n const [subscription] = company.subscriptions.items;\n const stripe = useStripe();\n const elements = useElements();\n\n useEffect(() => {\n const [paymentMethod] = company.companyPaymentMethods.items;\n const [sub] = company.subscriptions.items;\n const [invoice] = company.companyInvoices.items;\n\n setForm({\n companyId: company.id,\n subscriptionPlan: sub.status !== CANCELED ? sub.subscriptionPlan : null,\n numberOfSeats: sub.numberOfSeats,\n status: sub.status,\n stripeCustomerId: sub.stripeCustomerId,\n stripeInvoiceId: invoice.invoiceId,\n paymentMethodId: paymentMethod?.paymentMethodId,\n });\n }, [company]);\n\n const handleChange = useCallback((name, value) => {\n setForm((state) => ({\n ...state,\n [name]: value,\n }));\n }, []);\n\n const handleSeatsChange = useCallback((change) => {\n setForm((state) => ({\n ...state,\n numberOfSeats: typeof change === 'number' ? change : change(state.numberOfSeats),\n }));\n }, []);\n\n const handleSubmit = useCallback(() => {\n const [subscription] = company.subscriptions.items;\n setLoading(true);\n\n if (!stripe || !elements) return Toast.warn('Try again in a few seconds...');\n\n renewCompanySubscription(form, subscription, stripe, elements);\n }, [company, form, stripe, elements]);\n\n useSubscription(\n OnSubscriptionRenew,\n () => {\n setLoading(false);\n\n Toast.success('Success', 'Subscription renewed, recovering information...');\n },\n [],\n );\n\n useSubscription(\n OnSubscriptionRenewError,\n (e) => {\n setLoading(false);\n\n onErrorMixinFC(e);\n },\n [],\n );\n\n const plans = items.map((plan) => (\n handleChange('subscriptionPlan', plan)}\n numberOfSeats={form.numberOfSeats}\n min={subscription.numberOfSeats}\n onQuantityChange={handleSeatsChange}\n readOnly={subscription.status !== CANCELED}\n />\n ));\n\n return (\n \n \n Renew Subscription\n \n \n {fetchLoading ? (\n \n \n
\n ) : (\n \n \n {plans}\n \n \n )}\n \n \n \n \n
\n \n \n );\n}\n\nRenovateSubscription.propTypes = {\n company: PropTypes.shape({\n id: PropTypes.string.isRequired,\n companyInvoices: PropTypes.shape({\n items: PropTypes.arrayOf(\n PropTypes.shape({\n invoiceId: PropTypes.string,\n }),\n ).isRequired,\n }).isRequired,\n companyPaymentMethods: PropTypes.shape({\n items: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n nameOnCard: PropTypes.string,\n addressLine1: PropTypes.string,\n addressLine2: PropTypes.string,\n city: PropTypes.string,\n state: PropTypes.string,\n last4: PropTypes.string,\n expireDate: PropTypes.string,\n paymentMethodId: PropTypes.string,\n }),\n ).isRequired,\n }).isRequired,\n subscriptions: PropTypes.shape({\n items: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n status: PropTypes.string,\n numberOfSeats: PropTypes.number,\n subscriptionPlan: PropTypes.object,\n stripeCustomerId: PropTypes.string,\n }),\n ).isRequired,\n }).isRequired,\n }).isRequired,\n};\n\nexport default RenovateSubscription;\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { Redirect } from 'react-router-dom';\r\nimport { Row, Loader } from '@8base/boost';\r\nimport { Box } from '../../../shared/components/Box';\r\nimport Layout from '../components/Layout';\r\nimport { Column, NoData } from '@8base/boost';\r\nimport { SUBSCRIPTION_STATUS } from '@cobuildlab/lead-volt-share';\r\nimport SubscriptionPlanChanger from './subscription-plan/components/SubscriptionPlanChanger';\r\nimport PaymentMethodChanger from './payment-method/components/PaymentMethodChanger';\r\nimport BillingHistory from './components/BillingHistory';\r\nimport CancelPlanCard from './components/CancelPlanCard';\r\nimport RenovateSubscription from './components/RenovateSubscription';\r\nimport { useCompany } from '../../company/company-hooks';\r\nimport { useAgency } from '../../../shared/hooks/useAgency';\r\nimport { useUser } from '../../../shared/hooks/useUser';\r\nimport { onErrorMixinFC } from '../../../shared/mixins';\r\nimport withSession from '../../../shared/hoc/withSession';\r\nimport { fetchSession } from '../../auth/auth.actions';\r\n\r\nconst { CANCELED, INCOMPLETE } = SUBSCRIPTION_STATUS;\r\n\r\n/**\r\n * A Component to show information about the billing info and the Subcription Plan of a Company\r\n *\r\n * @returns {React.FC} The component to render\r\n */\r\nfunction BillingView() {\r\n const [user, loadingUser] = useUser();\r\n const agency = useAgency();\r\n const [companyId, setCompanyId] = useState(agency.company.id);\r\n const { data, loading, error, setCompany } = useCompany(companyId);\r\n const prevSubStatus = useRef('');\r\n\r\n useEffect(() => {\r\n if (agency.company.id !== companyId) {\r\n setCompanyId(agency.company.id);\r\n setCompany(agency.company.id);\r\n }\r\n }, [agency, companyId, setCompany]);\r\n\r\n useEffect(() => {\r\n if (data) {\r\n const [subscription] = data.company.subscriptions.items;\r\n\r\n if (prevSubStatus.current !== '' && subscription.status !== prevSubStatus.current) {\r\n fetchSession();\r\n }\r\n\r\n prevSubStatus.current = subscription.status;\r\n }\r\n }, [data]);\r\n\r\n useEffect(() => {\r\n if (error) {\r\n onErrorMixinFC(error);\r\n }\r\n }, [error]);\r\n\r\n if (loading) {\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n if (error) {\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n /**\r\n * If user is loading, render a loading component\r\n */\r\n if (loadingUser) {\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n const { company, usersList } = data;\r\n const admins = user.userAdminRelation.items;\r\n const isAdminInCurrentAgency = admins.some(({ company: c }) => c.id === company.id);\r\n\r\n if (!isAdminInCurrentAgency) {\r\n return ;\r\n }\r\n\r\n const [subscription] = company.subscriptions.items;\r\n const [paymentMethod] = company.companyPaymentMethods.items;\r\n const [invoice] = company.companyInvoices.items;\r\n\r\n /**\r\n * If subscription is canceled, show renew subscription component\r\n */\r\n const renewal =\r\n subscription.status === CANCELED || subscription.status === INCOMPLETE ? (\r\n \r\n ) : null;\r\n\r\n /**\r\n * If subscription is canceled, hide the cancel plan card component\r\n */\r\n const cancel =\r\n subscription.status !== CANCELED && subscription.status !== INCOMPLETE ? (\r\n \r\n ) : null;\r\n\r\n if (loading) {\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n \r\n {renewal}\r\n {subscription.status !== CANCELED && subscription.status !== INCOMPLETE && (\r\n \r\n )}\r\n \r\n \r\n {cancel}\r\n \r\n \r\n );\r\n}\r\n\r\n/** export the Component with User Session Data */\r\nexport default withSession(BillingView);\r\n","import gql from 'graphql-tag';\n\nexport const agencyFragment = gql`\n fragment agencyFragment on Agency {\n id\n name\n createdAt\n quoteOfDay {\n title\n }\n company {\n id\n name\n }\n phoneCallSettings {\n id\n automaticCalls\n recordCalls\n campignAssineeFilter\n agency {\n id\n name\n }\n callCadenceConfig\n }\n ifsScore\n voicemailUrl\n }\n`;\n\nexport const QUERY_AGENCY_LIST = gql`\n query FetchAgenciesList($filter: AgencyFilter, $sort: [AgencySort!], $first: Int, $skip: Int) {\n agenciesList(filter: $filter, first: $first, skip: $skip, sort: $sort) {\n count\n items {\n ...agencyFragment\n }\n }\n }\n ${agencyFragment}\n`;\n\nexport const MUTATION_CREATE_AGENCY = gql`\n mutation CreateAgency($data: AgencyCreateInput!) {\n agencyCreate(data: $data) {\n ...agencyFragment\n }\n }\n ${agencyFragment}\n`;\n\nexport const MUTATION_UPDATE_AGENCY = gql`\n mutation UpdateAgency($data: AgencyUpdateInput!, $filter: AgencyKeyFilter) {\n agencyUpdate(data: $data, filter: $filter) {\n id\n name\n }\n }\n`;\n\nexport const MUTATION_DELETE_AGENCY = gql`\n mutation DeleteAgency($filter: AgencyKeyFilter) {\n agencyDelete(filter: $filter, force: true) {\n success\n }\n }\n`;\n","import { ValidationError } from '../../shared/errors';\nimport { isValidEmail, isValidString } from '../../shared/validators';\n\nconst agencyMessage = 'The agency must have a ';\nconst agencyMessageValid = `${agencyMessage} valid`;\nconst messages = {\n name: `${agencyMessageValid} name`,\n company: `${agencyMessageValid} company`,\n agents: `The agents emails must be valid`,\n};\n\nexport const agencyCreateUpdateValidator = (agency) => {\n let errors = [];\n\n if (!isValidString(agency.name)) errors.push(messages.name);\n\n if (!isValidString(agency.companyId)) errors.push(messages.company);\n\n if (agency.agents) {\n let email = agency.agents.find((agentMail) => !isValidEmail(agentMail));\n\n if (email) {\n errors.push(`${messages.agents}, \"${email}\" was given`);\n }\n }\n\n if (errors.length > 0) throw new ValidationError(errors);\n};\n","import { createEvent } from '@cobuildlab/react-simple-state';\n\nexport const OnAgencyError = createEvent();\n\nexport const OnAgencyListFetched = createEvent();\n\nexport const OnAgenyCreateEvent = createEvent();\n\nexport const OnAgencyPhoneCreateError = createEvent();\n\nexport const OnAgencyUpdateEvent = createEvent();\n\nexport const OnAgencyDeleteEvent = createEvent();\n","import { error, log } from '@cobuildlab/pure-logger';\nimport { OnApolloClient, OnSessionFetch } from '../../shared/session/session-events';\nimport { getRolesOnSelectedAgency } from '../../shared/utils/agency-utils';\nimport {\n QUERY_AGENCY_LIST,\n MUTATION_CREATE_AGENCY,\n MUTATION_UPDATE_AGENCY,\n MUTATION_DELETE_AGENCY,\n} from './agency-queries';\nimport { agencyCreateUpdateValidator } from './agency-validators';\nimport { ADMIN } from '../../shared/constants';\nimport {\n OnAgencyDeleteEvent,\n OnAgencyError,\n OnAgencyListFetched,\n OnAgencyUpdateEvent,\n OnAgenyCreateEvent,\n} from './agency-events';\n\n/**\n * Creates a filter object\n *\n * @param {object} filter - the data used to filter the search\n * @param {string} search - Search term used for also filter the search\n *\n * @returns {object} the filter object\n */\nconst createFilter = (filter, search) => {\n const byCompany = filter.company\n ? {\n company: { id: { equals: filter.company } },\n }\n : {\n company: { adminCompanyRelation: { some: { user: { id: { equals: filter.user } } } } },\n };\n\n const byStartDate = filter.startDate\n ? { createdAt: { gte: `${filter.startDate}T00:00:00Z` } }\n : {};\n\n const byEndDate = filter.endDate ? { createdAt: { lte: `${filter.endDate}T00:00:00Z` } } : {};\n\n const bySearch = search ? { OR: [{ name: { contains: search } }] } : {};\n\n return {\n ...byCompany,\n ...bySearch,\n AND: [byStartDate, byEndDate],\n };\n};\n\n/**\n * Generates a sort object\n *\n * @param {string} sort - Sort value\n *\n * @returns {object} The sort object\n */\nconst createSort = (sort) => {\n return {\n ...(sort === 'newest' && { sort: [{ createdAt: 'DESC' }] }),\n ...(sort === 'oldest' && { sort: [{ createdAt: 'ASC' }] }),\n };\n};\n\n/**\n * Fetches the agencies given the filter data\n *\n * @param {number} page - The page to fetch\n * @param {object} data - Object that contains filter data\n * @param {string} search - The search string to filter results\n *\n * @returns {void}\n */\nexport const fetchAgencies = async (page, data, search) => {\n const client = OnApolloClient.get();\n const filter = createFilter(data, search);\n const sort = createSort(data.sort);\n const skip = (page - 1) * 10;\n\n try {\n const response = await client.query({\n query: QUERY_AGENCY_LIST,\n fetchPolicy: 'no-cache',\n variables: { first: 10, skip, filter, ...sort },\n });\n\n log('fetchAgencies', response.data);\n\n return OnAgencyListFetched.dispatch(response.data);\n } catch (e) {\n error('fetchAgencies', e);\n return OnAgencyError.dispatch(e);\n }\n};\n\n/**\n * Stores agency in the database\n *\n * @param {object} agency - The agency object\n *\n * @returns {void}\n */\nexport const createAgency = async (agency) => {\n const client = OnApolloClient.get();\n const { user } = OnSessionFetch.get();\n let response = null;\n\n const data = {\n name: agency.name,\n company: {\n connect: { id: agency.companyId },\n },\n agencyInvitationAgencyRelation: {\n create: agency.invitations,\n },\n ifsScore: agency.ifsScores,\n voicemailUrl: agency.voicemailUrl\n };\n\n try {\n agencyCreateUpdateValidator(agency);\n } catch (e) {\n error('createAgency', e);\n return OnAgencyError.dispatch(e);\n }\n\n try {\n response = await client.mutate({\n mutation: MUTATION_CREATE_AGENCY,\n variables: { data },\n });\n } catch (e) {\n error('createAgency', e);\n return OnAgencyError.dispatch(e);\n }\n\n const { agencyCreate } = response.data;\n\n log('createAgency', response.data);\n\n return OnAgenyCreateEvent.dispatch({ agencyCreate });\n};\n\n/**\n * Updates the agency in db\n *\n * @param {object} agency - The agency object\n *\n * @returns {void}\n */\nexport const updateAgency = async (agency) => {\n const client = OnApolloClient.get();\n const { user } = OnSessionFetch.get();\n console.log('update', agency);\n const variables = {\n data: {\n name: agency.name,\n ifsScore: agency.ifsScores,\n voicemailUrl: agency.voicemailUrl\n },\n filter: {\n id: agency.id,\n },\n };\n\n const roles = getRolesOnSelectedAgency(user, { ...agency, company: { id: agency.id } });\n\n if (roles.includes(ADMIN)) {\n variables.data.company = {\n connect: { id: agency.companyId },\n };\n }\n\n try {\n agencyCreateUpdateValidator(agency);\n\n const response = await client.mutate({\n mutation: MUTATION_UPDATE_AGENCY,\n variables,\n });\n\n log('updateAgency', response.data);\n\n return OnAgencyUpdateEvent.dispatch(response.data);\n } catch (e) {\n error('updateAgency', e);\n return OnAgencyError.dispatch(e);\n }\n};\n\n/**\n * Deletes the given agency from the db\n *\n * @param {number} id - The agency id\n *\n * @returns {void}\n */\nexport const deleteAgency = async (id) => {\n const client = OnApolloClient.get();\n\n try {\n const response = await client.mutate({\n mutation: MUTATION_DELETE_AGENCY,\n variables: { filter: { id } },\n });\n\n log('deleteAgency', response.data);\n\n return OnAgencyDeleteEvent.dispatch(response.data);\n } catch (e) {\n error('deleteAgency', e);\n return OnAgencyError.dispatch(e);\n }\n};\n","import React, { useState } from 'react';\nimport { Dropdown, Icon, Menu } from '@8base/boost';\nimport { DropdownBodyOnTable } from 'shared/components';\nimport { YesNoDialog } from '../../../shared/components';\nimport { deleteAgency } from '../agency-actions';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { OnAgencyDeleteEvent } from '../agency-events';\n\nconst MenuItem = styled(Menu.Item)`\n color: ${({ danger }) => (danger ? '#FF0000' : 'rgb(50, 60, 71)')}!important;\n &:hover {\n ${({ danger }) => (danger ? '' : 'color: #3db4aa !important;')}\n }\n`;\n\nconst BoldText = styled.span`\n font-weight: bold;\n`;\n\nconst AgencyActions = ({ agency, onUpdateClick }) => {\n const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);\n const [isDeleting, setIsDeleting] = useState(false);\n\n const handleDelete = () => {\n setIsDeleting(true);\n deleteAgency(agency.id);\n };\n\n useEventSubscription(OnAgencyDeleteEvent, () => {\n setIsDeleting(false);\n setDeleteDialogOpen(false);\n });\n\n return (\n <>\n \n \n \n \n \n {({ closeDropdown }) => (\n \n )}\n \n setDeleteDialogOpen(false)}\n onClose={() => setDeleteDialogOpen(false)}\n isLoading={isDeleting}\n yesText=\"Yes, Delete\"\n noText=\"Cancel\"\n title=\"Delete Agency\"\n text={\n \n {`Are you sure you want to delete this Agency ?`}\n
\n This action can’t be undone.\n \n }\n />\n \n \n );\n};\n\nAgencyActions.propTypes = {\n agency: PropTypes.shape({\n id: PropTypes.string.isRequired,\n }).isRequired,\n onUpdateClick: PropTypes.func.isRequired,\n};\n\nexport default AgencyActions;\n","export const SORT_OPTIONS = [\n { label: 'Date: Newest First', value: 'newest', field: 'createdAt', orderWay: 'DESC' },\n { label: 'Date: Oldest First', value: 'oldest', field: 'createdAt', orderWay: 'ASC' },\n];\n\nexport const FILTER_CATEGORIES = {\n startDate: {\n title: 'Date Start',\n placeholher: 'Select Date',\n date: {},\n type: 'date',\n identifier: 'startDate',\n },\n endDate: {\n title: 'Date End',\n placeholher: 'Select Date',\n date: {},\n type: 'date',\n identifier: 'endDate',\n },\n companyId: {\n title: 'Company',\n identifier: 'companyId',\n },\n};\n\nexport const FORM_TOOLTIP_STRINGS = {\n agents: {\n tooltipPlacement: 'top',\n tooltipText:\n 'Invite agents using their email address. This will send them an invite to join this agency.',\n },\n managers: {\n tooltipPlacement: 'top',\n tooltipText:\n 'Invite managers using their email address. This will send them an invite to join this agency.',\n },\n};\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Dropdown } from '@8base/boost';\nimport { DropdownBodyOnTable, FilterFooter, FilterCategory } from 'shared/components';\nimport { FILTER_CATEGORIES } from '../agency-model';\nimport filterIconGrey from 'shared/assets/images/filter-grey.svg';\nimport filterIconGreen from 'shared/assets/images/filter-green.svg';\nimport PropTypes from 'prop-types';\n\nconst FilterDropdown = styled(Dropdown)`\n display: inline-block;\n`;\n\nconst DropdownBody = styled.div`\n background-color: #fff;\n position: relative;\n z-index: 2000;\n border: solid 1px #d0d7dd;\n border-radius: 5px;\n`;\n\nconst FilterBody = styled.div`\n display: grid;\n grid-template-rows: repeat(3, min-content);\n grid-template-columns: repeat(2, [col-start] 1fr [col-end]);\n gap: 12px;\n padding: 12px;\n`;\n\nconst FilterBtn = styled.div`\n display: flex;\n border-radius: 5px;\n border: solid 1px ${({ active }) => (active ? '#3db4aa' : '#d0d7dd')};\n padding: 0px 16px;\n height: 36px;\n box-sizing: border-box;\n align-items: center;\n`;\n\nconst FilterIconLabel = styled.span`\n margin-left: 4px;\n font-size: 13px;\n opacity: 0.9;\n ${(props) => (props.active ? 'color: #3db4aa;' : '')}\n`;\n\nconst FilterIcon = styled.img`\n width: 2rem;\n height: 2rem;\n`;\n\nconst AgencyFilter = ({ onConfirm, companies }) => {\n const [filterValues, setFilterValues] = useState({\n startDate: '',\n endDate: '',\n companyId: '',\n });\n const [isOpen, setIsOpen] = useState(false);\n\n const filters = {\n ...FILTER_CATEGORIES,\n companyId: {\n title: 'Company',\n placeholder: 'Select',\n identifier: 'companyId',\n options: [{ label: 'None', value: '' }, ...companies],\n },\n };\n\n const handleFilter = (key, value) => {\n const newState = { ...filterValues };\n newState[key] = value;\n\n if (key === 'startDate') {\n if (newState.startDate > newState.endDate) newState.endDate = '';\n }\n\n setFilterValues(newState);\n };\n\n const categories = Object.entries(filters).map(([key, value]) => (\n \n ));\n\n const icon = isOpen ? : ;\n\n return (\n \n \n setIsOpen(!isOpen)}>\n {icon}\n Filters\n \n \n \n {({ closeDropdown }) => (\n \n {categories}\n onConfirm(filterValues)}\n onCancel={() => null}\n closeDropdown={() => {\n setIsOpen(false);\n closeDropdown();\n }}\n />\n \n )}\n \n \n );\n};\n\nAgencyFilter.propTypes = {\n onConfirm: PropTypes.func.isRequired,\n companies: PropTypes.array.isRequired,\n};\n\nexport default AgencyFilter;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid, styled } from '@8base/boost';\nimport Field from './Field';\n\nconst BtnAddItem = styled.button`\n margin-top: 10px;\n display: flex;\n align-items: center;\n background: transparent;\n outline: none;\n cursor: pointer;\n`;\n\nconst BtnDeleteItem = styled.button`\n margin-top: 28px;\n height: 20px;\n width: 20px;\n border: 1px solid #eb4235;\n border-radius: 100px;\n background: transparent;\n outline: none;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nconst BtnLess = styled.p`\n margin-left: 2px;\n height: 20px;\n width: 20px;\n color: #eb4235;\n font-size: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nconst BtnPlus = styled.p`\n box-sizing: border-box;\n height: 16px;\n width: 16px;\n border: 0.67px solid #3db4aa;\n border-radius: 100px;\n color: #3db4aa;\n font-size: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nconst BtnText = styled.p`\n color: #3db4aa;\n font-family: Poppins;\n font-size: 12px;\n letter-spacing: 0.18px;\n line-height: 20px;\n margin-left: 16px;\n`;\n\n/**\n * Render a list with inputs and its can add or remove new inputs.\n *\n * @param {object} props component props\n * @param {Array} props.data list data\n * @param {string} props.inputPlaceholder placeholder for each input\n * @param {string} props.inputLabel label for each input\n * @param {Function} props.onBlurInput handle on blur\n * @param {Function} props.onDeleteItem handle for deletes an item\n * @param {Function} props.onAddItem handle for creates an item\n * @returns {React.ReactElement} component\n */\nconst ListInputsEditable = ({\n data,\n inputPlaceholder,\n inputLabel,\n btnAddText,\n onBlurInput,\n onDeleteItem,\n onAddItem,\n}) => {\n return (\n <>\n {data.map((item, index) => {\n const label = `${inputLabel} #${index + 1}`;\n\n return (\n \n \n \n \n \n \n -\n \n \n \n );\n })}\n \n \n \n +\n {btnAddText}\n \n \n \n \n );\n};\n\nListInputsEditable.propTypes = {\n data: PropTypes.array.isRequired,\n inputPlaceholder: PropTypes.string.isRequired,\n inputLabel: PropTypes.string.isRequired,\n btnAddText: PropTypes.string.isRequired,\n onBlurInput: PropTypes.func.isRequired,\n onDeleteItem: PropTypes.func.isRequired,\n onAddItem: PropTypes.func.isRequired,\n};\n\nexport default ListInputsEditable;\n","import React, { useState, useEffect } from 'react';\nimport { Form, InputField, SelectField } from '@8base/boost';\nimport { TagsInput } from '../../../../shared/components';\nimport { OnSessionFetch } from '../../../../shared/session/session-events';\nimport ListInputsEditable from '../../../../shared/components/ListInputsEditable';\nimport { IFS_SCORES_DEFAULT } from '@cobuildlab/lead-volt-share';\nimport { ADMIN } from '../../../../shared/constants';\nimport { getRolesOnSelectedAgency } from '../../../../shared/utils/agency-utils';\nimport { fetchVoiceMailMessagesForCalls } from 'modules/phone-calls/voice-mail-message/voice-mail-message-actions';\nimport { FORM_TOOLTIP_STRINGS } from '../../agency-model';\nimport PropTypes from 'prop-types';\n\nexport const AgencyForm = ({ agency, setFormData }) => {\n let initialCompanyId = '';\n const { user } = OnSessionFetch.get();\n\n if (agency) {\n initialCompanyId = agency.company.id;\n } else if (user.userAdminRelation.items.length === 1) {\n initialCompanyId = user.userAdminRelation.items[0].company.id;\n }\n const [name, setName] = useState(agency ? agency.name : '');\n const [companyId, setCompanyId] = useState(initialCompanyId);\n const [voicemailUrl, setVoicemailUrl] = useState(agency ? agency.voicemailUrl : '');\n const [agents, setAgents] = useState([]);\n const [managers, setManagers] = useState([]);\n const [voicemails, setVoicemails] = useState([]);\n const [ifsScores, setIfsScores] = useState([]);\n\n const handleOnBlurIfsScore = (index, event) => {\n const newIfsScores = [...ifsScores];\n newIfsScores[index].value = event.target.value;\n setIfsScores(newIfsScores);\n };\n\n const handleOnAddIfsScore = () => {\n setIfsScores([...ifsScores, { value: '' }]);\n };\n\n const handleOnDeleteIfsScore = (index) => {\n const value = ifsScores[index].value;\n const newIfsScores = [...ifsScores.filter((score) => score.value !== value)];\n setIfsScores(newIfsScores);\n };\n\n const roles = getRolesOnSelectedAgency(user, agency);\n\n useEffect(() => {\n console.log({\n agency,\n name,\n managers,\n agents,\n ifsScores,\n companyId,\n voicemailUrl,\n });\n setFormData({\n agency,\n name,\n managers,\n agents,\n ifsScores,\n companyId,\n voicemailUrl,\n });\n }, [agency, name, agents, managers, ifsScores, companyId, setFormData, voicemailUrl]);\n\n useEffect(() => {\n if (agency?.id) {\n fetchVoicemailList();\n }\n }, [agency, user]);\n\n const fetchVoicemailList = async () => {\n const { voiceMailMessagesList } = await fetchVoiceMailMessagesForCalls({\n agency: agency.id,\n user: [user.id, 'equals'],\n active: [true, 'equals'],\n });\n setVoicemails(voiceMailMessagesList.items);\n };\n\n useEffect(() => {\n const ifsScores = agency\n ? agency.ifsScore.length === 1 && agency.ifsScore[0] === ''\n ? IFS_SCORES_DEFAULT\n : agency.ifsScore\n : IFS_SCORES_DEFAULT;\n setIfsScores(ifsScores.map((score) => ({ value: score })));\n }, [agency]);\n\n return (\n \n );\n};\nAgencyForm.propTypes = {\n agency: PropTypes.shape({\n id: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n company: PropTypes.shape({\n id: PropTypes.string.isRequired,\n }),\n ifsScore: PropTypes.array.isRequired,\n }),\n};\nAgencyForm.defaultProps = {\n agency: null,\n};\n","import React, { useState } from 'react';\nimport { DialogForm } from '../../../shared/components';\nimport { AgencyForm } from './forms/AgencyForm';\nimport PropTypes from 'prop-types';\nconst AgencyFormDialog = ({ agency, isOpen, isLoading, isUpdate, onClose, onSubmit }) => {\n const [formData, setFormData] = useState({ agency });\n const handleSubmit = () => {\n const form = {\n operation: formData.agency ? 'Update' : 'create',\n id: formData.agency ? formData.agency.id : undefined,\n name: formData.name,\n companyId: formData.companyId,\n agents: formData.agents,\n managers: formData.managers,\n ifsScores: formData.ifsScores.map((score) => score.value),\n voicemailUrl: formData.voicemailUrl\n };\n onSubmit(form);\n };\n return (\n \n \n \n );\n};\n\nAgencyFormDialog.propTypes = {\n agency: PropTypes.object,\n isOpen: PropTypes.bool.isRequired,\n isLoading: PropTypes.bool.isRequired,\n isUpdate: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n onSubmit: PropTypes.bool.isRequired,\n};\n\nAgencyFormDialog.defaultProps = {\n agency: null,\n};\n\nexport default AgencyFormDialog;\n","import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport styled from 'styled-components';\nimport { Card, Table, Pagination } from '@8base/boost';\nimport AgencyActions from '../../agency/components/AgencyActions';\nimport AgencyFilter from '../../agency/components/AgencyFilter';\nimport { ListCardBody as ListCard, ItemFilter, SearchInput } from '../../../shared/components';\nimport { DateBox } from 'shared/components';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { useSubscription as useEventSubscription } from '@cobuildlab/react-simple-state';\nimport { fetchAgencies, createAgency, updateAgency } from '../../agency/agency-actions';\nimport { SORT_OPTIONS } from '../../agency/agency-model';\nimport { OnSessionFetch } from '../../../shared/session/session-events';\nimport AgencyFormDialog from '../../agency/components/AgencyFormDialog';\nimport { fetchSession } from '../../auth/auth.actions';\nimport { CreateButton } from 'shared/components';\nimport { Box } from '../../../shared/components/Box';\nimport * as Toast from '../../../shared/components/toast/Toast';\nimport {\n OnAgencyDeleteEvent,\n OnAgencyError,\n OnAgencyListFetched,\n OnAgencyPhoneCreateError,\n OnAgencyUpdateEvent,\n OnAgenyCreateEvent,\n} from 'modules/agency/agency-events';\n\nconst ListCardBody = styled(ListCard)`\n padding: 0 !important;\n`;\n\nconst TableRow = styled(Table.BodyRow)`\n ${(props) => (props.active ? `background-color: #fcfcfc !important` : '')};\n`;\n\nconst StyledHeaderCell = styled(Table.HeaderCell)`\n padding-left: 24px !important;\n`;\n\nconst StyledTableHeader = styled(Table.Header)`\n height: 36px !important;\n`;\n\nconst TableBody = styled(Table.Body)`\n max-height: 50vh;\n height: 50vh;\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\nconst SearchBar = styled(SearchInput)`\n width: 100% !important;\n`;\n\nconst PaginationContainer = styled.div`\n display: flex;\n justify-content: center;\n font-size: 1.2rem;\n padding: 0 1rem;\n\n & > div > div > *::before {\n background-color: var(--color-primary);\n transition: all 0.2s;\n }\n\n & > div > span {\n display: inline-block;\n padding: 0.5rem 1.5rem;\n border: solid 1px #d0d7dd;\n border-radius: 5px;\n }\n`;\n\nconst CustomGrid = styled.div`\n display: grid;\n width: ${(props) => props.width};\n grid-template-columns: ${(props) => props.columns};\n column-gap: ${(props) => props.columnGap};\n grid-template-areas: ${(props) => props.areas};\n ${(props) => (props.alignItems ? `align-items:${props.alignItems} ` : '')};\n`;\n\nconst CustomGridCell = styled.div`\n grid-area: ${(props) => props.area};\n ${(props) => (props.justifySelf ? `justify-self:${props.justifySelf} ` : '')};\n`;\n\nconst TABLE_COLUMUNS = '70px repeat(3,1fr) 100px';\n\nconst AgencyView = () => {\n const [data, setData] = useState({\n agency: null,\n isLoading: true,\n agencies: [],\n count: 0,\n page: 1,\n search: '',\n });\n const [dialog, setDialog] = useState({\n isOpen: false,\n isLoading: false,\n });\n const [deleteDialog, setDeleteDialog] = useState({\n isOpen: false,\n isLoading: false,\n });\n const [filters, setFilters] = useState({\n sort: 'newest',\n startDate: '',\n endDate: '',\n companyId: '',\n });\n\n const paginationRef = useRef(null);\n const searchRef = useRef(null);\n const { user } = OnSessionFetch.get();\n\n /**\n * Function to fetch agencies when component mounts\n *\n * @param {string} search -Search term\n *\n * @returns {void}\n */\n const refreshAgencies = (search = '') => {\n setData((state) => ({\n ...state,\n isLoading: true,\n agencies: [],\n }));\n\n setDialog((state) => ({\n ...state,\n isOpen: false,\n isLoading: false,\n }));\n\n const { companyId } = filters;\n\n fetchAgencies(\n data.page,\n {\n ...filters,\n company: companyId !== '' ? companyId : null,\n user: user.id,\n },\n search,\n );\n\n paginationRef.current.children[0].children[3].childNodes[5].textContent = ' agencies';\n };\n\n useEffect(refreshAgencies, [user.id, data.page, data.search, filters]);\n\n /**\n * Handle submit of the create/update dialog form\n *\n * @param {object} form - The agency attributes to create/edit\n *\n * @returns {void}\n */\n const handleSubmit = (form) => {\n setDialog((state) => ({ ...state, isLoading: true }));\n setDeleteDialog((state) => ({ ...state, isLoading: true }));\n\n if (form.operation === 'create') {\n const invitations = [\n ...form.agents.map((email) => ({\n email,\n type: 'AGENT',\n })),\n ...form.managers.map((email) => ({\n email,\n type: 'MANAGER',\n })),\n ];\n\n createAgency({ ...form, invitations });\n } else if (form.operation === 'Update') {\n updateAgency(form);\n }\n };\n\n const handleFilter = useCallback((newFilters) => {\n setData((state) => ({\n ...state,\n page: 1,\n }));\n setFilters((state) => ({\n ...state,\n startDate: newFilters.startDate,\n endDate: newFilters.endDate,\n companyId: newFilters.companyId,\n }));\n }, []);\n\n // Suscriptions for handling request results\n useEventSubscription(OnAgencyListFetched, ({ agenciesList }) =>\n setData((state) => ({\n ...state,\n agencies: agenciesList.items,\n count: agenciesList.count,\n isLoading: false,\n })),\n );\n\n useEventSubscription(OnAgenyCreateEvent, () => {\n setData((state) => ({\n ...state,\n agency: null,\n }));\n setDialog((state) => ({\n ...state,\n isLoading: false,\n isOpen: false,\n }));\n setDeleteDialog({\n ...deleteDialog,\n isLoading: false,\n isOpen: false,\n });\n\n refreshAgencies();\n });\n\n useEventSubscription(OnAgencyPhoneCreateError, () => {\n Toast.warn(\n 'Could not create phone number automatically on the agency, please create it manually',\n );\n });\n\n useEventSubscription(OnAgencyUpdateEvent, () => {\n setData({\n ...data,\n agency: null,\n });\n setDialog({\n ...dialog,\n isLoading: false,\n isOpen: false,\n });\n setDeleteDialog({\n ...deleteDialog,\n isLoading: false,\n isOpen: false,\n });\n\n refreshAgencies();\n\n fetchSession();\n });\n\n useEventSubscription(OnAgencyError, (err) => {\n setDialog({\n ...dialog,\n isLoading: false,\n });\n setDeleteDialog({\n ...deleteDialog,\n isLoading: false,\n });\n\n onErrorMixinFC(err);\n });\n\n useEventSubscription(OnAgencyDeleteEvent, () => {\n setData({\n ...data,\n agency: null,\n });\n setDialog({\n ...dialog,\n isLoading: false,\n isOpen: false,\n });\n setDeleteDialog({\n ...deleteDialog,\n isLoading: false,\n isOpen: false,\n });\n\n refreshAgencies();\n });\n\n const pageOffset = (data.page - 1) * 10;\n\n return (\n \n \n \n \n \n refreshAgencies(searchRef.current.value)}\n />\n \n \n ({\n label: company.name,\n value: company.id,\n }))}\n onConfirm={handleFilter}\n />\n \n \n \n {\n setFilters({ ...filters, sort: value });\n setData({ ...data, page: 1 });\n }}\n value={filters.sort}\n options={SORT_OPTIONS}\n placeholder=\"Sort agencies by\"\n />\n \n \n {\n setData({\n ...data,\n agency: !dialog.isOpen ? null : data.agency,\n });\n setDialog({\n ...dialog,\n isOpen: !dialog.isOpen,\n });\n }}\n text=\"Create Agency\"\n />\n \n \n \n \n \n \n \n Name\n Company\n Created At\n Action\n \n \n {(agency, i) => (\n \n {i + 1 + pageOffset}\n {agency.name}\n {agency.company.name}\n {/**/}\n {/* {agency.quoteOfDay ? agency.quoteOfDay.title : '-'}*/}\n {/**/}\n \n \n \n \n {\n setData({ ...data, agency });\n setDialog({ ...dialog, isOpen: true });\n }}\n />\n \n \n )}\n \n \n \n setData({ ...data, page })}\n defaultPage={1}\n total={data.count}\n page={data.page}\n />\n \n \n
\n \n {\n setData({\n ...data,\n agency: !dialog.isOpen ? null : data.agency,\n });\n setDialog({\n ...dialog,\n isOpen: !dialog.isOpen,\n });\n }}\n onSubmit={handleSubmit}\n isUpdate={data.agency === null ? false : true}\n />\n \n \n );\n};\n\nexport { AgencyView };\n","import React, { useState, useEffect, useMemo } from 'react';\nimport { Heading } from '@8base/boost';\nimport PropTypes from 'prop-types';\nimport { Link, Route, Switch, Redirect, withRouter } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { OnSessionFetch } from '../../shared/session/session-events';\nimport { ADMIN, MANAGER, AGENT } from '../../shared/constants/index';\nimport { useAgency } from '../../shared/hooks/useAgency';\nimport { userHasAnyRoleInAgency } from '../../shared/utils/agency-utils';\nimport { isCompanyAvailable } from '../../shared/utils/company-utils';\nimport { Box } from '../../shared/components/Box';\nimport { InvitationsView } from '../my-account/invitations/InvitationsView';\nimport CompanyView from '../my-account/company/CompanyView';\nimport CompanyInvitationsView from '../my-account/company-invitations/CompanyInvitationsView';\nimport VendorsView from '../vendors/VendorsView';\nimport PhoneNumberView from '../my-account/phone-numbers/PhoneNumberView';\nimport InboundService from './inbound/InboundService';\nimport OutboundService from './outbound/OutboundService';\nimport PhoneCallSettings from './phone-calls/PhoneCallSettings';\nimport VoiceMailMessages from './voice-mail-messages/VoiceMailMessages';\nimport RegistrationStatus from './registration-status/RegistrationStatus';\nimport { GeneralView } from '../my-account/general/GeneralView';\nimport { EmailView } from '../my-account/email/EmailView';\nimport { TeamView } from '../my-account/team/TeamView';\nimport BillingView from '../my-account/billing/BillingView';\nimport { AgencyView } from '../my-account/agency/AgencyView';\n\nexport const routes = [\n {\n name: 'Profile',\n path: '/settings/general',\n auth: [ADMIN, MANAGER, AGENT],\n },\n {\n name: 'Email',\n path: '/settings/email',\n auth: [ADMIN, MANAGER, AGENT],\n },\n {\n name: 'Agencies',\n path: '/settings/agency',\n auth: [ADMIN, MANAGER],\n },\n {\n name: 'Agency Invitations',\n path: '/settings/invitations',\n auth: [ADMIN, MANAGER],\n },\n {\n name: 'Company',\n path: '/settings/company',\n auth: [ADMIN],\n },\n {\n name: 'Company Invitations',\n path: '/settings/company-invitations',\n auth: [ADMIN],\n },\n // {\n // name: 'Status Mapping',\n // path: '/settings/status-mapping',\n // },\n {\n name: 'Billing',\n path: '/settings/billing',\n auth: [ADMIN],\n allow: true,\n },\n {\n name: 'Team',\n path: '/settings/team',\n auth: [ADMIN, MANAGER],\n },\n {\n name: 'Phone numbers',\n path: '/settings/phone-numbers',\n auth: [ADMIN, MANAGER],\n },\n {\n name: 'Outbound Email Services',\n path: '/settings/services/email/outbound',\n auth: [ADMIN, MANAGER, AGENT],\n },\n {\n name: 'Inbound Email Services',\n path: '/settings/services/email/inbound',\n auth: [ADMIN, MANAGER, AGENT],\n },\n {\n name: 'Vendors',\n path: '/settings/vendors',\n auth: [ADMIN, MANAGER],\n },\n {\n name: 'Phone Call Settings',\n path: '/settings/phone-call',\n auth: [ADMIN, MANAGER],\n },\n {\n name: 'Voice Mail Messages',\n path: '/settings/voice-mail-messages',\n auth: [ADMIN, MANAGER, AGENT],\n },\n {\n name: 'Telephony Registration',\n path: '/settings/telephony-registration',\n auth: [ADMIN, MANAGER],\n },\n];\n\nconst Container = styled.div`\n height: calc(100vh - 91px);\n width: 100%;\n background-color: #f4f5f6;\n display: flex;\n flex-direction: row;\n`;\n\nconst Sidebar = styled.div`\n height: calc(100vh - 91px);\n width: 250px;\n display: flex;\n flex-direction: column;\n padding: 24px 0px;\n box-shadow: 2px 0px 5px 0 rgb(50, 50, 93, 0.14);\n`;\n\nconst Content = styled.div`\n width: 100%;\n height: calc(100vh - 91px);\n max-height: calc(100vh - 91px);\n overflow: auto;\n`;\n\nconst List = styled.ul`\n width: 100%;\n list-style: none;\n`;\n\nconst Li = styled.li`\n width: 99%;\n height: 32px;\n ${(props) =>\n props.active &&\n `\n background-color: #fff;\n border-left: 2.5px solid #3db4aa;\n a {\n color: #3db4aa;\n }\n `}\n\n &:hover {\n background-color: #fff;\n border-left: 2.5px solid #3db4aa;\n }\n`;\n\nconst StyledLink = styled(Link)`\n color: #323c47;\n text-decoration: none;\n height: 100%;\n padding-left: 24px;\n display: flex;\n align-items: center;\n ${(props) => (props.active ? 'color: #3db4aa;' : '')}\n &:hover {\n color: #3db4aa;\n }\n`;\n\nconst SettingsView = ({ history }) => {\n const [pathnameActive, setPathnameActive] = useState(window.location.pathname);\n const { user } = OnSessionFetch.get();\n const agency = useAgency();\n\n useEffect(() => {\n const unlisten = history.listen((location) => setPathnameActive(location.pathname));\n\n return () => unlisten();\n }, [history]);\n\n const isCompanyPaid = isCompanyAvailable(agency);\n const items = useMemo(\n () =>\n routes\n .filter(\n (route) =>\n !route.auth ||\n (userHasAnyRoleInAgency(user, agency, route.auth) &&\n (!isCompanyPaid ? route.allow : true)),\n )\n .map((route) => {\n const isActive = pathnameActive === route.path;\n\n return (\n \n \n {route.name}\n \n \n );\n }),\n [user, agency, pathnameActive, isCompanyPaid],\n );\n\n // if (!isCompanyPaid) {\n // return null;\n // }\n\n return (\n \n \n \n Settings\n \n {items}
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nSettingsView.propTypes = {\n history: PropTypes.object.isRequired,\n};\n\nexport default withRouter(SettingsView);\n","import { error, log } from '@cobuildlab/pure-logger';\nimport {\n FETCH_PHONE_CALL_RECORDINGS,\n DELETE_PHONE_CALL_RECORDING,\n} from './phone-call-recordings-queries';\nimport { OnApolloClient } from '../../../shared/session/session-events';\nimport {\n OnDeletePhoneCallRecordingError,\n OnDeletePhoneCallRecordingEvent,\n OnFetchPhoneCallRecordingsError,\n OnFetchPhoneCallRecordingsEvent,\n} from '../phone-calls-events';\n\n/**\n * Fetches the Phone Call Recordings by filter and page\n *\n * @param {object} filter - The parameters to filter the results\n * @param {number} page - The page to fetch results from\n *\n * @returns {Promise} Request result\n */\nexport const fetchPhoneCallRecordings = async (filter, page = 1) => {\n const client = OnApolloClient.get();\n const first = 10;\n const skip = first * (page - 1);\n const orderBy = 'createdAt_DESC';\n let response = null;\n\n try {\n response = await client.query({\n query: FETCH_PHONE_CALL_RECORDINGS,\n variables: { filter, first, skip, orderBy },\n fetchPolicy: 'network-only',\n });\n } catch (e) {\n error('fetchPhoneCallRecordings', e);\n OnFetchPhoneCallRecordingsError.dispatch(e);\n\n return;\n }\n\n log('fetchPhoneCallRecordings', response.data);\n OnFetchPhoneCallRecordingsEvent.dispatch(response.data);\n};\n\n/**\n * Deletes the specified phone call recording\n *\n * @param {string} id - Phone call recording id\n *\n * @returns {Promise} The request result\n */\nexport const deletePhoneCallRecording = async (id) => {\n const client = OnApolloClient.get();\n let response = null;\n\n try {\n response = await client.mutate({\n mutation: DELETE_PHONE_CALL_RECORDING,\n variables: { data: { id } },\n });\n } catch (e) {\n error('deletePhoneCallRecording', e);\n OnDeletePhoneCallRecordingError.dispatch(e);\n\n return;\n }\n\n log('deletePhoneCallRecording', response.data);\n OnDeletePhoneCallRecordingEvent.dispatch(response.data);\n};\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { Card, Paper, Row, Table, Column, Pagination, Icon, Dropdown, Menu } from '@8base/boost';\nimport {\n fetchPhoneCallRecordings,\n deletePhoneCallRecording,\n} from '../../phone-calls/phone-call-recordings/phone-call-recordings-actions';\nimport { useSubscription as useSimpleSubscription } from '@cobuildlab/react-simple-state';\nimport * as Toast from '../../../shared/components/toast/Toast';\nimport { onErrorMixinFC } from '../../../shared/mixins';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport { formatPhoneNumber, formatDuration } from '../../phone-calls/phone-calls-utils';\nimport { CALL_TYPES } from '../../phone-calls/phone-calls-model';\nimport { DateBox, YesNoDialog } from '../../../shared/components';\nimport AudioPlayer from 'react-h5-audio-player';\nimport styled from 'styled-components';\nimport 'react-h5-audio-player/lib/styles.css';\nimport {\n OnDeletePhoneCallRecordingError,\n OnDeletePhoneCallRecordingEvent,\n OnFetchPhoneCallRecordingsError,\n OnFetchPhoneCallRecordingsEvent,\n} from 'modules/phone-calls/phone-calls-events';\n\nconst PlayerCell = styled(Table.BodyCell)`\n padding-left: 0px !important;\n`;\n\nconst TableBody = styled(Table.Body)`\n min-height: 250px;\n`;\n\nconst MenuItem = styled(Menu.Item)`\n color: ${({ danger }) => (danger ? '#FF0000' : 'rgb(50, 60, 71)')}!important;\n &:hover {\n ${({ danger }) => (danger ? '' : 'color: #3db4aa !important;')}\n }\n`;\n\n/**\n * Renders the record calls configuration view\n *\n * @param {object} props - Props object passed to this component\n *\n * @returns {React.FC} The component to render\n */\nfunction PhoneCallRecordings(props) {\n const [loading, setLoading] = useState(true);\n const [page, setPage] = useState(1);\n const [recordings, setRecordings] = useState([]);\n const [count, setCount] = useState(0);\n const agency = useAgency();\n const [del, setDelete] = useState({ open: false, loading: false, selected: null });\n\n const refresh = useCallback(() => {\n // const filter = { call: { agency: { id: { equals: agency.id } } } };\n const filter = {\n OR: [\n { call: { agency: { id: { equals: agency.id } } } },\n {\n inboundCall: { agency: { id: { equals: agency.id } } },\n },\n ],\n };\n\n setLoading(true);\n\n fetchPhoneCallRecordings(filter, page);\n }, [agency.id, page]);\n\n const handleDelete = useCallback(\n (recording) => {\n setDelete({ ...del, open: true, selected: recording });\n },\n [del],\n );\n\n const handleConfirmDelete = useCallback(() => {\n deletePhoneCallRecording(del.selected.id);\n\n setDelete({ ...del, loading: true });\n }, [del]);\n\n useEffect(() => {\n refresh();\n }, [refresh]);\n\n useSimpleSubscription(OnFetchPhoneCallRecordingsEvent, ({ phoneCallRecordingsList }) => {\n setLoading(false);\n\n setRecordings(phoneCallRecordingsList.items);\n setCount(phoneCallRecordingsList.count);\n });\n\n useSimpleSubscription(OnDeletePhoneCallRecordingEvent, () => {\n Toast.success('Success', 'Recording deleted successfully!');\n\n setDelete({ ...del, open: false, loading: false, selected: null });\n\n if (page === 1) {\n refresh();\n } else {\n setPage(1);\n }\n });\n\n useSimpleSubscription(OnFetchPhoneCallRecordingsError, (err) => {\n onErrorMixinFC(err);\n });\n\n useSimpleSubscription(OnDeletePhoneCallRecordingError, (err) => {\n onErrorMixinFC(err);\n\n setDelete({ ...del, loading: false });\n });\n\n console.log('recordings', recordings);\n\n return (\n \n \n \n \n \n \n Date\n From\n To\n Duration\n Play\n Actions\n \n \n {(recording) => {\n const call = recording.call || recording.inboundCall;\n const recordingType = recording.call ? CALL_TYPES.OUTBOUND : CALL_TYPES.INBOUND;\n\n const from =\n recordingType === CALL_TYPES.OUTBOUND\n ? `${call.user.firstName} ${call.user.lastName} ${formatPhoneNumber(\n `+${call.from.number.code}${call.from.number.number}`,\n )}`\n : formatPhoneNumber(call.from);\n\n const to =\n recordingType === CALL_TYPES.OUTBOUND\n ? call.lead\n ? `${call.lead.firstName} ${call.lead.lastName} ${formatPhoneNumber(call.to)}`\n : formatPhoneNumber(call.to)\n : `+${call.to.number.code}${call.to.number.number}`;\n\n return (\n \n \n \n \n {from}\n {to}\n {formatDuration(recording.duration * 1000)}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }}\n \n \n \n \n
\n \n
\n \n \n setDelete({ open: false, loading: false, selected: null })}\n onClose={() => setDelete({ open: false, loading: false, selected: null })}\n title=\"Delete Phone Call Recording\"\n text=\"Are you sure you want to delete this phone call recording ?\"\n />\n \n );\n}\n\nexport default PhoneCallRecordings;\n","import React from 'react';\r\nimport { Dropdown } from '@8base/boost';\r\nimport styled from 'styled-components';\r\nimport { PropTypes } from 'prop-types';\r\nimport { DropdownBodyOnTable, FilterFooter, FilterCategory } from 'shared/components';\r\nimport filterIconGrey from 'shared/assets/images/filter-grey.svg';\r\nimport filterIconGreen from 'shared/assets/images/filter-green.svg';\r\n\r\nconst FilterDropdown = styled(Dropdown)`\r\n display: inline-block;\r\n`;\r\n\r\nconst DropdownBody = styled.div`\r\n background-color: #fff;\r\n position: relative;\r\n z-index: 2000;\r\n border: solid 1px #d0d7dd;\r\n border-radius: 5px;\r\n`;\r\n\r\nconst FilterBody = styled.div`\r\n display: grid;\r\n grid-template-rows: repeat(3, min-content);\r\n grid-template-columns: repeat(${(props) => props.columnsNumber}, [col-start] 1fr [col-end]);\r\n gap: 12px;\r\n padding: 12px;\r\n`;\r\n\r\nconst FilterBtn = styled.div`\r\n display: flex;\r\n border-radius: 5px;\r\n border: solid 1px ${({ active }) => (active ? '#3db4aa' : '#d0d7dd')};\r\n padding: 0px 16px;\r\n height: 36px;\r\n box-sizing: border-box;\r\n align-items: center;\r\n`;\r\n\r\nconst FilterIconLabel = styled.span`\r\n margin-left: 4px;\r\n font-size: 13px;\r\n opacity: 0.9;\r\n ${(props) => (props.active ? 'color: #3db4aa;' : '')}\r\n`;\r\n\r\nconst FilterIcon = styled.img`\r\n width: 2rem;\r\n height: 2rem;\r\n`;\r\n\r\nconst LogFilter = (props) => {\r\n const categories = Object.entries(props.categories).map(([identifier, category]) => (\r\n \r\n ));\r\n const icon = props.active ? (\r\n \r\n ) : (\r\n \r\n );\r\n\r\n return (\r\n \r\n \r\n props.onFilterClick()}>\r\n {icon}\r\n Filters\r\n \r\n \r\n \r\n {({ closeDropdown }) => (\r\n \r\n {categories}\r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nLogFilter.propTypes = {\r\n onConfirm: PropTypes.func.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n onFilterClick: PropTypes.func.isRequired,\r\n active: PropTypes.bool.isRequired,\r\n categories: PropTypes.object.isRequired,\r\n values: PropTypes.object.isRequired,\r\n onFilter: PropTypes.func.isRequired,\r\n};\r\nLogFilter.defaultProps = {\r\n columnsNumber: 2,\r\n};\r\n\r\nexport default LogFilter;\r\n","import { useSubscription } from '@cobuildlab/react-simple-state';\nimport { useCallback, useEffect, useState } from 'react';\nimport { fetchAgencyEmails } from '../../../email/email-actions';\nimport { OnFetchEmails, OnFetchEmailsError } from '../../../email/email-store';\n\nconst initialState = {\n items: [],\n count: 0,\n loading: true,\n error: null,\n};\n\n/**\n * Hook that fetches agency emails\n *\n * @param {string} agency - The agency id\n * @param {object} filters - Data to filter the results\n * @param {string} sort - Order to return the results\n *\n * @returns {object} The hook state\n */\nexport function useAgencyEmails(agency, filters = {}, sort = '') {\n const [state, setState] = useState(initialState);\n const [page, setPage] = useState(1);\n\n const fetch = useCallback(() => {\n setState((prevState) => ({ ...prevState, items: [], loading: true }));\n\n fetchAgencyEmails(agency, page, sort, filters);\n }, [agency, filters, sort, page]);\n\n useSubscription(\n OnFetchEmails,\n ({ mailList }) => {\n setState((prevState) => ({\n ...prevState,\n items: mailList.items,\n count: mailList.count,\n loading: false,\n error: null,\n }));\n },\n [],\n );\n\n useSubscription(\n OnFetchEmailsError,\n (e) => {\n setState((prevState) => ({\n ...prevState,\n error: e,\n loading: false,\n }));\n },\n [],\n );\n\n useEffect(() => {\n fetch();\n }, [fetch]);\n\n return {\n ...state,\n page,\n setPage,\n refresh: fetch,\n };\n}\n","import React, { useMemo } from 'react';\nimport { Table, Tag, Text, Link, Column } from '@8base/boost';\nimport { EMAIL_TYPES } from '@cobuildlab/lead-volt-share';\nimport { DateBox } from '../../../../shared/components';\nimport PropTypes from 'prop-types';\n\nexport const EmailLogRow = ({ email, columns }) => {\n const { lead } = email;\n let type = null;\n\n if (email.type === EMAIL_TYPES.INBOX) {\n type = Incoming;\n } else {\n type = Outgoing;\n }\n\n const to = useMemo(() => {\n return email?.to?.split(',').map((address, i) => {address});\n }, [email.to]);\n\n const cc = useMemo(\n () => email.ccopy.split(',').map((address, i) => {address}),\n [email.ccopy],\n );\n\n return (\n \n {type}\n \n \n {`${lead.firstName} ${lead.lastName}`}\n \n \n \n {email.from}\n \n \n \n {to}\n \n \n \n \n {cc}\n \n \n \n \n \n \n );\n};\n\nEmailLogRow.propTypes = {\n columns: PropTypes.string.isRequired,\n email: PropTypes.shape({\n from: PropTypes.string.isRequired,\n to: PropTypes.string.isRequired,\n ccopy: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n lead: PropTypes.shape({\n id: PropTypes.string.isRequired,\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n }).isRequired,\n createdAt: PropTypes.string.isRequired,\n }).isRequired,\n};\n","import React, { useState, useEffect, useCallback } from 'react';\r\nimport { Card, Table, Pagination, Row } from '@8base/boost';\r\nimport { useSubscription as useSimpleSubscription } from '@cobuildlab/react-simple-state';\r\nimport { fetchManagerAndAgents } from '../../users/user-actions';\r\nimport { ItemFilter as SortFilter } from 'shared/components';\r\nimport { SORT_OPTIONS, FILTER_CATEGORIES } from '../../email/email-model';\r\nimport { onErrorMixinFC } from 'shared/mixins';\r\nimport { useAgency } from 'shared/hooks/useAgency';\r\nimport LogFilter from './components/LogFilter';\r\nimport * as R from 'ramda';\r\nimport styled from 'styled-components';\r\nimport { useAgencyEmails } from './hooks/useAgencyEmails';\r\nimport { EmailLogRow } from './components/EmailLogRow';\r\nimport { Box } from '../../../shared/components/Box';\r\nimport {\r\n OnFetchManagerAndAgentUsersError,\r\n OnFetchManagerAndAgentUsersEvent,\r\n} from 'modules/users/user-events';\r\n\r\nconst TableBody = styled(Table.Body)`\r\n min-height: 400px;\r\n`;\r\n\r\nconst columns =\r\n '150px minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) 150px';\r\n\r\nconst EmailLogs = () => {\r\n const agency = useAgency();\r\n const [filter, setFilter] = useState({});\r\n const [filters, setFilters] = useState({});\r\n const [sort, setSort] = useState('');\r\n const { items, count, loading, error, page, setPage } = useAgencyEmails(agency.id, filters, sort);\r\n const [open, setOpen] = useState(false);\r\n const [categories, setCategories] = useState(FILTER_CATEGORIES);\r\n\r\n useEffect(() => {\r\n fetchManagerAndAgents(agency.id);\r\n }, [agency.id]);\r\n\r\n useEffect(() => {\r\n if (error) {\r\n onErrorMixinFC(error);\r\n }\r\n }, [error]);\r\n\r\n useSimpleSubscription(OnFetchManagerAndAgentUsersEvent, ({ usersList }) => {\r\n const options = R.clone(categories);\r\n\r\n options.assignedTo.options = [\r\n { label: 'None', value: '' },\r\n ...usersList.items.map((user) => ({\r\n label: `${user.firstName} ${user.lastName}`,\r\n value: user.id,\r\n })),\r\n ];\r\n\r\n setCategories(options);\r\n });\r\n\r\n useSimpleSubscription(OnFetchManagerAndAgentUsersError, (e) => {\r\n onErrorMixinFC(e);\r\n });\r\n\r\n const onConfirm = useCallback(() => {\r\n setOpen(false);\r\n\r\n setFilters(filter);\r\n }, [filter]);\r\n\r\n const onFilter = useCallback((name, value) => {\r\n setFilter((prevState) => ({\r\n ...prevState,\r\n [name]: value,\r\n ...(name === 'dateStart' && value > prevState.dateEnd\r\n ? {\r\n dateEnd: '',\r\n }\r\n : {}),\r\n }));\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n \r\n setOpen(true)}\r\n active={open}\r\n onFilter={onFilter}\r\n values={filter}\r\n categories={categories}\r\n onConfirm={onConfirm}\r\n onCancel={() => setOpen(false)}\r\n />\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Type\r\n Lead\r\n From\r\n To\r\n Cc\r\n Date\r\n \r\n \r\n {(email) => }\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default EmailLogs;\r\n","import React, { useMemo } from 'react';\nimport { Table, Link, Tag, Text, Paragraph } from '@8base/boost';\nimport { DateBox } from 'shared/components';\nimport PropTypes from 'prop-types';\n\nexport const SmsRow = ({ message, columns }) => {\n let fromComponent = null;\n let toComponent = null;\n let typeComponent = null;\n\n const fromNumber = useMemo(() => {\n return message.from\n ? `+${message.from.number.code} ${message.from.number.number}`\n : message.receivedFrom\n ? `+1 ${message.receivedFrom}`\n : 'No information';\n }, [message]);\n\n const toNumber = useMemo(() => {\n return message.to ? `+1 ${message.to}` : 'No information';\n }, [message]);\n\n if (message.type === 'INCOMING') {\n fromComponent = message.lead ? (\n \n {message.lead.firstName} {message.lead.lastName}\n \n ) : (\n fromNumber\n );\n\n toComponent = toNumber;\n\n typeComponent = {message.type.toLowerCase()};\n } else {\n fromComponent = message.user ? (\n \n {`${message.user.firstName} ${message.user.lastName}`}
\n {fromNumber}\n \n ) : (\n `${fromNumber}`\n );\n\n toComponent = message.lead ? (\n \n {message.lead.firstName} {message.lead.lastName}\n \n ) : (\n toNumber\n );\n\n typeComponent = {message.type.toLowerCase()};\n }\n\n return (\n \n {fromComponent}\n {toComponent}\n {typeComponent}\n \n {message.text}\n \n \n \n \n \n );\n};\n\nSmsRow.propTypes = {\n message: PropTypes.shape({\n id: PropTypes.string.isRequired,\n type: PropTypes.oneOf(['INCOMING', 'OUTGOING']),\n lead: PropTypes.shape({\n id: PropTypes.string.isRequired,\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n }),\n receivedFrom: PropTypes.string,\n from: PropTypes.shape({\n number: PropTypes.shape({\n code: PropTypes.string,\n number: PropTypes.string,\n }),\n }),\n user: PropTypes.shape({\n id: PropTypes.string.isRequired,\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n }),\n to: PropTypes.string,\n text: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n }).isRequired,\n columns: PropTypes.string.isRequired,\n};\n","import React, { useState, useEffect, useCallback } from 'react';\r\nimport { Table, Paper, Pagination } from '@8base/boost';\r\nimport { useSubscription as useSimpleSubscription } from '@cobuildlab/react-simple-state';\r\nimport { fetchSMSMessages } from '../../leads/leads-actions';\r\nimport { SMS_FILTER_DATA, SMS_FILTER_CATEGORIES, SMS_SORT_OPTIONS } from '../../leads/leads-model';\r\nimport { fetchManagerAndAgents } from '../../users/user-actions';\r\nimport { ItemFilter } from 'shared/components';\r\nimport styled from 'styled-components';\r\nimport { onErrorMixinFC } from 'shared/mixins';\r\nimport { useAgency } from 'shared/hooks/useAgency';\r\nimport LogFilter from '../email-logs/components/LogFilter';\r\nimport * as toast from 'shared/components/toast/Toast';\r\nimport * as R from 'ramda';\r\nimport { SmsRow } from './SmsRow';\r\nimport { OnFetchSmsListEvent, OnLeadsError } from 'modules/leads/leads-events';\r\nimport {\r\n OnFetchManagerAndAgentUsersError,\r\n OnFetchManagerAndAgentUsersEvent,\r\n} from 'modules/users/user-events';\r\n\r\nconst TableHeader = styled(Table.Header)``;\r\n\r\nconst TableBody = styled(Table.Body)``;\r\n\r\nconst CardHeader = styled.div`\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n height: 64px;\r\n border-bottom: 1px solid #e8eff5;\r\n padding: 0 24px;\r\n position: relative;\r\n`;\r\n\r\nconst HeaderLeftSide = styled.div`\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n`;\r\n\r\nconst HeaderRightSide = styled.div`\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n > div {\r\n margin-left: 15px;\r\n max-width: 200px;\r\n }\r\n`;\r\n\r\nconst CardBody = styled.div`\r\n overflow: auto;\r\n padding: 0;\r\n`;\r\n\r\nconst PaginationContainer = styled.div`\r\n display: flex;\r\n justify-content: center;\r\n font-size: 1.2rem;\r\n padding: 0 1rem;\r\n\r\n & > div > div > *::before {\r\n background-color: var(--color-primary);\r\n transition: all 0.2s;\r\n }\r\n\r\n & > div > span {\r\n display: inline-block;\r\n padding: 0.5rem 1.5rem;\r\n border: solid 1px #d0d7dd;\r\n border-radius: 5px;\r\n }\r\n`;\r\n\r\n/**\r\n * Component to fetch the Logs of the Lead SMS Messages\r\n *\r\n * @returns {React.Component} Return the Component.\r\n */\r\n\r\nconst SmsLogs = () => {\r\n const agency = useAgency();\r\n\r\n const [smsMessages, setSmsMessages] = useState([]);\r\n const [page, setPage] = useState(1);\r\n const [filter, setFilter] = useState(R.clone(SMS_FILTER_DATA));\r\n const [currentFilter, setCurrentFilter] = useState(R.clone(SMS_FILTER_DATA));\r\n const [showFilter, setShowFilter] = useState(false);\r\n const [filterCategories, setFilterCategories] = useState(R.clone(SMS_FILTER_CATEGORIES));\r\n const [loading, setLoading] = useState(true);\r\n\r\n useSimpleSubscription(OnFetchSmsListEvent, ({ sMSMessagesList }) => {\r\n setSmsMessages(sMSMessagesList);\r\n setLoading(false);\r\n });\r\n\r\n useSimpleSubscription(OnLeadsError, (err) => {\r\n console.log(err);\r\n onErrorMixinFC(err);\r\n });\r\n\r\n useSimpleSubscription(OnFetchManagerAndAgentUsersEvent, ({ usersList }) => {\r\n const categoriesClone = R.clone(filterCategories);\r\n\r\n categoriesClone.assignedTo.options = usersList.items.map((user) => ({\r\n label: `${user.firstName} ${user.lastName}`,\r\n value: user.id,\r\n }));\r\n\r\n setFilterCategories(categoriesClone);\r\n });\r\n\r\n useSimpleSubscription(OnFetchManagerAndAgentUsersError, () => {\r\n toast.error('Users Managment', 'There was an error fetching the users, please try again.');\r\n });\r\n\r\n const filterHandler = useCallback(\r\n (identifier, value) => {\r\n //console.log('filterHandlre called');\r\n const newFilter = { ...filter };\r\n newFilter[identifier] = value;\r\n if (identifier === 'dateStart') {\r\n if (newFilter.dateStart > newFilter.dateEnd) {\r\n newFilter.dateEnd = '';\r\n }\r\n }\r\n //console.log('newFilter', newFilter);\r\n setFilter(newFilter);\r\n },\r\n [filter],\r\n );\r\n\r\n const confirmFilterHandler = useCallback(() => {\r\n setShowFilter(false);\r\n setCurrentFilter(filter);\r\n setLoading(true);\r\n }, [filter]);\r\n\r\n const sortHandler = (value) => {\r\n const newState = R.clone(currentFilter);\r\n newState.sort = value;\r\n setCurrentFilter(newState);\r\n setLoading(true);\r\n };\r\n\r\n const filterClickHandler = () => {\r\n setShowFilter(true);\r\n };\r\n\r\n const handlePageChanger = (page) => {\r\n console.log(page);\r\n setPage(page);\r\n setLoading(true);\r\n };\r\n\r\n const getSmsMessages = () => {\r\n fetchSMSMessages(page, { ...currentFilter, agency: agency.id });\r\n };\r\n\r\n const getAgents = () => {\r\n fetchManagerAndAgents(agency.id);\r\n };\r\n\r\n useEffect(() => {\r\n if (loading) {\r\n getSmsMessages();\r\n getAgents();\r\n }\r\n // eslint-disable-next-line\r\n }, [loading]);\r\n\r\n const columnsSize = 'minmax(150px, 250px) minmax(150px, 250px) 150px minmax(150px, 1fr) 150px';\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {\r\n setFilter(currentFilter);\r\n }}\r\n />\r\n {\r\n sortHandler(value);\r\n }}\r\n value={currentFilter.sort}\r\n options={SMS_SORT_OPTIONS}\r\n placeholder=\"Sort SMS Logs by Date (Newest/Oldest)\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n From\r\n To\r\n Type\r\n Text\r\n Date\r\n \r\n \r\n {(smsMessage) => }\r\n \r\n \r\n \r\n {\r\n handlePageChanger(page);\r\n }}\r\n defaultPage={1}\r\n total={smsMessages.count}\r\n page={page}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default SmsLogs;\r\n","import React, { useState, useEffect, useCallback } from 'react';\r\nimport { Table, Paper, Dialog, Pagination } from '@8base/boost';\r\nimport { useSubscription as useSimpleSubscription } from '@cobuildlab/react-simple-state';\r\nimport { fetchPhoneCalls } from '../../phone-calls/phone-calls-actions';\r\nimport {\r\n FILTER_DATA,\r\n FILTER_CATEGORIES_OUTBOUND,\r\n SORT_OPTIONS,\r\n} from '../../phone-calls/phone-calls-model';\r\nimport { fetchManagerAndAgents } from '../../users/user-actions';\r\nimport { ItemFilter } from 'shared/components';\r\nimport FormValues from '../../../shared/components/forms/FormValues';\r\nimport { onErrorMixinFC } from 'shared/mixins';\r\nimport { DateBox } from 'shared/components';\r\nimport { useAgency } from 'shared/hooks/useAgency';\r\nimport LogFilter from '../email-logs/components/LogFilter';\r\nimport styled from 'styled-components';\r\nimport * as toast from 'shared/components/toast/Toast';\r\nimport * as R from 'ramda';\r\nimport { IconInfo } from '../../../shared/components/ui/Icons';\r\nimport { getPhoneNumberStr } from '../../my-account/phone-numbers/phone-numbers-utils';\r\nimport { formatPhoneNumber } from '../../phone-calls/phone-calls-utils';\r\nimport moment from 'moment';\r\nimport {\r\n OnFetchOutboundCallsError,\r\n OnFetchOutboundCallsEvent,\r\n} from 'modules/phone-calls/phone-calls-events';\r\nimport {\r\n OnFetchManagerAndAgentUsersError,\r\n OnFetchManagerAndAgentUsersEvent,\r\n} from 'modules/users/user-events';\r\n\r\nconst TableHeader = styled(Table.Header)``;\r\n\r\nconst TableBody = styled(Table.Body)``;\r\n\r\nconst TableBodyRow = styled(Table.BodyRow)``;\r\n\r\nconst CardHeader = styled.div`\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n height: 64px;\r\n border-bottom: 1px solid #e8eff5;\r\n padding: 0 24px;\r\n position: relative;\r\n`;\r\n\r\nconst HeaderLeftSide = styled.div`\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n`;\r\n\r\nconst HeaderRightSide = styled.div`\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n > div {\r\n margin-left: 15px;\r\n max-width: 200px;\r\n }\r\n`;\r\n\r\nconst CardBody = styled.div`\r\n overflow: auto;\r\n padding: 0;\r\n`;\r\n\r\nconst PaginationContainer = styled.div`\r\n display: flex;\r\n justify-content: center;\r\n font-size: 1.2rem;\r\n padding: 0 1rem;\r\n\r\n & > div > div > *::before {\r\n background-color: var(--color-primary);\r\n transition: all 0.2s;\r\n }\r\n\r\n & > div > span {\r\n display: inline-block;\r\n padding: 0.5rem 1.5rem;\r\n border: solid 1px #d0d7dd;\r\n border-radius: 5px;\r\n }\r\n`;\r\n\r\nconst columnsSize =\r\n 'minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) 150px';\r\n\r\n/**\r\n * Component to fetch the Logs of the Lead SMS Messages\r\n *\r\n * @returns {React.Component} Return the Component.\r\n */\r\n\r\nconst PhoneCallsLogs = () => {\r\n const agency = useAgency();\r\n\r\n const [phoneCalls, setPhoneCalls] = useState([]);\r\n const [page, setPage] = useState(1);\r\n const [filter, setFilter] = useState(R.clone(FILTER_DATA));\r\n const [currentFilter, setCurrentFilter] = useState(R.clone(FILTER_DATA));\r\n const [showFilter, setShowFilter] = useState(false);\r\n const [filterCategories, setFilterCategories] = useState(R.clone(FILTER_CATEGORIES_OUTBOUND));\r\n const [loading, setLoading] = useState(true);\r\n const [disposition, setDisposition] = useState({ open: false, data: {} });\r\n\r\n useSimpleSubscription(OnFetchOutboundCallsEvent, ({ phoneCallsList }) => {\r\n setPhoneCalls(phoneCallsList);\r\n setLoading(false);\r\n });\r\n\r\n useSimpleSubscription(OnFetchOutboundCallsError, (err) => {\r\n onErrorMixinFC(err);\r\n });\r\n\r\n useSimpleSubscription(OnFetchManagerAndAgentUsersEvent, ({ usersList }) => {\r\n const categoriesClone = R.clone(filterCategories);\r\n const defaultOption = {\r\n label: `None`,\r\n value: '',\r\n };\r\n categoriesClone.assignedTo.options = usersList.items.map((user) => ({\r\n label: `${user.firstName} ${user.lastName}`,\r\n value: user.id,\r\n }));\r\n categoriesClone.assignedTo.options.unshift(defaultOption);\r\n setFilterCategories(categoriesClone);\r\n });\r\n\r\n useSimpleSubscription(OnFetchManagerAndAgentUsersError, () => {\r\n toast.error('Users Managment', 'There was an error fetching the users, please try again.');\r\n });\r\n\r\n const filterHandler = useCallback(\r\n (identifier, value) => {\r\n const newFilter = { ...filter };\r\n newFilter[identifier] = value;\r\n if (identifier === 'dateStart') {\r\n if (newFilter.dateStart > newFilter.dateEnd) {\r\n newFilter.dateEnd = '';\r\n }\r\n }\r\n setFilter(newFilter);\r\n },\r\n [filter],\r\n );\r\n\r\n const onDispositionClick = useCallback((data) => {\r\n setDisposition((state) => ({\r\n ...state,\r\n data: {\r\n carrier: data.carrier,\r\n currentPremium: data.currentPremium,\r\n quotedPremium: data.quotedPremium,\r\n status: data?.status?.name,\r\n expirationDate: data?.expirationDate\r\n ? moment(data?.expirationDate).format('MM/DD/YYYY')\r\n : '',\r\n insurance: data?.insurance,\r\n notes: data.notes,\r\n ifsScore: '',\r\n createdAt: moment(data.createdAt).format('MM/DD/YYYY'),\r\n createdBy: `${data.createdBy.firstName} ${data.createdBy.lastName} (${data.createdBy.email})`,\r\n },\r\n open: true,\r\n }));\r\n }, []);\r\n\r\n const confirmFilterHandler = useCallback(() => {\r\n setShowFilter(false);\r\n setCurrentFilter(filter);\r\n setLoading(true);\r\n }, [filter]);\r\n\r\n const sortHandler = (value) => {\r\n const newState = R.clone(currentFilter);\r\n newState.sort = value;\r\n setCurrentFilter(newState);\r\n setLoading(true);\r\n };\r\n\r\n const filterClickHandler = () => {\r\n setShowFilter(true);\r\n };\r\n\r\n const handlePageChanger = (page) => {\r\n setPage(page);\r\n setLoading(true);\r\n };\r\n\r\n const getSmsMessages = () => {\r\n fetchPhoneCalls(page, { ...currentFilter, agency: agency.id });\r\n };\r\n\r\n const getAgents = () => {\r\n fetchManagerAndAgents(agency.id);\r\n };\r\n\r\n useEffect(() => {\r\n if (loading) {\r\n getSmsMessages();\r\n getAgents();\r\n }\r\n // eslint-disable-next-line\r\n }, [loading]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {\r\n setFilter(currentFilter);\r\n }}\r\n />\r\n {\r\n sortHandler(value);\r\n }}\r\n value={currentFilter.sort}\r\n options={SORT_OPTIONS}\r\n placeholder=\"Sort Call Logs by Date (Newest/Oldest)\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n Leads\r\n From\r\n To\r\n Agents\r\n Dates\r\n Disposition\r\n \r\n \r\n {(phoneCall) => (\r\n \r\n \r\n {phoneCall.lead\r\n ? `${phoneCall.lead.firstName} ${phoneCall.lead.lastName}`\r\n : 'Without Lead'}\r\n \r\n \r\n {phoneCall.from && formatPhoneNumber(getPhoneNumberStr(phoneCall.from))}\r\n \r\n {phoneCall.to}\r\n \r\n {phoneCall.createdBy.firstName} {phoneCall.createdBy.lastName}\r\n \r\n \r\n \r\n \r\n \r\n {phoneCall.phoneCallDispositionRelation && (\r\n onDispositionClick(phoneCall.phoneCallDispositionRelation)}\r\n />\r\n )}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n {\r\n handlePageChanger(page);\r\n }}\r\n defaultPage={1}\r\n total={phoneCalls.count}\r\n page={page}\r\n />\r\n \r\n \r\n
\r\n \r\n {disposition.open && (\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nconst rows = [\r\n [\r\n {\r\n key: 'carrier',\r\n label: 'Carrier',\r\n type: 'text',\r\n },\r\n {\r\n key: 'currentPremium',\r\n label: 'Current Premium',\r\n type: 'text',\r\n },\r\n {\r\n key: 'quotedPremium',\r\n label: 'Quoted Premium',\r\n type: 'text',\r\n },\r\n {\r\n key: 'status',\r\n label: 'Status',\r\n type: 'text',\r\n },\r\n ],\r\n [\r\n {\r\n key: 'insurance',\r\n label: 'Insurance',\r\n type: 'text',\r\n },\r\n {\r\n key: 'expirationDate',\r\n label: 'Expiration Date',\r\n type: 'text',\r\n },\r\n ],\r\n [\r\n {\r\n key: 'score',\r\n label: 'Score',\r\n type: 'text',\r\n },\r\n {\r\n key: 'createdAt',\r\n label: 'Dispositon created at',\r\n type: 'text',\r\n },\r\n ],\r\n [\r\n {\r\n key: 'createdBy',\r\n label: 'Created By',\r\n type: 'text',\r\n },\r\n ],\r\n];\r\n\r\nexport default PhoneCallsLogs;\r\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { Row, Dropdown, Text, Grid, DateInputField } from '@8base/boost';\nimport { FilterButtonWithFocus as Button, Padding } from '../../../../shared/components';\nimport * as Toast from '../../../../shared/components/toast/Toast';\nimport * as moment from 'moment';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled(Padding)`\n border-bottom: solid 1px #d0d7dd;\n`;\n\n/**\n * Agents info filter component\n *\n * @param {object} props - The component's prop object\n * @param {Function} props.onFilter - The function to submit changes\n *\n * @returns {React.FC} The component to render\n */\nfunction AgentsInfoFilter({ onFilter }) {\n const [isOpen, setOpen] = useState(false);\n const [form, setForm] = useState({});\n\n useEffect(() => {\n setForm((state) => ({\n ...state,\n from: moment()\n .startOf('month')\n .format('YYYY-MM-DD'),\n to: moment()\n .endOf('month')\n .format('YYYY-MM-DD'),\n }));\n }, []);\n\n const handleToggle = useCallback(() => {\n setOpen((state) => !state);\n }, []);\n\n const handleDropdownClose = useCallback(() => {\n setOpen(false);\n }, []);\n\n const handleChange = useCallback((name, value) => {\n setForm((state) => ({\n ...state,\n [name]: value,\n }));\n }, []);\n\n const handleApply = useCallback(() => {\n if (!form.from || !form.to) return Toast.error('Both dates are needed');\n\n onFilter(form);\n\n setOpen(false);\n }, [form, onFilter]);\n\n const handleCancel = useCallback(() => {\n setOpen(false);\n }, []);\n\n return (\n \n \n \n \n \n \n \n \n handleChange('from', value),\n }}\n />\n \n \n handleChange('to', value),\n }}\n />\n \n \n \n \n \n \n Apply Filters\n \n \n Cancel\n \n
\n \n \n \n );\n}\n\nAgentsInfoFilter.propTypes = {\n onFilter: PropTypes.func.isRequired,\n};\n\nexport default AgentsInfoFilter;\n","import React, { useCallback, useState } from 'react';\nimport { Row, Grid } from '@8base/boost';\nimport AgentsInfoFilter from './AgentsInfoFilter';\nimport { SearchInput } from '../../../../shared/components';\nimport PropTypes from 'prop-types';\n\n/**\n * Agents info header component\n *\n * @param {object} props - The props object\n * @param {Function} props.onFilter - The set filter function\n *\n * @returns {React.FC} The component to render\n */\nfunction AgentsInfoHeader({ onFilter }) {\n const [search, setSearch] = useState('');\n\n const handleFilter = useCallback(\n (filter) => {\n const from = `${filter.from}T00:00:00Z`;\n const to = `${filter.to}T23:59:59Z`;\n\n onFilter((state) => ({\n ...state,\n from,\n to,\n }));\n },\n [onFilter],\n );\n\n const handleSearch = useCallback(() => {\n onFilter((state) => ({\n ...state,\n search,\n }));\n }, [search, onFilter]);\n\n return (\n \n \n \n \n \n \n \n \n \n
\n );\n}\n\nAgentsInfoHeader.propTypes = {\n onFilter: PropTypes.func.isRequired,\n};\n\nexport default AgentsInfoHeader;\n","import React, { useEffect } from 'react';\nimport { Table, Loader, Row } from '@8base/boost';\nimport { usePromise } from '@cobuildlab/hooks-utils';\nimport { fetchUserInfoInAgency } from '../../../users/user-actions';\nimport { onErrorMixinFC } from '../../../../shared/mixins';\nimport PropTypes from 'prop-types';\n\n/**\n * Agents info row component\n *\n * @param {object} props - The component's prop object\n * @param {object} props.agent - The user object\n * @param {string} props.columns - The columns layout\n * @param {object} props.filters - The filters object\n * @param {string} props.agencyId - The agency id\n *\n * @returns {React.FC} The component to render\n */\nfunction AgentsInfoRow({ agent, columns, filters, agencyId }) {\n const [data, loading, { error }] = usePromise(\n () => fetchUserInfoInAgency(agent.id, agencyId, filters.from, filters.to),\n { initialState: null },\n [agent.id, agencyId, filters],\n );\n\n useEffect(() => {\n if (error) {\n onErrorMixinFC(error);\n }\n }, [error]);\n\n const sold = loading\n ? null\n : data && !error\n ? new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n }).format(data.leadsList.groups[0].amount)\n : 0;\n\n const time = loading ? null : data && !error ? data.phoneCallsList.groups[0].duration : 0;\n const sms = loading ? null : data && !error ? data.sMSMessagesList.count : 0;\n const createdTask = loading ? null : data && !error ? data.leadTasksList.count : 0;\n const updatedTask = loading ? null : data && !error ? data.leadHistoriesList.groups[0].count : 0;\n\n return (\n \n \n {agent.firstName} {agent.lastName}\n \n {!loading && `${sold !== null ? sold : 0}`}\n {!loading && `${time !== null ? time : 0} seg`}\n \n {loading ? (\n \n \n
\n ) : (\n sms\n )}\n \n {!loading && `${createdTask}`}\n {!loading && `${updatedTask !== null ? updatedTask : 0}`}\n \n );\n}\n\nAgentsInfoRow.propTypes = {\n agent: PropTypes.shape({\n id: PropTypes.string.isRequired,\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n }).isRequired,\n columns: PropTypes.string.isRequired,\n filters: PropTypes.shape({\n from: PropTypes.string.isRequired,\n to: PropTypes.string.isRequired,\n }).isRequired,\n agencyId: PropTypes.string.isRequired,\n};\n\nexport default AgentsInfoRow;\n","import React, { useState } from 'react';\nimport { Card, Table as BoostTable, Row, Pagination } from '@8base/boost';\nimport AgentsInfoHeader from './components/AgentsInfoHeader';\nimport AgentsInfoRow from './components/AgentsInfoRow';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport { useUsersInAgency } from '../../users/users-hooks';\nimport styled from 'styled-components';\nimport * as moment from 'moment';\n\nconst Table = styled(BoostTable)`\n & div[role='loader'] > div[role='loader'] div {\n border-color: #3db4aa !important;\n }\n`;\n\nconst Body = styled(BoostTable.Body)`\n min-height: 400px;\n`;\n\nconst columns = 'minmax(200px, 1fr) 150px 150px 150px 150px 150px';\n\n/**\n * Agency Info Component\n *\n * @returns {React.FC} The component to render\n */\nfunction AgentInfo() {\n const [page, setPage] = useState(1);\n const [filters, setFilters] = useState({\n from: moment()\n .startOf('month')\n .toISOString(),\n to: moment()\n .endOf('month')\n .toISOString(),\n search: '',\n });\n const agency = useAgency();\n const { items: users, loading, count } = useUsersInAgency(agency.id, page, filters.search);\n\n return (\n \n \n \n \n \n \n \n Agent\n Sold Amount\n Time on Calls\n SMS Sent\n Task Created\n Task Completed\n \n \n {(agent) => (\n \n )}\n \n \n \n \n
\n \n
\n \n \n );\n}\n\nexport default AgentInfo;\n","import moment from 'moment';\n\n/**\n * @param {('now'|'day-start'|'morning'|'afternoon')} key - Key\n * @returns {string} Date string.\n */\nexport function getDates(key) {\n const dateNow = moment();\n if (key === 'now') {\n return dateNow.toISOString();\n } else if (key === 'day-start') {\n const dateLimit = moment()\n .startOf('day')\n .toISOString();\n\n return dateLimit;\n } else if (key === 'morning') {\n const dateLimit = moment('11:00 am', 'HH:mm a').toISOString();\n\n return dateLimit;\n } else if (key === 'afternoon') {\n const dateLimit = moment('6:00 pm', 'HH:mm a').toISOString();\n\n return dateLimit;\n }\n}\n","import React, { useState, useCallback } from 'react';\nimport {\n Row,\n Dropdown,\n Button as BoostButton,\n Text,\n Grid,\n DateInputField,\n Radio,\n} from '@8base/boost';\nimport { IconFilterGreen, IconFilterGrey } from '../../../../shared/components/ui/Icons';\nimport { Padding } from '../../../../shared/components';\nimport * as Toast from '../../../../shared/components/toast/Toast';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { getDates } from '../agent-calls-utils';\n\nconst Button = styled(BoostButton)`\n padding: 0 10px !important;\n ${(props) => props.isOpen && 'border-color: #3db4aa !important;'}\n\n & > *:not(:last-child) {\n margin-right: 4px !important;\n }\n`;\n\nconst Container = styled(Padding)`\n border-bottom: solid 1px #d0d7dd;\n`;\n\n/**\n * Agents info filter component\n *\n * @param {object} props - The component's prop object\n * @param {Function} props.onFilter - The function to submit changes\n *\n * @returns {React.FC} The component to render\n */\nfunction AgentsInfoFilter({ onFilter }) {\n const [isOpen, setOpen] = useState(false);\n const [categories, setCategories] = useState(1);\n const [form, setForm] = useState(() => ({\n from: getDates('day-start'),\n to: getDates('now'),\n }));\n\n const onHandleCategoryChange = (value) => {\n const form = {\n to: getDates('now'),\n from: getDates('day-start'),\n };\n\n if (value === 1) {\n form.to = getDates('morning');\n } else if (value === 2) {\n form.to = getDates('afternoon');\n }\n setForm((state) => ({\n ...state,\n ...form,\n }));\n setCategories(value);\n };\n const handleToggle = useCallback(() => {\n setOpen((state) => !state);\n }, []);\n\n const handleDropdownClose = useCallback(() => {\n setOpen(false);\n }, []);\n\n const handleChange = useCallback((name, value) => {\n setForm((state) => ({\n ...state,\n [name]: value,\n }));\n }, []);\n\n const handleApply = useCallback(() => {\n if (!form.from || !form.to) return Toast.error('Both dates are needed');\n\n onFilter(form);\n\n setOpen(false);\n }, [form, onFilter]);\n\n const handleCancel = useCallback(() => {\n setOpen(false);\n }, []);\n\n const icon = isOpen ? : ;\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {categories === 3 && (\n <>\n \n handleChange('from', value),\n }}\n />\n \n \n handleChange('to', value),\n }}\n />\n \n \n )}\n \n \n \n \n \n Apply Filters\n \n \n Cancel\n \n
\n \n \n \n );\n}\n\nAgentsInfoFilter.propTypes = {\n onFilter: PropTypes.func.isRequired,\n};\n\nexport default AgentsInfoFilter;\n","import React, { useCallback, useState } from 'react';\nimport { Row, Grid } from '@8base/boost';\nimport AgentsInfoFilter from './AgentsCallsFilter';\nimport { SearchInput } from '../../../../shared/components';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\n\n/**\n * Agents info header component\n *\n * @param {object} props - The props object\n * @param {Function} props.onFilter - The set filter function\n *\n * @returns {React.FC} The component to render\n */\nfunction AgentsCallsHeader({ onFilter }) {\n const [search, setSearch] = useState('');\n\n const handleFilter = useCallback(\n (filter) => {\n const from = moment(filter.from).toISOString();\n const to = moment(filter.to).toISOString();\n\n onFilter((state) => ({\n ...state,\n from,\n to,\n }));\n },\n [onFilter],\n );\n\n const handleSearch = useCallback(() => {\n onFilter((state) => ({\n ...state,\n search,\n }));\n }, [search, onFilter]);\n\n return (\n \n \n \n \n \n \n \n \n \n
\n );\n}\n\nAgentsCallsHeader.propTypes = {\n onFilter: PropTypes.func.isRequired,\n};\n\nexport default AgentsCallsHeader;\n","import moment from 'moment';\n/**\n * @param {number|string}time - Time to add cero.\n * @returns {string} - string with left cero.\n */\nexport function addLeftCero(time) {\n return `0${parseInt(time)}`.slice(-2);\n}\n/**\n * @param {number} duration - Duaration as seconds by default\n * @param {string} unit - To define the unit in which the duration has to be calculated.\n * @returns {string} - Formated duration string\n */\nexport function formatDuration(duration, unit = 'seconds') {\n const momentDuration = moment.duration(duration, unit);\n\n const hours = addLeftCero(momentDuration.hours());\n const minutes = addLeftCero(momentDuration.minutes());\n const seconds = addLeftCero(momentDuration.seconds());\n\n return `${hours}:${minutes}:${seconds}`;\n}\n","import React from 'react';\nimport { Table } from '@8base/boost';\nimport PropTypes from 'prop-types';\nimport StyledBadge from '../../../../shared/components/ui/StyledBadge';\nimport { AGENTS_CALL_PERFORMANCE_STATUSES as STATUSES } from '@cobuildlab/lead-volt-share';\nimport { formatDuration } from '../../../../shared/utils/moment-utils';\n\n/**\n * Agents info row component\n *\n * @param {object} props - The component's prop object\n * @param {object} props.agent - The user object\n * @param {string} props.columns - The columns layout\n * @param {object} props.filters - The filters object\n * @param {string} props.agencyId - The agency id\n *\n * @returns {React.FC} The component to render\n */\nfunction AgentsInfoRow({ agent, columns }) {\n let priority = 1;\n if (agent.status === STATUSES.BAD) {\n priority = 4;\n } else if (agent.status === STATUSES.REGULAR) {\n priority = 2;\n }\n const totalTalkTime = formatDuration(Number(agent.totalTalkTime));\n const talkTimeAverage = `${formatDuration(Number(agent.talkTimeAverage))}/h`;\n const callsPerHours = Number(agent.callsPerHours).toFixed(2);\n\n return (\n \n \n \n {agent.firstName} {agent.lastName}\n \n \n {callsPerHours}\n {agent.outboundDialsCount}\n {agent.totalDialsCount}\n {agent.contacts}\n {agent.dialPerContact}\n {totalTalkTime}\n {talkTimeAverage}\n {agent.quotesPerClose}\n \n );\n}\n\nAgentsInfoRow.propTypes = {\n agent: PropTypes.shape({\n id: PropTypes.string.isRequired,\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n status: PropTypes.string.isRequired,\n totalTalkTime: PropTypes.number,\n talkTimeAverage: PropTypes.number,\n outboundDialsCount: PropTypes.number,\n totalDialsCount: PropTypes.number,\n contacts: PropTypes.number,\n dialPerContact: PropTypes.number,\n callsPerHours: PropTypes.number,\n quotesPerClose: PropTypes.number,\n }).isRequired,\n columns: PropTypes.string.isRequired,\n filters: PropTypes.shape({\n from: PropTypes.string.isRequired,\n to: PropTypes.string.isRequired,\n }).isRequired,\n // agencyId: PropTypes.string.isRequired,\n};\n\nexport default AgentsInfoRow;\n","import gql from 'graphql-tag';\n\nexport const FETCH_AGENT_CALL_REPORT_QUERY = gql`\n query FetchAgentCalls(\n $agency: ID!\n $search: String\n $startDate: DateTime!\n $endDate: DateTime!\n $first: Int\n $skip: Int\n ) {\n agentsCalls(\n agency: $agency\n search: $search\n startDate: $startDate\n endDate: $endDate\n first: $first\n skip: $skip\n ) {\n items {\n firstName\n lastName\n outboundDialsCount\n totalDialsCount\n contacts\n callsPerHours\n status\n totalTalkTime\n dialPerContact\n talkTimePerHour\n talkTimeAverage\n quotesPerClose\n }\n count\n }\n }\n`;\n","import { OnApolloClient } from '../../../shared/session/session-events';\nimport { FETCH_AGENT_CALL_REPORT_QUERY } from './agent-calls-querys';\nimport { log } from '@cobuildlab/pure-logger';\n\n/**\n * @param {string} agency - Agency id\n * @param {string} search - The search param\n * @param {string} startDate - Bottom date\n * @param {string} endDate - Top date\n * @param {number} page - page number\n *\n * @returns {{items:[],count:number}} - Data\n */\nexport async function fetchAgentCallsReport(agency, search, startDate, endDate, page = 1) {\n const client = OnApolloClient.get();\n\n const first = 10;\n const skip = (page - 1) * first;\n const variables = {\n agency,\n search,\n startDate,\n endDate,\n first,\n skip,\n };\n\n const response = await client.query({\n query: FETCH_AGENT_CALL_REPORT_QUERY,\n fetchPolicy: 'network-only',\n variables,\n });\n\n log('fetchAgentCallsReport', response.data);\n\n return response.data.agentsCalls;\n}\n","import React, { useState } from 'react';\nimport { Card, Table as BoostTable, Row, Pagination } from '@8base/boost';\nimport AgentsCallsHeader from './components/AgentsCallsHeader';\nimport AgentsInfoRow from './components/AgentsCallsRow';\nimport { useAgency } from '../../../shared/hooks/useAgency';\nimport styled from 'styled-components';\nimport { useAgentCallsReport } from './agent-calls-hooks';\nimport { getDates } from './agent-calls-utils';\n\nconst Table = styled(BoostTable)`\n & div[role='loader'] > div[role='loader'] div {\n border-color: #3db4aa !important;\n }\n`;\n\nconst Body = styled(BoostTable.Body)`\n min-height: 400px;\n`;\n\nconst columns = 'minmax(200px, 1fr) 140px 140px 140px 140px 140px 140px 140px 140px';\n\n/**\n * Agency Info Component\n *\n * @returns {React.FC} The component to render\n */\nfunction AgentCalls() {\n const [page, setPage] = useState(1);\n const [filters, setFilters] = useState(() => ({\n from: getDates('day-start'),\n to: getDates('now'),\n search: '',\n }));\n const agency = useAgency();\n\n const [users, count, loading] = useAgentCallsReport(agency.id, page, filters);\n\n return (\n \n \n \n \n \n \n \n Agent\n Dials/hours\n Outboud dials\n Total dials\n Contacts\n Dials/contacts\n TalkTime\n TalkTime(%)\n Quotes/Close\n \n \n {(agent) => (\n \n )}\n \n \n \n \n
\n \n
\n \n \n );\n}\n\nexport default AgentCalls;\n","import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';\nexport type Maybe = T;\nexport type Exact = { [K in keyof T]: T[K] };\nexport type MakeOptional = Omit & { [SubKey in K]?: Maybe };\nexport type MakeMaybe = Omit & { [SubKey in K]: Maybe };\n/** All built-in and custom scalars, mapped to their actual values */\nexport type Scalars = {\n ID: string;\n String: string;\n Boolean: boolean;\n Int: number;\n Float: number;\n /** A date-time string at UTC, such as `2007-12-25T16:15:30Z`, compliant with the `date-time` format outlined in section 5.6 of the RFC 3339 profile of the ISO 8601 standard for representation of dates and times using the Gregorian calendar. */\n DateTime: any;\n /** The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf). */\n JSON: any;\n /** The `BigInt` scalar type represents whole numeric values. */\n BigInt: any;\n /** A date string, such as `2007-12-25`, compliant with the `full-date` format outlined in section 5.6 of the RFC 3339 profile of the ISO 8601 standard for representation of dates and times using the Gregorian calendar. */\n Date: any;\n /** A time string at UTC, such as `16:15:30Z`, compliant with the `full-time` format outlined in section 5.6 of the RFC 3339profile of the ISO 8601 standard for representation of dates and times using the Gregorian calendar. */\n Time: any;\n};\nexport type Admin = {\n __typename?: 'Admin';\n id: Maybe;\n createdAt: Maybe;\n updatedAt: Maybe;\n deletedAt: Maybe;\n createdBy: Maybe;\n user: Maybe;\n company: Maybe;\n _description: Maybe;\n};\n\nexport type Admin_PermissionFilter = {\n id?: Maybe;\n createdAt?: Maybe;\n updatedAt?: Maybe;\n deletedAt?: Maybe;\n _fullText?: Maybe;\n createdBy?: Maybe;\n user?: Maybe;\n company?: Maybe;\n AND?: Maybe>;\n OR?: Maybe>;\n};\n\nexport type Admin_PermissionRelationFilter = {\n some?: Maybe;\n every?: Maybe;\n none?: Maybe;\n};\n\n/** Admin relation input */\nexport type AdminCompanyManyRelationInput = {\n connect?: Maybe;\n};\n\n/** Company create input from adminCompanyRelation */\nexport type AdminCompanyRelation_CompanyCreateInput = {\n name: Scalars['String'];\n taxId?: Maybe;\n adminCompanyRelation?: Maybe;\n agencyCompanyRelation?: Maybe;\n companyInvitationCompanyRelation?: Maybe;\n paymentMethodCompanyRelation?: Maybe;\n subscriptions?: Maybe;\n /** DEPRECATED */\n cardExpireDate?: Maybe;\n /** DEPRECATED */\n last4?: Maybe;\n /** DEPRECATED */\n addressLine1?: Maybe;\n /** DEPRECATED */\n addressLine2?: Maybe;\n /** DEPRECATED */\n city?: Maybe;\n /** DEPRECATED */\n state?: Maybe;\n /** DEPRECATED */\n country?: Maybe;\n companyInvoices?: Maybe;\n companyPaymentMethods?: Maybe;\n status?: Maybe;\n};\n\n/** Company update input from adminCompanyRelation */\nexport type AdminCompanyRelation_CompanyUpdateInput = {\n name?: Maybe;\n taxId?: Maybe;\n adminCompanyRelation?: Maybe;\n agencyCompanyRelation?: Maybe;\n companyInvitationCompanyRelation?: Maybe<\n CompanyCompanyInvitationCompanyRelationUpdateRelationInput\n >;\n paymentMethodCompanyRelation?: Maybe;\n subscriptions?: Maybe;\n /** DEPRECATED */\n cardExpireDate?: Maybe;\n /** DEPRECATED */\n last4?: Maybe;\n /** DEPRECATED */\n addressLine1?: Maybe;\n /** DEPRECATED */\n addressLine2?: Maybe;\n /** DEPRECATED */\n city?: Maybe;\n /** DEPRECATED */\n state?: Maybe;\n /** DEPRECATED */\n country?: Maybe;\n companyInvoices?: Maybe;\n companyPaymentMethods?: Maybe;\n status?: Maybe;\n};\n\n/** Admin relation input */\nexport type AdminCompanyRelationInput = {\n connect?: Maybe;\n create?: Maybe;\n};\n\n/** Admin relation input */\nexport type AdminCompanyUpdateRelationInput = {\n connect?: Maybe;\n disconnect?: Maybe;\n reconnect?: Maybe;\n create?: Maybe;\n update?: Maybe;\n};\n\n/** Admin create input */\nexport type AdminCreateInput = {\n user: AdminUserRelationInput;\n company: AdminCompanyRelationInput;\n};\n\n/** Admin create many input */\nexport type AdminCreateManyInput = {\n user: AdminUserManyRelationInput;\n company: AdminCompanyManyRelationInput;\n};\n\n/** Admin delete input */\nexport type AdminDeleteInput = {\n id?: Maybe;\n force?: Maybe;\n};\n\n/** AdminFieldsPermissions create input */\nexport type AdminFieldsPermissions = {\n createdAt?: Maybe;\n updatedAt?: Maybe;\n};\n\nexport type AdminFilter = {\n id?: Maybe;\n createdAt?: Maybe;\n updatedAt?: Maybe;\n deletedAt?: Maybe;\n _fullText?: Maybe;\n createdBy?: Maybe;\n user?: Maybe;\n company?: Maybe;\n AND?: Maybe>;\n OR?: Maybe>;\n};\n\nexport type AdminGroupBy = {\n query: AdminGroupByQuery;\n sort?: Maybe>;\n having?: Maybe;\n first?: Maybe;\n last?: Maybe;\n skip?: Maybe;\n};\n\nexport type AdminGroupByQuery = {\n id?: Maybe>;\n createdAt?: Maybe>;\n updatedAt?: Maybe>;\n createdBy?: Maybe;\n user?: Maybe;\n company?: Maybe;\n _group?: Maybe>;\n};\n\nexport type AdminKeyFilter = {\n id?: Maybe;\n};\n\n/** AdminListResponse output */\nexport type AdminListResponse = {\n __typename?: 'AdminListResponse';\n /** List items */\n items: Array;\n /** List items count */\n count: Scalars['Int'];\n /** Aggregated items */\n groups: Array;\n};\n\n/** AdminManyResponse output */\nexport type AdminManyResponse = {\n __typename?: 'AdminManyResponse';\n /** List items */\n items: Array;\n /** List items count */\n count: Scalars['Int'];\n};\n\n/** No longer supported. Use `sort` instead. */\nexport enum AdminOrderBy {\n IdAsc = 'id_ASC',\n IdDesc = 'id_DESC',\n CreatedAtAsc = 'createdAt_ASC',\n CreatedAtDesc = 'createdAt_DESC',\n UpdatedAtAsc = 'updatedAt_ASC',\n UpdatedAtDesc = 'updatedAt_DESC',\n DeletedAtAsc = 'deletedAt_ASC',\n DeletedAtDesc = 'deletedAt_DESC',\n}\n\n/** Admin subscription payload */\nexport type AdminPayload = {\n __typename?: 'AdminPayload';\n mutation: MutationType;\n node: Maybe;\n updatedFields: Maybe>>;\n previousValues: Maybe;\n};\n\nexport type AdminRelationFilter = {\n some?: Maybe;\n every?: Maybe;\n none?: Maybe;\n};\n\nexport type AdminSort = {\n id?: Maybe;\n createdAt?: Maybe;\n updatedAt?: Maybe;\n deletedAt?: Maybe;\n createdBy?: Maybe;\n user?: Maybe;\n company?: Maybe;\n};\n\n/** Admin subscription filter */\nexport type AdminSubscriptionFilter = {\n mutation_in?: Maybe>>;\n node?: Maybe;\n updatedFields?: Maybe;\n};\n\n/** Admin update input */\nexport type AdminUpdateInput = {\n id?: Maybe;\n user?: Maybe;\n company?: Maybe;\n};\n\n/** Admin relation input */\nexport type AdminUserManyRelationInput = {\n connect?: Maybe;\n};\n\n/** Admin relation input */\nexport type AdminUserRelationInput = {\n connect?: Maybe;\n create?: Maybe;\n};\n\n/** Admin relation input */\nexport type AdminUserUpdateRelationInput = {\n connect?: Maybe;\n disconnect?: Maybe;\n reconnect?: Maybe