\n {(((props.client.preferred_billing_unit === 'days') && (\n
\n
\n
handleChange('client.day_rate', e.target.value, true)} />\n \n )) || ((props.client.preferred_billing_unit === 'hours') && (\n
\n
\n
handleChange('client.hourly_rate', e.target.value, true)} />\n \n )))}\n
handleChange('project.deadline',e)}\n onTodayButtonClick={(e) => handleChange('project.deadline',false)}\n fromMonth={new Date()}\n todayButton={'Remove Deadline'}\n initialMonth={props.project.deadline ? dateFns.parse(props.project.deadline) : new Date()} />\n ))}\n , document.querySelector('.overlay__block:last-child')\n )\n )}\n \n );\n};","import React, { useEffect, useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { useDispatch, useSelector } from 'react-redux'\nimport agent from '../../agent';\nimport { Link } from 'react-router-dom';\nimport { showNotificationWithTimeout } from '../../components/Notifications';\nimport { get, isEmpty } from 'lodash';\n\nconst ProjectOptions = (props) => {\n const node = useRef();\n\n const [open, setOpen] = useState(false);\n let loading = useSelector(state => get(state.common, 'loading', false));\n let notification = useSelector(state => get(state.common, 'notification', false));\n\n const handleScroll = e => {\n setOpen(false);\n }\n\n const handleChange = (filter, value, persist) => {\n props.onChange(filter,value)\n if (!persist) {\n setOpen(false);\n }\n };\n\n const handleClickOutside = e => {\n\n e.stopImmediatePropagation()\n\n let dropdown = e.composedPath().filter(function (el) {\n return el.id === 'dropdown__menu'\n })\n\n // inside click\n if (dropdown.length >= 1 || node.current.contains(e.target)) {\n return;\n }\n\n // outside click\n setOpen(false);\n\n };\n\n const onStateTransition = (type, invoice, state, message) => {\n props.dispatch({\n type: type,\n payload: agent.Invoices.transition_state(invoice.id, state).then((res) => {\n if(!res.body.errors) {\n showNotificationWithTimeout(props.dispatch, message);\n setOpen(false);\n if(state === 'submitted') {\n props.openOverlay('email_invoice', invoice)\n }\n }\n return res;\n })\n })\n }\n\n useEffect(() => {\n\n var element = node.current;\n\n if (open) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n element.offsetParent.addEventListener(\"scroll\", handleScroll);\n\n const dropdown_menu = document.querySelector('#dropdown__menu');\n const position_top = (element.offsetHeight + 8);\n\n // set default position\n dropdown_menu.style.top = position_top + 'px';\n\n // get bounds now dropdown has default position\n const dropdown_menu_bounds = dropdown_menu.getBoundingClientRect();\n\n // dropdown outside window, recalculate position\n if ( dropdown_menu_bounds.bottom > window.innerHeight ) {\n const position_recalc = dropdown_menu.offsetHeight + 8;\n dropdown_menu.style.top = -Math.abs(position_recalc) + 'px';\n }\n\n // finally, show dropdown (to stop position popping effect)\n dropdown_menu.style.visibility = 'visible';\n\n } else {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n element.offsetParent.removeEventListener(\"scroll\", handleScroll);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n element.offsetParent.removeEventListener(\"scroll\", handleScroll);\n };\n }, [open]);\n\n const renderSwitch = e => {\n switch(props.project.state){\n case 'submitted':\n return (\n <>\n \n )\n default:\n return (\n <>\n { props.project.can_be_deleted && (\n {\n props.deleteProject(props.project)\n }} className=\"item\">Delete Project
\n )}\n {\n props.confirmCancelProject(props.project)\n }} className=\"item\">Cancel Project
\n \n )\n }\n }\n\n return (\n \n
setOpen(!open)}>\n \n \n \n \n \n \n \n {open && (\n ReactDOM.createPortal(\n
{notification}
}\n \n );\n};\n\nexport default ProjectOptions;\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"g\", {\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n stroke: \"#C31840\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2,\n d: \"M1,3 L1,13.0555556 C1,13.9146652 2.14089039,15 3,15 L13,15 C14.1045695,15 15,14.1045695 15,13 L15,7 C15,5.8954305 14.1045695,5 13,5 L3,5 C1.8954305,5 1,4.1045695 1,3 L1,3 L1,3 C1,1.8954305 1.8954305,1 3,1 L11.1111111,1 L11.1111111,1\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n cx: 11,\n cy: 10,\n r: 1,\n fill: \"#C31840\"\n}));\n\nvar SvgPriceSmall = function SvgPriceSmall(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 16,\n height: 16,\n viewBox: \"0 0 16 16\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgPriceSmall, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/price_small.558b37b5.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Tooltip from '../Tooltip';\nimport { Info } from '../Info';\nimport ListErrors from '../ListErrors';\nimport ContentEditable from 'react-contenteditable';\nimport FocusTrap from 'focus-trap-react';\nimport { connect } from 'react-redux';\nimport { _ , isEmpty } from 'lodash';\nimport { history } from '../../configureStore';\nimport { TwitterPicker } from 'react-color';\nimport update from 'immutability-helper';\nimport agent from '../../agent';\nimport { Dropdown } from './Dropdown';\nimport ProjectOptions from './ProjectOptions';\nimport {ReactComponent as PriceIcon} from '../../images/price_small.svg';\nimport dateFns from 'date-fns';\nimport { AvailabilityDateBuilder } from '../../services/AvailabilityDateBuilder';\nimport getSymbolFromCurrency from 'currency-symbol-map';\nimport { components } from 'react-select';\nimport Select from 'react-select';\nimport { currencies } from '../../currencies';\nimport { validateEmail } from '../../components/Validate';\nimport { Link } from 'react-router-dom';\n\nimport {\n SCHEDULE_CREATE,\n CLIENT_CREATE,\n PROJECT_CREATE,\n PROJECT_UPDATE,\n PROJECT_REMOVE,\n CLOSE_PROJECTS_OVERLAY,\n SCHEDULE_AVAILABILITY,\n PROJECTS_PAGE_LOADED\n} from '../../constants/actionTypes';\n\nconst Input = ({ autoComplete, ...props }) => \n \n )\n}\n\nconst mapStateToProps = (state, ownProps) => ({\n ...state,\n errors: state.projects.errors,\n dates: state.dates\n});\n\nconst mapDispatchToProps = dispatch => ({\n\n newClient: client => {\n dispatch({ type: CLIENT_CREATE, payload: agent.Clients.create(client) })\n },\n\n newProject: project => {\n dispatch({ type: PROJECT_CREATE, payload: agent.Projects.create(project) })\n },\n\n getAvailability: (from,to) => {\n dispatch({\n type: SCHEDULE_AVAILABILITY,\n payload: agent.Schedule.availability(from,to)\n })\n\n },\n\n autoPopulateSchedule: (project, dates) => {\n\n dispatch({\n type: SCHEDULE_CREATE,\n payload: agent.Schedule.create_multiple(dates).then((res) => {\n if(!res.body.errors) {\n dispatch({ type: PROJECT_UPDATE, payload: agent.Projects.update(project) })\n dispatch({ type: CLOSE_PROJECTS_OVERLAY });\n }\n return res;\n })\n })\n\n },\n\n updateProject: project => {\n dispatch({\n type: PROJECT_UPDATE,\n payload: agent.Projects.update(project).then((res) => {\n if(!res.body.errors) {\n dispatch({ type: CLOSE_PROJECTS_OVERLAY });\n // check if project name has changed\n if (history.location.pathname !== '/projects/' + res.body.slug) {\n history.push('/projects/')\n }\n }\n return res;\n })\n })\n },\n\n transitionState: (project, state) => {\n dispatch({\n type: PROJECT_UPDATE,\n payload: agent.Projects.transition_state(project.id, state).then((res) => {\n if(!res.body.errors) {\n dispatch({ type: CLOSE_PROJECTS_OVERLAY });\n }\n return res;\n })\n })\n },\n\n deleteProject: (project, prompt) => {\n dispatch({\n type: PROJECT_REMOVE,\n payload: agent.Projects.remove(project, prompt).then((res) => {\n if(!res.body.errors) {\n history.push('/projects/')\n }\n return res;\n })\n })\n },\n\n})\n\nexport let scrollPosition = 0;\n\nclass Overlay extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.searchClientsRef = React.createRef();\n this.clientTitleRef = React.createRef();\n this.projectTitleRef = React.createRef();\n this.clientButtonRef = React.createRef();\n this.projectButtonRef = React.createRef();\n this.deleteProjectButtonRef = React.createRef();\n\n if (this.props.project) {\n\n let client = this.props.clients.clients.filter((el) => {\n return el.id === this.props.project.client_id\n });\n\n this.state = {\n initialLoad: true,\n counter: 1,\n overlay: this.props.overlay,\n overlay_history: [this.props.overlay],\n new: false,\n loading: false,\n project: this.props.project,\n client: client[0]\n }\n\n } else {\n\n this.state = {\n initialLoad: true,\n counter: 1,\n overlay: this.props.overlay,\n overlay_history: ['client'],\n clients: this.props.clients.clients.filter((el) => {\n return el.state === 'active'\n }),\n keyword: false,\n new: true,\n loading: false\n }\n\n }\n\n }\n\n componentDidMount(){\n document.addEventListener(\"keydown\", this.keyPress.bind(this), false);\n\n if(this.state.overlay === 'auto-populate') {\n this.getAvailability(this.state.project);\n }\n\n if(this.state.overlay === 'client') {\n this.searchClientsRef.current.focus()\n }\n\n if(this.state.overlay === 'new_client') {\n this.clientTitleRef.current.focus()\n }\n\n if(this.state.overlay === 'new_project') {\n this.projectTitleRef.current.focus()\n }\n\n if(this.state.overlay === 'project') {\n let estimated = this.state.project.amount / this.state.project.estimated_time_value\n\n this.setState({\n estimated: estimated\n })\n }\n\n }\n\n componentWillUnmount(){\n document.removeEventListener(\"keydown\", this.keyPress.bind(this), false);\n scrollPosition = 0\n }\n\n componentDidUpdate(prevProps, prevState) {\n\n if(prevState.loading && this.props.projects.errors) {\n\n this.setState({\n loading: false\n })\n\n }\n\n if((this.state.overlay === 'new_project' || this.state.overlay === 'project') && prevState.project !== this.state.project) {\n\n let estimated = this.state.project.amount / this.state.project.estimated_time_value\n\n this.setState({\n estimated: estimated\n })\n\n }\n\n if(this.state.overlay === 'client') {\n this.searchClientsRef.current.focus()\n }\n\n if(this.state.overlay === 'new_client' && prevState.overlay !== 'new_client') {\n this.clientTitleRef.current.focus()\n }\n\n if(this.state.overlay === 'new_project' && prevState.overlay !== 'new_project') {\n this.projectTitleRef.current.focus()\n }\n\n\n }\n\n keyPress(e, field=false){\n\n // up/down arrow\n if ( field && [38,40].includes( e.keyCode ) ) {\n\n let value = parseInt(e.target.innerText)\n\n // down\n if( e.keyCode === 40 ) {\n\n if (value === 0) {\n return false\n }\n\n --value\n\n }\n\n // up\n if( e.keyCode === 38 ) {\n ++value\n }\n\n const [split_field, parent_key] = field.split('.').reverse()\n let newData;\n\n if (parent_key === undefined) {\n\n newData = update(this.state, {\n [split_field]: {$set: value}\n })\n\n } else {\n\n newData = update(this.state, {\n [parent_key]: {\n [split_field]: {$set: value}\n }\n })\n\n }\n\n this.setState(newData);\n\n // cleanup\n newData = null;\n\n }\n\n // escape\n // if(e.keyCode === 27) {\n // this.props.closeOverlay(e)\n // }\n\n // enter\n if(e.keyCode === 13) {\n\n const overlay = this.state.overlay;\n\n if (e.target.nodeName === 'TEXTAREA') {\n return false;\n }\n\n if (overlay === 'new_client' && this.clientButtonRef.current) {\n this.clientButtonRef.current.click()\n }\n\n if ((overlay === 'project' || overlay === 'new_project') && this.projectButtonRef.current) {\n this.projectButtonRef.current.click()\n }\n\n if (overlay === 'delete' && this.deleteProjectButtonRef.current) {\n this.deleteProjectButtonRef.current.click()\n }\n\n }\n\n }\n\n formatPrice(price, currency=undefined) {\n\n return new Intl.NumberFormat(this.props.common.locale, {\n style: 'currency',\n currency: currency || this.props.common.currentUser.currency\n }).format(price)\n\n }\n\n numericOnly(value){\n return value.replace(/[^0-9.]/g, '')\n }\n\n setOverlay(e, overlay, direction) {\n\n e.stopPropagation();\n\n let overlay_history;\n\n if (direction === 'back') {\n let array = this.state.overlay_history\n overlay_history = array.splice(0, array.length-1)\n } else {\n overlay_history = this.state.overlay_history.concat(overlay);\n }\n\n if(overlay === 'client') {\n this.searchClientsRef.current.value = ''\n }\n\n this.setState({\n ...this.state, // needed?\n initialLoad: false,\n overlay: overlay,\n overlay_history: overlay_history,\n counter: overlay === 'client' ? 1 : (direction === 'forward' ? this.state.counter + 1 : this.state.counter - 1),\n //|| overlay === 'project') ? false : this.state.keyword,\n results: false,\n keyword: false\n });\n\n }\n\n search(e, type) {\n\n let search = e.currentTarget.value;\n let array = {\n 'clients': this.props.clients.clients\n }\n\n if (search.length > 1) {\n\n let list = _.filter(array[type], _.flow(\n _.values,\n _.partialRight(_.some, _.method('match', new RegExp(search, 'i')))\n ));\n\n this.setState({\n ...this.state, // needed?\n results: list,\n keyword: search\n })\n\n if (list.length === 0 && e.keyCode === 13) {\n this.setupNewClient()\n }\n\n }\n\n if (search.length === 0) {\n\n this.setState({\n ...this.state, // needed?\n results: false,\n keyword: false\n })\n\n }\n\n }\n\n updateField(field, value) {\n\n const [split_field, parent_key] = field.split('.').reverse()\n let newData;\n\n if (parent_key === undefined) {\n\n newData = update(this.state, {\n [split_field]: {$set: value}\n })\n\n } else {\n\n newData = update(this.state, {\n [parent_key]: {\n [split_field]: {$set: value}\n }\n })\n\n }\n\n // get correct rate for new projects\n if(this.state.new && this.state.client && field === 'project.project_rate_unit') {\n\n let rate;\n\n if (value === 'hours') {\n rate = this.state.client.hourly_rate ? this.state.client.hourly_rate : this.props.common.currentUser.standard_hourly_rate;\n }\n\n if (value === 'days') {\n rate = this.state.client.day_rate ? this.state.client.day_rate : this.props.common.currentUser.standard_day_rate;\n }\n\n newData = update(this.state, {\n 'project': {\n 'project_rate_value': {$set: rate},\n 'project_rate_unit': {$set: value}\n }\n })\n\n }\n\n this.setState(newData);\n\n // cleanup\n newData = null;\n\n }\n\n updateColour(color) {\n this.updateField('client.hex_colour', color.hex)\n\n this.setState({\n displayColorPicker: false\n })\n\n }\n\n setClient(e, client) {\n\n e.stopPropagation();\n\n this.setState({\n ...this.state,\n overlay: 'new_project',\n overlay_history: this.state.overlay_history.concat('new_project'),\n counter: this.state.counter + 1,\n projects: this.state.projects,\n client: client,\n project: {\n title: '',\n billing_type: 'fixed_price',\n client_id: client.id,\n amount: '',\n estimated_time_unit: 'days',\n estimated_time_value: 1,\n project_rate_unit: 'days',\n project_rate_value: client.day_rate\n },\n estimated: 0,\n results: false,\n keyword: false\n })\n\n this.searchClientsRef.current.value = ''\n this.searchClientsRef.current.blur()\n\n }\n\n setupNewClient(e) {\n\n var r = ((Math.floor(Math.random() * 255) + 255) / 2);\n var g = ((Math.floor(Math.random() * 255) + 255) / 2);\n var b = ((Math.floor(Math.random() * 255) + 255) / 2);\n var random_colour = 'rgb(' + r + ', ' + g + ', ' + b + ')';\n\n this.setState({\n ...this.state,\n overlay: 'new_client',\n overlay_history: this.state.overlay_history.concat('new_client'),\n counter: this.state.counter + 1,\n client: {\n name: this.state.keyword ? this.state.keyword : '',\n hex_colour: random_colour,\n day_rate: this.props.common.currentUser.standard_day_rate,\n hourly_rate: this.props.common.currentUser.standard_hourly_rate,\n preferred_billing_unit: 'days',\n address_line_1: '',\n address_line_2: '',\n city: '',\n country: '',\n postal_code: '',\n payment_terms: 30,\n invoice_schedule: 'end_of_month',\n currency: this.props.common.currentUser.currency\n },\n results: false,\n keyword: false\n })\n\n this.searchClientsRef.current.value = ''\n this.searchClientsRef.current.blur()\n\n }\n\n createClient(e, clientName) {\n\n // validate email if provided\n if( this.state.client.email && !validateEmail(this.state.client.email) ) {\n return false;\n }\n\n let newData;\n\n // pro-rata day rate\n if (this.state.client.preferred_billing_unit === 'hours') {\n\n newData = update(this.state.client, {\n day_rate: {$set: this.state.client.hourly_rate * this.props.common.currentUser.hours_per_day }\n })\n\n }\n\n // pro-rata hourly rate\n if (this.state.client.preferred_billing_unit === 'days') {\n newData = update(this.state.client, {\n hourly_rate: {$set: this.state.client.day_rate / this.props.common.currentUser.hours_per_day }\n })\n\n }\n\n // create the client\n this.props.newClient( newData );\n\n this.setState({\n newData,\n loading: true\n })\n\n let that = this;\n let timer = setInterval(function() {\n\n let new_client = that.props.clients.clients.filter(function (el) {\n return el.name === clientName\n });\n\n if (new_client[0]) {\n\n clearInterval(timer);\n\n let client = new_client[0]\n\n let overlay_history = that.state.overlay_history;\n\n let newState = {\n ...that.state,\n overlay: 'new_project',\n overlay_history: overlay_history.splice(0, overlay_history.length-1).concat('new_project'),\n project: {\n title: '',\n billing_type: 'fixed_price',\n client_id: client.id,\n amount: '',\n estimated_time_unit: 'days',\n estimated_time_value: 1,\n project_rate_unit: 'days',\n project_rate_value: client.day_rate\n },\n estimated: 0,\n keyword: false\n }\n\n that.setState(newState);\n\n }\n\n }, 100);\n\n // cleanup\n newData = null;\n\n }\n\n setProject(e, project) {\n\n e.stopPropagation();\n\n this.setState({\n overlay: 'schedule',\n overlay_history: this.state.overlay_history.concat('schedule'),\n counter: this.state.counter + 1,\n project: project,\n project_id: project.id,\n results: false,\n keyword: false\n });\n\n }\n\n createProject(e, projectName) {\n\n this.setState({\n loading: true\n })\n\n // create the project\n this.props.newProject( this.state.project );\n\n let that = this;\n let timer = setInterval(function() {\n\n let new_project = that.props.projects.projects.filter(function (el) {\n return el.title === projectName\n });\n\n if (new_project[0]) {\n\n clearInterval(timer);\n\n if( new_project[0].billing_type === 'fixed_price') {\n\n that.getAvailability(new_project[0]);\n\n } else {\n\n history.push('/projects/' + new_project[0].slug);\n\n that.props.closeOverlay(e)\n\n }\n\n }\n\n }, 100);\n\n }\n\n getAvailability(project) {\n\n // get availability\n this.props.getAvailability(\n dateFns.format(new Date(), 'DD-MM-YYYY'),\n dateFns.format( dateFns.addDays(new Date(), 90), 'DD-MM-YYYY')\n );\n\n let overlay_history = this.state.overlay_history;\n\n let that = this\n\n let timer = setInterval(function() {\n\n if (that.props.schedule.availability) {\n\n clearInterval(timer);\n\n let dates = AvailabilityDateBuilder(project, that.props.schedule.availability.dates, that.props.common.currentUser, undefined)\n\n let newState = {\n ...that.state,\n project: project,\n overlay: 'auto-populate',\n overlay_history: overlay_history.splice(0, overlay_history.length-1).concat('auto-populate'),\n dates: dates,\n loading: false\n }\n\n that.setState(newState);\n\n }\n\n });\n\n }\n\n closeAvailability(e, project) {\n history.push('/projects/' + project.slug);\n this.props.closeOverlay(e)\n }\n\n updateProject(e, project) {\n this.props.updateProject( this.state.project );\n }\n\n deleteProject = () => {\n\n this.setState({\n overlay: 'delete',\n overlay_history: this.state.overlay_history.concat('delete'),\n counter: this.state.counter + 1,\n });\n\n }\n\n confirmCancelProject = (project) => {\n\n this.props.transitionState( this.state.project, 'cancelled' );\n\n }\n\n confirmDeleteProject = (e, project) => {\n\n e.stopPropagation();\n\n this.props.deleteProject( this.state.project, this.state.prompt );\n\n }\n\n autoPopulateSchedule(e, project, dates) {\n\n e.stopPropagation();\n\n let newData = update(project, {\n state: {$set: 'active' }\n })\n\n this.props.autoPopulateSchedule(newData, dates);\n\n this.setState({\n loading: true\n })\n\n }\n\n checkProjectName(e, name) {\n\n e.stopPropagation();\n\n if (name === this.state.project.title) {\n\n this.setState({\n can_delete: true,\n prompt: name\n });\n\n } else {\n\n this.setState({\n can_delete: false,\n prompt: name\n });\n\n }\n\n }\n\n handleClick = () => {\n this.setState({ displayColorPicker: !this.state.displayColorPicker })\n };\n\n handleClose = () => {\n this.setState({ displayColorPicker: false })\n };\n\n render() {\n\n const close =\n \n \n \n \n\n const price =\n \n \n \n \n\n const arrow =\n \n \n \n \n\n const client =\n \n \n \n \n \n \n \n \n\n const cancel =\n \n \n \n \n \n\n const icon_delete =\n \n \n \n \n\n return (\n ReactDOM.createPortal(\n\n \n \n
\n\n {this.state.overlay_history.includes('client') && (\n
\n {this.props.clients.clients.length === 0 && (\n
\n { client }\n Add your first client. \n
\n )}\n
\n this.search(e, 'clients')}\n type=\"text\"\n placeholder={ this.props.clients.clients.length === 0 ? 'Client Name' : 'Search Clients...'} />\n this.props.closeOverlay(e)}>\n {close}\n \n
\n
\n {(this.state.results ? this.state.results : this.state.clients).map((el) => {\n return (\n
this.setClient(e, el)}>{el.name} \n )\n })}\n {this.state.keyword.length > 1 ? (\n
\n
\n this.setupNewClient(e)}>Create a client called {this.state.keyword} { arrow } \n \n ) : (\n
\n
\n this.setupNewClient(e)}>Create a new client { arrow } \n \n )}\n
\n
\n this.updateField('client.name', e.target.value)} />\n this.setOverlay(e, 'client', 'back')}>\n {close}\n \n
\n
\n
\n this.keyPress(e)}\n onChange={(e) => this.updateField('client.address', e.target.value)} />\n
\n
\n Contact Name
\n \n this.keyPress(e)}\n onChange={(e) => this.updateField('client.contact_name', e.target.value)} />\n \n \n
\n Email Address
\n \n this.keyPress(e)}\n onChange={(e) => this.updateField('client.email', e.target.value)} />\n \n Colour
\n \n { this.state.displayColorPicker && }\n \n \n \n
Currency
\n
{ return el.value === this.state.client.currency})}\n menuPlacement=\"auto\"\n onChange={(e) => this.updateField('client.currency', e.value)}\n components={{ Input, DropdownIndicator }}\n />\n \n
How do you want to bill {this.state.client.name}?
\n
\n
\n
How much do you charge per hour?
\n
e.currentTarget.querySelector('[contentEditable]').focus() }>\n {getSymbolFromCurrency( this.state.client ? this.state.client.currency : this.props.common.currentUser.currency )} \n this.keyPress(e)}\n onChange={(e) => this.updateField('client.hourly_rate', this.numericOnly(e.target.value))} />\n \n
How much do you charge per day?
\n
e.currentTarget.querySelector('[contentEditable]').focus() }>\n {getSymbolFromCurrency( this.state.client ? this.state.client.currency : this.props.common.currentUser.currency )} \n this.keyPress(e)}\n onChange={(e) => this.updateField('client.day_rate', this.numericOnly(e.target.value))} />\n \n
this.createClient(e, this.state.client.name)}>\n
\n Save & Continue \n \n \n
\n this.updateField('project.title', e.target.value)} />\n {this.state.overlay_history.includes('new_project') ? (\n this.setOverlay(e, 'client', 'back')}>\n {close}\n \n ) : (\n this.props.closeOverlay(e)}>\n {close}\n \n )}\n
\n
\n
\n this.updateField('project.description', e.target.value)}>\n
\n\n
\n\n
I want to bill this project by...
\n\n
\n this.updateField('project.billing_type', 'time_spent')}>Time Spent\n this.updateField('project.billing_type', 'fixed_price')}>Fixed Price\n
\n\n
\n\n {this.state.project.billing_type === 'time_spent' ? (\n
\n \n
How do you want to bill this project?
\n
\n
\n
How much do you charge per {this.state.project.project_rate_unit === 'hours' ? 'hour' : 'day'}?
\n
e.currentTarget.querySelector('[contentEditable]').focus() }>\n {getSymbolFromCurrency( this.state.client ? this.state.client.currency : this.props.common.currentUser.currency )} \n this.keyPress(e)}\n onChange={(e) => this.updateField('project.project_rate_value', this.numericOnly(e.target.value))} />\n \n \n ) : (\n
\n \n
What is your fixed price?
\n
e.currentTarget.querySelector('[contentEditable]').focus() }>\n {getSymbolFromCurrency( this.state.client ? this.state.client.currency : this.props.common.currentUser.currency )} \n this.keyPress(e)}\n onChange={(e) => this.updateField('project.amount', this.numericOnly(e.target.value))} />\n \n
How long do you think this will take?
\n
\n
e.currentTarget.querySelector('[contentEditable]').focus() }>\n this.keyPress(e, 'project.estimated_time_value')}\n onChange={(e) => this.updateField('project.estimated_time_value', this.numericOnly(e.target.value))} />\n \n
\n
\n
Do you have a deadline?
\n
\n
\n { this.state.project.billing_type === 'fixed_price' && (\n
\n
\n
\n { this.formatPrice(this.state.estimated, this.state.client ? this.state.client.currency : this.props.common.currentUser.currency) }/{this.state.project.estimated_time_unit.slice(0, -1)}
\n
\n
\n )}\n {this.state.overlay_history.includes('new_project') ? (\n
this.createProject(e, this.state.project.title)}>\n
\n Create Project \n \n ) : (\n \n
\n
this.updateProject(e, this.state.project)}>\n
\n Update \n \n \n
\n
Auto-populate Schedule \n this.closeAvailability(e, this.state.project)}>\n {close}\n \n \n {!this.state.dates ? (\n
\n ) : (\n
\n \n
\n
You still need to schedule {this.state.project.estimate_remaining} for this project. We've found some free dates in your schedule,\n do you want to set them aside for this project?
\n
\n {this.state.dates.map((el) => {\n\n var time_formatted;\n\n if (this.state.project.estimated_time_unit === 'hours') {\n var calc = String(el.unit_value_formatted).split('.')\n var calc_hours = parseFloat(calc[0])\n var calc_minutes = parseFloat('0.'+calc[1]) * 60\n time_formatted = calc_hours + 'h ' + calc_minutes.toFixed() + 'm'\n }\n\n return (\n \n {dateFns.format(el.date, 'ddd D MMMM YYYY')}\n { this.state.project.estimated_time_unit === 'days' ? el.unit_value_formatted : time_formatted} \n \n )\n })}\n \n
\n
\n
\n this.closeAvailability(e, this.state.project)}>\n Skip\n \n
\n
this.autoPopulateSchedule(e, this.state.project, this.state.dates)}>\n
\n Add to my Schedule \n \n \n )}\n
\n
\n
Delete {this.state.project.title} \n this.setOverlay(e, 'project', 'back')}>\n {close}\n \n \n
\n
\n
\n
Deleting this project cannot be undone. This will delete everything related to this project, include any work added to it. There is no going back.
\n
\n \n Please type {this.state.project.title} to confirm. \n this.keyPress(e)}\n onKeyUp={(e) => this.checkProjectName(e, e.target.value)}\n className=\"form-control\"\n type=\"text\" />\n \n
\n
this.confirmDeleteProject(e, this.state.project)}>\n
\n Delete {this.state.project.title} (cannot be undone) \n \n \n
\n
\n
\n
\n
That's a wrap \n this.props.closeOverlay(e) }>\n {close}\n \n \n
\n
\n
\n
Great work on finishing this project! Don't forget to create an invoice for it so you can \n get paid as soon as possible.
\n
\n Create Invoice \n \n \n
\n
\n
this.props.closeOverlay(e) }>\n\n ,\n document.querySelector('.overlay')\n )\n )\n\n\n }\n\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Overlay);\n","export const AvailabilityDateBuilder = (project, availableDates, currentUser, clientDayRate) => {\n let time_outstanding = (project.estimated_time_unit === 'hours' ? project.estimated_time_value : project.estimated_time_value * currentUser.hours_per_day) - project.amount_scheduled_time;\n let dates = [];\n\n availableDates.map((date) => {\n if(time_outstanding <= 0 ){\n return\n }\n var remaining_hours = parseFloat(date.remaining_hours)\n if(project.estimated_time_unit === 'days' && remaining_hours >= currentUser.hours_per_day){\n dates.push({\n date: date.date,\n price: (project.project_rate_value !== null) ? project.project_rate_value : clientDayRate,\n unit: 'days',\n unit_value: 1,\n unit_value_formatted: 'All-day',\n project_id: project.id,\n client_id: project.client_id\n })\n time_outstanding -= remaining_hours;\n }else if(project.estimated_time_unit === 'hours'){\n let hoursToUse = (remaining_hours > time_outstanding) ? time_outstanding : remaining_hours\n dates.push({\n date: date.date,\n price: (project.project_rate_value !== null) ? project.project_rate_value : clientDayRate,\n unit: 'hours',\n unit_value: hoursToUse,\n unit_value_formatted: hoursToUse + ' hour(s)',\n project_id: project.id,\n client_id: project.client_id\n })\n time_outstanding -= hoursToUse;\n }\n\n })\n\n return dates;\n}\n","import React, { useEffect, useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\n\nlet scrollPosition = 0;\n\nconst Filter = (props) => {\n const node = useRef();\n\n const [open, setOpen] = useState(false);\n\n const handleScroll = e => {\n setOpen(false);\n }\n\n const handleChange = (filter, value, persist) => {\n props.onChange(filter,value)\n if (!persist) {\n setOpen(false);\n }\n };\n\n const handleClickOutside = e => {\n\n e.stopImmediatePropagation()\n\n let dropdown = e.composedPath().filter(function (el) {\n return el.id === 'dropdown__menu'\n })\n\n // inside click\n if (dropdown.length >= 1 || node.current.contains(e.target)) {\n return;\n }\n\n // outside click\n setOpen(false);\n\n };\n\n useEffect(() => {\n\n var element = node.current;\n\n if (open) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n element.offsetParent.addEventListener(\"scroll\", handleScroll);\n\n const dropdown_menu = document.querySelector('#dropdown__menu');\n const position_top = ((element.offsetParent.offsetTop + element.offsetTop + element.offsetHeight + 8) - scrollPosition);\n \n // set default position\n dropdown_menu.style.top = position_top + 'px';\n\n // get bounds now dropdown has default position\n const dropdown_menu_bounds = dropdown_menu.getBoundingClientRect();\n\n // dropdown outside window, recalculate position\n if ( dropdown_menu_bounds.bottom > window.innerHeight ) {\n const position_recalc = ((element.offsetParent.offsetTop + element.offsetTop - 8) - scrollPosition) - dropdown_menu.offsetHeight;\n dropdown_menu.style.top = position_recalc + 'px';\n }\n\n // finally, show dropdown (to stop position popping effect)\n dropdown_menu.style.visibility = 'visible';\n\n } else {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n element.offsetParent.removeEventListener(\"scroll\", handleScroll);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n element.offsetParent.removeEventListener(\"scroll\", handleScroll);\n };\n }, [open]);\n\n return (\n \n
setOpen(!open)}>\n {props.filter === 'Started' ? 'Active' : props.filter} \n \n \n \n \n \n \n {open && (\n ReactDOM.createPortal(\n \n \n \n ;\n return (!this.props.match.params.slug && (\n {icon}\n
Choose a project...
\n
\n
\n {dateFns.format(day.date, 'ddd D MMMM YYYY')} ({day.unit === 'days' ? 'All-day' : `${day.unit_value_formatted}`})\n {day.note && ( \n
\n {(this.props.project.billing_type == 'fixed_price') ? '' : day.state}\n
\n
\n \n \n \n \n ;\n\n const finished = \n \n \n ;\n\n const on_track = \n \n \n ;\n\n const not_started = \n \n \n ;\n\n const cancelled = \n \n \n ;\n\n // redirect if project not found\n if (!this.props.project) {\n history.push('/projects');\n return false;\n }\n\n const data = [\n { name: 'worked', value: this.props.project.amount_worked_percentage },\n { name: 'remaining', value: this.props.project.estimate_remaining_percentage }\n ];\n const COLORS = ['#1381FF', '#78b0fd'];\n\n const work = this.props.project.months_worked.map(hash => {\n\n var work = _.orderBy(_.values(_.pickBy(this.props.project.work_days,function(value, key){\n return value.month_name === hash.month_name;\n })), ['date'],['desc']);\n\n if (!work.length) {\n return '';\n }\n\n return (\n \n
\n
\n {work.map(day =>
\n
\n \n\n
\n\n
\n {this.props.project.billing_type === 'fixed_price' && (\n
\n
\n
\n
\n You're charging a fixed price of {this.props.project.amount_formatted}.\n {this.props.project.amount_formatted !== this.props.project.amount_in_base_currency_formatted && (\n That's approximately {this.props.project.amount_in_base_currency_formatted} \n )}\n \n
\n
\n )}\n {this.props.project.billing_type === 'time_spent' && (\n
\n
\n
\n
You're charging {this.props.project.project_rate_value_formatted}/{this.props.project.project_rate_unit_formatted}.\n {this.props.project.project_rate_value_formatted !== this.props.project.project_rate_value_in_base_currency_formatted && (\n That's approximately {this.props.project.project_rate_value_in_base_currency_formatted}/{this.props.project.project_rate_unit_formatted} \n )}\n \n\n
\n
\n )}\n {this.props.project.amount_invoiced > 0 && (\n
\n
\n
\n You've invoiced for {this.props.project.amount_invoiced_string} {this.props.project.amount_uninvoiced > 0 && (\n `and have ${this.props.project.amount_uninvoiced_string} uninvoiced`\n )}.\n \n \n
\n )}\n {this.props.project.deadline && (\n
\n
\n
{ you_have_contextual } set a deadline of {dateFns.format(this.props.project.deadline, 'D MMMM YYYY')} {(dateFns.isAfter(Date.now(), this.props.project.deadline) && this.props.project.state == 'active') && ' (Overdue)'} \n \n
\n )}\n
\n
\n {this.props.project.state === 'cancelled' && (
\n \n {cancelled}\n This project has been cancelled. \n
\n\n this.updateProject(e, this.props.project.id, 'active', false)}>\n
\n Restart Project \n \n\n this.props.openOverlay(e, 'project', this.props.project)}>Edit Project \n )}\n {this.props.project.state === 'pending' && (
\n \n {not_started}\n Not started yet... \n
\n\n this.updateProject(e, this.props.project.id, 'active', false)}>\n
\n Start Project \n \n\n this.props.openOverlay(e, 'project', this.props.project)}>Edit Project \n )}\n {this.props.project.state === 'active' && (
\n \n {this.props.project.issues.length > 0 ? (\n {issues}\n Issues Detected \n ) : (\n {on_track}\n This project is on track! \n )}\n
\n\n this.updateProject(e, this.props.project.id, 'finished', true)}>\n
\n Finish Project \n \n\n this.props.openOverlay(e, 'project', this.props.project)}>Edit Project \n )}\n {(this.props.project.state === 'finished' || this.props.project.state === 'invoiced') && (
\n \n {finished}\n This project has finished! \n
\n\n this.updateProject(e, this.props.project.id, 'active', false)}>\n
\n Restart Project \n \n\n this.props.openOverlay(e, 'project', this.props.project)}>Edit Project \n )}\n
\n
\n
\n this.switchTabs(e, 'schedule')}>Schedule\n this.switchTabs(e, 'statistics')}>Statistics\n this.switchTabs(e, 'issues')}>Issues\n
\n
\n\n {(this.state.tab === 'issues') && (\n this.props.project.issues.length > 0 ? (\n
\n
\n We've spotted a few things... \n \n
\n {this.props.project.issues.map(issue => {\n return (\n
\n this.props.openOverlay(e, 'auto-populate', this.props.project)}>Auto-populate \n )}\n
\n );\n })}\n
\n
\n ) : (\n
\n \n No issues with this Project, all good :) \n \n
\n )\n )}\n\n {(this.state.tab === 'statistics') && (\n
\n
\n Here's how you're doing... \n \n
\n\n {this.props.project.billing_type === 'fixed_price' ? (\n <>\n
\n
\n
\n
\n
\n
\n
\n
\n Your total fixed price for this project was {this.props.project.amount_formatted}.\n
\n
\n
\n You're on track to earn {this.props.project.actual_rate}{this.props.project.rate_unit_short} for this project.\n
\n \n ) : (\n <>\n
\n
\n You're charging {this.props.project.project_rate_value_formatted}/{this.props.project.project_rate_unit_formatted}.\n
\n
\n
\n
\n
\n { you_have_contextual } earned {this.props.project.amount_revenue_string} so far.\n
\n \n )}\n
\n
\n )}\n\n {(this.state.tab === 'schedule') && (\n
\n {this.props.project.work_days.length === 0 ? (\n
\n \n You haven't scheduled any work yet for this project. \n \n
\n ) : (\n work\n )}\n
\n )}\n\n
);\n\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Project);\n","import React from 'react';\nimport { Switch, Route } from 'react-router';\nimport { Link } from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport _ from 'lodash';\nimport Overlay from './Overlay';\nimport Filter from './Filter';\nimport agent from '../../agent';\nimport { Landing } from './Landing';\nimport Project from './Project';\nimport Tooltip from '../Tooltip';\n\nimport {\n PROJECT_UPDATE,\n PROJECT_UNLOADED,\n SCHEDULE_INVOICE,\n SCHEDULE_UNDO_INVOICE,\n OPEN_PROJECTS_OVERLAY,\n CLOSE_PROJECTS_OVERLAY,\n PROJECTS_PAGE_LOADED\n} from '../../constants/actionTypes';\n\nconst mapStateToProps = state => (\n {\n ...state.projects,\n token: state.common.token,\n overlay: state.projects.overlay,\n clients: state.clients.clients\n }\n);\n\nconst mapDispatchToProps = dispatch => ({\n\n transitionState: (project, state) => {\n dispatch({ type: PROJECT_UPDATE, payload: agent.Projects.transition_state(project, state) })\n },\n\n invoiceWork: (project, day) => {\n\n dispatch({\n type: SCHEDULE_INVOICE,\n payload: agent.Schedule.transition_state(day, 'invoiced' )\n .then((res) => {\n if(!res.body.errors) {\n dispatch({\n type: PROJECT_UPDATE, payload: agent.Projects.update(project)\n });\n }\n return res;\n })\n })\n\n },\n\n rollbackInvoiceWork: (project, day) => {\n\n dispatch({\n type: SCHEDULE_UNDO_INVOICE,\n payload: agent.Schedule.rollback_transition_state(day)\n .then((res) => {\n if(!res.body.errors) {\n dispatch({\n type: PROJECT_UPDATE, payload: agent.Projects.update(project)\n });\n }\n return res;\n })\n })\n\n },\n\n openOverlay: () => {\n dispatch({ type: OPEN_PROJECTS_OVERLAY });\n },\n\n closeOverlay: () => {\n dispatch({ type: CLOSE_PROJECTS_OVERLAY });\n },\n\n unsetProject: () => {\n dispatch({ type: PROJECT_UNLOADED });\n },\n\n loadProjects: () => {\n dispatch({ type: PROJECTS_PAGE_LOADED, payload: agent.Projects.all() })\n }\n\n});\n\nclass Projects extends React.Component {\n\n constructor(props){\n super(props);\n\n this.state = {\n client: false,\n overlay: false,\n project: false,\n project_state: 'All',\n initialLoad: true\n }\n\n this.projectKeyPress = this.projectKeyPress.bind(this);\n this.newProjectButtonRef = React.createRef();\n\n }\n\n componentDidMount(){\n document.addEventListener(\"keydown\", this.projectKeyPress);\n\n this.props.loadProjects();\n\n if (this.state.initialLoad && this.props.clients && this.props.projects && this.props.projects.length === 0) {\n this.newProjectButtonRef.current.click()\n this.setState({\n initialLoad: false\n });\n }\n\n }\n\n componentWillUnmount() {\n this.props.unsetProject();\n document.removeEventListener(\"keydown\", this.projectKeyPress);\n }\n\n projectKeyPress(e){\n\n // new project shortcut\n if ( e.keyCode === 78 && !this.state.overlay ) {\n this.openOverlay(e, 'client')\n }\n\n }\n\n openOverlay(e, overlay, project=false) {\n\n e.preventDefault();\n e.stopPropagation();\n\n this.setState({\n overlay: overlay,\n project: project\n });\n\n this.props.openOverlay()\n\n }\n\n closeOverlay(e=false) {\n\n this.setState({\n overlay: false,\n project: false\n });\n\n this.props.closeOverlay()\n\n }\n\n updateFilter(filter, value) {\n\n this.setState({\n [filter]: value\n });\n\n }\n\n render() {\n\n if (typeof this.props.projects === 'undefined') {\n\n return (\n \n )\n\n } else {\n\n let filtered_projects;\n\n const grouped_projects = _(this.props.projects)\n .groupBy(x => x.state)\n .map((value, key) => ({\n state: key,\n projects: _.orderBy(value, ['id'],['desc'])\n }))\n .sortBy(this.props.projects, function(element){\n var rank = {\n \"active\": 1,\n \"pending\": 2,\n \"finished\": 3,\n \"cancelled\": 4\n };\n return rank[element.state];\n })\n .value();\n\n if(this.state.project_state === 'All') {\n\n filtered_projects = grouped_projects;\n\n } else {\n\n filtered_projects = _.orderBy(this.props.projects.filter((el) => {\n return el.state === this.state.project_state.toLowerCase()\n }), ['id'],['desc']);\n\n }\n\n const plus =\n \n \n \n \n\n return (\n \n \n \n \n \n this.openOverlay(e, 'client')}>\n New Project \n { plus }\n \n \n Create your first project above. \n )}\n \n\n {this.state.project_state === 'All' ? (\n\n grouped_projects.map(group => {\n return (\n \n { group.state } \n \n \n )\n })\n\n ) : (\n\n \n\n { this.state.project_state } \n\n \n\n \n\n )}\n\n {this.props.overlay && (\n this.closeOverlay(e)}>\n )}\n \n \n \n )\n\n }\n\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Projects);\n","import React, { useEffect, useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { useDispatch, useSelector } from 'react-redux'\nimport agent from '../../agent';\nimport { Link } from 'react-router-dom';\nimport { showNotificationWithTimeout } from '../../components/Notifications';\nimport { get, isEmpty } from 'lodash';\nimport Tooltip from '../../components/Tooltip';\n\nconst Filter = (props) => {\n const node = useRef();\n\n const [open, setOpen] = useState(false);\n let loading = useSelector(state => get(state.common, 'loading', false));\n let notification = useSelector(state => get(state.common, 'notification', false));\n\n const handleScroll = e => {\n setOpen(false);\n }\n\n const handleChange = (filter, value, persist) => {\n props.onChange(filter,value)\n if (!persist) {\n setOpen(false);\n }\n };\n\n const handleClickOutside = e => {\n\n e.stopImmediatePropagation()\n\n let dropdown = e.composedPath().filter(function (el) {\n return el.id === 'dropdown__menu'\n })\n\n // inside click\n if (dropdown.length >= 1 || node.current.contains(e.target)) {\n return;\n }\n\n // outside click\n setOpen(false);\n\n };\n\n const onStateTransition = (type, invoice, state, message) => {\n props.dispatch({\n type: type,\n payload: agent.Invoices.transition_state(invoice.id, state).then((res) => {\n if(!res.body.errors) {\n showNotificationWithTimeout(props.dispatch, message);\n setOpen(false);\n if(state === 'submitted') {\n props.openOverlay('email_invoice', invoice)\n }\n if(state === 'deleted') {\n props.updateSummary()\n }\n }\n return res;\n })\n })\n }\n\n useEffect(() => {\n\n var element = node.current;\n\n if (open) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n element.offsetParent.addEventListener(\"scroll\", handleScroll);\n\n const dropdown_menu = document.querySelector('#dropdown__menu');\n const position_top = (element.offsetHeight + 8);\n\n // set default position\n dropdown_menu.style.top = position_top + 'px';\n\n // get bounds now dropdown has default position\n const dropdown_menu_bounds = dropdown_menu.getBoundingClientRect();\n\n // dropdown outside window, recalculate position\n if ( dropdown_menu_bounds.bottom > window.innerHeight ) {\n const position_recalc = dropdown_menu.offsetHeight + 8;\n dropdown_menu.style.top = -Math.abs(position_recalc) + 'px';\n }\n\n // finally, show dropdown (to stop position popping effect)\n dropdown_menu.style.visibility = 'visible';\n\n } else {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n element.offsetParent.removeEventListener(\"scroll\", handleScroll);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n element.offsetParent.removeEventListener(\"scroll\", handleScroll);\n };\n }, [open]);\n\n const pdfLink = (\n \n Download PDF \n \n )\n\n const renderSwitch = e => {\n switch(props.invoice.state){\n case 'draft':\n return (\n <>\n {\n onStateTransition('INVOICE_UPDATE', props.invoice, 'submitted', false)\n }} className=\"item\">Issue Invoice
\n ) : (\n \n \n Issue Invoice\n
\n \n ) }\n {pdfLink}\n {\n if (window.confirm(\"Are you sure you want to delete this invoice? It cannot be undone.\")) {\n onStateTransition('INVOICE_REMOVE', props.invoice,'deleted', 'Invoice deleted')\n }\n }} className=\"item\">Delete
\n \n )\n case 'submitted':\n return (\n <>\n {\n props.openOverlay('email_invoice', props.invoice)\n }} className=\"item\">Email Invoice
\n {\n props.openOverlay('mark_as_paid', props.invoice)\n }} className=\"item\">Mark as paid
\n {pdfLink}\n {\n if (window.confirm(\"Are you sure you want to void this invoice? It cannot be undone.\")) {\n onStateTransition('INVOICE_UPDATE', props.invoice,'voided', 'Invoice marked as void')\n }\n }} className=\"item\">Void Invoice
\n \n )\n case 'paid':\n case 'voided':\n return (\n <>\n {pdfLink}\n \n )\n default:\n return (\n No Options
\n )\n }\n }\n\n return (\n \n
setOpen(!open)}>\n \n \n \n \n \n \n \n {open && (\n ReactDOM.createPortal(\n
{notification}
}\n \n );\n};\n\nexport default Filter;\n","import React, { useEffect, useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport ListErrors from '../ListErrors';\nimport FocusTrap from 'focus-trap-react';\nimport { connect } from 'react-redux';\nimport { _, get } from 'lodash';\nimport update from 'immutability-helper';\nimport agent from '../../agent';\nimport getSymbolFromCurrency from 'currency-symbol-map';\nimport { components } from 'react-select';\nimport DayPickerInput from 'react-day-picker/DayPickerInput';\nimport { formatDate, parseDate } from \"react-day-picker/moment\";\nimport { showNotificationWithTimeout } from '../../components/Notifications';\nimport { validateEmail } from '../../components/Validate';\nimport dateFns from 'date-fns';\n\nimport {\n CLOSE_OVERLAY,\n SETTINGS_SAVED,\n SETTINGS_UPDATE,\n CLIENT_UPDATE,\n INVOICE_PAYMENT_CREATE,\n INVOICE_EMAIL\n} from '../../constants/actionTypes';\n\nconst Input = ({ autoComplete, ...props }) => \n \n \n \n\n return (\n ReactDOM.createPortal(\n\n \n \n
\n\n {this.state.overlay_history.includes('missing_business') && (\n
\n
\n
Before you get started... \n this.props.closeOverlay(e)}>\n {close}\n \n \n
\n
\n
\n
Before you can setup and send invoices, we need you to provide the name and legal address for your business to include on invoices.
\n
\n
\n
\n
\n Business Name \n \n this.keyPress(e)}\n onChange={(e) => this.updateField('business_attributes.name', e.target.value)} />\n
\n \n
\n
\n
\n Business Address \n \n this.keyPress(e)}\n onChange={(e) => this.updateField('business_attributes.address', e.target.value)} />\n
\n \n
\n
\n
\n
\n
this.updateBusiness(e, this.state.business_attributes)}>\n
\n Save Details \n \n \n
\n )}\n\n {this.state.overlay_history.includes('email_invoice') && (\n
\n
\n
Email Invoice \n this.props.closeOverlay(e)}>\n {close}\n \n \n
\n
\n
\n
Now you've issued this invoice, you can either email it directly to your client using this form or\n dowload it and send it to them separately.
\n
\n
\n
\n
\n Send To \n \n this.updateField('emailInvoice.recipients', e.target.value)} />\n
\n \n
Tip: Seperate email addresses using a comma \n
\n
\n
\n Message \n \n this.updateField('emailInvoice.message', e.target.value)} />\n
\n \n
\n
\n
\n
\n
\n
this.emailInvoice(e, this.state.emailInvoice)}>\n
\n Email Invoice \n \n \n
\n )}\n\n {this.state.overlay_history.includes('mark_as_paid') && (\n
\n
\n
Mark as Paid \n this.props.closeOverlay(e)}>\n {close}\n \n \n
\n
\n
\n
The total for invoice { this.state.invoice.invoice_number } was {this.state.invoice.total_formatted}
\n
\n
\n
\n
\n \n Amount Received \n this.updateAmountReceived(this.state.invoice.total)}\n >\n Set full amount of { this.state.invoice.total_formatted }\n \n \n \n {getSymbolFromCurrency(this.props.currency)} \n this.keyPress(e)}\n onChange={(e) => this.updateField('invoicePayment.gross_total_in_base_currency', e.target.value)} />\n
\n \n
This is the amount you received in your local currency {this.props.currency} ({getSymbolFromCurrency(this.props.currency)}) \n
\n
\n
\n Date Received \n \n this.updateField('invoicePayment.date_received', e)}\n dayPickerProps={{\n disabledDays: {\n before: dateFns.parse(this.state.invoice.date),\n after: new Date()\n }\n }}\n />\n
\n \n
\n
\n
\n
\n
this.createInvoicePayment(e, this.state.invoicePayment)}>\n
\n Save Payment \n \n \n
\n )}\n\n {this.state.overlay_history.includes('client') && (\n
\n
\n
We're missing some information \n this.props.closeOverlay(e)}>\n {close}\n \n \n\n
\n\n
\n\n
\n
Before we can send your invoice we need you to provide some extra information for {this.state.client.name}.
\n
\n
\n\n
\n
\n Email Address \n { this.state.errors }\n \n this.keyPress(e)}\n onChange={(e) => this.updateField('client.email', e.target.value)} />\n \n \n
Where should we send your invoice to? \n
\n\n
\n
\n Contact Name \n \n this.keyPress(e)}\n onChange={(e) => this.updateField('client.contact_name', e.target.value)} />\n \n \n
\n\n
\n \n Client Address \n this.keyPress(e)}\n onChange={(e) => this.updateField('client.address', e.target.value)} />\n \n
\n\n
\n\n
\n
\n
this.updateClient(e, this.state.client)}>\n
\n Update Client \n \n \n
this.props.closeOverlay(e) }\n >\n\n ,\n document.querySelector('.overlay')\n )\n )\n\n\n }\n\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Overlay);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport ReactDOM from 'react-dom';\nimport dateFns from 'date-fns';\n\nimport agent from '../../agent';\nimport {\n TIME_SUMMARY,\n DESTROY_TIME_SUMMARY\n} from '../../constants/actionTypes';\n\nconst mapStateToProps = state => (\n {\n ...state,\n summary: state.invoices.summary\n }\n);\n\nconst mapDispatchToProps = dispatch => ({\n getSummary: (client_id,project_id,currency) => {\n dispatch({\n type: TIME_SUMMARY,\n payload: agent.Invoices.time(client_id,project_id,currency)\n })\n },\n destroySummary: () => {\n dispatch({ type: DESTROY_TIME_SUMMARY })\n }\n});\n\nclass InvoiceTime extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n displayTooltip: false\n }\n this.hideTooltip = this.hideTooltip.bind(this)\n this.showTooltip = this.showTooltip.bind(this)\n }\n\n hideTooltip (event) {\n\n this.props.destroySummary();\n\n this.setState({\n displayTooltip: false,\n top: null,\n left: null\n })\n\n }\n\n showTooltip (event) {\n\n this.props.getSummary(\n this.props.client_id,\n this.props.project_id,\n this.props.currency\n );\n\n var bounds = event.currentTarget.getBoundingClientRect();\n var y = bounds.top + bounds.height + 8;\n var x = bounds.left;\n\n this.setState({\n displayTooltip: true,\n top: y,\n left: x\n })\n\n }\n\n render() {\n let message = this.props.message\n let position = this.props.position\n let size = this.props.size\n\n return (\n <>\n {this.state.displayTooltip &&\n (\n ReactDOM.createPortal(\n \n {this.props.summary ? (\n <>\n {this.props.summary.slice(0, 6).map((date) => {\n return(\n
\n {date.description}\n
\n )\n })}\n {this.props.summary.length > 6 && (\n
\n
{`+ ${this.props.summary.length - 6} more`}
\n
\n )}\n {this.props.summary.length === 0 && (\n
\n )}\n \n ) : (\n
\n )}\n
\n { this.props.time_formatted }\n \n \n )\n\n }\n\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(InvoiceTime);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport ReactDOM from 'react-dom';\nimport dateFns from 'date-fns';\n\nimport agent from '../../agent';\nimport {\n PAYMENT_SUMMARY,\n DESTROY_PAYMENT_SUMMARY\n} from '../../constants/actionTypes';\n\nconst mapStateToProps = state => (\n {\n ...state,\n summary: state.invoices.summary\n }\n);\n\nconst mapDispatchToProps = dispatch => ({\n getSummary: (invoice_id) => {\n dispatch({\n type: PAYMENT_SUMMARY,\n payload: agent.Invoices.payment(invoice_id)\n })\n },\n destroySummary: () => {\n dispatch({ type: DESTROY_PAYMENT_SUMMARY })\n }\n});\n\nclass InvoiceTime extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n displayTooltip: false\n }\n this.hideTooltip = this.hideTooltip.bind(this)\n this.showTooltip = this.showTooltip.bind(this)\n }\n\n hideTooltip (event) {\n\n this.props.destroySummary();\n\n this.setState({\n displayTooltip: false,\n top: null,\n left: null\n })\n\n }\n\n showTooltip (event) {\n\n this.props.getSummary(\n this.props.invoice_id\n );\n\n var bounds = event.currentTarget.getBoundingClientRect();\n var y = bounds.top + bounds.height + 8;\n var x = bounds.left;\n\n this.setState({\n displayTooltip: true,\n top: y,\n left: x\n })\n\n }\n\n formatPrice(price, currency) {\n\n return new Intl.NumberFormat(this.props.common.locale, {\n style: 'currency',\n currency: currency ? currency : this.props.common.currentUser.currency\n }).format(price)\n\n }\n\n render() {\n let message = this.props.message\n let position = this.props.position\n let size = this.props.size\n\n return (\n <>\n {this.state.displayTooltip &&\n (\n ReactDOM.createPortal(\n \n {this.props.summary ? (\n \n { this.formatPrice(this.props.summary.gross_total_in_base_currency, this.props.summary.currency) } paid on {dateFns.format(this.props.summary.date_received, 'DD MMM, YYYY')}\n
\n ) : (\n
\n )}\n ,\n document.querySelector('main')\n )\n )\n }\n \n Paid\n \n \n )\n\n }\n\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(InvoiceTime);\n","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux'\nimport { Link } from 'react-router-dom';\nimport { get, isNil } from 'lodash'\nimport dateFns from 'date-fns'\nimport agent from '../agent';\nimport Filter from '../components/Invoices/Filter';\nimport Tooltip from '../components/Tooltip';\nimport { Info } from '../components/Info';\nimport Select from 'react-select';\nimport { components } from 'react-select';\nimport classNames from 'classnames/bind';\nimport Overlay from '../components/Invoices/Overlay';\nimport InvoiceTime from '../components/Invoices/InvoiceTime';\nimport InvoicePayment from '../components/Invoices/InvoicePayment';\nimport * as QueryString from \"query-string\";\n\nimport {\n SETTINGS_SAVED\n} from '../constants/actionTypes';\n\nconst Input = ({ autoComplete, ...props }) => \n \n Invoices \n \n New Invoice \n \n
\n \n \n\n \n
\n Unbilled \n \n
{ get(summary, 'unbilled.sub_total_formatted',[]) }
\n
\n
\n Draft \n \n { get(summary, 'draft',[]).sort(function(a,b){\n return (a.currency === currentUser.currency ? -1 : 0);\n }).map((currency)=>{\n return (
{currency.sub_total_formatted}
)\n })}\n
\n
\n Outstanding \n \n { get(summary, 'submitted',[]).sort(function(a,b){\n return (a.currency === currentUser.currency ? -1 : 0);\n }).map((currency)=>{\n return (
{currency.sub_total_formatted}
)\n })}\n
\n
\n Paid \n \n
{get(summary, 'paid', '')}
\n
\n
\n Overdue \n \n { get(summary, 'overdue',[]).sort(function(a,b){\n return (a.currency === currentUser.currency ? -1 : 0);\n }).map((currency)=>{\n return (
{currency.sub_total_formatted}
)\n })}\n
\n
\n \n \n
\n Unbilled Work \n \n \n \n \n enableUnbilledWork(!unbilledWorkEnabled)} />\n \n
\n \n {unbilledWorkEnabled && (\n \n \n \n \n \n Client (Project)\n
\n \n \n \n Time\n
\n \n \n \n Subtotal\n
\n \n \n \n Status\n
\n \n \n \n \n \n \n { get(summary, 'unbilled.clients',[]).map((client)=>{\n\n return (\n <>\n { get(client, 'projects',[]).filter(el => el.title === null).map((bodyOfWork)=>{\n return (\n \n \n \n \n {bodyOfWork.client_name} \n \n
\n \n \n \n
\n \n \n \n {bodyOfWork.price} \n
\n \n \n \n Unbilled \n
\n \n \n \n \n New Invoice \n \n
\n \n \n )\n }) }\n { get(client, 'projects',[]).filter(el => el.title != null).map((project)=>{\n return (\n \n \n \n {project.client_name} ({project.title})\n
\n \n \n \n
\n \n \n \n {project.price} \n
\n \n \n \n Unbilled \n
\n \n \n \n \n New Invoice \n \n
\n \n \n )\n }) }\n \n )\n }) }\n \n
\n )}\n \n\n )}\n\n \n \n
\n {updateStateFilter()}}\n className={!filterState ? 'selected' : null}>All\n {updateStateFilter('draft')}}\n className={filterState === 'draft' ? 'selected' : null}>Draft\n {updateStateFilter('submitted')}}\n className={filterState === 'submitted' ? 'selected' : null}>Issued\n {updateStateFilter('paid')}}\n className={filterState === 'paid' ? 'selected' : null}>Paid\n {updateStateFilter('voided')}}\n className={filterState === 'voided' ? 'selected' : null}>Voided\n
\n\n
{\n return el.value === filterClient\n })}\n onChange={updateClientFilter}\n components={{\n Input\n }} />\n\n \n \n \n \n \n No invoices matching these filters.\n
\n \n \n \n
\n ) : (\n \n \n \n \n \n Invoice #\n
\n \n \n \n Client\n
\n \n \n \n Total\n
\n \n \n \n Subtotal\n
\n \n \n \n Issued\n
\n \n \n \n Due\n
\n \n \n \n Status\n
\n \n \n \n \n \n \n {invoices.map((invoice) => {\n let overdue = invoice.state === 'submitted' && dateFns.isPast(invoice.due_date);\n let days_overdue = dateFns.differenceInDays(new Date(), invoice.due_date);\n return (\n \n \n \n \n {invoice.invoice_number ? invoice.invoice_number : '–'}\n \n
\n \n \n \n \n {invoice.client_name}\n \n
\n \n \n \n {invoice.sub_total_in_base_currency !== invoice.sub_total ? (\n \n {invoice.total_formatted} \n \n ) : (\n {invoice.total_formatted} \n )}\n
\n \n \n \n {invoice.sub_total_in_base_currency !== invoice.sub_total ? (\n \n {invoice.sub_total_formatted} \n \n ) : (\n {invoice.sub_total_formatted} \n )}\n
\n \n \n \n \n {\n (invoice.state !== 'draft') ?\n (isNil(invoice.date)) ? '' : dateFns.format(invoice.date, 'DD MMM, YYYY')\n :\n '–'\n }\n \n
\n \n \n \n \n {\n (invoice.state !== 'draft') ?\n (isNil(invoice.due_date)) ? '' : dateFns.format(invoice.due_date, 'DD MMM, YYYY')\n :\n '–'\n }\n \n
\n \n \n \n \n {invoice.state === 'submitted' ? (\n overdue ? `${days_overdue} day${days_overdue > 1 && 's'} overdue` : 'Issued'\n ) : (\n invoice.state === 'paid' ? (\n \n
\n \n \n \n
\n \n \n )\n })}\n \n
\n )}\n \n { overlay && (\n closeOverlay()}>\n )}\n \n {(!invoicesEnabled || datePickerEnabled) && (\n \n
\n\n { loading && (\n
We're turning invoices on for you... \n )}\n\n {!invoicesEnabled && (\n
\n
New \n
Send invoices directly from Slate \n
We've all forgotten to invoice a client. If you turn invoices on we'll make sure you don't forget what work you still need to invoice.\n If you're already using something else to invoice your clients that's ok, Slate works just fine without invoices turned on.
\n
enableInvoicesFeature()}\n className=\"btn\">Turn on Invoices\n \n
\n
\n )}\n\n {datePickerEnabled && (\n
\n
One last thing. \n
Our invoice system keeps track of what work you've invoiced. To help tailor this for you,\n please choose how far back you'd like us to look for any work you'd like to invoice using Slate.\n Any new work you add to Slate will be tracked automatically so you never forget.
\n
\n { (dateFns.differenceInMonths(new Date(), currentUser.created_at) >= 3) && (\n confirmStartDate( dateFns.subMonths( new Date(), 3) )}>\n Last 3 Months\n \n ) }\n { (dateFns.differenceInDays(new Date(), currentUser.created_at) >= 30) && (\n confirmStartDate( dateFns.subDays( new Date(), 30) )}>\n Last 30 Days\n \n ) }\n confirmStartDate( new Date() )}>\n From Today\n \n confirmStartDate( dateFns.parse(currentUser.created_at) )}>\n From {dateFns.format(currentUser.created_at, 'MMMM YYYY')}\n When you joined Slate \n \n
\n
\n )}\n\n
\n
\n
\n );\n}\n\nconst useMountedRef = () => {\n const mountedRef = React.useRef(false);\n\n React.useEffect(() => {\n setTimeout(() => {\n mountedRef.current = true;\n });\n }, []);\n\n return mountedRef;\n};\n\nexport default Invoices;\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2,\n d: \"M6 18L18 6M6 6l12 12\"\n});\n\nvar SvgRemove = function SvgRemove(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n fill: \"none\",\n viewBox: \"0 0 24 24\",\n stroke: \"currentColor\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgRemove, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/remove.f7769dfa.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2,\n d: \"M12 6v6m0 0v6m0-6h6m-6 0H6\"\n});\n\nvar SvgAdd = function SvgAdd(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n fill: \"none\",\n viewBox: \"0 0 24 24\",\n stroke: \"currentColor\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgAdd, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/add.f4e481ab.svg\";\nexport { ForwardRef as ReactComponent };","/* eslint-disable jsx-a11y/accessible-emoji */\nimport React, { useState, useEffect } from 'react';\nimport { useSelector } from 'react-redux'\nimport { Form, Field, FormSpy } from 'react-final-form'\nimport { OnChange } from 'react-final-form-listeners'\nimport agent from '../../agent';\nimport { _, get, has, remove, isEmpty, isNil, values } from 'lodash'\nimport arrayMutators from 'final-form-arrays'\nimport { FieldArray } from 'react-final-form-arrays'\nimport Select from 'react-select';\nimport { history } from '../../configureStore';\nimport { showNotificationWithTimeout } from '../../components/Notifications';\nimport {ReactComponent as DeleteIcon} from '../../images/remove.svg';\nimport {ReactComponent as AddIcon} from '../../images/add.svg';\nimport DayPickerInput from 'react-day-picker/DayPickerInput';\nimport { formatDate, parseDate } from \"react-day-picker/moment\";\nimport dateFns from 'date-fns';\nimport getSymbolFromCurrency from 'currency-symbol-map';\nimport { currencies } from '../../currencies';\nimport Tooltip from '../Tooltip';\nimport { Info } from '../Info';\nimport Overlay from './Overlay';\nimport { Redirect } from 'react-router';\nimport {ReactComponent as ErrorIcon} from '../../images/error.svg';\n\nexport const InvoicesForm = (props) => {\n const {invoice={}, dispatch, params} = props;\n\n const overlay = useSelector(state => get(state.common, 'overlay', false));\n const currentUser = useSelector(state => get(state.common, 'currentUser', {}));\n\n let notification = useSelector(state => get(state.common, 'notification', false));\n let loading = useSelector(state => get(state.common, 'loading', false));\n const clients = useSelector(state => get(state.clients, 'clients', []));\n\n const [works, setWorks] = useState([])\n const [filteredWorks, setFilteredWorks] = useState([])\n\n const [projects, setProjects] = useState([])\n const [filteredProjects, setFilteredProjects] = useState([])\n const [selectedClient, changeSelectedClient] = useState(null);\n\n const [missingInvoiceData, setMissingInvoiceData] = useState(false);\n const [missingClientData, setMissingClientData] = useState(false);\n\n const [sending, setSending] = useState(false);\n const [overlayName, setOverlayName] = useState();\n\n const FORMAT = 'DD/MM/YYYY';\n\n useEffect(() => {\n let client = clients.find(cl => params.client_id == cl.id) || null;\n changeSelectedClient(client)\n\n if(currentUser && (!currentUser.business.name || !currentUser.business.address)) {\n openOverlay('missing_business');\n }\n }, []);\n\n useEffect(() => {\n if(invoice.client_id) {\n let client = clients.find(cl => invoice.client_id == cl.id) || null;\n changeSelectedClient(client)\n }\n }, [invoice.client_id]);\n\n useEffect(() => {\n if(selectedClient) {\n\n // check invoice details have been provided\n if( props.invoice.errors_preventing_submission && !isEmpty(props.invoice.errors_preventing_submission) ) {\n setMissingInvoiceData(true);\n } else {\n setMissingInvoiceData(false);\n }\n\n // check client details have been provided\n if( !selectedClient.contact_name || !selectedClient.email || !selectedClient.address ) {\n openOverlay('client');\n setMissingClientData(true);\n } else {\n setMissingClientData(false);\n }\n\n if( isEmpty(params) ) {\n agent.Clients.invoiceable_works(selectedClient.id).then((res) => setWorks(res.body))\n agent.Clients.invoiceable_projects(selectedClient.id).then((res) => setProjects(res.body))\n }\n\n }\n },[selectedClient])\n\n useEffect(() => {\n\n if(selectedClient) {\n filterWorkByCurrency(selectedClient.currency)\n }\n\n }, [works, projects]);\n\n const filterWorkByCurrency = (currency, values=undefined) => {\n setFilteredWorks(\n Object.values(works).filter((work) => {\n return work.currency === currency\n })\n );\n setFilteredProjects(\n Object.values(projects).filter((project) => {\n return project.currency === currency\n })\n );\n if(!isEmpty(values)){\n values.invoice_line_items = values.invoice_line_items.map((line_item)=>{\n if(isNil(line_item.invoiceable_id)){\n return line_item\n }else{\n return {...line_item, ...{'_destroy': true}}\n }\n })\n }\n }\n\n useEffect(() => {\n //filterWorkByCurrency(invoice.currency)\n }, [invoice.currency, works]);\n\n const onClientChange = (client_id, values) => {\n if(client_id) {\n let client = clients.find(cl => client_id == cl.id) || null;\n changeSelectedClient(client);\n }\n }\n\n const WhenFieldChanges = ({ field, set, becomes, to }) => (\n \n {(\n // No subscription. We only use Field to get to the change function\n { input: { onChange } }\n ) => (\n \n {({ form }) => (\n \n {value => {\n onChange(to);\n }}\n \n )}\n \n )}\n \n );\n\n const clientList = Object.values(clients).map((client) => ({\n value: client.id,\n label: client.name\n }))\n\n const paymentTerms = Object.values([7,15,30,45,60,90]).map((term) => ({\n value: term,\n label: term + ' Days'\n }))\n\n const onSubmit = (values, send) => {\n values.invoice_line_items_attributes = values.invoice_line_items\n values.client_name = selectedClient.name\n if(values.id){\n dispatch({ type: 'INVOICE_UPDATE',\n payload: agent.Invoices.update(values).then((res) => {\n if(!res.body.errors) {\n if(send === true) {\n\n setSending(true);\n onStateTransition('INVOICE_UPDATE', props.invoice, 'submitted', false)\n\n } else {\n\n if(!isEmpty(res.body.errors_preventing_submission)) {\n setMissingInvoiceData(true)\n } else {\n setMissingInvoiceData(false)\n }\n\n showNotificationWithTimeout(dispatch, 'Invoice updated')\n }\n }\n return res;\n })\n })\n }else{\n dispatch({ type: 'INVOICE_CREATE',\n payload: agent.Invoices.create(values).then((res) => {\n if(!res.body.errors) {\n showNotificationWithTimeout(dispatch, 'Invoice created')\n }\n return res;\n })\n })\n\n }\n\n }\n\n const invoiceLineItemWithoutDeleted = (values) => {\n return values['invoice_line_items'].filter(li => !li._destroy)\n }\n\n const invoiceLineItemTotal = (values, key) => {\n return invoiceLineItemWithoutDeleted(values).map(li => Number(li[key])).reduce((a, b) => a + b, 0).toFixed(2)\n }\n\n const invoiceSubtotal = (values) => {\n return invoiceLineItemTotal(values, 'subtotal')\n }\n\n const invoiceTotal = (values) => {\n return invoiceLineItemTotal(values, 'total')\n }\n\n const invoiceTax = (values) => {\n return (invoiceTotal(values) - invoiceSubtotal(values)).toFixed(2)\n }\n\n const invoiceCurrency = (values) => {\n return getSymbolFromCurrency(\n get(values.currency, 'value', values.currency)\n //values.currency.value ? values.currency.value : values.currency\n );\n }\n\n const getCurrency = (client_id) => {\n let client = clients.find(cl => client_id == cl.id) || null;\n if( client ) {\n return client.currency;\n }\n }\n\n const ReactSelectAdapter = ({ input, selected, isDisabled, ...rest }) => {\n\n const handleChange = (option: ValueType) => {\n input.onChange(option?.value);\n };\n\n return (\n \n )\n }\n\n const onStateTransition = (type, invoice, state, message) => {\n props.dispatch({\n type: type,\n payload: agent.Invoices.transition_state(invoice.id, state).then((res) => {\n if(!res.body.errors) {\n if(state === 'submitted') {\n history.push('/invoices?invoice=' + invoice.id);\n }\n if(message) {\n showNotificationWithTimeout(props.dispatch, message);\n }\n }\n return res;\n })\n })\n }\n\n const saveSend = (values) => {\n onSubmit(values, true)\n }\n\n const updateSelectedClient = (client) => {\n changeSelectedClient(client)\n }\n\n const openOverlay = (overlay) => {\n if (overlay) {\n setOverlayName(overlay);\n }\n dispatch({ type: 'OPEN_OVERLAY' });\n }\n\n const closeOverlay = () => {\n dispatch({ type: 'CLOSE_OVERLAY' });\n }\n\n if(isEmpty(clientList)){\n return 'Loading'\n }\n\n return (\n <>\n (\n \n )}\n />\n \n )\n}\n\n","import React, { useMemo, useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux'\nimport { Link } from 'react-router-dom';\nimport { get, isEmpty } from 'lodash'\nimport { InvoicesForm } from '../components/Invoices/InvoicesForm'\nimport * as QueryString from \"query-string\"\nimport dateFns from 'date-fns';\nimport agent from '../agent';\nimport Overlay from '../components/Invoices/Overlay';\n\nconst InvoiceNew = (props) => {\n\n const params = QueryString.parse(props.location.search);\n\n const dispatch = useDispatch()\n\n const currentUser = useSelector(state => get(state.common, 'currentUser', {}));\n\n let currency = params.currency || currentUser.currency;\n const projectId = params.project_id || null;\n\n const [clientId, updateClient] = useState(params.client_id);\n const clients = useSelector(state => get(state.clients, 'clients', []));\n let client = clients.find(cl => clientId == cl.id) || null;\n\n const [dataLoaded, setDataLoaded] = useState(false)\n const [works, setWorks] = useState([])\n const [projects, setProjects] = useState([])\n\n const invoiceLineItems = (currency=undefined) => {\n let lineItems = []\n const workInCurrency = works.filter((work) => { return work.currency === currency && work.project_id == projectId })\n\n if(!isEmpty(works)){\n lineItems = lineItems.concat(workInCurrency.map((work) => {\n return {description: work.description, subtotal: work.price, total: work.price * 1.2, unit_amount: work.unit_amount, quantity: work.quantity, tax_rate: 20, invoiceable_type: 'WorkDay', invoiceable_id: work.id}\n }))\n }\n\n const projectsInCurrency = projects.filter((project) => { return project.currency === currency && project.id == projectId })\n\n if(!isEmpty(projects)){\n lineItems = lineItems.concat(\n projectsInCurrency.map((project) => {\n return {description: project.title, subtotal: project.amount_uninvoiced, unit_amount: project.amount_uninvoiced, total: (project.amount_uninvoiced * 1.2).toFixed(2), quantity: 1, tax_rate: 20, invoiceable_type: 'Project', invoiceable_id: project.id}\n })\n )\n }\n\n if(isEmpty(lineItems)){\n lineItems.push({\n subtotal: 0, quantity: 1, tax_rate: 20, total: 0\n })\n }\n return lineItems\n }\n\n const newInvoice = {\n client_id: client ? client.id : null,\n client_name: client ? client.name : null,\n currency: currency,\n invoice_note: get(currentUser.business, 'invoice_note'),\n payment_details: get(currentUser.business, 'payment_details'),\n date: new Date(),\n payment_terms: 30,\n due_date: dateFns.addDays(new Date(), 30),\n invoice_line_items: invoiceLineItems(currency)\n }\n\n useEffect(() => {\n agent.Clients.invoiceable_works(clientId, projectId).then((res) => { setDataLoaded(true); setWorks(res.body) })\n agent.Clients.invoiceable_projects(clientId).then((res) => { setDataLoaded(true); setProjects(res.body) })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n },[]);\n\n if(dataLoaded){\n return (\n \n );\n }else{\n return ()\n }\n }\n\nexport default InvoiceNew;\n","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux'\nimport { Link } from 'react-router-dom';\nimport { get, isEmpty } from 'lodash'\nimport { InvoicesForm } from '../components/Invoices/InvoicesForm'\nimport agent from '../agent';\nimport * as QueryString from \"query-string\";\nimport Overlay from '../components/Invoices/Overlay';\nimport { history } from '../configureStore';\n\nconst InvoiceEdit = (props) => {\n\n const dispatch = useDispatch()\n\n const params = QueryString.parse(props.location.search);\n\n const currentUser = useSelector(state => get(state.common, 'currentUser', {}));\n\n const invoiceId = get(props, \"match.params.invoiceId\", null);\n const invoices = useSelector(state => get(state.invoices, 'invoices', []));\n const clients = useSelector(state => get(state.clients, 'clients', []));\n \n const [clientId, updateClient] = useState();\n const [dataLoaded, setDataLoaded] = useState(false)\n const [works, setWorks] = useState([])\n const [projects, setProjects] = useState([])\n const [invoice, setInvoice] = useState({})\n \n let client = clients.find(cl => clientId == cl.id) || null;\n\n const invoiceLineItems = (currency=undefined, lineItems=[]) => {\n currency = currency || currentUser.currency\n const workInCurrency = works.filter((work) => { return work.currency === currency })\n\n if(!isEmpty(works)){\n lineItems = lineItems.concat(workInCurrency.map((work) => {\n return {description: work.description, subtotal: work.price, total: work.price * 1.2, unit_amount: work.unit_amount, quantity: work.quantity, tax_rate: 20, invoiceable_type: 'WorkDay', invoiceable_id: work.id}\n }))\n }\n\n if(!isEmpty(projects)){\n lineItems = lineItems.concat(\n projects.map((project) => {\n return {description: project.title, subtotal: project.amount_uninvoiced, unit_amount: project.amount_uninvoiced, total: (project.amount_uninvoiced * 1.2).toFixed(2), quantity: 1, tax_rate: 20, invoiceable_type: 'Project', invoiceable_id: project.id}\n })\n )\n }\n\n if(isEmpty(lineItems)){\n lineItems.push({\n subtotal: 0, quantity: 1, tax_rate: 20, total: 0\n })\n }\n return lineItems\n }\n\n useEffect(() => {\n dispatch({ type: 'INVOICES_PAGE_LOADED', payload: agent.Invoices.all() })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n },[]);\n\n useEffect(() => {\n setInvoice(invoices.find(inv => inv.id.toString() === invoiceId) || {});\n // eslint-disable-next-line react-hooks/exhaustive-deps\n },[invoices]);\n\n useEffect(() => {\n if(!isEmpty(invoice) && !isEmpty(clients)) {\n agent.Clients.invoiceable_works(invoice.client_id).then((res) => { setDataLoaded(true); setWorks(res.body); })\n agent.Clients.invoiceable_projects(invoice.client_id).then((res) => { setDataLoaded(true); setProjects(res.body) })\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n },[invoice, clients]);\n\n useEffect(() => {\n if(!isEmpty(invoice)) {\n updateClient(invoice.client_id)\n if(invoice.state !== 'draft') {\n window.location.href = \"/invoices\";\n }\n }\n },[invoice]);\n\n if(dataLoaded){\n return (\n \n );\n }else{\n return ()\n }\n\n}\n\nexport default InvoiceEdit;\n","import React from 'react';\nimport { CardElement, injectStripe } from 'react-stripe-elements';\nimport ReactDOM from 'react-dom';\nimport dateFns from 'date-fns';\n\nclass Overlay extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.deleteClientButtonRef = React.createRef();\n\n this.state = {\n initialLoad: true,\n counter: 1,\n overlay: this.props.overlay,\n overlay_history: ['client'],\n new: false,\n loading: false,\n client: this.props.client\n }\n\n }\n\n componentDidMount(){\n document.addEventListener(\"keydown\", this.keyPress.bind(this), false);\n }\n\n componentWillUnmount(){\n document.removeEventListener(\"keydown\", this.keyPress.bind(this), false);\n }\n\n keyPress(e, field=false){\n\n // escape\n // if(e.keyCode === 27) {\n // this.props.closeOverlay(e)\n // }\n\n // enter\n if(e.keyCode === 13) {\n if (this.deleteClientButtonRef.current) {\n this.deleteClientButtonRef.current.click()\n }\n }\n\n }\n\n confirmPauseSubscription(e) {\n this.props.pause(this.props.subscription.id);\n this.setState({\n pause_loading: true\n })\n }\n\n confirmCancelSubscription(e) {\n this.props.cancel(this.props.subscription.id);\n this.setState({\n cancel_loading: true\n })\n }\n\n render() {\n\n const close =\n \n \n \n \n\n const extend =\n \n \n \n \n\n const pause =\n \n \n \n \n \n\n const icon_delete =\n \n \n \n \n\n return (\n ReactDOM.createPortal(\n\n \n
\n\n
\n
\n
What do you want to do? \n this.props.closeOverlay(e)}>\n {close}\n \n \n
\n
\n
\n {this.props.subscription.state === 'trialing' ? (\n <>\n
{ extend } Extend trial by 30 days \n
If you need more time to get the most of your Slate trial, we'll
\n
this.confirmPauseSubscription(e)}>\n
\n Extend my trial \n \n \n ) : (\n <>\n { pause } Pause my subscription for 3 months \n If you need a break, we'll pause payments for the next 3 months. You will still have access to your Slate account during this time.
\n this.confirmPauseSubscription(e)}>\n
\n Pause my subscription \n \n \n )}\n \n
\n
\n
{ icon_delete } Cancel my subscription \n
You will lose access to Slate as soon as you do this . You can get
\n
this.confirmCancelSubscription(e)}>\n
\n Cancel my subscription \n \n \n
\n
\n
\n
\n\n
this.props.closeOverlay(e) }> \n\n
\n
\n this.switchTabs(e, 'schedule')}>Schedule\n this.switchTabs(e, 'invoices')}>Invoices\n this.switchTabs(e, 'company')}>Company\n this.switchTabs(e, 'personal')}>Personal\n this.switchTabs(e, 'billing')}>Billing\n
\n
\n\n {this.state.tab === 'billing' && (\n
\n\n
\n {(this.props.subscription && this.props.subscription.state !== 'canceled') &&\n
\n You're subscribed to the {this.props.subscription.plan_name} plan. \n Your next payment will be {this.props.subscription.amount} on {dateFns.format(this.props.subscription.next_invoice_at, 'DD/MM/YYYY')} using your {this.props.subscription.payment_method.brand} card ending in {this.props.subscription.payment_method.last4}. You can cancel your subscription or update your payment method below.
\n }\n {(!this.props.subscription || this.props.subscription.state === 'canceled') &&\n
\n Payment details \n }\n
\n\n
\n \n \n \n\n {invoices && (
\n {this.props.currentUser.invoices.map((item) => {\n return (
\n
{dateFns.format(item.created_at, 'MMMM YYYY')} ({item.amount}) \n
Download Invoice \n
);\n })}\n
)}\n\n {trial_remaining &&\n
\n
\n \n \n \n
You have {dateFns.differenceInDays(this.props.currentUser.trial_ends_at, dateFns.parse(Date.now()))} days left of your trial \n
}\n\n
\n )}\n\n
\n\n
\n\n \n\n {!this.props.currentUser.country ?\n
\n \n \n :\n
\n {(this.props.currentUser.state == 'trial_expired') ? (\n Your trial has expired, please add a payment method. \n ) : (\n Add a payment method. \n )}\n {(!this.props.subscription || this.props.subscription.state === 'canceled') &&\n \n \n \n \n }\n \n }\n
Have any questions? Email us \n \n );\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Billings);\n","import React from 'react';\nimport {Elements, StripeProvider} from 'react-stripe-elements';\nimport CheckoutForm from './CheckoutForm';\nimport agent from '../agent';\nimport { connect } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport {\n SUBSCRIPTION_CREATE\n} from '../constants/actionTypes';\n\nconst mapStateToProps = state => (\n {\n ...state.settings,\n currentUser: state.common.currentUser,\n subscription: state.common.subscription\n }\n);\n\nconst mapDispatchToProps = dispatch => ({\n createSubscription: stripe_token_id => {\n dispatch({ type: SUBSCRIPTION_CREATE, payload: agent.Subscription.create(stripe_token_id, true) })\n }\n});\n\nclass PaymentMethod extends React.Component {\n render() {\n return (\n \n \n Billing / Payment details \n \n \n \n
\n \n {this.props.subscription && this.props.subscription.payment_method &&\n
\n {this.props.subscription.payment_method.brand} ending **** **** **** {this.props.subscription.payment_method.last4} expiring on {this.props.subscription.payment_method.exp_month}/{this.props.subscription.payment_method.exp_year} \n
\n }\n
\n \n \n
\n
\n
\n
\n \n );\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(PaymentMethod);\n","import React, { useEffect, useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport TimeField from 'react-simple-timefield';\nimport DayPicker from 'react-day-picker';\nimport dateFns from 'date-fns';\nimport Tooltip from '../Tooltip';\nimport { scrollPosition } from './Overlay';\n\nexport const Dropdown = (props) => {\n const node = useRef();\n\n const [open, setOpen] = useState(false);\n\n const handleScroll = e => {\n setOpen(false);\n }\n\n const handleChange = (field, value, persist) => {\n props.onChange(field,value)\n if (!persist) {\n setOpen(false);\n }\n };\n\n const handleClickOutside = e => {\n\n e.stopImmediatePropagation()\n\n let dropdown = e.composedPath().filter(function (el) {\n return el.id === 'dropdown__menu'\n })\n\n // inside click\n if (dropdown.length >= 1 || node.current.contains(e.target)) {\n return;\n }\n\n // outside click\n setOpen(false);\n\n };\n\n useEffect(() => {\n if (open) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n node.current.offsetParent.addEventListener(\"scroll\", handleScroll);\n\n const dropdown_menu = document.querySelector('#dropdown__menu');\n const position_top = ((node.current.offsetParent.offsetTop + node.current.offsetTop + node.current.offsetHeight + 8) - scrollPosition);\n\n // set default position\n dropdown_menu.style.top = position_top + 'px';\n\n // get bounds now dropdown has default position\n const dropdown_menu_bounds = dropdown_menu.getBoundingClientRect();\n\n // dropdown outside window, recalculate position\n if ( dropdown_menu_bounds.bottom > window.innerHeight ) {\n const position_recalc = ((node.current.offsetParent.offsetTop + node.current.offsetTop - 8) - scrollPosition) - dropdown_menu.offsetHeight;\n dropdown_menu.style.top = position_recalc + 'px';\n }\n\n // finally, show dropdown (to stop position popping effect)\n dropdown_menu.style.visibility = 'visible';\n\n } else {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n node.current.offsetParent.removeEventListener(\"scroll\", handleScroll);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n node.current.offsetParent.removeEventListener(\"scroll\", handleScroll);\n };\n }, [open]);\n\n return (\n \n
setOpen(!open)}>\n \n {((props.content === 'project_rate_unit') && (\n (props.project.project_rate_unit === 'days' && 'By the day') ||\n (props.project.project_rate_unit === 'hours' && 'By the hour')\n )) || ((props.content === 'estimated_time_unit') && (\n (props.project.estimated_time_unit === 'hours' && 'Hours') ||\n (props.project.estimated_time_unit === 'days' && 'Days')\n )) || ((props.content === 'preferred_billing_unit') && (\n (props.client.preferred_billing_unit === 'days' && 'By the day') ||\n (props.client.preferred_billing_unit === 'hours' && 'By the hour') ||\n (props.client.preferred_billing_unit === 'projects' && 'By the project')\n )) || ((props.content === 'rates') && (\n (((props.client.preferred_billing_unit === 'days') || (props.client.preferred_billing_unit === 'projects')) && (\n \n \n \n \n \n \n \n {open && (\n ReactDOM.createPortal(\n
\n
handleChange('project.estimated_time_unit','hours')}>Hours handleChange('project.estimated_time_unit','days')}>Days\n \n )) || ((props.content === 'preferred_billing_unit') && ( // client.preferred_billing_unit\n \n
handleChange('client.preferred_billing_unit','days')}>By the day handleChange('client.preferred_billing_unit','hours')}>By the hour\n handleChange('client.preferred_billing_unit','projects')}>By the project\n \n )) || ((props.content === 'rates') && ( // client.day_rate & client.hourly_rate\n \n {(((props.client.preferred_billing_unit === 'days') && (\n
\n
\n
handleChange('client.day_rate', e.target.value, true)} />\n \n )) || ((props.client.preferred_billing_unit === 'hours') && (\n
\n
\n
handleChange('client.hourly_rate', e.target.value, true)} />\n \n )))}\n
\n \n All-day \n \n \n \n \n \n \n Apply to all days
\n \n )) || ((props.content === 'deadline') && (\n handleChange('project.deadline',e)}\n onTodayButtonClick={(e) => handleChange('project.deadline',false)}\n fromMonth={new Date()}\n todayButton={'Remove Deadline'}\n initialMonth={props.project.deadline ? dateFns.parse(props.project.deadline) : new Date()} />\n ))}\n , document.querySelector('.overlay__block:last-child')\n )\n )}\n \n );\n};\n","import React from 'react';\nimport dateFns from 'date-fns';\nimport { Dropdown } from './Dropdown';\nexport class OverlayItem extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n date: props.date,\n price: props.price || (this.props.project ? this.props.project.project_rate_value : this.props.client.day_rate),\n unit: props.unit || (this.props.project ? this.props.project.project_rate_unit : 'days'),\n unit_value: props.unit_value || (this.props.project ? this.props.project.project_rate_unit : '1'),\n unit_value_in_time: props.unit_value_in_time || '01:00',\n unit_value_formatted: props.unit_value_formatted || '01h 00m'\n };\n }\n\n componentDidUpdate(prevProps, prevState) {\n\n if(\n prevProps.price !== this.props.price || \n prevProps.unit !== this.props.unit || \n prevProps.unit_value !== this.props.unit_value || \n prevProps.unit_value_in_time !== this.props.unit_value_in_time || \n prevProps.unit_value_formatted !== this.props.unit_value_formatted\n ) {\n \n let newState = {\n ...this.state,\n price: this.props.price,\n unit: this.props.unit,\n unit_value: this.props.unit_value,\n unit_value_in_time: this.props.unit_value_in_time,\n unit_value_formatted: this.props.unit_value_formatted\n };\n \n this.setState(newState);\n\n }\n\n }\n\n incrementDecrementTime = (e) => {\n if ([38, 40].includes(e.keyCode)) {\n let [firstNumber, secondNumber] = String(this.state.unit_value_in_time).split(':');\n\n // down\n if (e.keyCode === 40) {\n if (parseInt(firstNumber) === 0 && parseInt(secondNumber) === 15) {\n return false;\n }\n secondNumber = parseInt(secondNumber) - 15;\n if (secondNumber < 0) {\n firstNumber = parseInt(firstNumber) - 1;\n firstNumber = (firstNumber < 10 ? '0' : '') + firstNumber;\n secondNumber = '45';\n }\n }\n // up\n if (e.keyCode === 38) {\n if (firstNumber >= 23 && secondNumber >= 45) {\n return false;\n }\n secondNumber = parseInt(secondNumber) + 15;\n if (secondNumber >= 60) {\n firstNumber = parseInt(firstNumber) + 1;\n firstNumber = (firstNumber < 10 ? '0' : '') + firstNumber;\n secondNumber = '00';\n }\n }\n let newState = {\n ...this.state,\n // price: 100, // chris\n unit_value: firstNumber + ':' + secondNumber,\n unit_value_in_time: `${firstNumber}:${secondNumber}`,\n unit_value_formatted: `${firstNumber}h ${secondNumber}m`\n };\n this.setState(newState);\n this.props.updateDate(this.props.date, newState);\n }\n };\n changeTime = (e, time) => {\n let [firstNumber, secondNumber] = String(time).split(':');\n let newState = {\n ...this.state,\n unit_value: time,\n unit_value_in_time: `${firstNumber}:${secondNumber}`,\n unit_value_formatted: `${firstNumber}h ${secondNumber}m`\n };\n this.setState(newState);\n this.props.updateDate(this.props.date, newState);\n };\n changeAllTimes = (e) => {\n this.props.updateAllDates(this.state);\n };\n toggleUnit = (e) => {\n e.stopPropagation();\n let [firstNumber, secondNumber] = String(this.state.unit_value_in_time).split(':');\n let newState = {\n ...this.state,\n unit: this.state.unit === 'days' ? 'hours' : 'days',\n unit_value: this.state.unit === 'days' ? firstNumber + ':' + secondNumber : 1,\n unit_value_in_time: `${firstNumber}:${secondNumber}`,\n unit_value_formatted: `${firstNumber}h ${secondNumber}m`\n };\n this.setState(newState);\n this.props.updateDate(this.props.date, newState);\n };\n render() {\n const dropdown = \n \n \n ;\n return (\n \n
{dateFns.format(this.props.date, 'dddd, Do MMMM YYYY')}
\n
\n
\n \n )\n}\n\nexport let scrollPosition = 0;\n\nconst mapStateToProps = (state, ownProps) => ({\n ...state,\n activeMonth: state.common.activeMonth,\n errors: state.projects.errors || state.clients.errors\n});\n\nconst mapDispatchToProps = dispatch => ({\n\n newClient: client => {\n dispatch({ type: CLIENT_CREATE, payload: agent.Clients.create(client) })\n },\n\n newProject: project => {\n dispatch({ type: PROJECT_CREATE, payload: agent.Projects.create(project) })\n },\n\n updateSchedule: (type, activeMonth, dates, work) => {\n\n if (type === 'CREATE' || type === 'HOLIDAY') {\n\n var schedule = [];\n\n dates.forEach(function(item, i){\n\n if (type === 'HOLIDAY') {\n\n schedule = update(schedule, {$push: [\n update(item, {\n holiday: {$set: true}\n })\n ]})\n\n } else {\n\n schedule = update(schedule, {$push: [\n update(item, {\n client_id: {$set: work.client_id},\n project_id: {$set: work.project_id},\n note: {$set: work.note}\n })\n ]})\n\n }\n\n })\n\n dispatch({\n type: SCHEDULE_CREATE,\n payload: agent.Schedule.create_multiple(schedule).then((res) => {\n if(!res.body.errors) {\n let month_name = dateFns.format(activeMonth, 'MMMM').toLowerCase()\n let year = dateFns.format(activeMonth, 'YYYY').toLowerCase()\n dispatch({ type: MONTH_LOADED, month: activeMonth, month_string: month_name + '-' + year, payload: agent.Month.show(month_name, year) })\n }\n return res;\n })\n })\n\n // cleanup\n schedule = null;\n\n }\n\n if (type === 'UPDATE') {\n\n dates.forEach(function(item, i){\n\n let schedule = update(item, {\n note: {$set: work.note}\n })\n\n dispatch({\n type: SCHEDULE_UPDATE,\n payload: agent.Schedule.update(schedule).then((res) => {\n if(!res.body.errors) {\n let month_name = dateFns.format(activeMonth, 'MMMM').toLowerCase()\n let year = dateFns.format(activeMonth, 'YYYY').toLowerCase()\n dispatch({ type: MONTH_LOADED, month: activeMonth, month_string: month_name + '-' + year, payload: agent.Month.show(month_name, year) })\n }\n return res;\n })\n })\n\n // cleanup\n schedule = null;\n\n })\n\n }\n\n if (type === 'REMOVE') {\n\n dates.forEach(function(item, i){\n\n dispatch({\n type: SCHEDULE_REMOVE,\n payload: agent.Schedule.remove_multiple([{id:parseInt(item.id)}]).then((res) => {\n if(!res.body.errors) {\n let month_name = dateFns.format(activeMonth, 'MMMM').toLowerCase()\n let year = dateFns.format(activeMonth, 'YYYY').toLowerCase()\n dispatch({ type: MONTH_LOADED, month: activeMonth, month_string: month_name + '-' + year, payload: agent.Month.show(month_name, year) })\n }\n return res;\n })\n })\n\n })\n\n }\n\n }\n})\n\nclass Overlay extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.searchClientsRef = React.createRef();\n this.clientTitleRef = React.createRef();\n this.searchProjectsRef = React.createRef();\n this.projectTitleRef = React.createRef();\n this.clientButtonRef = React.createRef();\n this.projectButtonRef = React.createRef();\n this.scheduleButtonRef = React.createRef();\n this.fixedPriceRef = React.createRef();\n\n let client;\n let project;\n let dates = [];\n\n if (this.props.work) {\n\n client = this.props.clients.clients.filter((el) => {\n return el.id === this.props.work.client\n });\n\n project = this.props.projects.projects.filter((el) => {\n return el.id === this.props.work.project_id\n });\n\n this.state = {\n initialLoad: true,\n counter: 1,\n overlay: this.props.overlay,\n overlay_history: ['work'],\n client: client[0],\n project: project[0],\n dates: [{...this.props.work}],\n note: this.props.work.note,\n new: false,\n loading: false\n }\n\n } else {\n\n this.state = {\n initialLoad: true,\n counter: 1,\n overlay: this.props.overlay,\n overlay_history: ['client'],\n clients: this.props.clients.clients.filter((el) => {\n return el.state === 'active'\n }),\n projects: this.props.projects,\n keyword: false,\n dates: dates,\n new: true,\n loading: false\n }\n\n }\n\n }\n\n componentDidMount(){\n document.addEventListener(\"keydown\", this.keyPress.bind(this), false);\n\n if(this.state.overlay === 'client') {\n this.searchClientsRef.current.focus()\n }\n\n }\n\n componentWillUnmount(){\n document.removeEventListener(\"keydown\", this.keyPress.bind(this), false);\n scrollPosition = 0\n }\n\n componentDidUpdate(prevProps, prevState) {\n\n if(prevState.loading && this.props.errors) {\n\n this.setState({\n ...this.state,\n loading: false\n })\n\n }\n\n if(prevProps.projects !== this.props.projects) {\n\n let client_id;\n\n if (this.state.client.id) {\n client_id = this.state.client.id;\n }\n\n this.setState({\n ...this.state, // needed?\n projects: this.state.client ? this.props.projects.projects.filter(function (el) {\n return el.client_id === client_id\n }) : this.props.projects.projects\n })\n\n }\n\n if(prevState.overlay !== 'new_project' && this.state.overlay === 'new_project' && this.state.project.billing_type === 'fixed_price') {\n this.fixedPriceRef.current.focus()\n }\n\n if(this.state.overlay === 'new_project' && prevState.project !== this.state.project) {\n\n let estimated = this.state.project.amount / this.state.project.estimated_time_value\n\n this.setState({\n estimated: estimated\n })\n\n }\n\n if(this.state.overlay === 'client') {\n this.searchClientsRef.current.focus()\n }\n\n if(this.state.overlay === 'new_client' && prevState.overlay !== 'new_client') {\n this.clientTitleRef.current.focus()\n }\n\n if(this.state.overlay === 'project') {\n this.searchProjectsRef.current.focus()\n }\n\n if(this.state.overlay === 'new_project' && prevState.overlay !== 'new_project') {\n this.projectTitleRef.current.focus()\n }\n\n }\n\n handleScheduleScroll(e) {\n scrollPosition = e.target.scrollTop;\n }\n\n keyPress(e, field=false){\n\n // up/down arrow\n if ( field && [38,40].includes( e.keyCode ) ) {\n\n let value = parseInt(e.target.innerText)\n\n // down\n if( e.keyCode === 40 ) {\n\n if (value === 0) {\n return false\n }\n\n --value\n\n }\n\n // up\n if( e.keyCode === 38 ) {\n ++value\n }\n\n const [split_field, parent_key] = field.split('.').reverse()\n let newData;\n\n if (parent_key === undefined) {\n\n newData = update(this.state, {\n [split_field]: {$set: value}\n })\n\n } else {\n\n newData = update(this.state, {\n [parent_key]: {\n [split_field]: {$set: value}\n }\n })\n\n }\n\n this.setState(newData);\n\n // cleanup\n newData = null;\n\n }\n\n // escape\n // if(e.keyCode === 27) {\n // this.props.closeOverlay(e)\n // }\n\n // enter\n if(e.keyCode === 13) {\n\n const overlay = this.state.overlay;\n\n if (e.target.nodeName === 'TEXTAREA') {\n return false;\n }\n\n if (overlay === 'new_client' && this.clientButtonRef.current) {\n this.clientButtonRef.current.click()\n }\n\n if ((overlay === 'new_project') && this.projectButtonRef.current) {\n this.projectButtonRef.current.click()\n }\n\n if (overlay === 'schedule' && this.scheduleButtonRef.current) {\n this.scheduleButtonRef.current.click()\n }\n\n }\n\n }\n\n formatPrice(price, currency=undefined) {\n\n return new Intl.NumberFormat(this.props.common.locale, {\n style: 'currency',\n currency: currency || this.props.common.currentUser.currency\n }).format(price)\n\n }\n\n numericOnly(value){\n return value.replace(/[^0-9.]/g, '')\n }\n\n calculatePrice(unit, unit_value, rate){\n return (unit === 'days') ? parseFloat(rate).toFixed(2) : (parseFloat(unit_value) * rate).toFixed(2)\n }\n\n setOverlay(e, overlay, direction) {\n\n e.stopPropagation();\n\n let overlay_history;\n\n if (direction === 'back') {\n let array = this.state.overlay_history\n overlay_history = array.splice(0, array.length-1)\n } else {\n overlay_history = this.state.overlay_history.concat(overlay);\n }\n\n if(overlay === 'client') {\n this.searchClientsRef.current.value = ''\n }\n\n if(overlay === 'project') {\n this.searchProjectsRef.current.value = ''\n }\n\n this.setState({\n ...this.state, // needed?\n initialLoad: false,\n overlay: overlay,\n overlay_history: overlay_history,\n counter: overlay === 'client' ? 1 : (direction === 'forward' ? this.state.counter + 1 : this.state.counter - 1),\n //keyword: (overlay === 'client' || overlay === 'project') ? false : this.state.keyword,\n project: overlay === 'project' ? [] : this.state.project,\n project_id: overlay === 'project' ? false : this.state.project_id,\n projects: overlay === 'client' ? [] : this.state.projects,\n price: overlay === 'schedule'? true : false,\n results: false,\n keyword: false\n });\n\n }\n\n search(e, type) {\n\n let search = e.currentTarget.value;\n let array = {\n 'clients': this.props.clients.clients,\n 'projects': this.state.client ? this.state.projects : []\n }\n\n if (search.length > 1) {\n\n let list = _.filter(array[type], _.flow(\n _.values,\n _.partialRight(_.some, _.method('match', new RegExp(search, 'i')))\n ));\n\n if (type === 'clients') {\n\n this.setState({\n ...this.state, // needed?\n results: list,\n keyword: search\n })\n\n if (list.length === 0 && e.keyCode === 13) {\n this.setupNewClient()\n }\n\n } else if (type === 'projects') {\n\n this.setState({\n ...this.state, // needed?\n results: list,\n keyword: search\n })\n\n if (list.length === 0 && e.keyCode === 13) {\n this.setupNewProject()\n }\n\n }\n\n }\n\n if (search.length === 0) {\n\n this.setState({\n ...this.state, // needed?\n results: false,\n keyword: false\n })\n\n }\n\n }\n\n updateField(field, value) {\n\n const [split_field, parent_key] = field.split('.').reverse()\n let newData;\n\n if (parent_key === undefined) {\n\n newData = update(this.state, {\n [split_field]: {$set: value}\n })\n\n } else {\n\n newData = update(this.state, {\n [parent_key]: {\n [split_field]: {$set: value}\n }\n })\n\n }\n\n // get correct rate for new projects\n if(this.state.new && this.state.client && field === 'project.project_rate_unit') {\n\n let rate;\n\n if (value === 'hours') {\n rate = this.state.client.hourly_rate ? this.state.client.hourly_rate : this.props.common.currentUser.standard_hourly_rate;\n }\n\n if (value === 'days') {\n rate = this.state.client.day_rate ? this.state.client.day_rate : this.props.common.currentUser.standard_day_rate;\n }\n\n newData = update(this.state, {\n 'project': {\n 'project_rate_value': {$set: rate},\n 'project_rate_unit': {$set: value}\n }\n })\n\n }\n\n this.setState(newData);\n\n // cleanup\n newData = null;\n\n }\n\n updateColour(color) {\n this.updateField('client.hex_colour', color.hex)\n\n this.setState({\n displayColorPicker: false\n })\n\n }\n\n setClient(e, client) {\n\n e.stopPropagation();\n\n let dates = [];\n this.props.dates.map((date) => {\n return dates.push({\n date: date,\n price: (client.day_rate !== null) ? client.day_rate : this.props.common.currentUser.standard_day_rate,\n unit: 'days',\n unit_value: 1,\n unit_value_in_time: '01:00',\n unit_value_formatted: 'All-day'\n })\n })\n\n let total_price = 0;\n dates.map((date) => {\n return total_price += parseFloat(date.price)\n })\n\n let total_time = this.props.dates.length + (this.props.dates.length === 1 ? ' Day': ' Days');\n let projects = this.props.projects.projects.filter(function (el) {\n return el.client_id === client.id && el.state === 'active'\n })\n\n this.setState({\n ...this.state,\n overlay: 'project',\n overlay_history: this.state.overlay_history.concat('project'),\n counter: this.state.counter + 1,\n client: client,\n projects: projects,\n client_id: client.id,\n dates: dates,\n total_price: total_price,\n total_time: total_time,\n results: false,\n keyword: false\n });\n\n }\n\n setupNewClient(e) {\n\n var r = ((Math.floor(Math.random() * 255) + 255) / 2);\n var g = ((Math.floor(Math.random() * 255) + 255) / 2);\n var b = ((Math.floor(Math.random() * 255) + 255) / 2);\n var random_colour = 'rgb(' + r + ', ' + g + ', ' + b + ')';\n\n this.setState({\n ...this.state,\n overlay: 'new_client',\n overlay_history: this.state.overlay_history.concat('new_client'),\n counter: this.state.counter + 1,\n clients: this.props.clients.clients.filter((el) => {\n return el.state === 'active'\n }),\n client: {\n name: this.state.keyword ? this.state.keyword : '',\n hex_colour: random_colour,\n day_rate: this.props.common.currentUser.standard_day_rate,\n hourly_rate: this.props.common.currentUser.standard_hourly_rate,\n preferred_billing_unit: 'days',\n address_line_1: '',\n address_line_2: '',\n city: '',\n country: '',\n postal_code: '',\n payment_terms: 30,\n invoice_schedule: 'end_of_month',\n currency: this.props.common.currentUser.currency\n },\n projects: [],\n results: false,\n keyword: false\n })\n\n this.searchClientsRef.current.value = ''\n this.searchClientsRef.current.blur()\n\n }\n\n createClient(e, clientName) {\n\n // validate email if provided\n if( this.state.client.email && !validateEmail(this.state.client.email) ) {\n return false;\n }\n\n let newData;\n\n // pro-rata day rate\n if (this.state.client.preferred_billing_unit === 'hours') {\n\n newData = update(this.state.client, {\n day_rate: {$set: this.state.client.hourly_rate * this.props.common.currentUser.hours_per_day }\n })\n\n }\n\n // pro-rata hourly rate\n if (this.state.client.preferred_billing_unit === 'days') {\n newData = update(this.state.client, {\n hourly_rate: {$set: this.state.client.day_rate / this.props.common.currentUser.hours_per_day }\n })\n\n }\n\n // create the client\n this.props.newClient( newData );\n\n this.setState({\n newData,\n loading: true\n })\n\n let that = this;\n let timer = setInterval(function() {\n\n // get client using a dispatch event instead (LOAD_CLIENT_IN_SCHEDULE)\n\n let new_client = that.props.clients.clients.filter(function (el) {\n return el.name === clientName\n });\n\n if (new_client[0]) {\n\n clearInterval(timer);\n\n let client = new_client[0]\n\n let dates = [];\n that.props.dates.map((date) => {\n return dates.push({\n date: date,\n price: (client.day_rate !== null) ? client.day_rate : that.props.common.currentUser.standard_day_rate,\n unit: 'days',\n unit_value: 1,\n unit_value_in_time: '01:00',\n unit_value_formatted: 'All-day'\n })\n })\n\n let total_price = 0;\n dates.map((date) => {\n return total_price += parseFloat(date.price)\n })\n\n let total_time = dates.length + ' Days';\n\n let overlay_history = that.state.overlay_history;\n\n let newState = {\n ...that.state,\n keyword: false,\n overlay: 'project',\n overlay_history: overlay_history.splice(0, overlay_history.length-1).concat('project'),\n dates: dates,\n client: client,\n client_id: client.id,\n price: client.day_rate,\n total_price: total_price,\n total_time: total_time,\n clients: that.props.clients.clients.filter((el) => {\n return el.state === 'active'\n }),\n loading: false\n }\n\n that.setState(newState);\n\n }\n\n }, 100);\n\n // cleanup\n newData = null;\n\n }\n\n setProject(e, project) {\n\n e.stopPropagation();\n\n let dates = [];\n let total_price = 0;\n let total_time = '';\n\n this.props.dates.map((date) => {\n return dates.push({\n date: date,\n price: project.project_rate_value,\n unit: project.project_rate_unit,\n unit_value: 1,\n unit_value_in_time: project.project_rate_unit === 'days' ? '24:00' : '01:00',\n unit_value_formatted: project.project_rate_unit === 'days' ? 'All-day' : '1h 00m'\n })\n\n })\n\n dates.map((date) => {\n return total_price += parseFloat(date.price)\n })\n\n if ( project.project_rate_unit === 'days' ) {\n total_time = this.props.dates.length + (this.props.dates.length > 1 ? ' Days' : ' Day');\n } else {\n total_time = this.props.dates.length + 'h 0m';\n }\n\n this.setState({\n overlay: 'schedule',\n overlay_history: this.state.overlay_history.concat('schedule'),\n counter: this.state.counter + 1,\n project: project,\n project_id: project.id,\n results: false,\n keyword: false,\n total_price: total_price,\n total_time: total_time\n });\n\n }\n\n setupNewProject(e) {\n\n this.setState({\n ...this.state,\n overlay: 'new_project',\n overlay_history: this.state.overlay_history.concat('new_project'),\n counter: this.state.counter + 1,\n projects: this.state.projects,\n project: {\n title: this.state.keyword ? this.state.keyword : '',\n billing_type: 'fixed_price',\n client_id: this.state.client.id,\n amount: '',\n estimated_time_unit: 'days',\n estimated_time_value: 1,\n project_rate_unit: 'days',\n project_rate_value: this.state.client.day_rate,\n currency: this.state.client.currency\n },\n estimated: 0,\n results: false,\n keyword: false\n })\n\n this.searchProjectsRef.current.value = ''\n this.searchProjectsRef.current.blur()\n\n }\n\n createProject(e, client_id, project_name) {\n\n this.setState({\n loading: true\n })\n\n // create the project\n this.props.newProject( this.state.project );\n\n let that = this;\n let timer = setInterval(function() {\n\n let new_project = that.props.projects.projects.filter(function (el) {\n return (el.title === project_name && el.client_id === client_id)\n });\n\n if (new_project[0]) {\n\n clearInterval(timer);\n\n let project = new_project[0]\n\n let dates = [];\n that.props.dates.map((date) => {\n return dates.push({\n date: date,\n price: (project.project_rate_value !== null) ? project.project_rate_value : that.state.client.day_rate,\n unit: 'days',\n unit_value: 1,\n unit_value_in_time: '01:00',\n unit_value_formatted: 'All-day',\n project_id: project.id\n })\n })\n\n let total_price = 0;\n dates.map((date) => {\n return total_price += parseFloat(date.price)\n })\n\n let total_time = dates.length + ' Days';\n\n let overlay_history = that.state.overlay_history;\n\n let newState = {\n ...that.state,\n keyword: false,\n overlay: 'schedule',\n overlay_history: overlay_history.splice(0, overlay_history.length-1).concat('schedule'),\n dates: dates,\n project: project,\n project_id: project.id,\n client_id: project.client_id,\n price: project.project_rate_value,\n total_price: total_price,\n total_time: total_time,\n loading: false\n }\n\n that.setState(newState);\n\n }\n\n }, 100);\n\n }\n\n updateInput(input) {\n\n let field = input.target.name;\n let newState = {\n ...this.state,\n [input.target.name]: input.target.value\n }\n\n this.setState(newState);\n\n }\n\n updateAllDates(override) {\n\n delete override.date\n\n let newState = []\n let total_price = 0;\n let total_time = '';\n let total_days = 0;\n let total_hours = 0;\n let calc;\n let calc_hours = 0;\n let calc_minutes = 0;\n\n // update all dates\n this.state.dates.forEach(function(item, i){\n\n newState = update(newState, {$push: [\n update(item, {\n price: {$set: override.price},\n unit: {$set: override.unit},\n unit_value: {$set: override.unit_value},\n unit_value_in_time: {$set: override.unit_value_in_time},\n unit_value_formatted: {$set: override.unit_value_formatted},\n })\n ]})\n\n // calculate total price and total time\n\n total_price += parseFloat(override.price)\n total_days += (override.unit === 'days' ? 1 : 0)\n total_hours = (override.unit === 'hours' ? parseFloat(override.unit_value) : 0)\n\n if(total_hours > 0) {\n calc = String(total_hours).split('.')\n calc_hours += parseFloat(calc[0])\n calc_minutes += parseFloat('0.'+calc[1]) * 60\n }\n\n if(total_days > 0) {\n total_time = total_days + (total_days === 1 ? ' Day': ' Days')\n }\n\n if(calc_hours > 0 || calc_minutes > 0 ) {\n total_time = calc_hours + 'h ' + calc_minutes.toFixed() + 'm'\n }\n\n });\n\n this.setState({\n ...this.state,\n dates: newState,\n total_price: total_price,\n total_time: total_time\n })\n\n }\n\n updateDate(date, data) {\n\n let newState;\n let index = this.state.dates.findIndex(function(el) {\n return el.date === date\n });\n\n let newData = Object.assign({}, this.state.dates[index], data);\n let unit_value = newData.unit === 'days' ? newData.unit_value : String(newData.unit_value).split(':');\n\n newData.date = date;\n\n // update unit_value of date being edited\n\n if(newData.unit === 'hours') {\n\n let hours = unit_value[0];\n let minutes = ((unit_value[1] * 60) / 3600).toString();\n\n if (minutes === '0') {\n minutes = '00'\n } else {\n minutes = minutes.split('.')[1]\n }\n\n newData.unit_value = hours + '.' + minutes;\n\n }\n\n // update price of date being edited\n\n let client = this.state.client;\n let project = this.state.project;\n let price;\n\n if(project) {\n price = this.calculatePrice(newData.unit, newData.unit_value,\n (newData.unit === 'days') ? (\n project.project_rate_unit === 'days' ? project.project_rate_value : project.project_rate_value * parseFloat(this.props.common.currentUser.hours_per_day)\n ) : (\n project.project_rate_unit === 'days' ? project.project_rate_value / parseFloat(this.props.common.currentUser.hours_per_day) : project.project_rate_value\n )\n )\n } else if (client) {\n price = this.calculatePrice(newData.unit, newData.unit_value,\n (newData.unit === 'days') ? (\n // day rate\n client.day_rate ? client.day_rate : this.props.common.currentUser.standard_day_rate\n ) : (\n // hourly rate\n client.hourly_rate ? client.hourly_rate : client.day_rate / this.props.common.currentUser.hours_per_day\n )\n )\n } else {\n price = this.calculatePrice(newData.unit, newData.unit_value,\n (newData.unit === 'days') ? (\n this.props.common.currentUser.standard_day_rate\n ) : (\n this.props.common.currentUser.standard_hourly_rate\n )\n )\n }\n\n newData.price = price\n\n // new work\n if (this.state.new) {\n\n newState = Object.assign([], this.state.dates, {\n [index]: newData\n });\n\n // existing work\n } else {\n\n newState = Object.assign([], this.state.dates, {\n 0: newData\n });\n\n }\n\n // calculate total price and total time\n\n let total_days = 0;\n let total_hours = 0;\n let total_price = 0;\n let calc;\n let calc_hours = 0;\n let calc_minutes = 0;\n let total_time = '';\n\n newState.map((date) => {\n total_price += parseFloat(date.price)\n total_days += (date.unit === 'days' ? 1 : 0)\n total_hours = (date.unit === 'hours' ? parseFloat(date.unit_value) : 0)\n\n if(total_hours > 0) {\n calc = String(total_hours).split('.')\n calc_hours += parseFloat(calc[0])\n calc_minutes += parseFloat('0.'+calc[1]) * 60\n }\n\n return;\n\n })\n\n if(total_days > 0) {\n total_time += total_days + (total_days === 1 ? ' Day': ' Days')\n }\n\n if(calc_hours > 0 || calc_minutes > 0 ) {\n if(total_days > 0) {\n total_time += ', '\n }\n total_time += calc_hours + 'h ' + calc_minutes.toFixed() + 'm'\n }\n\n // update state\n\n this.setState({\n ...this.state,\n dates: newState,\n total_price: total_price,\n total_time: total_time\n });\n\n }\n\n saveHoliday(e, activeMonth) {\n\n e.stopPropagation();\n\n let dates = [];\n\n this.props.dates.map((date) => {\n return dates.push({\n date: date,\n holiday: true\n })\n })\n\n this.props.updateSchedule(\n 'HOLIDAY', //type\n activeMonth, // activeMonth\n dates, // dates,\n false // work\n )\n\n this.props.closeOverlay(e)\n\n }\n\n saveWork(e, type, activeMonth, dates, work) {\n\n e.stopPropagation();\n\n const client = this.state.client;\n\n work = Object.assign({}, this.state, {holiday: false, updated: dateFns.parse(Date.now())});\n\n this.props.updateSchedule(\n type, //type\n activeMonth, // activeMonth\n dates, // dates,\n work // work\n )\n\n this.props.closeOverlay(e)\n\n }\n\n handleClick = () => {\n this.setState({ displayColorPicker: !this.state.displayColorPicker })\n };\n\n handleClose = () => {\n this.setState({ displayColorPicker: false })\n };\n\n render() {\n\n const close =\n \n \n \n \n\n const price =\n \n \n \n \n\n const time =\n \n \n \n \n\n const holiday =\n \n \n\n const holiday__sm =\n \n \n \n \n \n\n const arrow =\n \n \n \n \n\n const help =\n \n \n \n\n const client =\n \n \n \n \n \n \n \n \n\n return (\n ReactDOM.createPortal(\n\n \n \n
\n\n {this.state.overlay_history.includes('client') && (\n
\n {this.props.clients.clients.length === 0 && (\n
\n { client }\n Add your first client. \n
\n )}\n
\n this.search(e, 'clients')}\n type=\"text\"\n placeholder={ this.props.clients.clients.length === 0 ? 'Client Name' : 'Search Clients...'} />\n this.props.closeOverlay(e)}>\n {close}\n \n
\n
\n {(this.state.results ? this.state.results : this.state.clients).map((el,key) => {\n return (\n
this.setClient(e, el)}>{el.name} \n )\n })}\n {!this.state.results && _.size(this.state.clients) > 0 && (\n
this.setupNewClient(e, '')}>New Client... \n )}\n
\n {this.state.keyword.length > 1 ? (\n
this.setupNewClient(e)}>Create a client called {this.state.keyword} { arrow } \n ) : (\n
{ this.saveHoliday(\n e,\n this.props.activeMonth // activeMonth\n ) }}>Mark these days as holiday { holiday__sm } \n
\n this.updateField('client.name', e.target.value)} />\n this.setOverlay(e, 'client', 'back')}>\n {close}\n \n
\n
\n
\n this.keyPress(e)}\n onChange={(e) => this.updateField('client.address', e.target.value)} />\n
\n
\n Contact Name
\n \n this.keyPress(e)}\n onChange={(e) => this.updateField('client.contact_name', e.target.value)} />\n \n \n
\n Email Address
\n \n this.keyPress(e)}\n onChange={(e) => this.updateField('client.email', e.target.value)} />\n \n Colour
\n \n { this.state.displayColorPicker && }\n \n \n \n
Currency
\n
{ return el.value === this.state.client.currency})}\n menuPlacement=\"auto\"\n onChange={(e) => this.updateField('client.currency', e.value)}\n components={{ Input, DropdownIndicator }}\n />\n \n
How do you want to bill {this.state.client.name}?
\n
\n
\n
How much do you charge per hour?
\n
e.currentTarget.querySelector('[contentEditable]').focus() }>\n {getSymbolFromCurrency( this.state.client ? this.state.client.currency : this.props.common.currentUser.currency )} \n this.keyPress(e)}\n onChange={(e) => this.updateField('client.hourly_rate', this.numericOnly(e.target.value))} />\n \n
How much do you charge per day?
\n
e.currentTarget.querySelector('[contentEditable]').focus() }>\n {getSymbolFromCurrency( this.state.client ? this.state.client.currency : this.props.common.currentUser.currency )} \n this.keyPress(e)}\n onChange={(e) => this.updateField('client.day_rate', this.numericOnly(e.target.value))} />\n \n
this.createClient(e, this.state.client.name)}>\n
\n Save & Continue \n \n \n {this.state.projects.length === 0 ? (\n
\n \n { client }\n Add your first project for { this.state.client.name }. \n
\n \n this.search(e, 'projects')}\n type=\"text\" placeholder={`Project name...`}/>\n this.setOverlay(e, 'client', 'back')}>\n {close}\n \n
\n \n ) : (\n
\n this.search(e, 'projects')}\n type=\"text\" placeholder={`Search projects for ${this.state.client.name}...`}/>\n this.setOverlay(e, 'client', 'back')}>\n {close}\n \n
\n )}\n
\n {(this.state.results ? this.state.results : this.state.projects).map((el, key) => {\n return (\n
this.setProject(e, el)}>\n {el.title}\n {el.billing_type_formatted} \n \n )\n })}\n {_.size(this.state.projects) > 0 && !this.state.results && (\n
this.setupNewProject(e)}>New Project...
\n {this.state.keyword.length > 1 ? (\n this.setupNewProject(e)}>Create a project called {this.state.keyword} { arrow }\n ) : (\n this.setOverlay(e, 'schedule', 'forward')}>This work isn't for a project {arrow}\n )}\n \n \n )}\n\n {this.state.overlay_history.includes('new_project') && (\n \n
\n this.updateField('project.title', e.target.value)} />\n this.setOverlay(e, 'project', 'back')}>\n {close}\n \n
\n
\n
\n this.updateField('project.description', e.target.value)}>\n
\n\n
\n\n
I want to bill this project by...
\n\n
\n this.updateField('project.billing_type', 'time_spent')}>Time Spent\n this.updateField('project.billing_type', 'fixed_price')}>Fixed Price\n
\n\n
\n\n {this.state.project.billing_type === 'time_spent' ? (\n
\n \n
How do you want to bill this project?
\n
\n
\n
How much do you charge per {this.state.project.project_rate_unit === 'hours' ? 'hour' : 'day'}?
\n
e.currentTarget.querySelector('[contentEditable]').focus() }>\n {getSymbolFromCurrency( this.state.client ? this.state.client.currency : this.props.common.currentUser.currency )} \n this.keyPress(e)}\n onChange={(e) => this.updateField('project.project_rate_value', this.numericOnly(e.target.value))} />\n \n \n ) : (\n
\n \n
What is your fixed price?
\n
e.currentTarget.querySelector('[contentEditable]').focus() }>\n {getSymbolFromCurrency( this.state.client ? this.state.client.currency : this.props.common.currentUser.currency )} \n this.keyPress(e)}\n onChange={(e) => this.updateField('project.amount', this.numericOnly(e.target.value))} />\n \n
How long do you think this will take?
\n
\n
e.currentTarget.querySelector('[contentEditable]').focus() }>\n this.keyPress(e, 'project.estimated_time_value')}\n onChange={(e) => this.updateField('project.estimated_time_value', this.numericOnly(e.target.value))} />\n \n
\n
\n
Do you have a deadline?
\n
\n
\n { this.state.project.billing_type === 'fixed_price' && (\n
\n
\n
\n { this.formatPrice(this.state.estimated, this.state.client ? this.state.client.currency : this.props.common.currentUser.currency) }/{this.state.project.estimated_time_unit.slice(0, -1)}
\n
\n
\n )}\n
this.createProject(e, this.state.client_id, this.state.project.title)}>\n
\n Save & Continue \n \n \n
\n
Schedule { this.state.total_time } { this.state.project && `for ${this.state.project.title}`} \n this.setOverlay(e, 'project', 'back')}>\n {close}\n \n \n
\n {this.state.dates.map((date, key) => {\n return (\n
\n )\n })}\n \n
\n \n
\n
\n { (this.state.price || (this.state.project && this.state.project.billing_type === 'time_spent')) && (\n
\n
{ this.formatPrice(this.state.total_price, \n (this.state.client.currency ? this.state.client.currency : this.props.common.currentUser.currency)\n ) }\n
x
${this.state.total_time} (Time)`\n :\n `${this.state.client.hourly_rate_formatted} (Hourly Rate)
x
${this.state.total_time} (Time)`\n }\n position={'top'} size={'large'}>
\n
\n )}\n
\n
\n
\n
{ this.saveWork(\n e,\n 'CREATE', //type\n this.props.activeMonth, // activeMonth\n this.state.dates, // dates\n false // work\n ) }}>Add to my Schedule\n \n
You can change the time for each day using the ↑ and ↓ arrow keys.
\n
\n
\n {this.state.project ? (\n
Work for {this.state.project.title} ({this.state.client.name}) \n ) : (\n Work for {this.state.client.name} \n )}\n this.props.closeOverlay(e)}>\n {close}\n \n \n
\n {this.state.dates.map((date) => {\n return (\n
\n )\n })}\n
\n
\n
\n
\n
\n { ((!this.state.project) || (this.state.project && this.state.project.billing_type === 'time_spent')) && (\n
\n
{ this.state.total_price ? this.formatPrice(this.state.total_price,\n (this.state.client.currency ? this.state.client.currency : this.props.common.currentUser.currency)\n ) : this.state.dates[0].price_formatted }\n
x
${ this.state.total_time ? this.state.total_time : this.state.dates[0].unit_value_formatted } (Time)`\n :\n `${this.state.client.hourly_rate_formatted} (Hourly Rate)
x
${ this.state.total_time ? this.state.total_time : this.state.dates[0].unit_value_formatted } (Time)`\n }\n position={'top'} size={'large'}>
\n
\n )}\n
\n
\n
\n {(this.state.dates[0].state !== 'invoiced' && this.state.dates[0].state !== 'paid') && (\n { this.saveWork(\n e,\n 'REMOVE', //type\n this.props.activeMonth, // activeMonth\n this.state.dates, // dates\n false // work\n ) }}>Delete\n )}\n { this.saveWork(\n e,\n 'UPDATE', //type\n this.props.activeMonth, // activeMonth\n this.state.dates, // dates\n false // work\n ) }}>\n {(this.state.dates[0].state !== 'invoiced' && this.state.dates[0].state !== 'paid') ? (\n Update Work \n ) : (\n <>\n \n \n Update Work \n \n )}\n
\n
\n
\n
\n
{dateFns.format(this.props.dates[0], 'ddd Do MMMM YYYY')} \n this.props.closeOverlay(e)}>\n {close}\n \n \n
\n\n { holiday }\n\n
You've marked {dateFns.format(this.props.dates[0], 'ddd Do MMMM YYYY')} as a holiday.
\n\n
{ this.saveWork(\n e,\n 'REMOVE', //type\n this.props.activeMonth, // activeMonth\n this.state.dates, // dates\n false // work\n ) }}>Delete Holiday\n\n \n
this.props.closeOverlay(e) }>\n\n ,\n document.querySelector('.overlay')\n )\n )\n\n\n }\n\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Overlay);\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"g\", {\n fill: \"orange\"\n}, /*#__PURE__*/React.createElement(\"rect\", {\n \"data-color\": \"color-2\",\n x: 7,\n width: 2,\n height: 2\n}), /*#__PURE__*/React.createElement(\"rect\", {\n \"data-color\": \"color-2\",\n x: 11.9,\n y: 2.1,\n transform: \"matrix(0.7069 0.7074 -0.7074 0.7069 5.9537 -8.2658)\",\n width: 2,\n height: 2\n}), /*#__PURE__*/React.createElement(\"rect\", {\n \"data-color\": \"color-2\",\n x: 14,\n y: 7,\n width: 2,\n height: 2\n}), /*#__PURE__*/React.createElement(\"rect\", {\n \"data-color\": \"color-2\",\n x: 11.9,\n y: 11.9,\n transform: \"matrix(-0.7074 -0.7069 0.7069 -0.7074 12.956 31.2634)\",\n width: 2,\n height: 2\n}), /*#__PURE__*/React.createElement(\"rect\", {\n \"data-color\": \"color-2\",\n x: 7,\n y: 14,\n width: 2,\n height: 2\n}), /*#__PURE__*/React.createElement(\"rect\", {\n \"data-color\": \"color-2\",\n x: 2.1,\n y: 11.9,\n transform: \"matrix(-0.7069 -0.7074 0.7074 -0.7069 -3.9536 24.261)\",\n width: 2,\n height: 2\n}), /*#__PURE__*/React.createElement(\"rect\", {\n \"data-color\": \"color-2\",\n y: 7,\n width: 2,\n height: 2\n}), /*#__PURE__*/React.createElement(\"rect\", {\n \"data-color\": \"color-2\",\n x: 2.1,\n y: 2.1,\n transform: \"matrix(0.7074 0.7069 -0.7069 0.7074 3.0488 -1.2635)\",\n width: 2,\n height: 2\n}), /*#__PURE__*/React.createElement(\"path\", {\n fill: \"orange\",\n d: \"M8,4C5.8,4,4,5.8,4,8s1.8,4,4,4s4-1.8,4-4S10.2,4,8,4z\"\n}));\n\nvar SvgHoliday = function SvgHoliday(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 16,\n height: 16,\n viewBox: \"0 0 16 16\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgHoliday, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/holiday.f7387432.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { connect } from 'react-redux';\nimport dateFns from 'date-fns';\nimport Overlay from './Overlay';\nimport Tooltip from '../Tooltip';\nimport _ from 'lodash';\nimport { TSelectableItemProps } from 'react-selectable-fast';\nimport {ReactComponent as HolidayIcon} from '../../images/holiday.svg';\nimport {ReactComponent as LockIcon} from '../../images/lock.svg';\n\nimport agent from '../../agent';\nimport {\n SCHEDULE_CREATE,\n SCHEDULE_UPDATE,\n SCHEDULE_REMOVE,\n MONTH_LOADED,\n OPEN_SCHEDULE_OVERLAY,\n CLOSE_SCHEDULE_OVERLAY\n} from '../../constants/actionTypes';\n\nconst mapStateToProps = (state, ownProps) => (\n {\n ...state,\n activeMonth: state.common.activeMonth,\n overlay: state.schedule.overlay\n }\n);\n\nconst mapDispatchToProps = dispatch => ({\n updateSchedule: (type, activeMonth, targetMonth, targetDay, work, dates, modal) => {\n\n if (type === 'CREATE' || type === 'HOLIDAY') {\n\n if (type === 'HOLIDAY') {\n\n work = {\n date: targetDay,\n holiday: true\n }\n\n }\n\n if (type === 'CREATE') {\n //dispatch({ type: CLIENT_IN_FOCUS, client_id: work.client_id })\n }\n\n dispatch({ type: SCHEDULE_CREATE, payload: agent.Schedule.create(work) })\n\n }\n\n if (type === 'UPDATE') {\n\n dispatch({ type: SCHEDULE_UPDATE, payload: agent.Schedule.update(work) })\n\n }\n\n if (type === 'REMOVE') {\n\n dispatch({ type: SCHEDULE_REMOVE, payload: agent.Schedule.remove(work.id) })\n\n }\n\n if ( dateFns.isSameDay(targetMonth, activeMonth) ) {\n\n setTimeout(function(){\n let month_name = dateFns.format(targetMonth, 'MMMM').toLowerCase()\n let year = dateFns.format(targetMonth, 'YYYY').toLowerCase()\n dispatch({ type: MONTH_LOADED, month: targetMonth, month_string: month_name + '-' + year, payload: agent.Month.show(month_name, year) })\n }, 500);\n\n }\n\n },\n openOverlay: () => {\n dispatch({ type: OPEN_SCHEDULE_OVERLAY });\n },\n closeOverlay: () => {\n dispatch({ type: CLOSE_SCHEDULE_OVERLAY });\n }\n});\n\nlet dragItem;\nlet dragItemFrontend;\n\nclass ScheduleItem extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n booked: false,\n currency: this.props.common.currentUser.currency,\n overlay: false\n }\n\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n\n if (this.props.classNames !== nextProps.classNames || this.state.overlay !== nextState.overlay || this.props.selectableRef !== nextProps.selectableRef || this.props.isSelecting !== nextProps.isSelecting || this.props.isSelected !== nextProps.isSelected) {\n return true;\n }\n\n if( !(_.isEqual(_.sortBy(this.props.deleteKeys), _.sortBy(nextProps.deleteKeys))) ) {\n\n if( _.size(this.props.work) <= 0 ) {\n return false;\n } else {\n return true;\n }\n\n }\n\n if( !(_.isEqual(_.sortBy(this.props.work), _.sortBy(nextProps.work))) ) {\n return true;\n }\n\n return false;\n\n }\n\n openOverlay(e, overlay, work = false) {\n\n e.preventDefault();\n e.stopPropagation();\n\n if ( e.shiftKey ) {\n\n if ( e.currentTarget.getAttribute('data-work') ) {\n\n this.props.deleteWork( e.currentTarget.getAttribute('data-work') )\n\n } else {\n\n this.props.addWork( e.currentTarget.getAttribute('data-day') );\n\n }\n\n } else {\n\n this.props.openOverlay()\n\n this.setState({\n overlay: overlay,\n work: work\n });\n\n }\n\n }\n\n onMouseEnter = (e) => {\n e.stopPropagation();\n e.currentTarget.classList.add('hover');\n }\n\n onMouseLeave = (e) => {\n e.stopPropagation();\n e.currentTarget.classList.remove('hover');\n }\n\n onDragEnter = (e) => {\n e.stopPropagation();\n e.currentTarget.classList.add('drop');\n }\n\n onDragLeave = (e) => {\n e.stopPropagation();\n e.currentTarget.classList.remove('drop');\n }\n\n onDragOver = (e) => {\n e.preventDefault();\n }\n\n handleDrop = (e) => {\n\n let work = {\n ...dragItem.props.work[ dragItemFrontend.getAttribute('data-index') ],\n date: e.currentTarget.getAttribute('data-day')\n }\n\n this.props.updateSchedule('UPDATE', this.props.activeMonth, this.props.activeMonth, false, work, false)\n\n e.currentTarget.classList.remove('drop');\n\n document.querySelector('.schedule__calendar').classList.remove('dragging');\n\n dragItemFrontend.classList.remove('dragging');\n\n dragItem = false\n dragItemFrontend = false\n\n }\n\n onDragEnd = (e) => {\n\n e.currentTarget.style.opacity = '1';\n\n }\n\n onDragStart = (e) => {\n\n e.currentTarget.parentNode.parentNode.classList.add('hover');\n\n dragItem = this;\n dragItemFrontend = e.currentTarget;\n\n e.stopPropagation();\n\n document.querySelector('.schedule__calendar').classList.add('dragging');\n\n setTimeout(function(){\n dragItemFrontend.classList.add('dragging');\n });\n\n }\n\n closeOverlay(e) {\n\n e.stopPropagation();\n\n this.props.closeOverlay()\n\n this.setState({\n overlay: false\n });\n\n }\n\n handleWorkClick = (e) => {\n\n e.stopPropagation();\n\n if ( e.shiftKey || e.currentTarget.classList.contains('checkbox') ) {\n\n this.props.deleteWork( e.currentTarget.getAttribute('data-work') )\n\n }\n\n }\n\n handleDateEnter = (e) => {\n\n e.currentTarget.parentNode.querySelector('.day__work div:last-child').classList.add('hover');\n\n }\n\n handleDateLeave = (e) => {\n\n e.currentTarget.parentNode.querySelector('.day__work div:last-child').classList.remove('hover');\n\n }\n\n render() {\n\n const { selectableRef, isSelecting } = this.props\n\n let content;\n\n const add = \n \n \n Book {dateFns.format(this.props.day, 'ddd Do MMMM YYYY')} { this.props.blackout && this.props.blackout.name ? `(${this.props.blackout.name})` : '' } \n { this.props.blackout && this.props.blackout.name ? this.props.blackout.name : '' } \n \n \n ;\n\n const add_inline = \n \n {this.props.hours} free \n \n ;\n\n const clients = this.props.work.map((work, index) =>\n \n this.openOverlay(e, work.holiday ? 'holiday' : 'work', work)}\n onDragStart={this.onDragStart}\n onDragEnd={this.onDragEnd}\n onMouseEnter={this.onMouseEnter}\n onMouseLeave={this.onMouseLeave}\n className={ _.includes(this.props.deleteKeys, work.id.toString() ) ? 'delete' : '' }>\n {work.holiday ? (\n \n \n Holiday \n \n \n ) :\n this.props.clients.clients.filter(function (el) {\n return el.id === work.client\n }).map((el) => {\n\n return (\n \n \n \n \n \n { work.project_title ? (\n {work.project_title} ({el.name}) \n ) : (\n {el.name} \n )}\n { (work.state === 'invoiced' || work.state === 'paid') && (\n \n \n ) }\n \n {(work.unit === 'hours' || work.note) && ({work.unit_value_formatted_short}{work.note && ` – ${work.note}`} )}\n \n \n );\n })\n }\n \n \n );\n\n if (clients.length > 0) {\n content = [clients,add_inline];\n } else {\n content = add;\n }\n\n return (\n \n this.openOverlay(e, 'client')}\n onDragEnter={this.onDragEnter}\n onDragLeave={this.onDragLeave}\n onDragOver={this.onDragOver}\n onDrop={this.handleDrop}\n data-day={dateFns.format(this.props.day, 'YYYY-MM-DD')}\n data-select={isSelecting}>\n \n {dateFns.format(this.props.day, 'DD')} \n {dateFns.format(this.props.day, 'ddd')} \n \n \n {content}\n
\n \n {this.state.overlay && (\n \n )}\n \n )\n\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ScheduleItem);\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { connect } from 'react-redux';\nimport dateFns from 'date-fns';\nimport ScheduleMonth from './ScheduleMonth';\nimport Overlay from './Overlay';\nimport { InView } from 'react-intersection-observer';\nimport 'intersection-observer';\nimport { history } from '../../configureStore';\nimport _ from 'lodash';\nimport { SelectableGroup } from 'react-selectable-fast';\n\nimport agent from '../../agent';\nimport {\n SCHEDULE_REMOVE,\n SCHEDULE_FORWARD,\n SCHEDULE_BACK,\n CHANGE_NEXT_MONTH,\n CHANGE_PREV_MONTH,\n MONTH_LOADED,\n OPEN_SCHEDULE_OVERLAY,\n CLOSE_SCHEDULE_OVERLAY\n} from '../../constants/actionTypes';\n\nconst mapStateToProps = state => (\n {\n ...state,\n days: state.schedule.days,\n months: state.months,\n clients: state.clients\n }\n);\n\nconst mapDispatchToProps = dispatch => ({\n onMove: (month, payload) => {\n dispatch({ type: CHANGE_NEXT_MONTH, month: month })\n dispatch({ type: SCHEDULE_FORWARD, month: month, payload: payload })\n },\n onHistory: (month, payload) => {\n dispatch({ type: CHANGE_PREV_MONTH, month: month })\n dispatch({ type: SCHEDULE_BACK, month: month, payload: payload })\n },\n updateSchedule: (type, activeMonth, dates) => {\n\n if (type === 'REMOVE') {\n\n var schedule = [];\n\n dates.forEach(function(item, i){\n schedule.push({id:parseInt(item)})\n })\n\n dispatch({\n type: SCHEDULE_REMOVE,\n payload: agent.Schedule.remove_multiple(schedule).then((res) => {\n if(!res.body.errors) {\n let month_name = dateFns.format(activeMonth, 'MMMM').toLowerCase()\n let year = dateFns.format(activeMonth, 'YYYY').toLowerCase()\n dispatch({ type: MONTH_LOADED, month: activeMonth, month_string: month_name + '-' + year, payload: agent.Month.show(month_name, year) })\n }\n return res;\n })\n })\n\n // cleanup\n schedule = null;\n\n }\n\n },\n openOverlay: () => {\n dispatch({ type: OPEN_SCHEDULE_OVERLAY });\n },\n closeOverlay: () => {\n dispatch({ type: CLOSE_SCHEDULE_OVERLAY });\n }\n});\n\nlet isScrolling;\nlet inViewMonth;\nclass ScheduleList extends React.Component {\n\n constructor(props){\n super(props);\n\n this.todayRef = React.createRef();\n this.scheduleRef = React.createRef();\n\n this.state = {\n height: 0,\n position: 128,\n scrollUp: false,\n initialLoad: true,\n scrolling: false,\n activeMonth: props.activeMonth,\n multipleDates: [],\n shift: false,\n selectedKeys: [],\n deleteKeys: [],\n selectorEnabled: true,\n overlay: false\n }\n\n this.handleSelection = this.handleSelection.bind(this);\n\n this.handleScroll = this.handleScroll.bind(this);\n this.trigger = 'initial'; // the trigger type helps us know whether to scroll the schedule or not\n\n this.addWork = this.addWork.bind(this);\n this.deleteWork = this.deleteWork.bind(this);\n\n this.handleDelete = this.handleDelete.bind(this);\n this.handleCancel = this.handleCancel.bind(this);\n\n this.backListener2 = history.listen(location => {\n if(location.pathname.indexOf('/month/') >= 0) {\n this.trigger = (location.state ? location.state.trigger : 'unknown');\n }\n })\n\n }\n\n componentWillUnmount() {\n this.backListener2();\n document.removeEventListener('keydown', this.handleShiftDown.bind(this));\n document.removeEventListener('keyup', this.handleShiftUp.bind(this));\n }\n\n componentDidMount() {\n\n let height = ReactDOM.findDOMNode(this).scrollHeight;\n inViewMonth = this.props.currentMonth;\n\n // ReactDOM.findDOMNode(this).scrollTop = 128;\n // document.querySelector('.schedule__calendar').scrollTop = 128;\n\n if (dateFns.isSameDay(this.props.activeMonth, this.props.currentMonth)) {\n\n if (this.todayRef.current) {\n\n this.todayRef.current.scrollIntoView()\n\n if( dateFns.isFirstDayOfMonth(new Date()) ) {\n\n if( dateFns.isMonday(new Date()) ) {\n this.scheduleRef.current.scrollTop -= 104;\n } else {\n this.scheduleRef.current.scrollTop -= 48;\n }\n\n } else {\n this.scheduleRef.current.scrollTop -= 96;\n }\n\n }\n\n } else {\n\n if(this.scheduleRef.current) {\n this.scheduleRef.current.scrollTop = 48;\n }\n\n\n }\n\n this.setState((state, props) => ({\n height: height,\n initialLoad: false\n }));\n\n document.addEventListener('keydown', this.handleShiftDown.bind(this));\n document.addEventListener('keyup', this.handleShiftUp.bind(this));\n\n this.setState((state, props) => ({\n selectorEnabled: true\n }));\n\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n\n if (nextProps.days !== this.props.days || nextProps.activeMonth !== this.props.activeMonth || nextState.multipleDates !== this.state.multipleDates || nextState.shift !== this.state.shift || nextState.selectedKeys !== this.state.selectedKeys || nextState.deleteKeys !== this.state.deleteKeys || nextProps.clients !== this.props.clients || nextState.overlay !== this.state.overlay) {\n return true;\n } else {\n return false;\n }\n\n }\n\n componentDidUpdate(prevProps, prevState) {\n\n if (window.outerWidth < 1024) {\n return false;\n }\n\n if ( this.props.trigger === 'POP' ) {\n\n if(this.scheduleRef.current) {\n this.scheduleRef.current.scrollTop = 48;\n }\n\n } else {\n\n if ( this.trigger === 'swipe' ) {\n\n // do nothing\n\n } else if ( this.trigger === 'history' ) {\n\n document.querySelectorAll('.schedule__calendar__month')[1].scrollIntoView();\n\n if(this.scheduleRef.current) {\n this.scheduleRef.current.scrollTop -= 48;\n }\n\n } else if ( prevProps.activeMonth !== this.props.activeMonth && this.trigger === 'swipe' ) {\n\n // do nothing\n\n } else if ( prevProps.activeMonth !== this.props.activeMonth && this.trigger === 'click' ) {\n\n if (dateFns.isSameDay(this.props.activeMonth, this.props.currentMonth)) {\n\n if (this.todayRef.current) {\n\n this.todayRef.current.scrollIntoView()\n\n if( dateFns.isFirstDayOfMonth(new Date()) ) {\n\n if( dateFns.isMonday(new Date()) ) {\n this.scheduleRef.current.scrollTop -= 104;\n } else {\n this.scheduleRef.current.scrollTop -= 48;\n }\n\n } else {\n this.scheduleRef.current.scrollTop -= 96;\n }\n\n }\n\n } else {\n\n if(this.scheduleRef.current) {\n this.scheduleRef.current.scrollTop = 48;\n }\n\n }\n\n } else {\n\n if (this.todayRef.current) {\n\n if (dateFns.isSameDay(this.props.activeMonth, this.props.currentMonth)) {\n\n this.todayRef.current.scrollIntoView()\n\n if( dateFns.isFirstDayOfMonth(new Date()) ) {\n\n if( dateFns.isMonday(new Date()) ) {\n this.scheduleRef.current.scrollTop -= 104;\n } else {\n this.scheduleRef.current.scrollTop -= 48;\n }\n\n } else {\n this.scheduleRef.current.scrollTop -= 96;\n }\n\n\n } else {\n\n if(this.scheduleRef.current) {\n this.scheduleRef.current.scrollTop = 48;\n }\n\n }\n\n } else {\n\n if (this.scheduleRef.current) {\n this.scheduleRef.current.scrollTop = 48;\n }\n\n }\n\n }\n\n }\n\n }\n\n handleSelection (selectedKeys) {\n\n if (_.size(selectedKeys) > 0 && !this.state.shift) {\n\n this.props.openOverlay()\n\n this.setState({\n overlay: 'client'\n });\n\n }\n\n \tthis.setState({\n selectedKeys: selectedKeys.map(a => a.props.selectableKey)\n });\n\n }\n\n goBack(date) {\n\n if (this.trigger !== 'click') {\n\n var that = this;\n\n setTimeout(function(){\n\n that.trigger = 'history';\n\n if (document.querySelector('.schedule__calendar')) {\n that.position = document.querySelector('.schedule__calendar').scrollTop;\n }\n\n let from = dateFns.format(date, 'DD-MM-YYYY');\n let to = dateFns.format(dateFns.endOfMonth(date), 'DD-MM-YYYY');\n\n that.props.onHistory(\n date,\n agent.Schedule.all(from,to)\n );\n\n }, 1000);\n\n }\n\n }\n\n goForward(date) {\n\n if (this.trigger !== 'click') {\n\n var that = this;\n\n setTimeout(function(){\n\n that.trigger = 'swipe';\n\n let from = dateFns.format(date, 'DD-MM-YYYY');\n let to = dateFns.format(dateFns.endOfMonth(date), 'DD-MM-YYYY');\n\n that.props.onMove(\n date,\n agent.Schedule.all(from,to)\n );\n\n }, 1000);\n\n }\n\n }\n\n\n handleScroll(event) {\n\n this.trigger = 'swipe';\n\n window.clearTimeout( isScrolling );\n isScrolling = setTimeout(() => {\n\n let sticky = document.querySelector('.sticky .month');\n\n if (sticky) {\n\n inViewMonth = dateFns.startOfMonth(dateFns.parse(sticky.getAttribute('data-month')));\n\n if (window.location.pathname === '/' || window.location.pathname.indexOf('month') === 1) {\n\n let month = dateFns.format(inViewMonth, 'MMMM');\n let year = dateFns.format(inViewMonth, 'YYYY');\n let url = '/month/' + month.toLowerCase() + '/' + year;\n\n if (this.props.history.location.pathname !== url) {\n history.push('/month/' + month.toLowerCase() + '/' + year, {\n type: 'scroll',\n trigger: 'swipe',\n position: document.querySelector('.schedule__calendar').scrollTop\n } );\n }\n\n }\n\n }\n\n if (!inViewMonth && !this.props.activeMonth) {\n inViewMonth = this.props.currentMonth;\n }\n\n }, 100);\n\n }\n\n addWork(date) {\n\n this.setState((state, props) => ({\n selectedKeys: _.uniq([...state.selectedKeys, date]).sort()\n }));\n\n }\n\n deleteWork(date) {\n\n if (_.indexOf(this.state.deleteKeys, date) >= 0) {\n\n this.setState((state, props) => ({\n deleteKeys: _.remove([...state.deleteKeys], function(person){\n return person !== date\n })\n }))\n\n } else {\n\n this.setState((state, props) => ({\n deleteKeys: _.uniq([...state.deleteKeys, date.toString()])\n }))\n\n }\n\n }\n\n handleShiftDown(event) {\n\n if(event.keyCode === 16) {\n\n this.setState((state, props) => ({\n shift: true\n }));\n\n }\n\n }\n\n handleShiftUp(event) {\n\n if(event.keyCode === 16 && !this.state.overlay) {\n\n if (_.size(this.state.selectedKeys) > 0) {\n this.props.openOverlay()\n }\n\n this.setState((state, props) => ({\n shift: false,\n overlay: _.size(this.state.selectedKeys) > 0 ? 'client' : false\n }));\n\n }\n\n }\n\n\n handleDelete() {\n\n this.props.updateSchedule('REMOVE', this.props.activeMonth, this.state.deleteKeys);\n\n this.setState((state, props) => ({\n deleteKeys: []\n }))\n\n }\n\n handleCancel() {\n\n document.querySelectorAll('.delete').forEach(function(item, i){\n item.classList.remove('delete')\n })\n\n this.setState((state, props) => ({\n deleteKeys: []\n }))\n\n }\n\n closeOverlay(e) {\n\n document.querySelectorAll('.shift').forEach(function(item, i){\n item.classList.remove('shift')\n })\n\n e.stopPropagation();\n\n this.props.closeOverlay()\n\n this.setState({\n overlay: false,\n selectedKeys: []\n });\n\n }\n\n render() {\n\n let dates = [];\n\n if (!this.props.days || (_.size(this.props.clients) === 0)) {\n return (\n \n );\n }\n\n return (\n \n \n { if(inView && window.outerWidth >= 1024 && this.trigger !== 'initial' ) { this.goBack(this.props.prevMonth) } } }>\n \n \n \n \n {this.props.days.map((date, index) => {\n\n dates.push(date);\n\n if (dateFns.isLastDayOfMonth(date.day)) {\n dates = [];\n }\n\n if (dateFns.isFirstDayOfMonth(date.day)) {\n return (\n
\n { if(inView) { this.goForward(this.props.nextMonth) } } }>\n \n \n \n\n { (_.size(this.state.deleteKeys) >= 1) &&\n (\n ReactDOM.createPortal(\n \n \n Delete \n \n \n Cancel \n \n ,\n document.querySelector('span.quick__note__inline span.actions')\n )\n )\n }\n {(this.props.overlay || this.state.overlay) && (\n \n )}\n \n )\n\n }\n\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ScheduleList);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport ReactDOM from 'react-dom';\nimport dateFns from 'date-fns';\n\nimport agent from '../../agent';\nimport {\n SCHEDULE_SUMMARY,\n DESTROY_SCHEDULE_SUMMARY\n} from '../../constants/actionTypes';\n\nconst mapStateToProps = state => (\n {\n ...state,\n summary: state.schedule.summary\n }\n);\n\nconst mapDispatchToProps = dispatch => ({\n getSummary: (from,to) => {\n dispatch({\n type: SCHEDULE_SUMMARY,\n payload: agent.Schedule.summary(from,to).then((res) => {\n if(!res.body.errors) {\n //dispatch({ type: MONTH_LOADED, month: activeMonth, month_string: month_name + '-' + year, payload: agent.Month.show(month_name, year) })\n }\n return res;\n })\n })\n },\n destroySummary: () => {\n dispatch({ type: DESTROY_SCHEDULE_SUMMARY })\n }\n});\n\nclass ScheduleWeek extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n displayTooltip: false\n }\n this.hideTooltip = this.hideTooltip.bind(this)\n this.showTooltip = this.showTooltip.bind(this)\n }\n\n hideTooltip (event) {\n\n this.props.destroySummary();\n\n this.setState({\n displayTooltip: false,\n top: null\n })\n\n }\n\n showTooltip (event) {\n\n this.props.getSummary(\n dateFns.format(this.props.date, 'DD-MM-YYYY'),\n dateFns.format(dateFns.endOfWeek(this.props.date, {weekStartsOn: 1}), 'DD-MM-YYYY')\n );\n\n var bounds = event.currentTarget.getBoundingClientRect();\n var y = bounds.top + bounds.height + 8;\n\n this.setState({\n displayTooltip: true,\n top: y\n })\n\n }\n\n render() {\n let message = this.props.message\n let position = this.props.position\n let size = this.props.size\n\n return (\n \n
\n
{dateFns.format(this.props.date, 'DD')}–{dateFns.format(dateFns.endOfWeek(this.props.date, {weekStartsOn: 1}), 'DD MMMM')} \n {this.state.displayTooltip &&\n (\n ReactDOM.createPortal(\n
\n {this.props.summary ? (\n <>\n {this.props.summary.clients.map((client, index) => {\n return(\n
\n
{client.name}
\n
{client.total_time_formatted} ({client.total_price_formatted})
\n
\n )\n })}\n {this.props.summary.total_time_formatted ? (\n
\n
Total
\n
{this.props.summary.total_time_formatted} ({this.props.summary.total_price_formatted})
\n
\n ) : (\n
\n )}\n \n ) : (\n
\n )}\n
,\n document.querySelector('main')\n )\n )\n }\n
\n Week Summary \n \n \n
\n \n
\n \n
{dateFns.format(this.props.month, 'MMMM YYYY')} Schedule \n
\n \n \n \n Click on a day to schedule some work \n \n \n
\n {this.props.dates.map((date, index) => {\n let day = date.day;\n let top = dateFns.isSameDay(day, this.props.schedule.activeMonth);\n let work = [];\n let hours_per_day = parseFloat(this.props.common.currentUser.hours_per_day);\n let hours = hours_per_day;\n\n if ( this.props.schedule.work ) {\n\n // calculate the work booked for this day\n work = _.values(_.pickBy(this.props.schedule.work,function(value, key){\n return dateFns.isSameDay(day, dateFns.parse(value.date))\n }));\n\n // calculate how many hours left in the day (7 available in total)\n if (!_.isEmpty(work)) {\n hours = _.sumBy(work, function(o) {\n if (o.unit === 'hours') {\n return parseFloat(o.unit_value);\n } else {\n return 24;\n }\n })\n if (hours > 0) {\n hours = hours_per_day - hours\n }\n if (hours < 0) {\n hours = 0\n }\n }\n\n }\n\n if ( this.props.schedule.blackouts ) {\n\n blackout = this.props.schedule.blackouts.find(blackout => {\n return dateFns.isSameDay(day, dateFns.parse(blackout.date))\n })\n\n }\n\n if ( work.length >= 1 ) {\n\n booked = true;\n consecutive_client = false;\n\n if ( work.length === 1 && work[0].client === previous && work[0].project_id === previous_project && previous_length === 1 ) {\n consecutive_client = true;\n }\n\n previous = work[0].client;\n previous_project = work[0].project_id;\n holiday = work[0].holiday;\n previous_length = work.length;\n\n\n } else {\n\n booked = false;\n consecutive_client = false;\n previous = '';\n previous_project = undefined;\n previous_length = 0;\n holiday = false;\n\n }\n\n let selected = this.props.selectedKeys.indexOf(dateFns.format(date.day, 'YYYY-MM-DD')) > -1 || this.props.multipleDates.indexOf(dateFns.format(date.day, 'YYYY-MM-DD')) > -1;\n let first = this.props.selectedKeys.indexOf(dateFns.format(date.day, 'YYYY-MM-DD')) === 0;\n let last = _.size(this.props.selectedKeys) > 0 ? this.props.selectedKeys.indexOf(dateFns.format(date.day, 'YYYY-MM-DD')) === this.props.selectedKeys.length-1 : false;\n let after = dateFns.format(date.day, 'YYYY-MM-DD') === dateFns.format(dateFns.addDays(dateFns.parse(this.props.selectedKeys[this.props.selectedKeys.length-1]), 1), 'YYYY-MM-DD');\n\n return (\n <>\n {dateFns.isMonday(date.day) &&\n
\n }\n = 1,\n weekStart: dateFns.isMonday(day),\n weekFinish: dateFns.isSunday(day),\n booked: _.size(work) >= 1,\n holiday: holiday,\n consecutive_client: (hours === 0 && ((consecutive_client && !dateFns.isFirstDayOfMonth(day)) || selected)),\n shift: selected,\n first: first,\n last: last,\n after: after,\n monthStart: dateFns.isFirstDayOfMonth(day),\n monthEnd: dateFns.isLastDayOfMonth(day),\n hoursFree: hours >= 1,\n invoiced: !_.isEmpty(work[0]) && (work[0].state === 'invoiced'),\n paid: !_.isEmpty(work[0]) && (work[0].state === 'paid')\n })\n } />\n \n )\n\n })}\n
\n \n )\n\n }\n\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ScheduleMonth);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport dateFns from 'date-fns';\nimport _ from 'lodash';\nimport Tooltip from '../Tooltip';\nimport { Info } from '../Info';\n\nconst mapStateToProps = state => (\n {\n token: state.common.token,\n schedule: state.schedule,\n months: state.months,\n activeMonth: state.common.activeMonth,\n currentMonth: state.common.currentMonth,\n nextMonth: state.common.nextMonth,\n prevMonth: state.common.prevMonth,\n currentUser: state.common.currentUser,\n locale: state.common.locale\n }\n);\n\nconst mapDispatchToProps = dispatch => ({\n});\n\nclass Month extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n notifications: true,\n tab: 'clients'\n }\n\n }\n\n clearNotifications(e) {\n\n e.stopPropagation();\n\n this.setState(prevState => ({\n notifications: !prevState.notifications\n }));\n\n }\n\n switchTabs(e, tab) {\n\n e.stopPropagation();\n\n this.setState({\n ...this.state, // needed?\n tab: tab\n });\n\n }\n\n render() {\n\n if (!this.props.nextMonth || !this.props.months.data) {\n return (\n
\n );\n }\n\n let in_past = dateFns.isPast(dateFns.endOfMonth(this.props.months.activeMonth));\n let productivity = 0;\n let days_empty = 0;\n let revenue_percentage = 0;\n let revenue_missed_percentage = 0;\n let revenue_target_string;\n let total_earning_potential_string;\n let monthly_revenue_target_string;\n let chart = [];\n let standard_day_rate_string = '£' + (this.props.currentUser.standard_day_rate).toLocaleString(this.props.locale, {style: \"decimal\", minimumFractionDigits: 1});\n\n if (this.props.months.data) {\n\n productivity = this.props.months.data.productivity;\n total_earning_potential_string = this.props.months.data.total_earning_potential_string;\n revenue_percentage = this.props.months.data.revenue_percentage;\n revenue_missed_percentage = this.props.months.data.revenue_missed_percentage;\n monthly_revenue_target_string = this.props.months.data.monthly_revenue_target_string;\n revenue_target_string = this.props.months.data.revenue_target_string;\n\n if ( productivity >= 100 ) {\n\n chart['empty'] = '0%';\n chart['available'] = '0%';\n\n } else {\n\n days_empty = this.props.months.data.unworked_days\n\n chart['empty'] = (days_empty) ? _.round((100 * days_empty) / this.props.months.data.maximum_hours) + '%' : '0%';\n chart['available'] = (this.props.months.data.available_hours) ? _.round((100 * this.props.months.data.available_hours) / this.props.months.data.maximum_hours) + '%' : '0%';\n\n }\n\n chart['booked'] = productivity + '%';\n chart['holiday'] = (this.props.months.data.holidays) ? _.round((100 * this.props.months.data.holidays) / this.props.months.data.maximum_hours) + '%' : '0%';\n\n if (revenue_percentage > 100 ) {\n\n chart['revenue'] = _.round(100/revenue_percentage*100);\n chart['revenue_potential'] = 0;\n chart['revenue_missed'] = 0;\n chart['revenue_exceeded'] = 100 - chart['revenue'];\n\n } else if (revenue_percentage === 100 ) {\n\n chart['revenue'] = 100;\n chart['revenue_potential'] = 0;\n chart['revenue_missed'] = 0;\n chart['revenue_exceeded'] = 0;\n\n } else {\n\n chart['revenue'] = revenue_percentage;\n chart['revenue_missed'] = revenue_missed_percentage;\n chart['revenue_potential'] = 100 - chart['revenue'] - chart['revenue_missed'];\n chart['revenue_exceeded'] = 0;\n\n }\n\n }\n\n const header =\n \n {dateFns.format(this.props.activeMonth, 'MMMM ')}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n return (\n \n\n { header }\n\n \n\n \n\n
\n Revenue \n { (this.props.months.data) ? this.props.months.data.amount_revenue_string : 0 } \n \n\n
\n
\n
\n
\n
\n
\n
\n
\n\n {this.props.months.data.monthly_revenue_target ?\n
{revenue_percentage}% of Monthly Revenue Target \n :\n
{revenue_percentage}% of Revenue Potential \n }\n
\n\n
\n Productivity \n {productivity}% \n \n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n {in_past &&\n
You worked {this.props.months.data.dates_booked_count_string} \n }\n {!in_past && !_.isEmpty(this.props.months.data.available_time) &&\n
You have {this.props.months.data.available_time} free \n }\n\n
\n\n
\n\n {this.state.tab === 'projects' ? (\n\n this.props.months.data.projects.map(function(project, i){\n\n let next_work_at = project.next_work_at ? `Next working on
${project.next_work_at}` : 'No future work scheduled';\n\n return (\n
\n
\n \n { project.name } \n \n ({project.client_name}) \n \n { project.amount_worked } ({ project.revenue }{ (project.revenue != project.revenue_in_base_currency) ? `/${project.revenue_in_base_currency}` : '' }) \n
\n
\n )\n\n })\n\n ) : (\n\n this.props.months.data.clients.map(function(client, i){\n\n let next_work_at = client.next_work_at ? `Next working on
${client.next_work_at}` : 'No future work scheduled';\n\n return (\n
\n
\n \n { client.name } \n \n \n { client.amount_worked } ({ client.revenue }{ (client.revenue != client.revenue_in_base_currency) ? `/${client.revenue_in_base_currency}` : '' }) \n
\n
\n )\n\n })\n\n )}\n\n {this.props.months.data.holidays === -1 &&\n
\n \n
\n Holiday \n {this.props.months.data.holidays} Day{this.props.months.data.holidays > 1 && 's' } \n
\n
\n }\n\n
\n\n { (productivity >= 100) &&\n
\n
\n
\n
You're overbooked! \n
\n \n
\n
\n
If you can, we recommend moving some work to next month to make sure you're not overbooked.
\n
\n
\n }\n\n { (productivity > 80 && productivity < 100) &&\n
\n
\n
\n
On the limit \n
\n \n
\n
\n
Be careful taking on anymore big projects this month, you're close to overbooking yourself for {dateFns.format(this.props.activeMonth, 'MMMM YYYY')}.
\n
\n
\n }\n\n { (this.props.months.data.revenue_percentage < 60 && this.props.months.data.revenue_percentage > 1) &&\n
\n
\n
\n
Good start {this.props.currentUser.first_name}! \n
\n \n
\n
\n
You need to earn another {this.props.months.data.target_remaining_formatted} ({this.props.months.data.target_remaining_days_formatted} of work) to meet your monthly revenue target of {this.props.currentUser.monthly_revenue_target_formatted}.
\n
\n
\n }\n\n { (this.props.months.data.revenue_percentage > 60 && this.props.months.data.revenue_percentage < 100 && this.state.notifications) &&\n
\n
\n
\n
Nearly there {this.props.currentUser.first_name}! \n
\n \n
\n
\n
You need to earn another {this.props.months.data.target_remaining_formatted} ({this.props.months.data.target_remaining_days_formatted} of work) to meet your monthly revenue target of {this.props.currentUser.monthly_revenue_target_formatted}.
\n
\n
\n }\n\n { (this.props.months.data.revenue_percentage >= 100 && this.state.notifications) &&\n
\n
\n
\n
Awesome job {this.props.currentUser.first_name}! \n
\n \n
\n
\n { in_past ?\n
You smashed your monthly revenue target for {dateFns.format(this.props.activeMonth, 'MMMM YYYY')} by {this.props.months.data.revenue_exceeded_string}!
\n :\n
You're on target to smash your monthly revenue target for {dateFns.format(this.props.activeMonth, 'MMMM YYYY')} by {this.props.months.data.revenue_exceeded_string}
\n }\n
\n
\n }\n\n
\n\n \n )\n\n }\n\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Month);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport dateFns from 'date-fns';\nimport { Link } from 'react-router-dom';\nimport ScheduleList from './ScheduleList';\nimport Month from './Month';\nimport { history } from '../../configureStore';\n\nimport agent from '../../agent';\nimport {\n SCHEDULE_LOADED,\n SCHEDULE_UNLOADED,\n MONTH_LOADED,\n SWITCH_MONTH,\n CHANGE_PREV_MONTH,\n CHANGE_NEXT_MONTH,\n LOAD_DAYS\n} from '../../constants/actionTypes';\n\nconst mapStateToProps = state => (\n {\n ...state.schedule,\n token: state.common.token,\n activeMonth: state.common.activeMonth,\n nextMonth: state.common.nextMonth,\n prevMonth: state.common.prevMonth,\n currentMonth: state.common.currentMonth,\n clients: state.clients,\n projects: state.projects\n }\n);\n\nconst mapDispatchToProps = dispatch => ({\n onLoad: (month,payload) => {\n dispatch({ type: CHANGE_PREV_MONTH, month: month })\n dispatch({ type: CHANGE_NEXT_MONTH, month: dateFns.addMonths(month,1) })\n dispatch({ type: LOAD_DAYS, month: month })\n dispatch({ type: SCHEDULE_LOADED, payload: payload })\n let month_name = dateFns.format(month, 'MMMM').toLowerCase()\n let year = dateFns.format(month, 'YYYY').toLowerCase()\n dispatch({ type: MONTH_LOADED, month: month, month_string: month_name + '-' + year, payload: agent.Month.show(month_name, year) })\n },\n onUnload: () =>\n dispatch({ type: SCHEDULE_UNLOADED }),\n loadDays: (month) => {\n dispatch({ type: LOAD_DAYS, month: month })\n dispatch({ type: CHANGE_PREV_MONTH, month: month })\n dispatch({ type: CHANGE_NEXT_MONTH, month: dateFns.addMonths(month,1) })\n },\n switchMonth: (month) => {\n dispatch({ type: SWITCH_MONTH, month: month })\n },\n loadMonth: (month) => {\n let month_name = dateFns.format(month, 'MMMM').toLowerCase()\n let year = dateFns.format(month, 'YYYY').toLowerCase()\n dispatch({ type: MONTH_LOADED, month: month, month_string: month_name + '-' + year, payload: agent.Month.show(month_name, year) })\n },\n loadSchedule: (payload) => {\n dispatch({ type: SCHEDULE_LOADED, payload: payload })\n }\n});\n\nconst Title = (props) => {\n\n let title = 'Schedule';\n\n return (\n \n {title} \n \n Go to Today \n \n \n );\n}\n\nclass Schedule extends React.Component {\n\n constructor(props){\n super(props);\n\n this.trigger = 'PUSH';\n\n }\n\n componentWillMount() {\n\n var months = {\n 'january' : '01',\n 'february' : '02',\n 'march' : '03',\n 'april' : '04',\n 'may' : '05',\n 'june' : '06',\n 'july' : '07',\n 'august' : '08',\n 'september' : '09',\n 'october' : '10',\n 'november' : '11',\n 'december' : '12'\n }\n\n let url_date = window.location.pathname.match(/\\/month\\/(.*)\\/([0-9]{4})/);\n let date = dateFns.parse(url_date[2] + '-' + months[url_date[1]] + '-01');\n let nextMonth = dateFns.startOfMonth(dateFns.addMonths(date,1));\n\n this.props.switchMonth(date);\n this.props.loadMonth(date);\n this.props.loadDays(date);\n this.props.loadSchedule(\n agent.Schedule.all(\n dateFns.format(date, 'DD-MM-YYYY'),\n dateFns.format(dateFns.endOfMonth(nextMonth), 'DD-MM-YYYY')\n )\n );\n\n }\n\n componentWillUnmount() {\n this.props.onUnload();\n }\n\n componentDidMount() {\n }\n\n componentDidUpdate(prevProps) {\n\n var months = {\n 'january' : '01',\n 'february' : '02',\n 'march' : '03',\n 'april' : '04',\n 'may' : '05',\n 'june' : '06',\n 'july' : '07',\n 'august' : '08',\n 'september' : '09',\n 'october' : '10',\n 'november' : '11',\n 'december' : '12'\n }\n\n if(prevProps.match.url !== this.props.match.url) {\n \n let url_date = this.props.location.pathname.match(/\\/month\\/(.*)\\/([0-9]{4})/);\n let date = dateFns.parse(url_date[2] + '-' + months[url_date[1]] + '-01');\n let nextMonth = dateFns.startOfMonth(dateFns.addMonths(date,1));\n\n let trigger = this.props.location.state ? this.props.location.state.trigger : 'unknown';\n\n if (history.action === 'POP') {\n\n this.trigger = 'POP';\n\n } else {\n\n this.trigger = 'PUSH';\n\n }\n\n if (trigger === 'click' || history.action === 'POP') {\n\n this.props.switchMonth(date);\n this.props.loadMonth(date);\n this.props.loadDays(date);\n this.props.loadSchedule(\n agent.Schedule.all(\n dateFns.format(date, 'DD-MM-YYYY'),\n dateFns.format(dateFns.endOfMonth(nextMonth), 'DD-MM-YYYY')\n )\n );\n\n } else {\n\n this.props.switchMonth(date);\n this.props.loadMonth(date);\n\n }\n\n }\n\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n\n if (nextProps.match !== this.props.match || nextProps.activeMonth !== this.props.activeMonth || nextProps.nextMonth !== this.props.nextMonth || nextProps.prevMonth !== this.props.prevMonth) {\n return true;\n } else {\n return false;\n }\n\n }\n\n render() {\n \n if (!this.props.days || (typeof this.props.clients === 'undefined') || (typeof this.props.projects === 'undefined')) {\n return (\n \n );\n }\n return (\n \n \n \n \n );\n\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Schedule);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport dateFns from 'date-fns';\nimport classNames from 'classnames/bind';\nimport { Link } from 'react-router-dom';\nimport Tooltip from '../Tooltip';\nimport { Info } from '../Info';\nimport _ from 'lodash';\nimport agent from '../../agent';\nimport {\n REQUEST_YEAR,\n YEAR_LOADED,\n YEAR_UNLOADED\n} from '../../constants/actionTypes';\nimport {ReactComponent as PriceIcon} from '../../images/icons/price.svg';\n\nconst mapStateToProps = (state, ownProps) => ({\n ...state.years,\n ...state.projects,\n year: ownProps.match.params.year,\n currentUser: state.common.currentUser,\n currentMonth: state.common.currentMonth,\n currentYear: state.common.currentUser.current_year,\n});\n\nconst mapDispatchToProps = dispatch => ({\n onLoad: (payload) => {\n dispatch({ type: REQUEST_YEAR })\n dispatch({ type: YEAR_LOADED, payload: payload })\n },\n onUnload: () =>\n dispatch({ type: YEAR_UNLOADED }),\n});\n\nclass Year extends React.Component {\n\n componentWillMount() {\n\n this.props.onLoad(\n agent.Year.show(this.props.year)\n );\n\n }\n\n componentDidUpdate(prevProps,prevState) {\n\n if(prevProps.location.pathname !== this.props.location.pathname) {\n\n if(this.props.location.pathname.indexOf('/year/') >= 0) {\n\n let url_date = this.props.location.pathname.replace('/year/','');\n\n this.props.onLoad(\n agent.Year.show(url_date.replace('/',''))\n );\n\n }\n\n }\n\n }\n\n componentWillUnmount() {\n this.props.onUnload();\n }\n\n formatPrice(price) {\n\n return new Intl.NumberFormat(this.props.locale, {\n style: 'currency',\n currency: this.props.currentUser.currency\n }).format(price)\n\n }\n\n render() {\n\n if ((typeof this.props.data === 'undefined') || this.props.isFetching) {\n\n return (\n \n )\n\n } else {\n\n let revenue_percentage = 0;\n let yearly_target = null;\n let yearly_revenue = 0;\n let target_remaining = 0;\n let in_past = dateFns.isPast(dateFns.endOfYear(this.props.year));\n\n if(this.props.data.amount_revenue && this.props.yearly_target){\n yearly_revenue = this.props.amount_revenue;\n yearly_target = this.props.yearly_target;\n revenue_percentage = Math.round(parseInt(yearly_revenue, 10) / yearly_target * 100);\n target_remaining = this.props.target_remaining_formatted;\n }\n\n if(this.props.data.name){\n\n return (\n \n \n\n \n {this.props.data.name} \n \n \n \n \n \n \n \n \n { this.props.data.next_year && (\n \n \n \n \n )}\n \n\n \n\n \n\n
\n Revenue \n { this.props.data.amount_revenue_formatted } \n \n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
{ this.props.data.monthly_average_revenue_formatted } on average per month \n\n
\n\n
\n { this.props.data.target_remaining_days === 0 ? 'Target smashed by' : 'Target Remaining' } \n { this.props.data.target_remaining_formatted } \n \n\n
\n\n
{ this.props.data.target_remaining_days === 0 ? \n in_past ? `You smashed your target of ${this.props.data.yearly_target_formatted}` : `Includes projects you haven't scheduled yet`\n : `${this.props.data.target_remaining_days} days needed to reach this`}{ this.props.data.target_remaining_days > 0 && \n\n
\n\n
\n Days Worked \n { this.props.data.number_of_days_worked } \n \n\n
\n\n
Average day rate of { this.props.data.average_day_rate_formatted } \n\n
\n\n
\n Holidays \n { this.props.data.number_of_days_holiday } \n \n\n
\n\n
{this.props.data.number_of_days_unworked_to_date} days not worked \n\n
\n\n
\n\n {this.props.data.client_breakdown.length === 0 &&
You haven't added any work for this year.
}\n\n {this.props.data.client_breakdown.map(function(client, i){\n return (\n
\n
\n \n \n { client.revenue_formatted } \n
\n
\n )\n })}\n\n
\n\n { (this.props.data.revenue_percentage < 60 && this.props.data.revenue_percentage > 1) &&\n
\n
\n
\n
Good start {this.props.currentUser.first_name}! \n
\n \n
\n
\n
You need to earn another {this.props.data.target_remaining_formatted} ({this.props.data.target_remaining_days_formatted} of work) to meet your annual revenue target.
\n
\n
\n }\n\n { (this.props.data.revenue_percentage > 60 && this.props.data.revenue_percentage < 100) &&\n
\n
\n
\n
Nearly there {this.props.currentUser.first_name}! \n
\n \n
\n
\n
You need to earn another {this.props.data.target_remaining_formatted} ({this.props.data.target_remaining_days_formatted} of work) to meet your annual revenue target.
\n
\n
\n }\n\n { this.props.data.revenue_percentage >= 100 &&\n
\n
\n
\n
Awesome job {this.props.currentUser.first_name}! \n
\n \n
\n
\n { in_past ?\n
You smashed your annual revenue target for {this.props.data.name} by {this.props.data.target_remaining_formatted}!
\n :\n
You're on target to smash your annual revenue target for {this.props.data.name} by {this.props.data.target_remaining_formatted}
\n }\n
\n
\n }\n\n
\n\n \n\n \n\n \n\n Monthly breakdown \n\n \n\n \n\n \n\n {this.props.data.month_breakdown.map(hash => {\n\n let days = [];\n let month = dateFns.parse('1 ' + hash.month_name);\n let day = dateFns.startOfWeek(month, {weekStartsOn: 1});\n let revenue_percentage = 0;\n\n if (hash.revenue >= 1) {\n revenue_percentage = hash.difference_from_target_width_percentage\n }\n\n let dayClass = classNames({\n month: true,\n empty: revenue_percentage === 0,\n outside: revenue_percentage <= 40,\n inside: revenue_percentage > 40,\n above: hash.difference_from_target > 0,\n below: hash.difference_from_target < 0\n })\n\n while (day <= dateFns.endOfMonth(month)) {\n days.push({\n key: dateFns.format(day, 'DDMMYY'),\n day: day\n });\n day = dateFns.addDays(day, 1);\n }\n\n var headers = ['M','T','W','T','F','S','S']\n\n return (\n
\n \n {hash.revenue_string} \n \n \n
\n
No work added \n {hash.difference_from_target < 0 &&\n
{ hash.difference_from_target_formatted.replace('-','') } { hash.difference_from_target_formatted > 0 ? 'above' : 'below' } target \n }\n
\n {hash.difference_from_target > 0 &&\n
{ hash.difference_from_target_formatted } above target \n }\n
\n
\n\n \n\n \n\n )\n\n }\n\n }\n\n }\n\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Year);\n","import ListErrors from './ListErrors';\nimport React from 'react';\nimport agent from '../agent';\nimport images from '../images';\nimport { connect } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport {\n UPDATE_FIELD_AUTH,\n LOGIN,\n LOGIN_PAGE_UNLOADED\n} from '../constants/actionTypes';\n\nconst mapStateToProps = state => (\n {\n ...state.auth,\n common: state.common\n }\n);\n\nconst mapDispatchToProps = dispatch => ({\n onChangeEmail: value =>\n dispatch({ type: UPDATE_FIELD_AUTH, key: 'email', value }),\n onChangePassword: value =>\n dispatch({ type: UPDATE_FIELD_AUTH, key: 'password', value }),\n onSubmit: (email, password) =>\n dispatch({ type: LOGIN, payload: agent.Auth.login(email, password) }),\n onUnload: () =>\n dispatch({ type: LOGIN_PAGE_UNLOADED })\n});\n\nclass Login extends React.Component {\n\n constructor() {\n super();\n this.changeEmail = ev => this.props.onChangeEmail(ev.target.value);\n this.changePassword = ev => this.props.onChangePassword(ev.target.value);\n this.submitForm = (email, password) => ev => {\n ev.preventDefault();\n this.props.onSubmit(email, password);\n };\n }\n\n componentWillUnmount() {\n this.props.onUnload();\n }\n\n errorMessage(field) {\n if(this.props.errors && this.props.errors[field]){\n return this.props.errors[field];\n }\n };\n\n render() {\n\n const email = this.props.email;\n const password = this.props.password;\n return (\n\n \n\n \n\n \n\n \n );\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Login);\n","import React from 'react';\nimport agent from '../agent';\nimport images from '../images';\nimport { connect } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport dateFns from 'date-fns';\nimport Select, { components } from 'react-select';\nimport countryList from 'react-select-country-list';\nimport update from 'immutability-helper';\nimport getSymbolFromCurrency from 'currency-symbol-map';\n\nimport {\n REGISTER\n} from '../constants/actionTypes';\n\nconst mapStateToProps = state => (\n {\n errors: state.auth.errors,\n common: state.common\n }\n);\n\nconst mapDispatchToProps = dispatch => ({\n onSubmitForm: user => {\n // function parse(str) {\n // const [date, month, year] = str.split('/').map(n => parseInt(n))\n // return new Date(year, month - 1, date)\n // }\n user.business_attributes.year_end = dateFns.format(dateFns.endOfYear(dateFns.startOfToday()), 'YYYY-MM-DD')\n user.country = user.country.value\n dispatch({ type: REGISTER, payload: agent.Auth.register(user) })\n }\n});\n\nconst Input = ({ autoComplete, ...props }) => \n\n \n\n Have any questions? Email us \n\n \n\n \n\n );\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Register);\n","import React from 'react';\nimport agent from '../agent';\nimport images from '../images';\nimport { connect } from 'react-redux';\nimport update from 'immutability-helper';\nimport {\n DEMO_REGISTER\n} from '../constants/actionTypes';\n\nconst mapStateToProps = state => (\n {\n errors: state.auth.errors\n }\n);\n\nconst mapDispatchToProps = dispatch => ({\n onSubmit: (user) =>\n dispatch({ type: DEMO_REGISTER, payload: agent.Auth.demo_register(user) })\n});\n\nclass RegisterDemo extends React.Component {\n constructor() {\n super();\n\n this.state = {\n loading: false,\n email: '',\n name: '',\n clients: '1'\n };\n\n }\n\n componentDidUpdate(prevProps, prevState) {\n\n if (this.props.errors && prevState.loading) {\n this.setState({\n loading: false\n })\n }\n\n }\n\n submitForm = (ev) => {\n ev.preventDefault();\n\n this.setState({\n loading: true\n })\n\n this.props.onSubmit(this.state);\n\n };\n\n updateState = field => ev => {\n\n let newData = update(this.state, {\n [field]: {$set: ev.target.value}\n })\n\n this.setState(newData);\n\n // cleanup\n newData = null;\n\n };\n\n errorMessage(field) {\n if(this.props.errors && this.props.errors[field]){\n return this.props.errors[field];\n }\n };\n\n render() {\n return (\n\n \n\n \n\n This is a temporary demo account just for you so feel free to \n\n \n\n \n );\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(RegisterDemo);\n","import ListErrors from './ListErrors';\nimport React from 'react';\nimport agent from '../agent';\nimport images from '../images';\nimport { connect } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport update from 'immutability-helper';\n\nimport {\n PASSWORD_FORGET,\n PASSWORD_FORGET_PAGE_UNLOADED\n} from '../constants/actionTypes';\n\nconst mapStateToProps = state => ({ ...state.auth });\n\nconst mapDispatchToProps = dispatch => ({\n onSubmit: (email) =>\n dispatch({ type: PASSWORD_FORGET, payload: agent.Password.forgot(email) }),\n onUnload: () =>\n dispatch({ type: PASSWORD_FORGET_PAGE_UNLOADED })\n});\n\nclass ForgottenPassword extends React.Component {\n constructor() {\n super();\n this.submitForm = (email) => ev => {\n ev.preventDefault();\n this.props.onSubmit(email);\n };\n this.state = {\n email: ''\n };\n }\n\n updateState = field => ev => {\n\n const value = ev.target.value;\n\n let newData = update(this.state, {\n [field]: {$set: value}\n })\n\n this.setState(newData);\n \n // cleanup\n newData = null;\n\n };\n\n componentWillUnmount() {\n this.props.onUnload();\n }\n\n errorMessage(field) {\n if(this.props.errors && this.props.errors[field]){\n return this.props.errors[field];\n }\n };\n\n render() {\n return (\n\n \n\n \n\n \n\n \n );\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ForgottenPassword);\n","import ListErrors from './ListErrors';\nimport React from 'react';\nimport agent from '../agent';\nimport images from '../images';\nimport { connect } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport queryString from 'query-string';\nimport update from 'immutability-helper';\nimport {\n PASSWORD_RESET,\n PASSWORD_RESET_PAGE_UNLOADED\n} from '../constants/actionTypes';\n\nconst mapStateToProps = state => ({ ...state.auth });\n\nconst mapDispatchToProps = dispatch => ({\n onSubmit: (token, password) =>\n dispatch({ type: PASSWORD_RESET, payload: agent.Password.reset(token, password) }),\n onUnload: () =>\n dispatch({ type: PASSWORD_RESET_PAGE_UNLOADED })\n});\n\nclass ResetPassword extends React.Component {\n constructor() {\n super();\n this.submitForm = (token, password) => ev => {\n ev.preventDefault();\n this.props.onSubmit(token, password);\n };\n this.state = {\n password: '',\n token: ''\n };\n }\n\n componentDidMount() {\n const values = queryString.parse(this.props.location.search)\n const token = values.token\n this.updateStatewithValue('token', token)\n }\n\n updateState = field => ev => {\n\n let newData = update(this.state, {\n [field]: {$set: ev.target.value}\n })\n\n this.setState(newData);\n\n // cleanup\n newData = null;\n\n };\n\n updateStatewithValue(field, value) {\n \n let newData = update(this.state, {\n [field]: {$set: value}\n })\n\n this.setState(newData);\n \n // cleanup\n newData = null;\n\n };\n\n componentWillUnmount() {\n this.props.onUnload();\n }\n\n errorMessage(field) {\n if(this.props.errors && this.props.errors[field]){\n return this.props.errors[field];\n }\n };\n\n render() {\n return (\n\n \n\n \n\n \n\n \n );\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ResetPassword);\n","import ListErrors from './ListErrors';\nimport React from 'react';\nimport agent from '../agent';\nimport images from '../images';\nimport { connect } from 'react-redux';\nimport queryString from 'query-string';\nimport update from 'immutability-helper';\nimport {\n UNSUBSCRIBE,\n CHECK_UNSUBSCRIBE_TOKEN,\n UNSUBSCRIBE_UNLOADED\n} from '../constants/actionTypes';\n\nconst mapStateToProps = state => ({ ...state.auth });\n\nconst mapDispatchToProps = dispatch => ({\n onSubmit: (token) =>\n dispatch({ type: UNSUBSCRIBE, payload: agent.Unsubscribe.unsubscribe(token) }),\n onLoad: (token) =>\n dispatch({ type: CHECK_UNSUBSCRIBE_TOKEN, payload: agent.Unsubscribe.get(token) }),\n onUnload: (token) =>\n dispatch({ type: UNSUBSCRIBE_UNLOADED })\n});\n\nclass Unsubscribe extends React.Component {\n constructor() {\n super();\n this.submitForm = (token) => ev => {\n ev.preventDefault();\n this.props.onSubmit(token);\n };\n this.state = {\n token: '',\n email: ''\n };\n }\n\n componentDidMount() {\n const values = queryString.parse(this.props.location.search)\n const token = values.token\n this.updateStatewithValue('token', token)\n this.props.onLoad(token);\n }\n\n updateStatewithValue(field, value) {\n\n let newData = update(this.state, {\n [field]: {$set: value}\n })\n\n this.setState(newData);\n \n // cleanup\n newData = null;\n\n };\n\n componentWillUnmount() {\n this.props.onUnload();\n }\n\n errorMessage(field) {\n if(this.props.errors && this.props.errors[field]){\n return this.props.errors[field];\n }\n };\n\n render() {\n if(this.props.unsubscribe_email === undefined){\n if(this.props.unsubscribed === undefined){\n return (\n \n\n \n\n Sorry there is no user linked to the unsubscribe link you clicked on. \n\n Please contact hello@heyslate.com and we will be able to help you.
\n\n \n\n \n );\n }else{\n return (\n \n\n \n\n You have been unsubscribed from all Slate emails. \n\n \n\n \n );\n }\n }else{\n return (\n\n \n\n \n\n \n\n \n );\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Unsubscribe);\n","// This is used to determine if a user is authenticated and\n// if they are allowed to visit the page they navigated to.\n\n// If they are: they proceed to the page\n// If not: they are redirected to the login page.\nimport React from 'react'\nimport { Redirect, Route } from 'react-router-dom'\n\nconst PrivateRoute = ({ component: Component, ...rest }) => {\n\n // Add your own authentication on the below line.\n const isLoggedIn = window.localStorage.getItem('jwt');\n\n return (\n \n isLoggedIn ? (\n \n \n \n \n ) : (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n ) : (\n \n \n \n \n \n \n \n \n \n \n \n )\n )\n\n}\n\nexport default AppRoute\n//export default connect(mapStateToProps, mapDispatchToProps)(AppRoute);\n","import agent from '../agent';\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { ConnectedRouter } from 'connected-react-router';\nimport { history } from '../configureStore';\nimport AppRoute from '../routes';\nimport _ from 'lodash';\nimport images from '../images';\nimport '../styles/app.scss';\n\nimport {\n APP_LOAD,\n REDIRECT,\n CLIENTS_PAGE_LOADED,\n PROJECTS_PAGE_LOADED,\n SUBSCRIPTION_REQUIRED,\n DEMO_LOGOUT\n} from '../constants/actionTypes';\n\nconst mapStateToProps = state => {\n return {\n appLoaded: state.common.appLoaded,\n appName: state.common.appName,\n currentUser: state.common.currentUser,\n activeMonth: state.common.activeMonth,\n nextMonth: state.common.nextMonth,\n prevMonth: state.common.prevMonth,\n currentMonth: state.common.currentMonth,\n redirectTo: state.common.redirectTo,\n subscription: state.common.subscription,\n clientSize: state.clients.clients,\n projectSize: state.clients.projects\n }};\n\nconst mapDispatchToProps = dispatch => ({\n onLoad: (payload, token) =>\n dispatch({ type: APP_LOAD, payload, token, skipTracking: true }),\n onRedirect: () =>\n dispatch({ type: REDIRECT }),\n onClients: (payload) => {\n dispatch({ type: CLIENTS_PAGE_LOADED, payload: payload })\n },\n onProjects: (payload) => {\n dispatch({ type: PROJECTS_PAGE_LOADED, payload: payload })\n },\n checkSubscription: (payload) => {\n dispatch({ type: SUBSCRIPTION_REQUIRED, payload })\n },\n logout: (email, name) => {\n dispatch({ type: DEMO_LOGOUT, payload: agent.Auth.logout(), email: email, name: name })\n }\n});\n\nclass App extends React.Component {\n\n constructor(props){\n super(props);\n this.state = {\n newUser: true,\n onboardingStep: 0\n };\n }\n\n componentWillReceiveProps(nextProps) {\n\n if (nextProps.redirectTo) {\n history.push(nextProps.redirectTo);\n this.props.onRedirect();\n }\n\n }\n\n componentWillMount() {\n\n const token = window.localStorage.getItem('jwt');\n this.props.onLoad(token ? agent.Auth.current() : null, token);\n\n }\n\n componentDidMount() {\n\n if(this.props.currentUser && (window.location.pathname === '/login' || window.location.pathname === '/register') ) {\n\n history.push('/');\n this.props.onRedirect();\n }\n\n }\n\n componentDidUpdate(prevProps) {\n\n if(this.props.currentUser) {\n\n if(prevProps.currentUser !== this.props.currentUser){\n\n // if(!this.props.currentUser.admin && this.props.currentUser.state !== 'trialing' && this.props.currentUser.state !== 'purchased'){\n // this.props.checkSubscription(this.props.subscription)\n // }\n this.props.onClients(agent.Clients.all());\n this.props.onProjects(agent.Projects.all());\n }\n\n }\n\n }\n\n nextScreen(e) {\n\n e.preventDefault();\n\n if (this.state.onboardingStep === 6) {\n this.setState({ newUser: false })\n } else {\n this.setState(prevState => {\n return {onboardingStep: prevState.onboardingStep + 1}\n })\n }\n\n }\n\n register(e) {\n\n e.preventDefault();\n\n this.props.logout(\n (this.props.currentUser.email).replace('demo+',''),\n this.props.currentUser.name\n );\n history.push('/register');\n this.props.onRedirect();\n\n }\n\n render() {\n\n if (this.props.appLoaded && this.props.activeMonth && this.props.clientSize !== null) {\n\n const theme = (this.props.currentUser && this.props.currentUser.dark_mode) ? 'theme--dark' : 'theme--default';\n\n return (\n \n \n \n
Sorry, we're still working on mobile support.
\n
\n {((this.props.currentUser && this.props.currentUser.demo) ) && (\n
\n
\n \n \n Get an account like this for your business.\n \n
\n Start your free trial \n \n \n \n \n )}\n {( (this.props.currentUser && this.state.newUser && this.props.currentUser.new_user) ) && (\n
\n
\n
\n\n
\n
Hey { this.props.currentUser.first_name }! \n
Thanks for giving Slate a try. To help get you started we'd love to show you a things to make the most of your trial.
\n
\n\n
\n
Adding work to a single day \n
If you want to add some work to a single day, simply find the day in your schedule and click anywhere inside.
\n
\n\n
\n
Adding work to multiple days \n
If you want to add work to multiple days, simply drag your mouse over the days you want to book.
\n
\n\n
\n
Moving work to another day \n
If you need to move some work you've already added to your schedule, drag & drop it to another day.
\n
\n\n
\n
Multiple clients on a day \n
If you're working for multiple clients on a day, we'll tell you how much time is available so you don't overbook yourself.
\n
\n\n
\n
Monthly performance \n
Everytime you update your schedule, we populate the sidebar with stats and analysis for the month.
\n
\n\n
\n
Yearly performance \n
We also measure your performance across the year when your schedule is updated, giving you a snapshot of each month.
\n
\n\n
{ this.state.onboardingStep < 6 ? 'Continue' : 'Start using Slate'} \n\n
\n
\n
\n
\n )}\n
\n
\n \n );\n }\n return (\n \n );\n }\n}\n\n// App.contextTypes = {\n// router: PropTypes.object.isRequired\n// };\n\nexport default connect(mapStateToProps, mapDispatchToProps)(App);\n","import ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport React from 'react';\nimport configureStore, { history } from './configureStore'\nimport App from './components/App';\n\nconst store = configureStore(/* provide initial state if any */)\n\nReactDOM.render((\n \n \n\n), document.getElementById('root'));\n","import auth from './reducers/auth';\nimport { combineReducers } from 'redux';\nimport common from './reducers/common';\nimport home from './reducers/home';\nimport clients from './reducers/clients';\nimport projects from './reducers/projects';\nimport invoices from './reducers/invoices';\nimport tasks from './reducers/tasks';\nimport settings from './reducers/settings';\nimport schedule from './reducers/schedule';\nimport months from './reducers/months';\nimport years from './reducers/years';\nimport admin_users from './reducers/admin_users';\nimport { connectRouter } from 'connected-react-router'\n\nexport default (history) => combineReducers({\n auth,\n common,\n home,\n settings,\n schedule,\n clients,\n projects,\n invoices,\n tasks,\n months,\n years,\n admin_users,\n router: connectRouter(history),\n});\n"],"sourceRoot":""}