\n {initCards.map((card, i) => {\n const shouldHaveLineOnLeft = hoverIndex === i && targetIndex === i;\n const shouldHaveLineOnRight = hoverIndex === i && targetIndex === i + 1;\n return (\n
\n \n {errors.map((error) => {\n return (
\n )}\n\n {error.msg}
);\n })}\n {headerFormName} Form
\n\n\n
\n\n \n
\n Type
\n Label
\n Active
\n Encrypt
\n Required
\n {isManager ? (Delete
) : <>}\n \n (\n \n
\n\n \n
\n \n ))}\n />\n \n handleFieldChange(e, item, 'type')}\n className=\"model_form_dropdown\"\n >\n \n \n \n \n \n \n \n \n \n
\n \n {inputRenderHelper(item.type, item)}\n
\n \n handleCheckboxChange(e, item, 'active')}\n />\n
\n \n handleCheckboxChange(e, item, 'encrypt')}\n />\n
\n \n handleCheckboxChange(e, item, 'required')}\n className=\"display-required\"\n />\n
\n {isManager ? (\n \n handleOpenDeleteModal(item)}\n className=\"btn btn-outline-danger\"\n >\n Remove\n \n
\n ) : <>}\n \n \n \n
\n \n );\n};\n\nCustomFieldFormEditPage.propTypes = {\n modelFormId: PropTypes.number.isRequired,\n modelFormName: PropTypes.string.isRequired,\n modelFormItems: PropTypes.array.isRequired,\n isManager: PropTypes.bool.isRequired,\n associatedObjects: PropTypes.array.isRequired,\n};\n\nexport default withContextProvider(ToastProvider)(CustomFieldFormEditPage);\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Form } from 'react-bootstrap';\nimport { capitalizeFirstLetter } from '../../../../../utils/api/index';\n\nconst FormGroupDefault = ({ item, customValues, handleCustomFieldChange }) => {\n const label = capitalizeFirstLetter(item.label);\n\n return (\n Custom Fields
: null}\n {formItems}\n \n );\n};\n\nCustomFieldForm.propTypes = {\n values: PropTypes.object.isRequired,\n modelFormItems: PropTypes.array.isRequired,\n onChangeValue: PropTypes.func.isRequired,\n};\n\nexport default CustomFieldForm;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport TrWithLabelAndValue from '../TableComponents/TrWithLabelAndValue';\nimport { formatNumericDate } from '../../../../../utils/dates';\n\nconst Date = ({ item, values, styles }) => {\n let x = 0;\n if (Object.keys(item).includes('key')) {\n x = item.key;\n }\n const formattedDate = {};\n formattedDate[x] = (values[x] ? formatNumericDate(values[x]) : 'No Info');\n return (\n{label}
\n\n {formItems.length ? \n \n {formItems}\n \n
\n
\n );\n};\n\nCustomFieldShow.propTypes = {\n values: PropTypes.object.isRequired,\n modelFormItems: PropTypes.array.isRequired,\n styles: PropTypes.object,\n};\n\nCustomFieldShow.defaultProps = {\n styles: { thClassName: { className: ' ' } },\n};\n\nexport default CustomFieldShow;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Modal, Button } from 'react-bootstrap';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * Custom component to display a dialog modal.\n * Could be used as an alert dialog or confimartion dialog\n */\nconst DialogModal = ({\n isVisible, title, message, shouldShowCheckbox, buttonLabel, actions, onClose, footer,\n}) => {\n const [isChecked, setIsChecked] = useState(false);\n /**\n * Close modal\n */\n const handleClose = () => {\n // If callback available, runs callback\n if (onClose) {\n onClose();\n }\n };\n\n const handleChange = () => {\n setIsChecked(!isChecked);\n };\n\n return (\n Custom Fields
: null}\n{title}
\n\n {message &&
\n {message}
}\n { shouldShowCheckbox && (\n \n )}\n\n {footer && (\n { item.onClick(isChecked); setIsChecked(false); }}\n >\n {item.label}\n \n ))\n : (\n \n )}\n
\n \n {footer}\n
\n )}\n {actions && actions.length ? actions.map((item) => (\n \n {label &&
\n \n );\n};\n\nIconButton.defaultProps = {\n label: undefined,\n};\n\nIconButton.propTypes = {\n icon: PropTypes.element.isRequired,\n label: PropTypes.string,\n};\n\nexport default IconButton;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { components } from 'react-select';\nimport Icon from '@mdi/react';\n\n/**\n * Select dropdown component to render multiple options with a single selection.\n * This component render an array of object in form of { name:\"\", value: \"\", label: \"\", icon: \"\" }.\n * Property `name` must be an string and property `value` can be string, number or object\n * @param enabledEmptyOption enables and empty option in the dropdown. By default this value\n * is `true`\n * @param emptyLabel represent an string with the name of the empty option. By default this\n * value is `None`\n */\n\nconst { Option } = components;\nconst IconOption = ({ data, ...props }) => {\n return (\n \n );\n};\nIconOption.defaultProps = {\n data: undefined,\n};\n\nIconOption.propTypes = {\n data: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n value: PropTypes.string,\n icon: PropTypes.string.isRequried,\n }).isRequired,\n ),\n};\n\nexport default IconOption;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { FaEllipsisH } from 'react-icons/fa';\nimport { Popover as BootstrapPopover, OverlayTrigger } from 'react-bootstrap';\nimport { v4 as uuidv4 } from 'uuid';\nimport IconButton from '../IconButton';\nimport { ICON_COLOR_GRAY, MEDIUM_ICON_SIZE } from '../../../constants/theme';\n\nconst MenuButton = ({\n items, iconColor, iconSize, isNewSite,\n}) => {\n const actionItems = isNewSite ? [items[1]] : items;\n const [show, setShow] = useState(false);\n const itemClass = isNewSite ? 'justDelete' : 'three-dot-item';\n const itemLists = items && items.length && (\n {label}
}\n {icon}\n- \n {actionItems.map((item) => (\n
\n {label && (\n
\n );\n};\n\nSelectIconDropdown.defaultProps = {\n label: undefined,\n value: undefined,\n isRequired: false,\n id: undefined,\n};\n\nSelectIconDropdown.propTypes = {\n id: PropTypes.string,\n label: PropTypes.string,\n value: PropTypes.string,\n handleChange: PropTypes.func.isRequired,\n isRequired: PropTypes.bool,\n};\n\nexport default SelectIconDropdown;\n","import React, { useCallback, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { Spinner } from 'react-bootstrap';\n\n/**\n * Component that renders a button with a spinner when is required.\n * This component can be customize with bootstrap classes\n */\nconst SpinnerButton = React.forwardRef(({\n label,\n labelLoading,\n isLoading,\n className,\n ...props\n}, ref) => {\n /**\n * Display custom label depending on status of loading\n * @returns {string} label\n */\n const showLabel = useCallback(() => {\n if (isLoading && labelLoading) {\n return labelLoading;\n }\n\n return label;\n }, [isLoading, label, labelLoading]);\n\n /**\n * This effect will fire everytime isLoading is update\n */\n useEffect(() => {\n showLabel();\n }, [isLoading, labelLoading, showLabel]);\n\n return (\n \n {label}\n
\n )}\n \n
\n );\n};\n\nexport default HelpPage;\n\nHelpPage.propTypes = {\n};\n\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, Overlay, Popover as BoostrapPopover } from 'react-bootstrap';\nimport { v4 as uuidv4 } from 'uuid';\n\nconst Popover = React.forwardRef(({ shouldShow, content }, ref) => {\n return (\n \n
\n Vamos Help Page
\nNeed help navigating Vamos?
\nLet us help you make the most of the app.
\n\n
\n Resources
\n\n
\n \n
\n \n Vamos User Guide
\nEverything you need to know\n to put Vamos to work.\n
\n Visit Vamos User Guide\n\n
\n Vamos Training Site
\nConnect to all our Vamos\n user materials including\n training videos.\n
\n Visit Vamos Training Site\n\n
\n \n
\n \n Want a new feature? Find a bug?
\nWe’re here to help
\nFill out the Vamos request form to communicate with us what feature you’d\n like to see us add in the future or to report a bug.\n
\nYour organization should also have a link to view your bug reports and the status\n of each one. If you aren’t sure how to access that link, reach out to your contact\n at Code the Dream.\n
\n\n
\n \n
\n Contact us
\nCouldn’t find what you need?
\nCode the Dream team is ready to assist.
\n \n\n 
\n
\n \n \n \n {content.title && {content.title} }\n \n {content.message}\n {content.actions && content.actions.length && (\n \n \n \n
\n );\n});\n\nPopover.defaultProps = {\n shouldShow: false,\n};\n\nPopover.propTypes = {\n shouldShow: PropTypes.bool,\n content: PropTypes.object.isRequired,\n};\n\nexport default Popover;\n","import React, {\n useCallback, useEffect, useRef, useState,\n} from 'react';\nimport { PropTypes } from 'prop-types';\nimport {\n Modal, Form, Row, Col,\n} from 'react-bootstrap';\nimport SiteDatePicker from '../FormInputs/DateSelector';\nimport SpinnerButton from '../FormInputs/SpinnerButton';\nimport { createRoute, updateRoute, getRoutes } from '../../utils/api/routes';\nimport { redirectToRouteEdit } from '../../utils/navigation';\nimport { useToasts } from '../../hooks';\nimport { withContextProvider } from '../../hoc';\nimport { ToastProvider } from '../../providers';\nimport Popover from '../Popover';\nimport { handleResponse } from '../../utils/api/errorHandler';\n\nconst defaultValues = {\n name: '',\n description: '',\n};\n\n/**\n * Modal form to create a new route\n */\nconst RouteModal = ({\n isOpen, organizationId, currentRoute, onClose,\n}) => {\n // State to handle form inputs\n const [formInput, setFormInput] = useState(defaultValues);\n\n // State to handle date selected\n const [date, setDate] = useState(new Date());\n\n // State to handle loading bool\n const [loading, setLoading] = useState(false);\n\n // Ref to check first render\n const firstRender = useRef(true);\n\n // State to handle errors in form\n const [errors, setErrors] = useState({});\n\n // Hook Toast\n const { showToast } = useToasts();\n\n // State to handle popover\n const popoverRef = React.useRef();\n const [popoverContent, setPopoverContent] = useState({});\n const [showPopover, setShowPopover] = useState(false);\n\n // Title and Button value is set based on if the currentRoute value exists\n const title = currentRoute ? 'Edit Route' : 'New Route';\n const submitButtonText = currentRoute ? 'Save' : 'Create';\n\n /**\n * Handle text input changes\n * @param {*} e HTML event\n */\n const handleOnChange = (e) => {\n setFormInput({\n ...formInput,\n [e.target.name]: e.target.value,\n });\n };\n\n /**\n * Validate required data in form\n */\n const handleValidation = useCallback(() => {\n const errorsFound = {};\n\n // Check if name is empty\n if (!formInput.name.trim().length) {\n errorsFound.name = 'Name is required';\n }\n\n // Update errors state\n setErrors(errorsFound);\n\n return Object.keys(errorsFound).length;\n }, [formInput.name]);\n\n /**\n * Effect to set formItem if there is route given\n */\n useEffect(() => {\n // set formItem if there is route info for editing otherwise use defaultValues\n if (currentRoute) {\n setFormInput(currentRoute);\n setDate(currentRoute.date);\n }\n }, [currentRoute]);\n\n /**\n * Effect to validate required data in hot\n */\n useEffect(() => {\n // Skip validation on first render\n if (firstRender.current) {\n firstRender.current = false;\n return;\n }\n\n // Validate data\n handleValidation();\n }, [formInput.name, handleValidation]);\n\n /**\n * Handle submit, sending data to endpoint to create a route.\n * If response is 201 redirect user to /edit page\n */\n const handleSubmit = async () => {\n // Check for errors before continue\n if (handleValidation()) {\n showToast({ message: 'Missing information required', type: 'error' });\n return;\n }\n\n const formData = {\n ...formInput,\n date: new Date(date),\n };\n try {\n setLoading(true);\n\n // switch between create and update based on if the route exists, then make an API call\n const apiRequest = currentRoute ? updateRoute : createRoute;\n const data = currentRoute ? { route: formData } : formData;\n const routeId = currentRoute ? currentRoute.routeId : null;\n const response = await apiRequest(data, organizationId, routeId);\n const responseData = await handleResponse(response);\n const toastMessage = currentRoute ? 'Route updated successfully' : 'Route added successfully';\n if (responseData) {\n const { route } = responseData;\n showToast({ message: `${toastMessage}`, type: 'success' });\n // Redirect user to edit page\n redirectToRouteEdit(route.id);\n }\n } catch (error) {\n // Ups something happened\n showToast({ message: error.message, type: 'error' });\n } finally {\n setLoading(false);\n }\n };\n\n /**\n * Make api call to check if Route name is already in used. If so, a confirmation popover will be displayed.\n * If user select YES, a route with a existing name will be created.\n * If user select NO, name field will be cleared and user should need to enter a different name\n */\n const handleVerification = async () => {\n // if the route name was changed - run through name verification or skip to submit\n const isNameTheSame = currentRoute?.name?.toLowerCase() === formInput.name.toLowerCase();\n if (isNameTheSame) {\n handleSubmit();\n return;\n }\n\n try {\n setLoading(true);\n\n const routeName = formInput.name.toLowerCase();\n\n const params = { routeName, routesStartDate: '', routesEndDate: '' };\n const response = await getRoutes(organizationId, params);\n const data = await handleResponse(response);\n\n const isFound = data.routes.some(route => route.name.toLowerCase() === routeName);\n\n // Route name not found. The route will be posted\n if (!isFound) {\n handleSubmit();\n return;\n }\n\n setPopoverContent({\n title: 'Are you sure?',\n message: 'A route by this name already exists. Proceed with the same name?',\n actions: [\n {\n label: 'Yes',\n onClick: () => {\n setShowPopover(false);\n handleSubmit();\n },\n },\n {\n label: 'No',\n variant: 'danger',\n onClick: () => {\n setShowPopover(false);\n setFormInput({ ...formInput, name: '' });\n setPopoverContent({});\n },\n },\n ],\n });\n\n setShowPopover(true);\n } catch (error) {\n showToast({ message: error.message, type: 'error' });\n } finally {\n setLoading(false);\n }\n };\n\n /**\n * Close modal and reset form and error state\n */\n const handleClose = () => {\n // Reset state\n firstRender.current = true;\n if (currentRoute) {\n setFormInput(currentRoute);\n setDate(currentRoute.date);\n } else {\n setFormInput(defaultValues);\n setDate(new Date());\n }\n setErrors({});\n\n onClose();\n };\n\n return (\n \n {content.actions.map((item) => (\n \n {item.label}\n \n ))}\n
\n )}\n\n \n \n \n {title} \n \n\n \n \n \n\n \n \n \n\n
\n );\n};\n\nRouteModal.defaultProps = {\n isOpen: false,\n currentRoute: null,\n};\n\nRouteModal.propTypes = {\n isOpen: PropTypes.bool,\n onClose: PropTypes.func.isRequired,\n organizationId: PropTypes.number.isRequired,\n currentRoute: PropTypes.object,\n};\n\nexport default withContextProvider(ToastProvider)(RouteModal);\n","import React from 'react';\n\nconst SeasonHeader = () => {\n return (\n \n \n \n
\n
\n );\n};\n\nSeasonIndex.propTypes = {\n season: PropTypes.object.isRequired,\n isManager: PropTypes.bool.isRequired,\n organization: PropTypes.object.isRequired,\n};\n\nexport default withContextProvider(ToastProvider)(SeasonIndex);\n","import React, { useState } from 'react';\nimport { PropTypes } from 'prop-types';\nimport _ from 'lodash';\nimport { ToastProvider } from '../../providers';\nimport { withContextProvider } from '../../hoc';\nimport { redirectToSeasonNew } from '../../utils/navigation';\nimport SeasonItem from './SeasonItem';\nimport SeasonHeader from './SeasonHeader';\n\nconst SeasonIndex = ({\n seasons,\n isManager,\n organization,\n}) => {\n const [sorting, setSorting] = useState({ field: 'end_date', order: 'desc' });\n\n const handleSortingChange = (sortString) => {\n const [field, order] = sortString.split('-');\n setSorting({ field, order });\n };\n\n const seasonsArray = Object.values(seasons);\n\n const sortedSeasons = _.orderBy(seasonsArray, [sorting.field], [sorting.order]);\n\n const handleCreatNewSeason = (e) => {\n e.preventDefault();\n redirectToSeasonNew();\n };\n\n return (\n \n
\n\n Season {titleize(season.name)} Information
\n\n \n
\n
\n );\n};\n\nSeasonIndex.propTypes = {\n seasons: PropTypes.array.isRequired,\n isManager: PropTypes.bool.isRequired,\n organization: PropTypes.object.isRequired,\n};\n\nexport default withContextProvider(ToastProvider)(SeasonIndex);\n","export const styles = {\n circle: {\n display: 'flex',\n paddingRight: '6px',\n paddingLeft: '6px',\n width: '20px',\n height: '20px',\n backgroundColor: 'silver', // Define this colors in a Constant file for future use\n borderRadius: '50%',\n justifyContent: 'center',\n alignItems: 'center',\n },\n\n textCircle: {\n fontSize: '11px',\n },\n\n inlineText: {\n whiteSpace: 'nowrap',\n },\n\n loadingMessage: {\n color: '#018544',\n textAlign: 'center',\n marginTop: '10',\n fontSize: '12px',\n },\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FaTimes } from 'react-icons/fa';\nimport { IconButton } from '../FormInputs';\nimport { getTimeInHoursAndMins } from '../../utils/dates';\nimport { useRoutes } from '../../hooks';\nimport { styles } from './Sidebar.style';\n\nconst SidebarItem = ({ stop, onDelete }) => {\n // stop.time value is in seconds, we need to convert to minutes to display to user\n const formattedTime = getTimeInHoursAndMins(stop.time);\n\n // Hook Route Context\n const { vamosMarkersRef } = useRoutes();\n\n /**\n * This function handle mouse over event\n * in each sidebar item\n */\n const handleOnClick = () => {\n // Get the site marker reference from RoutesContext and execute the onClick function\n if (vamosMarkersRef && vamosMarkersRef.current[stop.site_id]) {\n vamosMarkersRef.current[stop.site_id].props.onClick();\n }\n };\n\n return (\n \n handleCreatNewSeason(e)}\n >\n New Season\n \n
\n\n \n handleSortingChange(e.target.value)}\n >\n \n \n \n \n \n \n
\n \n \n \n
\n );\n};\n\nSidebarItem.propTypes = {\n stop: PropTypes.object.isRequired,\n onDelete: PropTypes.func.isRequired,\n};\n\nexport default SidebarItem;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport AccordionBody from '../AccordionBody';\nimport RouteModal from '../RouteModal';\nimport { removeRoute } from '../../utils/api/routes';\nimport { redirectToRoutesIndex } from '../../utils/navigation';\nimport { getItemStyle, getListStyle, reorder } from '../../utils/dragDrop';\nimport { formatShortDate, getTimeInHoursAndMins } from '../../utils/dates';\nimport { useDialogs, useRoutes, useToasts } from '../../hooks';\nimport DragDropContextComponent from '../DragAndDrop/DragDropContext';\nimport DraggableItem from '../DragAndDrop/DraggableItem';\nimport SidebarItem from './SidebarItem';\nimport { handleResponse } from '../../utils/api/errorHandler';\nimport MenuButton from '../FormInputs/MenuButton';\nimport { styles } from './Sidebar.style';\n\nconst Sidebar = ({ route }) => {\n const {\n name,\n description,\n date,\n stops,\n organizationId,\n totalDistance,\n totalTime,\n } = route;\n const [items, setItems] = useState(stops);\n const [isDragDisabled, setIsDragDisabled] = useState(false);\n\n const { openDialog, closeDialog } = useDialogs();\n\n const { removeStop, reorderStops } = useRoutes();\n\n const [errorRouteMessage, setErrorRouteMessage] = useState('');\n // Hook Toast\n const { showToast } = useToasts();\n // useEffect to track chanes in the route stops in context\n useEffect(() => {\n // action on update of stops\n setItems(stops);\n // if there is a NaN value in distance, show error message\n stops.map((stop, i) => {\n if (Number.isNaN(Number(stop.distance)) && i > 0) {\n return setErrorRouteMessage(\n
\n \n {stop.position} \n
\n\n \n {stop.site_name}\n {stop.address}\n
\n \n \n {stop.distance\n || Number.isNaN(Number(stop.distance)) || stop.distance === 0\n ? `${stop.distance}`\n : `${stop.distance.toFixed(2)}`}\n \n {formattedTime}\n
\n\n \n
\n Sorry, we could not calculate driving directions from {stops[i - 1].site_name} to {stops[i].site_name}
);\n }\n return setErrorRouteMessage('');\n });\n }, [stops]);\n\n const onDragEnd = (result) => {\n // Disable the dragging until response is coming\n setIsDragDisabled(true);\n // if item dropped outside the dropable area\n if (!result.destination) {\n setIsDragDisabled(false);\n return;\n }\n // if item is droped in same position\n if (result.destination.index === result.source.index) {\n setIsDragDisabled(false);\n return;\n }\n // find dragged routeStop\n const routeStop = stops.find(\n (stop) => stop.id === parseInt(result.draggableId, 10),\n );\n // get reordered items with new position we use -1 bc our positions start with 1 but index of array start with 0\n const reorderedItems = reorder(\n items,\n result.source.index - 1,\n result.destination.index - 1,\n );\n /*\n we want to still update state before response comes bc getting response is taking time\n we store Items to set it back if there is an error acured while updating server\n */\n const storedItems = items;\n // set reorderted items to state\n setItems(reorderedItems);\n // make an api call to update server with new position\n\n reorderStops(routeStop.id, result.destination.index)\n .catch((error) => {\n // set items back to previous state if there is problem with updating database\n setItems(storedItems);\n // dispacth error to toast message\n showToast({ message: error.message, type: 'error' });\n })\n .finally(() => {\n // enable the dragging after response came either fulfilled or rejected\n setIsDragDisabled(false);\n });\n };\n\n // State to open/close route modal\n const [openRouteModal, setOpenRouteModal] = useState(false);\n\n /**\n * Open RouteModal to edit a route\n */\n const handleEdit = () => {\n setOpenRouteModal(true);\n };\n\n /**\n * Handle remove route stop\n */\n const handleDeleteStop = async (stopId) => {\n removeStop(stopId);\n closeDialog();\n };\n\n /**\n * Open a modal with custom message\n */\n const handleOpenDeleteModal = (stop) => {\n openDialog({\n message: `Do you want to delete the stop ${stop.site_name}?`,\n show: true,\n actions: [\n {\n label: 'Yes',\n onClick: () => {\n handleDeleteStop(stop.id);\n closeDialog();\n },\n },\n {\n label: 'No',\n variant: 'danger',\n onClick: closeDialog,\n },\n ],\n });\n };\n\n /**\n * Handle remove site from route\n */\n const handleDeleteRoute = (e, routeId) => {\n e.preventDefault();\n removeRoute(routeId, route.organizationId)\n .then(handleResponse)\n .then(() => {\n closeDialog();\n redirectToRoutesIndex();\n })\n .catch((error) => {\n closeDialog();\n showToast({ message: error.message, type: 'error' });\n });\n };\n\n /**\n * Open a modal with custom message for Route Delete\n */\n const handleOpenRouteDeleteModal = (e, routeId) => {\n openDialog({\n message: 'Do you want to delete this Route?',\n show: true,\n actions: [\n {\n label: 'Yes',\n onClick: () => {\n handleDeleteRoute(e, routeId);\n closeDialog();\n },\n },\n {\n label: 'No',\n variant: 'danger',\n onClick: closeDialog,\n },\n ],\n });\n };\n\n // create draggable items using DraggableItem and passing children component\n const draggableItems = items.map((item) => (\n \n \n \n {isDragDisabled ? (\n setOpenRouteModal(false)}\n />\n {errorRouteMessage }\n
\n );\n};\n\nSidebar.propTypes = {\n route: PropTypes.object.isRequired,\n};\n\nexport default Sidebar;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\n\nconst TagNameInput = ({\n name,\n value,\n setValue,\n type,\n className,\n}) => {\n const onChange = (e) => {\n setValue(e.target.value);\n };\n\n return (\n \n
\n\n \n
\n {name}
\n\n
\n \n
\n \n {description}\n
\n \n {formatShortDate(date)}\n {`${stops.length} sites`}\n
\n \n {totalDistance && totalDistance !== 'NaN' && `${totalDistance.toFixed(2)} mi`}\n \n {getTimeInHoursAndMins(totalTime)}\n \n
\n \n Calculating Distance and Time. Please wait...\n
\n ) : null}\n\n \n\n
\n );\n};\n\nTagModal.propTypes = {\n organization_id: PropTypes.number.isRequired,\n site_ids: PropTypes.array.isRequired,\n};\n\nexport default TagModal;\n","import React, { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useDrag, useDrop } from 'react-dnd';\nimport { PhotoView } from 'react-photo-view';\nimport MenuButton from '../../../../FormInputs/MenuButton';\nimport { ICON_COLOR_WHITE, SMALL_ICON_SIZE } from '../../../../../constants/theme';\n\nconst Card = (props) => {\n const ref = useRef(null);\n const {\n getActionItems,\n siteImage,\n activeImage,\n setActiveImage,\n targetIndex,\n setTargetIndex,\n setHoverIndex,\n updateImagePosition,\n index,\n hoverIndex,\n shouldHaveLineOnRight,\n shouldHaveLineOnLeft,\n siteId,\n } = props;\n\n const [{ isDragging }, drag, preview] = useDrag({\n type: 'card',\n item: () => {\n setActiveImage(siteImage);\n return { id: siteImage.id, url: siteImage.image.url };\n },\n end: () => {\n updateImagePosition(activeImage.id, targetIndex > activeImage.position ? targetIndex - 1 : targetIndex);\n },\n collect: (monitor) => ({\n isDragging: monitor.isDragging(),\n }),\n });\n\n const [{ hovered }, drop] = useDrop({\n accept: 'card',\n hover: (_, monitor) => {\n const hoverIndexLocal = index;\n if (hoverIndexLocal !== hoverIndex) {\n setHoverIndex(hoverIndexLocal);\n }\n // Determine rectangle on screen\n const hoverBoundingRect = ref.current?.getBoundingClientRect();\n\n // Get horizontal middle\n const midX = hoverBoundingRect.left\n + (hoverBoundingRect.right - hoverBoundingRect.left) / 2;\n // Determine mouse position\n const pointerOffset = monitor.getClientOffset();\n const newInsertIndex = pointerOffset.x < midX ? hoverIndexLocal : hoverIndexLocal + 1;\n setTargetIndex(newInsertIndex);\n },\n collect: (monitor) => ({\n hovered: monitor.isOver(),\n }),\n });\n\n drag(drop(ref));\n\n // creates white frame around dragged card prview\n useEffect(() => {\n preview(getEmptyImage(), {\n captureDraggingState: true,\n });\n }, [preview]);\n const opacity = isDragging ? 0.4 : 1;\n return (\n \n
\n \n
\n \n
\n \n
\n Create New Tag
\n \n\n \n
\n \n \n
\n \n {shouldHaveLineOnLeft && hovered && (\n \n )}\n\n \n \n \n {index === 0 && }\n
\n {shouldHaveLineOnRight && hovered && (\n \n )}\n \n );\n};\n\nCard.defaultProps = {\n activeImage: null,\n targetIndex: -1,\n index: null,\n hoverIndex: -1,\n shouldHaveLineOnRight: false,\n shouldHaveLineOnLeft: false,\n siteId: null,\n};\n\nCard.propTypes = {\n getActionItems: PropTypes.func.isRequired,\n siteImage: PropTypes.object.isRequired,\n activeImage: PropTypes.object,\n setActiveImage: PropTypes.func.isRequired,\n targetIndex: PropTypes.number,\n setTargetIndex: PropTypes.func.isRequired,\n setHoverIndex: PropTypes.func.isRequired,\n updateImagePosition: PropTypes.func.isRequired,\n index: PropTypes.number,\n hoverIndex: PropTypes.number,\n shouldHaveLineOnRight: PropTypes.bool,\n shouldHaveLineOnLeft: PropTypes.bool,\n siteId: PropTypes.number,\n};\n\nexport default Card;\n","import React from 'react';\nimport { useDragLayer } from 'react-dnd';\nimport CardsDragPreview from './CardsDragPreview';\n\nconst layerStyles = {\n position: 'fixed',\n pointerEvents: 'none',\n zIndex: 100,\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n};\n\nconst getItemStyles = (currentOffset) => {\n if (!currentOffset) {\n return {\n display: 'none',\n };\n }\n const { x, y } = currentOffset;\n return {\n transform: `translate(${x}px, ${y}px)`,\n filter: 'drop-shadow(0 2px 12px rgba(0,0,0,0.45))',\n };\n};\n\nconst CardDragLayer = () => {\n const {\n isDragging, item, currentOffset,\n } = useDragLayer(\n (monitor) => ({\n item: monitor.getItem(),\n itemType: monitor.getItemType(),\n currentOffset: monitor.getSourceClientOffset(),\n isDragging: monitor.isDragging(),\n }),\n );\n\n if (!isDragging) {\n return null;\n }\n\n return (\n Cover photo
\n
\n \n
\n );\n};\nexport default CardDragLayer;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst CardsDragPreview = ({ card }) => {\n return (\n \n
\n \n \n
\n \n );\n};\n\nCardsDragPreview.propTypes = {\n card: PropTypes.object.isRequired,\n};\n\nexport default CardsDragPreview;\n","import { DndProvider } from 'react-dnd';\nimport { TouchBackend } from 'react-dnd-touch-backend';\nimport React, { useState } from 'react';\nimport { PropTypes } from 'prop-types';\nimport CardDragLayer from './CardDragLayer';\nimport Card from './Card';\n\nconst DndGallery = ({\n initCards, getActionItems, updateImagePosition, siteId,\n}) => {\n const [activeImage, setActiveImage] = useState(null);\n const [targetIndex, setTargetIndex] = useState(-1);\n const [hoverIndex, setHoverIndex] = useState(-1);\n\n return (\n \n
\n \n 
\n
\n {contact.name}
\n \n| \n | \n
, 'If choose Yes, \"Update coordinates manually\" will be disabled.'],\n show: true,\n actions: [\n {\n label: 'Yes',\n onClick: () => { updateCoordsYes(); onSubmit(event, false); },\n }, {\n label: 'No',\n variant: 'danger',\n onClick: () => { handleCloseUpdateCoordsModal(); onSubmit(event, true); },\n },\n ],\n });\n } else {\n setIsSaveButtonClicked(true);\n onSubmit(event, coordsSetManually);\n }\n };\n const handleNewImage = (img) => {\n setImages(prev => [...prev, { site_image: {}, image: img.image.url }]);\n };\n return (\n
\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n\n \n
\n \n { setSiteType(e.target.value); }}\n />\n
\n \n
\n \n ['e', 'E', '+', '-', '.'].includes(evt.key) && evt.preventDefault()}\n />\n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n { setH2a(e.target.value); }}\n id=\"select_h2a\"\n />\n
\n \n setIcon(e?.value ? e.value : null)}\n id=\"select_icon\"\n />\n
\n \n
\n\n \n
\n \n { setAddress1(e.target.value); setIsLocationChanged(true); }}\n />\n
\n \n
\n \n
\n\n \n\n \n
\n \n { setCity(e.target.value); setIsLocationChanged(true); }}\n />\n
\n \n
\n \n
\n\n \n
\n \n { setState(e.target.value); setIsLocationChanged(true); }}\n isRequired\n enableEmptyOption\n emptyLabel=\"Choose the state\"\n id=\"select_state\"\n />\n
\n \n { setZipCode(e.target.value); setIsLocationChanged(true); }}\n />\n
\n \n
\n\n \n
\n\n \n Update coordinates manually\n \n Vamos automatically adds lat/long coordinates based on the given address. To update these coordinates manually, toggle this button and enter in your own coordinates, OR drag the marker on the map.\n \n)}\n >\n
\n {coordsSetManually && (\n \n
\n )}\n \n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n \n
\n \n { setStatus(e.target.value); }}\n id=\"select_status\"\n />\n
\n \n
\n \n
\n {!site.id && (\n \n
\n \n
\n \n \n { handleBackButtonClick(e); }}\n >\n Back\n \n \n Save\n \n
\n \n Would you like to save your changes?
\n\n {siteImages.length > 1 && site.id && onExpand(e)}\n >\n Upload photo\n \n
\n Drag and drop images to change the order.
}\nUpload Site Image
\n- \n {tabs.map(tab => (\n
- \n
\n \n
\n \n
\n );\n};\n\nSiteContactHeader.defaultProps = {\n siteId: null,\n};\n\nSiteContactHeader.propTypes = {\n siteId: PropTypes.number,\n contacts: PropTypes.array.isRequired,\n onCreate: PropTypes.func.isRequired,\n};\n\nexport default SiteContactHeader;\n","export const styles = {\n contactsTitle: {\n backgroundColor: 'grey',\n cursor: 'pointer',\n },\n createDiv: {\n zIndex: '1',\n cursor: 'pointer',\n },\n createIcon: {\n color: 'light',\n cursor: 'pointer',\n },\n contactCard: {\n border: 'none',\n },\n showCard: {\n cursor: 'pointer',\n },\n editIcon: {\n color: '#40b870',\n cursor: 'pointer',\n },\n};\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { styles } from './SiteContactItem.component.style';\nimport { useCurrentUser, useDialogs } from '../../../../../hooks';\nimport MenuButton from '../../../../FormInputs/MenuButton';\nimport { accessToDeleteBtn } from '../../../../../utils/accessToDeleteBtn';\n\nconst SiteContactItem = ({\n key, contact, onShow, onEdit, onDelete,\n}) => {\n const { openDialog, closeDialog } = useDialogs();\n const { isManager: currentRoleIsManager } = useCurrentUser();\n\n const handleOpenDeleteModal = (e, contactId) => {\n openDialog({\n message: 'Are you sure you want to remove this contact from the site?',\n show: true,\n actions: [\n {\n label: 'Yes',\n onClick: () => {\n onDelete(e, contactId);\n closeDialog();\n },\n },\n {\n label: 'No',\n variant: 'danger',\n onClick: closeDialog,\n },\n ],\n });\n };\n\n const actionItemButtons = [\n { label: 'Edit', onClick: (e) => onEdit(e, contact.id) },\n { label: 'Delete', onClick: (e) => handleOpenDeleteModal(e, contact.id) },\n ];\n const actionItems = accessToDeleteBtn(actionItemButtons, currentRoleIsManager);\n\n return (\n \n {siteContactHeaderText}\n
\n \n\n \n
\n );\n};\n\nSiteContactItem.propTypes = {\n key: PropTypes.number.isRequired,\n contact: PropTypes.object.isRequired,\n onShow: PropTypes.func.isRequired,\n onEdit: PropTypes.func.isRequired,\n onDelete: PropTypes.func.isRequired,\n};\n\nexport default SiteContactItem;\n","export const styles = {\n contactsTitle: {\n backgroundColor: 'grey',\n cursor: 'pointer',\n },\n createDiv: {\n zIndex: '1',\n cursor: 'pointer',\n },\n createIcon: {\n color: 'light',\n cursor: 'pointer',\n },\n contactCard: {\n border: 'none',\n },\n showCard: {\n cursor: 'pointer',\n },\n editIcon: {\n color: '#40b870',\n cursor: 'pointer',\n },\n};\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport SiteContactItem from '../SiteContactItem';\n\nconst SiteContactList = ({\n siteId, contacts, onShow, onEdit, onDelete,\n}) => {\n return (\n contacts.length ? (\n contacts.map((contact) => (\n \n
\n );\n};\n\nSiteContacts.propTypes = {\n contacts: PropTypes.array.isRequired,\n siteData: PropTypes.object.isRequired,\n setSiteData: PropTypes.func.isRequired,\n};\n\nexport default SiteContacts;\n","import React from 'react';\nimport Table from 'react-bootstrap/Table';\nimport { PropTypes } from 'prop-types';\nimport { formatShortDateWithTimeZone } from '../../../../../utils/dates';\nimport { getContact } from '../../../../../utils/api/contact';\nimport { useToasts } from '../../../../../hooks';\nimport { redirectToContact } from '../../../../../utils/navigation';\n\nconst ContactHistoryTable = ({ ContactHistories, organizationId }) => {\n const { showToast } = useToasts();\n const checkContact = (id) => {\n getContact(organizationId, id)\n .then((response) => {\n if (response.status === 200) {\n redirectToContact(id);\n } else if (response.status === 404) {\n showToast({ message: 'This contact has been deleted', type: 'error' });\n }\n })\n .catch((error) => {\n showToast({ message: error, type: 'error' });\n });\n };\n const columnElements = () => {\n return ContactHistories.map((contactHistory) => {\n return (\n \n
\n \n
\n {contactHistory.user_name}
\n\n
\n \n checkContact(contactHistory.contact_changes.contact_id)}\n >{contactHistory.contact_changes.contact_name}\n \n
\n {contactHistory.action === 'create' ? 'Added:' : 'Removed:'}
\n| Date | \nChanges | \n
|---|
\n \n \n \n Contact Update History\n \n \n
\n \n
\n ) : <>\n }\n \n );\n};\n\nContactHistory.propTypes = {\n siteData: PropTypes.object.isRequired,\n siteId: PropTypes.object.isRequired,\n organizationId: PropTypes.number.isRequired,\n};\nexport default ContactHistory;\n","import React from 'react';\nimport Table from 'react-bootstrap/Table';\nimport { HiArrowLongRight } from 'react-icons/hi2';\nimport { PropTypes } from 'prop-types';\nimport startcase from 'lodash/startCase';\nimport { formatShortDateWithTimeZone, customDateFormatter } from '../../../../utils/dates';\n\nconst svg = {\n marginLeft: '20px',\n marginRight: '40px',\n};\n\nconst formatLabels = (label) => {\n let newLabel = label;\n if (label === 'alternate_ids') {\n newLabel = ('Alternate Id(s)');\n } else if (label === 'h2a') {\n newLabel = 'H2A';\n } else {\n newLabel = startcase(label);\n }\n return newLabel;\n};\n\nconst formatValue = (value, label) => {\n if (typeof value === 'boolean') return value ? 'Yes' : 'No';\n if (typeof value === 'number') return value;\n\n if (typeof value === 'string') {\n // If the string is empty or contains only whitespace, return 'No Value'\n if (value.trim() === '') return 'No Value';\n\n // Regular expression to match dates in the format M/D/YY\n const dateRegex = /^([1-9]|1[012])\\/([1-9]|[12][0-9]|3[01])\\/\\d{2}/;\n\n // If string value starts and ends with brackets, remove the brackets\n if (value.startsWith('[') && value.endsWith(']')) {\n return value.slice(1, -1);\n }\n\n // If label is 'arrival' or 'departure', or value matches a date pattern, format the date\n if (['arrival', 'departure'].includes(label) || dateRegex.test(value)) {\n return customDateFormatter(value, 'll');\n }\n }\n\n // If value is null or undefined, return 'No Value'\n if (!value) return 'No Value';\n\n // If none of the above conditions apply, return the value itself\n return value;\n};\n\nconst formatChanges = (siteChanges) => {\n // Return an array of objects that have a label, formattedOldValue, formattedTrueValue\n const formattedChanges = Object.entries(siteChanges).map((change) => {\n // Offline created sites are returning history format a little different\n // The unhandled formatting differences is breaking the details page on offline created sites.\n // As a temp fix adding Nullish coalescing (??) operators to lines 51 and ternary operator(?) 54 Both of these should be removed once backend makes changes for a more consistent response\n const fieldLabel = change[0];\n const fieldHistory = change[1];\n\n const { oldValue, newValue } = fieldHistory ?? { oldValue: undefined, newValue: undefined };\n\n const formattedOldValue = formatValue(oldValue, fieldLabel);\n // newValue comes back as both undefined and null. We only want to use fieldHistory when newValue is undefined.\n // When removing fields (custom date field particularly) our newValue becomes null.\n const formattedNewValue = formatValue(newValue !== undefined ? newValue : fieldHistory, fieldLabel);\n return {\n label: formatLabels(change[0]),\n formattedOldValue,\n formattedNewValue,\n };\n });\n return formattedChanges;\n};\n\nconst SiteHistoryTable = ({ siteHistories }) => {\n const columnElements = () => {\n return siteHistories.map((siteHistory) => {\n const formattedChanges = formatChanges(siteHistory.site_changes);\n return (\n \n
\n {siteHistory.user_name}
\n\n
\n ))}\n {change.label}
\n\n
\n {change.formattedOldValue}
\n{change.formattedNewValue}
\n| Date | \nChanges | \n
|---|
\n \n \n \n Site Update History\n \n \n
\n \n
\n ) : <>\n }\n \n );\n};\n\nSiteHistory.propTypes = {\n pagination: PropTypes.object.isRequired,\n setPagination: PropTypes.func.isRequired,\n siteId: PropTypes.number.isRequired,\n organizationId: PropTypes.number.isRequired,\n};\nexport default SiteHistory;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport Linkify from 'react-linkify';\n\nconst SiteField = ({ name, attribute }) => {\n return (\n {name}: {attribute || 'No Info'}
\n );\n};\n\nSiteField.propTypes = {\n name: PropTypes.string,\n attribute: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]),\n};\n\nSiteField.defaultProps = {\n name: '',\n attribute: null,\n};\n\nexport default SiteField;\n","export const styles = {\n editIcon: {\n color: '#40b870',\n },\n infoLink: {\n color: '#40b870',\n },\n downIcon: {\n color: '#40b870',\n },\n};\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { OverlayTrigger, Tooltip } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faInfoCircle, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';\nimport CustomFieldShow from '../../../CustomField/CustomFieldShow';\nimport SiteField from './SiteField/index';\nimport { redirectToSiteEdit, redirectToUrl } from '../../../../utils/navigation';\nimport { styles } from './SiteInfo.component.style';\nimport { getH2ANameFromH2AValue, removeSite } from '../../../../utils/api/site';\nimport { useCurrentUser, useDialogs, useToasts } from '../../../../hooks';\nimport MenuButton from '../../../FormInputs/MenuButton';\nimport { accessToDeleteBtn } from '../../../../utils/accessToDeleteBtn';\nimport { formatNumericDate } from '../../../../utils/dates';\n\nconst SiteInfo = ({\n site,\n values,\n modelFormItems,\n}) => {\n // Hook Toast\n const { showToast } = useToasts();\n const { openDialog, closeDialog } = useDialogs();\n const { isManager: currentRoleIsManager } = useCurrentUser();\n const coordinatesText = `${site.latitude}, ${site.longitude}`;\n const tooltipContent = site.coords_set_manually\n ? 'These coordinates were manually updated by a Vamos user.'\n : 'These coordinates were automatically geocoded based on the address field. To manually update them, drag the marker on map or enter in new coordinates on Site Edit page.';\n const estimateWarning = 'Based on automated geolocating from Google, the coordinates and the address may be pointing to different locations, so be extra careful when you are navigating to the site.';\n const attributes = {\n 'Site ID': site.id,\n 'Creation Date': formatNumericDate(site.created_at),\n 'Alternate ID(s)': site.alternate_ids,\n 'Alternate Name(s)': site.alternate_names,\n Description: site.description,\n 'Site Type': site.site_type,\n Units: site.units,\n 'Worker count': site.worker_count,\n Arrival: site.arrival ? formatNumericDate(site.arrival) : null,\n Departure: site.departure ? formatNumericDate(site.departure) : null,\n H2A: getH2ANameFromH2AValue(site.h2a) || 'No Data',\n 'Address line 1': site.address1,\n 'Address line 2': site.address2,\n City: site.city,\n County: site.county,\n State: site.state,\n 'Zip Code': site.zip_code,\n Region: site.region,\n Coordinates: (\n <>\n {coordinatesText}\n , 'All associated notes and visits will also be deleted.'],\n show: true,\n actions: [\n {\n label: 'Yes',\n onClick: () => onDeleteSite(site),\n },\n {\n label: 'No',\n variant: 'danger',\n onClick: closeDialog,\n },\n ],\n });\n };\n\n const actionItemButtons = [\n { label: 'Edit', onClick: (e) => onEditClicked(e) },\n { label: 'Delete', onClick: () => handleOpenDeleteModal(site) },\n ];\n const actionItems = accessToDeleteBtn(actionItemButtons, currentRoleIsManager);\n\n return (\n
\n
\n );\n};\n\nSiteInfo.propTypes = {\n site: PropTypes.object.isRequired,\n modelFormItems: PropTypes.array.isRequired,\n values: PropTypes.object.isRequired,\n};\n\nexport default SiteInfo;\n","export const styles = {\n noteTitle: {\n background: '#018544',\n },\n onCreateIcon: {\n color: 'light',\n cursor: 'pointer',\n },\n};\n","export const styles = {\n noteItemCard: {\n border: 'none',\n },\n noteDate: {\n color: '#495057',\n },\n noteEdit: {\n color: '#40b870',\n cursor: 'pointer',\n },\n noteDelete: {\n color: '#6c757d',\n cursor: 'pointer',\n },\n cardBody: {\n cursor: 'pointer',\n },\n};\n","import React, { useState } from 'react';\nimport { PropTypes } from 'prop-types';\nimport { redirectToSiteNote, redirectToSiteNoteEdit } from '../../../../../utils/navigation';\nimport { formatShortDate } from '../../../../../utils/dates';\nimport { styles } from './SiteNoteItem.component.style';\nimport { useCurrentUser, useDialogs } from '../../../../../hooks';\nimport MenuButton from '../../../../FormInputs/MenuButton';\nimport { accessToDeleteBtn } from '../../../../../utils/accessToDeleteBtn';\nimport { capitalizeFirstLetter } from '../../../../../utils/api';\n\nconst SiteNoteItem = ({\n title,\n content,\n status,\n id,\n timestamp,\n color,\n siteId,\n onDeleteNote,\n}) => {\n const [open, setOpen] = useState(false);\n const localizedNoteDate = formatShortDate(timestamp);\n const { openDialog, closeDialog } = useDialogs();\n const { isManager: currentRoleIsManager } = useCurrentUser();\n\n const onCollapse = (e) => {\n e.preventDefault();\n const value = !open;\n setOpen(value);\n };\n const onShow = (e, noteId) => {\n e.preventDefault();\n redirectToSiteNote(siteId, noteId);\n };\n\n const onEdit = (e, noteId) => {\n e.preventDefault();\n redirectToSiteNoteEdit(siteId, noteId);\n };\n\n const handleOpenDeleteModal = (e, noteId) => {\n openDialog({\n message: 'Are you sure you want to delete this note? This cannot be undone.',\n show: true,\n actions: [\n {\n label: 'Yes',\n onClick: () => {\n onDeleteNote(e, noteId);\n closeDialog();\n },\n },\n {\n label: 'No',\n variant: 'danger',\n onClick: closeDialog,\n },\n ],\n });\n };\n\n const actionItemButtons = [\n { label: 'Edit', onClick: (e) => onEdit(e, id) },\n { label: 'Delete', onClick: (e) => handleOpenDeleteModal(e, id) },\n ];\n const actionItems = accessToDeleteBtn(actionItemButtons, currentRoleIsManager);\n\n return (\n \n
\n \n
\n \n
\n \n \n
\n {Object.keys(attributes).map((item, index) => (\n { siteRef[index] = ref; }}>\n
\n ))}\n \n \n
\n \n
\n );\n};\n\nSiteNoteItem.propTypes = {\n title: PropTypes.string.isRequired,\n content: PropTypes.string.isRequired,\n status: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n timestamp: PropTypes.string.isRequired,\n color: PropTypes.string.isRequired,\n siteId: PropTypes.number.isRequired,\n onDeleteNote: PropTypes.func.isRequired,\n};\n\nexport default SiteNoteItem;\n\n","import React, { useState, useEffect } from 'react';\nimport { PropTypes } from 'prop-types';\nimport SiteNoteItem from './SiteNoteItem';\nimport { redirectToSiteNoteNew } from '../../../../utils/navigation';\nimport { removeNote, returnTextBasedOnCount, getPriorityColor } from '../../../../utils/api/site';\nimport { styles } from './SiteNote.component.style';\n\nconst SiteNotes = ({\n site,\n}) => {\n const [notes, setNotes] = useState([]);\n const siteNotesHeaderText = returnTextBasedOnCount(notes.length, 'Note');\n\n useEffect(() => {\n setNotes(site.notes || []);\n }, [site]);\n\n const onCreate = (e) => {\n e.preventDefault();\n redirectToSiteNoteNew(site.id);\n };\n\n const onDeleteNote = (e, noteId) => {\n e.preventDefault();\n removeNote({ organization_id: site.organization_id }, noteId)\n .then(() => {\n setNotes(notes.filter(note => note.id !== noteId));\n });\n };\n\n return (\n \n \n \n
\n {open ? (\n \n ) : null}\n \n
\n \n
\n );\n};\n\nSiteNotes.propTypes = {\n site: PropTypes.object.isRequired,\n};\n\nexport default SiteNotes;\n","export const styles = {\n selectTag: {\n position: 'unset',\n },\n inputTag: {\n cursor: 'pointer',\n border: '1px solid #40b870',\n borderRadius: '0.25rem',\n backgroundColor: '#fff',\n },\n assignedTag: {\n color: '#6c757d',\n cursor: 'pointer',\n paddingLeft: 10,\n },\n};\n","import React, {\n useState, useEffect,\n} from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FaTimes } from 'react-icons/fa';\nimport { addSiteToTag } from '../../../../utils/api/tag';\nimport { removeTag } from '../../../../utils/api/site';\nimport { styles } from './SiteTag.component.style';\nimport { useDialogs, useToasts } from '../../../../hooks';\nimport IconButton from '../../../FormInputs/IconButton';\n\nconst SiteTags = ({ site, organizationTags }) => {\n // Hook Toast\n const { showToast } = useToasts();\n\n const [assignedTags, setAssignedTags] = useState(site.tags || []);\n const [unassignedTags, setUnassignedTags] = useState(\n organizationTags || [],\n );\n const [selectedValue, setSelectedValue] = useState('');\n const { openDialog, closeDialog } = useDialogs();\n\n useEffect(() => {\n if (site.tags && site.tags.length > 0) {\n const newUnassignedTags = organizationTags.filter(\n (elem) => !site.tags.find(({ id }) => elem.id === id),\n );\n setUnassignedTags(newUnassignedTags);\n }\n setAssignedTags(site.tags);\n }, [site, organizationTags]);\n\n const onSelectTag = (e) => {\n e.preventDefault();\n setSelectedValue(e.target.value);\n };\n\n const onAddTag = (e) => {\n e.preventDefault();\n const formData = {\n organization_id: site.organization_id,\n tag_site: {\n organization_id: site.organization_id,\n site_id: site.id,\n },\n };\n\n addSiteToTag(formData, selectedValue)\n .then((response) => response.json())\n .then((data) => {\n setAssignedTags([...assignedTags, data.tag]);\n setUnassignedTags(\n unassignedTags.filter(({ id }) => id !== data.tag.id),\n );\n })\n .then(setSelectedValue(''))\n .catch((error) => {\n if (error.message.includes('JSON')) {\n showToast({ message: 'Please be sure tag exists', type: 'error' });\n } else {\n showToast({ message: error.message, type: 'error' });\n }\n });\n };\n\n const onDelete = (e, tagId, tagName) => {\n e.preventDefault();\n removeTag(tagId, site.id, site.organization_id)\n .then((response) => response.json())\n .then((data) => {\n if (data.success) {\n setAssignedTags(assignedTags.filter(({ id }) => id !== tagId));\n setUnassignedTags([\n ...unassignedTags,\n { id: tagId, name: tagName },\n ]);\n }\n })\n .catch((error) => {\n showToast({ message: error.message, type: 'error' });\n });\n };\n\n const handleOpenDeleteModal = (e, tagId, tagName) => {\n openDialog({\n message: 'Are you sure you want to delete this tag from the site?',\n show: true,\n actions: [\n {\n label: 'Yes',\n onClick: () => {\n onDelete(e, tagId, tagName);\n closeDialog();\n },\n },\n {\n label: 'No',\n variant: 'danger',\n onClick: closeDialog,\n },\n ],\n });\n };\n\n return (\n \n
\n {notes.map((note) => (\n \n {siteNotesHeaderText}\n
\n \n\n <>\n
\n );\n};\n\nSiteTags.propTypes = {\n site: PropTypes.object.isRequired,\n organizationTags: PropTypes.array.isRequired,\n};\n\nexport default SiteTags;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\n\nconst arrowStyles = {\n borderColor: 'black',\n backgroundColor: 'rgb(1, 133, 68)',\n padding: 5,\n top: '50%',\n bottom: 'auto',\n transform: 'translateY(-50%)',\n};\n\nconst CarouselControlButton = ({ title, type }) => {\n return (\n \n onSelectTag(e)}\n >\n \n {unassignedTags.map((tag) => (\n \n ))}\n \n
\n \n onAddTag(e)}\n className=\"btn btn-outline-secondary\"\n >\n Submit\n \n
\n \n Tags: \n {assignedTags?.map((tag) => (\n
\n \n \n {tag.name}\n
\n ))}\n \n
\n \n
\n \n \n handleInputChange(e)}\n />\n
\n \n {siteImages?.length\n ? siteImages.map((siteImage) => renderImage(siteImage))\n :
\n {siteImages?.length > 1\n ? (\n \n
\n )\n\n : null}\n\n \n );\n};\n\nSiteImagesCarousel.defaultProps = {\n primaryImgId: -1,\n};\n\nSiteImagesCarousel.propTypes = {\n siteImages: PropTypes.array.isRequired,\n primaryImgId: PropTypes.number,\n\n};\n\nexport default SiteImagesCarousel;\n","import React, { useEffect, useState } from 'react';\nimport { PropTypes } from 'prop-types';\nimport DialogModal from '../../../../DialogModal';\nimport { setPrimaryImage } from '../../../../../utils/api/site';\nimport SiteImagesCarousel from './SiteImagesCarousel';\n\nconst SiteImage = ({\n siteImages,\n siteId,\n organizationId,\n}) => {\n const [primaryImgId, setPrimaryImageId] = useState(null);\n const [alertBody, setAlertBody] = useState({\n show: false,\n title: '',\n message: '',\n shouldShowCheckbox: false,\n actions: [],\n });\n\n useEffect(() => {\n // primaryImgId is used to help fix the following edge case:\n // 1. A different image is set as the primary imag inside onSetPrimaryImage()\n // 2. The siteImages are not updated because backend doesn't return the updated images\n // 3. The primary image is deleted and causes images to no longer display\n if (siteImages && siteImages.length > 0) {\n const currentPrimaryImg = siteImages.find(img => img?.primary);\n if (currentPrimaryImg) {\n setPrimaryImageId(currentPrimaryImg.id);\n } else {\n // default to first image to avoid displaying nothing\n const firstImgId = siteImages[0]?.id;\n setPrimaryImageId(firstImgId);\n // API call to help prevent site cards from displaying nothing\n setPrimaryImage({ organization_id: organizationId }, siteId, firstImgId);\n }\n }\n }, [siteImages, siteId, organizationId]);\n\n const handleCloseImageModal = () => {\n setAlertBody({ show: false });\n };\n\n return (\n \n
\n );\n};\n\nSiteImage.propTypes = {\n siteId: PropTypes.number.isRequired,\n organizationId: PropTypes.number.isRequired,\n siteImages: PropTypes.arrayOf(PropTypes.object).isRequired,\n};\n\nexport default SiteImage;\n","export const styles = {\n siteVisitTitle: {\n background: '#018544',\n },\n createIcon: {\n color: 'light',\n cursor: 'pointer',\n },\n};\n","export const styles = {\n visitHeaderDiv: {\n cursor: 'pointer',\n },\n cardItem: {\n color: '#40b870',\n cursor: 'pointer',\n },\n deleteVisit: {\n color: '#6c757d',\n cursor: 'pointer',\n },\n cardBody: {\n cursor: 'pointer',\n },\n tooltipTrigger: {\n position: 'relative',\n display: 'inline',\n },\n tooltip: {\n width: '100%',\n backgroundColor: '#018544',\n color: '#ffffff',\n textAlign: 'center',\n padding: '3px 6px',\n borderRadius: '0.25rem',\n border: '1px solid #ffffff',\n textTransform: 'uppercase',\n fontSize: 12,\n fontWeight: 'bold',\n position: 'relative',\n zIndex: '1',\n },\n tooltipPosition: {\n bottom: '105%',\n left: '5%',\n },\n};\n","import React, { useState } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck } from '@fortawesome/free-solid-svg-icons';\nimport Icon from '@mdi/react';\nimport { mdiAccountArrowRight } from '@mdi/js';\nimport { PropTypes } from 'prop-types';\nimport { redirectToSiteVisit, redirectToSiteVisitEdit } from '../../../../../utils/navigation';\nimport { formatShortDate } from '../../../../../utils/dates';\nimport { styles } from './SiteVisitItem.component.style';\nimport MenuButton from '../../../../FormInputs/MenuButton';\nimport { useCurrentUser, useDialogs } from '../../../../../hooks';\nimport { accessToDeleteBtn } from '../../../../../utils/accessToDeleteBtn';\n\nconst SiteVisitItem = ({\n leader,\n purpose,\n workersInteracted,\n workersTotal,\n visitors,\n donations,\n needsConcerns,\n otherNotes,\n id,\n date,\n siteId,\n onDeleteVisit,\n completed,\n}) => {\n const [open, setOpen] = useState(false);\n const { openDialog, closeDialog } = useDialogs();\n const localizedVisitDate = formatShortDate(date);\n const { isManager: currentRoleIsManager } = useCurrentUser();\n\n const onCollapse = (e) => {\n e.preventDefault();\n const value = !open;\n setOpen(value);\n };\n\n const onShow = (e, noteId) => {\n e.preventDefault();\n redirectToSiteVisit(siteId, noteId);\n };\n\n const onEdit = (e, noteId) => {\n e.preventDefault();\n redirectToSiteVisitEdit(siteId, noteId);\n };\n\n const handleOpenDeleteModal = (e, visitId) => {\n openDialog({\n message: 'Are you sure you want to delete this visit? This cannot be undone.',\n actions: [\n {\n label: 'Yes',\n onClick: () => {\n onDeleteVisit(e, visitId);\n closeDialog();\n },\n },\n {\n label: 'No',\n variant: 'danger',\n onClick: closeDialog,\n },\n ],\n });\n };\n\n const actionItemButtons = [\n { label: 'Edit', onClick: (e) => onEdit(e, id) },\n { label: 'Delete', onClick: (e) => handleOpenDeleteModal(e, id) },\n ];\n const actionItems = accessToDeleteBtn(actionItemButtons, currentRoleIsManager);\n\n // Set up for when mouse hovers over visit icons, it renders tooltip\n const [isHover, setIsHover] = useState(false);\n\n const handleMouseEnter = () => {\n setIsHover(true);\n };\n\n const handleMouseLeave = () => {\n setIsHover(false);\n };\n\n const tooltip = {\n opacity: isHover ? '1' : '0',\n };\n\n return (\n \n
\n {open ? (\n \n ) : null}\n \n\n );\n};\n\nSiteVisitItem.defaultProps = {\n workersInteracted: null,\n workersTotal: null,\n needsConcerns: '',\n};\n\nSiteVisitItem.propTypes = {\n leader: PropTypes.string.isRequired,\n purpose: PropTypes.string.isRequired,\n workersInteracted: PropTypes.number,\n workersTotal: PropTypes.number,\n visitors: PropTypes.string.isRequired,\n donations: PropTypes.string.isRequired,\n needsConcerns: PropTypes.string,\n otherNotes: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n date: PropTypes.instanceOf(Date).isRequired,\n siteId: PropTypes.number.isRequired,\n onDeleteVisit: PropTypes.func.isRequired,\n completed: PropTypes.string.isRequired,\n};\n\nexport default SiteVisitItem;\n","import React, { useState, useEffect } from 'react';\nimport { PropTypes } from 'prop-types';\nimport SiteVisitItem from './SiteVisitItem';\nimport { redirectToSiteVisitNew } from '../../../../utils/navigation';\nimport { removeVisit, returnTextBasedOnCount } from '../../../../utils/api/site';\nimport { styles } from './SiteVisit.component.style';\nimport { useToasts } from '../../../../hooks';\n\nconst SiteVisits = ({\n site,\n}) => {\n // Hook Toast\n const { showToast } = useToasts();\n const [visits, setVisits] = useState([]);\n const siteVisitHeaderText = returnTextBasedOnCount(visits.length, 'Visit');\n\n useEffect(() => {\n setVisits(site.visits || []);\n }, [site]);\n\n const onCreate = (e) => {\n e.preventDefault();\n redirectToSiteVisitNew(site.id);\n };\n\n const onDeleteVisit = (e, visitId) => {\n e.preventDefault();\n removeVisit({ organization_id: site.organization_id }, visitId)\n .then((response) => {\n if (!response.ok) {\n throw new Error(response.error);\n }\n setVisits(visits.filter(visit => visit.id !== visitId));\n })\n .catch((error) => {\n showToast({ message: error.message, type: 'error' });\n });\n };\n\n return (\n \n {completed\n ?
\n \n {completed ? 'completed' : 'attempted'}\n
\n \n
\n );\n};\n\nSiteVisits.propTypes = {\n site: PropTypes.object.isRequired,\n};\n\nexport default SiteVisits;\n","import React, { useState, useEffect } from 'react';\nimport { PropTypes } from 'prop-types';\nimport Icon from '@mdi/react';\nimport _ from 'lodash';\nimport { FaImage, FaMap } from 'react-icons/fa';\nimport IconButton from '../../FormInputs/IconButton';\nimport { ICON_COLOR_GRAY, MEDIUM_ICON_SIZE } from '../../../constants/theme';\nimport SiteInfo from './SiteInfo';\nimport SiteTags from './SiteTags';\nimport SiteContacts from './SiteContacts';\nimport SiteNotes from './SiteNotes';\nimport SiteVisits from './SiteVisits';\nimport SiteHistory from './SiteHistories';\nimport { getSiteInfo, getIcon } from '../../../utils/api/site';\nimport { DialogsProvider } from '../../../providers/DialogProvider';\nimport { ToastProvider } from '../../../providers';\nimport { withContextProvider } from '../../../hoc';\nimport { useToasts } from '../../../hooks';\nimport SiteMap from '../SiteMap';\nimport SiteImage from './SiteView/SiteImage';\nimport { CurrentUserProvider } from '../../../providers/CurrentUserProvider';\nimport { INITIAL_PAGINATION } from '../../../constants/pagination';\nimport ContactHistory from './SiteHistories/ContactHistories';\nimport paginationUpdate from '../../../utils/pagination/paginationUpdate';\n\nconst SiteShow = ({\n siteId,\n organizationId,\n organizationTags,\n values,\n modelFormItems,\n isManager,\n}) => {\n // Hook Toast\n const { showToast } = useToasts();\n const [siteData, setSiteData] = useState({});\n const [imageView, setImageView] = useState(true);\n const [images, setImages] = useState([]);\n const [siteWithLastVisit, setSiteWithLastVisit] = useState(siteData);\n const [pagination, setPagination] = useState(INITIAL_PAGINATION);\n\n useEffect(() => {\n setImages(siteData.site_images || []);\n /* Because we need last visit value in Site Info Window,\n in here we are getting this information from site.visits\n and adding new field to site object to be used */\n const orderedVisit = _.orderBy(siteData.visits, ['date'], ['desc']);\n const lastVisitDate = orderedVisit.length ? orderedVisit[0].date : null;\n setSiteWithLastVisit({ ...siteData, last_visit_date: lastVisitDate });\n }, [siteData]);\n\n useEffect(() => {\n getSiteInfo(siteId, organizationId)\n .then((response) => response.json())\n .then(data => {\n if (!data.site) {\n throw new Error(data.error);\n }\n if (data.site.site_histories) {\n paginationUpdate('fetch', data.site.site_histories, setPagination);\n }\n setSiteData(data.site);\n })\n .catch((error) => {\n showToast({ message: error.message, type: 'error' });\n });\n }, [siteId, organizationId, showToast]);\n\n const showImage = () => {\n setImageView(true);\n };\n\n const showMap = () => {\n setImageView(false);\n };\n\n return (\n \n
\n {visits.map((visit) => (\n \n {siteVisitHeaderText}\n
\n \n\n
\n \n
\n \n
\n \n {siteData.icon &&
\n {siteData.name}
\n\n
\n \n
\n\n {\n siteData.id ? (\n \n {imageView\n ?
\n \n
\n \n
\n \n
\n \n
\n \n
\n );\n};\n\nSiteInfoWindow.propTypes = {\n site: PropTypes.object.isRequired,\n addStop: PropTypes.func,\n};\nSiteInfoWindow.defaultProps = {\n addStop: undefined,\n};\n\nexport default SiteInfoWindow;\n","/**\n * NOTE: This is not a map. This is the component which comunicate Rails + React\n * This component displays current sites for a single organization in a map.\n */\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport VamosMap from '../../VamosMap';\nimport SitesInMarkers from '../../VamosMap/SitesInMarkers';\n\nconst SitesInMap = ({ sitesArray }) => {\n return (\n \n \n
\n {site.last_visit_date && (\n \n {name}\n
\n \n\n
\n )}\n Last-Visit: {site.last_visit_date.substring(0, 10)}
\n \n
\n\n {site.arrival &&
\n Arrival: {formatNumericDate(site.arrival)}
}{site.departure &&
\n Departure: {formatNumericDate(site.departure)}
}\n {site.worker_count && (\n
\n\n \n {site.worker_count &&
\n )}\n Worker-count: {site.worker_count}
}\n H2A: {h2a}
\n \n \n \n View Details\n \n {addStop ? (\n addStop(site, setLoading)}\n />\n ) : null}\n
\n \n \n \n
\n );\n};\nSitesInMap.propTypes = {\n sitesArray: PropTypes.array.isRequired,\n};\nexport default SitesInMap;\n\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\n\nconst Toast = ({ message, type, onClose }) => {\n return (\n \n
\n );\n};\n\nToast.defaultProps = {\n type: 'error',\n};\n\nToast.propTypes = {\n message: PropTypes.string.isRequired,\n type: PropTypes.oneOf(['success', 'error', 'info', 'warning']),\n onClose: PropTypes.func.isRequired,\n};\n\nexport default Toast;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\n\nconst ToggleSwitch = ({ label, isEnabled, onChange }) => {\n return (\n \n );\n};\n\nToggleSwitch.propTypes = {\n label: PropTypes.string,\n isEnabled: PropTypes.bool,\n onChange: PropTypes.func,\n};\nToggleSwitch.defaultProps = {\n label: '',\n isEnabled: false,\n onChange: undefined,\n};\n\nexport default ToggleSwitch;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst CustomButton = ({ onClick, isButtonClicked }) => (\n \n \n x\n \n
\n {message}\n ![\"google](\"https://www.google.com/images/branding/product/ico/maps15_bnuw3a_32dp.ico\")
Open in Maps\n );\n }\n return (\n \n );\n };\n\n return (\n \n {currentRoute.stops.length > 1 && !directionIsNaN ? (directionMapButton()) : (<>)}\n
\n );\n};\n\nDirectionButtons.defaultProps = {\n isEnabled: undefined,\n setIsEnabled: undefined,\n};\n\nDirectionButtons.propTypes = {\n isEnabled: PropTypes.bool,\n setIsEnabled: PropTypes.func,\n};\n\nexport default DirectionButtons;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DirectionsRenderer } from '@react-google-maps/api';\nimport { useRoutes } from '../../hooks';\nimport SitesInMarkers from './SitesInMarkers';\n\nconst DirectionsSegments = ({ directions, shouldSuppressMarkers }) => {\n // Hook useRoute to have access to RoutesContext\n const { currentRoute } = useRoutes();\n\n /**\n * Stop missing properties:\n * - h2a\n * - lastVisit\n * - arrival\n * - departure\n * - worker_count\n * - priority (Just for marker colors)\n * - status (Just for marker colors)\n */\n\n /**\n * Stop different names:\n * - site_name | name\n */\n\n const ICONS_BASE_URL = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=';\n return (\n <>\n { directions && (\n <>\n {!shouldSuppressMarkers && \n {\n setInfoBoxPosition({\n lat: data.latLng.lat(),\n lng: data.latLng.lng(),\n });\n setShowInfoBox(true);\n }}\n >\n \n
\n \n \n { setShowInfoBox(false); }}\n data-toggle=\"modal\"\n style={styles.button}\n >\n Create site\n \n \n
\n \n {!isEnabled && isBoundsChanged && \n latitude: {infoBoxPosition.lat}\n
\n \n longitude: {infoBoxPosition.lng}\n
\n \n \n
\n
\n \n Route Name \n searchButtonRef.current.click()}\n />\n
\n \n Date from \n searchButtonRef.current.click()}\n />\n
\n \n to \n searchButtonRef.current.click()}\n />\n
\n \n
\n \n
\n \n
\n \n handleSortingChange(e.target.value)}\n >\n \n \n \n \n \n \n
\n - \n {filteredRoutes.length ? (filteredRoutes.map((route) => (\n
- \n \n\n\n \n\n
{route.name}
\n \n {route.description}\n\n {formatShortDate(route.date)}\n {route.number_of_stops} sites\n\n\n {route.total_distance && route.total_distance !== 'NaN' && `${(route.total_distance).toFixed(2)} mi`}\n {getTimeInHoursAndMins(route.total_time)}\n\n \n
\n
\n ))) : (\n \n
\n )}\n {emptyMessage}
\n{alertBody.title}
\n\n {alertBody.message &&
\n {alertBody.message}
}\n\n {alertBody.actions && alertBody.actions.length ? alertBody.actions.map((item) => (\n \n {item.label}\n \n ))\n : (\n \n )}\n
\n \n { toasts.map(toast => (\n hideToast(toast.id)}\n />\n ))}\n
\n {children}
\n {\n paginationObject?.totalItems > 5\n ? (\n- \n