\n
\n \n \n \n \n navHistory.push('/leads/create')} />\n \n \n {isSmaller ?\n
\n \n \n \n \n {\n setModelMenuItem(true);\n setSaleRepMenuItem(false);\n handleChange(value, MODEL, data.models.find(item => item === value));\n }}\n menuItem={data.models}\n modelMenuItem={true}\n saleRepMenuItem={false} />\n \n \n {\n setModelMenuItem(false);\n setSaleRepMenuItem(false);\n handleChange(value, PAYMENT_TYPE, t(paymentTypes[value - 1].label));\n }}\n menuItem={paymentTypes}\n modelMenuItem={false}\n saleRepMenuItem={false} />\n \n \n {\n setModelMenuItem(false);\n setSaleRepMenuItem(false);\n handleChange(value, STATUS, t(leadStatus.find(x => x.value === value).label));\n }}\n menuItem={leadStatus}\n modelMenuItem={false}\n saleRepMenuItem={false} />\n \n {allOrMineValue === allOrMine.find(item => 'all' === item.label).value &&\n \n {\n setModelMenuItem(false);\n setSaleRepMenuItem(true);\n handleChange(value, SALE_REPRESENTATIVE, data.saleRepresentatives.find(item => item.id === value).nameSurname);\n }}\n menuItem={data.saleRepresentatives}\n modelMenuItem={false}\n saleRepMenuItem={true} />\n \n }\n \n \n \n \n \n
:\n
\n \n {t('filters')}
\n \n \n {\n setModelMenuItem(true);\n setSaleRepMenuItem(false);\n handleChange(value, MODEL, data.models.find(item => item === value));\n }}\n menuItem={data.models}\n modelMenuItem={true}\n saleRepMenuItem={false} />\n \n \n {\n setModelMenuItem(false);\n setSaleRepMenuItem(false);\n handleChange(value, PAYMENT_TYPE, t(paymentTypes[value - 1].label));\n }}\n menuItem={paymentTypes}\n modelMenuItem={false}\n saleRepMenuItem={false} />\n \n \n {\n setModelMenuItem(false);\n setSaleRepMenuItem(false);\n handleChange(value, STATUS, t(leadStatus.find(x => x.value === value).label));\n }}\n menuItem={leadStatus}\n modelMenuItem={false}\n saleRepMenuItem={false} />\n \n {allOrMineValue === allOrMine.find(item => 'all' === item.label).value &&\n \n {\n setModelMenuItem(false);\n setSaleRepMenuItem(true);\n handleChange(value, SALE_REPRESENTATIVE, data.saleRepresentatives.find(item => item.id === value).nameSurname);\n }}\n menuItem={data.saleRepresentatives}\n modelMenuItem={false}\n saleRepMenuItem={true} />\n \n }\n \n \n \n }\n
\n \n {total !== 0 &&\n \n \n {t('total')}:
\n {total}
\n \n }\n {array.map((el, index) => {\n return (\n \n handleDelete(el)} deleteIcon={ \n );\n })}\n \n \n {(isAdmin(user && user.role) || isSalesMng(user && user.role)) &&
}\n
setTotal(value)} filter={filters} />\n \n \n );\n};\nLeadsPageComponent.propTypes = {\n width: PropTypes.string\n};\n\nexport const LeadsPage = withWidth()(LeadsPageComponent);\n","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n flexDirection: 'row',\n marginTop: '0.5rem',\n padding: '0.5rem',\n justifyContent: 'space-between',\n marginLeft: '0',\n cursor: 'pointer'\n },\n isRead: {\n backgroundColor: theme.quinaryBackgroundColor\n },\n notRead: {\n backgroundColor: theme.senaryBackgroundColor\n },\n date: {\n color: theme.primaryTextColor,\n fontSize: '0.75rem'\n },\n description: {\n fontSize: '0.875rem',\n wordWrap: 'break-word'\n },\n seeAll: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n display: '-webkit-box',\n lineClamp: 3,\n boxOrient: 'vertical',\n wordWrap: 'break-word'\n },\n imgContainer: {\n backgroundColor: theme.primaryBackgroundColor,\n height: '1.5rem',\n width: '1.5rem',\n borderRadius: '50%',\n display: 'flex',\n justifyContent: 'center',\n marginRight: '0.5rem',\n cursor: 'pointer',\n },\n img: {\n height: '0.625rem',\n width: '0.466rem',\n margin: 'auto',\n },\n opacity: {\n opacity: '30%'\n },\n textContainer: {\n justifyContent: 'space-between',\n flexDirection: 'column',\n wordWrap: 'break-word'\n },\n title: {\n margin: 0,\n marginTop: '0.5rem',\n fontSize: '1rem'\n },\n 'MuiGrid-item': {\n width: '100%'\n },\n '@media screen and (max-width:400px)': {\n container: {\n width: '90%',\n marginLeft: '2rem'\n },\n }\n}));","import PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { format } from 'date-fns';\nimport { Grid } from '@material-ui/core';\n\nimport { dateFormatHours } from 'helpers';\nimport { completedIconWhite } from 'resources';\nimport { notificationService } from 'services';\n\nimport { useStyles } from './NotificationMessage.css.js';\nimport { useState } from 'react';\n\nexport const NotificationMessage = ({ id, isRead, title, description, createdAt, url, refetchData, setRefetchData }) => {\n const classes = useStyles();\n const created = new Date(createdAt);\n const [seeAll, setSeeAll] = useState(false);\n\n const handleUpdate = () => {\n if (!isRead) {\n notificationService.updateNotification(id);\n setRefetchData(!refetchData);\n }\n };\n\n const handleNotification = () => {\n window.location.href = url;\n if (!isRead) {\n notificationService.updateNotification(id);\n setRefetchData(!refetchData);\n }\n };\n\n return (\n \n \n \n \n {format(created, dateFormatHours)}
\n \n \n {title}
\n \n setSeeAll(!seeAll)} xs={12} sm={12} md={12} lg={12}>\n {description}
\n \n \n \n \n \n \n );\n};\n\nNotificationMessage.propTypes = {\n id: PropTypes.number,\n isRead: PropTypes.bool,\n title: PropTypes.string,\n description: PropTypes.string,\n createdAt: PropTypes.string,\n url: PropTypes.string,\n refetchData: PropTypes.bool,\n setRefetchData: PropTypes.func\n};\n","import { makeStyles } from '@material-ui/core/styles';\nimport { displayBorder } from 'helpers';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n position: 'absolute',\n width: '25%',\n height: '100%',\n backgroundColor: theme.drawersBackgroundColor,\n padding: 20,\n paddingTop: 15,\n alignItems: 'center',\n [theme.breakpoints.down(displayBorder)]: {\n width: '100%',\n minHeight: '100vh',\n padding: 0,\n position: 'relative',\n zIndex: 0\n },\n },\n logo: {\n marginRight: '1rem',\n },\n zeroNotificationsLogo: {\n alignSelf: 'center',\n whiteSpace: 'pre-wrap',\n textAlign: 'center',\n paddingBottom: '1.5rem'\n },\n zeroNotifications: {\n alignSelf: 'center',\n whiteSpace: 'pre-wrap',\n textAlign: 'center'\n },\n headerText: {\n display: 'flex',\n flexDirection: 'row',\n },\n header: {\n justifyContent: 'space-between',\n marginBottom: '1rem'\n },\n notificationsText: {\n margin: 0,\n fontWeight: 'bold',\n fontSize: '1.125rem'\n },\n notificationsNumb: {\n margin: 0,\n fontWeight: 'bold',\n fontSize: '1.125rem',\n color: theme.primaryBackgroundColor,\n marginLeft: '0.5rem'\n },\n closeIcon: {\n color: theme.primaryTextColor,\n cursor: 'pointer'\n },\n message: {\n margin: '0.5rem',\n fontSize: '1rem',\n color: theme.primaryTextColor\n },\n zeroNotificationsContainer: {\n display: 'flex',\n flexDirection: 'column',\n alignContent: 'center',\n paddingTop: '50%'\n },\n allNotificationsText: {\n color: theme.primaryTextColor,\n fontSize: '0.875rem',\n paddingTop: '1rem',\n marginLeft: '2rem'\n },\n clearAllNotificationsText: {\n color: theme.primaryBackgroundColor,\n fontSize: '0.875rem',\n fontWeight: 'bold',\n paddingBottom: '1rem',\n cursor: 'pointer'\n },\n footer: {\n textAlign: '-webkit-center',\n position: 'relative',\n paddingTop: '1rem'\n },\n '@media screen and (max-width:1288px)': {\n container: {\n position: 'absolute',\n width: '20rem',\n padding: '1rem'\n }\n },\n '@media screen and (max-width:400px)': {\n container: {\n width: '100%',\n },\n zeroNotificationsContainer: {\n paddingRight: '0rem',\n marginLeft: '2rem'\n },\n headerText: {\n marginLeft: '2rem'\n },\n footer: {marginLeft: '2rem'\n },\n allNotificationsText: {\n marginLeft: '0'\n }\n }\n}));","import React, { useState, useEffect, useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { useQuery } from 'react-query';\nimport { Drawer, Grid } from '@material-ui/core';\nimport CloseIcon from '@material-ui/icons/Close';\n\nimport { NotificationMessage } from './NotificationMessage';\nimport { SadStates, Loader, Button } from 'components';\nimport { UserContext } from 'providers';\nimport { notificationIconBlack, zeroNotifications } from 'resources';\nimport { notificationService } from 'services';\nimport { notificationsLifetimeInDays } from 'helpers';\n\nimport { useStyles } from './NotificationsPage.css.js';\n\nconst REFETCH_INTERVAL_MS = 10000;\n\nexport const NotificationsPage = ({ notificationsActive, setNotificationsActive }) => {\n const classes = useStyles();\n const [t] = useTranslation('common');\n const { user } = useContext(UserContext);\n const [refetchData, setRefetchData] = useState(false);\n const rows = 25;\n const [rowsPerPage, setRowsPerPage] = useState(rows);\n const [refetchInterval] = useState(REFETCH_INTERVAL_MS);\n\n const { data: notifications, refetch, isLoading } = useQuery(['notifications'], () => notificationService.getNotifications(user?.id, rowsPerPage)\n , { refetchData, refetchInterval: refetchInterval });\n\n useEffect(() => {\n refetch();\n }, [refetchData, rowsPerPage]);\n\n const handleDeleteAll = () => {\n notificationService.deleteAllNotifications().then(() => {\n refetch();\n });\n };\n\n return (\n setNotificationsActive(false)}\n onOpen={() => setNotificationsActive(true)}>\n \n \n {t('notifications')}
\n {notifications?.totalUnread !== 0 && ({notifications?.totalUnread})
}\n \n \n setNotificationsActive(false)} />\n \n \n {notifications?.total === 0 ?\n \n \n \n \n {t('zeroNotification')}
\n \n \n {t('youHaveReadAllNotifications')}
\n \n \n :\n notifications?.items.map((notification, index) => {\n return \n {rowsPerPage < notifications?.total &&\n \n setRowsPerPage(rowsPerPage + rows)} />\n }\n {rowsPerPage >= notifications?.total &&\n {t('thatsAllYourNotifications', { notificationsLifetimeInDays })}
}\n {t('clearAllNotifications')}
\n }\n \n \n );\n};\n\nNotificationsPage.propTypes = {\n notificationsActive: PropTypes.bool,\n setNotificationsActive: PropTypes.func\n};","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n width: '1.25rem',\n lineHeight: '1.25rem',\n height: '1.25rem',\n backgroundColor: theme.primaryBackgroundColor,\n borderRadius: '50%',\n marginBottom: '0.2rem'\n },\n text: {\n margin: 0,\n textAlign: 'center',\n fontSize: '0.625rem',\n fontWeight: 'bold'\n },\n ninetyNinePlus: {\n margin: 0,\n textAlign: 'center',\n fontSize: '0.525em',\n fontWeight: 'bold',\n marginLeft: '1px'\n }\n}));","import React, { useContext } from 'react';\nimport { useQuery } from 'react-query';\n\nimport { UserContext } from 'providers';\nimport { notificationService } from 'services';\n\nimport { useStyles } from './NotificationIcon.css.js';\n\nexport const NotificationIcon = () => {\n const classes = useStyles();\n const { user } = useContext(UserContext);\n const { data: notifications } = useQuery(['notifications'], () => notificationService.getNotifications(user.id));\n\n let ninetyNinePlus = '';\n\n ninetyNinePlus = notifications === undefined ? '' : '99+';\n\n if (notifications?.totalUnread === 0) {\n return '';\n }\n return (\n \n
\n {notifications?.totalUnread < 100 ? notifications?.totalUnread : ninetyNinePlus}\n
\n
\n
navHistory.goBack()}/>\n \n \n {({ isSubmitting, dirty }) => (\n \n )}\n \n \n \n \n \n Font Color \n 1200 ? '340px' : '%100'}\n onChange={(evt) => {\n onChange({ color: evt.hex });\n }} />\n \n\n \n {\n onChange({ family: e.target.value });\n }}\n value={family}\n menuItem={arrayOfFonts} />\n \n\n \n \n {\n onChange({ size: Number(e.target.value) });\n }}\n value={size}\n menuItem={arrayOfFontSizes} />\n \n \n {\n onChange({ isBold: !isBold });\n }}>\n B \n \n {\n onChange({ isItalic: !isItalic });\n }}>\n I \n \n {\n onChange({ isUnderline: !isUnderline });\n }}>\n U \n \n \n \n \n );\n};\n\nFontStyleComponent.propTypes = {\n fontStyle: PropTypes.object,\n onChange: PropTypes.func,\n};\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory, useLocation } from 'react-router-dom';\nimport { useQuery } from 'react-query';\nimport * as Yup from 'yup';\nimport Chip from '@material-ui/core/Chip';\nimport { Form, Formik, ErrorMessage, Field } from 'formik';\nimport {\n Container, FormControl, FormControlLabel, Select, MenuItem,\n Grid, Radio, RadioGroup, Accordion, AccordionSummary, AccordionDetails, Typography, Tooltip\n} from '@material-ui/core';\nimport { CloseOutlined } from '@material-ui/icons';\nimport RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';\nimport RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport {\n BrowseGifTemplateDialog, Button, DragAndDropInputField, InputField, NoteSmallInputField,\n Loader, SadStates, OfferSentDialog, toastNotification, ButtonWithTooltip\n} from 'components';\nimport { leadService, offerService } from 'services';\nimport {\n conversionBase, checkFileFormat, JPG, JPEG, PNG, sendOfferVia, offerExpipation, optInSmsType,\n arrayOfExpirationTimer, formatNumberWithSeparator, arrayOfFonts, getChangeComunicationChannelError, getPaidFeaturesError\n} from 'helpers';\nimport { FontStyleComponent, initFontStyle } from './FontStyleComponent';\n\nimport { useStyles } from './SendOfferPage.css.js';\n\nexport const SendOfferPage = props => {\n const { t } = useTranslation(['common', 'error']);\n const navHistory = useHistory();\n const { search } = useLocation();\n const [cancelSendOffer, setCancelSendOffer] = useState(false);\n const [leadId] = useState(Number(props.match.params.id));\n const [counterOfferId] = useState(Number(new URLSearchParams(search).get('counteroffer')));\n const [isBrowseOpen, setBrowseDialogOpen] = useState(false);\n const [isOfferSentOpen, setOfferSentDialogOpen] = useState(false);\n\n const { isLoading, data = {} } = useQuery(['viewForm'], () => leadService.getLeadById(leadId), { cacheTime: 0 });\n const { isLoading: isLoadingCouterOffer, data: dataCouterOffer } =\n useQuery(\n ['getCounterOffer'],\n () => offerService.getCounterOfferById(counterOfferId),\n { cacheTime: 0, enabled: counterOfferId > 0, });\n const [isSubmittingGlobal, setIsSubmittingGlobal] = useState(false);\n const [isSuccessfullySent, setIsSuccessfullySent] = useState(false);\n const [previewUploadedImage, setPreviewUploadedImage] = useState(null);\n const [previewUploadedGifTemplate, setPreviewUploadedGifTemplate] = useState(null);\n const [uploadedGifTemplate, setUploadedGifTemplate] = useState(null);\n const [selectedCardItem, setselectedCardItem] = useState(null);\n const [size, setSize] = useState(window.innerWidth);\n const [gifContainerWidth, setGifContainerWidth] = useState();\n const [gifContainerHeight, setGifContainerHeight] = useState();\n const gifContainerRef = useRef();\n const [gifWidth, setGifWidth] = useState();\n const [gifHeight, setGifHeight] = useState();\n const [newGifWidth, setNewGifWidth] = useState();\n const [newGifHeight, setNewGifHeight] = useState();\n const textContainerRef = useRef();\n const [leadFont, setLeadFont] = useState({ ...initFontStyle });\n const [offerFont, setOfferFont] = useState({ ...initFontStyle, size: 20 });\n const [featureError, setFeatureError] = useState('');\n const [changeComunicationChannelError, setChangeComunicationChannelError] = useState('');\n const [isLoaded, setIsLoaded] = useState(false);\n const [comunicationChannel, setComunicationChannel] = useState(0);\n\n const updateSize = () => setSize(window.innerWidth);\n\n useEffect(() => {\n window.onresize = updateSize;\n }, []);\n\n useEffect(() => {\n if (!isLoading && !isLoadingCouterOffer) {\n if (dataCouterOffer) {\n if (dataCouterOffer.leadFontStyle) {\n setLeadFont({ ...dataCouterOffer.leadFontStyle });\n }\n if (dataCouterOffer.offerFontStyle) {\n setOfferFont({ ...dataCouterOffer.offerFontStyle });\n }\n if (dataCouterOffer.gifTemplate) {\n setUploadedGifTemplate(dataCouterOffer.gifTemplate);\n setPreviewUploadedGifTemplate(dataCouterOffer.gifTemplate.url);\n }\n if (dataCouterOffer.imageUrl) {\n setPreviewUploadedImage(dataCouterOffer.imageUrl);\n }\n }\n const channel = getComunicationChannel();\n setComunicationChannel(channel);\n setChangeComunicationChannelError(\n getChangeComunicationChannelError(data.user.company, -1, data?.optInSms === optInSmsType.Agreed)\n );\n const paidFeatureError = getPaidFeaturesError(data.user.company, -1);\n if (paidFeatureError === '') {\n if (channel === 1 && data?.optInSms !== optInSmsType.Agreed && !data.user.company.optInDisabled) {\n setFeatureError('The lead didn’t consent to receive SMS messages and offers.');\n }\n } else {\n setFeatureError(paidFeatureError);\n }\n setIsLoaded(true);\n }\n }, [isLoading, isLoadingCouterOffer]);\n\n useEffect(() => {\n getMeta();\n getGifContainerSize();\n }, [previewUploadedGifTemplate, size]);\n\n useEffect(() => {\n const gifRatio = gifWidth / gifHeight;\n const gifContainerRatio = gifContainerWidth / gifContainerHeight;\n\n if (gifContainerRatio >= gifRatio) {\n setNewGifHeight(gifContainerHeight);\n setNewGifWidth(gifContainerHeight * gifRatio);\n } else {\n setNewGifWidth(gifContainerWidth);\n setNewGifHeight(gifContainerWidth / gifRatio);\n }\n // getSizeTextTop();\n // getSizeTextBottom();\n // textContainerSize();\n }, [gifWidth, gifHeight, size]);\n\n const getMeta = () => {\n const image = new Image();\n image.src = previewUploadedGifTemplate;\n image.onload = function () {\n setGifHeight(this.height);\n setGifWidth(this.width);\n };\n };\n\n const getGifContainerSize = () => {\n setGifContainerWidth(gifContainerRef.current?.offsetWidth);\n setGifContainerHeight(gifContainerRef.current?.offsetHeight);\n };\n\n const styleProps = {\n previewUploadedGifTemplate: previewUploadedGifTemplate\n };\n const classes = useStyles(styleProps);\n\n const handleSubmit = async (values, { setSubmitting }) => {\n setIsSubmittingGlobal(true);\n if (cancelSendOffer) {\n return;\n }\n\n const formDetails = new FormData();\n const details = { ...values };\n Object.keys(details).forEach(key => formDetails.append(key, details[key]));\n\n formDetails.append('gifTemplateId', uploadedGifTemplate.id);\n formDetails.append('leadId', leadId);\n\n if (values.rbIsUploadImage) {\n delete values.imageUrl;\n if (values.uploadedImage !== null) {\n formDetails.append('imageFile', values.uploadedImage);\n }\n } else {\n delete values.uploadedImage;\n }\n\n if (values.sendOfferVia === 1) {\n formDetails.append('sendMms', true);\n formDetails.append('sendEmail', false);\n } else if (values.sendOfferVia === 2) {\n formDetails.append('sendMms', false);\n formDetails.append('sendEmail', true);\n }\n formDetails.delete('sendOfferVia', '');\n\n if (values.offerExpipation === 0) {\n formDetails.delete('expiresIn');\n }\n\n formDetails.append('leadTextColor', leadFont.color);\n formDetails.append('offerTextColor', offerFont.color);\n\n const ratio = gifWidth / gifContainerWidth;\n const leadFontModel = { ...leadFont, sizeRatio: leadFont.size * ratio };\n const offerFontModel = { ...offerFont, sizeRatio: offerFont.size * ratio };\n //console.log(gifContainerWidth, gifWidth, ratio);\n formDetails.append('leadFontStyleJson', JSON.stringify(leadFontModel));\n formDetails.append('offerFontStyleJson', JSON.stringify(offerFontModel));\n\n setOfferSentDialogOpen(true);\n\n try {\n await offerService.createOffer(formDetails);\n setIsSuccessfullySent(true);\n } catch (error) {\n toastNotification('error', t(`error:${Object.values(error.response.data.errors)[0]}`));\n setIsSuccessfullySent(false);\n }\n\n setSubmitting(false);\n setIsSubmittingGlobal(false);\n };\n\n const validationSchema = Yup.object().shape({\n uploadedGifTemplate: Yup.number()\n .required(t('required')),\n rbIsUploadImage: Yup.boolean(),\n uploadedImage: Yup.mixed()\n .nullable()\n .test('test_is_uploaded_file_image_file', null, value => {\n if (value && !checkFileFormat(value.name, [JPG, JPEG, PNG])) {\n return new Yup.ValidationError(t('mustBeAnImageFile'), null, 'uploadedImage');\n }\n return true;\n })\n .test('is-correct-file-size', null, value => {\n if (Yup.ref('rbIsUploadImage') && value && value?.size / conversionBase / conversionBase > 4) {\n return new Yup.ValidationError(t('fileTooLarge'), null, 'uploadedImage');\n }\n return true;\n }),\n imageUrl: Yup.string()\n .nullable()\n .test('test_is_url_file_image_file', null, value => {\n if (Yup.ref('rbIsUploadImage') && value && !checkFileFormat(value, [JPG, JPEG, PNG])) {\n return new Yup.ValidationError(t('urlMustBeAnImageFile'), null, 'imageUrl');\n }\n return true;\n }),\n leadInfo: Yup.string()\n .max(250, t('leadInfoOfferValidation')),\n leadOffer: Yup.string()\n .max(250, t('leadOfferValidation')),\n internalNotes: Yup.string()\n .nullable()\n .max(1000, t('internalNotesValidation')),\n disclaimer: Yup.string()\n .nullable()\n .max(500, t('disclaimerValidation')),\n sendEmail: Yup.boolean(),\n sendMms: Yup.boolean(),\n });\n\n const handleCancel = () => {\n setCancelSendOffer(true);\n toastNotification('info', t('canceled'));\n navHistory.goBack();\n };\n\n const browseGifDialog = () => {\n setBrowseDialogOpen(true);\n };\n\n const gifCaption = previewUploadedGifTemplate && previewUploadedImage ? t('gifPreview') : t('pleaseSelectTemplate');\n const rowGapStyle = previewUploadedGifTemplate ? classes.rowGap : '';\n\n const getLeadOfferText = (offerData) => {\n let leadOfferText = '';\n const isTradeIn = (typeof offerData.tradeInValue === 'number');// ? data.price - data.tradeInValue : data.price;\n switch (offerData.paymentType) {\n case 1:\n leadOfferText = t('leadOfferTextLease', {\n downPayment: formatNumberWithSeparator(offerData.downPayment, ','),\n monthlyPayment: formatNumberWithSeparator(offerData.monthlyPayment, ','),\n term: offerData.term,\n milesPerYear: formatNumberWithSeparator(offerData.milesPerYear, ',')\n });\n break;\n case 2:\n leadOfferText = t(isTradeIn ? 'leadOfferTextFinanceTradeIn' : 'leadOfferTextFinance', {\n downPayment: formatNumberWithSeparator(offerData.downPayment, ','),\n payment: formatNumberWithSeparator(offerData.payment, ','),\n term: offerData.term,\n actualPrice: formatNumberWithSeparator(isTradeIn ? offerData.price - offerData.tradeInValue : offerData.price, ','),\n tradeInValue: formatNumberWithSeparator(offerData.tradeInValue, ','),\n price: formatNumberWithSeparator(offerData.price, ','),\n rate: formatNumberWithSeparator(offerData.rate, ','),\n });\n break;\n case 3:\n leadOfferText = t(isTradeIn ? 'leadOfferTextCashTradeIn' : 'leadOfferTextCash', {\n actualPrice: formatNumberWithSeparator(isTradeIn ? offerData.price - offerData.tradeInValue : offerData.price, ','),\n tradeInValue: formatNumberWithSeparator(offerData.tradeInValue, ','),\n price: formatNumberWithSeparator(offerData.price, ',')\n });\n break;\n }\n\n return leadOfferText;\n };\n\n const getFontStyle = (value) => {\n const font = arrayOfFonts.find(x => x.value === value);\n if (font) {\n return font.style;\n }\n return {};\n };\n\n const getTextStyle = (font) => {\n return {\n ...getFontStyle(font.family),\n color: font.color,\n fontSize: font.size + 'px',\n fontWeight: font.isBold ? 'bold' : '400',\n fontStyle: font.isItalic ? 'italic' : 'normal',\n textDecoration: font.isUnderline ? 'underline' : 'none'\n };\n };\n\n const getStylePxString = (num) => {\n if (num > 0) {\n return `${num}px`;\n }\n return '';\n };\n\n const getComunicationChannel = () => {\n let channel = data.defaultChannel + 1;\n if (!data.user.company.paidSms && !data.user.company.paidEmail) {\n channel = 0;\n }\n if (data.defaultChannel === 0 && !data.user.company.paidSms) {\n channel = 2;\n }\n if (data.defaultChannel === 1 && !data.user.company.paidEmail) {\n channel = 1;\n }\n if (channel === 1 && data.optInSms !== optInSmsType.Agreed && !data.user.company.optInDisabled && data.user.company.paidEmail) {\n channel = 2;\n }\n return channel;\n };\n\n const HandleSelectSendOfferType = (prop) => {\n return (\n \n \n {sendOfferVia.map((type, index) => {\n return (\n \n \n );\n };\n\n const HandleSelectExpirationType = (prop) => {\n return (\n \n \n {offerExpipation.map((type, index) => {\n return (\n \n \n );\n };\n\n return (\n \n
\n \n {({ values, isSubmitting, setFieldValue, touched, setTouched }) => (\n \n
\n
{\n if (!item) {\n toastNotification('warning', t('requiredToSelectTemplate'));\n return;\n }\n\n setUploadedGifTemplate(item);\n setPreviewUploadedGifTemplate(item.url);\n setFieldValue('uploadedGifTemplate', item.id);\n }}\n selectedCardItem={selectedCardItem}\n setselectedCardItem={setselectedCardItem} />\n \n \n
\n \n \n \n \n \n \n \n
\n {() => (\n \n )}\n \n \n \n \n );\n\n};","import { makeStyles } from '@material-ui/core/styles';\nimport { displayBorder } from 'helpers';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n width: '100%',\n paddingLeft: '0.5rem',\n paddingBottom: '0.5rem',\n position: 'relative'\n },\n form: {\n width: '100%'\n },\n header: {\n fontSize: '24px',\n fontFamily: theme.fontLato,\n color: theme.quaternaryTextColor,\n letterSpacing: 0,\n [theme.breakpoints.down(displayBorder)]: {\n marginBottom: 0\n },\n width: '100%',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n lineClamp: 2,\n },\n userActions: {\n marginTop: '5%',\n placeContent: 'end',\n [theme.breakpoints.down(displayBorder)]: {\n placeContent: 'space-between',\n flexWrap: 'nowrap'\n },\n },\n sectionTitle: {\n marginBottom: '2%'\n },\n modal: {\n height: 'fit-content',\n minHeight: 'calc(100vh - 150px)',\n padding: '40px',\n backgroundClip: 'content-box',\n boxShadow: 'inset 0 0 0 40px' + theme.quinaryBackgroundColor,\n margin: '0 auto',\n maxWidth: '100%'\n },\n modalPhone: {\n padding: '1rem'\n },\n selectRoleContainer: {\n alignItems: 'center',\n marginBottom: '0.8rem'\n },\n selectRole: {\n color: theme.primaryTextColor\n },\n iconStyle: {\n height: '1.5rem',\n width: '1.5rem',\n color: theme.primaryBackgroundColor,\n paddingLeft: '0,'\n },\n uncheckedIconStyle: {\n height: '1.5rem',\n width: '1.5rem',\n color: theme.primaryBorderColor,\n paddingLeft: '0,'\n },\n isRequired: {\n marginRight: '1rem',\n color: theme.primaryBackgroundColor\n },\n role: {\n marginTop: 0,\n color: theme.primaryTextColor\n },\n}));\n","import React, { useState, useContext, useEffect } from 'react';\nimport { Form, Formik, Field } from 'formik';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { useQuery } from 'react-query';\nimport { useHistory } from 'react-router-dom';\nimport * as Yup from 'yup';\nimport {\n Container, FormControl, FormControlLabel,\n Grid, Radio, RadioGroup, useMediaQuery, useTheme\n} from '@material-ui/core';\nimport RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';\nimport RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';\n\nimport {\n BackButton, Button, DeleteDialog, InputField, EmptyDialog,\n PasswordInputField, SadStates, Loader, toastNotification, FormSelectFilter\n} from 'components';\nimport { phoneRegExp, setAmericanPhoneCode, roles, isAdmin, isSalesMng } from 'helpers';\nimport { UserContext } from 'providers';\nimport { userService, companyService } from 'services';\nimport { useStyles } from './UserForm.css.js';\n\nexport const UserForm = (props) => {\n const classes = useStyles();\n const { t } = useTranslation(['common', 'error']);\n const navHistory = useHistory();\n const { user } = useContext(UserContext);\n const [cancelUpdate, setCancelUpdate] = useState(false);\n const [userPassword, setUserPassword] = useState(false);\n const [role, setRole] = useState(2);\n const [isOpen, setDialogOpen] = useState(false);\n const [isConfirmOpen, setIsConfirmOpen] = useState(false);\n const [userId] = useState(props.match.params.id);\n const [editMode] = useState(props.match.params.id !== undefined);\n const { isLoading, data = {} } = useQuery(['userForm'], () => userService.getUserById(userId), { enabled: editMode, cacheTime: 0 });\n const { data: dataCompany = null } = useQuery(['companies'], () => companyService.getSelectItems(), { enabled: true, cacheTime: 10000 });\n const [isSubmittingGlobal, setSubmittingGlobal] = useState(false);\n const confimDialogMessage = (<>Are you sure you want to \n \n {roles.slice(1).map((relation, index) => {\n return (\n \n \n );\n };\n return (\n \n
navHistory.replace('/users')} />\n \n \n {({ isSubmitting, dirty, setFieldValue, values, setSubmitting }) => (\n \n )}\n \n \n \n navHistory.push(`/users/edit/${user.id}`)}>\n {`${user.name} ${user.surname}`}\n
\n );\n };\n\n const handleCompanyName = user => {\n if (!user.company || user.role === 1) {\n return (\n
\n );\n }\n return (\n navHistory.push(`/companies/${user.company.id}`)}>\n {user.company.name}\n
\n );\n };\n\n const handleRoles = user => {\n const userRole = roles.find(r => user.role === r.value);\n return {t(userRole.label)}
;\n };\n\n const handleStatus = user => {\n if (user.role === 1) {\n return
;\n }\n const userStatus = user.company?.status ?? 0;\n return {userStatus === 0 ? 'Inactive' : 'Active'}
;\n };\n\n const columnConfiguration = [];\n\n const isVisible = isWidthUp(displayBorder, width);\n\n if (isVisible) {\n columnConfiguration.push(\n { id: 'id', label: t('id'), disableSorting: false, format: user => user.id },\n { id: 'userName', label: t('userName'), disableSorting: false, format: user => handleUserName(user) },\n { id: 'userRole', label: t('userRole'), disableSorting: false, format: user => handleRoles(user) },\n { id: 'userStatus', label: t('userStatus'), disableSorting: false, format: user => handleStatus(user) },\n { id: 'companyName', label: t('companyName'), disableSorting: false, format: user => handleCompanyName(user) },\n {\n id: 'dateCreated', label: t('dateCreated'), format: (user) => {\n return formatDateForTable(user.createdAt, classes.tableCell);\n }\n },\n {\n id: 'lastModified', label: t('lastModified'), format: (user) => {\n return formatDateForTable(user.modifiedAt, classes.tableCell);\n }\n }\n );\n } else {\n columnConfiguration.push(\n { id: 'userName', label: t('userName'), disableSorting: true, format: user => handleUserName(user) },\n { id: 'userRole', label: t('userRole'), disableSorting: true, format: user => handleRoles(user) }\n );\n }\n\n const handleChangeRole = (e) => {\n setRole(e.target.value > 0 ? e.target.value + 1 : -1);\n };\n\n const filters = { role, search };\n\n return (\n \n \n
\n \n \n \n \n navHistory.push('/users/create')} />\n \n \n
\n \n {t('filters')}
\n \n \n \n \n \n \n {total !== 0 &&\n
\n \n {t('total')}:
\n {total}
\n \n }\n
setTotal(value)} filter={filters} />\n \n \n );\n};\n\nUsersPageComponent.propTypes = {\n width: PropTypes.string\n};\n\nexport const UsersPage = withWidth()(UsersPageComponent);","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles(theme => ({\n container: {\n width: '100%',\n paddingLeft: '1rem',\n paddingBottom: '3.5rem',\n position: 'relative'\n },\n spaceBetween: {\n direction: 'row',\n justifyContent: 'space-between',\n alignSelf: 'center',\n },\n backContainer: {\n justifyContent: 'start',\n },\n paddingTop: {\n paddingTop: '1.5rem'\n },\n img: {\n padding: '1.3rem'\n },\n modal: {\n height: 'fit-content',\n minHeight: 'calc(100vh - 9.375rem)',\n padding: '2.5rem',\n backgroundClip: 'content-box',\n boxShadow: 'inset 0 0 0 2.5rem' + theme.quinaryBackgroundColor,\n margin: '0 auto',\n maxWidth: '100%'\n },\n modalPhone: {\n padding: '1rem',\n },\n editIcon: {\n backgroundColor: theme.senaryBackgroundColor,\n width: '3.875rem',\n height: '3.875rem',\n borderRadius: '50%',\n textAlign: 'center',\n cursor: 'pointer'\n },\n deleteIcon: {\n backgroundColor: theme.senaryBackgroundColor,\n width: '3.875rem',\n height: '3.875rem',\n borderRadius: '50%',\n textAlign: 'center',\n marginRight: '1rem',\n cursor: 'pointer'\n },\n header: {\n margin: 0,\n width: '100%',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n lineClamp: 2,\n },\n selectStatus: {\n alignSelf: 'center',\n width: '100%'\n },\n marginRight: {\n marginRight: '1rem',\n },\n statusLabel: {\n margin: 0,\n fontWeight: 'bold'\n },\n marginRightBorder: {\n paddingRight: '1rem',\n borderRight: '1px solid' + theme.primaryTextColor,\n margin: 0,\n },\n displayFlex: {\n display: 'flex'\n },\n marginNull: {\n margin: 0\n },\n dateLabel: {\n paddingRight: '0.2rem',\n color: theme.primaryTextColor\n },\n leadId: {\n margin: 0,\n color: theme.primaryTextColor\n },\n paddingLeft: {\n paddingLeft: '1rem'\n },\n statusContainer: {\n justifyContent: 'flex-end',\n alignItems: 'center'\n },\n statusContainerContent: {\n justifyContent: 'flex-end',\n alignItems: 'center',\n },\n statusContainerPhone: {\n justifyContent: 'flex-end',\n alignItems: 'center',\n display: 'none'\n },\n statusContainerContentPhone: {\n justifyContent: 'flex-end',\n alignItems: 'center',\n display: 'none'\n },\n dateContainer: {\n paddingTop: '1rem',\n paddingBottom: '1rem'\n },\n ShowMoreButtonContainer: {\n justifyContent: 'center',\n display: 'none',\n },\n ShowMoreButton: {\n justifyContent: 'center',\n display: 'none',\n },\n viewLeadContainer: {\n width: '100%'\n },\n '@media screen and (max-width: 599px)': {\n statusContainer: {\n width: '100%'\n },\n statusContainerContent: {\n justifyContent: 'start',\n alignItems: 'center',\n },\n marginRight: {\n display: 'none'\n },\n hide: {\n display: 'none'\n },\n statusContainerPhone: {\n justifyContent: 'flex-end',\n alignItems: 'center',\n display: 'flex'\n },\n statusContainerContentPhone: {\n margin: '0.5rem',\n justifyContent: 'flex-end',\n alignItems: 'center',\n display: 'flex'\n },\n paddingTop: {\n paddingTop: '0'\n },\n ShowMoreButtonContainer: {\n justifyContent: 'center',\n display: 'flex',\n marginTop: '1rem'\n },\n ShowMoreButton: {\n margin: '0.5rem',\n height: '10px !important'\n }\n },\n '@media screen and (min-width: 600px, max-width: 959px)': {\n ShowMoreButtonContainer: {\n justifyContent: 'center',\n display: 'flex',\n marginTop: '1rem'\n },\n ShowMoreButton: {\n margin: '0.5rem',\n height: '10px !important'\n },\n selectStatus: {\n alignSelf: 'center',\n maxWidth: '250px'\n },\n statusContainerContent: {\n justifyContent: 'center',\n alignItems: 'center',\n }\n }\n}));","import React, { useState, useEffect } from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { useQuery } from 'react-query';\nimport { useHistory } from 'react-router-dom';\nimport { Grid, Container, useMediaQuery, useTheme } from '@material-ui/core';\n\nimport {\n Button, BackButton, IconSelectFilter, DeleteDialog, ViewLead, ConversationForm,\n SadStates, Loader, toastNotification, EmptyDialog\n} from 'components';\nimport { leadStatus, formatDateForTable } from 'helpers';\nimport { editIcon, deleteIcon } from 'resources';\nimport { leadService } from 'services';\n\nimport { useStyles } from './ViewLeadPage.css.js';\n\nconst DRAFT = 0;\nconst RESOLUTION_WIDTH_TWO_COLUMNS = 767;\nconst SHOW_N_PROPERTIES = 4;\n\nconst REFETCH_INTERVAL_MS = 10000;\n\nexport const ViewLeadPage = props => {\n const classes = useStyles();\n const { t } = useTranslation(['common', 'error']);\n const [leadId] = useState(props.match.params.id);\n const navHistory = useHistory();\n const [leadStatusValue, setLeadStatusValue] = useState(DRAFT);\n const [isOpen, setDialogOpen] = useState(false);\n const [isOptInOpen, setOptInOpen] = useState(false);\n const [isOptInSent, setIsOptInSent] = useState(false);\n const [isOptInSending, setIsOptInSending] = useState(false);\n\n const { isLoading, data = {}, refetch: refetchLead } = useQuery(\n ['viewForm'], () => leadService.getLeadById(leadId)\n , { cacheTime: 0, refetchInterval: REFETCH_INTERVAL_MS });\n const [screenWidth] = useState(window.screen.width);\n const [showNElement, setShowNElement] = useState(screenWidth >= RESOLUTION_WIDTH_TWO_COLUMNS ? data.Length : SHOW_N_PROPERTIES);\n\n const theme = useTheme();\n const isExtraSmaller = useMediaQuery(theme.breakpoints.down('xs'));\n const isSmaller = useMediaQuery(theme.breakpoints.down('sm'));\n const userName = `${data?.name} ${data?.surname}`;\n\n useEffect(() => {\n if (data?.status) {\n setLeadStatusValue(data.status);\n }\n\n if (screenWidth >= RESOLUTION_WIDTH_TWO_COLUMNS) {\n setShowNElement(data?.Length);\n }\n }, [data]);\n\n const handleChangeStatus = async (e) => {\n setLeadStatusValue(e.target.value);\n const details = { ...data, status: e.target.value };\n try {\n await leadService.updateLead(details, leadId);\n toastNotification('info', t('leadIsUpdated'));\n } catch (error) {\n toastNotification('error', t(`error:${Object.values(error.response.data.errors)[0]}`));\n }\n };\n\n const handleDelete = async () => {\n try {\n await leadService.deleteLead(leadId);\n toastNotification('info', t('leadIsDeleted'));\n navHistory.goBack();\n } catch (error) {\n toastNotification('error', t(`error:${Object.values(error.response.data.errors)[0]}`));\n }\n };\n\n const handleShowHideTable = () => {\n if (screenWidth < RESOLUTION_WIDTH_TWO_COLUMNS) {\n if (showNElement === SHOW_N_PROPERTIES) {\n setShowNElement(data.Length);\n } else {\n setShowNElement(SHOW_N_PROPERTIES);\n }\n } else {\n setShowNElement(data.Length);\n }\n };\n\n const handleOptInSend = async () => {\n try {\n setIsOptInSending(true);\n await leadService.sendOptInSms(leadId);\n setIsOptInSent(true);\n toastNotification('info', t('optInSmsSended').replace('{name}', userName));\n } catch (error) {\n toastNotification('error', t(`error:${Object.values(error.response.data.errors)[0]}`));\n }\n setIsOptInSending(false);\n };\n\n return (\n \n
\n \n navHistory.push('/leads')} />\n \n \n \n setDialogOpen(true)}>\n \n navHistory.push(`/leads/edit/${leadId}`)}>\n \n \n \n \n
\n
\n
\n \n \n \n {`${data.name} ${data.surname}`} \n \n \n \n \n setDialogOpen(true)}>\n \n navHistory.push(`/leads/edit/${leadId}`)}>\n \n \n \n \n {t('status')}:
\n \n \n \n \n \n \n \n \n #{data.id}
\n \n \n {t('dateCreated')}:
\n {formatDateForTable(data.createdAt)}
\n \n \n {t('lastModified')}:
\n {formatDateForTable(data.modifiedAt)}
\n \n \n \n \n setOptInOpen(true)} isOptInSent={isOptInSent} />\n {isExtraSmaller &&\n \n }\n \n \n \n \n \n \n
\n \n Cancel\n \n \n );\n};\n\nFormButtons.propTypes = {\n disabled: PropTypes.bool,\n onCancel: PropTypes.func,\n};\n\nexport default FormButtons;","import React from 'react';\n\nimport { Grid } from '@material-ui/core';\nimport { Form, Formik } from 'formik';\nimport * as Yup from 'yup';\nimport clsx from 'clsx';\nimport { useTranslation } from 'react-i18next';\nimport PropTypes from 'prop-types';\nimport { InputField, NoteInputField, FormSelectFilter } from 'components';\n// eslint-disable-next-line no-unused-vars\nimport { formatNumber, arrayOfTerms, milesPerYearArray, } from 'helpers';\nimport { useStyles } from '../style';\nimport FormButtons from './FormButtons';\n\nconst LeaseForm = ({ offer, onCounterOffer, onCancel }) => {\n const classes = useStyles();\n const { t } = useTranslation(['common', 'error']);\n\n const validationSchema = Yup.object().shape({\n downPayment: Yup.number()\n .required(t('required'))\n .min(0, t('downPaymentMinValidation'))\n .max(1000000000, t('downPaymentMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n monthlyPayment: Yup.number()\n .required(t('required'))\n .min(0, t('monthlyPaymentMinValidation'))\n .max(1000000000, t('monthlyPaymentMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n term: Yup.number()\n .required(t('required'))\n .min(0, t('termMinValidation'))\n .max(1000000000, t('termMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n milesPerYear: Yup.number()\n .required(t('required'))\n .min(0, t('milesPerYearMinValidation'))\n .max(1000000000, t('milesPerYearMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n internalNotes: Yup.string()\n .max(1000, t('notesValidation'))\n });\n\n return (\n \n {({ isSubmitting, values, setFieldValue, dirty }) => (\n \n )}\n \n );\n};\n\nLeaseForm.propTypes = {\n offer: PropTypes.object,\n onCounterOffer: PropTypes.func,\n onCancel: PropTypes.func,\n};\n\nexport default LeaseForm;\n","import React from 'react';\n\nimport { Grid } from '@material-ui/core';\nimport { Form, Formik } from 'formik';\nimport * as Yup from 'yup';\nimport clsx from 'clsx';\nimport { useTranslation } from 'react-i18next';\nimport PropTypes from 'prop-types';\nimport { InputField, NoteInputField, FormSelectFilter } from 'components';\nimport { formatNumber, arrayOfTerms } from 'helpers';\nimport { useStyles } from '../style';\nimport FormButtons from './FormButtons';\n\nconst FinanceForm = ({ offer, onCounterOffer, onCancel }) => {\n const classes = useStyles();\n const { t } = useTranslation(['common', 'error']);\n\n const validationSchema = Yup.object().shape({\n price: Yup.number()\n .required(t('required'))\n .min(0, t('priceMinValidation'))\n .max(1000000000, t('priceMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n term: Yup.number()\n .required(t('required'))\n .min(0, t('termMinValidation'))\n .max(1000000000, t('termMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n rate: Yup.number()\n .required(t('required'))\n .min(0, t('rateMinValidation'))\n .max(1000000000, t('rateMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n downPayment: Yup.number()\n .required(t('required'))\n .min(0, t('downPaymentMinValidation'))\n .max(1000000000, t('downPaymentMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n payment: Yup.number()\n .required(t('required'))\n .min(0, t('monthlyPaymentMinValidation'))\n .max(1000000000, t('monthlyPaymentMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n internalNotes: Yup.string()\n .max(1000, t('notesValidation'))\n });\n\n return (\n \n {({ isSubmitting, values, setFieldValue, dirty }) => (\n \n )}\n \n );\n};\n\nFinanceForm.propTypes = {\n offer: PropTypes.object,\n onCounterOffer: PropTypes.func,\n onCancel: PropTypes.func,\n};\n\nexport default FinanceForm;\n","import React, { useState } from 'react';\n\nimport { Grid } from '@material-ui/core';\nimport { Form, Formik } from 'formik';\nimport * as Yup from 'yup';\nimport clsx from 'clsx';\nimport { useTranslation } from 'react-i18next';\nimport PropTypes from 'prop-types';\nimport { InputField, NoteInputField, FormSelectFilter } from 'components';\nimport { formatNumber, arrayOfTerms } from 'helpers';\nimport FormButtons from './FormButtons';\nimport { useStyles } from '../style';\n\nconst FinanceTradeInForm = ({ offer, onCounterOffer, onCancel }) => {\n const classes = useStyles();\n const { t } = useTranslation(['common', 'error']);\n const [priceValue, setPriceValue] = useState(offer.price);\n\n const validationSchema = Yup.object().shape({\n price: Yup.number()\n .required(t('required'))\n .min(0, t('priceMinValidation'))\n .max(1000000000, t('priceMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n tradeInValue: Yup.number()\n .required(t('required'))\n .min(0, t('tradeInValueMinValidation'))\n .max(priceValue, t('tradeInValuePriceValidation'))\n .typeError(t('pleaseEnterNumber')),\n term: Yup.number()\n .required(t('required'))\n .min(0, t('termMinValidation'))\n .max(1000000000, t('termMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n rate: Yup.number()\n .required(t('required'))\n .min(0, t('rateMinValidation'))\n .max(1000000000, t('rateMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n downPayment: Yup.number()\n .required(t('required'))\n .min(0, t('downPaymentMinValidation'))\n .max(1000000000, t('downPaymentMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n payment: Yup.number()\n .required(t('required'))\n .min(0, t('paymentMinValidation'))\n .max(1000000000, t('paymentMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n internalNotes: Yup.string()\n .max(1000, t('notesValidation'))\n });\n\n return (\n \n {({ isSubmitting, values, setFieldValue, dirty }) => (\n \n )}\n \n );\n};\n\nFinanceTradeInForm.propTypes = {\n offer: PropTypes.object,\n onCounterOffer: PropTypes.func,\n onCancel: PropTypes.func,\n};\n\nexport default FinanceTradeInForm;\n","import React from 'react';\n\nimport { Grid } from '@material-ui/core';\nimport { Form, Formik } from 'formik';\nimport * as Yup from 'yup';\nimport clsx from 'clsx';\nimport { useTranslation } from 'react-i18next';\nimport PropTypes from 'prop-types';\nimport { InputField, NoteInputField } from 'components';\nimport { formatNumber } from 'helpers';\nimport { useStyles } from '../style';\nimport FormButtons from './FormButtons';\n\nconst CashForm = ({ offer, onCounterOffer, onCancel }) => {\n const classes = useStyles();\n const { t } = useTranslation(['common', 'error']);\n\n const validationSchema = Yup.object().shape({\n price: Yup.number()\n .required(t('required'))\n .min(0, t('priceMinValidation'))\n .max(1000000000, t('priceMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n internalNotes: Yup.string()\n .max(1000, t('notesValidation'))\n });\n\n return (\n \n {({ isSubmitting, values, setFieldValue, dirty }) => (\n \n )}\n \n );\n};\n\nCashForm.propTypes = {\n offer: PropTypes.object,\n onCounterOffer: PropTypes.func,\n onCancel: PropTypes.func,\n};\n\nexport default CashForm;\n","import React, { useState } from 'react';\n\nimport { Grid } from '@material-ui/core';\nimport { Form, Formik } from 'formik';\nimport * as Yup from 'yup';\nimport clsx from 'clsx';\nimport { useTranslation } from 'react-i18next';\nimport PropTypes from 'prop-types';\nimport { InputField, NoteInputField } from 'components';\nimport { formatNumber } from 'helpers';\nimport { useStyles } from '../style';\nimport FormButtons from './FormButtons';\n\nconst CashTradeInForm = ({ offer, onCounterOffer, onCancel }) => {\n const classes = useStyles();\n const { t } = useTranslation(['common', 'error']);\n const [priceValue, setPriceValue] = useState(offer.price);\n\n const validationSchema = Yup.object().shape({\n price: Yup.number()\n .required(t('required'))\n .min(0, t('priceMinValidation'))\n .max(1000000000, t('priceMaxValidation'))\n .typeError(t('pleaseEnterNumber')),\n tradeInValue: Yup.number()\n .required(t('required'))\n .min(0, t('tradeInValueMinValidation'))\n .max(priceValue, t('tradeInValuePriceValidation'))\n .typeError(t('pleaseEnterNumber')),\n internalNotes: Yup.string()\n .max(1000, t('notesValidation'))\n });\n\n return (\n \n {({ isSubmitting, values, setFieldValue, dirty }) => (\n \n )}\n \n );\n};\n\nCashTradeInForm.propTypes = {\n offer: PropTypes.object,\n onCounterOffer: PropTypes.func,\n onCancel: PropTypes.func,\n};\n\nexport default CashTradeInForm;\n","import React, { useEffect, useState } from 'react';\n\nimport { Grid, Card, CardActions, CardContent, CardMedia, Button, Typography } from '@material-ui/core';\nimport { Check, Clear } from '@material-ui/icons';\nimport Countdown from 'react-countdown';\nimport PropTypes from 'prop-types';\nimport { LeaseForm, FinanceForm, FinanceTradeInForm, CashForm, CashTradeInForm } from './CounterOfferForms';\nimport { ShareIcon, CallbackIcon } from '../../resources';\nimport { useStyles } from './style';\n\nconst OfferCard = ({ offer, onAccept, onDecline, onCallback, onCounterOffer, isCounterOfferSelected }) => {\n const classes = useStyles();\n const [isExpired, setIsExpired] = useState(false);\n const [showCounterofferForm, setShowCounterofferForm] = useState(isCounterOfferSelected ?? false);\n const [clientSelectionState, setClientSelectionState] = useState(0);\n\n useEffect(() => {\n setClientSelectionState(offer?.clientSelection ?? 0);\n setShowCounterofferForm(isCounterOfferSelected ?? false);\n }, [offer, isCounterOfferSelected]);\n\n const countdownRenderer = ({ hours, minutes, seconds, completed }) => {\n if (hours > 0) {\n minutes = minutes + hours * 60;\n }\n if (completed) {\n setIsExpired(true);\n return <>;\n } else {\n return (\n \n \n Your offer expires in:\n \n \n {minutes < 10 ? `0${minutes}` : minutes} \n : \n {seconds < 10 ? `0${seconds}` : seconds} \n \n \n minutes \n seconds \n \n \n );\n }\n };\n\n const getCardButtons = () => {\n if (!isExpired && clientSelectionState === 0 && !showCounterofferForm) {\n return (\n \n \n \n \n );\n }\n\n return null;\n };\n\n const getCounterOfferForm = () => {\n if (isExpired || clientSelectionState !== 0) {\n return null;\n }\n\n if (showCounterofferForm) {\n switch (offer.paymentType) {\n case 1: return \n \n setShowCounterofferForm(true)}\n startIcon={ \n\n \n );\n }\n }\n };\n\n const onRejectAndCounterOffer = () => {\n setClientSelectionState(0);\n setShowCounterofferForm(true);\n };\n\n const onCancel = () => {\n setClientSelectionState(offer.clientSelection);\n setShowCounterofferForm(false);\n };\n\n const getHeaderMessage = () => {\n if (isExpired || clientSelectionState === 4) {\n return (\n \n Your offer has expired.\n \n );\n }\n\n switch (clientSelectionState) {\n case 1:\n return (\n \n You`ve accepted the offer. \n );\n case 2:\n return (\n \n \n \n You`ve rejected the offer.So you say No Deal. Would you like to Counteroffer or Speak to a Manager? Let us know! \n \n {!offer.hiddenCounterOffer &&\n \n \n );\n case 3:\n return (\n \n Your counter offer has been received. \n );\n case 5:\n return (\n \n Your counter offer has been accepted.\n \n );\n case 6:\n return (\n \n Thanks for your request! \n );\n default:\n return (\n \n \n Dear {offer.clientName}, \n \n \n Here is your offer: \n \n
\n );\n }\n };\n\n return offer ? (\n \n \n \n \n {offer.companyName} \n \n \n \n {getHeaderMessage()}\n \n \n {offer.disclaimer &&\n \n Disclaimer: \n }\n \n {(offer.expireAt && !clientSelectionState) && \n Best regards,\n }\n \n \n ) : null;\n};\n\nOfferCard.propTypes = {\n offer: PropTypes.object,\n onAccept: PropTypes.func,\n onDecline: PropTypes.func,\n onCallback: PropTypes.func,\n onCounterOffer: PropTypes.func,\n isCounterOfferSelected: PropTypes.bool,\n};\n\nexport default OfferCard;\n","import { useLocation } from 'react-router-dom';\nimport { Container, Grid, Typography, Card, CardContent } from '@material-ui/core';\nimport { useState, useEffect } from 'react';\nimport { AppBackdrop } from 'components';\nimport { offerService } from 'services';\nimport OfferCard from './OfferCard';\nimport { useStyles } from './style';\n\nconst initPageState = {\n isFetching: true,\n error: null,\n offer: null,\n //offer: {\n // gifUrl: 'https://stnicepriceprod.blob.core.windows.net/gifs/Congratulations.gif',\n // expireAt: 1708344004236,\n // clientName: 'Nick',\n // salesName: 'John Smit',\n // clientSelection: 0,\n //},\n};\n\nexport const ConfirmOfferPage = () => {\n const classes = useStyles();\n const [state, setState] = useState(initPageState);\n const { search } = useLocation();\n const tempCode = new URLSearchParams(search).get('c');\n const userSelection = Number.parseInt(new URLSearchParams(search).get('s'));\n const isUserSelectionValid = userSelection && (userSelection === 1 || userSelection === 2);\n const isCounterOfferSelected = userSelection === 3;\n\n const setStateOffer = (res) => {\n setState({\n ...state,\n offer: {\n ...res.data,\n salesName: `${res.data.salesName} ${res.data.salesSurname}`\n },\n isFetching: false,\n });\n };\n\n const setStateError = (error) => {\n setState({\n ...state,\n isFetching: false,\n error: {\n data: error?.response?.data,\n status: error?.response?.status\n },\n });\n };\n\n const onSelection = (selection) => {\n if (selection === 1 || selection === 2 || selection === 6) {\n setState({\n ...state,\n isFetching: true,\n });\n\n const request = {\n tempCode,\n userSelection: selection\n };\n\n offerService.confirmOffer(request).then((res) => {\n setStateOffer(res);\n }).catch((error) => {\n setStateError(error);\n });\n }\n };\n\n const onCounterOffer = (formData) => {\n setState({\n ...state,\n isFetching: true,\n });\n\n const request = {\n tempCode,\n userSelection: 3,\n ...formData\n };\n\n offerService.confirmOffer(request).then((res) => {\n setStateOffer(res);\n }).catch((error) => {\n setStateError(error);\n });\n };\n\n useEffect(() => {\n if (tempCode) {\n offerService.getOfferInfo(tempCode).then((res) => {\n if (res.data.clientSelection === 0 && isUserSelectionValid) {\n onSelection(userSelection);\n } else {\n setStateOffer(res);\n }\n }).catch((error) => {\n setStateError(error);\n });\n }\n }, [tempCode, isUserSelectionValid]);\n\n if (state.error && state.error.status) {\n return (\n \n \n \n \n Sorry, your offer does not exist anymore.\n \n \n \n \n Best regards, \n \n \n \n );\n }\n\n return (\n \n {state.offer &&\n onSelection(1)}\n onDecline={() => onSelection(2)}\n onCallback={() => onSelection(6)}\n onCounterOffer={onCounterOffer}\n isCounterOfferSelected={isCounterOfferSelected} />}\n \n );\n};","import { makeStyles } from '@material-ui/core/styles';\nimport { displayBorder } from 'helpers';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n color: theme.quaternaryTextColor,\n height: '100%',\n position: 'relative',\n paddingLeft: '0.25rem',\n paddingRight: '0.25rem',\n backgroundColor: theme.drawersBackgroundColor,\n paddingBottom: '3.5rem',\n overflowY: 'auto',\n [theme.breakpoints.up(displayBorder)]: {\n paddingLeft: '6rem',\n paddingRight: '6rem'\n }\n },\n tableCell: {\n fontSize: '0.8rem'\n },\n paddingRight: {\n paddingRight: '1.25rem',\n alignSelf: 'center'\n },\n spaceBetween: {\n direction: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n marginBottom: '1rem'\n },\n companyName: {\n margin: 0,\n cursor: 'pointer',\n fontWeight: 'bold',\n width: '20rem',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'normal',\n '-webkit-line-clamp': 2,\n '-webkit-box-orient': 'vertical',\n display: '-webkit-box'\n },\n total: {\n color: theme.primaryTextColor,\n display: 'flex'\n },\n marginRight: {\n marginRight: '0.3rem',\n display: 'flex'\n },\n paddingTop: {\n paddingTop: '1.5rem !important',\n marginRight: '0.5rem'\n },\n filterIcon: {\n width: '1.3rem',\n height: '1.3rem',\n marginRight: '0.5rem'\n },\n alignItems: {\n alignItems: 'center'\n },\n filterText: {\n margin: 0\n },\n '@media screen and (max-width: 380px)': {\n paddingRight: {\n margin: '0.5rem auto'\n },\n filterIcon: {\n marginLeft: '1rem'\n },\n companyName: {\n margin: 0,\n cursor: 'pointer',\n fontWeight: 'bold',\n width: '8rem',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'normal',\n '-webkit-line-clamp': 2,\n '-webkit-box-orient': 'vertical',\n display: '-webkit-box'\n },\n },\n '@media screen and (min-width: 381px) and (max-width: 615px)': {\n paddingRight: {\n margin: '0.5rem auto'\n },\n filterIcon: {\n marginLeft: '1rem'\n },\n companyName: {\n margin: 0,\n cursor: 'pointer',\n fontWeight: 'bold',\n width: '10rem',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'normal',\n '-webkit-line-clamp': 2,\n '-webkit-box-orient': 'vertical',\n display: '-webkit-box'\n },\n },\n}));","import React, { useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\nimport { Grid } from '@material-ui/core';\n\nimport { Button, CustomTable as Table, Header, SearchFilter, SelectFilter, Wrapper } from 'components';\nimport { formatDateForTable, companyStatuses } from 'helpers';\nimport { filterIcon } from 'resources';\nimport { companyService } from 'services';\n\nimport { useStyles } from './style.css.js';\n\nexport const CompanyListPage = () => {\n const classes = useStyles();\n const [t] = useTranslation('common');\n const navHistory = useHistory();\n const [search, setSearch] = useState('');\n const [companyStatus, setCompanyStatus] = useState(-1);\n const [total, setTotal] = useState();\n\n const callback = (query) => setSearch(query);\n\n const statusView = company => {\n return {t(company.status === 0 ? 'Inactive' : 'Active')} ;\n };\n\n const companyNameView = company => {\n return (\n navHistory.push(`/companies/${company.id}`)}>\n {company.name}\n
\n );\n };\n\n const columnConfiguration = useMemo(() => [\n { id: 'id', label: t('id'), disableSorting: false, format: company => company.id },\n { id: 'name', label: t('companyName'), disableSorting: false, format: company => companyNameView(company) },\n { id: 'status', label: t('status'), disableSorting: false, format: company => statusView(company) },\n { id: 'phone', label: t('companyPhone'), disableSorting: true, format: company => company.phone },\n {\n id: 'dateCreated', label: t('dateCreated'), format: (company) => {\n return formatDateForTable(company.createdAt, classes.tableCell);\n }\n },\n {\n id: 'lastModified', label: t('lastModified'), format: (company) => {\n return formatDateForTable(company.modifiedAt, classes.tableCell);\n }\n }\n ], []);\n\n const handleChangeStatus = (e) => {\n setCompanyStatus(e.target.value);\n };\n\n const filters = { status: companyStatus, search };\n\n return (\n \n \n
\n \n \n \n \n navHistory.push('/companies/create')} />\n \n \n
\n \n {t('filters')}
\n \n \n \n \n \n \n {total !== 0 &&\n
\n \n {t('total')}:
\n {total}
\n \n }\n
setTotal(value)} filter={filters} />\n \n \n );\n};","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n width: '100%',\n padding: '0 0 40px 0',\n },\n form: {\n width: '100%'\n },\n header: {\n fontSize: '24px',\n fontFamily: theme.fontLato,\n color: theme.quaternaryTextColor,\n letterSpacing: 0,\n width: '100%',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n lineClamp: 2,\n padding: '1rem 0'\n },\n formActions: {\n marginTop: '5%',\n placeContent: 'end',\n },\n modal: {\n height: 'fit-content',\n minHeight: 'calc(100vh - 150px)',\n padding: '40px',\n backgroundClip: 'content-box',\n boxShadow: 'inset 0 0 0 40px' + theme.quinaryBackgroundColor,\n margin: '0 auto',\n maxWidth: '100%'\n },\n modalPhone: {\n padding: '1rem'\n },\n iconStyle: {\n height: '1.5rem',\n width: '1.5rem',\n color: theme.primaryBackgroundColor,\n paddingLeft: '0,'\n },\n uncheckedIconStyle: {\n height: '1.5rem',\n width: '1.5rem',\n color: theme.primaryBorderColor,\n paddingLeft: '0,'\n },\n isRequired: {\n marginRight: '1rem',\n color: theme.primaryBackgroundColor\n },\n radioGroup: {\n padding: '1rem',\n },\n radio: {\n marginRight: '3rem',\n },\n radioLabel: {\n fontWeight: 500,\n },\n radioBlock: {\n '& > fieldset': {\n padding: '0',\n margin: '0 0 0 15px',\n }\n },\n checkboxBlock: {\n margin: '12px 0 0 0',\n '& > span': {\n display: 'inline-flex',\n marginBottom: '12px',\n color: theme.primaryTextColor,\n },\n '& > div > div': {\n margin: '0 0 0 15px',\n display: 'flex',\n },\n '& > div > div > label > span.MuiTypography-root > span': {\n color: theme.tertiaryBackgroundColor\n }\n },\n}));\n","import React, { useState } from 'react';\nimport { Form, Formik, Field } from 'formik';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\nimport * as Yup from 'yup';\nimport { Container, Grid, useMediaQuery, useTheme, FormControl, FormControlLabel, Radio, RadioGroup } from '@material-ui/core';\nimport RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';\nimport RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';\nimport { BackButton, Button, InputField, SadStates, Loader, toastNotification, CheckboxInputField } from 'components';\nimport { phoneRegExp, companyStatuses } from 'helpers';\nimport { companyService } from 'services';\nimport { useStyles } from '../style.css.js';\n\nexport const CreateCompanyPage = () => {\n const classes = useStyles();\n const { t } = useTranslation(['common', 'error']);\n const navHistory = useHistory();\n const [isLoading, setIsLoading] = useState(false);\n const [initialValues, setInitialValues] = useState({\n name: '',\n phone: '',\n status: 1,\n state: '',\n city: '',\n address: '',\n address2: '',\n zip: '',\n paidSms: false,\n paidEmail: false,\n optInDisabled: false,\n creditApplicationLink: ''\n });\n\n const theme = useTheme();\n const isExtraSmaller = useMediaQuery(theme.breakpoints.down('xs'));\n const isSmaller = useMediaQuery(theme.breakpoints.down('sm'));\n\n const handleSubmit = (values) => {\n setIsLoading(true);\n setInitialValues(values);\n companyService.create(values).then(() => {\n setIsLoading(false);\n toastNotification('info', t('newCompanyAdded'));\n navHistory.goBack();\n }).catch((err) => {\n setIsLoading(false);\n toastNotification('error', t(`error:${Object.values(err.response.data.errors)[0]}`));\n });\n };\n\n const companySchema = Yup.object().shape({\n name: Yup.string()\n .max(50, t('stringMax50'))\n .required(t('required')),\n phone: Yup.string()\n .max(20, t('stringMax20'))\n .matches(phoneRegExp, t('invalidPhoneFormat'))\n .required(t('required')),\n status: Yup.number(),\n state: Yup.string()\n .max(20, t('stringMax20')),\n city: Yup.string()\n .max(20, t('stringMax20')),\n address: Yup.string()\n .max(100, t('stringMax100')),\n address2: Yup.string()\n .max(100, t('stringMax100')),\n zip: Yup.string()\n .max(10, t('stringMax10'))\n });\n\n const handleCancel = () => {\n navHistory.goBack();\n };\n\n const StatusRadioComponent = (prop) => {\n return (\n \n \n {companyStatuses.map((type, index) => {\n return (\n {t(type.label)} } />\n );\n })}\n \n \n );\n };\n\n return (\n \n
navHistory.replace('/companies')} />\n \n \n {({ values, dirty, setFieldValue }) => (\n \n )}\n \n \n \n {company.name} includes {company.usersCount} users.\n \n {companyStatuses.map((type, index) => {\n return (\n {t(type.label)} } />\n );\n })}\n \n \n );\n };\n\n return (\n \n
navHistory.replace('/companies')} />\n \n \n {({ values, dirty, setFieldValue }) => (\n \n )}\n \n \n \n navHistory.push(`/companies/${report.companyId}`)}>\n {report.companyName}\n
\n );\n };\n\n const userNameView = report => {\n if (disabledExport) {\n setDisabledExport(false);\n }\n return (\n navHistory.push(`/users/edit/${report.id}`)}>\n {report.name} {report.surname}\n
\n );\n };\n\n const userRoleView = user => {\n const userRole = roles.find(r => user.role === r.value);\n return {t(userRole.label)}
;\n };\n\n const columnConfiguration = useMemo(() => [\n { id: 'id', label: t('id'), disableSorting: true, format: report => report.id },\n { id: 'user_name', label: t('userName'), disableSorting: true, format: report => userNameView(report) },\n { id: 'user_role', label: t('userRole'), disableSorting: true, format: report => userRoleView(report) },\n { id: 'company_name', label: t('companyName'), disableSorting: true, format: report => companyNameView(report) },\n {\n id: 'dateCreated', label: t('dateCreated'), disableSorting: true, format: (user) => {\n return formatDateForTable(user.createdAt, classes.tableCell);\n }\n },\n {\n id: 'lastModified', label: t('lastModified'), disableSorting: true, format: (user) => {\n return formatDateForTable(user.modifiedAt, classes.tableCell);\n }\n }\n ], []);\n\n const filters = { array, dateFilter };\n\n const handleChange = (value, filterName, filterLabel) => {\n setDisabledExport(true);\n if (array.filter(arr => arr.key === `${filterName}_${value}`).length === 0) {\n setArray([...array, { key: `${filterName}_${value}`, id: filterName, value: value, label: filterLabel }]);\n }\n };\n\n const handleDelete = el => {\n setDisabledExport(true);\n setArray(array.filter(a => el !== a));\n };\n\n const getReport = () => {\n return reportService.getAll(0, 10000000, '', filters).then((data) => {\n return data.items.map((item) => {\n const userRole = roles.find(r => item.role === r.value);\n return {\n 'ID#': item.id,\n 'USER NAME': `${item.name} ${item.surname}`,\n 'USER ROLE': t(userRole.label),\n 'COMPANY NAME': item.companyName,\n 'DATE CREATED': formatDate(item.createdAt),\n 'LAST MODIFIED': formatDate(item.modifiedAt)\n };\n });\n });\n };\n\n const onDateChange = (date) => {\n setDisabledExport(true);\n setDateFilter(date);\n };\n\n const getFileName = () => {\n let company = 'All_companies';\n if (array.length > 0) {\n company = array.length === 1 ? array[0].label : 'Selected_companies';\n }\n return `Report_${company}_${formatDate(dateFilter.from)}_${formatDate(dateFilter.to)}`.replaceAll('/', '');\n };\n\n return (\n \n \n
\n \n \n \n \n
\n \n {t('filters')}
\n \n \n {\n handleChange(value, 'companies', companies.items.find(item => item.value === value).label);\n }}\n menuItem={companies?.items ?? []} />\n \n \n \n \n \n \n\n
\n \n {!isSmaller && total !== 0 &&\n \n \n {t('total')}:
\n {total}
\n \n }\n {array.map((el, index) => {\n return (\n \n handleDelete(el)} deleteIcon={ \n );\n })}\n \n \n
setTotal(value)} filter={filters} />\n \n \n );\n};","import { makeStyles } from '@material-ui/core/styles';\nimport themeDefault from '../../themeDefault';\n\nconst yellowColor = themeDefault.primaryBackgroundColor;\n\nexport const useStyles = makeStyles((theme) => ({\n root: {\n width: 'auto',\n marginTop: '1rem',\n padding: '1rem',\n },\n btnContainer: {\n margin: '20px 0 0 0'\n },\n buttonStyle: {\n margin: theme.spacing(1),\n minWidth: '150px',\n cursor: 'pointer',\n },\n buttonAccept: {\n color: 'green',\n borderColor: 'green',\n },\n buttonDecline: {\n color: 'red',\n borderColor: 'red',\n },\n buttonLarge: {\n width: '318px'\n },\n text: {\n fontSize: '1.2rem',\n color: 'black',\n lineHeight: '2rem',\n fontWeight: '400',\n },\n textRegards: {\n marginTop: '1rem',\n lineHeight: '1.2rem',\n fontStyle: 'italic',\n },\n cbText: {\n margin: '0',\n padding: '0 15%',\n color: theme.primaryTextColor,\n fontSize: '1rem',\n lineHeight: '1.5rem',\n '& a': {\n paddingLeft: '38px',\n color: theme.primaryTextColor\n }\n },\n headerText: {\n display: 'inline-block',\n margin: '20px 0 4px 0',\n padding: '8px 24px',\n fontSize: '1.4rem',\n border: `solid 1px ${yellowColor}`,\n borderRadius: '5px',\n fontWeight: '600'\n },\n optInCheckbox: {\n marginTop: '15px',\n '& > label': {\n alignItems: 'flex-start',\n width: 'auto !important',\n '& > span:last-child': {\n padding: '8px 0 0 8px',\n }\n }\n }\n}));","import { useLocation } from 'react-router-dom';\nimport { useTranslation } from 'react-i18next';\nimport clsx from 'clsx';\nimport { Container, Grid, Typography, Card, CardContent, CardActions, Button } from '@material-ui/core';\nimport { useState, useEffect } from 'react';\nimport { AppBackdrop, CheckboxInputField } from 'components';\nimport { leadService } from 'services';\nimport { optInSmsType } from 'helpers';\nimport { Check, Clear } from '@material-ui/icons';\nimport { useStyles } from './OptInSmsPage.css';\n\nconst initPageState = {\n isFetching: true,\n error: null,\n lead: null,\n //lead: {\n // companyName: 'Company Name',\n // salesFullName: John Smit,\n // userFullName: 'Nick Beem',\n // userPhone: '380995551122',\n // optInSms: 0,\n //},\n};\n\nexport const OptInSmsPage = () => {\n const classes = useStyles();\n const [t] = useTranslation(['common', 'error']);\n const [state, setState] = useState(initPageState);\n const [cbValue, setCbValue] = useState(false);\n const [complete, setComplete] = useState(false);\n const [userSelection, setUserSelection] = useState(false);\n const { search } = useLocation();\n const tempCode = new URLSearchParams(search).get('c');\n const isSelected = new URLSearchParams(search).get('s') === '1';\n\n const setPageDataState = (res) => {\n setState({\n ...state,\n isFetching: false,\n lead: {\n ...res.data\n },\n });\n };\n\n const setPageStateError = (error) => {\n let errorMessage = 'Sorry, this link has expired.';\n if (error?.response?.data?.errors) {\n const errorCode = Object.values(error.response.data.errors)[0];\n if (errorCode === 'ForbiddenError') {\n errorMessage = t(`error:${errorCode}`);\n }\n }\n setState({\n ...state,\n isFetching: false,\n error: errorMessage,\n });\n };\n\n useEffect(() => {\n if (tempCode) {\n leadService.getLeadInfo(tempCode).then((res) => {\n setPageDataState(res);\n }).catch((error) => {\n setPageStateError(error);\n });\n }\n }, [tempCode]);\n\n const onSelection = (selection) => {\n setState({\n ...state,\n isFetching: true,\n });\n setUserSelection(selection);\n leadService.sendOptInSelection(tempCode, selection).then(() => {\n setComplete(true);\n setState({\n ...state,\n isFetching: false,\n });\n }).catch((error) => {\n setPageStateError(error);\n });\n };\n\n if (state.error) {\n return (\n \n \n \n \n {state.error ?? 'Sorry, this link has expired.'}\n \n \n \n \n Best regards, \n \n \n \n );\n }\n\n if (isSelected) {\n return (\n \n {!state.isFetching && state.lead &&\n \n \n \n {`${state.lead.companyName} car sales offers`}\n \n \n {complete &&\n \n \n Thanks for your answer!
\n {userSelection === optInSmsType.Disagreed ?\n `You disagreed to receive SMS notifications from ${state.lead.companyName}.` :\n `You will continue receive SMS messages from ${state.lead.companyName} with car sale offer notifications.`}\n
\n \n \n }\n {!complete &&\n \n \n {`${state.lead.companyName} sends you car sale offers over Nice Price`}
\n when there is one matching your requirements.
\n Would you like to unsubscribe?
\n \n \n \n onSelection(2)}\n className={clsx(classes.buttonDecline, classes.buttonStyle)}>\n Yes\n \n onSelection(1)}\n className={clsx(classes.buttonAccept, classes.buttonStyle)}>\n No, keep subscription\n \n \n \n \n }\n \n }\n \n );\n }\n\n return (\n \n {!state.isFetching && state.lead &&\n \n \n \n {`${state.lead.companyName} car sales offers`}\n \n \n {complete &&\n \n \n Thanks for your answer!
\n {userSelection === optInSmsType.Disagreed ?\n `You disagreed to receive SMS notifications from ${state.lead.companyName}.` :\n `You have successfully opted in for SMS messages from ${state.lead.companyName} for car sale offer notifications.`}\n
\n \n \n }\n {!complete &&\n \n \n {`${state.lead.companyName} will send you car sale offers over`}
\n Nice Price when there is one matching your requirements.
\n \n \n {\n setCbValue(val);\n }} />\n Privacy Policy \n \n \n \n onSelection(2)}\n className={clsx(classes.buttonDecline, classes.buttonStyle)}\n startIcon={ onSelection(1)}\n className={clsx(classes.buttonAccept, classes.buttonStyle)}\n startIcon={ \n \n \n }\n \n }\n \n );\n};","import { makeStyles } from '@material-ui/core/styles';\nimport { displayBorder, displayBorderExtraLarge } from 'helpers';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n width: '100%',\n height: '100%',\n [theme.breakpoints.up(displayBorder)]: {\n width: '100%',\n height: '100%',\n }\n },\n contentContainer: {\n margin: '0.5rem'\n },\n closeImg: {\n cursor: 'pointer',\n float: 'right',\n marginTop: '5px',\n width: '40px',\n padding: '0px 6px 0px 0px',\n color: theme.primaryButtonColor,\n fontSize: '1.5rem',\n '&:hover': {\n backgroundColor: 'transparent'\n }\n },\n buttonContainer: {\n display: 'flex',\n justifyContent: 'center'\n },\n dialogPaper: {\n marginTop: '8%',\n minHeight: '80%',\n maxHeight: '80%',\n minWidth: '85%',\n maxWidth: '85%',\n [theme.breakpoints.up(displayBorderExtraLarge)]: {\n marginTop: '5%',\n minHeight: '85%',\n maxHeight: '85%',\n minWidth: '90%',\n maxWidth: '90%',\n }\n },\n deleteMessageIcon: {\n alignSelf: 'center'\n }\n}));","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport {\n Dialog, DialogActions, Grid,\n DialogTitle, useMediaQuery, IconButton, useTheme\n} from '@material-ui/core';\nimport Close from '@material-ui/icons/Close';\n\nimport { Button, toastNotification } from 'components';\nimport { GifTemplatesPage } from 'pages';\nimport { conversionBase } from 'helpers';\n\nimport { useStyles } from './BrowseGifTemplateDialog.css.js';\n\nexport const BrowseGifTemplateDialog = ({ isOpen, setDialogOpen, callback, selectedCardItem, setselectedCardItem }) => {\n\n const classes = useStyles();\n const theme = useTheme();\n const [t] = useTranslation('common');\n const [e] = useTranslation('error');\n\n const fullScreen = useMediaQuery(theme.breakpoints.down('md'));\n\n const maxUrlSizeB = 4 * conversionBase * conversionBase;\n const handleConfirm = () => {\n if (selectedCardItem) {\n if (selectedCardItem.size <= maxUrlSizeB) {\n callback(selectedCardItem);\n setDialogOpen(false);\n } else {\n toastNotification('error', e('GifTemplpateOutOfSize'));\n }\n } else {\n toastNotification('error', e('GifTemplpateIsEmpty'));\n }\n };\n\n return (\n \n \n setDialogOpen(false)}>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nBrowseGifTemplateDialog.propTypes = {\n isOpen: PropTypes.bool,\n setDialogOpen: PropTypes.func,\n callback: PropTypes.func,\n id: PropTypes.any,\n selectedCardItem: PropTypes.object,\n setselectedCardItem: PropTypes.func\n};","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n border: 'none',\n width: '100%',\n outline: 'none',\n fontSize: '1rem',\n cursor: 'pointer',\n '&:active': {\n transform: 'translateY(1px)'\n },\n borderRadius: '0.438rem',\n height: '3.875rem',\n minWidth: '5.438rem'\n },\n smallContainer: {\n minWidth: '4.438rem !important'\n },\n showMoreButtonContainer: {\n width: '10rem',\n height: '3rem',\n minWidth: '3.438rem !important'\n },\n defaultColor: {\n backgroundColor: theme.primaryBackgroundColor,\n color: theme.quaternaryBackgroundColor\n },\n primary: {\n backgroundColor: theme.tertiaryBackgroundColor,\n color: theme.quaternaryBackgroundColor\n },\n secondary: {\n backgroundColor: theme.senaryBackgroundColor,\n color: theme.primaryBackgroundColor\n },\n disabled: {\n backgroundColor: theme.quinaryBackgroundColor,\n color: theme.primaryTextColor\n },\n lightDefaultColor: {\n backgroundColor: theme.senaryBackgroundColor,\n color: theme.primaryBackgroundColor,\n fontWeight: 'bold'\n },\n backButtonContainer: {\n display: 'flex',\n cursor: 'pointer',\n paddingTop: '1rem',\n paddingLeft: '1rem',\n width: '4rem'\n },\n backButtonText: {\n margin: 0,\n fontSize: '1rem',\n paddingLeft: '0.5rem'\n },\n buttonWithIcon: {\n display: 'inline-block',\n border: 'none',\n width: '100%',\n outline: 'none',\n fontSize: '1rem',\n cursor: 'pointer',\n '&:active': {\n transform: 'translateY(1px)'\n },\n borderRadius: '15rem',\n height: '3.875rem',\n minWidth: '11.438rem',\n backgroundColor: theme.senaryBackgroundColor,\n color: theme.primaryBackgroundColor\n },\n buttonText: {\n display: 'inline-flex',\n alignItems: 'center',\n paddingTop: '0.2rem',\n fontWeight: 'bold',\n paddingRight: '5%'\n },\n '@media screen and (max-width: 359px)': {\n container: {\n border: 'none',\n width: '100%',\n outline: 'none',\n fontSize: '1rem',\n cursor: 'pointer',\n '&:active': {\n transform: 'translateY(1px)'\n },\n borderRadius: '0.438rem',\n height: '2.875rem',\n minWidth: '3.438rem'\n }\n },\n '@media screen and (min-width: 768px, max-width: 1025px)': {\n container: {\n border: 'none',\n width: '100%',\n outline: 'none',\n fontSize: '1rem',\n cursor: 'pointer',\n '&:active': {\n transform: 'translateY(1px)'\n },\n borderRadius: '0.438rem',\n height: '2.875rem',\n minWidth: '3.438rem'\n }\n },\n}));","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { Grid } from '@material-ui/core';\n\nimport { backButtonIcon } from 'resources';\n\nimport { useStyles } from './Button.css.js';\n\nexport const BackButton = ({callback}) => {\n const classes = useStyles();\n const [t] = useTranslation('common');\n\n return (\n \n \n \n \n {t('back')}
\n \n \n );\n};\n\nBackButton.propTypes = {\n callback: PropTypes.func\n};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\n\nimport { useStyles } from './Button.css.js';\n\nexport const Button = ({text, disabled, type, callback, color = 'defaultColor', smallButton = false, showMoreButton = false, onClick}) => {\n\n const classes = useStyles();\n const [t] = useTranslation('common');\n\n const smallButtonStyle = smallButton ? classes.smallContainer : '';\n const showMoreButtonStyle = showMoreButton ? classes.showMoreButtonContainer : '';\n\n return (\n {\n if (callback) {\n callback();\n }\n if (onClick) {\n onClick();\n }\n }}>\n {t(text)}\n \n );\n};\n\nButton.propTypes = {\n text: PropTypes.string,\n type: PropTypes.string,\n disabled: PropTypes.bool,\n callback: PropTypes.func,\n color: PropTypes.string,\n smallButton: PropTypes.bool,\n showMoreButton: PropTypes.bool,\n onClick: PropTypes.func\n};","import React from 'react';\nimport { Tooltip } from '@material-ui/core';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\n\nimport { useStyles } from './Button.css.js';\n\nexport const ButtonWithTooltip = ({ text, disabled, type, callback, color = 'defaultColor', smallButton = false, showMoreButton = false, onClick, tooltipTitle = '', tooltipPosition = 'top' }) => {\n\n const classes = useStyles();\n const [t] = useTranslation('common');\n\n const smallButtonStyle = smallButton ? classes.smallContainer : '';\n const showMoreButtonStyle = showMoreButton ? classes.showMoreButtonContainer : '';\n\n return (\n \n \n {\n if (callback) {\n callback();\n }\n if (onClick) {\n onClick();\n }\n }}>\n {t(text)}\n \n
\n \n );\n};\n\nButtonWithTooltip.propTypes = {\n text: PropTypes.string,\n type: PropTypes.string,\n disabled: PropTypes.bool,\n callback: PropTypes.func,\n color: PropTypes.string,\n smallButton: PropTypes.bool,\n showMoreButton: PropTypes.bool,\n onClick: PropTypes.func,\n tooltipTitle: PropTypes.string,\n tooltipPosition: PropTypes.string\n};","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useStyles } from './Button.css.js';\nimport PropTypes from 'prop-types';\n\nexport const ButtonWithIcon = ({text, disabled, type, callback, icon}) => {\n\n const classes = useStyles();\n const [t] = useTranslation('common');\n\n return (\n {\n if (callback) {\n callback();\n }\n }} >{icon} {t(text)}
\n \n );\n};\n\nButtonWithIcon.propTypes = {\n text: PropTypes.string,\n type: PropTypes.string,\n disabled: PropTypes.bool,\n callback: PropTypes.func,\n icon: PropTypes.element,\n isSmaller: PropTypes.bool\n};","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles(theme => ({\n container: {\n border: '1px solid' + theme.secondaryBorderColor,\n borderRadius: '0.313rem'\n },\n scrollBottom: {\n height: '100%',\n width: '100%'\n },\n header: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n borderBottom: '1px solid' + theme.secondaryBorderColor\n },\n conversationHistory: {\n display: 'flex',\n justifyContent: 'row',\n padding: '0.5rem',\n marginLeft: '1rem',\n cursor: 'pointer'\n },\n conversationHistoryText: {\n fontSize: '1.125rem',\n fontWeight: 'bold'\n },\n img: {\n marginRight: '0.5rem',\n marginTop: '0.4rem'\n },\n viewThread: {\n padding: '0.5rem',\n marginRight: '1rem',\n cursor: 'pointer'\n },\n sendIcon: {\n backgroundColor: theme.tertiaryBackgroundColor,\n padding: '1rem',\n borderRadius: '50%',\n height: '3rem',\n marginRight: '0.5rem'\n },\n viewThreadText: {\n color: theme.primaryBackgroundColor,\n fontSize: '1.125rem',\n fontWeight: 'bold'\n },\n scrollButton: {\n display: 'none'\n },\n conversation: {\n height: '40rem',\n display: 'flex',\n justifyContent: 'center',\n overflowY: 'auto',\n flexDirection: 'column-reverse',\n overscrollBehavior: 'contain'\n },\n gradient: {\n height: '100%',\n backgroundColor: 'purple',\n zIndex: '200'\n },\n footer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: '0.5rem',\n borderTop: '1px solid' + theme.secondaryBorderColor\n },\n marginLeft: {\n marginLeft: '1rem'\n },\n writeSomething: {\n paddingRight: '2rem',\n },\n sendContainer: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n padding: '10px 0 10px 0'\n },\n buttonSendSms: {\n cursor: 'pointer',\n border: 'none',\n background: 'none',\n borderRadius: '50%',\n },\n convMessage: {\n display: 'block',\n },\n widthInherit: {\n width: 'inherit'\n },\n loadMore: {\n width: '100%',\n cursor: 'pointer'\n },\n buttonDisabled: {\n backgroundColor: theme.primaryTextColor,\n color: theme.quinaryBackgroundColor,\n border: 'none'\n },\n '@media screen and (max-width: 960px)': {\n footer: {\n flexDirection: 'column',\n FlexWrap: 'nowrap'\n },\n sendContainer: {\n alignSelf: 'normal',\n columnGap: '20%',\n justifyContent: 'space-between'\n },\n viewThreadText: {\n display: 'none'\n }\n }\n}));","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\nimport { useQuery } from 'react-query';\nimport * as Yup from 'yup';\nimport ScrollToBottom from 'react-scroll-to-bottom';\nimport { Grid, Tooltip } from '@material-ui/core';\nimport { Formik, Form } from 'formik';\n\nimport { Button, ButtonWithTooltip, ConversationInputField, toastNotification, ConversationMessage, SadStates, Loader, EmptyDialog } from 'components';\nimport { conversationMessageService, offerService } from 'services';\nimport { conversationMessageSenderType, rows, getPaidFeaturesError, optInSmsType } from 'helpers';\nimport { noteIcon, sendIcon, emptyChatIcon } from 'resources';\n\nimport { useStyles } from './ConversationForm.css';\n\nconst REFETCH_INTERVAL_MS = 10000;\n\nexport const ConversationForm = ({ leadData, leadId, refetchLead }) => {\n const classes = useStyles();\n const { t } = useTranslation(['common', 'error']);\n const [customerName] = useState(leadData.name + ' ' + leadData.surname);\n const [userName] = useState(leadData.user?.name + ' ' + leadData.user?.surname);\n const [searchIndex] = useState(leadData.user?.apiPhone + ':' + leadData.phone);\n const [rowsPerPage, setRowsPerPage] = useState(rows);\n const [refetchInterval] = useState(REFETCH_INTERVAL_MS);\n const [isLoadingMoreMessages, setIsLoadingMoreMessages] = useState(false);\n const [isDialogOpen, setIsDialogOpen] = useState(false);\n const [counterofferId, setCounterofferId] = useState(false);\n const { isLoading, data = {}, refetch } = useQuery(\n ['conversationForm'], () => conversationMessageService.getConversationMessages(leadId, searchIndex, rowsPerPage)\n , { isLoadingMoreMessages, refetchInterval: refetchInterval });\n const navHistory = useHistory();\n const [isSmsSent, setIsSmsSent] = useState(false);\n\n const refNewFirstElement = useRef();\n const paidFeatureError = getPaidFeaturesError(leadData?.user.company ?? {}, leadData?.defaultChannel);\n const disableCreateButton = leadData?.user.company ?\n !leadData.user.company.paidSms && !leadData.user.company.paidEmail : false;\n const optInError = leadData.optInSms !== optInSmsType.Agreed &&\n leadData?.defaultChannel === 0 &&\n !leadData?.user.company.optInDisabled ?\n t('optInDisagreedTooltip') : '';\n\n useEffect(() => {\n if (!isLoading && data.items.length <= rowsPerPage) {\n refNewFirstElement && refNewFirstElement.current && refNewFirstElement.current.scrollIntoView({ behavior: 'auto' });\n }\n setIsLoadingMoreMessages(false);\n }, [isLoading, data]);\n\n useEffect(() => {\n refetch();\n }, [isLoadingMoreMessages]);\n\n const onAcceptCounterOffer = (id) => {\n setIsDialogOpen(false);\n offerService.acceptCounterOffer(id).then(() => {\n refNewFirstElement.current.scrollIntoView({ behavior: 'auto' });\n toastNotification('info', t('counterOfferAccepted'));\n });\n };\n\n const onAcceptCounterOfferClick = (id) => {\n setCounterofferId(id);\n setIsDialogOpen(true);\n };\n\n const onEditCounterOfferClick = (id) => {\n navHistory.push(`/leads/view/${leadId}/sendOffer?counteroffer=${id}`);\n };\n\n const handleSubmit = async (values, { setSubmitting }) => {\n try {\n await conversationMessageService.createConversatonMessage(values);\n values.body = '';\n setSubmitting(false);\n refetch();\n refetchLead();\n setIsSmsSent(true);\n } catch (error) {\n toastNotification('error', t(`error:${Object.values(error.response.data.errors)[0]}`));\n }\n };\n\n const validationSchema = Yup.object().shape({\n body: Yup.string()\n .required(t('required'))\n .max(500, t('smsMessageValidation')),\n });\n\n return (\n \n
\n
\n \n {t('conversationHistory')}
\n \n \n {t('viewThread')}
\n \n \n
\n \n \n {data.items?.map((message, i) => {\n return (\n \n {rowsPerPage < data?.total &&\n \n {\n setRowsPerPage(rowsPerPage + rows);\n setIsLoadingMoreMessages(true);\n setIsSmsSent(false);\n }} />\n }\n }\n \n \n }\n \n \n
\n {() => (\n \n )}\n \n \n
{customerName}
\n
\n
{format(createdAt, dateFormatHours)}
\n
\n
{userName}
\n
\n
{format(createdAt, dateFormatHours)}
\n
\n
{userName}
\n
\n
\n
\n
{format(createdAt, dateFormatHours)}
\n
\n
{customerName}
\n
\n
{format(createdAt, dateFormatHours)}
\n
\n
{userName}
\n {message.mediaUrl &&\n
\n
\n
}\n {message.body &&\n
}\n
{format(createdAt, dateFormatHours)}
\n
\n
{customerName}
\n {message.mediaUrl &&\n
\n
\n {showButton && onAcceptCounterOffer &&\n
\n \n onAcceptCounterOffer(message.refEntityId)}>\n Accept Counter Offer\n \n \n \n }\n {onEditCounterOffer &&\n
\n \n onEditCounterOffer(message.refEntityId)}>\n Edit Offer\n \n \n }\n
}\n {message.body &&\n
}\n
{format(createdAt, dateFormatHours)}
\n
\n {messageView}\n
\n );\n};\nConversationMessage.propTypes = {\n message: PropTypes.object,\n customerName: PropTypes.string,\n userName: PropTypes.string,\n refNewFirstElement: PropTypes.object,\n onAcceptCounterOffer: PropTypes.func,\n onEditCounterOffer: PropTypes.func,\n showButton: PropTypes.bool,\n disableAcceptButton: PropTypes.bool,\n tooltipAcceptTitle: PropTypes.string,\n disableEditButton: PropTypes.bool,\n tooltipEditTitle: PropTypes.string\n};","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n border: '1px solid; border-radius: 7px; height: 3.5rem;',\n borderColor: theme.primaryBorderColor,\n width: '100%',\n marginBottom: '1.5rem'\n },\n containerDragAndDrop: {\n border: '1px dashed; border-radius: 7px; height: 4.5rem;',\n borderColor: theme.primaryBorderColor,\n backgroundColor: theme.denaryBackgroundColor,\n width: '100%',\n marginBottom: '1.5rem'\n },\n inputContainer: {\n width: '98%'\n },\n passwordInputContainer: {\n width: '80%',\n },\n maxWidth: {\n width: '100%'\n },\n input: {\n marginLeft: '0.2rem',\n paddingLeft: '0.5rem',\n borderLeft: '1px solid ' + theme.borderColor,\n border: '0',\n outline: 'none',\n top: '0.6rem',\n height: '2rem',\n position: 'relative',\n backgroundColor: 'transparent',\n '&:-webkit-autofill': {\n WebkitBoxShadow: '0 0 0 1000px white inset',\n fontSize: '1rem'\n },\n fontSize: '1rem',\n width: '97%'\n },\n inputDragAndDrop: {\n marginLeft: '0.2rem',\n paddingLeft: '0.5rem',\n borderLeft: '1px solid ' + theme.borderColor,\n border: '0',\n outline: 'none',\n height: '4.5rem',\n position: 'relative',\n backgroundColor: 'transparent',\n '&:-webkit-autofill': {\n WebkitBoxShadow: '0 0 0 1000px white inset',\n fontSize: '1rem'\n },\n fontSize: '1rem',\n width: '100%',\n textAlign: 'center',\n color: theme.primaryTextColor\n },\n spaceBetween: {\n direction: 'row',\n justifyContent: 'center',\n alignSelf: 'center',\n paddingTop: '1.5rem'\n },\n iconDorp: {\n fontSize: '1.2rem',\n paddingTop: '0.1rem',\n paddingRight: '0.5rem'\n },\n hiddenInputDragAndDrop: {\n opacity: '0',\n top: '-4.4rem'\n },\n validation: {\n color: theme.validationTextColor,\n top: '1.4rem',\n position: 'relative',\n textAlign: 'center',\n fontSize: '1rem',\n fontWeight: 'normal',\n backgroundColor: theme.validationBackgroundColor,\n width: '102%',\n zIndex: '1000'\n },\n validationNegativeTop: {\n top: '-4.4rem'\n },\n validationNegativeTopBrowse: {\n top: '-3.5rem'\n },\n passwordValidation: {\n color: theme.validationTextColor,\n top: '1.4rem',\n position: 'relative',\n textAlign: 'center',\n fontSize: '1rem',\n backgroundColor: theme.validationBackgroundColor,\n width: '125%'\n },\n conversationValidation: {\n color: theme.validationTextColor,\n top: '1.4rem',\n position: 'relative',\n textAlign: 'center',\n fontSize: '1rem',\n fontWeight: 'normal',\n backgroundColor: theme.validationBackgroundColor,\n width: '96%'\n },\n labelContainer: {\n flexDirection: 'row'\n },\n label: {\n outline: 'none',\n bottom: '0.5rem',\n position: 'relative',\n fontSize: '1rem',\n whiteSpace: 'nowrap',\n color: theme.primaryTextColor,\n paddingTop: '1rem'\n },\n isRequired: {\n bottom: '0.5rem',\n position: 'relative',\n fontSize: '1rem',\n color: theme.primaryBackgroundColor,\n paddingTop: '1rem'\n },\n readOnly: {\n color: theme.primaryBorderColor\n },\n passwordIcon: {\n cursor: 'pointer',\n direction: 'rtl',\n position: 'relative',\n marginLeft: '1rem',\n marginRight: '0.5rem',\n marginTop: '1rem'\n },\n passwordIconProfileForm: {\n cursor: 'pointer',\n direction: 'rtl',\n position: 'relative',\n marginLeft: '0.4rem',\n marginRight: '0.4rem',\n marginTop: '1rem'\n },\n noteContainer: {\n border: '1px solid; border-radius: 7px; height: 13.5rem;',\n borderColor: theme.primaryBorderColor,\n width: '100%',\n marginBottom: '1.5rem'\n },\n noteSmallContainer: {\n border: '1px solid; border-radius: 7px; height: 5.8rem;',\n borderColor: theme.primaryBorderColor,\n width: '100%',\n marginBottom: '1.5rem'\n },\n focusNoteSmallContainer: {\n border: '1px solid; border-radius: 7px; height: 5.8rem;',\n borderColor: theme.primaryBackgroundColor,\n width: '100%',\n marginBottom: '1.5rem'\n },\n noteInput: {\n border: '0',\n outline: 'none',\n top: '0.6rem',\n height: '12rem',\n position: 'relative',\n backgroundColor: 'transparent',\n '&:-webkit-autofill': {\n WebkitBoxShadow: '0 0 0 1000px white inset',\n fontSize: '1rem'\n },\n fontSize: '1rem',\n width: '99%',\n resize: 'none'\n },\n noteSmallInput: {\n border: '0',\n outline: 'none',\n top: '0.6rem',\n height: '4.3rem',\n position: 'relative',\n backgroundColor: 'transparent',\n '&:-webkit-autofill': {\n WebkitBoxShadow: '0 0 0 1000px white inset',\n fontSize: '1rem'\n },\n fontSize: '1rem',\n width: '99%',\n resize: 'none'\n },\n noteValidation: {\n color: theme.validationTextColor,\n top: '0.5rem',\n position: 'relative',\n textAlign: 'center',\n fontSize: '0.9rem',\n backgroundColor: theme.validationBackgroundColor,\n width: '100%',\n },\n noteInputContainer: {\n width: '100%'\n },\n focusContainer: {\n border: '1px solid; border-radius: 7px; height: 3.5rem;',\n borderColor: theme.primaryBackgroundColor,\n width: '100%',\n marginBottom: '1.5rem'\n },\n focusNoteContainer: {\n border: '1px solid; border-radius: 7px; height: 13.5rem;',\n borderColor: theme.primaryBackgroundColor,\n width: '100%',\n marginBottom: '1.5rem'\n },\n conversationInput: {\n marginLeft: '0.2rem',\n paddingRight: '0.2rem',\n border: '0',\n outline: 'none',\n height: '100%',\n position: 'relative',\n backgroundColor: 'transparent',\n fontSize: '1rem',\n wordBreak: 'break-word',\n width: '-webkit-fill-available',\n resize: 'none',\n '&::-webkit-input-placeholder': {\n color: theme.primaryTextColor,\n fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif'\n }\n },\n browseContainer: {\n background: theme.primaryBackgroundColor,\n display: 'none'\n },\n containerDragAndDropBrowse: {\n display: 'none'\n },\n inputDragAndDropBrowse: {\n display: 'none'\n },\n hiddenInputDragAndDropBrowse: {\n display: 'none'\n },\n checkboxInputLabel: {\n color: theme.primaryTextColor,\n },\n checkboxInputControl: {\n marginTop: '1.5rem',\n '& > label': {\n width: 'max-content'\n }\n },\n '@media screen and (max-width: 520px)': {\n checkboxInputControl: {\n margin: 0,\n },\n passwordInputContainer: {\n width: '70%'\n },\n passwordValidation: {\n color: theme.validationTextColor,\n top: '1.4rem',\n position: 'relative',\n textAlign: 'center',\n fontSize: '1rem',\n backgroundColor: theme.validationBackgroundColor,\n width: '145%'\n },\n },\n '@media screen and (max-width: 1024px)': {\n containerDragAndDrop: {\n display: 'none'\n },\n inputDragAndDrop: {\n display: 'none'\n },\n hiddenInputDragAndDrop: {\n display: 'none'\n },\n containerDragAndDropBrowse: {\n display: 'flex',\n height: '3.5rem',\n backgroundColor: theme.senaryBackgroundColor,\n width: '100%',\n minWidth: '6rem'\n },\n inputDragAndDropBrowse: {\n display: 'flex',\n outline: 'none',\n height: '3.5rem',\n position: 'relative',\n backgroundColor: 'transparent',\n '&:-webkit-autofill': {\n WebkitBoxShadow: '0 0 0 1000px white inset',\n fontSize: '1rem'\n },\n fontSize: '1rem',\n width: '100%',\n textAlign: 'center',\n color: theme.primaryBackgroundColor,\n fontWeight: 'bold',\n minWidth: '5rem'\n },\n hiddenInputDragAndDropBrowse: {\n display: 'flex',\n opacity: '0',\n top: '-3.6rem',\n minWidth: '5rem',\n width: '6rem',\n height: '3.5rem',\n },\n centerContent: {\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n spaceBetween: {\n justifyContent: 'center',\n alignSelf: 'center'\n },\n browseContainer: {\n background: theme.primaryBackgroundColor,\n display: 'flex'\n },\n },\n '@media screen and (min-width: 1010px) and (max-width: 1233px)': {\n passwordIcon: {\n marginRight: '0.3rem'\n },\n passwordIconProfileForm: {\n marginRight: '0.3rem'\n }\n },\n '@media screen and (min-width: 960px) and (max-width: 1009px)': {\n passwordIcon: {\n marginRight: '0.1rem'\n },\n passwordIconProfileForm: {\n marginRight: '0.1rem'\n }\n }\n}));","import React from 'react';\nimport clsx from 'clsx';\nimport { Field, ErrorMessage } from 'formik';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\n\nimport { useStyles } from './InputField.css.js';\n\nexport const ConversationInputField = ({ inputName, type, placeholder, readOnly }) => {\n\n const classes = useStyles();\n const [t] = useTranslation('common');\n\n return (\n \n
\n );\n};\n\nConversationInputField.propTypes = {\n inputName: PropTypes.string,\n type: PropTypes.string,\n placeholder: PropTypes.string,\n readOnly: PropTypes.bool\n};\n","import { makeStyles } from '@material-ui/core/styles';\nimport { displayBorder } from 'helpers';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n width: '100%',\n margin: 'auto',\n [theme.breakpoints.up(displayBorder)]: {\n width: '50%'\n }\n },\n closeImg: {\n cursor: 'pointer',\n float: 'right',\n marginTop: '5px',\n width: '40px',\n padding: '0px 6px 0px 0px',\n color: theme.primaryButtonColor,\n fontSize: '1.5rem',\n '&:hover': {\n backgroundColor: 'transparent'\n }\n },\n dialogTitle: {\n textAlign: 'center',\n padding: '0px 0px 10px 0px',\n fontSize: '1.3rem',\n '& .MuiTypography-h6': {\n fontFamily: theme.fontLato,\n fontWeight: 'bold'\n },\n },\n buttonContainer: {\n display: 'flex',\n justifyContent: 'space-around',\n paddingRight: '1rem',\n paddingLeft: '1rem'\n },\n dialogPaper: {\n padding: '2rem 1rem',\n maxHeight: '60vh'\n },\n dialogPaperSafari: {\n padding: '2rem 1rem',\n maxHeight: '60vh'\n },\n dateName: {\n textAlign: 'center',\n color: theme.primaryBackgroundColor,\n fontSize: '1.25rem',\n fontWeight: 'bold'\n },\n deleteMessageIcon: {\n alignSelf: 'center'\n },\n '@media screen and (max-width:1024px)': {\n buttonContainer: {\n padding: '0',\n flexWrap: 'nowrap'\n },\n }\n}));","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport {\n Dialog, DialogActions, Grid,\n DialogTitle, useMediaQuery, IconButton, useTheme\n} from '@material-ui/core';\nimport Close from '@material-ui/icons/Close';\n\nimport { Button } from 'components';\nimport { deleteMessageIcon } from 'resources';\nimport { checkRunningBrowser, SAFARI } from 'helpers';\n\nimport { useStyles } from './DeleteDialog.css.js';\n\nexport const DeleteDialog = ({ isOpen, setDialogOpen, callback, id, fullName }) => {\n\n const classes = useStyles();\n const theme = useTheme();\n const [t] = useTranslation('common');\n\n const fullScreen = useMediaQuery(theme.breakpoints.down('md'));\n\n const handleConfirm = () => {\n callback(id);\n setDialogOpen(false);\n };\n\n return (\n setDialogOpen(false)}\n aria-labelledby='responsive-dialog-title'>\n \n setDialogOpen(false)}>\n \n \n \n \n {t('areYouSure')}\n \n \n {fullName}\n \n \n \n \n setDialogOpen(false)} />\n \n \n \n \n \n \n );\n};\n\nDeleteDialog.propTypes = {\n isOpen: PropTypes.bool,\n setDialogOpen: PropTypes.func,\n callback: PropTypes.func,\n id: PropTypes.any,\n fullName: PropTypes.string\n};","import React from 'react';\nimport clsx from 'clsx';\nimport { ErrorMessage } from 'formik';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport Grid from '@material-ui/core/Grid';\nimport VerticalAlignTopIcon from '@material-ui/icons/VerticalAlignTop';\n\nimport { useStyles } from './InputField.css.js';\n\nexport const DragAndDropInputField = ({inputName, type, accept = '', placeholder, label, isRequired, readOnly, disabled, onChange, toUploadOnPhone}) => {\n\n const classes = useStyles();\n const [t] = useTranslation('common');\n\n const containerDragAndDropStyle = toUploadOnPhone ? classes.containerDragAndDropBrowse : classes.containerDragAndDrop;\n const inputDragAndDropStyle = toUploadOnPhone ? classes.inputDragAndDropBrowse : classes.inputDragAndDrop;\n const hiddenInputDragAndDropStyle = toUploadOnPhone ? classes.hiddenInputDragAndDropBrowse : classes.hiddenInputDragAndDrop;\n const spaceBetweenStyle = toUploadOnPhone ? '' : classes.spaceBetween;\n const validationNegativeTopStyle = toUploadOnPhone ? classes.validationNegativeTopBrowse : classes.validationNegativeTop;\n\n return (\n \n
\n {t(label)} \n {isRequired && * }\n \n
\n \n \n \n \n {!toUploadOnPhone &&\n \n \n }\n \n {t(placeholder)}\n \n \n \n \n \n \n
\n
{h.format(row)} ;\n } else {\n return {row[h.id]} ;\n }\n });\n };\n\n return (\n \n {rows.map((row, index) => {\n return (\n handleClick(e, index)}\n tabIndex={-1}\n className={classes.tableRow}>\n {getCells(row)}\n \n );\n })}\n \n );\n};\n\nEnhancedTableBody.propTypes = {\n columnConfiguration: PropTypes.array.isRequired,\n rows: PropTypes.array\n};\n","import { makeStyles, withStyles } from '@material-ui/core/styles';\nimport TableCell from '@material-ui/core/TableCell';\n\nexport const useStyles = makeStyles((theme) => ({\n visuallyHidden: {\n border: 0,\n clip: 'rect(0 0 0 0)',\n height: 1,\n margin: -1,\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n top: 20,\n width: 1,\n },\n label: {\n textTransform: 'uppercase',\n color: theme.primaryTextColor,\n fontSize: '0.75rem'\n }\n}));\n\nexport const HeaderCell = withStyles((theme) => ({\n root: {\n fontWeight: 'bold',\n border: '0px',\n alignContent: 'left',\n padding: '16px',\n color: theme.quaternaryTextColor\n }\n}))(TableCell);","import React, { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport TableHead from '@material-ui/core/TableHead';\nimport TableRow from '@material-ui/core/TableRow';\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\n\nimport { orderByEnum } from 'helpers';\n\nimport { useStyles, HeaderCell } from './EnhancedTableHead.css';\n\nexport const EnhancedTableHead = ({ order, orderBy, onRequestSort, columnConfiguration, setRowsPerPage }) => {\n const classes = useStyles();\n const createSortHandler = (property) => (e) => {\n onRequestSort(e, property);\n };\n\n const rowRef = useRef();\n let timer;\n const updateSize = () => {\n clearTimeout(timer);\n timer = setTimeout(() => {\n if (rowRef.current) {\n setRowsPerPage(rowRef.current.clientHeight);\n }\n }, 250);\n };\n\n window.addEventListener('resize', updateSize);\n\n useEffect(() => {\n if (rowRef.current) {\n setRowsPerPage(rowRef.current.clientHeight);\n }\n }, [rowRef, setRowsPerPage]);\n\n return (\n \n \n {columnConfiguration.map((headCell, index) => (\n \n {headCell.id && headCell.disableSorting &&\n {headCell.label}
\n }\n {headCell.id && !headCell.disableSorting &&\n \n {headCell.label}\n {orderBy === headCell.id ? (\n \n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\n \n ) : null}\n \n }\n \n ))}\n \n \n );\n};\n\nEnhancedTableHead.propTypes = {\n columnConfiguration: PropTypes.array.isRequired,\n onRequestSort: PropTypes.func.isRequired,\n setRowsPerPage: PropTypes.func.isRequired,\n order: PropTypes.string.isRequired,\n orderBy: PropTypes.string.isRequired\n};","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles((theme) => ({\n root: {\n fontFamily: theme.fontLato\n },\n rootTable: {\n borderCollapse: 'separate',\n borderSpacing: '0 0.5rem',\n outline: 'none'\n },\n container: {\n borderBottom: '1px solid ' + theme.borderColor,\n borderColor: theme.borderColor,\n width: '100%',\n marginBottom: '1.5rem',\n paddingBottom: '1rem',\n },\n total: {\n color: theme.primaryTextColor,\n display: 'flex'\n },\n marginRight: {\n marginRight: '0.3rem',\n display: 'flex'\n },\n}));","import React, { useState, useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { useQuery } from 'react-query';\nimport { Grid, Table, TableContainer } from '@material-ui/core';\nimport withWidth, { isWidthUp } from '@material-ui/core/withWidth';\n\nimport { EnhancedTableBody } from './EnhancedTableBody';\nimport { EnhancedTableHead } from './EnhancedTableHead';\nimport { SadStates, Loader, Pagination } from 'components';\nimport { orderByEnum, displayBorder } from 'helpers';\n\nimport { useStyles } from './EnhancedTable.css';\n\nconst REFETCH_INTERVAL_MS = 60000;\n\nconst CustomTableComponent = ({ tableId, source, columnConfiguration, height, defaultRowsPerPage = 10, filter, width, setTotal }) => {\n\n const [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage);\n const classes = useStyles();\n const [t] = useTranslation('common');\n const [order, setOrder] = useState(orderByEnum.asc);\n const [orderBy, setOrderBy] = useState('');\n const [page, setPage] = useState(1);\n const [prevFilter, setPrevFilter] = useState(filter);\n\n const paginationRef = useRef();\n\n const orderByParam = orderBy ? `${orderBy},${order}` : '';\n const { isLoading, data, refetch } = useQuery(['repoData' + tableId, { page, order, orderBy, filter, rowsPerPage }]\n , () => source((page - 1), rowsPerPage, orderByParam, filter)\n , { refetchInterval: REFETCH_INTERVAL_MS });\n\n useEffect(() => {\n refetch();\n }, [refetch]);\n\n useEffect(() => {\n for (const property in filter) {\n if (filter[property] !== prevFilter[property]) {\n setPrevFilter(filter);\n setPage(1);\n return;\n }\n }\n }, [filter, page]);\n\n const handleRequestSort = (e, property) => {\n const isAsc = orderBy === property && order === orderByEnum.asc;\n setOrder(isAsc ? orderByEnum.desc : orderByEnum.asc);\n setOrderBy(property);\n };\n\n const tableData = data ? data : { items: [], total: 0 };\n\n useEffect(() => {\n setTotal(tableData.total);\n }, [tableData]);\n\n return (\n \n {!isLoading && tableData?.total !== 0 &&\n
\n
\n \n {isWidthUp(displayBorder, width) && {\n if (!height) {\n return;\n }\n const pageinationHeight = paginationRef.current ? paginationRef.current.clientHeight : 0;\n const rowsCount = Math.round((height - pageinationHeight) / trHeight);\n setRowsPerPage(rowsCount > 0 ? rowsCount - 1 : 0);\n }}\n orderBy={orderBy} />\n }\n
\n \n \n
\n
\n }\n {!isLoading && tableData?.total === 0 &&\n
\n \n {t('noResultsFound')}
\n \n }\n
\n
{format(date, dateFormat)}
\n
handleClick() : null}\n onDoubleClick={browseMode ? () => handleDoubleClick() : null}>\n {item.title} \n
\n {!browseMode &&\n
\n \n {canModify &&\n <>\n \n navHistory.push(`/gifTemplates/edit/${item.id}`)}>\n \n \n \n \n \n setDialogOpen(true)}>\n \n \n \n \n }\n \n navHistory.push(`/gifTemplates/create?from=${item.id}`)}>\n \n \n \n \n \n
\n }\n
\n
{item.description}
\n
\n
Created: {format(createAt, dateFormat)}
\n
Last Modified: {format(modifiedAt, dateFormat)}
\n
\n
\n \n {items.map((item, index) => {\n return (\n \n handleClick(e, index)}\n tabIndex={-1}>\n \n \n );\n })}\n \n
\n );\n};\n\nEnhancedCardTableItems.propTypes = {\n items: PropTypes.array,\n browseMode: PropTypes.bool,\n setCardsPerPage: PropTypes.func.isRequired,\n deletedGif: PropTypes.bool,\n setdeletedGif: PropTypes.func,\n setPage: PropTypes.func,\n selectedCardItem: PropTypes.object,\n setselectedCardItem: PropTypes.func,\n onDoubleClick: PropTypes.func\n};","import { makeStyles, withStyles } from '@material-ui/core/styles';\nimport Pagination from '@material-ui/lab/Pagination';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n borderBottom: '1px solid ' + theme.borderColor,\n borderColor: theme.borderColor,\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n marginBottom: '3.5rem',\n },\n total: {\n color: theme.primaryTextColor,\n display: 'flex',\n },\n marginRight: {\n marginRight: '0.3rem',\n display: 'flex',\n },\n '@media screen and (max-width:960px)': {\n container: {\n padding: '0 5%'\n }\n },\n '@media screen and (min-width:427px, max-width:770px)': {\n container: {\n padding: '0'\n }\n },\n '@media screen and (max-width:426px)': {\n container: {\n padding: '0'\n }\n },\n}));\n\nexport const StyledPagination = withStyles({\n root: {\n float: 'right'\n }\n})(Pagination);","import React, { useState, useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { useQuery } from 'react-query';\nimport withWidth from '@material-ui/core/withWidth';\nimport { Grid } from '@material-ui/core';\n\nimport { EnhancedCardTableItems } from './EnhancedCardTableItems';\nimport { Loader, Pagination, SadStates } from 'components';\n\nimport { useStyles } from './EnhancedCardTable.css.js';\n\nconst FIRST_PAGE = 1;\n\nconst EnhancedCardTable = ({tableId, source, height, defaultCardsPerPage = 10, filter, setTotal, browseMode, selectedCardItem, setselectedCardItem, onDoubleClick }) => {\n\n const [ cardsPerPage, setCardsPerPage ] = useState(defaultCardsPerPage);\n const classes = useStyles();\n const [t] = useTranslation('common');\n const [ page, setPage ] = useState(1);\n const [ deletedGif, setdeletedGif ] = useState(false);\n const [ prevFilter, setPrevFilter ] = useState(filter);\n\n const paginationRef = useRef();\n\n const { isLoading, data, refetch } = useQuery([ 'repoCardData' + tableId, {page, deletedGif, cardsPerPage, filter}]\n , () => source((page - 1), cardsPerPage, filter));\n\n useEffect(() => {\n refetch();\n }, [refetch]);\n\n useEffect(() => {\n for (const property in filter) {\n if (filter[property] !== prevFilter[property]) {\n setPrevFilter(filter);\n setPage(FIRST_PAGE);\n return;\n }\n }\n }, [ filter, page ]);\n\n const tableData = data ? data : { items: [], total: 0};\n\n useEffect(() => {\n setTotal(tableData.total);\n }, [tableData]);\n\n return (\n \n {!isLoading && tableData?.total !== 0 &&\n
\n
\n }\n ]} >\n
\n {\n if (!height) {\n return;\n }\n const pageinationHeight = paginationRef.current ? paginationRef.current.clientHeight : 0;\n const cardsCount = Math.round((height - pageinationHeight) / trHeight);\n setCardsPerPage(cardsCount > 0 ? cardsCount - 1 : 0);\n }}/>\n
\n \n
\n }\n {!isLoading && tableData?.total === 0 &&\n
\n \n {t('noResultsFound')}
\n \n }\n
\n
\n
\n
setIsOpen(false)}>\n setIsOpen(false)}>\n \n {t(header)} \n {children}\n \n
{title} \n );\n};\n\nHeader.propTypes = {\n title: PropTypes.string\n};","import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { Field, ErrorMessage, useFormikContext } from 'formik';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport Grid from '@material-ui/core/Grid';\nimport { NumericFormat } from 'react-number-format';\n\nimport { useStyles } from './InputField.css.js';\n\nexport const InputField = ({ inputName, type, placeholder, label, isRequired, readOnly, disabled, onChange, isNumber, isInteger, isMoney, defaultValue, className }) => {\n\n const classes = useStyles();\n const [t] = useTranslation('common');\n const [isFocus, setIsFocus] = useState(false);\n const { handleBlur } = useFormikContext();\n const labelT = t(label ?? '') === '' ? label : t(label);\n\n const getInputComponent = () => {\n if (onChange) {\n if (isNumber) {\n return (\n !readOnly && setIsFocus(true)}\n onBlur={e => {\n handleBlur(e);\n setIsFocus(false);\n }}\n type={type}\n name={inputName}\n placeholder={t(placeholder)}\n readOnly={readOnly}\n disabled={disabled} />\n );\n }\n };\n\n return (\n \n
\n {labelT} \n {isRequired && * }\n \n
\n \n \n {getInputComponent()}\n \n \n
\n
\n
\n {labelT} \n {isRequired && * }\n \n
\n
\n \n {\n const lowerCaseValue = inputValue.toLowerCase();\n if (inputValue.length > 0) {\n return x.toLowerCase().startsWith(lowerCaseValue);\n }\n return null;\n })}\n value={inputValue}\n inputValue={inputValue}\n onInputChange={(e, newValue) => {\n onChange(newValue);\n setInputValue(newValue);\n }}\n renderInput={(params) => (\n \n
)\n } />\n \n \n
\n
\n {\n onChange(evt.target.checked);\n }} />\n }\n label={({label} )} />\n \n );\n};\n\nCheckboxInputField.propTypes = {\n inputName: PropTypes.string,\n checked: PropTypes.bool,\n label: PropTypes.string,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n className: PropTypes.string\n};\n","import React from 'react';\nimport Grid from '@material-ui/core/Grid';\n\nimport './Loader.css';\n\nexport const Loader = () => {\n\n return (\n \n Loading...
\n \n );\n};","import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { Field, ErrorMessage, useFormikContext } from 'formik';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport Grid from '@material-ui/core/Grid';\n\nimport { useStyles } from './InputField.css.js';\n\nexport const NoteInputField = ({ inputName, type, placeholder, label, readOnly, className }) => {\n\n const classes = useStyles();\n const [t] = useTranslation('common');\n const [isFocus, setIsFocus] = useState(false);\n const { handleBlur } = useFormikContext();\n\n return (\n \n \n {t(label)} \n \n \n \n \n setIsFocus(true)}\n onBlur={e => {\n handleBlur(e);\n setIsFocus(false);\n }}\n type={type}\n name={inputName}\n placeholder={t(placeholder)}\n readOnly={readOnly}\n component='textarea' />\n \n \n \n
\n );\n};\n\nNoteInputField.propTypes = {\n inputName: PropTypes.string,\n type: PropTypes.string,\n placeholder: PropTypes.string,\n label: PropTypes.string,\n readOnly: PropTypes.bool,\n className: PropTypes.string\n};\n","import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { Field, ErrorMessage, useFormikContext } from 'formik';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport Grid from '@material-ui/core/Grid';\n\nimport { useStyles } from './InputField.css.js';\n\nexport const NoteSmallInputField = ({inputName, type, placeholder, label, readOnly}) => {\n\n const classes = useStyles();\n const [t] = useTranslation('common');\n const [ isFocus, setIsFocus ] = useState(false);\n const { handleBlur } = useFormikContext();\n\n return (\n \n \n {t(label)} \n \n \n \n \n setIsFocus(true)}\n onBlur={e => {\n handleBlur(e);\n setIsFocus(false);\n }}\n type={type}\n name={inputName}\n placeholder={t(placeholder)}\n readOnly={readOnly}\n component='textarea'/>\n \n \n \n
\n );\n};\n\nNoteSmallInputField.propTypes = {\n inputName: PropTypes.string,\n type: PropTypes.string,\n placeholder: PropTypes.string,\n label: PropTypes.string,\n readOnly: PropTypes.bool\n};\n","import React, { useState } from 'react';\nimport { Field, ErrorMessage, useFormikContext } from 'formik';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport Grid from '@material-ui/core/Grid';\n\nimport { showPasswordIcon, hidePasswordIcon } from 'resources';\n\nimport { useStyles } from './InputField.css.js';\n\nexport const PasswordInputField = ({inputName, label, isRequired, profileForm = false}) => {\n\n const classes = useStyles();\n const [t] = useTranslation('common');\n const [ showPassword, setShowPassword ] = useState(false);\n const [ isFocus, setIsFocus ] = useState(false);\n const { handleBlur } = useFormikContext();\n\n return (\n \n
\n {t(label)} \n {isRequired && * }\n \n
\n
\n \n setIsFocus(true)}\n onBlur={e => {\n handleBlur(e);\n setIsFocus(false);\n }}\n type={showPassword ? 'text' : 'password'}\n name={inputName}/>\n \n setShowPassword(!showPassword)}>\n \n \n
\n
\n \n \n \n \n \n \n \n \n {!isSubmittingGlobal && {t('submittingOffer')} }\n {!isSubmittingGlobal && isSuccessfullySent && {t('sentOfferMessageSuccessfully')} }\n {!isSubmittingGlobal && !isSuccessfullySent && {t('sentOfferMessageFailed')} }\n \n \n );\n};\n\nOfferSentDialog.propTypes = {\n isOpen: PropTypes.bool,\n setDialogOpen: PropTypes.func,\n leadId: PropTypes.number,\n isSuccessfullySent: PropTypes.bool,\n setIsSuccessfullySent: PropTypes.func,\n isSubmittingGlobal: PropTypes.bool\n};","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles((theme) => ({\n stickyHeader: {\n height: '4.375rem',\n position: 'sticky',\n top: '0',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n backgroundColor: theme.tertiaryBackgroundColor,\n zIndex: '3',\n paddingLeft: '2rem',\n paddingRight: '2rem',\n },\n flex: {\n display: 'flex',\n alignContent: 'center'\n },\n logo: {\n width: '13.125rem',\n height: '2.413rem'\n },\n gutters: {\n paddingLeft: 0,\n paddingRight: 0\n },\n menu: {\n padding: '0.8rem',\n cursor: 'pointer'\n },\n downIcon: {\n paddingBottom: '0.25rem'\n },\n settingsIcon: {\n paddingRight: '0.5rem',\n paddingTop: '0.2rem'\n },\n welcomeMessage: {\n paddingRight: '0.5rem',\n color: theme.quaternaryBackgroundColor\n },\n settingsContainer: {\n paddingRight: '1rem'\n },\n cursor: {\n cursor: 'pointer'\n },\n logout: {\n borderTop: '1px solid' + theme.primaryBorderColor,\n color: theme.primaryBorderColor\n },\n listItemIcon: {\n minWidth: '40px'\n },\n listItemImg: {\n width: '16px',\n height: '16px',\n },\n '@media screen and (max-width: 615px)': {\n welcomeMessage: {\n display: 'none'\n },\n stickyHeader: {\n height: '3rem',\n },\n logo: {\n width: '10rem',\n height: '3rem'\n },\n menuListIcon: {\n width: '1rem',\n marginLeft: '0.3rem',\n },\n notificationListIcon: {\n marginTop: '0.3rem',\n marginLeft: '0.3rem'\n },\n menu: {\n paddingLeft: '0.1rem'\n },\n settingsContainer: {\n paddingRight: '0.5rem'\n },\n },\n '@media screen and (max-width: 380px)': {\n settingsContainer: {\n paddingRight: '0.2rem'\n },\n stickyHeader: {\n paddingRight: '1.1rem',\n paddingLeft: '1.1rem'\n },\n notificationListIcon: {\n marginTop: '0.3rem',\n marginLeft: '0.3rem'\n },\n menu: {\n paddingLeft: '0.1rem',\n paddingRight: '0'\n }\n },\n notificationsContainer: {\n marginRight: '0.5rem',\n cursor: 'pointer'\n },\n alignItemsCenter: {\n alignItems: 'center'\n },\n marginRight: {\n marginRight: '0.2rem'\n },\n}));","import React, { useState, useContext } from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\nimport { Grid, MenuItem, Menu, ListItemIcon, ListItemText } from '@material-ui/core';\n\nimport { auth, isAdmin, isSalesMng, isDesigner } from 'helpers';\nimport { NotificationsPage, NotificationIcon } from 'pages';\nimport { UserContext } from 'providers';\nimport { gifTemplatesIcon, logoBlackBackground, menuIcon, leadsIcon, usersIcon, settingsIcon, downIcon, logoutIcon, notificationsIcon, userGroupIcon, reports } from 'resources';\n\nimport { useStyles } from './PageHeader.css';\n\nexport const PageHeader = ({ hideControls = false }) => {\n const classes = useStyles();\n const navHistory = useHistory();\n const [t] = useTranslation('common');\n const { user } = useContext(UserContext);\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n const [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);\n const [notificationsActive, setNotificationsActive] = useState(false);\n const isSalesMngRole = isSalesMng(user && user.role);\n const isAdminRole = isAdmin(user && user.role);\n const isDesignerRole = isDesigner(user && user.role);\n\n const handleNavigate = (route) => {\n if (route === '/logout') {\n auth.signOut();\n } else {\n navHistory.push({\n pathname: route\n });\n handleClose();\n }\n };\n\n const handleClose = () => {\n setIsMenuOpen(false);\n setIsAccountMenuOpen(false);\n };\n\n const handleMenuItem = (icon, text) => {\n const link = text === 'myCompany' ? `/companies/${user.company.id}` : `/${text}`;\n return (\n handleNavigate(link)}>\n {icon &&\n \n }\n );\n };\n\n return (\n \n );\n};\n\nPageHeader.propTypes = {\n hideControls: PropTypes.bool,\n};","import { makeStyles, withStyles } from '@material-ui/core/styles';\nimport Pagination from '@material-ui/lab/Pagination';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center'\n },\n goToPageText: {\n margin: 0,\n marginRight: '0.5rem'\n },\n inputContainer: {\n height: '1.75rem',\n width: '5.625rem',\n padding: '0.4rem',\n border: '1px solid' + theme.primaryBorderColor,\n backgroundColor: theme.quaternaryBackgroundColor,\n display: 'flex',\n textAlign: 'center',\n alignItems: 'center'\n },\n input: {\n border: 0,\n outline: 'none',\n width: '3rem'\n },\n imgContainer: {\n backgroundColor: theme.primaryTextColor,\n width: '1.938rem',\n height: '1.938rem',\n borderRadius: '0.313rem',\n cursor: 'pointer',\n '&:hover': {\n backgroundColor: theme.tertiaryBackgroundColor\n }\n },\n img: {\n width: '0.75rem',\n height: '0.75rem',\n marginTop: '0.6rem',\n cursor: 'pointer'\n },\n displayFlex: {\n display: 'flex'\n },\n showText: {\n margin: 0,\n marginLeft: '0.5rem',\n marginRight: '0.5rem',\n alignSelf: 'center'\n },\n paginationSelectFilter: {\n display: 'flex',\n border: 'none',\n width: '3rem',\n paddingRight: '2rem'\n },\n navigationContainer: {\n display: 'flex',\n flexDirection: 'row',\n paddingRight: '1.5rem',\n paddingLeft: '1.5rem',\n alignItems: 'center'\n },\n '@media screen and (max-width: 865px)': {\n container: {\n display: 'flex',\n textAlign: 'center',\n flexDirection: 'column',\n },\n navigationContainer: {\n display: 'none'\n },\n displayFlex: {\n display: 'none'\n }\n }\n}));\n\nexport const StyledPagination = withStyles({\n root: {\n float: 'left',\n marginTop: '0.3rem',\n '& .Mui-selected': {\n backgroundColor: '#FFCE07',\n },\n '& .Mui-selected:hover': {\n backgroundColor: '#FFCE07',\n },\n '& .MuiButtonBase-root:hover': {\n backgroundColor: '#000000',\n color: '#FFFFFF'\n }\n }\n})(Pagination);","import { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { Grid } from '@material-ui/core';\n\nimport { PaginationSelectFilter } from 'components';\nimport { rolesPerPage } from 'helpers';\nimport { arrowRightIcon } from 'resources';\n\nimport { useStyles, StyledPagination } from './Pagination.css';\n\nconst FIRST_PAGE = 1;\nconst ROWS_PER_PAGE = 10;\n\nexport const Pagination = ({page, setPage, count, rowsPerPage, setRowsPerPage, paginationRef}) => {\n const classes = useStyles();\n const [t] = useTranslation('common');\n const [ goToPage, setGoToPage ] = useState();\n\n const handleChangePage = (e, newPage) => {\n setPage(newPage);\n };\n\n return (\n \n
\n
\n {t('goToPage')}
\n \n
{\n if (e.target.value) {\n setGoToPage(e.target.value > count ? count : e.target.value);\n } else {\n setGoToPage(FIRST_PAGE);\n }\n }}\n maxLength='4'/>\n \n
setPage(Number(goToPage))}/>\n
\n
\n {t('show')}
\n {\n setRowsPerPage(e.target.value ? e.target.value : ROWS_PER_PAGE);\n setPage(FIRST_PAGE);\n }}\n value={rowsPerPage}\n menuItem={rolesPerPage}/>\n {t('resultsPerPage')}
\n \n
\n {lockProps && \n \n \n {t(label)} \n {isRequired && * }\n \n \n {\n setFilterValue(e.target.value);\n onChange(e);\n }}>\n {menuItem.map(c => (\n {t(c.label)}\n \n ))}\n \n {inputName && \n \n \n
\n\n );\n};\n\nFormSelectFilter.propTypes = {\n className: PropTypes.string,\n inputName: PropTypes.string,\n label: PropTypes.string,\n value: PropTypes.any,\n menuItem: PropTypes.array,\n onChange: PropTypes.func,\n isRequired: PropTypes.bool,\n disabled: PropTypes.bool,\n hidden: PropTypes.bool,\n selectedValueStyle: PropTypes.object,\n lockProps: PropTypes.object\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { FormControl, Select, MenuItem, Grid, ListItemIcon, Typography } from '@material-ui/core';\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';\n\nimport { useStyles } from './SelectFilter.css.js';\n\nexport const IconSelectFilter = ({ value, menuItem, onChange, width }) => {\n\n const classes = useStyles();\n const [t] = useTranslation('common');\n\n return (\n \n \n \n {\n onChange(e);\n }}>\n {menuItem.map(c => (\n \n \n \n \n {t(c.label)}\n \n \n ))}\n \n \n \n \n );\n};\n\nIconSelectFilter.propTypes = {\n value: PropTypes.number,\n menuItem: PropTypes.array,\n onChange: PropTypes.func,\n width: PropTypes.number\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { FormControl, Select, MenuItem, Grid } from '@material-ui/core';\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';\n\nimport { useStyles } from './SelectFilter.css.js';\n\nexport const PaginationSelectFilter = ({value, menuItem, onChange}) => {\n const classes = useStyles();\n const [t] = useTranslation('common');\n\n return (\n \n \n \n {\n onChange(e);\n }}>\n {menuItem.map(c => (\n {t(c.label)}\n \n ))}\n \n \n \n \n );\n};\n\nPaginationSelectFilter.propTypes = {\n label: PropTypes.string,\n value: PropTypes.number,\n menuItem: PropTypes.array,\n onChange: PropTypes.func,\n width: PropTypes.number\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { FormControl, Select, MenuItem, Grid } from '@material-ui/core';\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';\n\nimport { useStyles } from './SelectFilter.css.js';\n\nexport const SelectFilter = ({label, value, menuItem, onChange, width}) => {\n\n const classes = useStyles();\n const [t] = useTranslation('common');\n const [ filterValue, setFilterValue ] = useState(value);\n\n const selectValue = filterValue === -1 ? value === -1 ? -1 : value : filterValue;\n\n return (\n \n \n \n {\n setFilterValue(e.target.value);\n onChange(e);\n }}>\n {label &&\n {label}\n }\n {menuItem.map(c => (\n {t(c.label)}\n \n ))}\n \n \n \n \n );\n};\n\nSelectFilter.propTypes = {\n label: PropTypes.string,\n value: PropTypes.number,\n menuItem: PropTypes.array,\n onChange: PropTypes.func,\n width: PropTypes.number\n};\n","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n paddingBottom: '0.6rem',\n display: 'flex',\n borderRadius: '15rem',\n height: '2.5rem',\n width: '100%',\n minWidth: '10rem',\n justifyContent: 'space-between',\n backgroundColor: theme.quaternaryBackgroundColor,\n padding: '0.2rem',\n boxShadow: 'rgb(152, 160, 206, 0.2) 0px 3px 7px 0px',\n },\n childContainer: {\n flexWrap: 'nowrap',\n justifyContent: 'space-between',\n width: '100%',\n paddingTop: '0.7rem'\n },\n inputContainer: {\n marginLeft: '1rem',\n width: '100%',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between'\n },\n selectMenu: {\n color: theme.quaternaryTextColor,\n width: '11rem',\n paddingRight: '0'\n },\n selectMenuWide: {\n color: theme.quaternaryTextColor,\n maxWidth: '20rem',\n minWidth: '11rem',\n width: 'auto',\n display: 'block',\n whiteSpace: 'nowrap',\n overflow: 'hidden !important',\n textOverflow: 'ellipsis'\n },\n menu: {\n paddingTop: '2rem'\n },\n paper: {\n marginTop: '3rem',\n maxHeight: '20rem',\n minHeight: '3rem',\n height: 'auto',\n },\n input: {\n width: '100%',\n cursor: 'pointer'\n },\n width80: {\n width: '80%'\n },\n margin: {\n margin: 0,\n marginLeft: '0.2rem',\n paddingLeft: '0'\n },\n width10: {\n width: '10%'\n },\n selectIcon: {\n color: theme.primaryTextColor\n },\n}));","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { FormControl, MenuItem, Grid } from '@material-ui/core';\nimport Menu from '@material-ui/core/Menu';\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';\nimport ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';\n\nimport { useStyles } from './SelectMenu.css.js';\n\nexport const SelectMenu = ({ label, menuItem, onChange, modelMenuItem, saleRepMenuItem}) => {\n const classes = useStyles();\n const [t] = useTranslation('common');\n const [ anchorEl, setAnchorEl ] = useState(null);\n const isOpen = Boolean(anchorEl);\n\n const handleValue = value => {\n onChange(value);\n setAnchorEl(null);\n };\n\n return (\n \n \n \n setAnchorEl(e.currentTarget)} aria-describedby='simple-popover' variant='contained'>\n \n {label}
\n \n \n {isOpen ? \n \n setAnchorEl(null)} className={classes.menu}\n anchorOrigin={{\n vertical: 'top',\n horizontal: 'left',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'left',\n }}>\n {!modelMenuItem && !saleRepMenuItem &&\n menuItem?.map(item => (\n handleValue(item.value)}\n key={item.value}\n value={item.value}>\n {t(item.label)}\n \n ))}\n {modelMenuItem &&\n menuItem?.map(item => (\n handleValue(item)}\n key={item}\n value={item}>\n {item}\n \n ))}\n {saleRepMenuItem &&\n menuItem?.map(item => (\n handleValue(item.id)}\n key={item.id}\n value={item.id}>\n {item.nameSurname}\n \n ))}\n \n \n \n \n );\n};\n\nSelectMenu.propTypes = {\n label: PropTypes.string,\n menuItem: PropTypes.array,\n onChange: PropTypes.func,\n modelMenuItem: PropTypes.bool,\n saleRepMenuItem: PropTypes.bool\n};\n","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles((theme) => ({\n button: {\n display: 'flex',\n flexDirection: 'row',\n alignSelf: 'center',\n alignItems: 'center',\n backgroundColor: theme.primaryBackgroundColor,\n height: '1.7rem',\n color: theme.quaternaryBackgroundColor,\n borderRadius: '3.125rem',\n width: 'auto',\n boxSizing: 'border-box',\n },\n checked: {\n color: theme.tertiaryBackgroundColor,\n },\n notChecked: {\n backgroundColor: theme.tertiaryBackgroundColor,\n },\n container: {\n backgroundColor: theme.tertiaryBackgroundColor,\n width: '6.875rem',\n height: '1.875rem',\n borderRadius: '3.125rem',\n justifyContent: 'space-around',\n cursor: 'pointer',\n alignSelf: 'center',\n marginTop: '-2rem',\n float: 'right',\n marginRight: '0.2%',\n zIndex: '2',\n position: 'relative',\n boxSizing: 'border-box',\n },\n containerGif: {\n backgroundColor: theme.tertiaryBackgroundColor,\n width: '13rem',\n height: '1.7rem',\n boxSizing: 'border-box',\n borderRadius: '3.125rem',\n justifyContent: 'space-between',\n cursor: 'pointer',\n alignSelf: 'center',\n margin: '0 0.5rem 1rem 0',\n zIndex: '2',\n },\n label: {\n fontSize: '0.813rem',\n paddingBottom: '0.1rem',\n width: '100%',\n textAlign: 'center',\n },\n me: {\n width: '0.493rem',\n height: '0.563rem',\n paddingRight: '0.3rem',\n },\n all: {\n width: '0.781rem',\n height: '0.484rem',\n paddingRight: '0.3rem'\n },\n company: {\n width: '0.781rem',\n height: '0.484rem',\n paddingRight: '0.3rem'\n },\n private: {\n width: '0.781rem',\n height: '0.484rem',\n paddingRight: '0.3rem'\n },\n '@media screen and (max-width: 615px)': {\n container: {\n marginTop: '0rem',\n marginBottom: '1rem'\n }\n }\n}));","import clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { Grid } from '@material-ui/core';\n\nimport { useStyles } from './SwitchButton.css.js';\n\nexport const SwitchItemButton = ({ label, icon, checked, setChecked, md = 6 }) => {\n const classes = useStyles();\n const [t] = useTranslation('common');\n return (\n !checked && setChecked()}>\n {!!icon && \n {t(label)}\n \n \n );\n};\n\nSwitchItemButton.propTypes = {\n icon: PropTypes.any,\n label: PropTypes.string,\n checked: PropTypes.bool,\n setChecked: PropTypes.func,\n md: PropTypes.number\n};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@material-ui/core';\nimport { SwitchItemButton } from './SwitchItemButton';\nimport { allOrMine } from 'helpers';\nimport { meIcon, allIcon } from 'resources';\n\nimport { useStyles } from './SwitchButton.css.js';\n\nexport const SwitchButton = ({ myLeads, setMyLeads, setAllOrMineValue }) => {\n const classes = useStyles();\n return (\n \n {\n setMyLeads(!myLeads);\n setAllOrMineValue(allOrMine.find(item => 'mine' === item.label).value);\n }} />\n {\n setMyLeads(!myLeads);\n setAllOrMineValue(allOrMine.find(item => 'all' === item.label).value);\n }} />\n \n );\n};\n\nSwitchButton.propTypes = {\n myLeads: PropTypes.bool,\n setMyLeads: PropTypes.func,\n setAllOrMineValue: PropTypes.func\n};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@material-ui/core';\nimport { SwitchItemButton } from './SwitchItemButton';\n\nimport { useStyles } from './SwitchButton.css.js';\n\nexport const gifRelationsEnum = {\n general: 'general',\n company: 'company',\n private: 'private'\n};\n\nexport const SwitchGifRelations = ({ value, setChecked }) => {\n const classes = useStyles();\n return (\n \n {\n setChecked(gifRelationsEnum.general);\n }} />\n {\n setChecked(gifRelationsEnum.company);\n }} />\n {\n setChecked(gifRelationsEnum.private);\n }} />\n \n );\n};\n\nSwitchGifRelations.propTypes = {\n value: PropTypes.string,\n setChecked: PropTypes.func\n};","import React from 'react';\nimport { infoIcon, errorIcon, warningIcon } from 'resources';\nimport { toast } from 'react-toastify';\n\nexport const toastNotification = (type, text) => {\n\n switch (type) {\n case 'info':\n toast.info({text}
{text}
{text}
{t('termFinanceView')} ;\n }\n return {t(label)} ;\n };\n\n const handleText = label => {\n if (label === 'paymentType') {\n return {t(paymentTypes[data.paymentType - 1].label)} ;\n }\n\n if (label === 'defaultChannel') {\n return {t(communicationChannels[data.defaultChannel].label)} ;\n }\n\n if (label === 'optInSms') {\n const optInValue = Object.keys(optInSmsType)[data[label]];\n if (data[label] === optInSmsType.Agreed) {\n return {optInValue} ;\n } else {\n if (data['optInSmsCanResend']) {\n return (\n \n {optInValue} \n {t('optInSmsSend')} \n \n );\n } else {\n return (\n \n {optInValue} \n \n {t('optInSmsSend')} \n \n \n );\n }\n }\n }\n\n if (viewLead.some(x => x.label === label && x.type === 'money')) {\n return {data[label]}% ;\n }\n return {data[label]} ;\n }\n }\n };\n\n useEffect(() => {\n let result = viewLeadInfo;\n switch (data.paymentType) {\n case (paymentTypes[0].value):\n result = result.concat(lease);\n break;\n case (paymentTypes[1].value):\n result = result.concat(finance);\n break;\n case (paymentTypes[2].value):\n result = result.concat(cash);\n }\n if (typeof data.tradeInValue === 'number') {\n result = result.concat(tradeIn);\n }\n setViewLead(result.concat(notes));\n }, [data]);\n\n return (\n viewLead.slice(0, showNElement).map(lead => {\n return (\n \n \n \n \n \n \n {handleLabel(lead.label)}
\n \n \n \n \n {handleText(lead.label)}
\n \n \n );\n })\n );\n};\n\nViewLead.propTypes = {\n data: PropTypes.object,\n showNElement: PropTypes.number,\n onOptInClick: PropTypes.func\n};","import { makeStyles } from '@material-ui/core/styles';\nimport { displayBorder } from 'helpers';\n\nexport const useStyles = makeStyles((theme) => ({\n wrapper: {\n display: 'flex',\n flexDirection: 'column',\n borderTopLeftRadius: theme.pageBorderRadius,\n [theme.breakpoints.down(displayBorder)]: {\n borderTopRightRadius: theme.pageBorderRadius\n },\n [theme.breakpoints.up(displayBorder)]: {\n borderBottomLeftRadius: theme.pageBorderRadius,\n },\n overflow: 'hidden',\n minHeight: 'calc(100vh - 70px)',\n width: '100%',\n backgroundColor: theme.quinaryBackgroundColor\n },\n browseModeHeight: {\n minHeight: 'calc(100vh - 300px)',\n height: '100%',\n backgroundColor: theme.quaternaryBackgroundColor\n }\n}));","import React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\n\nimport { useStyles } from './Wrapper.css.js';\n\nexport const Wrapper = ({ children, browseMode }) => {\n\n const classes = useStyles();\n const browseModeHeightStyle = browseMode ? classes.browseModeHeight : '';\n\n return (\n \n {children}\n
\n );\n};\n\nWrapper.propTypes = {\n children: PropTypes.any,\n browseMode: PropTypes.bool\n};","import React from 'react';\nimport Backdrop from '@material-ui/core/Backdrop';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { makeStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n backdrop: {\n zIndex: theme.zIndex.drawer + 1,\n color: '#fff',\n },\n}));\n\nexport const AppBackdrop = ({ show }) => {\n const classes = useStyles();\n\n return (\n \n \n );\n};\n\nAppBackdrop.propTypes = {\n show: PropTypes.bool,\n};\n","import { makeStyles } from '@material-ui/core/styles';\nimport { displayBorder } from 'helpers';\n\nexport const useStyles = makeStyles((theme) => ({\n container: {\n width: '100%',\n maxWidth: '700px',\n margin: 'auto',\n [theme.breakpoints.up(displayBorder)]: {\n width: '50%'\n }\n },\n closeImg: {\n cursor: 'pointer',\n float: 'right',\n marginTop: '5px',\n width: '40px',\n padding: '0px 6px 0px 0px',\n color: theme.primaryButtonColor,\n fontSize: '1.5rem',\n '&:hover': {\n backgroundColor: 'transparent'\n }\n },\n dialogTitle: {\n textAlign: 'center',\n padding: '0px 35px 10px 35px',\n fontSize: '1.3rem',\n '& .MuiTypography-h6': {\n fontFamily: theme.fontLato,\n fontWeight: 'bold'\n },\n },\n buttonContainer: {\n display: 'flex',\n justifyContent: 'space-around',\n padding: '1rem',\n },\n dialogPaper: {\n padding: '2rem 1rem',\n maxHeight: '60vh',\n height: 'auto',\n },\n dialogPaperSafari: {\n padding: '2rem 1rem',\n maxHeight: '60vh',\n height: 'auto',\n },\n dateName: {\n textAlign: 'center',\n color: theme.primaryBackgroundColor,\n fontSize: '1.25rem',\n fontWeight: 'bold'\n },\n dialogIcon: {\n alignSelf: 'center'\n },\n '@media screen and (max-width:1024px)': {\n buttonContainer: {\n padding: '0',\n flexWrap: 'nowrap'\n },\n }\n}));","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport {\n Dialog, DialogActions, Grid,\n DialogTitle, useMediaQuery, IconButton, useTheme\n} from '@material-ui/core';\nimport Close from '@material-ui/icons/Close';\n\nimport { Button } from 'components';\nimport { checkRunningBrowser, SAFARI } from 'helpers';\n\nimport { useStyles } from './style.css.js';\n\nexport const EmptyDialog = ({ isOpen, setDialogOpen, callback, id, headerText, bodyText, imageSrc = null }) => {\n\n const classes = useStyles();\n const theme = useTheme();\n const [t] = useTranslation('common');\n\n const fullScreen = useMediaQuery(theme.breakpoints.down('md'));\n\n const handleConfirm = () => {\n callback(id);\n setDialogOpen(false);\n };\n\n return (\n setDialogOpen(false)}\n aria-labelledby='responsive-dialog-title'>\n \n setDialogOpen(false)}>\n \n {imageSrc &&\n \n }\n \n {headerText}\n \n \n {bodyText}\n \n \n \n \n setDialogOpen(false)} />\n \n \n \n \n \n \n );\n};\n\nEmptyDialog.propTypes = {\n isOpen: PropTypes.bool,\n setDialogOpen: PropTypes.func,\n callback: PropTypes.func,\n id: PropTypes.any,\n headerText: PropTypes.any,\n bodyText: PropTypes.any,\n imageSrc: PropTypes.string,\n};","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles(() => ({\n component: {\n width: 'auto',\n justifyContent: 'space-between',\n alignSelf: 'center',\n margin: '0',\n },\n item: {\n display: 'flex',\n flexDirection: 'row',\n alignSelf: 'center',\n alignItems: 'center',\n width: 'auto',\n },\n select: {\n width: '12rem',\n }\n}));","import PropTypes from 'prop-types';\nimport { Grid } from '@material-ui/core';\nimport { SelectFilter } from 'components';\nimport ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';\nimport ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';\nimport { filterByDate, orderByEnum } from 'helpers';\nimport clsx from 'clsx';\nimport { useStyles } from './style.css';\n\nexport const SortByComponent = ({ label, sortByValue, orderByValue, onOrderChange, onSortByChange }) => {\n const classes = useStyles();\n\n return (\n \n {label && {label} }\n \n \n \n {orderByValue === orderByEnum.desc ? \n \n );\n};\n\nSortByComponent.propTypes = {\n sortByValue: PropTypes.number,\n orderByValue: PropTypes.string,\n label: PropTypes.string,\n onOrderChange: PropTypes.func,\n onSortByChange: PropTypes.func\n};","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles((theme) => ({\n picker: {\n display: 'flex',\n borderRadius: '15rem',\n height: '2.5rem',\n width: '10rem',\n backgroundColor: theme.quaternaryBackgroundColor,\n padding: '0 0 0.8rem 1.5rem',\n boxShadow: 'rgb(152, 160, 206, 0.2) 0px 3px 7px 0px',\n '&>label': {\n color: 'grey !important',\n padding: '0.7rem 0 0 1.4rem',\n }\n },\n input: {\n color: 'black !important',\n fontWeight: 500,\n paddingTop: '0.3rem',\n '&::before': {\n borderBottom: 'none !important',\n transition: 'none !important',\n },\n '&::after': {\n borderBottom: 'none !important',\n transition: 'none !important',\n },\n '&>input': {\n\n },\n '&>div>button': {\n marginTop: '-1.1rem',\n padding: '1rem'\n }\n }\n}));","import React from 'react';\nimport PropTypes from 'prop-types';\nimport 'date-fns';\nimport Grid from '@material-ui/core/Grid';\nimport DateFnsUtils from '@date-io/date-fns';\nimport {\n MuiPickersUtilsProvider,\n KeyboardDatePicker,\n} from '@material-ui/pickers';\n\nimport { useStyles } from './style.css.js';\n\nexport const AppRangeDatePicker = ({ fromDate, toDate, onChange }) => {\n const classes = useStyles();\n const invalidRangeMessage = 'Invalid Date Range';\n\n const handleFromChange = (date) => {\n if (date && date.toString() !== 'Invalid Date') {\n onChange({\n from: new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0),\n to: toDate,\n });\n }\n };\n\n const handleToChange = (date) => {\n if (date && date.toString() !== 'Invalid Date') {\n onChange({\n from: fromDate,\n to: new Date(date.getFullYear(), date.getMonth(), date.getDate(), 1, 0, 0, 0),\n });\n }\n };\n\n return (\n \n \n \n \n \n \n \n \n );\n};\n\nAppRangeDatePicker.propTypes = {\n fromDate: PropTypes.object,\n toDate: PropTypes.object,\n onChange: PropTypes.func,\n};\n","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles(() => ({\n button: {\n cursor: 'pointer',\n padding: '0.5rem'\n },\n image: {\n width: '2.2rem',\n height: '2.2rem',\n color: 'orange'\n },\n}));","import React, { useEffect, useState } from 'react';\nimport * as FileSaver from 'file-saver';\nimport XLSX from 'sheetjs-style';\nimport PropTypes from 'prop-types';\nimport { IconButton } from '@material-ui/core';\nimport { excel } from 'resources';\n\nimport { useStyles } from './style.css.js';\n\nexport const AppExcelExport = ({ fileName, fetchData, disabled }) => {\n const classes = useStyles();\n const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';\n const fileExtension = '.xlsx';\n const [disabledExport, setDisabledExport] = useState(disabled);\n\n useEffect(() => {\n setDisabledExport(disabled);\n }, [disabled]);\n\n const exportToExcel = async () => {\n setDisabledExport(true);\n fetchData().then((response) => {\n const ws = XLSX.utils.json_to_sheet(response);\n const wb = { Sheets: { data: ws }, SheetNames: ['data'] };\n const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });\n const data = new Blob([excelBuffer], { type: fileType });\n FileSaver.saveAs(data, fileName + fileExtension);\n setDisabledExport(false);\n });\n };\n\n return (\n \n \n );\n};\n\nAppExcelExport.propTypes = {\n fetchData: PropTypes.func,\n fileName: PropTypes.string,\n disabled: PropTypes.bool,\n};","import { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles(() => ({\n lockIcon: {\n display: 'inline-flex',\n padding: '5px 5px 5px 0',\n marginTop: '32px',\n width: '20px',\n height: '20px',\n cursor: 'pointer'\n }\n}));","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Tooltip } from '@material-ui/core';\nimport { useStyles } from './LockIcon.css';\nimport { lockIcon, unlockIcon } from 'resources';\n\nexport const LockIcon = ({ value = false, handleLock = null }) => {\n const classes = useStyles();\n const [isLock, setIsLock] = useState(value);\n\n const onClick = () => {\n const val = !isLock;\n setIsLock(val);\n if (handleLock) {\n handleLock(val);\n }\n };\n\n return (\n \n \n );\n};\n\nLockIcon.propTypes = {\n value: PropTypes.bool,\n handleLock: PropTypes.func\n};","import React, { useContext } from 'react';\nimport { QueryClient, QueryClientProvider } from 'react-query';\nimport { Router, Route, Switch, Redirect } from 'react-router-dom';\nimport { ToastContainer, Slide } from 'react-toastify';\n\nimport { PageHeader } from 'components';\nimport { browserHistory, isAdmin, isSalesRep, isDesigner, isSalesMng } from './helpers';\nimport {\n AuthPage,\n ForgotPasswordPage,\n GifTemplateForm,\n GifTemplatesPage,\n LeadsForm,\n LeadsPage,\n ProfileForm,\n ResetPasswordPage,\n SendOfferPage,\n SignInPage,\n UserForm,\n UsersPage,\n ViewLeadPage,\n NotificationsPage,\n ConfirmOfferPage,\n CompanyListPage,\n CreateCompanyPage,\n UpdateCompanyPage,\n ReportListPage,\n OptInSmsPage\n} from 'pages';\nimport { UserContext } from 'providers';\n\nimport 'react-toastify/dist/ReactToastify.min.css';\nimport './react-toastify-overrides.css';\nimport './App.css';\n\nexport const App = () => {\n\n const queryClient = new QueryClient({\n defaultOptions: {\n queries: {\n refetchOnWindowFocus: false,\n },\n },\n });\n\n const { user, initialized } = useContext(UserContext);\n\n const admin = user && isAdmin(user.role);\n const salesRep = user && isSalesRep(user.role);\n const designer = user && isDesigner(user.role);\n const salesMng = user && isSalesMng(user.role);\n\n if (!initialized) {\n return null;\n }\n\n let routes = null;\n if (user) {\n routes = (\n \n {(admin | salesMng) && \n );\n } else {\n routes = (\n \n \n );\n }\n\n return (\n \n
\n \n \n \n
\n
\n \n \n \n \n \n \n ,\n document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}