');\n}\n\nexport const byteArrayToBase64 = (byteArray) => {\n return byteArray.toString('base64');\n};\n\nexport const getCookie = (cname) => {\n let name = cname + \"=\";\n let decodedCookie = decodeURIComponent(document.cookie);\n let ca = decodedCookie.split(';');\n for(let i = 0; i
\n {title && (\n \n
\n );\n}","import React, { useContext, useEffect, useState } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Form, ListGroup } from 'react-bootstrap';\nimport { faCircleEnvelope } from '@fortawesome/pro-light-svg-icons';\nimport { ChatContext } from '../../chatContext';\nimport { Link } from 'react-router-dom';\nimport { ROLE_AFFILIATE, ROLE_DESTINATIONMANAGER, ROLE_HOTELIER, ROLE_SUPPLIER, UserProfileContext } from '../../userProfileContext';\nimport { ReportCard, reportCardHeights } from '../reporting/report-card';\nimport { Metric } from '../reporting/metric';\n\nexport const MessagingDashboardTile = ({ viewDetails, onChangeViewDetails }) => {\n const { userProfile } = useContext(UserProfileContext);\n const { unreadConversations, parseConversationDisplayName, parseConversationUniqueName } = useContext(ChatContext);\n const [conversations, setConversations] = useState([]);\n const [unreadConversationCount, setUnreadConversationCount] = useState(0);\n\n useEffect(() => {\n setConversations(unreadConversations.filter(uc => uc.unreadMessagesCount > 0));\n setUnreadConversationCount(unreadConversations.filter(uc => uc.unreadMessagesCount > 0).length);\n }, [unreadConversations]);\n\n const unreadConversationLink = (unreadConversation, index) => {\n const { rfpId, venueId } = parseConversationUniqueName(unreadConversation.uniqueName);\n const { rfpName, venueName } = parseConversationDisplayName(unreadConversation.friendlyName);\n \n let to = `/event/${rfpId}/messaging/${venueId}`;\n let text = `${venueName} (${rfpName})`;\n\n switch (userProfile.role) {\n case ROLE_HOTELIER:\n to = `/proposal/${rfpId}/${venueId}/messaging`;\n text = rfpName;\n break;\n case ROLE_AFFILIATE:\n case ROLE_SUPPLIER:\n case ROLE_DESTINATIONMANAGER:\n to = `/supplier/request/${rfpId}/messaging`;\n text = rfpName;\n break;\n default:\n break;\n }\n\n return (\n {title}
\n )}\n {!standalone && (\n \n {(messages.length > 0 && (\n
\n \n {messages.map((m, i) => {\n const isLatest = i === messages.length - 1;\n const direction = (m.author === myIdentity) ? \"outgoing\" : \"incoming\";\n return (\n
\n )) || (!canInitiate && (\n \n
\n ))}\n The planner has asked not to be contacted via chat, but may start a thread as needed.
\nIf a planner starts a chat conversation, we will notify you and can respond here.
\nYou can update your notification settings any time in your Profile page.
\n\n setNewMessage(e.target.value)}\n onKeyDown={onMessageKeyDown}\n onFocus={() => { if (latestMessageRef.current) { latestMessageRef.current.scrollIntoView(); } }}\n disabled={loadingState !== 'ready' || (messages.length === 0 && !canInitiate)}\n />\n \n Send\n \n
\n \n Type your message below (click Send or use Ctrl+Enter to send):\n
\n {title.rfpName}
\n {title.venueName}
\n \n );\n }\n\n return (\n \n
\n );\n}","import React, { useEffect, useState } from 'react';\nimport { format, parseJSON } from 'date-fns';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faUserCircle } from '@fortawesome/pro-solid-svg-icons';\nimport { Col, Row } from 'react-bootstrap';\nimport './message-bubble.scss';\n\nexport const MessageBubble = ({ direction, message, author, itemRef }) => {\n const [messageState, setMessageState] = useState({\n mediaDownloadFailed: false,\n mediaUrl: null,\n authorName: ''\n });\n\n useEffect(() => {\n if (message.type === 'media') {\n message.media.getContentUrl()\n .then(url => setMessageState( s => { return { ...s, mediaUrl: url, mediaDownloadFailed: false }; }))\n .catch(() => setMessageState(s => { return { ...s, mediaDownloadFailed: true }; }));\n }\n }, [message]);\n\n useEffect(() => {\n if (itemRef?.current) {\n itemRef.current.scrollIntoView();\n }\n }, [itemRef]);\n\n useEffect(() => {\n if (author && author.state?.friendlyName) {\n const nameParts = author.state.friendlyName.split(' ');\n if (nameParts.length === 1) {\n setMessageState(s => { return { ...s, authorName: nameParts[0] }; });\n } else {\n nameParts[nameParts.length - 1] = nameParts[nameParts.length - 1].substring(0, 1);\n setMessageState(s => { return { ...s, authorName: nameParts.join(' ') }; });\n }\n }\n }, [author]);\n\nreturn (\n \n {conversationProxy && (\n {chatState.message} \n
\n {userProfile.id && conversationProxy && (\n \n {formatChatTitle(conversationProxy.friendlyName)}\n
\n )}\n \n {direction === 'incoming' && (\n
\n \n \n {direction === 'incoming' && (\n {messageState.authorName || message.author || message.from}\n )}\n \n {format(parseJSON(message.dateCreated || message.date_created), 'M/d/yy h:mmaaa')}\n \n
\n {message.type === 'media' ? (\n
\n \n {message.type === 'media' ? (\n
(Failed to download media!)
;\n else if (props.url === null) returnDownloading…
;\n // eslint-disable-next-line\n else return\n {unreadConversationCount > 0 && (\n {unreadConversationCount} \n )}\n \n
\n \n \n \n \n
\n \n {(chatFeature === undefined && (\n \n promptUserToUpgrade(true, 'CHAT')}\n >\n Upgrade to use Messaging\n \n \n )) || (unreadConversationCount > 0 && conversations.sort(sortConversations).map((conversation, i) => {\n const unreadConversation = unreadConversations.find(uc => uc.uniqueName === conversation.uniqueName);\n if (!unreadConversation) {\n return null;\n }\n if (!unreadConversation.unreadMessagesCount || !unreadConversation.lastMessage) {\n return null;\n }\n const nameParts = conversation.friendlyName.split('|');\n const received = unreadConversation.lastMessage.dateCreated;\n let from = nameParts[1];\n if (location.pathname.endsWith('hotelier') || location.pathname.includes('/supplier')) {\n from = unreadConversation.lastMessage.author?.split('@')[0];\n }\n const uniqueNameParts = conversation.uniqueName.split('|');\n const eventPlanId = uniqueNameParts[0];\n const venueId = uniqueNameParts[1];\n return (\n \n \n onClickMarkAsRead(conversation.uniqueName)}\n >\n Mark Read\n \n \n
\n \n );\n })) || (\n \n No unread messages\n \n )}\n \n
\n \n );\n}","import React from 'react';\nimport WhatsThis from '../whats-this';\n\nexport const Checkbox = ({ label, name, whatsThisContent, disabled, checked, onChange, tourAttributes, className, size, style, checkmarkStyle, isInvalid, invalidFeedback }) => {\n return (\n <>\n {invalidFeedback}
\n )}\n \n );\n}","import React, { Fragment, useContext, useEffect, useState } from 'react';\nimport { Card, Row, Col, Table, Button, Spinner, Form, ButtonGroup, Modal, ListGroup } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faSync, faSort, faSortUp, faSortDown, faDownload, faPlusCircle, faCheckCircle, faCircle } from '@fortawesome/pro-solid-svg-icons';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { packageWorkbook } from '../../services/reports';\n\nimport { Checkbox } from '../checkbox';\n\nimport './index.scss';\nimport { UserProfileContext } from '../../userProfileContext';\nimport { getUserProfileDataGridSettings, upsertUserProfileDataGridSettings } from '../../services/user-profiles';\nimport { faColumns3, faDoNotEnter } from '@fortawesome/pro-duotone-svg-icons';\nimport WhatsThis from '../whats-this';\n\nexport const DataGridFilterTypes = {\n TEXT: 'text',\n SELECT: 'select',\n DATE: 'date',\n DATE_RANGE: 'date-range',\n NUMBER: 'number',\n NUMBER_RANGE: 'number-range',\n BOOLEAN: 'boolean',\n CHECKBOX: 'checkbox',\n RADIO: 'radio',\n ARRAY_ISEMPTY: 'array-empty',\n CUSTOM: 'custom',\n};\n\nexport const customColumnTypes = {\n required: { key: 'required', label: 'Required', },\n default: { key: 'default', label: 'Default', },\n optional: { key: 'optional', label: 'Optional', },\n hidden: { key: 'hidden', label: 'Hidden', },\n custom: { key: 'custom', label: 'Custom', },\n};\n\nconst defaultDataGridSettings = {\n itemType: \"dataGridSettings\",\n customColumnTypes: {},\n};\n\nexport const DataGrid = ({ id, dataSet, customTools, tableProps, exportConfiguration, onRefresh, onAddNew, onRowClick, onServerFilterChanged, onSortChanged, loading, itemsSelected, selectedActions, noResultsText, hideNoResultsText, hideHeader, disableSort, stickyHeader, formatDetailsRow, lockPaidFeature }) => {\n const { userProfile } = useContext(UserProfileContext);\n const [userProfileDataGridSettings, setProfileUserDataGridSettings] = useState({...defaultDataGridSettings});\n const [customizeColumns, setCustomizeColumns] = useState({ showModal: false });\n const [sortField, setSortField] = useState(dataSet?.defaultSort?.field);\n const [sortDirection, setSortDirection] = useState(dataSet?.defaultSort?.direction ?? 1);\n const [filter, setFilter] = useState({});\n const [filterServer, setFilterServer] = useState({});\n const [selectedFacets, setSelectedFacets] = useState({});\n const [filteredItems, setFilteredItems] = useState([]);\n const [expandedDetails, setExpandedDetails] = useState({});\n const [groupToggleMap, setGroupToggleMap] = useState({});\n\n useEffect(() => {\n if (!!userProfile.id && !!id) {\n getUserProfileDataGridSettings({ userProfileId: userProfile.id, dataGridId: id })\n .then(r => setProfileUserDataGridSettings(r.data))\n .catch(e => {\n setProfileUserDataGridSettings({\n ...defaultDataGridSettings,\n userProfileId: userProfile.id,\n id: id,\n });\n });\n }\n }, [userProfile.id, id]);\n\n useEffect(() => {\n if (dataSet) {\n const filterFn = i => {\n return dataSet.fields.map(f => f.name).every(n => !(filter[n]) || (i[n] && i[n].toLowerCase().indexOf(filter[n].toLowerCase()) > -1));\n }\n const facetFn = i => {\n return Object.keys(selectedFacets).every(k => {\n const facet = dataSet.facets.find(f => f.key === k);\n if (facet) {\n return facet.filter(i, selectedFacets[k]);\n }\n return true;\n });\n }\n\n setFilteredItems(\n dataSet.data.filter(i => {\n if (filterFn(i)) {\n if (Object.keys(selectedFacets).length === 0) {\n return true;\n }\n return facetFn(i);\n }\n return false;\n })\n );\n }\n }, [filter, selectedFacets, dataSet]);\n\n // useEffect(() => {\n // if (dataSet?.defaultSort?.field) {\n // setSortField(dataSet.defaultSort.field);\n // setSortDirection(dataSet.defaultSort?.direction ?? 1);\n // }\n // }, [dataSet])\n\n const sortItems = (c, p) => {\n if (c[sortField] === p[sortField]) {\n return c.id > p.id ? sortDirection : (sortDirection * -1);\n }\n return c[sortField] > p[sortField] ? sortDirection : (sortDirection * -1);\n }\n\n const sortIcon = (n) => {\n if (disableSort) {\n return null;\n }\n let icon = faSort;\n if (sortField === n) {\n icon = sortDirection < 0 ? faSortDown : faSortUp;\n }\n return (\n {field.disabledMessage}
\n ) : (\n {field.hintText(item)}
\n ): null}\n no dataset is configured
);\n }\n \n return (\n {dataSet.subtitle}
\n )}\n \n
\n ))}\n \n )}\n {facet.label}
\n {facet.values.map((facetValue, facetValueIndex) => (\n \n onToggleFacetValue(facet.key, facetValue.value, e.target.checked)}\n label={`${facetValue.label} (${facetValue.count})`}\n />\n
\n ))}\n {template.name}
\n ) : null}\n {template.name}
\n ) : null}\n {template.name}
\n ) : null}\n You can make any necessary changes and your new RFP will be ready to send.
\n \n {copyContext.from === copyItemTypes.eventPlan && (\n Your new template will be stored in your Planner Toolbox and can be used to create new RFPs in the future.
\n \n )}\n {window.hopSkipConfig.api.environment !== 'Prod' && userProfile.isAdmin && (\n \n Are you sure you want to cancel the {event.name} RFP? Your hotels will be notified via email.\n
\n \n {email}\n removeEmail(index)}>\n ×\n \n
\n );\n }\n\n return (\n \n Select one or more team members to share with: \n \n {orgPlanners.map((planner, pi) => (\n \n setOrgPlanners(s => {\n return s.map(p => {\n if (p.id === planner.id) {\n p.share = e.target.checked;\n }\n return p;\n });\n })}\n disabled={eventPlanOwner.id === planner.id}\n whatsThisContent={eventPlanOwner.id === planner.id ? \"The owner cannot be removed\" : null}\n />\n \n ))}\n
\n
\n )}\n \n {actions.length > 0 && (\n {actions.length} \n )}\n \n
\n \n {loading && (\n \n \n \n
\n \n {(actions.length > 0 && actions.sort((c, n) => c.created > n.created ? 1 : -1).map((a, i) => (\n \n \n onClickMarkComplete(a.id)}\n >\n Complete\n \n \n
\n \n ))) || (\n \n You're done!\n \n )}\n \n
\n \n );\n}\nexport default ActionsList;","import { faBars, faSearch, faTh } from '@fortawesome/pro-solid-svg-icons';\nimport { useHistory } from 'react-router-dom';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport React, { useContext, useEffect, useState } from 'react';\nimport { Row, Col, Button, Form, InputGroup, Modal } from 'react-bootstrap';\nimport { EventsList } from './events-list';\nimport { EventsPipeline } from './events-pipeline';\nimport './events-container.scss';\nimport { faFile } from '@fortawesome/pro-light-svg-icons';\nimport { EventCancelModal } from '../cancel-modal';\nimport { callApi, defaultErrorNotification } from '../../../apiProvider';\nimport Loader from '../../loader';\nimport { Share } from '../planner/share';\nimport { format, parseISO } from 'date-fns';\nimport { ROLE_ADMIN, UserProfileContext } from '../../../userProfileContext';\nimport { useDebouncedCallback } from 'use-debounce';\n\nconst viewNames = {\n pipeline: { key: 'pipeline', label: 'Pipeline' },\n list: { key: 'list', label: 'List' },\n cancelled: { key: 'cancelled', label: 'Cancelled' },\n};\n\nconst getEvents = filterText => {\n return callApi(\n `/sourcing/api/events/plans${!!filterText ? `?$filter=${filterText}` : ''}`,\n {\n method: 'GET'\n },\n true\n );\n}\n\nexport const EventsContainer = ({ onCopyEvent }) => {\n const { userProfile } = useContext(UserProfileContext);\n const history = useHistory();\n const [events, setEvents] = useState([]);\n const [viewName, setViewName] = useState(viewNames.pipeline.key);\n const [filterText, setFilterText] = useState('');\n const [showLoader, setShowLoader] = useState(false);\n const [shareContext, setShareContext] = useState({});\n const [showShareModal, setShowShareModal] = useState(false);\n const [deleteContext, setDeleteContext] = useState({});\n const [showConfirmModal, setShowConfirmModal] = useState(false);\n const [showCancelModal, setShowCancelModal] = useState(false);\n const [cancelContext, setCancelContext] = useState({});\n\n useEffect(() => {\n if (userProfile.role !== ROLE_ADMIN) {\n setShowLoader(true);\n getEvents().then(r => setEvents(r.data)).finally(() => setShowLoader(false));\n }\n }, [userProfile.role]);\n\n const reloadEvents = () => {\n setShowLoader(true);\n getEvents(filterText).then(r => setEvents(r.data)).finally(() => setShowLoader(false));\n };\n\n const onShareEvent = (event) => {\n setShareContext(event);\n setShowShareModal(true);\n }\n\n const onSearchAdmin = useDebouncedCallback((value) => {\n setShowLoader(true);\n getEvents(filterText).then(r => setEvents(r.data)).finally(() => setShowLoader(false));\n }, 1000);\n\n const filterEvents = event => {\n if (userProfile.role === ROLE_ADMIN) {\n return true;\n }\n if (viewName === viewNames.cancelled.key && event.status !== 'Cancelled') {\n return false;\n }\n \n if (!filterText) {\n return true;\n }\n\n return event.name?.toLowerCase()?.includes(filterText.toLowerCase())\n || event.rfpCode?.toLowerCase()?.includes(filterText.toLowerCase())\n || event.organizationName?.toLowerCase()?.includes(filterText.toLowerCase())\n || `${event.planners[0].firstName} ${event.planners[0].lastName} ${event.planners[0].id}`.toLowerCase().includes(filterText.toLowerCase());\n }\n\n const onChangeView = viewName => {\n setViewName(viewName);\n window.analytics.track(`Planner changed My RFPs view to ${viewName} view`);\n }\n\n const onDeleteEvent = (event) => {\n setDeleteContext(event);\n setShowConfirmModal(true);\n }\n\n const onConfirmDelete = () => {\n setShowLoader(true);\n callApi(`/sourcing/api/events/plans/${deleteContext.id}`, { method: 'DELETE' }, true)\n .catch(error => defaultErrorNotification(error))\n .then(() => {\n reloadEvents();\n }).finally(\n setShowConfirmModal(false)\n );\n }\n\n const onCancelEvent = (event) => {\n setCancelContext({...event});\n setShowCancelModal(true);\n }\n\n const onCancelCancel = () => {\n setCancelContext({});\n setShowCancelModal(false);\n }\n \n const onConfirmCancel = () => {\n setShowLoader(true);\n setShowCancelModal(false);\n reloadEvents();\n }\n\n const onMarkContractSigned = (event) => {\n history.push(`/event/${event.id}/agreement?marksigned=true`);\n }\n\n return (\n \n
\n )}\n \n {showLoader && setShowShareModal(false)}\n onSubmit={(planners) => {\n setEvents(s => {\n return s.map(e => {\n if (e.id === shareContext.id) {\n e.planners = planners;\n }\n return e;\n });\n });\n setShowShareModal(false);\n }}\n />\n )}\n \n onChangeView(viewNames.cancelled.key)}\n >\n Cancelled RFPs\n \n \n
\n \n \n \n \n \n \n {\n setFilterText(e.target.value);\n if (userProfile.role === ROLE_ADMIN) {\n onSearchAdmin(e.target.value);\n }\n }}\n />\n \n \n
\n \n
\n setShowConfirmModal(false)}>\n \n Delete RFP \n \n {deleteContext.created && (\n \n Are you sure you want to delete the {deleteContext.name ? `${deleteContext.name} RFP` : `new RFP created on ${format(parseISO(deleteContext.created), 'eee M/d @ h:mmaaa')}`}?\n \n )}\n \n \n \n \n \n
\n );\n}","import React from 'react';\nimport { parseISO, format } from 'date-fns';\nimport { Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faEllipsisH } from '@fortawesome/pro-solid-svg-icons';\nimport { Link } from 'react-router-dom';\n\nimport { formatCurrency, formatNumber } from '../../../common';\nimport { EventPlanStatusMap } from '../../../common/statusMaps';\n\nimport { DataGrid } from '../../data-grid';\nimport { RfpCode } from '../../rfp-code';\nimport { ActionToggle } from '../../buttons/action-toggle';\nimport { faFileSlash } from '@fortawesome/pro-duotone-svg-icons';\n\nexport const EventsList = ({ events, onMarkContractSigned, onShareEvent, onCopyEvent, onCancelEvent, onDeleteEvent }) => {\n\n const formatActions = (event) => {\n return (\n \n
\n \n \n View by{' '}\n onChangeView(viewNames.pipeline.key)}\n title=\"Click to See Pipeline View\"\n >\n onChangeView(viewNames.list.key)}\n title=\"Click to See List View\"\n >\n
\n \n \n \n \n \n \n {event.status === 'Contracting' && ( onMarkContractSigned(event)}>Mark as Contract Signed )}\n onShareEvent(event)}>Share with planner(s)... \n onCopyEvent(event)}>Duplicate RFP... \n {event.status === 'New' && (\n onDeleteEvent(event)}>Delete \n )}\n {['New','Cancelled'].includes(event.status) === false && (\n onCancelEvent(event)}>Cancel \n )}\n \n \n
\n );\n }\n\n const formatName = event => {\n return (\n <>\n \n
\n {event.statusText}\n {!!event.proposalsPaused ? (\n
\n );\n }\n \n const formatRequests = event => {\n return (\n <>\n {event.meetingSpaceRequired && event.meetingSpaceRequests.length > 0 && (\n <>\n {event.peakMeetingRoomsRequired > 0 && (\n \n \n {`New proposals stopped by ${event.proposalsPausedBy} on ${format(parseISO(event.proposalsPausedAt), 'M/d/yy')}`}\n \n }\n >\n \n
\n ) : null}\n {`${formatNumber(event.peakMeetingRoomsRequired)} Meeting Room${event.peakMeetingRoomsRequired === 1 ? '' : 's'} on Peak`}
\n )}\n {event.peakMeetingSpaceRequired > 0 && (\n {`${formatNumber(event.peakMeetingSpaceRequired)} Square Feet on Peak`}
\n )}\n \n )}\n {event.roomBlocksRequired && (\n <>\n {event.totalRoomsRequested && (\n {`${formatNumber(event.totalRoomsRequested)} Total Room Nights`}
\n )}\n {event.peakRooms && (\n {`${formatNumber(event.peakRooms)} Rooms on Peak`}
\n )}\n {event.totalRoomsBudget > 0 && (\n {`${formatCurrency(event.totalRoomsBudget)} Room Budget`}
\n )}\n \n )}\n \n );\n }\n\n const formatPlanner = event => {\n return (\n <>\n {event.planner}\n \n {event.planners[0].id}\n \n );\n }\n\n const formatDate = d => {\n return d ? format(parseISO(d), 'eee M/d/yyyy') : '';\n }\n\n const dataset = {\n fields: [\n { name: 'name', header: 'Name', filter: false, format: item => formatName(item), },\n { name: 'created', header: 'Created', filter: false, format: item => formatDate(item.created), },\n { name: 'submitted', header: 'RFP Sent', filter: false, format: item => formatDate(item.submitted), },\n events.every(e => e.status === 'Cancelled')\n ? { name: 'cancelled', header: 'Cancelled', filter: false, format: item => formatDate(item.cancelled), }\n : { name: 'statusText', header: 'Status', filter: false, format: formatStatus, },\n { name: 'startDate', header: 'Start Date', filter: false, format: item => formatDate(item.startDate), },\n { name: 'endDate', header: 'End Date', filter: false, format: item => formatDate(item.endDate), },\n { name: 'requests', header: 'Requests', filter: false, format: item => formatRequests(item), },\n { name: 'planner', header: 'Planner', filter: false, format: item => formatPlanner(item), },\n { name: 'actions', header: 'Actions', filter: false, format: item => formatActions(item), },\n ],\n defaultSort: { field: 'startDate', direction: 1 },\n data: [\n ...events.map(e => {\n return {\n ...e,\n planner: `${e.planners[0].firstName} ${e.planners[0].lastName}`,\n statusText: EventPlanStatusMap[e.status].label,\n }\n })\n ],\n };\n\n return (\n
\n
\n )}\n {Object.keys(EventPlanStatusMap).filter(k => EventPlanStatusMap[k].pipeline).map((statusKey, statusIndex) => (\n \n ({events.filter(e => e.status === statusKey).length})\n
\n {formatActions(event)}\n
\n \n \n 50 ? 'small' : null}>{event.name || `New RFP created on ${format(parseISO(event.created), 'eee M/d @ h:mmaaa')}`}\n \n
\n \n
\n \n {event.roomBlocksRequired && (\n
\n \n Room Block{event.roomBlockRequests.length === 1 ? '' : 's'}:\n {` ${formatNumber(event.peakRooms)} rooms on peak`}\n
\n )}\n {event.meetingSpaceRequired && (\n \n Event Space:\n {` ${formatNumber(event.peakMeetingRoomsRequired)} room${event.peakMeetingRoomsRequired === 1 ? '' : 's'} on peak`}\n
\n )}\n \n {!!event.proposalsPaused ? (\n
\n \n );\n })}\n \n \n {`New proposals stopped by ${event.proposalsPausedBy} on ${format(parseISO(event.proposalsPausedAt), 'M/d/yy')}`}\n \n }\n >\n \n
\n ) : null}\n \n \n {(event.startDate && event.endDate && (\n <>\n \n
\n Dates Requested:
\n {`${format(parseISO(event.startDate), 'M/d/yy')} - ${format(parseISO(event.endDate), 'M/d/yy')}`}
\n {event.alternateDates.filter(ad => ad.startDate).map((ad, i) => (\n {`${format(parseISO(ad.startDate), 'M/d/yy')} - ${format(parseISO(ad.endDate), 'M/d/yy')}`}
\n ))}\n \n )) || (\n No Dates Specified
\n )}\n \n }\n >\n \n \n {unreadConversationCount === 0\n ? `No new messages`\n : `New messages from ${unreadConversationCount} hotel${unreadConversationCount === 1 ? '' : 's'}`\n }\n \n }\n >\n \n \n {unreadConversationCount}\n \n )}\n
\n Ahh! Looks Like You've Reached Your RFP Limit.
\n\n
\n \n It looks like you've already sent {trialLimitStatus.rfpLimit} RFP{trialLimitStatus.rfpLimit === 1 ? '' : 's'} during your free trial of HopSkip. That's the limit for our trial users, but we have great news!\n
\n\n You can easily upgrade to a paid subscription to send unlimited RFPs and enjoy other premium features. Or, contact us to learn more about how HopSkip can make your sourcing process smoother than ever!\n
\n\n \n \n \n {loading && (\n \n \n setSearchFilter(e.target.value)}\n />\n \n \n \n \n 0}\n placement='bottom-start'\n >\n {({ placement, arrowProps, show: _show, popper, ...props }) => (\n \n {searchFilter && searchResults.length === 0 && (\n No results \n )}\n {searchResults.map((sr, i) => {\n return (\n {\n onSelectHotel(sr);\n resetSearch();\n }}\n className='hotel-lookup-result'\n >\n
\n );\n};\n","import React, { useEffect, useState } from 'react';\nimport { useContext } from 'react';\nimport { Button, Spinner } from 'react-bootstrap';\nimport { useRouteMatch } from 'react-router-dom';\nimport { addHotelier, getHotel } from '../../services/hotels';\nimport { UserProfileContext } from '../../userProfileContext';\nimport { HotelLookup } from './hotel-lookup';\nimport './not-associated.scss';\n\nexport const HotelierNotAssociated = () => {\n const { userProfile } = useContext(UserProfileContext);\n const [venue, setVenue] = useState({});\n const [assigning, setAssigning] = useState(false);\n\n\t// check for hotelier routes\n\tconst propertyProfileRouteMatch = useRouteMatch('/hotelprofile/:venueId?/:view?/:viewId?');\n\tconst proposalRouteMatch = useRouteMatch('/proposal/:eventId/:venueId/:view?');\n\n useEffect(() => {\n const venueId = propertyProfileRouteMatch?.params?.venueId ?? proposalRouteMatch?.params?.venueId;\n if (venueId && venueId !== venue.id) {\n getHotel(venueId).then(r => setVenue(r.data));\n }\n }, [venue.id, propertyProfileRouteMatch, proposalRouteMatch]);\n\n const onSelectHotel = hotel => {\n setVenue(hotel);\n setAssigning(true);\n addHotelier(hotel.id, { id: userProfile.id });\n }\n\n if (userProfile.associatedVenues.find(v => v.id === venue.id)) {\n return null;\n }\n\n if (!venue.id && userProfile.associatedVenues.length > 0) {\n return null;\n }\n\n return (\n \n {sr.name}\n
\n {sr.address}
\n {`${sr.city}, ${sr.state} ${sr.zip}`}
\n \n );\n })}\n \n )}\n \n \n {(venue.id && venue.name && (\n
\n );\n}","import React, { useContext, useEffect, useState } from 'react';\nimport { ROLE_ADMIN, ROLE_ADMIN_HOTEL, ROLE_HOTELIER, ROLE_PLANNER, UserProfileContext } from '../../userProfileContext';\nimport { Modal, Button, Form, Row, Col } from 'react-bootstrap';\nimport { callApi } from '../../apiProvider';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faBuilding, faPlusCircle, faUserCircle, faUsersMedical } from '@fortawesome/pro-light-svg-icons';\nimport './invitation-modal.scss';\nimport { isEmail } from 'react-multi-email';\nimport { NotificationManager } from 'react-notifications';\nimport { faUserNinja, faUserShield } from '@fortawesome/pro-duotone-svg-icons';\n\nconst invitationOptions = {\n Admin: [\n {\n title: 'Invite another Admin user to HopSkip',\n icon: faUserNinja,\n text: 'Admin accounts have access to all features and data',\n toRole: ROLE_ADMIN,\n targetOrganization: true,\n },\n {\n title: 'Invite a Hotel Admin user to HopSkip',\n icon: faUserShield,\n text: 'Hotel Admin accounts have access to add and update all property profiles',\n toRole: ROLE_ADMIN_HOTEL,\n targetOrganization: true,\n },\n ],\n Planner: [\n {\n title: 'Invite your co-workers to join your company account',\n icon: faUsersMedical,\n text: 'Share an invite to one of your team members to create a HopSkip account and automatically join your team',\n toRole: ROLE_PLANNER,\n targetOrganization: true,\n },\n {\n title: 'Invite another planner outside of your company',\n icon: faUserCircle,\n text: 'Share an invite with one of the planners in your network',\n toRole: ROLE_PLANNER,\n },\n {\n title: 'Invite a hotelier to access their hotels RFPs on HopSkip',\n icon: faBuilding,\n text: 'Share an invite with a hotelier who reviews RFPs and submits proposals for a hotel property',\n toRole: ROLE_HOTELIER,\n },\n ],\n Hotelier: [\n {\n title: 'Invite your co-workers to join your hotel sales team on HopSkip',\n icon: faUsersMedical,\n text: 'Share an invite to one of your team members to create a HopSkip account and automatically join your sales team',\n toRole: ROLE_HOTELIER,\n targetVenue: true,\n },\n {\n title: 'Invite a planner to send you RFPs',\n icon: faUserCircle,\n text: 'Share an invite with one of the planners in your network so they can send you RFPs using HopSkip',\n toRole: 'Planner',\n },\n {\n title: 'Invite another hotel to join HopSkip and start receiving RFPs',\n icon: faBuilding,\n text: 'Share an invite with another hotel so they can join the HopSkip platform and start receiving RFPs from HopSkip planners',\n toRole: 'Hotelier',\n },\n ]\n}\n\nexport const InvitationModal = ({ show, onClose }) => {\n const { userProfile } = useContext(UserProfileContext);\n const [options, setOptions] = useState([]);\n const [selectedOption, setSelectedOption] = useState(null);\n const [invitations, setInvitations] = useState([]);\n const [invitationResults, setInvitationResults] = useState({});\n\n useEffect(() => {\n if (userProfile.role && Object.keys(invitationOptions).includes(userProfile.role)) {\n setOptions([\n ...invitationOptions[userProfile.role]\n ]);\n }\n }, [userProfile.role]);\n\n const selectOption = option => {\n setSelectedOption(option);\n setInvitations([\n { firstName: '', lastName: '', email: '' },\n { firstName: '', lastName: '', email: '' },\n { firstName: '', lastName: '', email: '' },\n ]);\n setInvitationResults({});\n }\n\n const onHide = () => {\n onClose();\n setSelectedOption(null);\n setInvitations([]);\n setInvitationResults({});\n }\n\n const updateInvitation = (index, name, value) => {\n setInvitations(s => {\n return [\n ...s.slice(0, index),\n {\n ...s[index],\n [name]: value\n },\n ...s.slice(index + 1)\n ];\n })\n }\n\n const onSendInvite = () => {\n callApi(\n `/api/userinvitations`,\n {\n method: 'POST',\n data: invitations.map((invitation) => {\n return {\n from: {\n firstName: userProfile.firstName,\n lastName: userProfile.lastName,\n id: userProfile.id,\n role: userProfile.role,\n organizationId: userProfile.organizationId,\n organizationName: userProfile.organizationName\n },\n to: {\n firstName: invitation.firstName,\n lastName: invitation.lastName,\n id: invitation.email,\n role: selectedOption.toRole\n },\n targetOrganization: selectedOption.targetOrganization\n ? { id: userProfile.organizationId, name: userProfile.organizationName }\n : null,\n targetVenue: selectedOption.targetVenue\n ? { id: userProfile.associatedVenues[0]?.id, name: userProfile.associatedVenues[0]?.name }\n : null,\n }\n })\n },\n true\n ).then(r => {\n if (Object.keys(r.data).length > 0) {\n setInvitationResults(r.data);\n } else {\n NotificationManager.success('Invitation(s) sent!');\n onHide();\n }\n });\n }\n\n return (\n \n
\n )) || (\n It looks like you are not yet associated with {venue.name.toLowerCase().startsWith('the') ? '' : 'the '}{venue.name}.
\n \n
\n \n If you represent more than one hotel, please click here or reach out to us using the chat tool in the lower right corner.\n
\n\n {(assigning && (\n onSelectHotel(venue)}\n disabled={!venue.id}\n >\n Associate my account with {venue.name.toLowerCase().startsWith('the') ? '' : 'the '}{venue.name}\n \n )}\n
\n \n
\n )) || (\n \n
\n )}\n It looks like you are not yet associated with a hotel.
\n \n
\n \n Enter the name and/or address of your hotel below, then click your hotel to select it.\n
\n\n If you can't find your hotel or if you represent more than one hotel, please click here or reach out to us using the chat tool in the lower right corner.\n
\n\n {(assigning && (\n
\n \n
\n )) || (\n \n \n First Name \n \n Last Name \n \n Email \n \n
\n {invitations.map((invitation, index) => (\n \n updateInvitation(index, 'firstName', e.target.value)}\n />\n \n updateInvitation(index, 'lastName', e.target.value)}\n />\n \n updateInvitation(index, 'email', e.target.value.toLowerCase())}\n isInvalid={invitation.email && !isEmail(invitation.email)}\n />\n Please enter a valid email address. \n {invitationResults[invitation.email] && (\n {invitationResults[invitation.email]} \n )}\n \n setInvitations(s => [ ...s, { firstName: '', lastName: '', email: '' } ])}\n />\n )}\n \n \n ))}\n
\n ) : options.map((option, index) => (\n \n {option.title}\n
\n \n {option.text}\n
\n \n \n
\n );\n}\nexport default Loader;","export const compose = (...fns) => (...args) => {\n fns.forEach(fn => fn && fn(...args));\n };\n \n export const pick = (obj, ...props) => {\n return props.reduce((newObj, prop) => {\n if (obj && obj.hasOwnProperty(prop)) {\n newObj[prop] = obj[prop];\n }\n return newObj;\n }, {});\n };","/*\n* Copyright (c) 2016-present, Ken Hibino.\n* Licensed under the MIT License (MIT).\n* See https://kenny-hibino.github.io/react-places-autocomplete\n*/\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash.debounce';\nimport { compose } from './helpers';\n\n// transform snake_case to camelCase\nconst formattedSuggestion = structured_formatting => ({\n mainText: structured_formatting.main_text,\n secondaryText: structured_formatting.secondary_text,\n});\n\nclass PlacesAutocomplete extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: false,\n suggestions: [],\n userInputValue: props.value,\n ready: !props.googleCallbackName,\n };\n\n this.debouncedFetchPredictions = debounce(\n this.fetchPredictions,\n props.debounce\n );\n }\n\n componentDidMount() {\n const { googleCallbackName } = this.props;\n if (googleCallbackName) {\n const isPlacesLoaded =\n window.google && window.google.maps && window.google.maps.places;\n if (!isPlacesLoaded) {\n window[googleCallbackName] = this.init;\n } else {\n this.init();\n }\n } else {\n this.init();\n }\n }\n\n componentWillUnmount() {\n const { googleCallbackName } = this.props;\n if (googleCallbackName && window[googleCallbackName]) {\n delete window[googleCallbackName];\n }\n }\n\n init = () => {\n if (!window.google) {\n throw new Error(\n '[react-places-autocomplete]: Google Maps JavaScript API library must be loaded. See: https://github.com/kenny-hibino/react-places-autocomplete#load-google-library'\n );\n }\n\n if (!window.google.maps.places) {\n throw new Error(\n '[react-places-autocomplete]: Google Maps Places library must be loaded. Please add `libraries=places` to the src URL. See: https://github.com/kenny-hibino/react-places-autocomplete#load-google-library'\n );\n }\n\n this.autocompleteService = new window.google.maps.places.AutocompleteService();\n this.autocompleteOK = window.google.maps.places.PlacesServiceStatus.OK;\n this.setState(state => {\n if (state.ready) {\n return null;\n } else {\n return { ready: true };\n }\n });\n };\n\n autocompleteCallback = (predictions, status) => {\n this.setState({ loading: false });\n if (status !== this.autocompleteOK) {\n this.props.onError(status, this.clearSuggestions);\n return;\n }\n const { highlightFirstSuggestion } = this.props;\n this.setState({\n suggestions: predictions.map((p, idx) => ({\n id: p.id,\n description: p.description,\n placeId: p.place_id,\n active: highlightFirstSuggestion && idx === 0 ? true : false,\n index: idx,\n formattedSuggestion: formattedSuggestion(p.structured_formatting),\n matchedSubstrings: p.matched_substrings,\n terms: p.terms,\n types: p.types,\n })),\n });\n };\n\n fetchPredictions = () => {\n const { value } = this.props;\n if (value.length) {\n this.setState({ loading: true });\n this.autocompleteService.getPlacePredictions(\n {\n ...this.props.searchOptions,\n input: value,\n },\n this.autocompleteCallback\n );\n }\n };\n\n clearSuggestions = () => {\n this.setState({ suggestions: [] });\n };\n\n clearActive = () => {\n this.setState({\n suggestions: this.state.suggestions.map(suggestion => ({\n ...suggestion,\n active: false,\n })),\n });\n };\n\n handleSelect = (address, placeId, suggestion) => {\n this.clearSuggestions();\n if (this.props.onSelect) {\n this.props.onSelect(address, placeId, suggestion);\n } else {\n this.props.onChange(address);\n }\n };\n\n getActiveSuggestion = () => {\n return this.state.suggestions.find(suggestion => suggestion.active);\n };\n\n selectActiveAtIndex = index => {\n const activeName = this.state.suggestions.find(\n suggestion => suggestion.index === index\n ).description;\n this.setActiveAtIndex(index);\n this.props.onChange(activeName);\n };\n\n selectUserInputValue = () => {\n this.clearActive();\n this.props.onChange(this.state.userInputValue);\n };\n\n handleEnterKey = () => {\n const activeSuggestion = this.getActiveSuggestion();\n if (activeSuggestion === undefined) {\n this.handleSelect(this.props.value, null, null);\n } else {\n this.handleSelect(\n activeSuggestion.description,\n activeSuggestion.placeId,\n activeSuggestion\n );\n }\n };\n\n handleDownKey = () => {\n if (this.state.suggestions.length === 0) {\n return;\n }\n\n const activeSuggestion = this.getActiveSuggestion();\n if (activeSuggestion === undefined) {\n this.selectActiveAtIndex(0);\n } else if (activeSuggestion.index === this.state.suggestions.length - 1) {\n this.selectUserInputValue();\n } else {\n this.selectActiveAtIndex(activeSuggestion.index + 1);\n }\n };\n\n handleUpKey = () => {\n if (this.state.suggestions.length === 0) {\n return;\n }\n\n const activeSuggestion = this.getActiveSuggestion();\n if (activeSuggestion === undefined) {\n this.selectActiveAtIndex(this.state.suggestions.length - 1);\n } else if (activeSuggestion.index === 0) {\n this.selectUserInputValue();\n } else {\n this.selectActiveAtIndex(activeSuggestion.index - 1);\n }\n };\n\n handleInputKeyDown = event => {\n /* eslint-disable indent */\n switch (event.key) {\n case 'Enter':\n event.preventDefault();\n this.handleEnterKey();\n break;\n case 'ArrowDown':\n event.preventDefault(); // prevent the cursor from moving\n this.handleDownKey();\n break;\n case 'ArrowUp':\n event.preventDefault(); // prevent the cursor from moving\n this.handleUpKey();\n break;\n case 'Escape':\n this.clearSuggestions();\n break;\n default:\n break;\n }\n /* eslint-enable indent */\n };\n\n setActiveAtIndex = index => {\n this.setState({\n suggestions: this.state.suggestions.map((suggestion, idx) => {\n if (idx === index) {\n return { ...suggestion, active: true };\n } else {\n return { ...suggestion, active: false };\n }\n }),\n });\n };\n\n handleInputChange = event => {\n const { value } = event.target;\n this.props.onChange(value);\n this.setState({ userInputValue: value });\n if (!value) {\n this.clearSuggestions();\n return;\n }\n if (this.props.shouldFetchSuggestions) {\n this.debouncedFetchPredictions();\n }\n };\n\n handleInputOnBlur = () => {\n if (!this.mousedownOnSuggestion) {\n this.clearSuggestions();\n }\n };\n\n getActiveSuggestionId = () => {\n const activeSuggestion = this.getActiveSuggestion();\n return activeSuggestion\n ? `PlacesAutocomplete__suggestion-${activeSuggestion.placeId}`\n : undefined;\n };\n\n getIsExpanded = () => {\n return this.state.suggestions.length > 0;\n };\n\n getInputProps = (options = {}) => {\n if (options.hasOwnProperty('value')) {\n throw new Error(\n '[react-places-autocomplete]: getInputProps does not accept `value`. Use `value` prop instead'\n );\n }\n\n if (options.hasOwnProperty('onChange')) {\n throw new Error(\n '[react-places-autocomplete]: getInputProps does not accept `onChange`. Use `onChange` prop instead'\n );\n }\n\n const defaultInputProps = {\n type: 'text',\n autoComplete: 'off',\n role: 'combobox',\n 'aria-autocomplete': 'list',\n 'aria-expanded': this.getIsExpanded(),\n 'aria-activedescendant': this.getActiveSuggestionId(),\n disabled: !this.state.ready,\n };\n\n return {\n ...defaultInputProps,\n ...options,\n onKeyDown: compose(this.handleInputKeyDown, options.onKeyDown),\n onBlur: compose(this.handleInputOnBlur, options.onBlur),\n value: this.props.value,\n onChange: event => {\n this.handleInputChange(event);\n },\n };\n };\n\n getSuggestionItemProps = (suggestion, options = {}) => {\n const handleSuggestionMouseEnter = this.handleSuggestionMouseEnter.bind(\n this,\n suggestion.index\n );\n const handleSuggestionClick = this.handleSuggestionClick.bind(\n this,\n suggestion\n );\n\n return {\n ...options,\n key: suggestion.id,\n id: this.getActiveSuggestionId(),\n role: 'option',\n onMouseEnter: compose(handleSuggestionMouseEnter, options.onMouseEnter),\n onMouseLeave: compose(\n this.handleSuggestionMouseLeave,\n options.onMouseLeave\n ),\n onMouseDown: compose(this.handleSuggestionMouseDown, options.onMouseDown),\n onMouseUp: compose(this.handleSuggestionMouseUp, options.onMouseUp),\n onTouchStart: compose(\n this.handleSuggestionTouchStart,\n options.onTouchStart\n ),\n onTouchEnd: compose(this.handleSuggestionMouseUp, options.onTouchEnd),\n onClick: compose(handleSuggestionClick, options.onClick),\n };\n };\n\n handleSuggestionMouseEnter = index => {\n this.setActiveAtIndex(index);\n };\n\n handleSuggestionMouseLeave = () => {\n this.mousedownOnSuggestion = false;\n this.clearActive();\n };\n\n handleSuggestionMouseDown = event => {\n event.preventDefault();\n this.mousedownOnSuggestion = true;\n };\n\n handleSuggestionTouchStart = () => {\n this.mousedownOnSuggestion = true;\n };\n\n handleSuggestionMouseUp = () => {\n this.mousedownOnSuggestion = false;\n };\n\n handleSuggestionClick = (suggestion, event) => {\n if (event && event.preventDefault) {\n event.preventDefault();\n }\n const { description, placeId } = suggestion;\n this.handleSelect(description, placeId, suggestion);\n setTimeout(() => {\n this.mousedownOnSuggestion = false;\n });\n };\n\n render() {\n return this.props.children({\n getInputProps: this.getInputProps,\n getSuggestionItemProps: this.getSuggestionItemProps,\n loading: this.state.loading,\n suggestions: this.state.suggestions,\n });\n }\n}\n\nPlacesAutocomplete.propTypes = {\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n children: PropTypes.func.isRequired,\n onError: PropTypes.func,\n onSelect: PropTypes.func,\n searchOptions: PropTypes.shape({\n bounds: PropTypes.object,\n componentRestrictions: PropTypes.object,\n location: PropTypes.object,\n offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n radius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n types: PropTypes.array,\n }),\n debounce: PropTypes.number,\n highlightFirstSuggestion: PropTypes.bool,\n shouldFetchSuggestions: PropTypes.bool,\n googleCallbackName: PropTypes.string,\n};\n\nPlacesAutocomplete.defaultProps = {\n /* eslint-disable no-unused-vars, no-console */\n onError: (status, _clearSuggestions) =>\n console.error(\n '[react-places-autocomplete]: error happened when fetching data from Google Maps API.\\nPlease check the docs here (https://developers.google.com/maps/documentation/javascript/places#place_details_responses)\\nStatus: ',\n status\n ),\n /* eslint-enable no-unused-vars, no-console */\n searchOptions: {},\n debounce: 200,\n highlightFirstSuggestion: false,\n shouldFetchSuggestions: true,\n};\n\nexport default PlacesAutocomplete;","import PlacesAutocomplete from './PlacesAutocomplete';\nimport { geocodeByAddress, geocodeByPlaceId, getLatLng } from './utils';\n\nexport { geocodeByAddress, geocodeByPlaceId, getLatLng };\n\nexport default PlacesAutocomplete;","import React, { useState, useEffect } from 'react';\nimport { InputGroup, FormControl, Spinner, ListGroup, Button } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faSearch, faPlusSquare } from '@fortawesome/pro-solid-svg-icons';\nimport PlacesAutocomplete, { geocodeByAddress } from \"../../react-places-autocomplete\";\n\nexport const locationTypes = {\n ROOFTOP: 'ROOFTOP',\n RANGE_INTERPOLATED: 'RANGE_INTERPOLATED',\n GEOMETRIC_CENTER: 'GEOMETRIC_CENTER',\n APPROXIMATE: 'APPROXIMATE',\n};\n\nexport const LocationSelector = ({ value, isInvalid, onChange, onChangeExt, customPlaceholder, searchOptions, clearAfterChange, clickToChange }) => {\n const [placeAddress, setPlaceAddress] = useState(value.name || '');\n const [location, setLocation] = useState({ ...value });\n\n useEffect(() => {\n setPlaceAddress(value.name || '');\n }, [value.name]);\n\n useEffect(() => {\n if (location.name !== value.name) {\n if (!clickToChange) {\n onChange(location);\n if (clearAfterChange) {\n setPlaceAddress('');\n }\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [location]);\n\n const onChangeClick = () => {\n onChange(location);\n if (clearAfterChange) {\n setPlaceAddress('');\n }\n }\n\n const handlePlaceChange = address => {\n if (!address) {\n setLocation({\n name: '',\n latitude: 0,\n longitude: 0,\n addressComponents: {},\n });\n }\n setPlaceAddress(address);\n }\n\n const parseAddressComponents = addressComponents => {\n if (addressComponents !== null && addressComponents !== undefined && addressComponents.length > 0) {\n return addressComponents.reduce((p, c) => {\n if (c.types !== undefined && c.types.length > 0) {\n /* US address_components = [\n { \"long_name\" : \"1\", \"short_name\" : \"1\", \"types\" : [ \"street_number\" ] },\n { \"long_name\" : \"Roosevelt Drive\", \"short_name\" : \"Roosevelt Dr\", \"types\" : [ \"route\" ] },\n { \"long_name\" : \"Mount Laurel Township\", \"short_name\" : \"Mt Laurel Township\", \"types\" : [ \"locality\", \"political\" ] },\n { \"long_name\" : \"Burlington County\", \"short_name\" : \"Burlington County\", \"types\" : [ \"administrative_area_level_2\", \"political\" ] },\n { \"long_name\" : \"New Jersey\", \"short_name\" : \"NJ\", \"types\" : [ \"administrative_area_level_1\", \"political\" ] },\n { \"long_name\" : \"United States\", \"short_name\" : \"US\", \"types\" : [ \"country\", \"political\" ] },\n { \"long_name\" : \"08054\", \"short_name\" : \"08054\", \"types\" : [ \"postal_code\" ] },\n { \"long_name\" : \"6307\", \"short_name\" : \"6307\", \"types\" : [ \"postal_code_suffix\" ] }\n ];*/\n /* UK address_components = [\n { \"long_name\" : \"48\", \"short_name\" : \"48\", \"types\" : [ \"street_number\" ] },\n { \"long_name\" : \"Doughty Street\", \"short_name\" : \"Doughty St\", \"types\" : [ \"route\" ] },\n { \"long_name\" : \"London\", \"short_name\" : \"London\", \"types\" : [ \"postal_town\" ] },\n { \"long_name\" : \"Greater London\", \"short_name\" : \"Greater London\", \"types\" : [ \"administrative_area_level_2\", \"political\" ] },\n { \"long_name\" : \"England\", \"short_name\" : \"England\", \"types\" : [ \"administrative_area_level_1\", \"political\" ] },\n { \"long_name\" : \"United Kingdom\", \"short_name\" : \"GB\", \"types\" : [ \"country\", \"political\" ] },\n { \"long_name\" : \"WC1N\", \"short_name\" : \"WC1N\", \"types\" : [ \"postal_code\", \"postal_code_prefix\" ] }\n ];*/\n /* CA address_components = [\n { \"long_name\" : \"Koffler Student Services Centre\", \"short_name\" : \"Koffler Student Services Centre\", \"types\" : [ \"premise\" ] },\n { \"long_name\" : \"214\", \"short_name\" : \"214\", \"types\" : [ \"street_number\" ] },\n { \"long_name\" : \"College Street\", \"short_name\" : \"College St\", \"types\" : [ \"route\" ] },\n { \"long_name\" : \"Old Toronto\", \"short_name\" : \"Old Toronto\", \"types\" : [ \"political\", \"sublocality\", \"sublocality_level_1\" ] },\n { \"long_name\" : \"Toronto\", \"short_name\" : \"Toronto\", \"types\" : [ \"locality\", \"political\" ] },\n { \"long_name\" : \"Toronto\", \"short_name\" : \"Toronto\", \"types\" : [ \"administrative_area_level_2\", \"political\" ] },\n { \"long_name\" : \"Ontario\", \"short_name\" : \"ON\", \"types\" : [ \"administrative_area_level_1\", \"political\" ] },\n { \"long_name\" : \"Canada\", \"short_name\" : \"CA\", \"types\" : [ \"country\", \"political\" ] },\n { \"long_name\" : \"M5T 3A1\", \"short_name\" : \"M5T 3A1\", \"types\" : [ \"postal_code\" ] }\n ];*/\n /* MX address_components = [\n { \"long_name\" : \"Avenida Yaxchilán\", \"short_name\" : \"Av Yaxchilán\", \"types\" : [ \"route\" ] },\n { \"long_name\" : \"24\", \"short_name\" : \"24\", \"types\" : [ \"political\", \"sublocality\", \"sublocality_level_2\" ] },\n { \"long_name\" : \"Cancún\", \"short_name\" : \"Cancún\", \"types\" : [ \"locality\", \"political\" ] },\n { \"long_name\" : \"Quintana Roo\", \"short_name\" : \"Q.R.\", \"types\" : [ \"administrative_area_level_1\", \"political\" ] },\n { \"long_name\" : \"Mexico\", \"short_name\" : \"MX\", \"types\" : [ \"country\", \"political\" ] }\n ];*/\n switch (c.types[0]) {\n case 'street_number':\n p.streetNumber = c.long_name;\n break;\n case 'route':\n p.route = c.long_name;\n break;\n case 'locality':\n case 'postal_town':\n p.city = c.long_name;\n break;\n case 'administrative_area_level_1':\n p.state = c.short_name;\n break;\n case 'postal_code':\n p.zip = c.long_name;\n break;\n case 'country':\n p.country = c.short_name;\n break;\n default:\n //noop\n break;\n }\n if (c.types.includes('sublocality_level_2')) {\n p.route = `${p.route} ${c.long_name}`;\n }\n }\n return p;\n }, {});\n }\n return {};\n }\n\n const handlePlaceSelect = (address, placeId, suggestion) => {\n setPlaceAddress(address);\n geocodeByAddress(address)\n .then(results => {\n try {\n const addressComponents = parseAddressComponents(results[0]['address_components']);\n if (typeof(onChangeExt) === 'function') {\n onChangeExt({ ...addressComponents, latitude: results[0].geometry.location.lat(), longitude: results[0].geometry.location.lng() });\n }\n setLocation({\n placeName: suggestion?.formattedSuggestion?.mainText,\n placeId: placeId,\n name: address,\n formattedAddress: results[0].formatted_address,\n latitude: results[0].geometry.location.lat(),\n longitude: results[0].geometry.location.lng(),\n locationType: results[0].geometry.location_type,\n addressComponents: {...addressComponents},\n isLodging: results[0].types.includes('lodging'),\n })\n } catch (error) {\n console.error(\"Error\", error);\n }\n })\n .catch(error => console.error(\"Error\", error));\n };\n\n return (\n \n \n \n \n {loading && \n \n \n \n \n )}\n \n \n {suggestions.map((suggestion, suggestionIndex) => {\n const className = suggestion.active\n ? \"places-suggestion-item-active\"\n : \"places-suggestion-item\";\n // inline style for demonstration purpose\n const style = suggestion.active\n ? { backgroundColor: \"#fafafa\", cursor: \"pointer\" }\n : { backgroundColor: \"#ffffff\", cursor: \"pointer\" };\n return (\n \n \n {suggestion.description}\n \n \n );\n })}\n \n
\n )}\n \n );\n}","export const geocodeByAddress = address => {\n const geocoder = new window.google.maps.Geocoder();\n const OK = window.google.maps.GeocoderStatus.OK;\n \n return new Promise((resolve, reject) => {\n geocoder.geocode({ address }, (results, status) => {\n if (status !== OK) {\n reject(status);\n }\n resolve(results);\n });\n });\n };\n \n export const getLatLng = result => {\n return new Promise((resolve, reject) => {\n try {\n const latLng = {\n lat: result.geometry.location.lat(),\n lng: result.geometry.location.lng(),\n };\n resolve(latLng);\n } catch (e) {\n reject(e);\n }\n });\n };\n \n export const geocodeByPlaceId = placeId => {\n const geocoder = new window.google.maps.Geocoder();\n const OK = window.google.maps.GeocoderStatus.OK;\n \n return new Promise((resolve, reject) => {\n geocoder.geocode({ placeId }, (results, status) => {\n if (status !== OK) {\n reject(status);\n }\n resolve(results);\n });\n });\n };","import React, { useContext } from 'react';\nimport { UserProfileContext } from '../../userProfileContext';\nimport { LogoutButton } from '../auth/logout-button';\nimport './disabled.scss';\n\nexport const ProfileDisabled = () => {\n const { userProfile } = useContext(UserProfileContext);\n\n return (\n \n
\n );\n}","import { Button, ButtonGroup, Dropdown, Form, InputGroup, ListGroup, ListGroupItem, Modal } from \"react-bootstrap\";\nimport { ReportBoardCol, ReportBoardRow } from \"../../reporting/report-board\";\nimport { ReportCard, reportCardHeights } from \"../../reporting/report-card\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faSearch } from \"@fortawesome/pro-duotone-svg-icons\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { ROLE_ADMIN, UserProfileContext } from \"../../../userProfileContext\";\nimport { callApi, defaultErrorNotification } from \"../../../apiProvider\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport Loader from \"../../loader\";\nimport { Metric } from \"../../reporting/metric\";\nimport { EventPlanStatusMap, ProposalRequestStatusMap } from \"../../../common/statusMaps\";\nimport { differenceInCalendarWeeks, format, parseISO } from \"date-fns\";\nimport './index.scss';\nimport { Link, useHistory } from \"react-router-dom/cjs/react-router-dom.min\";\nimport { StackedBar } from \"../../reporting/stacked-bar\";\nimport { formatCurrency, formatNumber } from \"../../../common\";\nimport { DonutChart } from \"../../reporting/donut-chart\";\nimport { Pie } from \"recharts\";\nimport { EventCancelModal } from \"../../event/cancel-modal\";\nimport { Share } from \"../../event/planner/share\";\nimport { RfpViewPipeline } from \"./rfp-view-pipeline\";\nimport { RfpViewGrid } from \"./rfp-view-grid\";\nimport { ActionToggle } from \"../../buttons/action-toggle\";\nimport { faFilterList } from \"@fortawesome/pro-solid-svg-icons\";\nimport { faCircleBookOpen, faCircleCalendar } from \"@fortawesome/pro-light-svg-icons\";\nimport { calculateOpportunityValue } from \"../../../common/proposalValues\";\nimport { MessagingDashboardTile } from \"../../chat/dashboard-tile\";\nimport { getMembers, sortMembers } from \"../../../services/organizations\";\n\nconst getEvents = filterText => {\n return callApi(\n `/sourcing/api/events/plans${!!filterText ? `?$filter=${filterText}` : ''}`,\n {\n method: 'GET'\n },\n true\n );\n}\n\nconst mapEvent = e => {\n const proposalRequests = Object.keys(e.proposalRequestStatuses).reduce((a, c) => {\n a.requestsTotal += c === ProposalRequestStatusMap.Pending.key ? 0 : e.proposalRequestStatuses[c].length;\n a.requestsResponded += [ProposalRequestStatusMap.Pending.key,ProposalRequestStatusMap.New.key,ProposalRequestStatusMap.Received.key].includes(c) ? 0 : e.proposalRequestStatuses[c].length;\n a.requestsAwaiting = a.requestsTotal - a.requestsResponded;\n return a;\n }, { requestsResponded: 0, requestsAwaiting: 0, requestsTotal: 0 });\n const owner = e.planners.find(p => p.owner);\n return {\n ...e,\n name: e.name || `New RFP Created ${format(parseISO(e.created), 'MMM d, yyyy')}`,\n rfpValue: calculateOpportunityValue([EventPlanStatusMap.Contracting.key,EventPlanStatusMap.Contracted.key].includes(e.status) ? e.proposalValues : e.proposalValuesAverage),\n ownerId: !!owner ? owner.id : null,\n ownerName: !!owner ? `${owner.firstName} ${owner.lastName}` : null,\n ...proposalRequests,\n responseRate: proposalRequests.requestsTotal > 0 ? (proposalRequests.requestsResponded / proposalRequests.requestsTotal * 100) : 0,\n };\n}\n\nexport const dashboardStatuses = [\n { status: EventPlanStatusMap.New.key, fill: '#f0f2f3', color: '#638FA9', active: false, },\n { status: EventPlanStatusMap.Submitted.key, fill: '#FAC536', color: '#FA6A36', active: true, },\n { status: EventPlanStatusMap.Bidding.key, fill: '#BCEBFF', color: '#0A587E', active: true, },\n { status: EventPlanStatusMap.Contracting.key, fill: '#95D9D0', color: '#027587', active: true, },\n];\n\nconst dashboardStatusKeys = dashboardStatuses.map(s => s.status);\n\nconst viewNames = {\n pipeline: { key: 'pipeline', label: 'Columns' },\n list: { key: 'list', label: 'List' },\n cancelled: { key: 'cancelled', label: 'Cancelled' },\n};\n\nconst detailsToggleKeys = {\n unreadProposals: 'unreadProposals',\n unreadMessages: 'unreadMessages',\n responsesDueThisWeek: 'responsesDueThisWeek',\n selectionsDueThisWeek: 'selectionsDueThisWeek',\n}\n\nexport const PlannerDashboard = ({ onCopyEvent }) => {\n const history = useHistory();\n const { userProfile } = useContext(UserProfileContext);\n const [viewName, setViewName] = useState(viewNames.pipeline.key);\n const [filterText, setFilterText] = useState('');\n const [showLoader, setShowLoader] = useState(false);\n const [events, setEvents] = useState([]);\n const [ownerFilter, setOwnerFilter] = useState({ selected: null, filters: [] });\n const [organizationMembers, setOrganizationMembers] = useState([]);\n const [assignOwnerContext, setAssignOwnerContext] = useState({ eventPlan: {}, newOwner: {} });\n const [assignOwnerModal, setShowAssignOwnerModal] = useState(false);\n const [shareContext, setShareContext] = useState({});\n const [showShareModal, setShowShareModal] = useState(false);\n const [deleteContext, setDeleteContext] = useState({});\n const [showConfirmModal, setShowConfirmModal] = useState(false);\n const [showCancelModal, setShowCancelModal] = useState(false);\n const [cancelContext, setCancelContext] = useState({});\n const [detailsToggle, setDetailsToggle] = useState(null);\n const [metrics, setMetrics] = useState({\n activeRfps: [],\n activeStatuses: [],\n overdueRfps: [],\n awardedRfps: [],\n unreadProposals: [],\n responsesDueThisWeek: [],\n selectionsDueThisWeek: [],\n });\n\n useEffect(() => {\n if (userProfile.role !== ROLE_ADMIN) {\n setShowLoader(true);\n getEvents().then(r => setEvents(r.data.map(mapEvent))).finally(() => setShowLoader(false));\n }\n }, [userProfile.role]);\n\n useEffect(() => {\n const today = new Date();\n setMetrics(events.reduce((a, c) => {\n const selectionDate = !!c.selectionDate ? parseISO(c.selectionDate) : null;\n const responsesDueDate = !!c.responsesDueDate ? parseISO(c.responsesDueDate) : null;\n if (dashboardStatuses.find(s => s.status === c.status && s.active)) {\n const overdue = c.status !== EventPlanStatusMap.Contracting.key && selectionDate < new Date();\n a.overdueRfps[overdue ? 0 : 1].count++;\n a.activeRfps.push(c);\n a.activeStatuses.find(s => s.status === c.status).count++;\n a.activeStatuses.find(s => s.status === c.status).value += c.rfpValue;\n }\n if ([EventPlanStatusMap.Contracting.key,EventPlanStatusMap.Contracted.key].includes(c.status)) {\n const index = c.status === EventPlanStatusMap.Contracting.key ? 0 : 1;\n a.awardedRfps[index].count++;\n a.awardedRfps[index].value += c.rfpValue;\n }\n if (EventPlanStatusMap.Bidding.key === c.status && c.proposalRequestStatuses[ProposalRequestStatusMap.Active.key]?.length > 0)\n {\n a.unreadProposals.push(...c.proposalRequestStatuses[ProposalRequestStatusMap.Active.key]);\n }\n if (selectionDate > today && differenceInCalendarWeeks(selectionDate, today) === 0) {\n a.selectionsDueThisWeek.push(c);\n }\n if (responsesDueDate > today && differenceInCalendarWeeks(responsesDueDate, today) === 0) {\n a.responsesDueThisWeek.push(c);\n }\n return a;\n }, {\n activeRfps: [],\n activeStatuses: dashboardStatuses.filter(s => s.active).map(s => ({ ...s, count: 0, value: 0 })),\n overdueRfps: [\n { name: 'Overdue', count: 0, fill: '#B82B45' },\n { name: 'Other', count: 0, fill: '#c0cadd' },\n ],\n awardedRfps: [\n { name: EventPlanStatusMap.Contracting.key, count: 0, value: 0, fill: '#95D9D0' },\n { name: EventPlanStatusMap.Contracted.key, count: 0, value: 0, fill: '#027587' },\n ],\n unreadProposals: [],\n responsesDueThisWeek: [],\n selectionsDueThisWeek: [],\n }));\n setOwnerFilter({ selected: null, filters: events.filter(e => dashboardStatusKeys.includes(e.status)).reduce((a, c) => {\n if (!!c.ownerId && a.some(e => e.id === c.ownerId) === false) {\n a.push({ id: c.ownerId, name: c.ownerName });\n }\n return a;\n }, []) });\n }, [events]);\n\n const onSearchAdmin = useDebouncedCallback((value) => {\n setShowLoader(true);\n getEvents(filterText).then(r => setEvents(r.data.map(mapEvent))).finally(() => setShowLoader(false));\n }, 1000);\n\n const onMarkContractSigned = (event) => {\n history.push(`/event/${event.id}/agreement?marksigned=true`);\n }\n\n const onAssignOwner = (event) => {\n getMembers(event.organizationId).then(r => {\n setOrganizationMembers(r.data);\n setAssignOwnerContext(s => {\n return {\n ...s,\n eventPlan: { id: event.id, name: event.name, ownerId: event.planners.find(p => p.owner)?.id || null },\n };\n });\n setShowAssignOwnerModal(true);\n });\n }\n\n const onConfirmAssignOwner = () => {\n setShowLoader(true);\n callApi(`/sourcing/api/events/plans/${assignOwnerContext.eventPlan.id}/assignowner`, {\n method: 'POST',\n data: {\n ...assignOwnerContext\n }\n }, true)\n .then(() => {\n getEvents(filterText).then(r => setEvents(r.data.map(mapEvent))).finally(() => setShowLoader(false));\n })\n .finally(() => {\n setShowAssignOwnerModal(false);\n setAssignOwnerContext({});\n });\n }\n\n const onShareEvent = (event) => {\n setShareContext(event);\n setShowShareModal(true);\n }\n\n const onChangeView = viewName => {\n setViewName(viewName);\n window.analytics.track(`Planner changed My RFPs view to ${viewName} view`);\n }\n\n const onDeleteEvent = (event) => {\n setDeleteContext(event);\n setShowConfirmModal(true);\n }\n\n const onConfirmDelete = () => {\n setShowLoader(true);\n callApi(`/sourcing/api/events/plans/${deleteContext.id}`, { method: 'DELETE' }, true)\n .catch(error => defaultErrorNotification(error))\n .then(() => {\n getEvents(filterText).then(r => setEvents(r.data.map(mapEvent))).finally(() => setShowLoader(false));\n }).finally(\n setShowConfirmModal(false)\n );\n }\n\n const onCancelEvent = (event) => {\n setCancelContext({...event});\n setShowCancelModal(true);\n }\n\n const onCancelCancel = () => {\n setCancelContext({});\n setShowCancelModal(false);\n }\n \n const onConfirmCancel = () => {\n setShowLoader(true);\n setShowCancelModal(false);\n getEvents(filterText).then(r => setEvents(r.data.map(mapEvent))).finally(() => setShowLoader(false));\n }\n\n const filterEvents = event => {\n if (!filterText && !!ownerFilter.selected?.id) {\n return event.ownerId === ownerFilter.selected.id;\n }\n\n return (!!ownerFilter.selected?.id ? event.ownerId === ownerFilter.selected.id : true)\n && (event.name?.toLowerCase()?.includes(filterText.toLowerCase())\n || event.rfpCode?.toLowerCase()?.includes(filterText.toLowerCase())\n || event.organizationName?.toLowerCase()?.includes(filterText.toLowerCase())\n || `${event.planners[0].firstName} ${event.planners[0].lastName} ${event.planners[0].id}`.toLowerCase().includes(filterText.toLowerCase()));\n }\n\n return (\n \n
\n \n Your account has been disabled.\n
\n \n Please contact us if you would like us to re-enable your account.\n
\n {userProfile.disabledReason && (\n \n {userProfile.disabledReason}\n
\n )}\n \n
\n \n {showLoader && \n \n \n \n \n \n \n {dashboardStatuses.filter(s => s.active).map((s, i) => {\n const count = metrics.activeStatuses.find(a => a.status === s.status)?.count ?? 0;\n const other = metrics.activeRfps.length - count;\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 tools={(\n \n \n
\n \n {metrics.overdueRfps[0]?.count === 1 ? 'RFP overdue for a decision' : 'RFPs overdue for decisions'}\n
\n \n a + c.value, 0))}\n />\n
\n \n \n a + c.count, 0))}\n metricCalloutStyle='no-legend'\n >\n
\n \n {metrics.awardedRfps.map((s, i) => (\n
\n \n \n {EventPlanStatusMap[s.name].label}\n
\n ))}\n \n View by{' '}\n \n {[ viewNames.list.key, viewNames.pipeline.key ].map((view, i) => (\n onChangeView(view)}\n >\n {viewNames[view].label}\n \n ))}\n \n
\n \n \n \n \n \n {!!ownerFilter.selected?.id ? (\n setOwnerFilter(s => {\n return {\n ...s,\n selected: null\n }\n })}\n >\n Clear Filter\n \n ) : null}\n {ownerFilter.filters.sort((c,n) => c.name > n.name ? 1 : -1).map((owner, i) => (\n setOwnerFilter(s => {\n return {\n ...s,\n selected: owner\n };\n })}\n title={owner.id}\n >\n {owner.name}\n \n ))}\n \n \n
\n )}\n >\n \n \n {p.venueName}\n
\n ))}\n \n ))}\n \n )}\n \n \n proposal received {format(parseISO(p.submitted), 'MMM d, yyyy')}\n
\n \n \n The new owner will be able to edit and send this RFP, and will receive all notifications.\n
\n \n \n \n {item.name}\n \n \n }\n >\n \n {item.name}\n \n \n \n \n {`Proposal Selection Date: ${format(parseISO(item.selectionDate), 'MMM d, yyyy')}`}\n \n \n }\n >\n \n Overdue\n \n \n )}\n
\n );\n }\n\n const formatStatus = item => {\n const dashboardStatus = dashboardStatuses.find(s => s.status === item.status);\n return (\n \n {item.status !== EventPlanStatusMap.Submitted.key && (\n
\n \n {item.status === EventPlanStatusMap.Submitted.key ? (\n \n {`${formatNumber(item.requestsTotal)} hotels requested`}\n \n ) : (\n \n {`${formatNumber(item.requestsResponded)}/${formatNumber(item.requestsTotal)} hotels (${formatNumber(item.responseRate)}%)`}\n \n )}\n
\n \n );\n }\n return null;\n }\n\n const formatValue = (item, value) => {\n if (!!value) {\n return formatCurrency(value, currency || getCurrency(item.currencyCode));\n }\n return '';\n };\n\n const filterHotels = hotel => typeof(hotelsListFilterFn) === 'function' ? hotelsListFilterFn(hotel) : true;\n\n const formatHotelsList = item => {\n const filteredHotels = item.hotels.filter(filterHotels);\n return filteredHotels.map((hotel, index) => {\n return (\n \n \n
\n );\n });\n }\n\n const formatHotelsListExport = item => {\n const filteredHotels = item.hotels.filter(filterHotels);\n return filteredHotels.map(hotel => `${hotel.venueName}, ${hotel.venueLocation}`).join('; ');\n }\n\n const formatActions = item => {\n return (\n {hotel.venueName}
\n {hotel.venueLocation}
\n \n \n \n \n \n \n {item.status === EventPlanStatusMap.Contracting.key && ( onMarkContractSigned(item)}>Mark as Contract Signed )}\n onAssignOwner(item)}>Assign Owner... \n onShareEvent(item)}>Share with planner(s)... \n onCopyEvent(item)}>Duplicate RFP... \n {item.status === EventPlanStatusMap.New.key && (\n onDeleteEvent(item)}>Delete \n )}\n {['New','Cancelled'].includes(item.status) === false && (\n onCancelEvent(item)}>Cancel \n )}\n \n \n
\n );\n }\n\n return (\n \n {userProfile.isAdmin && (\n \n {e.organizationName}\n \n )}\n
\n \n );\n })}\n \n ))}\n \n {props.metricValue && (\n \n \n {props.children}\n \n \n )}\n
\n );\n}","import React from 'react';\nimport WhatsThis from '../whats-this';\n\nexport const Metric = props => {\n return (\n \n
\n )}\n {(loading && (\n \n {props.metricValue}\n
\n {props.metricLabel && (\n \n {props.metricLabel}\n
\n )}\n \n
\n );\n}","import React from 'react';\nimport { Row, Col } from 'react-bootstrap';\n\nexport const ReportBoardRow = props => {\n return (\n \n {props.value}\n {props.valueHint && (\n \n {props.valueHint}\n \n )}\n
\n {props.label && (\n \n {props.label}\n {props.infoText ? (\n
\n )}\n {props.subtext && (\n \n {props.subtext}\n
\n )}\n \n
\n );\n}","import React, { useEffect, useState } from 'react';\nimport { OverlayTrigger, Popover } from 'react-bootstrap';\nimport { formatNumber } from '../../common';\nimport { ReportBoardCol, ReportBoardRow } from './report-board';\nimport './stacked-bar.scss';\n\nconst defaultLegendGroupSize = 4;\n\nexport const StackedBar = props => {\n const { data, valueKey, labelKey, colorKey, formattedValueKey, hideOverlay, hideLegend, legendGroupSize, suppressZeroValues, hideValueInLegend } = props;\n const [dataSummary, setDataSummary] = useState({\n total: 0,\n leftMost: 0,\n rightMost: data.length - 1,\n barData: [],\n legendGroups: [],\n });\n\n useEffect(() => {\n const barData = data.filter(d => {\n if (d.hide) {\n return false;\n }\n if (suppressZeroValues && d.value === 0) {\n return false;\n }\n return true;\n }).map((d,i) => {\n return {\n ...d,\n index: i,\n value: d[valueKey || 'value'] * 1.0,\n color: d[colorKey || 'color'],\n label: d[labelKey || 'label'],\n formattedValue: d[formattedValueKey || 'formattedValue'],\n };\n });\n const legendGroups = barData.sort((c,n) => c.index - n.index).reduce((a,c,i) => {\n a.currentGroupIndex += (i % (legendGroupSize ?? defaultLegendGroupSize) === 0) ? 1 : 0;\n if (a.data.length > a.currentGroupIndex) {\n a.data[a.currentGroupIndex].data.push(c);\n } else {\n a.data.push({\n index: a.currentGroupIndex,\n data: [c]\n });\n }\n return a;\n }, { currentGroupIndex: -1, data: [] }).data;\n setDataSummary({\n total: barData.reduce((a, c) => a + c.value, 0),\n leftMost: (barData.find(d => d.value > 0) || { index: 0 }).index,\n rightMost: (barData.sort((c,n) => n.index - c.index).find(d => d.value) || { index: barData.filter(d => d.value).length - 1 }).index,\n barData,\n legendGroups,\n });\n }, [data, valueKey, labelKey, colorKey, formattedValueKey, legendGroupSize, suppressZeroValues]);\n\n return (\n \n
\n \n {props.lockPaidFeature && (\n
\n {props.toolsMiddle && (\n \n {props.toolsMiddle}\n
\n )}\n {props.tools && (\n \n {props.tools}\n
\n )}\n \n {props.loading ? (\n
\n \n \n \n {d.label}\n
\n {d.formattedValue}{dataSummary.total ? ` (${formatNumber((d.value * 1.0) / dataSummary.total * 100)}%)` : ''}\n \n \n }\n >\n \n \n
\n \n );\n }))}\n \n {!hideLegend && (\n <>\n {dataSummary.legendGroups.map(g => (\n \n {(dataSummary.barData.every(d => !d.value) && (\n \n \n
\n );\n }\n return (\n \n No Data\n
\n )) || (dataSummary.barData.filter(d => Math.floor(d.value ?? 0) > 0).sort((c,n) => c.index - n.index).map(d => {\n const width = Math.max(0, Math.floor(dataSummary.total ? (d.value / dataSummary.total * 100) : (1.0 / dataSummary.barData.length * 100)) - 1);\n var borderRadii = {};\n if (d.index === dataSummary.leftMost && d.index === dataSummary.rightMost) {\n borderRadii = { borderTopLeftRadius: '.5rem', borderBottomLeftRadius: '.5rem', borderTopRightRadius: '.5rem', borderBottomRightRadius: '.5rem' };\n } else if (d.index === dataSummary.leftMost) {\n borderRadii = { borderTopLeftRadius: '.5rem', borderBottomLeftRadius: '.5rem' };\n } else if (d.index === dataSummary.rightMost) {\n borderRadii = { borderTopRightRadius: '.5rem', borderBottomRightRadius: '.5rem' };\n }\n if (hideOverlay) {\n return (\n \n {d.formattedValue}{dataSummary.total ? ` (${formatNumber((d.value * 1.0) / dataSummary.total * 100)}%)` : ''}\n
\n
{e}
\n ))}{`${showUpgradePrompt.feature.gerund} is ${['A','E','I','O','U'].includes(showUpgradePrompt.feature.tierName.substr(0,1)) ? 'an' : 'a'} ${showUpgradePrompt.feature.tierName} feature.`}
\n )}\n Click Upgrade to see pricing and plan options.\n \n \n {heading}\n \n )}\n
\n \n );\n}","import React, { useContext } from 'react';\nimport { UserProfileContext } from '../../userProfileContext';\nimport './impersonation-watermark.scss';\n\nconst ImpersonationWatermark = () => {\n const { userProfile } = useContext(UserProfileContext);\n\n if (!userProfile.isImpersonating) {\n return null;\n }\n\n return (\n \n
\n \n {message}\n
\n \n {typeof(onClick) === 'function' && ctaPrompt && (\n \n {ctaPrompt}\n \n )}\n
\n \n \n Impersonating User
{userProfile.firstName} {userProfile.lastName}\n \n
\n );\n};\n\nexport default ImpersonationWatermark;\n","import React from 'react';\nimport { OverlayTrigger, Popover } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faExclamationCircle, faCheckCircle, faQuestionCircle, faInfoCircle as faInfoCircleSolid } from '@fortawesome/pro-solid-svg-icons';\nimport { faInfoCircle } from '@fortawesome/pro-light-svg-icons';\n\nexport const WhatsThisStyles = {\n success: { badgeVariant: 'success', icon: faCheckCircle, color: '#4FC0B0' },\n info: { badgeVariant: 'info', icon: faInfoCircle, color: '#073d57' },\n warning: { badgeVariant: 'danger', icon: faExclamationCircle, color: '#F86866' },\n help: { badgeVariant: 'info', icon: faQuestionCircle, color: '#073d57' },\n infoSolid: { badgeVariant: 'info', icon: faInfoCircleSolid, color: '#fff' },\n};\n\nconst WhatsThis = ({ id, style, title, content, verticalAlign, containerStyle }) => {\n\n const popover = () => {\n return (\n {userProfile.firstName} {userProfile.lastName}\n \n
\n
\n \n );\n}\nexport default WhatsThis;","import React, { useEffect } from 'react';\nimport { Route } from 'react-router-dom';\nimport ChatView from '../../views/chat';\n\nconst Chat = () => {\n\tuseEffect(() => {\n\t\tdocument.title = 'HopSkip - Chat';\n\t}, []);\n\treturn (\n\t\t\n\t\t\t
\n\t);\n}\n\nexport default Chat;\n","import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport React, { useContext, useState } from 'react';\nimport { Button, OverlayTrigger, Popover } from 'react-bootstrap';\nimport { useHistory } from 'react-router-dom';\nimport { copyItemTypes, duplicateActions, EventPlanDuplicateModal } from '../../../components/event-plan-duplicate/event-plan-duplicate-modal';\nimport { FeatureContext } from '../../../featureProvider';\nimport './nav-item.scss'\n\nexport const CreateRfpNavItem = ({ icon, iconStyle, text, id, disabled }) => {\n const history = useHistory();\n const [showTemplateModal, setShowTemplateModal] = useState(false);\n const { getFeatureByKey, promptUserToUpgrade } = useContext(FeatureContext);\n\n return (\n \n \n Create an RFP \n \n \n \n )}\n >\n \n setShowTemplateModal(false)}\n />\n
\n );\n}","import { faChevronDown, faChevronUp } from '@fortawesome/pro-light-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport React, { useContext, useEffect, useState } from 'react';\nimport { Badge } from 'react-bootstrap';\nimport { Link, useLocation } from 'react-router-dom';\nimport TabStatus from '../../../components/tab-status';\nimport { NavContext } from '../../../navProvider';\nimport { ROLE_HOTELIER, ROLE_PLANNER, UserProfileContext } from '../../../userProfileContext';\nimport './local-navbar.scss';\n\nexport const LocalNavContainer = () => {\n const { userProfile } = useContext(UserProfileContext);\n const { currentLocalNav } = useContext(NavContext);\n const location = useLocation();\n const [navBarOpen, setNavBarOpen] = useState(false);\n const [groupState, setGroupState] = useState({});\n\n useEffect(() => {\n if (currentLocalNav.navGroups) {\n setGroupState(currentLocalNav.navGroups.reduce((a, g) => {\n a[g.key] = g.open;\n return a;\n }, {}))\n }\n }, [currentLocalNav.navGroups]);\n\n const toggleNavBar = () => {\n setNavBarOpen(s => !s);\n }\n\n const toggleGroup = (navGroup) => {\n setGroupState(s => {\n return {\n ...s,\n [navGroup.key]: !s[navGroup.key]\n };\n });\n }\n\n if (!currentLocalNav.show) {\n return null;\n }\n\n return (\n \n \n );\n}","import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport React from 'react';\nimport { Button, OverlayTrigger, Popover } from 'react-bootstrap';\nimport { Link } from 'react-router-dom';\nimport './nav-item.scss'\n\nexport const MultiRoleNavItem = ({ icon, iconStyle, text, id, options, disabled }) => {\n return (\n \n history.push(`/event`)}\n disabled={disabled}\n >\n Create New RFP\n \n
\n \n {\n if (getFeatureByKey('TEMPLATES')) {\n setShowTemplateModal(true);\n } else {\n promptUserToUpgrade(true, 'TEMPLATES');\n }\n }}\n disabled={disabled}\n >\n Use a Template\n \n
\n \n \n {text} \n \n {options.map((option, index) => (\n \n \n {option.label}\n \n
\n ))}\n \n \n )}\n >\n \n \n {text} \n \n )}\n >\n {(typeof(onClick) === 'function' && (\n \n
\n );\n}","import React, { useContext, useEffect, useState } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { OverlayTrigger, Popover } from 'react-bootstrap';\nimport { faBell } from '@fortawesome/pro-light-svg-icons';\nimport { ChatContext } from '../../../chatContext';\nimport { Link } from 'react-router-dom';\nimport { ROLE_AFFILIATE, ROLE_DESTINATIONMANAGER, ROLE_HOTELIER, ROLE_SUPPLIER, UserProfileContext } from '../../../userProfileContext';\nimport './nav-item.scss'\n\nexport const NotificationsNavItem = () => {\n const { userProfile } = useContext(UserProfileContext);\n const { unreadConversations, parseConversationDisplayName, parseConversationUniqueName } = useContext(ChatContext);\n const [conversations, setConversations] = useState([]);\n const [unreadConversationCount, setUnreadConversationCount] = useState(0);\n\n useEffect(() => {\n setConversations(unreadConversations.filter(uc => uc.unreadMessagesCount > 0));\n setUnreadConversationCount(unreadConversations.filter(uc => uc.unreadMessagesCount > 0).length);\n }, [unreadConversations]);\n\n const unreadConversationLink = (unreadConversation, index) => {\n const { rfpId, venueId } = parseConversationUniqueName(unreadConversation.uniqueName);\n const { rfpName, venueName } = parseConversationDisplayName(unreadConversation.friendlyName);\n \n let to = `/event/${rfpId}/messaging/${venueId}`;\n let text = `${venueName} (${rfpName})`;\n\n switch (userProfile.role) {\n case ROLE_HOTELIER:\n to = `/proposal/${rfpId}/${venueId}/messaging`;\n text = rfpName;\n break;\n case ROLE_AFFILIATE:\n case ROLE_SUPPLIER:\n case ROLE_DESTINATIONMANAGER:\n to = `/supplier/request/${rfpId}/messaging`;\n text = rfpName;\n break;\n default:\n break;\n }\n\n return (\n \n {text}\n
\n );\n }\n\n return (\n \n \n \n {`${unreadConversationCount} unread message${unreadConversationCount === 1 ? '' : 's'}`}\n \n \n \n \n )}\n >\n
\n );\n}","import React, { useContext } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { FeatureContext } from '../../../featureProvider';\nimport './nav-item.scss'\n\nexport const UpgradeNavItem = () => {\n const { canUpgrade } = useContext(FeatureContext);\n const history = useHistory();\n\n if (!canUpgrade) {\n return null;\n }\n\n return (\n \n {conversations.map(unreadConversationLink)}\n
\n \n
\n \n \n {unreadConversationCount}\n
\n )}\n Upgrade
\n \n );\n}","import React, { useContext } from 'react';\nimport { Button, OverlayTrigger, Popover } from 'react-bootstrap';\nimport { useHistory } from 'react-router-dom';\nimport { LogoutButton } from '../../../components/auth/logout-button';\nimport { ROLE_ADMIN, ROLE_PLANNER, UserProfileContext, isUserProfileInitialized, ROLE_AFFILIATE, ROLE_DESTINATIONMANAGER, ROLE_SALESOPS, ROLE_HOTELIER, ROLE_SUPPLIER } from '../../../userProfileContext';\nimport './nav-item.scss'\n\nconst orgPaths = {\n [ROLE_DESTINATIONMANAGER]: 'destinationprofile',\n [ROLE_AFFILIATE]: 'affiliateorganization',\n [ROLE_HOTELIER]: 'hotelprofile'\n}\n\nexport const UserNavItem = () => {\n const { userProfile } = useContext(UserProfileContext);\n const history = useHistory();\n\n return (\n \n \n \n \n \n \n \n )}\n >\n \n {userProfile.firstName && userProfile.lastName ? `${userProfile.firstName[0]}${userProfile.lastName[0]}` : '--'}\n \n \n
\n );\n}","import React, { useContext, useEffect, useState } from 'react';\nimport { Button, Container } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faBars, faChevronSquareLeft } from '@fortawesome/pro-solid-svg-icons';\nimport { faAnalytics, faBuilding, faGlobe, faCommentAltEdit, faFileContract, faGraduationCap, faGripHorizontal, faLayerPlus, faMegaphone, faQuestionCircle, faSearch, faToolbox, faUserPlus } from '@fortawesome/pro-light-svg-icons';\nimport { ROLE_ADMIN, ROLE_ADMIN_HOTEL, ROLE_AFFILIATE, ROLE_DESTINATIONMANAGER, ROLE_HOTELIER, ROLE_PLANNER, ROLE_SALESOPS, ROLE_SUPPLIER, UserProfileContext, isUserProfileInitialized } from '../../userProfileContext';\nimport { NavItem } from './components/nav-item';\nimport { UserNavItem } from './components/user-nav-item';\nimport { UpgradeNavItem } from './components/upgrade-nav-item';\nimport { NotificationContainer } from 'react-notifications';\nimport navLogoSvg from '../../images/nav-logo.svg';\nimport { NavContext } from '../../navProvider';\nimport { UpgradePromptModal } from '../../components/upgrade-prompt/modal';\nimport { useHistory, useLocation } from 'react-router-dom';\nimport { useIsAuthenticated } from '@azure/msal-react';\nimport { LocalNavContainer } from './components/local-navbar';\nimport { NotificationsNavItem } from './components/notifications-nav-item';\nimport { FeatureContext } from '../../featureProvider';\nimport { CreateRfpNavItem } from './components/create-rfp-nav-item';\nimport { InvitationModal } from '../../components/invitations/invitation-modal';\nimport { Routes } from '../../views/routes';\nimport './index.scss';\nimport { MultiRoleNavItem } from './components/multi-role-nav-item';\nimport { HotelierNotAssociated } from '../../components/hoteliers/not-associated';\nimport { faUserSecret } from '@fortawesome/pro-duotone-svg-icons';\nimport ImpersonateUserModal from '../../components/admins/impersonate-user-modal';\nimport ImpersonationWatermark from '../../components/watermark/impersonation-watermark';\n\nconst clientNavigate = (userProfileId, location) => {\n\tif (window.hopSkipConfig.api.environment === 'Prod') {\n\t\twindow.analytics.page(location.pathname);\n\t}\n\twindow.Intercom(\"update\");\n}\n\nconst iconMap = {\n\tnewrfp: { icon: faLayerPlus },\n search: { icon: faSearch },\n board: { icon: faGripHorizontal },\n history: { icon: faFileContract },\n\tdocs: { icon: faFileContract },\n toolbox: { icon: faToolbox },\n reports: { icon: faAnalytics },\n\tpromo: { icon: faMegaphone, style: { transform: 'rotate(336deg)' } },\n\tbuilding: { icon: faBuilding },\n\tdestination: { icon: faGlobe },\n\timpersonate: { icon: faUserSecret, activeStyle: { color: 'red' } },\n}\n\nexport const SidebarNavContainer = () => {\n\tconst location = useLocation();\n\tconst history = useHistory();\n\tconst { userProfile } = useContext(UserProfileContext);\n const { getFeatureByKey, promptUserToUpgrade } = useContext(FeatureContext);\n const edcenterFeature = userProfile.role === 'Planner' ? getFeatureByKey('EDCENTER') : { key: 'EDCENTER' };\n\tconst isAuthenticated = useIsAuthenticated();\n const { currentGlobalNav, currentLocalNav } = useContext(NavContext);\n const [sidebarOpen, setSidebarOpen] = useState(false);\n\tconst [showInvitationModal, setShowInvitationModal] = useState(false);\n\tconst [showImpersonateModal, setShowImpersonateModal] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (userProfile.id && location) {\n\t\t\twindow.scroll(0, 0);\n\t\t\tclientNavigate(userProfile.id, location);\n\t\t}\n\t}, [userProfile.id, location]);\n\n const onClickToggle = () => {\n setSidebarOpen(s => !s);\n }\n\n return (\n {`${userProfile.firstName} ${userProfile.lastName}`}
\n {userProfile.id}
\n \n history.push(`/myprofile/overview`)}\n disabled={!isUserProfileInitialized(userProfile)}\n >\n My Profile\n \n
\n {[ROLE_ADMIN,ROLE_AFFILIATE,ROLE_DESTINATIONMANAGER,ROLE_PLANNER].includes(userProfile.role) && (\n \n history.push(`/${orgPaths[userProfile.role] ?? 'organization'}/${userProfile.organizationId}`)}\n disabled={!isUserProfileInitialized(userProfile)}\n >\n My Organization\n \n
\n )}\n {[ROLE_AFFILIATE,ROLE_SALESOPS,ROLE_SUPPLIER].includes(userProfile.role) === false ? (\n \n history.push(`/${orgPaths[userProfile.role] ?? 'organization'}/${userProfile.role === ROLE_HOTELIER ? userProfile.associatedVenues[0]?.id : userProfile.organizationId}/subscriptions`)}\n disabled={!isUserProfileInitialized(userProfile)}\n >\n Subscriptions & Billing\n \n
\n ) : null}\n \n
\n \n
\n );\n}","import React, { useEffect, useState } from 'react';\nimport { callApi } from './apiProvider';\n\nexport const CurrencyContext = React.createContext(null);\n\nexport const UnitedStatesDollar = { symbol: '$', name: 'United States Dollar', code: 'USD' };\nexport const DefaultCurrency = UnitedStatesDollar;\n\nconst loadCurrencies = () => {\n return callApi(\n `/api/currencies`,\n { method: 'GET' },\n true\n );\n}\n\nexport const getExchangeRate = (sourceCurrencyCode, targetCurrencyCode) => {\n return callApi(\n `/api/currencies/exchangeRate/${sourceCurrencyCode}/${targetCurrencyCode}`,\n { method: 'GET' },\n true\n );\n}\n\nexport const CurrencyProvider = ({ children }) => {\n const [currencies, setCurrencies] = useState({\n [UnitedStatesDollar.code]: {...UnitedStatesDollar},\n });\n\n useEffect(() => {\n loadCurrencies().then(r => {\n setCurrencies(r.data);\n });\n }, []);\n\n const getCurrency = (currencyCode) => {\n // currencyItem = {\n // symbol: '',\n // name: '',\n // code: '' //(same as currency param)\n // };\n return currencies[currencyCode];\n }\n\n return (\n \n \n
\n\t\t\t{isAuthenticated && (\n\t\t\t\t\n\t\t\t\t\t{isUserProfileInitialized(userProfile) && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t
\n\t\t\t)}\n\t\t\t{isAuthenticated && (\n\t\t\t\t\n\t\t\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpromptUserToUpgrade(true, navItem.featureKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\ticonStyle={iconMap[navItem.iconKey].style}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif (!!navItem.previewKey && !userProfile.previewExperiences?.[navItem.previewKey]) return null;\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t setShowImpersonateModal(true)}\n\t\t\t\t\t\t\t\t\t\t\ticonStyle={userProfile.isImpersonating ? iconMap.impersonate.activeStyle : {}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t setShowImpersonateModal(false)} />\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t{[ROLE_SALESOPS, ROLE_ADMIN_HOTEL].includes(userProfile.role) === false && (\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{([ROLE_ADMIN, ROLE_HOTELIER, ROLE_DESTINATIONMANAGER].includes(userProfile.role) || (userProfile.role === ROLE_PLANNER && userProfile.accountType)) && (\n\t\t\t\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\t\t\t\tif (edcenterFeature) {\n\t\t\t\t\t\t\t\t\t\t\t\thistory.push('/edcenter/contracts');\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tpromptUserToUpgrade(true, 'EDCENTER');\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{(userProfile.role === ROLE_SUPPLIER && (\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t)) || (userProfile.role === ROLE_DESTINATIONMANAGER && (\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t)) || (userProfile.role === ROLE_AFFILIATE && (\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t)) || ([ROLE_SALESOPS, ROLE_ADMIN_HOTEL].includes(userProfile.role) === false && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t setShowInvitationModal(true)}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t setShowInvitationModal(false)} />\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t { }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t\n\t\t\t\t\t{currentLocalNav.show && (\n\t\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t
\n\t\t\t)}\n \n
\n )}\n appInsights={reactPlugin}\n >\n Something went wrong.
\n Go back and try again\nPlease wait...
;\n }\n \n return (\n \n \n
\n \n \n \n Getting you setup...\n \n \n \n {(!isUserProfileInitialized(userProfile) && (\n \n \n
\n );\n}","import React, { Fragment, useState, useContext, useEffect } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { Row, Col, Dropdown } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlusCircle } from '@fortawesome/pro-solid-svg-icons';\n\nimport { FeatureContext } from '../../featureProvider';\nimport { NavContext, NAV_MODEL_SIDEBAR } from '../../navProvider';\nimport { ROLE_PLANNER, UserProfileContext } from '../../userProfileContext';\n\nimport { MyMessages } from '../../components/chat/my-messages';\nimport ActionsList from '../../components/event/summary/actions-list';\nimport { EventsContainer } from '../../components/event/summary/events-container';\nimport { copyItemTypes, duplicateActions, EventPlanDuplicateModal } from '../../components/event-plan-duplicate/event-plan-duplicate-modal';\nimport { PreviewExperienceSwitcher } from '../../components/preview-experiences/switcher';\nimport { previewExperiences } from '../../common/preview-experiences';\nimport { PlannerDashboard } from '../../components/planners/dashboard';\n\nconst PlannerPortal = () => {\n const history = useHistory();\n const { userProfile } = useContext(UserProfileContext);\n const [displayPreviewSwitcher, setDisplayPreviewSwitcher] = useState(false);\n const { currentNavModel } = useContext(NavContext);\n const [showDuplicateModal, setShowDuplicateModal] = useState(false);\n const [duplicateContext, setDuplicateContext] = useState({ eventPlan: null, duplicateAction: null, createItemType: null });\n const { getFeatureByKey, promptUserToUpgrade } = useContext(FeatureContext);\n\n useEffect(() => {\n setDisplayPreviewSwitcher((userProfile.isAdmin || userProfile.previewExperiences?.DASHBOARDPREVIEW));\n }, [userProfile.isAdmin, userProfile.previewExperiences]);\n\n const onCopyEvent = (event) => {\n setDuplicateContext({ eventPlan: event, duplicateAction: duplicateActions.duplicateRfp, createItemType: copyItemTypes.eventPlanTemplate });\n setShowDuplicateModal(true);\n }\n\n return (\n \n
\n \n \n Welcome to HopSkip {userProfile.firstName}!\n
\n \n To make sure we get your account set up correctly we just need to know how you'll use HopSkip and you'll be on your way!\n
\n \n
\n \n \n
\n {(accountState.viewMode === viewModes.role && (\n <>\n What is your role?
\n Select one option
\n \n \n selectRole(ROLE_PLANNER)}>\n \n selectRole(ROLE_HOTELIER)}>\n \n selectRole(ROLE_DESTINATIONMANAGER)}>\n \n selectRole(ROLE_AFFILIATE)}>\n \n selectRole(ROLE_SUPPLIER)}>\n \n \n
\n \n )) || (accountState.viewMode === viewModes.jobsToBeDone && (\n <>\n Planner
\n I create & send RFPs and book meetings & events for my organization or on behalf of my clients
\n On-Property Hotel Sales/Lead Catcher
\n I assign and/or submit proposals as part of a hotel sales team
\n Destination Management Organization or CVB
\n I suggest hotels and facilitate groups and meetings bookings for my city or destination
\n Sales Affiliate
\n I suggest hotels and facilitate groups and meetings bookings for member hotels in my portfolio
\n Hotel Chain National Sales, Global Sales
\n I suggest hotels and facilitate groups and meetings bookings for hotels in my chain
\n How would you like HopSkip to help you in your job?
\n Select all that apply
\n \n \n {jobsToBeDoneOptions[accountState.role].map((jobToBeDone, index) => (\n \n toggleJobToBeDone(jobToBeDone, e.target.checked)}\n />\n \n ))}\n \n
\n \n \n Save\n \n
\n \n )) || (accountState.viewMode === viewModes.accountType && (\n <>\n What type of organization are you?
\n Select one option
\n \n \n {accountTypeOptions.filter(o => o.description).map((accountType, index) => (\n selectAccountType(accountType.value)}>\n \n ))}\n \n
\n \n )) || (accountState.viewMode === viewModes.address && (\n <>\n {accountType.description}
\n Please enter your business address
\n \n \n Address \n \n\n \n \n City \n onChangeAddress(e.target.name, e.target.value)}\n isInvalid={!accountState.address.city}\n />\n \n\n \n State \n onChangeAddress(e.target.name, e.target.value)}\n isInvalid={!accountState.address.state}\n />\n \n\n \n Postal Code \n onChangeAddress(e.target.name, e.target.value)}\n isInvalid={!accountState.address.zip}\n />\n \n\n \n Country \n onChangeAddress(e.target.name, e.target.value)}\n isInvalid={!accountState.address.country}\n />\n \n \n
\n \n \n Next\n \n
\n \n ))}\n \n
\n )) || (ROLE_HOTELIER === accountState.role && (\n You can reach out using the chat tool in the lower left corner if you need to be associated with any properties.
\n )) || (\n Taking you to your dashboard...
\n )}\n \n \n My RFP Dashboard\n \n
\n \n {currentNavModel === NAV_MODEL_SIDEBAR && (\n