\n \n \n \n \n \n \n
\n \n );\n};\n\nAddToCalendar.propTypes = {\n showIcon: PropTypes.bool,\n buttonClassName: PropTypes.string,\n buttonText: PropTypes.string,\n title: PropTypes.string,\n description: PropTypes.string,\n location: PropTypes.string,\n startDate: PropTypes.instanceOf(Date),\n endDate: PropTypes.instanceOf(Date),\n eventId: PropTypes.number,\n eventUrl: PropTypes.string,\n};\n\nexport default AddToCalendar;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useUserContext } from 'context';\n\nconst AuthRequiredLink = ({ className, style, text, url, defaultToRegister = true }) => {\n const { id: userId, setAuthRequested } = useUserContext();\n\n const handleClick = evt => {\n if (!userId) {\n evt.preventDefault();\n setAuthRequested({\n register: defaultToRegister,\n redirect: url,\n });\n }\n };\n\n return {text};\n};\n\nAuthRequiredLink.propTypes = {\n className: PropTypes.string,\n style: PropTypes.object,\n text: PropTypes.string,\n url: PropTypes.string,\n defaultToRegister: PropTypes.bool,\n};\n\nexport default AuthRequiredLink;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Icon from 'components/Icon';\n\nconst Checkbox = ({\n className,\n style = {},\n labelText,\n checked = false,\n onChange = () => {},\n}) => (\n - \n {options.map(([optVal, optLabel]) => {\n let isSelected = value.includes(optVal);\n if (optVal === null) {\n isSelected = value.length === 0;\n }\n\n const handleClick = () => handleOptionClick(optVal);\n const classes = classNames('checkbox-list-item', isSelected && 'selected');\n\n return (\n
\n
\n \n
\n \n );\n};\n\nAgeGroupFilter.propTypes = {\n useMobileStyle: PropTypes.bool,\n value: PropTypes.arrayOf(PropTypes.oneOf(AGE_GROUP_OPTIONS.map(([val]) => val))),\n onChange: PropTypes.func,\n};\n\nexport default AgeGroupFilter;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { prices } from 'app-constants';\nimport { hasSameContents } from 'utils';\nimport { useFilterContext } from 'context';\nimport Checkbox from 'components/Checkbox';\nimport CheckboxList from 'components/CheckboxList';\nimport DropdownButton from 'components/DropdownButton';\n\nconst PRICE_OPTIONS = prices;\n\nconst PriceFilter = ({ useMobileStyle = false, value, onChange }) => {\n value = value || [];\n\n const menuRef = useRef();\n const [internalValue, setInternalValue] = useState(value);\n\n const valueAsString = value.reduce((result, item) => `${result}${item}`, '');\n useEffect(() => {\n if (!hasSameContents(value, internalValue)) {\n setInternalValue(value);\n }\n }, [valueAsString]);\n\n const handleMenuClose = () => onChange(internalValue);\n const handleClearClick = () => setInternalValue([]);\n const handleApplyClick = () => menuRef.current.close();\n const handleSelectAllChange = checked => setInternalValue(checked ? PRICE_OPTIONS.map(([val]) => val) : []);\n const handleSelectAllChangeMobile = val => onChange(val.length === 1 ? PRICE_OPTIONS.map(([val]) => val) : []);\n\n let activeOptionLabel;\n switch (value.length) {\n case 0:\n activeOptionLabel = 'Any Price';\n break;\n case 1:\n activeOptionLabel = PRICE_OPTIONS.find(([val]) => val === value[0])[1];\n break;\n default:\n activeOptionLabel = `${value.length} Price Ranges`;\n }\n\n const { updateFilterContext } = useFilterContext();\n const activePrices = prices.filter(([val]) => value.includes(val));\n const activePriceIds = activePrices.map(opt => opt[0]);\n const activePriceNames = activePrices.map(opt => opt[2].toLowerCase());\n useEffect(() => {\n updateFilterContext({ priceNames: activePriceNames, prices: activePriceIds });\n }, [JSON.stringify(activePriceIds)]);\n\n return useMobileStyle ? (\n <>\n \n
\n \n \n \n
\n \n
\n \n
\n \n );\n};\n\nPriceFilter.propTypes = {\n useMobileStyle: PropTypes.bool,\n value: PropTypes.arrayOf(PropTypes.oneOf(PRICE_OPTIONS.map(([val]) => val))),\n onChange: PropTypes.func,\n};\n\nexport default PriceFilter;\n","import React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport Icon from 'components/Icon';\n\nconst CategoryList = ({ options, value, onChange }) => {\n const handleOptionClick = val => {\n let newVal;\n if (val === null) {\n newVal = [];\n } else if (value.includes(val)) {\n newVal = value.filter(v => v !== val);\n } else {\n newVal = [...value, val];\n }\n onChange(newVal);\n };\n\n return (\n \n
\n \n \n \n
\n \n {options.map(({ value: optVal, label: optLabel, iconStyle }) => {\n let isSelected = value.includes(optVal);\n if (optVal === null) {\n isSelected = value.length === 0;\n }\n\n const handleClick = () => handleOptionClick(optVal);\n const classes = classNames('category-list-item', isSelected && 'selected');\n const attrs = {\n 'data-list-id': 'filter-category',\n 'data-option-value': optVal,\n 'data-option-label': optLabel,\n 'data-is-selected': isSelected,\n };\n\n return (\n
\n );\n};\n\nCategoryList.propTypes = {\n options: PropTypes.arrayOf(PropTypes.shape({\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n PropTypes.bool,\n ]),\n label: PropTypes.string.isRequired,\n iconStyle: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.string),\n ]),\n })).isRequired,\n value: PropTypes.arrayOf(PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n PropTypes.bool,\n ])),\n onChange: PropTypes.func.isRequired,\n};\n\nexport default CategoryList;\n","import React, { useState, useEffect, useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { hasSameContents } from 'utils';\nimport { useGetAPI } from 'hooks';\nimport { useFilterContext } from 'context';\nimport { typeIcons } from 'app-constants';\nimport CategoryList from 'components/CategoryList';\nimport Checkbox from 'components/Checkbox';\nimport DropdownButton from 'components/DropdownButton';\n\nconst CategoryFilter = ({ useMobileStyle = false, value, onChange }) => {\n const { data: categoriesData, isFetching, error } = useGetAPI('event_types');\n\n value = value || [];\n\n const options = useMemo(() => {\n return (categoriesData || []).map(({ id, name }) => ({\n value: id,\n label: name,\n iconStyle: typeIcons[name] || typeIcons.default,\n }));\n }, [categoriesData]);\n\n useEffect(() => {\n if (error) console.error(error);\n // TODO - logging\n }, [error]);\n\n const menuRef = useRef();\n const [internalValue, setInternalValue] = useState(value);\n\n const valueAsString = value.reduce((result, item) => `${result}${item}`, '');\n useEffect(() => {\n if (!hasSameContents(value, internalValue)) {\n setInternalValue(value);\n }\n }, [valueAsString]);\n\n const handleMenuClose = () => onChange(internalValue);\n const handleClearClick = () => setInternalValue([]);\n const handleApplyClick = () => menuRef.current.close();\n const handleSelectAllChange = checked => setInternalValue(checked ? options.map(({ value }) => value) : []);\n\n let activeOptionLabel = 'Any Category';\n if (value.length > 0) {\n const matchedOption = options.find(({ value: val }) => val === value[0]);\n if (matchedOption) {\n activeOptionLabel = matchedOption.label;\n if (value.length > 1) activeOptionLabel += ` +${value.length - 1}`;\n }\n }\n\n const { updateFilterContext } = useFilterContext();\n const activeCategoryOptions = options.filter(opt => value.includes(opt.value));\n const activeCategoryIds = activeCategoryOptions.map(opt => opt.value);\n const activeCategoryNames = activeCategoryOptions.map(opt => opt.label);\n useEffect(() => {\n updateFilterContext({ categoryNames: activeCategoryNames, categoryIds: activeCategoryIds });\n }, [JSON.stringify(activeCategoryIds)]);\n\n return useMobileStyle ? (\n \n {!!iconStyle &&
\n );\n })}\n \n
\n \n
\n \n );\n};\n\nCategoryFilter.propTypes = {\n useMobileStyle: PropTypes.bool,\n value: PropTypes.array,\n onChange: PropTypes.func,\n};\n\nexport default CategoryFilter;\n","import themeColors from 'styles/themeColors.module.scss';\n\nexport default themeColors;\n\n// The purpose of this file is to allow the SASS color variables exported in\n// themeColors.module.scss to be used in JavaScript files, like so:\n//\n// import colors from 'themeColors';\n// ...\n// \n
\n \n \n \n
\n foo
\n","// extracted by mini-css-extract-plugin\nexport default {\"black\":\"#000\",\"blue100\":\"#eff3fe\",\"blue200\":\"#b5d7f7\",\"brown100\":\"#ebe0db\",\"brown200\":\"#d2bbb0\",\"gray100\":\"#eee\",\"gray200\":\"#e2e2e2\",\"gray300\":\"#cbcbcb\",\"gray50\":\"#f6f6f6\",\"gray500\":\"#757575\",\"gray600\":\"#545454\",\"green100\":\"#d9ede4\",\"green200\":\"#87d9b2\",\"green400\":\"#05944f\",\"orange100\":\"#ffe1d6\",\"orange200\":\"#fabda5\",\"platinum100\":\"#ebf5f7\",\"platinum200\":\"#b0cfd9\",\"purple100\":\"#e6ddf2\",\"purple200\":\"#cab5e3\",\"red100\":\"#fed7d2\",\"red200\":\"#f1998e\",\"red400\":\"#e11900\",\"white\":\"#fff\",\"yellow100\":\"#fff4d9\",\"yellow200\":\"#fadd98\",\"yellow400\":\"#f2c14f\",\"zc100\":\"#d9ddfb\",\"zc200\":\"#abb4ff\",\"zc300\":\"#6f7dff\",\"zc400\":\"#1e3dff\",\"zc500\":\"#011dc2\",\"primary\":\"#1e3dff\",\"primaryLight\":\"#6f7dff\",\"primaryDark\":\"#011dc2\",\"negative\":\"#e11900\",\"danger\":\"#e11900\",\"warning\":\"#f2c14f\",\"positive\":\"#05944f\",\"success\":\"#05944f\",\"textPrimary\":\"#000\",\"textSecondary\":\"#545454\",\"textTertiary\":\"#757575\",\"textLight\":\"#cbcbcb\",\"textLightAlt\":\"#afafaf\"};","import React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport Icon from 'components/Icon';\n\nconst ICON_TYPE_RADIO = 'radio';\nconst ICON_TYPE_CHECK = 'check';\n\nconst RadioList = ({ className,\n itemStyle = {},\n listId,\n iconType = ICON_TYPE_RADIO,\n options,\n value,\n onChange,\n}) => {\n if (options.every(opt => typeof opt === 'string')) {\n options = options.map(val => [val, val]);\n }\n\n return (\n - \n {options.map(([optVal, optLabel]) => {\n const isSelected = optVal === value;\n const handleClick = () => onChange(optVal);\n const classes = classNames('radio-list-item', isSelected && 'selected');\n let icon;\n if (iconType === ICON_TYPE_CHECK) {\n icon = isSelected ?
\n
\n \n );\n};\n\nDateRangePicker.propTypes = {\n presetOptions: PropTypes.objectOf(PropTypes.shape({\n dateRange: PropTypes.arrayOf(PropTypes.instanceOf(Date)),\n label: PropTypes.string,\n })),\n defaultOption: PropTypes.string,\n useMobileStyle: PropTypes.bool,\n dropdownClassName: PropTypes.string,\n buttonClassName: PropTypes.string,\n limitDates: PropTypes.oneOf([LIMIT_FUTURE, LIMIT_PAST]),\n menuAnchor: PropTypes.oneOf(MENU_ANCHOR_OPTS),\n prependIcon: PropTypes.oneOfType([\n PropTypes.node,\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.string),\n ]),\n appendIcon: PropTypes.oneOfType([\n PropTypes.node,\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.string),\n ]),\n value: PropTypes.arrayOf(PropTypes.instanceOf(Date)),\n onChange: PropTypes.func,\n onMetadataChange: PropTypes.func,\n};\n\nexport default DateRangePicker;\n","import React from 'react';\nimport { addDays, endOfDay, isSameDay, isAfter, isSunday, nextSunday, set, startOfDay, subDays } from 'date-fns';\nimport { dateRangeLabels } from 'app-constants';\nimport { useFilterContext } from 'context';\nimport DateRangePicker from 'components/DateRangePicker';\n\nconst DateFilter = props => {\n const now = new Date();\n const nowPlus1 = addDays(now, 1);\n const nowPlus2 = addDays(now, 2);\n const nowPlus6 = addDays(now, 6);\n const nowPlus29 = addDays(now, 29);\n const sunday = isSunday(now) ? now : nextSunday(now);\n const friday = subDays(sunday, 2);\n const at5p = date => set(date, { hours: 17, minutes: 0, seconds: 0 });\n const fridayAt5 = at5p(friday);\n\n const optionsData = {\n today: { dateRange: [now, endOfDay(now)] },\n tomorrow: { dateRange: [startOfDay(nowPlus1), endOfDay(nowPlus1)] },\n 'this-weekend': { dateRange: [fridayAt5, endOfDay(sunday)] },\n 'next-3': { dateRange: [now, endOfDay(nowPlus2)] },\n 'next-7': { dateRange: [now, endOfDay(nowPlus6)] },\n 'next-30': { dateRange: [now, endOfDay(nowPlus29)] },\n };\n\n Object.entries(optionsData).forEach(([key, value]) => value.label = value.label || dateRangeLabels[key] || key);\n\n // Remove the \"next 3 days\" option if it is identical to \"this weekend\"\n if (isSameDay(now, friday) && isAfter(now, fridayAt5) && isSameDay(nowPlus2, sunday)) {\n delete optionsData['next-3'];\n }\n\n const { updateFilterContext } = useFilterContext();\n\n return (\n \n {optionList}\n
\n {activeOptionValue === 'custom' && (\n \n {datePicker}\n
\n )}\n \n \n
\n \n {optionList}\n
\n \n );\n};\n\nTimeFilter.propTypes = {\n useMobileStyle: PropTypes.bool,\n value: PropTypes.arrayOf(PropTypes.string),\n onChange: PropTypes.func,\n};\n\nexport default TimeFilter;\n","import React, { useEffect, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { distanceOptions, defaultDistance } from 'app-constants';\nimport { useFilterContext } from 'context';\nimport RadioList from 'components/RadioList';\nimport DropdownButton from 'components/DropdownButton';\n\nexport const DISTANCE_UNITS_MI = 'mi';\nexport const DISTANCE_UNITS_KM = 'km';\nexport const DISTANCE_UNITS_LABELS = {\n [DISTANCE_UNITS_MI]: 'miles',\n [DISTANCE_UNITS_KM]: 'kilometers',\n};\n\nconst GLOBAL_DISTANCE = {\n km: 25000,\n mi: 15000,\n};\n\nconst DistanceFilter = ({\n useMobileStyle = false,\n distanceUnits = DISTANCE_UNITS_MI,\n defaultValue = defaultDistance.event,\n value,\n onChange,\n}) => {\n const options = useMemo(() => [\n ...distanceOptions.map(val => [val, `${val} ${DISTANCE_UNITS_LABELS[distanceUnits]}`]),\n [GLOBAL_DISTANCE[distanceUnits], 'Global'],\n ], [distanceUnits]);\n\n defaultValue = defaultValue || options[0][0];\n value = value || defaultValue;\n\n const handleChange = val => onChange(val === defaultValue ? null : val);\n\n const isGlobal = Object.values(GLOBAL_DISTANCE).includes(value);\n const activeOptionLabel = isGlobal ? 'Global' : `${value} ${distanceUnits}`;\n\n const { updateFilterContext } = useFilterContext();\n useEffect(() => {\n const radiusLabel = isGlobal ? null : `${value} ${DISTANCE_UNITS_LABELS[distanceUnits]}`;\n updateFilterContext({ radiusLabel, radius: value });\n }, [value, distanceUnits]);\n\n const optionList = (\n \n {optionList}\n
\n \n );\n};\n\nDistanceFilter.propTypes = {\n useMobileStyle: PropTypes.bool,\n distanceUnits: PropTypes.oneOf([DISTANCE_UNITS_MI, DISTANCE_UNITS_KM]),\n defaultValue: PropTypes.number,\n value: PropTypes.number,\n onChange: PropTypes.func,\n};\n\nexport default DistanceFilter;\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useFilterContext } from 'context';\nimport RadioList from 'components/RadioList';\nimport DropdownButton from 'components/DropdownButton';\n\nexport const IN_PERSON = 'in_person';\nexport const ONLINE = 'online';\n\nconst OnlineFilter = ({ useMobileStyle = false, value, onChange }) => {\n const options = [\n [IN_PERSON, 'In Person'],\n [ONLINE, 'Online'],\n [null, 'In Person & Online'],\n ];\n const defaultValue = null;\n const activeOptionLabel = options.find(opt => opt[0] === value)[1];\n\n const { updateFilterContext } = useFilterContext();\n useEffect(() => {\n updateFilterContext({ venueTypeLabel: value && activeOptionLabel.toLowerCase(), venueType: value });\n }, [value, activeOptionLabel]);\n\n const optionList = (\n \n {optionList}\n
\n \n );\n};\n\nOnlineFilter.propTypes = {\n useMobileStyle: PropTypes.bool,\n value: PropTypes.oneOf([null, ONLINE, IN_PERSON]),\n onChange: PropTypes.func,\n};\n\nexport default OnlineFilter;\n","import { parseISO } from 'date-fns';\nimport { ONLINE, IN_PERSON } from './OnlineFilter';\n\n/* eslint-disable camelcase */\nexport function parseFilterParams (params) {\n const {\n date_start, date_end, min_start_time, max_start_time, radius, event_types,\n is_online, is_in_person, age_groups, prices, poi,\n } = params;\n\n let dateValue = null;\n if (date_start && date_end) {\n dateValue = [\n parseISO(date_start),\n parseISO(date_end),\n ];\n }\n\n let onlineValue = null;\n if (is_online === 't' && !is_in_person) {\n onlineValue = ONLINE;\n } else if (is_in_person === 't' && !is_online) {\n onlineValue = IN_PERSON;\n }\n\n return {\n date: dateValue,\n time: [min_start_time || null, max_start_time || null],\n distance: radius || null,\n category: event_types && event_types.length > 0 ? event_types : null,\n online: onlineValue,\n ageGroup: age_groups && age_groups.length > 0 ? age_groups : null,\n price: prices && prices.length > 0 ? prices : null,\n poi: poi || null,\n };\n}\n/* eslint-enable */\n","export { default as AgeGroupFilter } from './AgeGroupFilter';\nexport { default as PriceFilter } from './PriceFilter';\nexport { default as CategoryFilter } from './CategoryFilter';\nexport { default as DateFilter } from './DateFilter';\nexport { default as TimeFilter } from './TimeFilter';\nexport { DISTANCE_UNITS_MI, DISTANCE_UNITS_KM, DISTANCE_UNITS_LABELS, default as DistanceFilter } from './DistanceFilter';\nexport { ONLINE, IN_PERSON, default as OnlineFilter } from './OnlineFilter';\nexport { parseFilterParams } from './filterHelpers';\n\nexport const VALID_FILTER_PARAMS = [\n 'keyword', 'date_start', 'date_end', 'radius', 'event_types', 'is_online', 'is_in_person', 'age_groups', 'prices',\n 'min_start_time', 'max_start_time',\n];\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst LoadingOverlay = ({ show = true, align = 'middle', className }) => {\n const classes = classNames({\n 'loading-overlay': true,\n 'py-5': true,\n hide: !show,\n 'align-items-start': align === 'top',\n [className]: !!className,\n });\n\n return (\n \n \n
\n );\n};\n\nLoadingOverlay.propTypes = {\n show: PropTypes.bool,\n align: PropTypes.oneOf(['top', 'middle']),\n className: PropTypes.string,\n};\n\nexport default LoadingOverlay;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport striptags from 'striptags';\n\nconst TruncateText = ({ text, numChars, forceBreak, truncateStart }) => {\n text = striptags(text || '');\n const clipped = truncateStart\n ? '…' + text.substring(text.length - numChars, text.length)\n : text.substring(0, numChars) + '…';\n\n return (\n \n {text.length <= numChars ? text : clipped}\n \n );\n};\n\nTruncateText.propTypes = {\n text: PropTypes.string,\n numChars: PropTypes.number.isRequired,\n forceBreak: PropTypes.bool, // useful if the text might contain URLs or other long words\n truncateStart: PropTypes.bool, // truncate the beginning of the string\n};\n\nexport default TruncateText;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from 'components/Icon';\nimport ReactModal from 'react-modal';\n\n\nconst Modal = ({\n contentClassName = '',\n overlayClassName = 'z-modal-overlay',\n interiorClassName = 'z-modal-interior',\n isOpen = false,\n onRequestClose = () => {},\n children,\n}) => {\n const classes = {\n base: `z-modal-content ${contentClassName}`,\n afterOpen: 'z-modal-content--after-open',\n beforeClose: 'z-modal-content--before-close',\n };\n const overlayClasses = {\n base: overlayClassName,\n afterOpen: 'z-modal-overlay--after-open',\n beforeClose: 'z-modal-overlay--before-close',\n };\n\n const handleCloseClick = evt => {\n evt.preventDefault();\n onRequestClose();\n };\n\n return (\n \n {children}\n
\n\n \n \n {itemsRendered}\n {typeof children === 'function' ? children(actionMenuRef) : children}\n
\n \n );\n};\n\nCardActionMenu.propTypes = {\n items: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func,\n })),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.node,\n PropTypes.arrayOf(PropTypes.node),\n ]),\n};\n\nexport default CardActionMenu;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useToggle } from 'hooks';\nimport Modal from 'components/Modal';\nimport CardActionMenu from 'components/CardActionMenu';\n\nconst CardDeletionMenu = ({ deleteLinkAttrs = {}, extraItems = [], onDeleteClick = () => {} }) => {\n\n const [modalIsOpen, toggleModal] = useToggle(false);\n const handleRequestClose = () => toggleModal(false);\n\n const createDeleteClickHandler = actionMenuRef => evt => {\n evt.preventDefault();\n actionMenuRef.current.close();\n toggleModal(true);\n };\n\n const handleDeleteConfirmClick = evt => {\n evt.preventDefault();\n onDeleteClick();\n toggleModal(false);\n }\n\n return (\n <>\n Are you sure?
\nThis object will be deleted permanently.
\n\n Cancel\n \n
\n \n \n );\n};\n\nCardDeletionMenu.propTypes = {\n deleteLinkAttrs: PropTypes.object,\n extraItems: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func,\n })),\n onDeleteClick: PropTypes.func,\n};\n\nexport default CardDeletionMenu;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { formatDistanceToNow, parseISO } from 'date-fns';\nimport { urls } from 'app-constants';\n// import { useUserContext } from 'context';\nimport { getCsrfToken } from 'utils';\n// import { DISTANCE_UNITS_LABELS } from 'components/filters';\nimport TruncateText from 'components/TruncateText';\nimport CardDeletionMenu from 'components/CardDeletionMenu';\nimport Icon from 'components/Icon';\n\nconst AddressBookCard = ({\n className,\n useCompactStyle,\n id,\n created,\n updated,\n metaLabel = 'updated',\n onDeleteRequest = () => {},\n onDeleteSuccess = () => {},\n onDeleteFailure = () => {},\n addressName,\n lat,\n lon,\n city,\n street,\n state,\n shortAddress,\n}) => {\n const [isDeleting, setIsDeleting] = useState(false);\n\n // const { distanceUnits } = useUserContext();\n // const distanceUnitsLabel = DISTANCE_UNITS_LABELS[distanceUnits];\n\n const editUrl = `${urls.editAddressBase}${id}/`;\n const searchUrl = `${urls.events}?address_id=${id}&latitude=${lat}&longitude=${lon}`;\n const handleCardClick = () => window.location.href = searchUrl;\n const handleEditClick = () => window.location.href = editUrl;\n const handleTitleClick = evt => evt.stopPropagation(); // Don't break cmd+click\n\n const dateCreated = parseISO(created);\n const dateUpdated = parseISO(updated);\n\n const handleDeleteClick = () => {\n setIsDeleting(true);\n\n fetch(`${urls.savedAddressBase}${id}/`, {\n credentials: 'include',\n method: 'DELETE',\n headers: { 'X-CSRFToken': getCsrfToken() },\n })\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n onDeleteSuccess();\n })\n .catch(err => {\n console.error(err);\n setIsDeleting(false);\n onDeleteFailure(err);\n });\n };\n\n return (\n \n
\n\n \n
\n \n
\n \n \n \n
\n
\n \n \n
\n \n
\n \n
\n {shortAddress}\n \n
\n e.stopPropagation()}>\n
\n \n {metaLabel === 'created' && `Created ${formatDistanceToNow(dateCreated)} ago`}\n {metaLabel === 'updated' && `Edited ${formatDistanceToNow(dateUpdated)} ago`}\n
\n )}\n \n );\n};\n\nAddressBookCard.propTypes = {\n className: PropTypes.string,\n useCompactStyle: PropTypes.bool,\n id: PropTypes.number,\n addressName: PropTypes.string,\n lat: PropTypes.number,\n lon: PropTypes.number,\n streetNumber: PropTypes.string,\n street: PropTypes.string,\n city: PropTypes.string,\n state: PropTypes.string,\n postalCode: PropTypes.string,\n shortAddress: PropTypes.string,\n created: PropTypes.string,\n updated: PropTypes.string,\n metaLabel: PropTypes.oneOf(['updated', 'created']),\n onDeleteRequest: PropTypes.func,\n onDeleteSuccess: PropTypes.func,\n onDeleteFailure: PropTypes.func,\n};\n\nexport default AddressBookCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useBootstrapBreakpoint } from 'hooks';\n\nconst CtaWithGraphic = ({\n style = {},\n imgUrl,\n primaryText,\n secondaryText,\n buttonText,\n buttonUrl,\n buttonOnClick,\n}) => {\n const isDesktop = useBootstrapBreakpoint('up-md');\n const handleButtonClick = evt => {\n if (buttonOnClick) {\n evt.preventDefault();\n buttonOnClick();\n }\n };\n const buttonProps = buttonOnClick ? {\n onClick: handleButtonClick,\n href: buttonUrl || '#',\n } : {\n href: buttonUrl,\n };\n const showButton = !!buttonText && (!!buttonUrl || !!buttonOnClick);\n\n return (\n \n {!!imgUrl && 
}\n
\n );\n};\n\nCtaWithGraphic.propTypes = {\n style: PropTypes.object,\n imgUrl: PropTypes.string,\n primaryText: PropTypes.string,\n secondaryText: PropTypes.string,\n buttonText: PropTypes.string,\n buttonUrl: PropTypes.string,\n buttonOnClick: PropTypes.func,\n};\n\nexport default CtaWithGraphic;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { urls } from 'app-constants';\nimport { useBootstrapBreakpoint, useGetAPI, useHistory } from 'hooks';\nimport { DISTANCE_UNITS_MI, DISTANCE_UNITS_KM } from 'components/filters';\nimport DropdownButton from 'components/DropdownButton';\nimport Icon from 'components/Icon';\nimport LoadingOverlay from 'components/LoadingOverlay';\nimport AddressBookCard from 'components/AddressBookCard';\nimport CtaWithGraphic from 'components/CtaWithGraphic';\n\nconst ORDER_UPDATED = '-updated';\nconst ORDER_CREATED = '-created';\nconst DEFAULT_ORDER = ORDER_UPDATED;\n\nconst AddressBook = ({ emptyImgUrl, distanceUnits = DISTANCE_UNITS_MI }) => {\n const { location: { queryParams }, updateQueryParams } = useHistory();\n const { ordering = DEFAULT_ORDER } = queryParams || {};\n\n // Call API\n let path;\n if (typeof queryParams !== 'undefined') path = urls.savedAddressList;\n const apiParams = { ordering };\n const { data: searchData, isFetching, error } = useGetAPI(path, { queryObject: apiParams, fullPath: true });\n\n // Data cached in local state so we can update the UI immediately when an item is deleted.\n const [cachedSearchData, setCachedSearchData] = useState();\n useEffect(() => setCachedSearchData(searchData), [searchData]);\n\n const [errorMessage, setErrorMessage] = useState(null);\n\n const handleDeleteFailure = errorText => setErrorMessage(`Failed to delete item: ${errorText || 'unknown error'}`);\n const handleDeleteSuccess = searchId => setCachedSearchData(oldState => oldState.filter(({ id }) => id !== searchId));\n\n const handleRenameFailure = errorText => setErrorMessage(`Failed to rename item: ${errorText || 'unknown error'}`);\n const handleRenameSuccess = (searchId, searchName) => setCachedSearchData(oldState => oldState.map(item => {\n return item.id === searchId ? { ...item, searchName } : item;\n }));\n\n const orderingMenuRef = useRef();\n const handleOrderChange = (evt, ordering) => {\n evt.preventDefault();\n updateQueryParams({ ordering });\n orderingMenuRef.current.close();\n };\n\n // Reset scroll position when fetching new data\n useEffect(() => window.scrollTo(0, 0), [isFetching]);\n\n const isMobile = useBootstrapBreakpoint('down-md');\n\n const countLabel = !cachedSearchData ? 'My' : cachedSearchData.length;\n\n const orderingButtonLabel = isMobile ? null : (\n <>\n Sort by: \n {ordering === ORDER_UPDATED ? 'Last edited' : 'Last added'}\n \n );\n\n const headingTitle = 'Saved Address';\n\n return (\n }\n \n {!!secondaryText && \n {buttonText}\n \n )}\n
\n {secondaryText}
}\n {!!primaryText && {primaryText}
}\n {showButton && (\n\n \n {!isMobile && \n\n {(cachedSearchData || []).map(savedSearch => (\n
\n );\n};\n\nAddressBook.propTypes = {\n emptyImgUrl: PropTypes.string,\n distanceUnits: PropTypes.oneOf([DISTANCE_UNITS_MI, DISTANCE_UNITS_KM]),\n};\n\nexport default AddressBook;\n","import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\n\nexport const ICON_HEIGHT = 47;\nexport const ICON_WIDTH = 37;\n\nconst MapMarkerIcon = forwardRef(({\n style = {},\n active = false,\n strokeColor,\n fillColor,\n dotColor,\n onClick,\n}, ref) => {\n strokeColor = strokeColor || (active ? '#ffffff' : '#afafaf');\n fillColor = fillColor || (active ? '#000000' : '#ffffff');\n dotColor = dotColor || (active ? '#ffffff' : '#000000');\n\n const scale = active ? 1.25 : 1;\n\n const iconStyle = {\n cursor: onClick ? 'pointer' : 'auto',\n transform: `scale(${scale})`,\n // transition: 'all .2s ease-in-out',\n ...style,\n };\n\n return (\n {countLabel} {headingTitle}{countLabel !== 1 && 'es'}
}\n\n {isMobile && (\n
\n\n {!!error && (\n \n {countLabel} {headingTitle}{countLabel !== 1 && 'es'}\n
\n )}\n\n handleOrderChange(evt, ORDER_UPDATED)}\n >\n handleOrderChange(evt, ORDER_CREATED)}\n >\n
\n \n \n Failed to fetch results. Please try your request again.\n
\n )}\n\n {!!errorMessage && (\n \n {errorMessage}\n
\n )}\n \n handleDeleteSuccess(savedSearch.id)}\n onRenameFailure={handleRenameFailure}\n onRenameSuccess={name => handleRenameSuccess(savedSearch.id, name)}\n />\n
\n ))}\n \n )}\n \n {popupContent}\n
\n );\n }\n\n useEffect(() => {\n if (showPopup) {\n const containerRect = mapContainerEl.getBoundingClientRect();\n const iconRect = iconRef.current.getBoundingClientRect();\n\n const popupHeightReq = 200; // estimated maximum height of popup element\n const topClearance = iconRect.top - containerRect.top - 20;\n const leftClearance = iconRect.left - containerRect.left - 20;\n const rightClearance = containerRect.right - iconRect.right - 20;\n\n const pos = {\n horizontal: leftClearance < popupWidth / 2 ? 'right' : rightClearance < popupWidth / 2 ? 'left' : 'center',\n vertical: topClearance < popupHeightReq ? 'bottom' : 'top',\n };\n setPopupPosition(pos);\n } else {\n setPopupPosition(null);\n }\n }, [showPopup]);\n\n // styles ensure the \"tip\" of the marker graphic is centered on the location\n const containerStyle = {\n height: 1,\n position: 'absolute',\n width: 1,\n };\n\n const markerIcon = IconComponent ? (\n \n handleViewportChange(viewport)}\n // onLoad={() => setLoaded(true)}\n onTransitionStart={handleTransitionStart}\n onTransitionEnd={handleTransitionEnd}\n >\n
\n );\n};\n\nSimplePointMap.propTypes = {\n containerStyle: PropTypes.object,\n mapboxToken: PropTypes.string,\n mapStyle: PropTypes.string,\n latitude: PropTypes.number,\n longitude: PropTypes.number,\n zoom: PropTypes.number,\n};\n\nexport default SimplePointMap;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport camelize from 'camelize';\nimport queryString from 'query-string';\nimport { useFormContext } from 'react-hook-form';\nimport { urls, supportEmail } from 'app-constants';\nimport { usePrevious } from 'hooks';\nimport LoadingOverlay from 'components/LoadingOverlay';\nimport SimplePointMap from 'components/SimplePointMap';\nimport { TextField, CountryField, StateField, NumberField } from 'components/formFields';\n\nconst AddressField = ({\n className = '',\n mapboxToken,\n mapStyle = 'mapbox://styles/mapbox/light-v10',\n debugInfo,\n initialCoords = [],\n initialDataLoaded = true,\n}) => {\n const { watch, getFieldState, resetField, setValue, trigger } = useFormContext();\n const fieldNames = ['street', 'city', 'state', 'postal_code', 'country'];\n const addressVals = watch(fieldNames).reduce((res, val, idx) => camelize({ ...res, [fieldNames[idx]]: val }), {});\n const coordVals = watch(['lon', 'lat']);\n\n const canGeocode = addressVals => {\n const requiredFieldNames = addressVals.country === 'US' ? ['city', 'state', 'country'] : ['city', 'country'];\n return requiredFieldNames.every(name => !!addressVals[name]) && fieldNames.every(name => !getFieldState(name).invalid);\n };\n\n const geocoderTimeout = useRef();\n const [isFetching, setIsFetching] = useState(false);\n const [geocodeError, setGeocodeError] = useState(null);\n const [coords, setCoords] = useState([]);\n const [showCoordinates, setShowCoordinates] = useState(false);\n\n const fetchGeocoderResult = addressVals => {\n const addressString = Object.values(addressVals).filter(v => !!v).join(', ');\n const query = queryString.stringify({ q: addressString, country: addressVals.country });\n const url = `${urls.geocodeAddress}?${query}`;\n fetch(url)\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n return response;\n })\n .then(response => response.json())\n .then(data => {\n setIsFetching(false);\n setCoords([data.longitude, data.latitude]);\n setTimeout(() => trigger(['lat', 'lon']), 100);\n })\n .catch(err => {\n console.error(err);\n setIsFetching(false);\n setCoords([]);\n setGeocodeError('Geocoding failed for the provided address.');\n setTimeout(() => trigger(['lat', 'lon']), 100);\n });\n };\n\n const doGeocode = addressVals => {\n clearTimeout(geocoderTimeout.current);\n if (canGeocode(addressVals)) {\n setGeocodeError(null);\n setIsFetching(true);\n geocoderTimeout.current = setTimeout(() => fetchGeocoderResult(addressVals), 1000);\n } else {\n setIsFetching(false);\n }\n };\n\n const prevAddressVals = usePrevious(addressVals);\n useEffect(() => {\n if (initialDataLoaded && prevAddressVals) {\n const hasChanged = Object.entries(addressVals).some(([key, val]) => prevAddressVals[key] !== val);\n if (hasChanged) doGeocode(addressVals);\n }\n }, [initialDataLoaded, JSON.stringify(addressVals)]);\n\n useEffect(() => {\n if (coordVals.length === 2 && coordVals.every(v => !!v)) {\n setCoords(coordVals);\n }\n }, [JSON.stringify(coordVals)]);\n\n useEffect(() => {\n resetField('state');\n }, [addressVals.country]);\n\n useEffect(() => {\n const [lon, lat] = coords;\n setValue('lon', lon || '');\n setValue('lat', lat || '');\n }, [coords]);\n\n const [lon, lat] = coords.length ? coords : initialCoords;\n\n const handleShowCoordinates = evt => {\n evt.preventDefault();\n setShowCoordinates(true);\n };\n\n let mapHint;\n if (geocodeError) {\n mapHint = (\n \n
\n )}\n \n {geocodeError}
\n );\n } else if (lat && lon) {\n const mailSubject = 'Incorrect Geocoded Address';\n let mailBody = `Submit this message to report an incorrect address geocoding result. Please include any information necessary to help us identify the correct map location.\n\nGeocoder results are included below to assist our team in resolving the error. Please do not edit below this line.\n\n----------\n`;\n mailBody += [\n ...Object.entries(addressVals),\n ['latitude', lat],\n ['longitude', lon],\n ].map(([label, value]) => `${label}: ${value}`).join('\\n');\n if (debugInfo) {\n mailBody += `\\n\\n${debugInfo}`;\n }\n mapHint = !showCoordinates && Incorrect location? Override coordinates or contact support.
;\n }\n\n return (\n \n
\n );\n};\n\nAddressField.propTypes = {\n className: PropTypes.string,\n mapboxToken: PropTypes.string,\n mapStyle: PropTypes.string,\n debugInfo: PropTypes.string,\n initialCoords: PropTypes.arrayOf(PropTypes.number),\n initialDataLoaded: PropTypes.bool,\n};\n\nexport default AddressField;\n","import React from 'react';\nimport classNames from 'classnames';\nimport { useFormContext } from 'react-hook-form';\n\nexport default function useErrorOrHelpText (name, helpText, formMethods) {\n const { formState: { errors } } = formMethods || useFormContext();\n\n let error;\n try {\n // Allows access to errors on fields using `useFieldArray`, where the\n // name property is a string with dots separating indeces.\n error = name.split('.').reduce((obj, idx) => obj[idx], errors);\n } catch (e) {\n // noop\n }\n\n const errorOrHelpText = (\n \n
\n\n \n
\n\n \n
\n \n {addressVals.country === 'US' ? (\n
\n \n
\n\n \n
\n \n
\n \n
\n\n \n
\n \n
\n\n \n {mapHint}\n
\n \n
\n \n
\n \n
\n \n {error ? error.message : helpText}\n
\n );\n\n return { errorOrHelpText, hasError: !!error };\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useFormContext } from 'react-hook-form';\nimport useErrorOrHelpText from './useErrorOrHelpText';\n\nconst ButtonChoiceField = ({\n name,\n choices = [],\n helpText,\n required = false,\n disabled = false,\n small = false,\n validate,\n registerOpts = {},\n formMethods,\n}) => {\n const { register, watch } = formMethods || useFormContext();\n const { errorOrHelpText, hasError } = useErrorOrHelpText(name, helpText, formMethods);\n\n const val = watch(name) || '';\n\n const buttons = choices.map(choice => {\n const inputProps = register(name, {\n required: { value: required, message: 'This field is required.' },\n disabled,\n validate,\n ...registerOpts,\n });\n\n const [value, label] = Array.isArray(choice) ? choice : [choice, choice];\n\n const labelClasses = classNames({\n 'z-form-choice-button': true,\n selected: val === value,\n 'z-form-disabled': !!disabled,\n invalid: hasError,\n small,\n });\n\n return (\n \n );\n });\n\n return (\n \n
\n );\n};\n\nButtonChoiceField.propTypes = {\n name: PropTypes.string.isRequired,\n choices: PropTypes.array,\n helpText: PropTypes.string,\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n small: PropTypes.bool,\n validate: PropTypes.func,\n // Pass through additional options to react-hook-form `register` method:\n // https://react-hook-form.com/api/useform/register/\n registerOpts: PropTypes.object,\n formMethods: PropTypes.object,\n};\n\nexport default ButtonChoiceField;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useFormContext } from 'react-hook-form';\nimport useErrorOrHelpText from './useErrorOrHelpText';\n\nconst CheckboxField = ({\n name,\n label,\n helpText,\n required = false,\n disabled = false,\n validate,\n registerOpts = {},\n formMethods,\n}) => {\n const { register, watch } = formMethods || useFormContext();\n const { errorOrHelpText, hasError } = useErrorOrHelpText(name, helpText, formMethods);\n\n const val = watch(name) || '';\n\n const inputProps = register(name, {\n required: { value: required, message: 'This field is required.' },\n disabled,\n validate,\n ...registerOpts,\n });\n\n const labelClasses = classNames({\n 'z-form-checkbox': true,\n checked: val,\n 'z-form-disabled': !!disabled,\n invalid: hasError,\n });\n\n return (\n {buttons}
\n \n {errorOrHelpText}\n
\n \n \n
\n );\n};\n\nCheckboxField.propTypes = {\n name: PropTypes.string.isRequired,\n label: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n ]),\n helpText: PropTypes.string,\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n validate: PropTypes.func,\n // Pass through additional options to react-hook-form `register` method:\n // https://react-hook-form.com/api/useform/register/\n registerOpts: PropTypes.object,\n formMethods: PropTypes.object,\n};\n\nexport default CheckboxField;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useFormContext } from 'react-hook-form';\nimport useErrorOrHelpText from './useErrorOrHelpText';\n\nconst CheckboxMultiField = ({\n name,\n label,\n choices = [],\n helpText,\n required = false,\n disabled = false,\n validate,\n registerOpts = {},\n formMethods,\n horizontal = false,\n}) => {\n const { register, watch } = formMethods || useFormContext();\n const { errorOrHelpText, hasError } = useErrorOrHelpText(name, helpText, formMethods);\n\n const val = watch(name) || '';\n\n return (\n \n {errorOrHelpText}\n
\n \n {label &&
\n );\n};\n\nCheckboxMultiField.propTypes = {\n name: PropTypes.string.isRequired,\n label: PropTypes.string,\n choices: PropTypes.array,\n helpText: PropTypes.string,\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n validate: PropTypes.func,\n // Pass through additional options to react-hook-form `register` method:\n // https://react-hook-form.com/api/useform/register/\n registerOpts: PropTypes.object,\n formMethods: PropTypes.object,\n horizontal: PropTypes.bool,\n};\n\nexport default CheckboxMultiField;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useBootstrapBreakpoint, useClickOutside, useToggle } from 'hooks';\n\nconst HelpPopup = ({ children }) => {\n const containerRef = useRef();\n const popupWrapRef = useRef();\n const popupContentRef = useRef();\n const [isActive, toggleIsActive] = useToggle();\n\n const handleClickOutside = () => toggleIsActive(false);\n useClickOutside(containerRef, handleClickOutside);\n\n const isMobile = useBootstrapBreakpoint('down-sm');\n const [leftOffset, setLeftOffset] = useState(null);\n useEffect(() => {\n if (isActive) {\n const { left: wrapperLeft } = popupWrapRef.current.getBoundingClientRect();\n const { left: contentLeft } = popupContentRef.current.getBoundingClientRect();\n if (isMobile || contentLeft < 0) {\n setLeftOffset(-(wrapperLeft - 10));\n } else {\n setLeftOffset(null);\n }\n } else {\n setTimeout(() => setLeftOffset(null), 300);\n }\n }, [isActive]);\n const popupStyle = leftOffset ? {\n right: 'unset',\n left: leftOffset,\n } : undefined;\n\n return (\n {label}
}\n\n {choices.map(choice => {\n const inputProps = register(name, {\n required: { value: required, message: 'This field is required.' },\n validate,\n ...registerOpts,\n });\n\n const [value, label] = Array.isArray(choice) ? choice : [choice, choice];\n\n const labelClasses = classNames({\n 'z-form-checkbox': true,\n checked: val.includes(value),\n 'z-form-disabled': !!disabled,\n invalid: hasError,\n });\n\n return (\n
\n \n \n
\n );\n })}\n \n {errorOrHelpText}\n
\n \n
\n \n );\n};\n\nHelpPopup.propTypes = {\n useInputStyle: PropTypes.bool,\n children: PropTypes.node,\n};\n\nexport default HelpPopup;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useToggle } from 'hooks';\nimport ReactSelect from 'react-select';\nimport AsyncSelect from 'react-select/async';\nimport HelpPopup from 'components/HelpPopup';\n\nconst SelectWidget = ({\n componentRef,\n components,\n async = false,\n asyncLoadOptions = () => {},\n asyncProps = {},\n extraProps = {},\n label,\n choices = [],\n hasError,\n helpPopupContent,\n required = false,\n disabled = false,\n clearable,\n value,\n onChange,\n onFocus = () => {},\n onBlur = () => {},\n children\n}) => {\n const selectOptions = choices.map(choice => {\n const [value, label] = Array.isArray(choice) ? choice : [choice, choice];\n return { value, label };\n });\n\n const [isFocused, toggleFocused] = useToggle(false);\n const handleFocus = () => {\n toggleFocused(true);\n onFocus();\n };\n\n const handleBlur = evt => {\n toggleFocused(false);\n onBlur(evt);\n };\n\n const wrapperClasses = classNames({\n 'z-form-select': true,\n 'no-label': !label,\n focused: isFocused,\n required,\n 'has-val': !!value,\n invalid: hasError,\n });\n\n const [SelectComponent, rsProps] = async\n ? [AsyncSelect, { loadOptions: asyncLoadOptions, defaultOptions: selectOptions, ...asyncProps, ...extraProps }]\n : [ReactSelect, { options: selectOptions, isSearchable: selectOptions.length > 9, ...extraProps }];\n\n return (\n {children}
\n \n
\n );\n};\n\nSelectWidget.propTypes = {\n componentRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.object,\n ]),\n components: PropTypes.object,\n async: PropTypes.bool,\n asyncLoadOptions: PropTypes.func,\n asyncProps: PropTypes.object,\n extraProps: PropTypes.object,\n label: PropTypes.string,\n choices: PropTypes.array,\n hasError: PropTypes.bool,\n helpPopupContent: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n ]),\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n clearable: PropTypes.bool,\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]),\n onChange: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n children: PropTypes.node,\n};\n\nexport default SelectWidget;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ClearButton = ({\n size = 12,\n style = {},\n onClick,\n}) => (\n \n opt.value === value) || null}\n onChange={opt => onChange(opt && opt.value)}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...rsProps}\n />\n {label && (\n \n )}\n {!!helpPopupContent && {helpPopupContent} }\n
\n {children}\n \n
\n );\n};\n\nTextInputWidget.propTypes = {\n label: PropTypes.string,\n hasError: PropTypes.bool,\n helpPopupContent: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n ]),\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n clearable: PropTypes.bool,\n value: PropTypes.string,\n onChange: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n children: PropTypes.node,\n};\n\nexport default TextInputWidget;\n","import { useState, useEffect } from 'react';\n\nexport default function useDebounce (value, delay = 500) {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n\n return debouncedValue;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Controller, useFormContext } from 'react-hook-form';\nimport { SelectWidget } from './widgets';\nimport useErrorOrHelpText from './useErrorOrHelpText';\n\nconst SelectField = ({\n components,\n async = false,\n asyncLoadOptions = () => {},\n asyncProps = {},\n extraProps = {},\n name,\n label,\n choices = [],\n helpText,\n helpPopupContent,\n required = false,\n disabled = false,\n validate,\n onFocus,\n onBlur: onBlurFromProps = () => {},\n registerOpts = {},\n formMethods,\n}) => {\n const { control } = formMethods || useFormContext();\n const { errorOrHelpText, hasError } = useErrorOrHelpText(name, helpText, formMethods);\n\n return (\n \n setLocalValue(evt.target.value)}\n onFocus={handleFocus}\n onBlur={handleBlur}\n />\n {label && (\n \n )}\n {clearable && !!localValue && {helpPopupContent} }\n
\n {children}\n \n {errorOrHelpText}\n
\n \n );\n }}\n />\n );\n};\n\nSelectField.propTypes = {\n components: PropTypes.object,\n async: PropTypes.bool,\n asyncLoadOptions: PropTypes.func,\n asyncProps: PropTypes.object,\n extraProps: PropTypes.object,\n name: PropTypes.string.isRequired,\n label: PropTypes.string,\n choices: PropTypes.array,\n helpText: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n ]),\n helpPopupContent: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n ]),\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n validate: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n // Pass through additional options to react-hook-form `register` method:\n // https://react-hook-form.com/api/useform/register/\n registerOpts: PropTypes.object,\n formMethods: PropTypes.object,\n};\n\nexport default SelectField;\n","import React from 'react';\nimport SelectField from '../SelectField';\nimport COUNTRIES from './countryData';\n\nconst countryChoices = Object.entries(COUNTRIES);\n\nconst CountryField = props => \n
\n \n {helpPopupContent} }\n \n
\n \n {errorOrHelpText}\n
\n \n );\n};\n\nDateField.propTypes = {\n name: PropTypes.string.isRequired,\n label: PropTypes.string,\n helpText: PropTypes.string,\n helpPopupContent: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n ]),\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n minDate: PropTypes.instanceOf(Date),\n maxDate: PropTypes.instanceOf(Date),\n validate: PropTypes.func,\n // Pass through additional options to react-hook-form `register` method:\n // https://react-hook-form.com/api/useform/register/\n registerOpts: PropTypes.object,\n formMethods: PropTypes.object,\n};\n\nexport default DateField;\n","import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n isBefore,\n isValid,\n parse as parseDate,\n} from 'date-fns';\nimport {\n DATE_FORMAT,\n DateField,\n SelectField,\n NumberField,\n} from 'components/formFields';\n\nexport const END_NONE = 'none';\nexport const END_DATE = 'date';\nexport const END_COUNT = 'count';\n\nconst EndOption = ({ formMethods, prefix, startDate }) => {\n const { watch } = formMethods;\n const val = watch(`${prefix}.endType`);\n\n const validateDate = useCallback(value => {\n const dateVal = parseDate(value, DATE_FORMAT, new Date());\n if (isValid(dateVal) && isBefore(dateVal, startDate)) {\n return 'End date must be after start date.';\n }\n return true;\n }, [startDate]);\n\n return (\n <>\n \n
\n\n {val === END_DATE && (\n \n
\n )}\n\n {val === END_COUNT && (\n \n
\n )}\n \n );\n};\n\nEndOption.propTypes = {\n formMethods: PropTypes.object,\n prefix: PropTypes.string,\n startDate: PropTypes.instanceOf(Date),\n};\n\nexport default EndOption;\n","import React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport Icon from 'components/Icon';\n\nconst WeekdaySelector = ({ selectedDays = [], lockedDays = [], onChange = () => {} }) => {\n const days = [\n [0, 'S'],\n [1, 'M'],\n [2, 'T'],\n [3, 'W'],\n [4, 'T'],\n [5, 'F'],\n [6, 'S'],\n ];\n\n return (\n \n {days.map(([val, label]) => {\n const isSelected = selectedDays.includes(val);\n const isLocked = lockedDays.includes(val);\n\n const classes = classNames({\n 'z-form-weekday-selector-item': true,\n selected: isSelected || isLocked,\n locked: isLocked,\n });\n\n const handleClick = () => {\n if (!isLocked) {\n onChange(isSelected\n ? selectedDays.filter(d => d !== val)\n : [...selectedDays, val].sort());\n }\n };\n\n return (\n
\n );\n};\n\nWeekdaySelector.propTypes = {\n selectedDays: PropTypes.arrayOf(PropTypes.number),\n lockedDays: PropTypes.arrayOf(PropTypes.number),\n onChange: PropTypes.func,\n};\n\nexport default WeekdaySelector;\n","import React, { useEffect } from 'react';\nimport { format as formatDate } from 'date-fns';\nimport { Controller } from 'react-hook-form';\nimport { formatOrdinal, nthOfMonth } from 'utils';\nimport {\n SelectField,\n NumberField,\n} from 'components/formFields';\nimport WeekdaySelector from '../WeekdaySelector';\n\nexport const CUSTOM_FREQ_DAILY = 'daily';\nexport const CUSTOM_FREQ_WEEKLY = 'weekly';\nexport const CUSTOM_FREQ_MONTHLY = 'monthly';\n\nexport const CUSTOM_MONTHLY_TYPE_DATE = 'date';\nexport const CUSTOM_MONTHLY_TYPE_SET_POS = 'setPos';\n\nexport default function useCustomRecurrenceControls (formMethods, prefix, startDate) {\n const { watch, control, setValue } = formMethods;\n const int = watch(`${prefix}.customInterval`);\n const suffix = int === 1 ? '' : 's';\n const freq = watch(`${prefix}.customFrequency`);\n\n const [n, isLast] = startDate ? nthOfMonth(startDate) : [];\n\n // const cleanSelectedDays = days => {\n // const tmpDays = [...days];\n // if (startDate) tmpDays.push(startDate.getDay());\n // return [...new Set(tmpDays)].sort();\n // };\n // TODO - parent component needs to handle combining weekday of start date with customWeeklyDays value\n\n useEffect(() => {\n if (freq !== CUSTOM_FREQ_WEEKLY) setValue(`${prefix}.customWeeklyDays`, []);\n }, [freq]);\n\n const row1Controls = (\n <>\n \n {label}\n {isLocked && (\n
\n );\n })}\n \n
\n )}\n \n
\n \n
\n \n );\n\n let row2Controls;\n if (freq === CUSTOM_FREQ_WEEKLY) {\n row2Controls = (\n \n {\n const startDateDay = startDate && startDate.getDay();\n const lockedDays = startDate ? [startDateDay] : [];\n return
\n );\n } else if (freq === CUSTOM_FREQ_MONTHLY && startDate) {\n row2Controls = (\n \n
\n );\n }\n\n return { row1Controls, row2Controls };\n}\n","import React, { useEffect } from 'react';\nimport { format as formatDate, parse as parseDate, isValid as isValidDate } from 'date-fns';\nimport { formatOrdinal, nthOfMonth } from 'utils';\nimport { DATE_FORMAT } from 'components/formFields';\nimport EndOption, { END_NONE } from './EndOption';\nimport useCustomRecurrenceControls, { CUSTOM_FREQ_WEEKLY, CUSTOM_MONTHLY_TYPE_DATE } from './useCustomRecurrenceControls';\n\nexport const FREQ_ONCE = 'once';\nexport const FREQ_DAILY = 'daily';\nexport const FREQ_WEEKLY = 'weekly';\nexport const FREQ_MONTHLY_DATE = 'monthlyByDate';\nexport const FREQ_MONTHLY_SET_POS = 'monthlyBySetPos';\nexport const FREQ_YEARLY = 'yearly';\nexport const FREQ_CUSTOM = 'custom';\n\nexport const endOptionDefaults = {\n endType: END_NONE,\n endDate: '',\n endCount: 1,\n};\n\nexport const customDefaults = {\n customInterval: 1,\n customFrequency: CUSTOM_FREQ_WEEKLY,\n customMonthlyType: CUSTOM_MONTHLY_TYPE_DATE,\n customWeeklyDays: [],\n};\n\nexport default function useFrequencyOptions (formMethods, prefix) {\n const { watch, setValue } = formMethods;\n const dateString = watch(`${prefix}.date`);\n const dateVal = parseDate(dateString, DATE_FORMAT, new Date());\n\n const activeOption = watch(`${prefix}.frequency`);\n\n // useEffect(() => {\n // if (!dateString) setValue(`${prefix}.frequency`, FREQ_ONCE);\n // }, [dateString]);\n\n useEffect(() => {\n let fieldsToReset;\n if (activeOption === FREQ_ONCE) {\n fieldsToReset = { ...endOptionDefaults, ...customDefaults };\n } else if (activeOption !== FREQ_CUSTOM) {\n fieldsToReset = customDefaults;\n }\n\n if (fieldsToReset) {\n Object.entries(fieldsToReset).forEach(([key, val]) => {\n setValue(`${prefix}.${key}`, val);\n });\n }\n }, [activeOption]);\n\n const labels = {\n [FREQ_ONCE]: 'Once',\n [FREQ_DAILY]: 'Daily',\n [FREQ_WEEKLY]: 'Weekly',\n [FREQ_MONTHLY_DATE]: 'Monthly (by date)',\n [FREQ_MONTHLY_SET_POS]: 'Monthly (by day)',\n [FREQ_YEARLY]: 'Yearly',\n [FREQ_CUSTOM]: 'Custom',\n };\n\n if (isValidDate(dateVal)) {\n labels[FREQ_WEEKLY] += ' on ' + formatDate(dateVal, 'EEEE', new Date());\n labels[FREQ_MONTHLY_DATE] = 'Monthly on the ' + formatDate(dateVal, 'do', new Date());\n const [n, isLast] = nthOfMonth(dateVal);\n labels[FREQ_MONTHLY_SET_POS] = 'Monthly on the ' + `${isLast ? 'last' : formatOrdinal(n)} ${formatDate(dateVal, 'EEEE', new Date())}`;\n labels[FREQ_YEARLY] += ' on ' + formatDate(dateVal, 'MMMM do', new Date());\n }\n\n const options = [\n FREQ_ONCE,\n FREQ_DAILY,\n FREQ_WEEKLY,\n FREQ_MONTHLY_DATE,\n FREQ_MONTHLY_SET_POS,\n FREQ_YEARLY,\n FREQ_CUSTOM,\n ].map(val => [val, labels[val]]);\n\n const startDate = isValidDate(dateVal) ? dateVal : null;\n const { row1Controls, row2Controls } = useCustomRecurrenceControls(formMethods, prefix, startDate);\n\n let controls;\n let extraControls;\n\n if (activeOption !== FREQ_ONCE) {\n if (activeOption === FREQ_CUSTOM) {\n controls = row1Controls;\n extraControls = (\n \n {row2Controls}\n
\n );\n } else {\n controls = \n
\n );\n};\n\nClearableTag.propTypes = {\n className: PropTypes.string,\n label: PropTypes.string,\n onRemove: PropTypes.func,\n};\n\nexport default ClearableTag;\n","import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { format as formatDate, parse as parseDate } from 'date-fns';\nimport { Calendar } from 'react-date-range';\nimport colors from 'themeColors';\nimport { useToggle, useClickOutside } from 'hooks';\nimport ClearableTag from 'components/ClearableTag';\nimport PillButton from 'components/PillButton';\nimport { DATE_FORMAT } from 'components/formFields';\n\n\nconst Exceptions = ({ value = [], onChange }) => {\n const containerRef = useRef();\n const [calendarVisible, toggleCalendarVisible] = useToggle(false);\n\n const handleAddClick = () => toggleCalendarVisible(true);\n\n const handleItemAdd = date => {\n const dateString = formatDate(date, DATE_FORMAT);\n if (!value.includes(dateString)) {\n onChange(sortDateStrings([...value, dateString]));\n }\n };\n\n const handleCalendarChange = date => {\n handleItemAdd(date);\n setTimeout(toggleCalendarVisible, 300);\n };\n\n const handleClickOutside = evt => {\n if (calendarVisible) toggleCalendarVisible();\n };\n useClickOutside(containerRef, handleClickOutside);\n\n const sortDateStrings = arr => {\n const now = new Date();\n return arr.toSorted((a, b) => parseDate(a, DATE_FORMAT, now) - parseDate(b, DATE_FORMAT, now));\n };\n\n const handleItemRemove = dateString => {\n onChange(value.filter(v => v !== dateString));\n };\n\n return (\n {label}
\n ×
\n \n
\n \n );\n};\n\nExceptions.propTypes = {\n value: PropTypes.arrayOf(PropTypes.string),\n onChange: PropTypes.func,\n};\n\nexport default Exceptions;\n","import React, { useEffect, useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { Controller } from 'react-hook-form';\nimport {\n isBefore,\n isValid,\n parse as parseDate,\n startOfDay,\n} from 'date-fns';\nimport PillButton from 'components/PillButton';\nimport {\n DateField,\n SelectField,\n TIME_FORMAT,\n TimeField,\n} from 'components/formFields';\nimport useFrequencyOptions, { endOptionDefaults, customDefaults } from './useFrequencyOptions';\nimport Exceptions from './Exceptions';\n\nexport const rowDefaults = {\n date: '',\n startTime: '',\n endTime: '',\n frequency: 'once',\n exceptions: [],\n ...endOptionDefaults,\n ...customDefaults,\n};\n\nconst EventDatesRow = ({ prefix, formMethods, index, allowAnyDate = false, onDelete }) => {\n const { watch, setValue, trigger, control } = formMethods;\n\n const today = useMemo(() => startOfDay(new Date()));\n\n const frequencyVal = watch(`${prefix}.frequency`);\n const isRecurring = frequencyVal !== 'once';\n useEffect(() => {\n if (!isRecurring) {\n setValue(`${prefix}.exceptions`, []);\n }\n }, [isRecurring]);\n\n const startTimeString = watch(`${prefix}.startTime`);\n const endTimeString = watch(`${prefix}.endTime`);\n\n const startTimeVal = useMemo(() => parseDate(startTimeString, TIME_FORMAT, today), [startTimeString]);\n const endTimeVal = useMemo(() => parseDate(endTimeString, TIME_FORMAT, today), [endTimeString]);\n\n const validateEndTime = useCallback(value => {\n const valueAsDate = parseDate(value, TIME_FORMAT, today);\n\n if (isValid(startTimeVal) && isValid(valueAsDate) && isBefore(valueAsDate, startTimeVal)) {\n return 'End time must be after start time.';\n }\n return true;\n }, [startTimeVal]);\n\n useEffect(() => {\n if (isValid(startTimeVal) && isValid(endTimeVal)) {\n trigger(`${prefix}.endTime`);\n }\n }, [startTimeVal]);\n\n const { options: frequencyOptions, controls, extraControls } = useFrequencyOptions(formMethods, prefix);\n\n return (\n <>\n \n {value.length > 0 && (\n <>\n handleItemRemove(d)} />)}\n \n )}\n
\n Except on:
\n {value.map(d => \n \n
\n \n
\n \n
\n \n
\n \n
\n \n {!!onDelete && (\n
\n \n
\n )}\n \n
\n {extraControls}\n\n {frequencyVal !== 'once' && (\n \n
\n {controls}\n \n
\n \n {\n ref(el);\n inputRef.current = el;\n }}\n type=\"text\"\n className={classNames('z-form-input', disabled && 'z-form-disabled')}\n maxLength={8}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n {...inputProps}\n />\n {label && (\n \n )}\n {!!val && {helpPopupContent} }\n
\n \n {timeOptions.map(([opt, ref]) => (\n handleOptionSelect(opt)}\n >\n {opt}\n
\n ))}\n \n {errorOrHelpText}\n
\n \n );\n};\n\nTimeField.propTypes = {\n name: PropTypes.string.isRequired,\n label: PropTypes.string,\n helpText: PropTypes.string,\n helpPopupContent: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n ]),\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n defaultScrollVal: PropTypes.string,\n validate: PropTypes.func,\n // Pass through additional options to react-hook-form `register` method:\n // https://react-hook-form.com/api/useform/register/\n registerOpts: PropTypes.object,\n formMethods: PropTypes.object,\n};\n\nexport default TimeField;\n","import camelize from 'camelize';\nimport { datetime, RRule, RRuleSet, rrulestr } from 'rrule';\nimport { format as formatDate, getDay, parse as parseDate } from 'date-fns';\nimport { utcToZonedTime } from 'date-fns-tz';\nimport { nthOfMonth } from 'utils';\nimport { formatDateFieldValue } from '../DateField';\nimport { parseTimeFieldValue, formatTimeFieldValue } from '../TimeField';\nimport {\n FREQ_ONCE,\n FREQ_DAILY,\n FREQ_WEEKLY,\n FREQ_MONTHLY_DATE,\n FREQ_MONTHLY_SET_POS,\n FREQ_YEARLY,\n FREQ_CUSTOM,\n} from './useFrequencyOptions';\nimport {\n CUSTOM_FREQ_DAILY,\n CUSTOM_FREQ_WEEKLY,\n CUSTOM_FREQ_MONTHLY,\n CUSTOM_MONTHLY_TYPE_DATE,\n CUSTOM_MONTHLY_TYPE_SET_POS,\n} from './useCustomRecurrenceControls';\nimport {\n END_NONE,\n END_DATE,\n END_COUNT,\n} from './EndOption';\n\n// weekdays ordered according to date-fns `getDay()`\nconst weekdayMap = [RRule.SU, RRule.MO, RRule.TU, RRule.WE, RRule.TH, RRule.FR, RRule.SA];\n\nconst stripTimes = text => text.replaceAll(/(\\d{8})T\\d{6}Z/g, '$1');\n\nexport const hydrateValue = (values, dateStartStr) => values.reduce((result, value) => {\n // Format value from API for form\n const { id, dateRecur, timeStart, timeEnd } = camelize(value);\n const asUTC = date => utcToZonedTime(date, 'UTC');\n\n const startTime = formatTimeFieldValue(parseDate(timeStart, 'HH:mm:ss', new Date()));\n const endTime = timeEnd && formatTimeFieldValue(parseDate(timeEnd, 'HH:mm:ss', new Date()));\n\n const [, y, m, d] = dateStartStr.match(/^(\\d{4})-(\\d{2})-(\\d{2})/).map(v => parseInt(v, 10));\n const defaultDtStart = datetime(y, m, d);\n const rs = rrulestr(dateRecur, { forceset: true, dtstart: datetime(y, m, d) });\n // TODO dtstart default option is not working here\n // https://github.com/jkbrzt/rrule/issues/612\n\n const newItems = [];\n\n rs.rrules().forEach(r => {\n // Fix for bug noted above\n r = new RRule({ ...r.origOptions, dtstart: r.origOptions.dtstart || defaultDtStart });\n\n let date = r.options.dtstart;\n try {\n // adjust date to date of first occurrence\n date = asUTC(r.all()[0]);\n } catch (err) {\n console.error(err);\n }\n const dateFormatted = formatDateFieldValue(date);\n\n const vals = { date: dateFormatted, startTime, endTime, exceptions: [] };\n\n const { freq, interval = 1, count, until, byweekday, bymonthday, bysetpos } = r.options;\n\n if (count) {\n vals.endType = END_COUNT;\n vals.endCount = count;\n } else if (until) {\n vals.endType = END_DATE;\n vals.endDate = formatDateFieldValue(asUTC(until));\n } else {\n vals.endType = END_NONE;\n }\n\n if (freq === RRule.DAILY && interval === 1) {\n vals.frequency = FREQ_DAILY;\n } else if (freq === RRule.WEEKLY && interval === 1 && byweekday.length === 1) {\n vals.frequency = FREQ_WEEKLY;\n } else if (freq === RRule.MONTHLY && interval === 1 && bymonthday.length === 1) {\n vals.frequency = FREQ_MONTHLY_DATE;\n } else if (freq === RRule.MONTHLY && interval === 1 && (bysetpos || []).length === 1) {\n vals.frequency = FREQ_MONTHLY_SET_POS;\n } else if (freq === RRule.YEARLY) {\n vals.frequency = FREQ_YEARLY;\n } else {\n vals.frequency = FREQ_CUSTOM;\n vals.customInterval = interval;\n vals.customFrequency = {\n [RRule.DAILY]: CUSTOM_FREQ_DAILY,\n [RRule.WEEKLY]: CUSTOM_FREQ_WEEKLY,\n [RRule.MONTHLY]: CUSTOM_FREQ_MONTHLY,\n }[freq];\n\n if (freq === RRule.WEEKLY) {\n vals.customWeeklyDays = byweekday.map(v => weekdayMap.findIndex(({ weekday }) => weekday === v));\n } else if (freq === RRule.MONTHLY) {\n vals.customMonthlyType = bymonthday.length ? CUSTOM_MONTHLY_TYPE_DATE : CUSTOM_MONTHLY_TYPE_SET_POS;\n }\n }\n\n vals.exceptions = rs.exdates().map(d => formatDateFieldValue(asUTC(d)));\n\n newItems.push(vals);\n });\n\n rs.rdates().forEach(d => {\n const date = formatDateFieldValue(asUTC(d));\n newItems.push({ date, startTime, endTime });\n });\n\n if (newItems.length > 0) {\n newItems[0].id = id;\n }\n return [...result, ...newItems];\n}, []);\n\nexport const dehydrateValue = values => values.map(value => {\n // Format value from form for API\n\n const splitDateStr = dateStr => dateStr.split('/').map(v => parseInt(v));\n\n // Parse date and times\n const [month, day, year] = splitDateStr(value.date);\n const [startTime, endTime] = [value.startTime, value.endTime].map(v => (\n v ? formatDate(parseTimeFieldValue(v), 'HH:mm') : null\n ));\n const [hour, minute] = startTime.split(':').map(v => parseInt(v));\n const startDate = datetime(year, month, day, hour, minute);\n\n const result = {\n id: value.id,\n time_start: startTime,\n time_end: endTime,\n };\n\n // No recurrence - exit early\n if (value.frequency === FREQ_ONCE) {\n result.date_recur = `RDATE:${formatDate(startDate, 'yyyyMMdd')}`;\n return result;\n }\n\n const ruleOpts = {\n dtstart: startDate,\n wkst: RRule.SU,\n };\n\n // End options\n if (value.endType === END_DATE) {\n const [endMonth, endDay, endYear] = value.endDate.split('/').map(v => parseInt(v));\n ruleOpts.until = datetime(endYear, endMonth, endDay, 23, 59);\n } else if (value.endType === END_COUNT) {\n ruleOpts.count = parseInt(value.endCount);\n }\n\n // Interval - custom recurrence only\n if (value.frequency === FREQ_CUSTOM) {\n ruleOpts.interval = value.customInterval;\n }\n\n // Determine frequency type\n const fr = value.frequency;\n const cfr = fr === FREQ_CUSTOM && value.customFrequency;\n const isDaily = fr === FREQ_DAILY || cfr === CUSTOM_FREQ_DAILY;\n const isWeekly = fr === FREQ_WEEKLY || cfr === CUSTOM_FREQ_WEEKLY;\n const isMonthlyDate = fr === FREQ_MONTHLY_DATE || (cfr === CUSTOM_FREQ_MONTHLY && value.customMonthlyType === CUSTOM_MONTHLY_TYPE_DATE);\n const isMonthlySetPos = fr === FREQ_MONTHLY_SET_POS || (cfr === CUSTOM_FREQ_MONTHLY && value.customMonthlyType === CUSTOM_MONTHLY_TYPE_SET_POS);\n const isYearly = fr === FREQ_YEARLY;\n\n // Daily frequency\n if (isDaily) {\n ruleOpts.freq = RRule.DAILY;\n\n // Weekly frequency\n } else if (isWeekly) {\n ruleOpts.freq = RRule.WEEKLY;\n const days = [weekdayMap[getDay(startDate)]];\n if (cfr) {\n value.customWeeklyDays.map(v => weekdayMap[v]).forEach(val => {\n if (!days.includes(val)) days.push(val);\n });\n }\n ruleOpts.byweekday = days;\n\n // Monthly frequency - by date\n } else if (isMonthlyDate) {\n ruleOpts.freq = RRule.MONTHLY;\n ruleOpts.bymonthday = day;\n\n // Monthly frequency - by set position\n } else if (isMonthlySetPos) {\n ruleOpts.freq = RRule.MONTHLY;\n const [n, isLast] = nthOfMonth(startDate);\n ruleOpts.byweekday = weekdayMap[getDay(startDate)];\n ruleOpts.bysetpos = isLast ? -1 : n;\n\n // Yearly frequency\n } else if (isYearly) {\n ruleOpts.freq = RRule.YEARLY;\n ruleOpts.bymonth = month;\n ruleOpts.bymonthday = day;\n }\n\n // Create ruleset\n const rruleSet = new RRuleSet();\n rruleSet.rrule(new RRule({ ...ruleOpts }));\n\n // Exceptions\n value.exceptions.forEach(dateStr => {\n const [month, day, year] = splitDateStr(dateStr);\n rruleSet.exdate(datetime(year, month, day));\n });\n\n // Stringify\n result.date_recur = stripTimes(rruleSet.toString());\n\n return result;\n});\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { Controller, useFormContext, useFieldArray } from 'react-hook-form';\nimport PillButton from 'components/PillButton';\nimport EventDatesRow, { rowDefaults } from './EventDatesRow';\n\nconst EventDatesField = ({ name, formMethods, allowAnyDate = false }) => {\n formMethods = formMethods || useFormContext();\n const { control } = formMethods;\n const { fields: rowFields, append, remove } = useFieldArray({ control, name });\n\n const addRow = () => append({ ...rowDefaults }, { shouldFocus: false });\n\n return (\n \n
\n \n )}\n />\n );\n};\n\nEventDatesField.propTypes = {\n name: PropTypes.string,\n formMethods: PropTypes.object,\n allowAnyDate: PropTypes.bool,\n};\n\nexport default EventDatesField;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useFormContext } from 'react-hook-form';\n\nconst HiddenField = ({\n name,\n registerOpts = {},\n formMethods,\n}) => {\n const { register } = formMethods || useFormContext();\n const inputProps = register(name, registerOpts);\n return ;\n};\n\nHiddenField.propTypes = {\n name: PropTypes.string.isRequired,\n // Pass through additional options to react-hook-form `register` method:\n // https://react-hook-form.com/api/useform/register/\n registerOpts: PropTypes.object,\n formMethods: PropTypes.object,\n};\n\nexport default HiddenField;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useResizeDetector } from 'hooks';\nimport ReactCrop, { centerCrop, makeAspectCrop, convertToPercentCrop } from 'react-image-crop';\n\nconst Cropper = ({\n src,\n initialCrop,\n aspectRatio,\n onChange,\n}) => {\n const [image, setImage] = useState(null);\n const [crop, setCrop] = useState();\n\n const setDefaultCrop = image => {\n const { width, height } = image;\n const crop = centerCrop(\n makeAspectCrop(\n {\n unit: '%',\n width: 100,\n },\n aspectRatio,\n width,\n height,\n ),\n width,\n height,\n );\n\n setCrop(crop);\n\n const percentCrop = convertToPercentCrop(crop, width, height);\n onChange(percentCrop);\n };\n\n const handleImageLoaded = evt => {\n const image = evt.currentTarget;\n setImage(image);\n if (initialCrop) {\n setCrop(initialCrop);\n } else {\n setDefaultCrop(image);\n }\n };\n\n const handleCropChange = (crop, percentCrop) => {\n setCrop(crop);\n onChange(percentCrop);\n };\n\n const handleCropComplete = crop => {\n // Reset to the default crop if no selection was made\n if (crop.width === 0 || crop.height === 0) {\n setDefaultCrop(image);\n }\n };\n\n const { width: containerWidth, ref: containerRef } = useResizeDetector({ handleHeight: false });\n if (!containerWidth) return ;\n\n let width = 'unset';\n if (image && image.height > image.width) {\n // For vertical images, limit the container width\n const nativeRatio = image.width / image.height;\n width = Math.floor(containerWidth * nativeRatio);\n } else if (image && image.width < containerWidth) {\n // Also for images with a native width smaller than the container\n width = image.width;\n }\n\n return (\n \n \n 
\n \n
\n );\n};\n\nCropper.propTypes = {\n src: PropTypes.string,\n initialCrop: PropTypes.shape({\n unit: PropTypes.oneOf(['px', '%']),\n x: PropTypes.number,\n y: PropTypes.number,\n width: PropTypes.number,\n height: PropTypes.number,\n }),\n aspectRatio: PropTypes.number,\n onChange: PropTypes.func,\n};\n\nexport default Cropper;\n","import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { imageSpecs } from 'app-constants';\nimport { usePrevious } from 'hooks';\nimport { useDropzone } from 'react-dropzone';\nimport Icon from 'components/Icon';\nimport LoadingOverlay from 'components/LoadingOverlay';\nimport Cropper from './Cropper';\n\nconst ImageFieldWidget = ({\n imageFieldName = 'image',\n cropDataFieldName = 'image_crop_data',\n label = 'Image',\n imageUrl,\n cropData: cropDataInitial = {},\n specs = imageSpecs,\n maxSize = 10,\n hasError = false,\n onChange = () => {},\n}) => {\n const [imageClear, setImageClear] = useState(false);\n const [cropData, setCropData] = useState(cropDataInitial);\n const [previewUrl, setPreviewUrl] = useState();\n const [previewIsLoading, setPreviewIsLoading] = useState(false);\n const readerRef = useRef();\n\n useEffect(() => {\n const val = { cropData };\n if (previewUrl !== imageUrl) {\n val.image = previewUrl;\n }\n onChange(val);\n }, [previewUrl, cropData]);\n\n useEffect(() => {\n if (imageUrl) setPreviewUrl(imageUrl);\n }, [imageUrl]);\n\n const previousPreviewUrl = usePrevious(previewUrl);\n useEffect(() => {\n if (previousPreviewUrl && !previewUrl) setCropData({});\n }, [previewUrl]);\n\n const loadPreviewFromFile = fileObj => {\n setPreviewIsLoading(true);\n readerRef.current = new FileReader();\n readerRef.current.readAsDataURL(fileObj);\n readerRef.current.onload = () => {\n setPreviewUrl(readerRef.current.result);\n setImageClear(false);\n setPreviewIsLoading(false);\n };\n readerRef.current.onerror = () => {};\n };\n\n useEffect(() => {\n return () => readerRef.current && readerRef.current.abort();\n }, []);\n\n const [fileErrors, setFileErrors] = useState([]);\n const handleFileDrop = useCallback((acceptedFiles, rejectedFiles) => {\n if (acceptedFiles.length > 0) {\n const [file] = acceptedFiles;\n setFileErrors([]);\n loadPreviewFromFile(file);\n } else if (rejectedFiles.length > 0) {\n const [file] = rejectedFiles;\n setFileErrors(file.errors.map(e => e.message));\n }\n }, []);\n\n const {\n getRootProps,\n getInputProps,\n isDragActive,\n isDragReject,\n } = useDropzone({\n onDrop: handleFileDrop,\n multiple: false,\n accept: 'image/jpeg,image/png,.jpg,.jpeg,.png',\n maxSize: maxSize * 1000000, // bytes\n });\n\n const handleRemoveClick = evt => {\n evt.preventDefault();\n setPreviewUrl('');\n setImageClear(true);\n };\n\n const handleCropChange = (id, crop) => {\n const { unit, ...rest } = crop;\n const vals = Object.entries(rest).reduce((result, [key, value]) => {\n result[key] = Math.round(value);\n return result;\n }, {});\n\n setCropData(oldState => ({\n ...oldState,\n [id]: vals,\n }));\n };\n\n const dropzoneClasses = classNames({\n 'image-field-widget-dropzone': true,\n active: isDragActive,\n reject: isDragReject,\n });\n\n const isInitial = !!imageUrl && previewUrl === imageUrl;\n\n return (\n <>\n \n \n \n {previewUrl && }\n
\n\n {(previewUrl || previewIsLoading) ? (\n 0) && 'error')}>\n {imageSpecs.map(({ id, label, aspectRatio }) => {\n let initialCrop;\n if (isInitial && cropDataInitial && cropDataInitial[id]) {\n initialCrop = { unit: '%', ...cropDataInitial[id] };\n }\n\n return (\n \n {label} \n
\n ) : (\n \n handleCropChange(id, crop)}\n />\n
\n \n );\n })}\n \n
\n )}\n\n {previewUrl && previewUrl !== imageUrl && (\n \n )}\n {imageClear && }\n \n \n );\n};\n\nImageFieldWidget.propTypes = {\n imageFieldName: PropTypes.string,\n cropDataFieldName: PropTypes.string,\n label: PropTypes.string,\n imageUrl: PropTypes.string,\n cropData: PropTypes.object,\n specs: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.string,\n aspectRatio: PropTypes.number,\n })),\n maxSize: PropTypes.number, // MB\n hasError: PropTypes.bool,\n onChange: PropTypes.func,\n};\n\nexport default ImageFieldWidget;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Controller, useFormContext } from 'react-hook-form';\nimport ImageFieldWidget from 'components/ImageFieldWidget';\n\nconst ImageField = ({\n name,\n cropDataName,\n initialImage,\n initialCropData,\n label,\n helpText,\n required = false,\n validate,\n formMethods,\n}) => {\n const { control } = formMethods || useFormContext();\n\n return (\n Drag & drop or click here to upload image
\n.jpg or .png files, {maxSize} MB maximum.
\n {fileErrors.map((errorText, idx) => {errorText}
)}\n \n \n {error &&
\n \n )}\n />\n )}\n />\n );\n};\n\nImageField.propTypes = {\n name: PropTypes.string.isRequired,\n cropDataName: PropTypes.string.isRequired,\n initialImage: PropTypes.string,\n initialCropData: PropTypes.object,\n label: PropTypes.string,\n helpText: PropTypes.string,\n required: PropTypes.bool,\n validate: PropTypes.func,\n formMethods: PropTypes.object,\n};\n\nexport default ImageField;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport queryString from 'query-string';\nimport { useFormContext } from 'react-hook-form';\nimport urlJoin from 'url-join';\nimport { urls } from 'app-constants';\nimport SelectField from './SelectField';\n\nconst LiveSearchSelectField = ({\n objectType = 'event',\n minQueryLength = 1,\n apiQueryParams = {},\n components,\n name,\n ...props\n}) => {\n const { watch } = useFormContext();\n const val = watch(name) || '';\n\n const [storedChoices, setStoredChoices] = useState([]);\n const [currentChoice, setCurrentChoice] = useState([]);\n const [labelCache, setLabelCache] = useState({});\n const updateLabelCache = vals => setLabelCache(oldState => ({ ...oldState, ...vals }));\n useEffect(() => {\n if (val) {\n if (labelCache[val]) {\n setCurrentChoice([[val, labelCache[val]]]);\n if (!storedChoices.map(([val]) => val).includes(val)) {\n setStoredChoices(oldState => [...oldState, [val, labelCache[val]]]);\n }\n } else {\n loadOptions(null, val).then(([{ label }]) => {\n setCurrentChoice([[val, label]]);\n });\n }\n } else {\n setCurrentChoice([]);\n }\n }, [val]);\n\n const loadOptions = (query, id) => {\n if (!id && query.length < minQueryLength) return Promise.resolve([]);\n const params = {\n ...apiQueryParams,\n ...(id ? { id } : { q: query }),\n };\n\n const url = urlJoin(\n urls[`${objectType}Livesearch`],\n `?${queryString.stringify(params)}`,\n );\n return fetch(url)\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n return response;\n })\n .then(response => response.json())\n .then(data => {\n const currentChoiceVal = currentChoice[0] && currentChoice[0][0];\n let choices = data.map(({ id, name }) => [id, name]);\n if (!id && !choices.map(([val]) => val).includes(currentChoiceVal)) {\n choices = [...choices, ...currentChoice];\n }\n const selectOptions = choices.map(([value, label]) => ({ value, label }));\n setStoredChoices(choices);\n updateLabelCache(choices.reduce((result, [value, label]) => ({ ...result, [value]: label }), {}));\n return selectOptions;\n })\n .catch(err => {\n console.error(err);\n return [];\n });\n };\n\n const [queryValue, setQueryValue] = useState('');\n\n // TODO fix\n // useEffect(() => {\n // if (queryValue.length < minQueryLength) {\n // setStoredChoices(currentChoice.length ? currentChoice : []);\n // }\n // }, [queryValue, currentChoice.length]);\n\n const getOptionLabel = ({ label }) => {\n if (!queryValue) return label;\n const idx = label.toLowerCase().indexOf(queryValue.toLowerCase());\n const idxEnd = idx + queryValue.length;\n const html = `${label.slice(0, idx)}${label.slice(idx, idxEnd)}${label.slice(idxEnd)}`;\n return ;\n };\n\n const onInputChange = (value, actionMeta) => {\n if (actionMeta.action === 'input-change') {\n setQueryValue(value);\n } else {\n setQueryValue('');\n }\n };\n\n const emptyMessage = 'Begin typing to search…';\n const loadingMessage = ({ inputValue }) => inputValue.length < minQueryLength ? emptyMessage : 'Loading…';\n const noOptionsMessage = ({ inputValue }) => inputValue.length < minQueryLength ? emptyMessage : 'No matches found.';\n\n return (\n {error.message}
}\n \n
\n );\n};\n\nNumberField.propTypes = {\n name: PropTypes.string.isRequired,\n label: PropTypes.string,\n helpText: PropTypes.string,\n helpPopupContent: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n ]),\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n min: PropTypes.number,\n max: PropTypes.number,\n step: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['any'])]),\n validate: PropTypes.func,\n // Pass through additional options to react-hook-form `register` method:\n // https://react-hook-form.com/api/useform/register/\n registerOpts: PropTypes.object,\n formMethods: PropTypes.object,\n};\n\nexport default NumberField;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Controller, useFormContext } from 'react-hook-form';\nimport { Range, getTrackBackground } from 'react-range';\nimport colors from 'themeColors';\nimport HelpPopup from 'components/HelpPopup';\nimport useErrorOrHelpText from './useErrorOrHelpText';\n\nconst NumberSliderField = ({\n name,\n label,\n helpText,\n helpPopupContent,\n required = false,\n disabled = false,\n min = 0,\n max = 100,\n step = 1,\n valueLabelSuffix = '',\n validate,\n registerOpts = {},\n formMethods,\n}) => {\n const { control } = formMethods || useFormContext();\n const { errorOrHelpText, hasError } = useErrorOrHelpText(name, helpText, formMethods);\n\n const wrapperClasses = classNames({\n 'z-form-slider-wrap': true,\n // focused: isFocused,\n required,\n 'has-val': true,\n invalid: hasError,\n });\n\n const boundsMessage = (min && max)\n ? `Value must be between ${min} and ${max}.`\n : null;\n\n const labelDecimalPlaces = step.toString().split('.')[1]?.length || 0;\n\n return (\n \n \n {label && (\n \n )}\n {!!helpPopupContent && {helpPopupContent} }\n
\n \n {errorOrHelpText}\n
\n \n {\n return (\n
\n );\n }}\n />\n\n {label && (\n \n )}\n {!!helpPopupContent && \n onChange(value)}\n renderTrack={({ props, children }) => (\n \n {children}\n
\n )}\n renderThumb={({ props, isDragged }) => (\n // eslint-disable-next-line\n \n {isDragged && (\n
\n )}\n />\n \n {value.toFixed(labelDecimalPlaces)}{valueLabelSuffix}\n
\n )}\n \n {errorOrHelpText}\n
\n \n );\n};\n\nNumberSliderField.propTypes = {\n name: PropTypes.string.isRequired,\n label: PropTypes.string,\n helpText: PropTypes.string,\n helpPopupContent: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n ]),\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n min: PropTypes.number,\n max: PropTypes.number,\n step: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['any'])]),\n valueLabelSuffix: PropTypes.string,\n validate: PropTypes.func,\n // Pass through additional options to react-hook-form `register` method:\n // https://react-hook-form.com/api/useform/register/\n registerOpts: PropTypes.object,\n formMethods: PropTypes.object,\n};\n\nexport default NumberSliderField;\n","import React, { useEffect, useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { Controller } from 'react-hook-form';\nimport {\n isBefore,\n isValid,\n parse as parseDate,\n startOfDay,\n} from 'date-fns';\nimport PillButton from 'components/PillButton';\nimport {\n TIME_FORMAT,\n TimeField,\n} from 'components/formFields';\nimport useErrorOrHelpText from '../useErrorOrHelpText';\nimport WeekdaySelector from '../WeekdaySelector';\n\nexport const rowDefaults = {\n days: [],\n startTime: '',\n endTime: '',\n};\n\nconst OpenTimesRow = ({ prefix, formMethods, onChange, onDelete }) => {\n const { watch, trigger, control } = formMethods;\n\n const today = useMemo(() => startOfDay(new Date()));\n\n const startTimeString = watch(`${prefix}.startTime`);\n const endTimeString = watch(`${prefix}.endTime`);\n\n const startTimeVal = useMemo(() => parseDate(startTimeString, TIME_FORMAT, today), [startTimeString]);\n const endTimeVal = useMemo(() => parseDate(endTimeString, TIME_FORMAT, today), [endTimeString]);\n\n const daysVal = watch(`${prefix}.days`);\n\n const validateEndTime = useCallback(value => {\n const valueAsDate = parseDate(value, TIME_FORMAT, today);\n\n if (isValid(startTimeVal) && isValid(valueAsDate) && isBefore(valueAsDate, startTimeVal)) {\n return 'Close time must be after open time.';\n }\n return true;\n }, [startTimeVal]);\n\n useEffect(() => {\n if (isValid(startTimeVal) && isValid(endTimeVal)) {\n trigger(`${prefix}.endTime`);\n }\n }, [startTimeVal]);\n\n useEffect(() => {\n trigger(`${prefix}.days`);\n }, [startTimeVal, endTimeVal]);\n\n useEffect(() => {\n if (daysVal && daysVal.length) {\n onChange();\n }\n }, [startTimeVal, endTimeVal, daysVal]);\n\n const validateDays = value => {\n if (isValid(startTimeVal) && isValid(endTimeVal) && value.length === 0) {\n return 'Select one or more days.';\n }\n return true;\n };\n\n const { errorOrHelpText: daysError } = useErrorOrHelpText(`${prefix}.days`, null, formMethods);\n\n return (\n \n
\n );\n};\n\nOpenTimesRow.propTypes = {\n prefix: PropTypes.string,\n formMethods: PropTypes.object,\n onChange: PropTypes.func,\n onDelete: PropTypes.func,\n};\n\nexport default OpenTimesRow;\n","import { format as formatDate, parse as parseDate } from 'date-fns';\nimport { parseTimeFieldValue, formatTimeFieldValue } from '../TimeField';\n\nconst WEEKDAY_MAP = {\n // fieldValue: apiValue\n 0: 6,\n 1: 0,\n 2: 1,\n 3: 2,\n 4: 3,\n 5: 4,\n 6: 5,\n};\n\nexport const hydrateValue = values => {\n // Format value from API for form\n const result = [];\n\n values.filter(v => !v.closed).forEach(v => {\n const startTime = formatTimeFieldValue(parseDate(v.time_start, 'HH:mm:ss', new Date()));\n const endTime = formatTimeFieldValue(parseDate(v.time_end, 'HH:mm:ss', new Date()));\n let fieldDay = Object.entries(WEEKDAY_MAP).find(([key, val]) => val === v.day_of_week)[0];\n fieldDay = parseInt(fieldDay, 10);\n\n const match = result.find(rec => rec.startTime === startTime && rec.endTime === endTime);\n if (match) {\n if (!match.days.includes(fieldDay)) {\n match.days.push(fieldDay);\n }\n } else {\n result.push({ days: [fieldDay], startTime, endTime });\n }\n });\n\n return result;\n};\n\nexport const dehydrateValue = values => {\n // Format value from form for API\n const result = [];\n\n Object.entries(WEEKDAY_MAP).forEach(([fieldDay, apiDay]) => {\n fieldDay = parseInt(fieldDay, 10);\n const valsForDay = values.filter(v => v.days.includes(fieldDay));\n if (valsForDay.length > 0) {\n valsForDay.forEach(v => {\n result.push({\n day_of_week: apiDay,\n closed: false,\n time_start: formatDate(parseTimeFieldValue(v.startTime), 'HH:mm'),\n time_end: formatDate(parseTimeFieldValue(v.endTime), 'HH:mm'),\n });\n });\n } else {\n result.push({\n day_of_week: apiDay,\n closed: true,\n });\n }\n });\n\n return result;\n};\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n areIntervalsOverlapping,\n isValid,\n parse as parseDate,\n} from 'date-fns';\nimport { Controller, useFormContext, useFieldArray } from 'react-hook-form';\nimport PillButton from 'components/PillButton';\nimport { TIME_FORMAT } from '../TimeField';\nimport OpenTimesRow, { rowDefaults } from './OpenTimesRow';\n\nconst OpenTimesField = ({ name, formMethods }) => {\n formMethods = formMethods || useFormContext();\n const { control, trigger, formState: { errors } } = formMethods;\n\n const validate = rows => {\n let error;\n const now = new Date();\n const normalizedRows = rows.reduce((result, row) => {\n const start = parseDate(row.startTime, TIME_FORMAT, now);\n const end = parseDate(row.endTime, TIME_FORMAT, now);\n if (row.days.length > 0 && isValid(start) && isValid(end)) {\n result.push({ ...row, start, end });\n }\n return result;\n }, []);\n\n normalizedRows.find((row, idx) => {\n const otherRows = normalizedRows.filter((r, i) => i !== idx);\n const conflictRow = otherRows.find(({ start, end, days }) => {\n const intervalsOverlap = areIntervalsOverlapping({ start, end }, { start: row.start, end: row.end });\n const daysOverlap = days.some(d => row.days.includes(d));\n return intervalsOverlap && daysOverlap;\n });\n\n if (conflictRow) {\n error = 'Schedule contains overlapping intervals.';\n return true;\n }\n return false;\n });\n\n return error || true;\n };\n\n const { fields: rowFields, append, remove } = useFieldArray({ control, name, rules: { validate } });\n\n const addRow = () => append({ ...rowDefaults }, { shouldFocus: false });\n\n const rootErr = errors[name] && errors[name].root && errors[name].root.message;\n\n return (\n \n
\n \n {\n const handleChange = value => { onChange(value); onBlur(); };\n return
\n \n {daysError}\n
\n \n
\n \n
\n \n {!!onDelete && (\n
\n \n
\n )}\n \n
\n )}\n {rowFields.map((field, idx) => (\n {rootErr}
\n \n
\n \n )}\n />\n );\n};\n\nOpenTimesField.propTypes = {\n name: PropTypes.string,\n formMethods: PropTypes.object,\n};\n\nexport default OpenTimesField;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useFormContext } from 'react-hook-form';\nimport useErrorOrHelpText from './useErrorOrHelpText';\n\nconst RadioField = ({\n name,\n choices = [],\n helpText,\n required = false,\n disabled = false,\n validate,\n registerOpts = {},\n formMethods,\n horizontal = false,\n}) => {\n const { register, watch } = formMethods || useFormContext();\n const { errorOrHelpText, hasError } = useErrorOrHelpText(name, helpText, formMethods);\n choices = choices.map(choice => {\n const [value, label] = Array.isArray(choice) ? choice : [choice, choice];\n return [(value || '').toString(), label];\n })\n\n const val = watch(name) || '';\n\n return (\n \n
\n );\n};\n\nRadioField.propTypes = {\n name: PropTypes.string.isRequired,\n choices: PropTypes.array,\n helpText: PropTypes.string,\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n validate: PropTypes.func,\n // Pass through additional options to react-hook-form `register` method:\n // https://react-hook-form.com/api/useform/register/\n registerOpts: PropTypes.object,\n formMethods: PropTypes.object,\n horizontal: PropTypes.bool,\n};\n\nexport default RadioField;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Controller, useFormContext } from 'react-hook-form';\nimport { useToggle } from 'hooks';\nimport ReactQuill from 'react-quill';\nimport useErrorOrHelpText from './useErrorOrHelpText';\nimport HelpPopup from 'components/HelpPopup';\nimport 'react-quill/dist/quill.snow.css';\n\nconst QUILL_MODULES = {\n toolbar: [\n ['bold', 'italic'],\n [{ list: 'bullet' }, { list: 'ordered' }],\n ['link', 'clean'],\n ],\n keyboard: {\n bindings: {\n tab: {\n key: 9,\n handler: () => true,\n },\n },\n },\n};\n\nconst QUILL_FORMATS = [\n 'bold', 'italic',\n 'bullet', 'list', 'indent',\n 'link',\n];\n\nconst RichTextField = ({\n height = 250,\n name,\n label,\n helpText,\n helpPopupContent,\n required = false,\n disabled = false,\n minLength,\n maxLength,\n validate,\n registerOpts = {},\n formMethods,\n}) => {\n const containerRef = useRef();\n const { control, watch } = formMethods || useFormContext();\n const { errorOrHelpText, hasError } = useErrorOrHelpText(name, helpText, formMethods);\n\n const val = watch(name) || '';\n\n const lengthMessage = (minLength && maxLength)\n ? `This field must be between ${minLength} and ${maxLength} characters.`\n : null;\n\n const [isFocused, toggleFocused] = useToggle(false);\n const handleFocus = () => toggleFocused(true);\n\n const wrapperClasses = classNames({\n 'z-form-richtext-wrap': true,\n focused: isFocused,\n required,\n 'has-val': !!val,\n invalid: hasError,\n 'z-form-disabled': disabled,\n });\n\n const [containerEl, setContainerEl] = useState(null);\n useEffect(() => setContainerEl(containerRef.current), []);\n\n return (\n \n {choices.map(([value, label]) => {\n const inputProps = register(name, {\n required: { value: required, message: 'This field is required.' },\n disabled,\n validate,\n ...registerOpts,\n });\n\n const labelClasses = classNames({\n 'z-form-radio': true,\n selected: val === value,\n 'z-form-disabled': !!disabled,\n invalid: hasError,\n });\n\n return (\n
\n \n \n
\n );\n })}\n \n {errorOrHelpText}\n
\n \n {!!containerEl && (\n <>\n {\n const handleBlur = (previousRange, source, editor) => {\n toggleFocused(false);\n onBlur();\n };\n const handleChange = (content, delta, source, editor) => {\n // Quill leaves a single newline character when the editor is empty.\n onChange(editor.getLength() > 1 ? content : '');\n };\n return (\n {helpPopupContent} }\n
\n );\n};\n\nRichTextField.propTypes = {\n height: PropTypes.number,\n name: PropTypes.string.isRequired,\n label: PropTypes.string,\n helpText: PropTypes.string,\n helpPopupContent: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n ]),\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n minLength: PropTypes.number,\n maxLength: PropTypes.number,\n validate: PropTypes.func,\n // Pass through additional options to react-hook-form `register` method:\n // https://react-hook-form.com/api/useform/register/\n registerOpts: PropTypes.object,\n formMethods: PropTypes.object,\n};\n\nexport default RichTextField;\n","const STATES = {\n AL: 'Alabama',\n AK: 'Alaska',\n AZ: 'Arizona',\n AR: 'Arkansas',\n CA: 'California',\n CO: 'Colorado',\n CT: 'Connecticut',\n DE: 'Delaware',\n DC: 'District of Columbia',\n FL: 'Florida',\n GA: 'Georgia',\n HI: 'Hawaii',\n ID: 'Idaho',\n IL: 'Illinois',\n IN: 'Indiana',\n IA: 'Iowa',\n KS: 'Kansas',\n KY: 'Kentucky',\n LA: 'Louisiana',\n ME: 'Maine',\n MD: 'Maryland',\n MA: 'Massachusetts',\n MI: 'Michigan',\n MN: 'Minnesota',\n MS: 'Mississippi',\n MO: 'Missouri',\n MT: 'Montana',\n NE: 'Nebraska',\n NV: 'Nevada',\n NH: 'New Hampshire',\n NJ: 'New Jersey',\n NM: 'New Mexico',\n NY: 'New York',\n NC: 'North Carolina',\n ND: 'North Dakota',\n OH: 'Ohio',\n OK: 'Oklahoma',\n OR: 'Oregon',\n PA: 'Pennsylvania',\n RI: 'Rhode Island',\n SC: 'South Carolina',\n SD: 'South Dakota',\n TN: 'Tennessee',\n TX: 'Texas',\n UT: 'Utah',\n VT: 'Vermont',\n VA: 'Virginia',\n WA: 'Washington',\n WV: 'West Virginia',\n WI: 'Wisconsin',\n WY: 'Wyoming',\n};\n\nexport default STATES;\n","import React from 'react';\nimport SelectField from '../SelectField';\nimport STATES from './stateData';\n\nconst stateChoices = Object.entries(STATES);\n\nconst StateField = props => {\n const { validate = () => true, ...rest } = props;\n const doValidate = value => validate(value) && (Object.keys(STATES).includes(value) || 'Enter a valid U.S. state.');\n\n return \n {errorOrHelpText}\n {maxLength &&
\n \n )}\n maxLength && 'text-danger')}>{val.length} / {maxLength}
}\n \n
\n );\n};\n\nTextField.propTypes = {\n name: PropTypes.string.isRequired,\n label: PropTypes.string,\n helpText: PropTypes.string,\n helpPopupContent: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n ]),\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n multiline: PropTypes.bool,\n minLength: PropTypes.number,\n maxLength: PropTypes.number,\n validate: PropTypes.func,\n // Pass through additional options to react-hook-form `register` method:\n // https://react-hook-form.com/api/useform/register/\n registerOpts: PropTypes.object,\n formMethods: PropTypes.object,\n onBlur: PropTypes.func,\n};\n\nexport default TextField;\n","import React from 'react';\nimport TextField from './TextField';\nimport { validateUrl } from './validation';\n\nconst URLField = props => {\n const { validate = () => true, ...rest } = props;\n const doValidate = value => validate(value) !== true ? validate(value) : validateUrl(value);\n\n const handleBlur = evt => {\n const val = evt.target.value;\n if (val && !val.match(/^http(s)?:\\/\\//)) {\n evt.target.value = 'https://' + val;\n }\n };\n\n return \n {multiline ? : }\n {label && (\n \n )}\n {!!helpPopupContent && {helpPopupContent} }\n
\n \n {errorOrHelpText}\n {maxLength &&
\n maxLength && 'text-danger')}>{val.length} / {maxLength}
}\n {fieldName}: {errMsg}
);\n return result;\n }, []);\n\n return (\n \n {errorLines}\n
\n )}\n \n \n {formattedTimes}\n {isOpenNow && Open Now!}\n
\n );\n};\n\nPoiHoursToday.propTypes = {\n className: PropTypes.string,\n style: PropTypes.object,\n openTimes: PropTypes.arrayOf(PropTypes.shape({\n dayOfWeek: PropTypes.number,\n closed: PropTypes.bool,\n /** Time formatted as HH:MM:SS (24-hour clock) */\n timeStart: PropTypes.string,\n /** Time formatted as HH:MM:SS (24-hour clock) */\n timeEnd: PropTypes.string,\n })),\n};\n\nexport default PoiHoursToday;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { urls } from 'app-constants';\nimport { getCsrfToken } from 'utils';\nimport { useResizeDetector, useTrackImpression } from 'hooks';\nimport BookmarkToggleButton from 'components/BookmarkToggleButton';\nimport CardDeletionMenu from 'components/CardDeletionMenu';\nimport Icon from 'components/Icon';\nimport PoiHoursToday from 'components/PoiHoursToday';\n\nconst PoiCard = ({\n className,\n useCompactStyle,\n smallIcon = false,\n hideBookmarkButton = false,\n hideDeletionMenu = true,\n targetBlank = false,\n id,\n absoluteUrl,\n name,\n shortAddress,\n openTimes,\n showDateTimePicker,\n imagePrimary,\n imageThumbnail,\n numEventsFuture,\n onMouseEnter = () => {},\n onMouseLeave = () => {},\n onDeleteSuccess = () => {},\n onDeleteFailure = () => {},\n}) => {\n const { width, ref } = useResizeDetector({ handleHeight: false });\n const [isDeleting, setIsDeleting] = useState(false);\n\n const trackerRef = useTrackImpression('poi_card_impression', { venueName: name, venueId: id });\n\n const handleCardClick = () => {\n if (targetBlank) {\n window.open(absoluteUrl, '_blank', 'noopener,noreferrer');\n } else {\n window.location.href = absoluteUrl\n }\n };\n const handleTitleClick = evt => evt.stopPropagation(); // Don't break cmd+click\n\n const handleDeleteClick = () => {\n setIsDeleting(true);\n\n fetch(`${urls.toggleSavedPoiBase}${id}/`, {\n credentials: 'include',\n method: 'POST',\n headers: { 'X-CSRFToken': getCsrfToken() },\n })\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n return response;\n })\n .then(response => response.json())\n .then(data => {\n if (data.saved) {\n setIsDeleting(false);\n onDeleteFailure();\n } else {\n onDeleteSuccess();\n }\n })\n .catch(err => {\n console.error(err);\n setIsDeleting(false);\n onDeleteFailure(err);\n });\n };\n\n const fullWidthImage = (width && width < 500) || false;\n const image = imageThumbnail;\n const iconContainerStyle = {\n backgroundImage: image ? `url('${image}')` : 'unset',\n };\n if (fullWidthImage) {\n iconContainerStyle.height = Math.round(width / 2);\n }\n const iconContainerClasses = classNames({\n 'lc-icon': true,\n sm: smallIcon || useCompactStyle,\n 'full-width': fullWidthImage,\n });\n\n const showOpenTimes = !!showDateTimePicker && !!openTimes && openTimes.length > 0;\n\n return (\n \n
\n\n \n
\n \n {name}\n
\n\n {!!shortAddress && (\n\n
\n )}\n\n {showOpenTimes && (\n \n
\n {shortAddress}
\n \n
\n )}\n\n {!!numEventsFuture && (\n \n
\n \n
\n )}\n \n
\n {numEventsFuture} upcoming event{numEventsFuture !== 1 && 's'}
\n \n
\n e.stopPropagation()}>\n {!hideBookmarkButton && (\n
\n \n Oops! This venue has already been claimed. If you believe this is an error, please contact help@zeitcaster.com.\n
\n );\n }\n\n if (isAuthenticated) {\n return (\n <>\n \n If you are an authorized representative of {poiData.name}, click below to submit your claim. After a brief verification process, we’ll send you an email with instructions to activate your subscription.\n
\n \n {cancelButton}\n
\n \n );\n }\n\n const msgText = isNewVenue\n ? Please log in or register to submit your venue’s details for inclusion on Zeitcaster.\n : If you are an authorized representative of {poiData.name}, please log in or register to submit your claim.;\n\n return (\n <>\n \n {msgText}\n
\n \n {cancelButton}\n
\n \n );\n};\n\nCta.propTypes = {\n poiData: PropTypes.object,\n isClaimed: PropTypes.bool,\n isAuthenticated: PropTypes.bool,\n isNewVenue: PropTypes.bool,\n isSubmitting: PropTypes.bool,\n isCancellable: PropTypes.bool,\n onSubmit: PropTypes.func.isRequired,\n onCancel: PropTypes.func,\n};\n\nexport default Cta;\n","import React, { useState, useEffect, useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport camelize from 'camelize';\nimport { components } from 'react-select';\nimport { useForm, FormProvider } from 'react-hook-form';\nimport { urls } from 'app-constants';\nimport { useHistory } from 'hooks';\nimport { trackEvent } from 'utils';\nimport { LiveSearchSelectField } from 'components/formFields';\nimport PoiCard from 'components/PoiCard';\nimport Cta from './Cta';\n\nconst QUERY_MIN_CHARS = 3;\n\nconst SearchForm = ({\n poiData,\n isAuthenticated,\n isSubmitting,\n errorData,\n onRequestNew,\n onPoiChange,\n onSubmitClaim,\n}) => {\n const formMethods = useForm();\n const val = formMethods.watch('venue');\n\n const onSubmit = data => {\n onRequestNew();\n };\n\n const getPoiData = (id, onSuccess = onPoiChange) => {\n fetch(`${urls.poiDetailBase}${id}/`)\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n return response;\n })\n .then(response => response.json())\n .then(data => onSuccess(camelize(data)))\n .catch(err => {\n console.error(err);\n onPoiChange(null);\n });\n };\n\n useEffect(() => {\n if (val) {\n getPoiData(val);\n } else {\n onPoiChange(null);\n }\n }, [val]);\n\n const { location: { queryParams }, updateQueryParams } = useHistory();\n const { vid, n } = queryParams || {};\n useEffect(() => {\n if (vid) {\n formMethods.setValue('venue', vid);\n updateQueryParams({ vid: null });\n } else if (n) {\n onRequestNew();\n updateQueryParams({ n: null });\n }\n }, [vid, n]);\n\n const handleRequestNew = useCallback(evt => {\n evt.preventDefault();\n onRequestNew();\n }, []);\n\n const [eventTriggered, setEventTriggered] = useState(false);\n const handleFocus = () => {\n if (!eventTriggered) {\n trackEvent('prod_start_venue_claim');\n setEventTriggered(true);\n }\n };\n\n /* eslint-disable react/prop-types */\n // eslint-disable-next-line react/display-name\n const CustomMenuList = useMemo(() => props => {\n const { MenuList } = components;\n const showSubmitOpt = props.selectProps.inputValue.length >= QUERY_MIN_CHARS;\n\n return (\n <>\n \n \n Don’t see your venue listed? Click here to add it to Zeitcaster.\n \n
\n )}\n \n );\n }, [handleRequestNew]);\n /* eslint-enable react/prop-types */\n\n return (\n <>\n \n
\n \n {!!poiId && \n \n \n
\n );\n};\n\nPoiEditForm.propTypes = {\n poiId: PropTypes.number,\n regionChoices: PropTypes.arrayOf(PropTypes.array),\n timezoneChoices: PropTypes.arrayOf(PropTypes.array),\n mapboxToken: PropTypes.string,\n poiTypeChoices: PropTypes.arrayOf(PropTypes.array),\n formType: PropTypes.oneOf(['basic', 'standard', 'admin']),\n controlsClassName: PropTypes.string,\n cancelButtonText: PropTypes.string,\n submitButtonText: PropTypes.string,\n redirect: PropTypes.bool,\n publicSubmission: PropTypes.bool,\n onSubmitComplete: PropTypes.func,\n onCancel: PropTypes.func,\n};\n\nexport default PoiEditForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Cta from './Cta';\nimport PoiEditForm from 'components/PoiEditForm';\n\nconst RequestForm = ({\n isAuthenticated,\n regionChoices,\n timezoneChoices,\n mapboxToken,\n poiTypeChoices,\n onSubmit,\n onCancel,\n}) => {\n if (!isAuthenticated) {\n return (\n \n
\n );\n};\n\nRequestForm.propTypes = {\n isAuthenticated: PropTypes.bool,\n regionChoices: PropTypes.arrayOf(PropTypes.array),\n timezoneChoices: PropTypes.arrayOf(PropTypes.array),\n mapboxToken: PropTypes.string,\n poiTypeChoices: PropTypes.arrayOf(PropTypes.array),\n onSubmit: PropTypes.func,\n onCancel: PropTypes.func,\n};\n\nexport default RequestForm;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useUserContext } from 'context';\nimport { useToggle } from 'hooks';\nimport { getCsrfToken, trackEvent } from 'utils';\nimport { urls } from 'app-constants';\nimport SearchForm from './SearchForm';\nimport RequestForm from './RequestForm';\n\nconst SUCCESS_TYPE_CLAIM = 'claim';\nconst SUCCESS_TYPE_SUBMIT_VENUE = 'submit';\n\nconst ClaimVenueForm = ({\n headerLabel = 'Claim Your Venue',\n regionChoices,\n timezoneChoices,\n mapboxToken,\n poiTypeChoices,\n}) => {\n const { id: userId } = useUserContext();\n const [poiData, setPoiData] = useState(null);\n\n const [showRequestForm, toggleRequestForm] = useToggle(false);\n\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [complete, setComplete] = useState(null);\n const [errorData, setErrorData] = useState(null);\n useEffect(() => {\n setErrorData(null)\n }, [poiData]);\n\n const doClaim = (id, onSuccess) => {\n setIsSubmitting(true);\n setErrorData(null);\n\n fetch(urls.claimVenue, {\n credentials: 'include',\n method: 'POST',\n headers: {\n 'X-CSRFToken': getCsrfToken(),\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ id }),\n })\n .then(response => {\n setIsSubmitting(false);\n if (!response.ok) throw new Error(response.statusText);\n return response;\n })\n .then(response => response.json())\n .then(data => onSuccess(data))\n .catch(err => {\n console.error(err);\n });\n };\n\n const handleSubmitClaim = id => doClaim(id, data => {\n if (data.status === 'succeeded') {\n setComplete(SUCCESS_TYPE_CLAIM);\n trackEvent('prod_submit_venue_claim', {\n venueName: poiData.name,\n venueId: poiData.id,\n });\n } else {\n setComplete(null);\n setErrorData(data);\n }\n });\n\n const handleSubmitNew = data => {\n doClaim(data.id, () => {\n setComplete(SUCCESS_TYPE_SUBMIT_VENUE)\n setTimeout(() => window.scrollTo(0, 0), 200);\n });\n\n trackEvent('prod_submit_new_venue', {\n venueName: data.name,\n venueId: data.id,\n });\n };\n\n const handleCancelRequest = () => {\n toggleRequestForm(false)\n setTimeout(() => window.scrollTo(0, 0), 200);\n };\n\n // TODO update\n const msgText = {\n [SUCCESS_TYPE_CLAIM]: `We have received your request to claim ${poiData?.name}. You will be notified by email when our team completes the verification process.`,\n [SUCCESS_TYPE_SUBMIT_VENUE]: `We have received your request. You will be notified by email when our team completes the verification process.`,\n }[complete];\n\n const successMsg = msgText && (\n \n
\n );\n\n const form = showRequestForm ? (\n Thank You!
\n \n\n \n \n {successMsg || form}\n
\n );\n};\n\nClaimVenueForm.propTypes = {\n headerLabel: PropTypes.string,\n regionChoices: PropTypes.arrayOf(PropTypes.array),\n timezoneChoices: PropTypes.arrayOf(PropTypes.array),\n mapboxToken: PropTypes.string,\n poiTypeChoices: PropTypes.arrayOf(PropTypes.array),\n};\n\nexport default ClaimVenueForm;\n","import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport colors from 'themeColors';\n\nconst CurrentLocIcon = forwardRef(({\n style = {},\n active = false,\n size = 20,\n onClick,\n}, ref) => {\n const strokeColor = '#ffffff';\n const fillColor = colors.primary;\n\n const radius = size / 2;\n const scale = active ? 1.25 : 1;\n\n const iconStyle = {\n cursor: onClick ? 'pointer' : 'auto',\n transform: `scale(${scale})`,\n ...style,\n };\n\n\n return (\n {headerLabel}
\n\n
\n );\n });\n};\n\nexport default CurrentVenueToggle;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { format as formatDate, parseISO as parseDate } from 'date-fns';\nimport { getByPath } from 'utils';\n\nconst DataTable = ({\n config,\n data,\n sortValue,\n onSort = () => {},\n}) => {\n const { columns, rowKey } = config;\n\n const renderValue = (conf, row) => {\n let value = conf.path && getByPath(row, conf.path);\n if (conf.render) {\n return conf.render(value);\n }\n\n if (conf.date && value) {\n const fmt = conf.dateFormat || 'yyyy-MM-dd';\n value = formatDate(parseDate(value), fmt);\n }\n\n if (conf.linkPath && value) {\n const url = getByPath(row, conf.linkPath);\n value = {value};\n }\n\n return value ?? '–';\n }\n\n return (\n | {contents} | ;\n })}\n
|---|
\n onChange({ status: val })}\n />\n
\n\n \n onChange({ price: val })}\n />\n
\n\n \n onChange({ search: val })}\n />\n
\n \n );\n};\n\nPaymentFilters.propTypes = {\n priceChoices: PropTypes.array,\n value: PropTypes.shape({\n price: PropTypes.number,\n status: PropTypes.oneOf(['paid', 'unpaid', 'no_payment_required']),\n search: PropTypes.string,\n }),\n onChange: PropTypes.func,\n};\n\nexport default PaymentFilters;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SelectWidget, TextInputWidget } from 'components/formFields/widgets';\n\nconst SubscriptionFilters = ({ planChoices, value, onChange }) => {\n return (\n <>\n \n onChange({ status: val })}\n />\n
\n\n \n onChange({ plan: val })}\n />\n
\n\n \n onChange({ search: val })}\n />\n
\n \n );\n};\n\nSubscriptionFilters.propTypes = {\n planChoices: PropTypes.array,\n value: PropTypes.shape({\n plan: PropTypes.number,\n status: PropTypes.oneOf(['active', 'inactive', 'none']),\n search: PropTypes.string,\n }),\n onChange: PropTypes.func,\n};\n\nexport default SubscriptionFilters;\n","export const subscriptionsTableConfig = {\n storagePrefix: 'customerReportSubscriptions',\n rowKey: 'id',\n columns: [\n {\n label: 'Email',\n path: 'billingContact.email',\n sort: {\n asc: 'billing_contact__email',\n desc: '-billing_contact__email',\n }\n },\n {\n label: 'POI',\n path: 'poi.name',\n linkPath: 'poi.absoluteUrl',\n textWrap: true,\n minWidth: 250,\n sort: {\n asc: 'poi__name',\n desc: '-poi__name',\n },\n },\n {\n label: 'County',\n path: 'poi.county',\n },\n {\n label: 'Claimed',\n path: 'created',\n date: true,\n sort: {\n asc: 'created',\n desc: '-created',\n },\n },\n {\n label: 'Plan',\n path: 'subscription.plan.summary',\n sort: {\n asc: 'stripe_subscription__plan__amount',\n desc: '-stripe_subscription__plan__amount',\n },\n },\n {\n label: 'Status',\n path: 'subscription.status',\n sort: {\n asc: 'stripe_subscription__status',\n desc: '-stripe_subscription__status',\n },\n },\n {\n label: 'Active Events',\n path: 'activeEvents',\n },\n {\n label: 'Start Date',\n path: 'subscription.startDate',\n date: true,\n sort: {\n asc: 'stripe_subscription__start_date',\n desc: '-stripe_subscription__start_date',\n },\n },\n {\n label: 'Cancel Date',\n path: 'subscription.canceledAt',\n date: true,\n sort: {\n asc: 'stripe_subscription__canceled_at',\n desc: '-stripe_subscription__canceled_at',\n },\n },\n ],\n};\n\nexport const paymentsTableConfig = {\n storagePrefix: 'customerReportPayments',\n rowKey: 'id',\n columns: [\n {\n label: 'Email',\n path: 'user.email',\n sort: {\n asc: 'user__email',\n desc: '-user__email',\n }\n },\n {\n label: 'Event',\n path: 'event.name',\n linkPath: 'event.absoluteUrl',\n textWrap: true,\n minWidth: 250,\n sort: {\n asc: 'event__name',\n desc: '-event__name',\n },\n },\n {\n label: 'Listing Type',\n path: 'listingType',\n },\n {\n label: 'POI',\n path: 'event.poi.name',\n linkPath: 'event.poi.absoluteUrl',\n textWrap: true,\n minWidth: 250,\n sort: {\n asc: 'event__point_of_interest__name',\n desc: '-event__point_of_interest__name',\n },\n },\n {\n label: 'County',\n path: 'event.poi.county',\n },\n {\n label: 'Price',\n path: 'price.humanReadablePrice',\n sort: {\n asc: 'stripe_price__unit_amount',\n desc: '-stripe_price__unit_amount',\n },\n render: val => val && val.replace(' USD (one time)', ''),\n },\n {\n label: 'Status',\n path: 'paymentStatus',\n sort: {\n asc: 'stripe_checkout_session__payment_status',\n desc: '-stripe_checkout_session__payment_status',\n },\n },\n {\n label: 'Date',\n path: 'created',\n date: true,\n sort: {\n asc: 'created',\n desc: '-created',\n },\n },\n ],\n};\n","import React, { useState, useEffect, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport camelize from 'camelize';\nimport queryString from 'query-string';\nimport { urls } from 'app-constants';\nimport { useHistory } from 'hooks';\nimport { capFirst, pluralize } from 'utils';\nimport DataTable from 'components/DataTable';\nimport LoadingOverlay from 'components/LoadingOverlay';\nimport { SelectWidget } from 'components/formFields/widgets';\nimport PaymentFilters from './PaymentFilters';\nimport SubscriptionFilters from './SubscriptionFilters';\nimport { subscriptionsTableConfig, paymentsTableConfig } from './tableConfigs';\n\nconst REPORT_TYPE_SUBSCRIPTIONS = 'subscriptions';\nconst REPORT_TYPE_PAYMENTS = 'payments';\nconst REPORT_TYPES = [REPORT_TYPE_SUBSCRIPTIONS, REPORT_TYPE_PAYMENTS];\n\nconst CustomerReport = ({ countyChoices, planChoices, priceChoices }) => {\n const { location: { queryParams }, updateQueryParams } = useHistory();\n const reportType = REPORT_TYPES.find(s => s === queryParams?.type) || REPORT_TYPE_SUBSCRIPTIONS;\n const handleReportTypeChange = val => updateQueryParams({ type: val }, { clear: true });\n const handleCountyChange = val => updateQueryParams({ county: val });\n const [reportData, setReportData] = useState(null);\n const [isFetching, setIsFetching] = useState(false);\n\n const ordering = queryParams?.ordering;\n const handleOrderChange = val => updateQueryParams({ ordering: val });\n\n const [dataUrl, tableConfig, validParams] = {\n [REPORT_TYPE_SUBSCRIPTIONS]: [\n urls.customerReportDataSubscriptions,\n subscriptionsTableConfig,\n ['county', 'status', 'plan', 'search'],\n ],\n [REPORT_TYPE_PAYMENTS]: [\n urls.customerReportDataPayments,\n paymentsTableConfig,\n ['county', 'status', 'price', 'search'],\n ],\n }[reportType];\n\n const dataParams = queryParams && validParams.reduce((result, key) => {\n if (queryParams[key]) {\n result[key] = queryParams[key];\n }\n return result;\n }, {});\n\n const filtersActive = Object.keys(dataParams || {}).length > 0;\n\n const resetLink = filtersActive && (\n \n
\n
\n \n \n
\n \n [s, capFirst(s)])}\n clearable={false}\n value={reportType}\n onChange={handleReportTypeChange}\n />\n
\n\n \n
\n\n {filters}\n\n \n\n {resetLink}\n \n
\n
\n \n );\n};\n\nCustomerReport.propTypes = {\n countyChoices: PropTypes.arrayOf(PropTypes.array),\n planChoices: PropTypes.arrayOf(PropTypes.array),\n priceChoices: PropTypes.arrayOf(PropTypes.array),\n};\n\nexport default CustomerReport;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\n/**\n * Renders a horizontal row of tiny navigation dots, commonly used with\n * responsive/mobile image galleries. A colored dot represents the active\n * item. Although the dots are technically clickable, they are tiny, so this\n * is intended mostly as a visual indicator, for use alongside another form of\n * navigation.\n */\nconst DotsNav = ({ style, count, activeIndex, onClick }) => {\n const arr = Array.from({ length: count });\n\n return (\n \n );\n};\n\nDotsNav.propTypes = {\n style: PropTypes.object,\n /** number of dots */\n count: PropTypes.number.isRequired,\n /** index of the active dot (zero-based) */\n activeIndex: PropTypes.number,\n /** triggered when a dot is clicked, passes index */\n onClick: PropTypes.func,\n};\n\nexport default DotsNav;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport DotsNav from 'components/DotsNav';\nimport CircleButtonNext from 'components/CircleButtonNext';\nimport CircleButtonPrev from 'components/CircleButtonPrev';\n\nconst DotsPagination = ({ className, curPage, numPages, showNextPrevButtons = true, onChange }) => {\n const handlePrevClick = curPage === 1 ? null : () => onChange(curPage - 1);\n const handleNextClick = curPage === numPages ? null : () => onChange(curPage + 1);\n const handleDotClick = idx => onChange(idx + 1);\n\n return (\n \n
\n {reportData.length ? (\n {reportData.length}
\n {pluralize(reportData.length, 'result', null, true)}\n {filtersActive && (filters active)}\n No results{filtersActive && ' matching the active filters'} were found.
\n )}\n \n )}\n \n {showNextPrevButtons &&
\n );\n};\n\nDotsPagination.propTypes = {\n className: PropTypes.string,\n curPage: PropTypes.number.isRequired,\n numPages: PropTypes.number.isRequired,\n showNextPrevButtons: PropTypes.bool,\n onChange: PropTypes.func,\n};\n\nexport default DotsPagination;\n","import React, { useState, useEffect, useRef, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport camelize from 'camelize';\nimport queryString from 'query-string';\nimport { useUserContext } from 'context';\nimport { useToggle, useClickOutside } from 'hooks';\nimport { urls } from 'app-constants';\nimport Icon from 'components/Icon';\nimport DropdownMenu from 'components/DropdownMenu';\n\nconst EditorSearch = ({ className }) => {\n const { isStaff, isZeditor } = useUserContext();\n\n const containerRef = useRef();\n const inputRef = useRef();\n const [inputVal, setInputVal] = useState('');\n const trimmedVal = inputVal.trim();\n\n const [menuVisible, toggleMenuVisible] = useToggle(false);\n const handleClickOutside = () => toggleMenuVisible(false);\n useClickOutside(containerRef, handleClickOutside);\n\n const handleFormSubmit = evt => evt.preventDefault();\n const handleInputChange = evt => setInputVal(evt.target.value);\n\n const [eventData, setEventData] = useState(null);\n const [poiData, setPoiData] = useState(null);\n const fetchTimeout = useRef();\n const fetchResults = query => {\n clearTimeout(fetchTimeout.current);\n fetchTimeout.current = setTimeout(() => {\n const query = queryString.stringify({ q: trimmedVal });\n const eventUrl = `${urls.eventLivesearch}?${query}`;\n const poiUrl = `${urls.poiLivesearch}?${query}`;\n\n Promise.all([eventUrl, poiUrl].map(url => (\n fetch(url)\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n return response.json();\n })\n .catch(err => {\n console.error(err);\n })\n ))).then(([eventData, poiData]) => {\n setEventData(camelize(eventData) || []);\n setPoiData(camelize(poiData) || []);\n });\n }, 500);\n };\n\n useEffect(() => {\n if (trimmedVal.length > 2) {\n fetchResults(trimmedVal);\n } else {\n setEventData(null);\n setPoiData(null);\n }\n }, [trimmedVal]);\n\n const iconStyle = {\n fontSize: 14,\n position: 'absolute',\n left: 20,\n top: '50%',\n transform: 'translateY(-50%)',\n };\n\n const results = [\n ['Events:', eventData],\n ['POIs:', poiData],\n ].map(([label, data]) => !!data && (\n {label}
\n {data.length === 0 ? (\n No results
\n ) : data.slice(0, 10).map(item => (\n {item.name}\n ))}\n \n {inputVal.length > 2 ? results : (\n
\n \n \n );\n};\n\nEditorSearch.propTypes = {\n className: PropTypes.string,\n};\n\nexport default EditorSearch;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport PillButton from 'components/PillButton';\nimport ErrorBoundary from 'components/ErrorBoundary';\n\nconst ErrorDemo = ({ buttonText = 'Error Demo' }) => {\n const [text, setText] = useState(buttonText);\n return (\n Enter search query
\n )}\n \n
\n );\n};\n\nEventDateSummary.propTypes = {\n start: PropTypes.oneOfType([\n PropTypes.instanceOf(Date),\n PropTypes.string,\n ]).isRequired,\n end: PropTypes.oneOfType([\n PropTypes.instanceOf(Date),\n PropTypes.string,\n ]),\n /**\n * IANA Time Zone ID - if provided, times will be converted to the specified timezone. Omit to display times in\n * client browser's local timezone.\n * */\n timeZone: PropTypes.string,\n};\n\nexport default EventDateSummary;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { parseISO } from 'date-fns';\nimport { RRule } from 'rrule';\nimport colors from 'themeColors';\nimport { capFirst } from 'utils';\nimport Icon from 'components/Icon';\n\nconst EventRecurrenceSummary = ({ className, rules, nextOccurrence }) => {\n let matchingRule;\n const [nextStart, nextEnd] = nextOccurrence.times[0];\n const nextStartDt = parseISO(nextOccurrence.timestamps[0][0]);\n const nextDate = nextOccurrence.eventDate;\n\n for (const r of rules) {\n let options;\n try {\n options = RRule.parseString(r.rule);\n options.dtstart = nextStartDt;\n } catch (e) {\n continue;\n }\n const rruleObj = new RRule(options);\n const nextRuleDate = rruleObj.after(nextStartDt, true);\n const dateMatches = nextDate === nextRuleDate?.toISOString().slice(0, 10);\n\n if (nextStart === r.start && nextEnd === r.end && dateMatches) {\n matchingRule = rruleObj;\n break;\n }\n }\n\n const isSimple = rule => {\n const { bysetpos, count } = rule.options;\n return !([bysetpos, count].some(Boolean));\n };\n\n let labelText = 'Recurring event';\n if (rules.length === 1 && matchingRule && isSimple(matchingRule)) {\n // console.log(matchingRule.toText(), matchingRule.options);\n labelText = capFirst(matchingRule.toText());\n }\n\n return (\n \n
\n {formattedTime}
\n \n
\n );\n};\n\nEventRecurrenceSummary.propTypes = {\n className: PropTypes.string,\n rules: PropTypes.arrayOf(PropTypes.shape({\n start: PropTypes.string,\n end: PropTypes.string,\n rule: PropTypes.string,\n })),\n nextOccurrence: PropTypes.shape({\n eventDate: PropTypes.string,\n times: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),\n timestamps: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),\n }),\n};\n\nexport default EventRecurrenceSummary;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { typeBadgeColors, badgeDefaultColorClass } from 'app-constants';\nimport Badge from 'components/Badge';\n\nconst EventTypeBadge = ({ eventTypeName, ...rest }) => (\n \n
\n {labelText}
\n \n
\n\n \n
\n \n {name}\n
\n\n\n {!hidePoiInfo && (\n
\n \n
\n )}\n\n \n
\n {pointOfInterest.name}
\n evt.stopPropagation()}>\n
\n \n {actionButtons}\n
\n \n
\n );\n};\n\nEventDatesList.propTypes = {\n dates: PropTypes.arrayOf(PropTypes.shape({\n /** ISO date string */\n start: PropTypes.string,\n /** ISO date string */\n end: PropTypes.string,\n })),\n /** IANA Time Zone ID */\n poiTimezone: PropTypes.string,\n /** If true, display times in the POI's timezone, rather than the client's */\n usePoiTimezone: PropTypes.bool,\n /** Number of items per page */\n pageSize: PropTypes.number,\n /** All event data - needed by AddToCalendar component */\n eventData: PropTypes.object,\n poiAddress: PropTypes.string,\n};\n\nexport default EventDatesList;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useForm, FormProvider } from 'react-hook-form';\nimport { CheckboxField, SelectField, NumberField, NumberSliderField } from 'components/formFields';\n\nconst Filters = ({\n countyChoices = [],\n canSubmit = true,\n onSubmit,\n}) => {\n const defaultValues = {\n max_days: 90,\n county_id: null,\n name: 75,\n same_poi: false,\n same_time: false,\n include_unpublished: true,\n };\n\n const formMethods = useForm({\n mode: 'onTouched',\n defaultValues,\n });\n\n const [name, samePoi, sameTime] = formMethods.watch(['name', 'same_poi', 'same_time']);\n const filtersOk = name > 0 || (samePoi && sameTime);\n const submitButtonDisabled = !canSubmit || !filtersOk;\n\n const handleResetClick = () => {\n formMethods.reset(defaultValues);\n };\n\n return (\n \n
\n {numPages > 1 && (\n \n {datesByPage.map((dates, idx) => (\n
\n \n {dates.map(({ start, end }) => (\n
\n ))}\n \n
\n ))}\n \n
\n \n
\n {formatDate(start)}
\n {formatTime(start, end)}
\n \n
\n\n \n
\n \n
\n\n \n
\n\n \n
\n\n \n \n
\n \n );\n};\n\nResultItem.propTypes = {\n events: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n absoluteUrl: PropTypes.string,\n published: PropTypes.bool,\n poi: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n lon: PropTypes.number,\n lat: PropTypes.number,\n absoluteUrl: PropTypes.string,\n published: PropTypes.bool,\n street: PropTypes.string,\n shortAddress: PropTypes.string,\n timeZone: PropTypes.string,\n }),\n nextOccurrence: PropTypes.shape({\n start: PropTypes.instanceOf(Date),\n end: PropTypes.instanceOf(Date),\n })\n })),\n mapZoom: PropTypes.number,\n mapboxToken: PropTypes.string,\n onResolveSuccess: PropTypes.func,\n};\n\nexport default ResultItem;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport camelize from 'camelize';\nimport queryString from 'query-string';\nimport { urls } from 'app-constants';\nimport { pluralize } from 'utils';\nimport Badge from 'components/Badge';\nimport LoadingOverlay from 'components/LoadingOverlay';\nimport Filters from './Filters';\nimport ResultItem from './ResultItem';\n\nconst EventDuplicateReport = ({ countyChoices, mapboxToken }) => {\n const [isFetching, setIsFetching] = useState(false);\n const [reportData, setReportData] = useState(null);\n const [errorMessage, setErrorMessage] = useState(null);\n\n const handleRunReport = filterParams => {\n const queryParams = Object.entries(filterParams).reduce((result, [key, value]) => {\n if (value) result[key] = value;\n return result;\n }, {});\n const url = `${urls.eventDuplicateReportData}?${queryString.stringify(queryParams)}`;\n setErrorMessage(null);\n setIsFetching(true);\n fetch(url, { credentials: 'include' })\n .then(response => {\n setIsFetching(false);\n if (response.status === 400) {\n response.json().then(data => {\n setErrorMessage(data.error);\n setReportData(null);\n });\n } else if (!response.ok) {\n throw new Error(response.statusText);\n } else {\n response.json().then(data => setReportData(camelize(data)));\n }\n return response;\n })\n .catch(err => {\n setIsFetching(false);\n console.error(err);\n });\n };\n\n const handleResolve = eventIds => setReportData(os => ({\n ...os,\n results: os.results.filter(events => !events.every(p => eventIds.includes(p.id))),\n }));\n\n let curParams = [];\n let mapZoom = 16;\n if (reportData) {\n const { maxDays, county, nameThreshold, samePoi, sameTime, includeUnpublished } = reportData;\n curParams.push(`next ${pluralize(maxDays, 'day')} `);\n if (county) curParams.push(county);\n if (nameThreshold) curParams.push(`name ${nameThreshold}%`);\n if (samePoi) curParams.push(\"same POI\");\n if (sameTime) curParams.push(\"same time\");\n if (includeUnpublished) curParams.push(\"including unpublished\");\n }\n\n const keyFromResult = events => events.map(p => p.id).join('_');\n\n const error = !!errorMessage && \n
\n \n {events.map(({ id, name, absoluteUrl, published, poi, nextOccurrence }) => (\n
\n \n
\n ))}\n \n {name}\n {!published && unpublished}\n
\n\n
\n {!!nextOccurrence && (\n \n
\n {poi.name}
\n \n
\n {errorMessage}
\n const emptyMessage = !errorMessage && !reportData && (\n Configure the filter parameters as desired and select \"Run Report.\"
\n );\n\n return (\n \n
\n );\n};\n\nEventDuplicateReport.propTypes = {\n countyChoices: PropTypes.array,\n mapboxToken: PropTypes.string,\n};\n\nexport default EventDuplicateReport;\n","import React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { formatISO, isValid as isValidDate, startOfDay, startOfTomorrow } from 'date-fns';\nimport { useForm, FormProvider } from 'react-hook-form';\nimport { ageGroups, prices } from 'app-constants';\nimport {\n ButtonChoiceField,\n CheckboxField,\n CheckboxMultiField,\n DateField,\n parseDateFieldValue,\n formatDateFieldValue,\n EventDatesField,\n eventDatesRowDefaults,\n HiddenField,\n ImageField,\n LiveSearchSelectField,\n RichTextField,\n SelectField,\n TextField,\n URLField,\n dehydrateEventDatesValue,\n} from 'components/formFields';\n\n\nconst Form = ({\n categoryChoices,\n poiChoices,\n poiId,\n eventId,\n eventData,\n messages,\n initialDataLoaded,\n hidePoiField = false,\n showEditorTools = false,\n basicFieldsOnly = false,\n onPoiChange,\n onSubmit,\n renderPreForm,\n renderPostForm,\n}) => {\n const [apiValidationErrors, setApiValidationErrors] = useState({});\n\n const fieldValidator = fieldName => () => !apiValidationErrors[fieldName] || apiValidationErrors[fieldName].join(' ');\n\n let defaultPoi = poiId || ((poiChoices || []).length === 1 ? poiChoices[0][0] : '');\n\n const defaultValues = {\n name: '',\n url: '',\n price_information: '',\n ticket_url: '',\n description: '',\n type: 'in_person',\n use_poi_times: false,\n is_global: false,\n online_url: '',\n price: '',\n event_type: null,\n date_start: null,\n date_end: null,\n dates: [{ ...eventDatesRowDefaults }],\n point_of_interest: defaultPoi,\n image: '',\n image_crop_data: null,\n age_group: [],\n recertify: false,\n };\n\n const formMethods = useForm({\n mode: 'onTouched',\n defaultValues,\n });\n const { formState: { errors: formErrors, isValid: formIsValid }, setValue } = formMethods;\n const formHasErrors = Object.keys(formErrors).length > 0;\n\n const poiVal = formMethods.watch('point_of_interest');\n useEffect(() => {\n onPoiChange && onPoiChange(poiVal)\n }, [poiVal]);\n\n const clearFormErrors = () => {\n setTimeout(() => formMethods.clearErrors(), 50);\n };\n\n const clearForm = () => {\n formMethods.reset(defaultValues);\n clearFormErrors();\n };\n\n useEffect(() => {\n clearFormErrors()\n }, [basicFieldsOnly]);\n\n const debugFillForm = useCallback(() => {\n const startDate = formatDateFieldValue(startOfTomorrow());\n const debugValues = {\n name: `Debug Event - ${(new Date()).toLocaleString()}`,\n url: 'http://example.com',\n price_information: '',\n description: 'Dolor consequat deserunt officia fugiat laboris veniam ut non irure voluptate nostrud ut enim.',\n type: 'in_person',\n use_poi_times: false,\n is_global: false,\n online_url: '',\n price: 'free',\n event_type: categoryChoices[0][0],\n date_start: null,\n date_end: null,\n dates: [\n {\n ...eventDatesRowDefaults,\n date: startDate,\n startTime: '12:00 PM',\n endTime: '1:00 PM',\n frequency: 'once',\n },\n ],\n image: '',\n image_crop_data: null,\n point_of_interest: poiVal || 1197,\n age_group: ['all_ages'],\n recertify: false,\n };\n\n formMethods.reset(debugValues);\n setTimeout(() => formMethods.clearErrors(), 50);\n }, [categoryChoices.length, poiVal]);\n\n const handleKeyDown = useCallback(evt => {\n if (evt.key === '1' && evt.metaKey && evt.shiftKey) {\n evt.preventDefault();\n debugFillForm();\n }\n }, [debugFillForm]);\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [handleKeyDown]);\n\n\n useEffect(() => {\n clearForm();\n }, [eventId]);\n\n useEffect(() => {\n if (eventData) {\n formMethods.reset(eventData);\n setTimeout(formMethods.trigger, 100);\n }\n }, [eventData]);\n\n useEffect(() => {\n if (Object.keys(apiValidationErrors).length > 0) {\n formMethods.trigger();\n }\n\n const subscription = formMethods.watch((value, { name }) => {\n if (apiValidationErrors[name]) {\n setApiValidationErrors(oldState => {\n const { [name]: _, ...rest } = oldState;\n return rest;\n });\n setTimeout(() => formMethods.trigger(name), 100);\n }\n });\n\n return () => subscription.unsubscribe();\n }, [JSON.stringify(apiValidationErrors)]);\n\n const onValidationError = setApiValidationErrors;\n const onFormSubmit = data => {\n const apiData = Object.entries(data).reduce((result, [key, value]) => {\n switch (key) {\n case 'type':\n result.is_in_person = ['hybrid', 'in_person'].includes(value);\n result.is_online = ['hybrid', 'online'].includes(value);\n break;\n case 'date_start':\n // fall through\n case 'date_end':\n result[key] = value ? formatISO(parseDateFieldValue(value)) : null;\n break;\n case 'dates':\n result[key] = data.use_poi_times ? [] : dehydrateEventDatesValue(value);\n break;\n default:\n result[key] = value;\n }\n\n return result;\n }, {});\n\n setApiValidationErrors({});\n\n onSubmit(apiData, onValidationError);\n };\n\n const typeVal = formMethods.watch('type');\n const usePoiTimesVal = formMethods.watch('use_poi_times');\n const datesVal = formMethods.watch('dates');\n\n useEffect(() => {\n if (!usePoiTimesVal && !datesVal.length) {\n setValue('dates', [{ ...eventDatesRowDefaults }]);\n }\n }, [usePoiTimesVal]);\n\n const today = useMemo(() => startOfDay(new Date()));\n\n const startDateVal = formMethods.watch('date_start');\n let startDateValAsDate = parseDateFieldValue(startDateVal);\n startDateValAsDate = isValidDate(startDateValAsDate) ? startDateValAsDate : null;\n const minStartDate = eventId ? undefined : today;\n const minEndDate = startDateValAsDate || today;\n useEffect(() => {\n formMethods.trigger('date_end');\n }, [startDateVal]);\n\n\n useEffect(() => {\n if (poiId && !eventId) {\n setValue('point_of_interest', poiId);\n }\n }, [poiId]);\n\n return (\n \n
\n
\n \n
\n
\n \n
\n )}\n \n {pluralize(reportData.results.length, 'result')} for:\n {curParams.map(val =>
\n\n {reportData.results.map(events => (\n \n This venue currently has {quota.used} active event{quota.used === 1 ? '' : 's'}. \n {isBillingContact\n ? Upgrade your subscription plan to add more.\n : Upgrade your subscription plan to add more.}\n
\n );\n }\n }\n\n const initialDataLoaded = !eventId || !!eventData;\n\n return (\n \n {!!eventId && (\n
\n );\n};\n\nEventEditForm.propTypes = {\n categoryChoices: PropTypes.arrayOf(PropTypes.array),\n poiChoices: PropTypes.arrayOf(PropTypes.array),\n eventId: PropTypes.number,\n};\n\nexport default EventEditForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport queryString from 'query-string';\nimport { parseISO, isValid } from 'date-fns';\nimport EventDateSummary from 'components/EventDateSummary';\nimport Icon from 'components/Icon';\n\nconst EventMapPopup = ({\n className,\n style,\n id,\n name,\n nextEventOccurrence,\n occurences = [],\n absoluteUrl,\n isOnline,\n price,\n pointOfInterest,\n searchParams,\n}) => {\n const searchString = searchParams && encodeURIComponent(queryString.stringify(searchParams, {\n arrayFormat: 'bracket',\n skipNull: true,\n skipEmptyString: true,\n }));\n const destUrl = searchParams ? `${absoluteUrl}?search=${searchString}` : absoluteUrl;\n const handleCardClick = () => window.location.href = destUrl;\n\n let startTimestamp;\n let endTimestamp;\n\n if (nextEventOccurrence) {\n [startTimestamp, endTimestamp] = nextEventOccurrence.timestamps[0];\n } else {\n ({ timestampStart: startTimestamp, timestampEnd: endTimestamp } = occurences[0] || {});\n }\n\n const startTime = parseISO(startTimestamp);\n let endTime = parseISO(endTimestamp);\n if (!isValid(startTime)) return null; // short circuit if event has no date.\n if (!isValid(endTime)) endTime = null;\n\n return (\n \n \n
\n
\n )}\n\n \n
\n window.location.href = (eventData.absolute_url || urls.events)} // TODO - redirect to dashboard\n />\n
\n )}\n />\n \n {formHasErrors &&
\n Please correct form errors before submitting.
}\n {quotaIsMaxed && Upgrade to publish more events.
}\n\n {!!eventId && (\n \n \n Delete\n \n
\n \n )}\n\n \n \n
\n \n
\n {name}
\n\n\n
\n\n \n
\n {pointOfInterest.name}
\n \n
\n )}\n \n
\n {price.label}
\n {countdownText}
}\n \n \n
\n \n
\n {headerText}
\n \n
\n \n \n {iconEmail}\n \n
\n Email
\n \n \n {iconFacebook}\n \n
\n Facebook
\n \n \n {iconTwitter}\n \n
\n Twitter
\n \n \n
\n \n \n );\n};\n\nexport default ShareModal;\n\nShareModal.propTypes = {\n className: PropTypes.string,\n buttonText: PropTypes.string,\n urlFacebook: PropTypes.string,\n urlTwitter: PropTypes.string,\n urlEmail: PropTypes.string,\n url: PropTypes.string,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { isValid, parseISO } from 'date-fns';\nimport camelize from 'camelize';\nimport BookmarkToggleButton from 'components/BookmarkToggleButton';\nimport LivestreamButton from 'components/LivestreamButton';\nimport ShareModal from 'components/ShareModal';\n\nconst EventMobileBottomBar = ({\n eventData,\n urlEmail,\n urlFacebook,\n urlTwitter,\n startDate,\n endDate,\n url,\n}) => {\n const { onlineUrl } = camelize(eventData);\n if (!isValid(startDate)) startDate = parseISO(startDate);\n if (endDate && !isValid(endDate)) endDate = parseISO(endDate);\n\n return (\n \n );\n};\n\nEventMobileBottomBar.propTypes = {\n eventData: PropTypes.object.isRequired,\n urlFacebook: PropTypes.string,\n urlTwitter: PropTypes.string,\n urlEmail: PropTypes.string,\n url: PropTypes.string,\n startDate: PropTypes.oneOfType([\n PropTypes.instanceOf(Date),\n PropTypes.string,\n ]).isRequired,\n endDate: PropTypes.oneOfType([\n PropTypes.instanceOf(Date),\n PropTypes.string,\n ]),\n};\n\nexport default EventMobileBottomBar;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { defaultLocations, urls } from 'app-constants';\nimport colors from 'themeColors';\nimport { useHistory, usePrevious } from 'hooks';\nimport { useFilterContext, useUserContext } from 'context';\nimport DropdownButton from 'components/DropdownButton';\nimport Icon from 'components/Icon';\nimport RadioList from 'components/RadioList';\nimport AuthRequiredLink from 'components/AuthRequiredLink';\n\nconst defaultLocationsSorted = [...defaultLocations].sort((a, b) => a.name.localeCompare(b.name));\nconst defaultLocationsById = defaultLocationsSorted.reduce((result, loc) => ({ ...result, [loc.id]: loc }), {});\nconst defaultLocationOptions = defaultLocationsSorted.map(({ id, name }) => [id, name]);\n\nconst LocationSelect = ({ className, maxHeight, buttonStyle = { width: 250 } }) => {\n const [locationsById, setLocationsById] = useState({\n current: {\n id: 'current',\n name: 'Current Location',\n },\n ...defaultLocationsById,\n });\n\n // User addresss book locations\n const { addresses: userLocations = [], isFetching: userDataFetching } = useUserContext();\n const userLocationsById = userLocations.reduce((result, loc) => ({ ...result, [loc.id]: loc }), {});\n const userLocationOptions = userLocations.map(({ id, name }) => [id, name]);\n\n useEffect(() => {\n setLocationsById(oldState => ({ ...oldState, ...userLocationsById }));\n }, [JSON.stringify(userLocationsById)]);\n\n const [geoLocError, setGeoLocError] = useState(false);\n\n const { location: { queryParams }, updateQueryParams } = useHistory();\n\n const prevParams = usePrevious(queryParams);\n const prevLocationsById = usePrevious(locationsById);\n useEffect(() => {\n if (queryParams && (!prevParams || (JSON.stringify(locationsById) !== JSON.stringify(prevLocationsById)))) {\n const hasLocParams = ['address_id', 'latitude', 'longitude'].every(val => Object.keys(queryParams).includes(val));\n const savedLocId = window.localStorage.getItem('zeit.searchLocation');\n if (!hasLocParams) {\n updateLocParams(savedLocId || defaultLocations[0].id);\n }\n }\n }, [queryParams, JSON.stringify(locationsById)]);\n\n const handleLocChange = id => {\n window.localStorage.setItem('zeit.searchLocation', id);\n updateLocParams(id);\n };\n\n const handleSetCurrentLoc = () => handleLocChange('current');\n\n const updateLocParams = id => {\n const loc = locationsById[id];\n if (loc) {\n updateQueryParams({\n address_id: id,\n latitude: loc.lat,\n longitude: loc.lon,\n }, { replace: true });\n }\n };\n\n const doGeoLoc = () => navigator.geolocation.getCurrentPosition(handleGeoLoc, handleGeoLocError, {\n enableHighAccuracy: false,\n timeout: 5000,\n maximumAge: 1000 * 60 * 15, // 15 minutes\n });\n\n const handleGeoLoc = evt => {\n setLocationsById(oldState => ({\n ...oldState,\n current: {\n id: 'current',\n name: 'Current Location',\n lat: evt.coords.latitude,\n lon: evt.coords.longitude,\n },\n }));\n };\n\n const handleGeoLocError = err => {\n console.error(err);\n setGeoLocError(true);\n };\n\n const aid = (queryParams || {}).address_id;\n useEffect(() => {\n if (aid === 'current' && !locationsById.current.lat) doGeoLoc();\n }, [aid, locationsById.current]);\n\n useEffect(() => {\n if (locationsById.current.lat && locationsById.current.lon) {\n updateQueryParams({\n address_id: 'current',\n latitude: locationsById.current.lat,\n longitude: locationsById.current.lon,\n }, { replace: true });\n }\n }, [locationsById.current.lat, locationsById.current.lon]);\n\n let activeValue;\n if (queryParams) {\n if (locationsById.hasOwnProperty(queryParams.address_id)) {\n activeValue = queryParams.address_id;\n } else if (queryParams.address_id && userDataFetching) {\n activeValue = null;\n }\n }\n\n const activeOptionLabel = activeValue && locationsById[activeValue].name;\n\n const { updateFilterContext } = useFilterContext();\n useEffect(() => {\n updateFilterContext({ locationName: activeOptionLabel, locationId: activeValue });\n }, [activeOptionLabel]);\n\n // clear error message when selected option changes\n useEffect(() => setGeoLocError(false), [activeValue]);\n\n if (!queryParams) return null;\n\n return (\n \n \n {copied ? Link Copied! : Copy Link}\n \n
\n \n \n
\n
\n\n \n \n
\n {geoLocError && (\n \n Error retrieving location. Make sure you have enabled location services in your browser’s settings.\n
\n )}\n \n
\n Saved Addresses\n
\n\n {userLocationOptions.length ? (\n No saved addresses.
\n ))}\n\n \n\n
Other Locations
\n \n
\n );\n};\n\nEventSearchBlockForm.propTypes = {\n className: PropTypes.string,\n};\n\nexport default EventSearchBlockForm;\n","import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useScrollPosition } from 'hooks';\n\nconst StickyHeader = ({ children }) => {\n const containerRef = useRef();\n const offsetTop = useRef();\n\n const [isVisible, setIsVisible] = useState(false);\n const [windowScrollY, setWindowScrollY] = useState(window.scrollY);\n\n const handleScroll = ({ y }) => setWindowScrollY(y);\n useScrollPosition(handleScroll);\n\n useLayoutEffect(() => {\n offsetTop.current = window.scrollY + containerRef.current.getBoundingClientRect().top;\n }, []);\n\n useEffect(() => {\n if (!isVisible && windowScrollY >= offsetTop.current) {\n setIsVisible(true);\n } else if (isVisible && windowScrollY < offsetTop.current) {\n setIsVisible(false);\n }\n }, [windowScrollY]);\n\n const headerStyle = isVisible ? undefined : { height: 0 };\n\n return (\n \n \n \n
\n );\n};\n\nStickyHeader.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.node,\n PropTypes.arrayOf(PropTypes.node),\n ]),\n};\n\nexport default StickyHeader;\n","import { useRef, useLayoutEffect } from 'react';\n\nexport default function useScrollPosition (onScroll, deps = [], wait = 200) {\n const throttleTimeout = useRef(null);\n\n const cb = () => {\n onScroll({ x: window.scrollX, y: window.scrollY });\n throttleTimeout.current = null;\n };\n\n useLayoutEffect(() => {\n const handleScroll = () => {\n if (throttleTimeout.current === null) {\n throttleTimeout.current = setTimeout(cb, wait);\n }\n };\n\n window.addEventListener('scroll', handleScroll);\n return () => window.removeEventListener('scroll', handleScroll);\n }, deps);\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport camelize from 'camelize';\nimport striptags from 'striptags';\nimport { isValid, parseISO } from 'date-fns';\nimport { useWidgetId } from 'hooks';\nimport StickyHeader from 'components/StickyHeader';\nimport ShareModal from 'components/ShareModal';\nimport AddToCalendar from 'components/AddToCalendar';\nimport BookmarkToggleButton from 'components/BookmarkToggleButton';\nimport LivestreamButton from 'components/LivestreamButton';\n\nconst EventStickyHeader = ({\n eventData,\n poiAddress,\n urlEmail,\n urlFacebook,\n urlTwitter,\n startDate,\n endDate,\n}) => {\n let { id, name, description, absoluteUrl, pointOfInterest, onlineUrl } = camelize(eventData);\n const url = `${window.location.protocol}//${window.location.host}${absoluteUrl}`;\n description = striptags(description).trim();\n if (description.length > 500) {\n description = description.substring(0, 500) + '…';\n }\n description = [description, url].filter(s => !!s).join('\\n');\n const isWidget = !!useWidgetId();\n\n if (!isValid(startDate)) startDate = parseISO(startDate);\n if (endDate && !isValid(endDate)) endDate = parseISO(endDate);\n\n return (\n \n {children}\n
\n \n
\n {name}
\n\n {onlineUrl && (\n
\n \n
\n \n
\n {!!errorMessage && (\n {texts.heading}
\n {savedSearches && savedSearches.length > 0 && (\n\n Or {texts.modeLink}\n
\n )}\n \n {errorMessage}\n
\n )}\n \n \n {isEvent &&
\n );\n};\n\nFilterBar.propTypes = {\n objectType: PropTypes.oneOf(['event', 'poi']),\n distanceUnits: PropTypes.oneOf([DISTANCE_UNITS_MI, DISTANCE_UNITS_KM]),\n};\n\nexport default FilterBar;\n","import React, { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useBootstrapBreakpoint, useHistory } from 'hooks';\nimport { useFilterContext } from 'context';\nimport DropdownButton from 'components/DropdownButton';\nimport Icon from 'components/Icon';\n\nexport const ORDER_API_DEFAULT = 'featured';\nexport const ORDER_DATE = 'dt_next';\nexport const ORDER_TIME = 'dt_next_grouped';\nexport const ORDER_DISTANCE = 'distance';\nexport const ORDER_NAME = 'name';\nexport const ORDER_PRICE_ASC = 'price';\nexport const ORDER_PRICE_DESC = '-price';\nexport const ORDER_EVENT_COUNT = '-num_events_future';\n\nconst OrderingMenu = ({ className, buttonClassName, objectType = 'event', menuAnchor }) => {\n const EVENT_ORDER_OPTIONS = [\n [ORDER_API_DEFAULT, 'Featured'],\n [ORDER_DATE, 'Date'],\n [ORDER_TIME, 'Time'],\n [ORDER_DISTANCE, 'Distance'],\n [ORDER_PRICE_ASC, 'Lowest Price'],\n [ORDER_PRICE_DESC, 'Highest Price'],\n ];\n\n const POI_ORDER_OPTIONS = [\n [ORDER_API_DEFAULT, 'Distance'],\n [ORDER_NAME, 'Name'],\n [ORDER_EVENT_COUNT, 'Event Count'],\n ];\n\n const ORDER_OPTIONS = {\n event: EVENT_ORDER_OPTIONS,\n poi: POI_ORDER_OPTIONS,\n }[objectType];\n\n const { location: { queryParams }, updateQueryParams } = useHistory();\n const ORDER_DEFAULT = objectType === 'event' ? ORDER_TIME : ORDER_API_DEFAULT;\n const ordering = (queryParams && queryParams.ordering) || ORDER_DEFAULT;\n\n const { updateFilterContext } = useFilterContext();\n useEffect(() => {\n updateFilterContext({ ordering });\n }, [ordering]);\n\n const orderingMenuRef = useRef();\n const handleOrderChange = (evt, ordering) => {\n evt.preventDefault();\n updateQueryParams({ ordering });\n orderingMenuRef.current.close();\n };\n\n const isMobile = useBootstrapBreakpoint('down-md');\n const activeOption = ORDER_OPTIONS.find(([val]) => val === ordering);\n const activeLabel = activeOption ? activeOption[1] : '(unknown)';\n\n return (\n \n {ORDER_OPTIONS.map(([value, label]) => (\n handleOrderChange(evt, value)}\n data-list-id={`${objectType}-sort`}\n data-option-value={value}\n data-option-label={label}\n >\n
\n \n );\n};\n\nOrderingMenu.propTypes = {\n className: PropTypes.string,\n buttonClassName: PropTypes.string,\n objectType: PropTypes.oneOf(['event', 'poi']),\n menuAnchor: PropTypes.oneOf(['left', 'right']),\n};\n\nexport default OrderingMenu;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { format } from 'date-fns';\nimport { useHistory, useToggle, useDisableScroll } from 'hooks';\nimport { hasOwnProperty } from 'utils';\nimport Icon from 'components/Icon';\nimport OrderingMenu from 'components/OrderingMenu';\nimport PillButton from 'components/PillButton';\nimport SaveOrUpdateSearch from 'components/SaveOrUpdateSearch';\nimport {\n AgeGroupFilter,\n PriceFilter,\n CategoryFilter,\n DateFilter,\n DistanceFilter,\n IN_PERSON,\n ONLINE,\n OnlineFilter,\n TimeFilter,\n parseFilterParams,\n DISTANCE_UNITS_MI,\n DISTANCE_UNITS_KM,\n VALID_FILTER_PARAMS,\n} from 'components/filters';\n\nconst FilterBarMobile = ({ objectType = 'event', distanceUnits = DISTANCE_UNITS_MI }) => {\n const { location: { queryParams }, updateQueryParams } = useHistory();\n\n const isEvent = objectType === 'event';\n\n const [modalVisible, toggleModalVisible] = useToggle(false);\n useDisableScroll(modalVisible); // disable scrolling on body when modal is open\n\n const paramsFromQuery = queryParams && VALID_FILTER_PARAMS.reduce((result, param) => ({ ...result, [param]: queryParams[param] }), {});\n const [filterParams, setFilterParams] = useState(paramsFromQuery || {});\n const updateFilterParams = attrs => setFilterParams(prevState => ({ ...prevState, ...attrs }));\n\n useEffect(() => setFilterParams(paramsFromQuery), [JSON.stringify(paramsFromQuery)]);\n\n const handleFilterClick = () => toggleModalVisible();\n\n const handleDateChange = ([start, end]) => {\n const fmt = \"yyyy-MM-dd'T'HH:mm:00\";\n updateFilterParams({\n date_start: start && format(start, fmt),\n date_end: end && format(end, fmt),\n page: null,\n })\n };\n const handleTimeChange = ([min, max]) => updateQueryParams({\n min_start_time: min,\n max_start_time: max,\n page: null,\n });\n const handleDistanceChange = val => updateFilterParams({ radius: val, page: null });\n const handleCategoryChange = val => updateFilterParams({ event_types: val, page: null });\n const handleAgeGroupChange = val => updateFilterParams({ age_groups: val, page: null });\n const handlePriceChange = val => updateQueryParams({ prices: val, page: null });\n const handleOnlineChange = val => updateFilterParams({\n is_online: val === ONLINE ? 't' : null,\n is_in_person: val === IN_PERSON ? 't' : null,\n page: null,\n });\n\n const handleApplyClick = () => {\n updateQueryParams(filterParams);\n toggleModalVisible(false);\n };\n\n const handleResetClick = () => {\n const params = {\n ...VALID_FILTER_PARAMS.reduce((result, param) => ({ ...result, [param]: null }), {}),\n page: null,\n };\n updateQueryParams(params);\n toggleModalVisible(false);\n };\n\n const handleCloseClick = () => {\n updateFilterParams(paramsFromQuery);\n toggleModalVisible(false);\n };\n\n if (typeof filterParams === 'undefined' || typeof queryParams === 'undefined') return null;\n const filterValues = parseFilterParams(filterParams);\n\n const filtersActive = !!queryParams && VALID_FILTER_PARAMS.some(val => hasOwnProperty(queryParams, val));\n\n let activeFilterCount = 0;\n const queryKeys = Object.keys(queryParams);\n ['radius', 'event_types', 'age_groups', 'prices'].forEach(p => {\n if (queryKeys.includes(p)) {\n activeFilterCount += 1;\n }\n });\n if (['date_start', 'date_end'].some(p => queryKeys.includes(p))) {\n activeFilterCount += 1;\n }\n if (['min_start_time', 'max_start_time'].some(p => queryKeys.includes(p))) {\n activeFilterCount += 1;\n }\n if (['is_online', 'is_in_person'].some(p => queryKeys.includes(p))) {\n activeFilterCount += 1;\n }\n\n const buttonText = activeFilterCount > 0 && {activeFilterCount};\n\n return (\n <>\n \n
\n \n \n \n\n \n {isEvent && (\n <>\n \n\n \n
\n \n );\n};\n\nFilterBarMobile.propTypes = {\n objectType: PropTypes.oneOf(['event', 'poi']),\n distanceUnits: PropTypes.oneOf([DISTANCE_UNITS_MI, DISTANCE_UNITS_KM]),\n};\n\nexport default FilterBarMobile;\n","import { useEffect, useRef } from 'react';\n\nexport default function useDisableScroll (isDisabled, selector = 'body') {\n const el = document.querySelector(selector);\n const origOverflowVal = useRef(el.style.overflow);\n\n useEffect(() => {\n el.style.overflow = isDisabled ? 'hidden' : origOverflowVal.current;\n }, [isDisabled]);\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useBootstrapBreakpoint } from 'hooks';\nimport FilterBar from 'components/FilterBar';\nimport FilterBarMobile from 'components/FilterBarMobile';\nimport { DISTANCE_UNITS_MI, DISTANCE_UNITS_KM } from 'components/filters';\n\nconst FilterWrapper = ({ objectType = 'event', distanceUnits = DISTANCE_UNITS_MI }) => {\n const isMobile = useBootstrapBreakpoint('down-md');\n const Component = isMobile ? FilterBarMobile : FilterBar;\n return Filters
\n\n
\n \n Date
\n\n
\n\n Time
\n\n
\n\n Category
\n\n
\n \n )}\n\n Distance
\n\n
\n\n {isEvent && (\n <>\n Type
\n\n
\n\n Age Group
\n\n
\n\n Price
\n\n
\n \n )}\n Do dolor nisi dolore laboris non non laborum minim eiusmod in anim id aute ullamco elit et. Esse proident elit aliquip ut aliqua sit sint exercitation quis ea. Irure dolor labore nostrud occaecat et eiusmod dolore est reprehenderit id reprehenderit consectetur deserunt ad. Labore aliquip incididunt dolor pariatur veniam nulla minim ex commodo irure amet commodo esse ut reprehenderit aliquip in.
Lorem ipsum consequat eiusmod occaecat sit magna esse dolore elit in. Lorem ipsum consequat est occaecat incididunt magna pariatur mollit dolor veniam voluptate.
',\n type: 'in_person',\n use_poi_times: false,\n price: 'low',\n number: 3,\n event_type: 45,\n start_date: '03/15/2023',\n start_time: '12:05 PM',\n poi: 543,\n age_group: ['baby', 'toddler'],\n event_venue_type: 'in_person',\n };\n\n const formMethods = useForm({\n mode: 'onTouched',\n defaultValues,\n });\n const onSubmit = data => {\n console.log(data); // eslint-disable-line\n setFormResult(Object.entries(data));\n formMethods.reset(defaultValues);\n };\n\n const multiCheckboxHorizontal = formMethods.watch('multi_checkbox_horizontal');\n const radioHorizontal = formMethods.watch('radio_horizontal');\n\n const handleResetClick = () => {\n setFormResult(null);\n formMethods.reset(defaultValues);\n };\n\n const handleFillClick = () => formMethods.reset(dummyValues, { keepDefaultValues: true });\n\n // Custom validation example: callback should return true if valid, error message string if not.\n const validateEventName = value => value !== 'forbidden name' || 'Invalid event name.';\n\n return (\n\n \n {labelText}\n \n )}\n\n {maskToggle && (\n \n
\n );\n};\n\nLabeledInput.propTypes = {\n labelText: PropTypes.string,\n containerClassName: PropTypes.string,\n hasError: PropTypes.bool,\n containerStyle: PropTypes.object,\n maskToggle: PropTypes.bool, // For password inputs, display a show/hide toggle button\n};\n\nexport default LabeledInput;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport queryString from 'query-string';\nimport { format } from 'date-fns';\nimport { urls } from 'app-constants';\nimport { useHistory } from 'hooks';\nimport { DateFilter } from 'components/filters';\nimport LocationSelect from 'components/LocationSelect';\n\nconst LandingPageForm = ({ className }) => {\n const { location: { queryParams } } = useHistory();\n\n const [dateVal, setDateVal] = useState(null);\n const handleDateChange = ([start, end]) => {\n setDateVal(start && end ? [start, end] : null);\n };\n\n const handleSubmit = () => {\n const queryObj = { ...queryParams };\n if (dateVal) {\n const [start, end] = dateVal;\n queryObj.date_start = start && format(start, 'yyyy-MM-dd');\n queryObj.date_end = end && format(end, 'yyyy-MM-dd');\n }\n const url = `${urls.events}?${queryString.stringify(queryObj)}`;\n window.location.href = url;\n };\n\n return (\n \n
\n );\n};\n\nLandingPageForm.propTypes = {\n className: PropTypes.string,\n};\n\nexport default LandingPageForm;\n","import React, { useState, useEffect, useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport mapboxgl from 'mapbox-gl';\nimport { useResizeDetector } from 'hooks';\nimport ReactMapGL, { NavigationControl } from 'react-map-gl';\nimport WebMercatorViewport from 'viewport-mercator-project';\nimport MapMarker from 'components/MapMarker';\n\nconst ListingsMap = ({\n mapStyle = 'mapbox://styles/mapbox/light-v10',\n mapboxToken,\n markers = [],\n focusedMarkerId,\n defaultViewport = {\n latitude: 0,\n longitude: 0,\n zoom: 1,\n },\n}) => {\n const mapRef = useRef();\n const [loaded, setLoaded] = useState(false);\n const [transitionDuration, setTransitionDuration] = useState(0);\n const [viewport, setViewport] = useState(defaultViewport);\n const { latitude, longitude, zoom } = viewport;\n\n // `focusedMarkerId` has its icon highlighted\n // `activeMarkerId` has its icon highlighted and info popup visible\n const [activeMarkerId, setActiveMarkerId] = useState(null);\n\n // When a marker is focused (hightlighted on event card hover)\n // or activated (clicked), move it to the top of the stack\n const cachedMarkers = useMemo(() => {\n const topMarkerId = focusedMarkerId || activeMarkerId;\n const topMarker = markers.find(m => m.id === topMarkerId);\n if (topMarker) {\n return [\n ...markers.filter(m => m.id !== topMarkerId),\n topMarker,\n ];\n } else {\n return markers;\n }\n }, [markers, focusedMarkerId, activeMarkerId]);\n\n // Close info popup when user hovers on a different event card\n useEffect(() => {\n if (focusedMarkerId !== activeMarkerId) {\n setActiveMarkerId(null);\n }\n }, [focusedMarkerId]);\n\n let { width, height, ref } = useResizeDetector();\n width = width && Math.round(width);\n height = height && Math.round(height);\n\n const handleViewportChange = (viewport, transitionDuration = 0) => {\n setTransitionDuration(transitionDuration);\n setViewport(viewport);\n };\n\n const inMapBounds = (longitude, latitude) => {\n const bounds = mapRef.current.getMap().getBounds();\n const lngInside = (longitude - bounds.getNorthEast().lng) * (longitude - bounds.getSouthWest().lng) < 0;\n const latInside = (latitude - bounds.getNorthEast().lat) * (latitude - bounds.getSouthWest().lat) < 0;\n return lngInside && latInside;\n };\n\n // Set the map bounds to ensure all markers are visible\n const fitToMarkers = markers => {\n setTransitionDuration(500);\n if (!markers.length) {\n setViewport({ ...defaultViewport });\n } else if (markers.length === 1) {\n const { longitude, latitude } = markers[0];\n setViewport({ longitude, latitude, zoom: 14 });\n } else {\n const bounds = new mapboxgl.LngLatBounds();\n const viewport = new WebMercatorViewport({ width, height });\n markers.forEach(m => bounds.extend([m.longitude, m.latitude]));\n const { latitude, longitude, zoom } = viewport.fitBounds(bounds.toArray(), { padding: 60 });\n setViewport({ latitude, longitude, zoom });\n }\n };\n\n useEffect(() => {\n if (loaded) fitToMarkers(markers);\n }, [JSON.stringify(markers.map(m => m.id)), loaded]);\n\n // If the focused marker is outside of the current map bounds, pan to it.\n useEffect(() => {\n if (loaded && focusedMarkerId) {\n const focusedMarker = cachedMarkers.find(m => m.id === focusedMarkerId);\n const { longitude, latitude } = focusedMarker;\n if (longitude && latitude && !inMapBounds(longitude, latitude)) {\n setTransitionDuration(500);\n setViewport({ ...viewport, longitude, latitude });\n }\n }\n }, [focusedMarkerId, loaded]);\n\n const renderedMarkers = useMemo(() => cachedMarkers.map(m => (\n \n
\n \n
\n \n \n
\n \n {showMap && (\n handleViewportChange(viewport)}\n onLoad={() => setLoaded(true)}\n onTransitionEnd={() => setTransitionDuration(0)}\n >\n handleViewportChange(viewport, 150)}\n />\n {renderedMarkers}\n \n )}\n
\n );\n};\n\nListingsMap.propTypes = {\n mapStyle: PropTypes.string,\n mapboxToken: PropTypes.string.isRequired,\n markers: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]).isRequired,\n latitude: PropTypes.number.isRequired,\n longitude: PropTypes.number.isRequired,\n popupContent: PropTypes.node,\n })),\n focusedMarkerId: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]),\n defaultViewport: PropTypes.shape({\n latitude: PropTypes.number,\n longitude: PropTypes.number,\n zoom: PropTypes.number,\n }),\n};\n\nexport default ListingsMap;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Icon from 'components/Icon';\n\nconst PoiMapPopup = ({\n className,\n style,\n id,\n name,\n shortAddress,\n absoluteUrl,\n}) => {\n const handleCardClick = () => window.location.href = absoluteUrl;\n\n return (\n \n
\n \n
\n {name}
\n\n\n
\n \n
\n {shortAddress}
\n …
\n : onChange(p)}>{p}
;\n });\n\n const handlePrevClick = curPage === 1 ? null : () => onChange(curPage - 1);\n const handleNextClick = curPage === numPages ? null : () => onChange(curPage + 1);\n\n return (\n \n
\n );\n};\n\nPagination.propTypes = {\n curPage: PropTypes.number.isRequired,\n numPages: PropTypes.number.isRequired,\n delta: PropTypes.number,\n onChange: PropTypes.func,\n};\n\nexport default Pagination;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ZeitcasterLogo = ({ width, height = 25, className, style }) => {\n return (\n \n
\n \n
\n {title}
\n{description}
\n \n \n \n
\n );\n};\n\nAdSenseCard.propTypes = {\n client: PropTypes.string,\n layoutKey: PropTypes.string,\n slot: PropTypes.number,\n format: PropTypes.string,\n};\n\nexport default AdSenseCard;\n","import { parseISO } from 'date-fns';\n\nexport const getStartTime = event => {\n try {\n const [startTimestamp] = event.nextEventOccurrence.timestamps[0];\n return parseISO(startTimestamp);\n } catch (e) {\n return null;\n }\n};\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { format, isSameDay } from 'date-fns';\nimport SearchAd from 'components/SearchAd';\nimport AdSenseCard from 'components/AdSenseCard';\nimport { getStartTime } from './getStartTime';\n\nconst StandardItemList = ({\n itemData,\n Card,\n isMobile,\n adIndex,\n adData,\n adSenseAdIndex,\n adSenseClient,\n adSenseLayoutKey,\n adSenseSlot,\n showDateDividers,\n savedEventIds,\n queryParams,\n onSetFilter,\n onHoverItem,\n onExitItem,\n}) => {\n return (itemData || []).map((item, idx) => {\n const ad = idx === adIndex && (\n \n
\n \n
\n );\n\n const adSenseAd = idx === adSenseAdIndex && (\n \n
\n );\n\n let divider;\n if (showDateDividers) {\n const startTime = getStartTime(item);\n const prevStartTime = getStartTime(itemData[idx - 1]) || new Date();\n if (startTime && prevStartTime && !isSameDay(startTime, prevStartTime)) {\n const dateText = format(startTime, 'EEEE, MMMM d');\n divider = {dateText}
\n {divider}\n onHoverItem(item.id)}\n onMouseLeave={() => onExitItem(item.id)}\n />\n
\n {ad}\n {adSenseAd}\n \n
\n\n \n
\n {name}
\n\n\n
\n \n
\n\n \n
\n {pointOfInterest.name}
\n evt.stopPropagation()}>\n {bookmarkButton}\n
\n \n {timeLabel} - {format(startTime, 'EEEE, MMM d')}\n
\n {itemsSorted.map((item) => {\n const classes = classNames({\n 'item-enhanced': item.enhancedListing,\n 'item-basic': !item.enhancedListing,\n 'mb-3': isMobile,\n });\n\n return item.enhancedListing ? (\n onHoverItem(item.id)}\n onMouseLeave={() => onExitItem(item.id)}\n />\n ) : (\n onHoverItem(item.id)}\n onMouseLeave={() => onExitItem(item.id)}\n />\n );\n })}\n
\n No events.
\n );\n\n const tieredLayout = objectType === 'event';\n\n return (\n \n \n {!!error && (\n \n\n {tieredLayout ? (\n setFocusedMarkerId(null)}\n />\n ) : (\n setFocusedMarkerId(null)}\n />\n )}\n\n {itemData && itemData.length > 0 && (\n
\n \n Failed to fetch listings. Please try your request again.\n
\n )}\n {savedSearchName && This is your saved search: {savedSearchName}
}\n \n
\n\n {noResultsMessage}\n {descText}
\n {(!isMobile && objectType === 'poi') &&\n
\n )}\n \n {firstItemIndex}–{lastItemIndex} of {pagination.totalItems} {objectTypeLabel}{pagination.totalItems !== 1 && 's'}\n
\n \n \n {mapViewport && !hideMap && (\n \n
\n {msg}
\n ));\n };\n const hasError = key => !!(errors[key] && errors[key].length > 0);\n\n const errorContainerStyles = {\n minHeight: 60,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'flex-end',\n };\n\n return (\n \n );\n};\n\nSignUpForm.propTypes = {\n onSuccess: PropTypes.func,\n};\n\nexport default SignUpForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst AppleIcon = ({ size = 32 }) => (\n \n
\n );\n};\n\nPromoWrapper.propTypes = {\n bulletPoints: PropTypes.arrayOf(PropTypes.string),\n footerContent: PropTypes.node,\n onLoginClick: PropTypes.func,\n children: PropTypes.node,\n};\n\nexport default PromoWrapper;\n","import React from 'react';\nimport { urls } from 'app-constants';\n\nconst SuccessMessage = () => (\n \n
\n \n
\n \n
\n \n \n Please create a free account or log in to access more of what Zeitcaster has to offer!\n
\n\n \n {bulletPoints.map((text, idx) => (\n
\n\n {footerContent || (\n \n )}\n \n •\n
\n ))}\n {text}
\n \n {children}\n
\n \n
\n);\n\nexport default SuccessMessage;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport queryString from 'query-string';\nimport Icon from 'components/Icon';\nimport Modal from 'components/Modal';\nimport LoginForm from './LoginForm';\nimport SignUpForm from './SignUpForm';\nimport { AppleButton, TwitterButton, GoogleButton, FacebookButton } from './serviceButtons';\nimport PromoWrapper from './PromoWrapper';\nimport SuccessMessage from './SuccessMessage';\n\nconst STAGE_SIGNIN_SOCIAL = 'signin-social';\nconst STAGE_SIGNIN_EMAIL = 'signin-email';\nconst STAGE_REGISTER_SOCIAL = 'register-social';\nconst STAGE_REGISTER_EMAIL = 'register-email';\nconst STAGE_REGISTER_SUCCESS = 'register-success';\n\nconst LoginView = ({\n modal,\n isOpen,\n showPromoWrapper,\n promoContent = {},\n onRequestClose,\n onLoginSuccess,\n isSocialAuthEnabled,\n defaultToRegister,\n nextUrl,\n}) => {\n const initialLoginStage = isSocialAuthEnabled ? STAGE_SIGNIN_SOCIAL : STAGE_SIGNIN_EMAIL;\n const initialRegisterStage = isSocialAuthEnabled ? STAGE_REGISTER_SOCIAL : STAGE_REGISTER_EMAIL;\n const initialStage = defaultToRegister ? initialRegisterStage : initialLoginStage;\n\n const [flowStage, setFlowStage] = useState(initialStage);\n useEffect(() => {\n setFlowStage(initialStage);\n }, [isOpen]);\n\n useEffect(() => {\n setFlowStage(initialStage);\n }, [isSocialAuthEnabled]);\n\n const handleSignUpFormSuccess = () => setFlowStage(STAGE_REGISTER_SUCCESS);\n\n if (!modal && !onLoginSuccess) {\n onLoginSuccess = () => {\n const { next } = queryString.parse(window.location.search);\n window.location.href = next || '/events/';\n }\n }\n\n const createLinkHandler = toStage => evt => {\n evt.preventDefault();\n setFlowStage(toStage);\n };\n\n const socialButtons = (\n <>\n \n \n\n
\n\n \n\n You are all set!
\n\n I'll do that later, \n let me browse events!\n
\n \n {socialButtons}\n\n \n\n setFlowStage(STAGE_SIGNIN_EMAIL)}\n >\n Log in with email\n \n\n
\n );\n break;\n case STAGE_SIGNIN_EMAIL:\n modalContent = (\n <>\n or
\n Don’t have an account? \n \n Create one for free\n \n
\n \n \n
\n ) : (\n \n Don’t have an account? \n \n Create one for free\n \n
\n )}\n \n );\n break;\n case STAGE_REGISTER_SOCIAL:\n titleText = 'Join Zeitcaster Today';\n modalContent = (\n \n {socialButtons}\n\n \n\n setFlowStage(STAGE_REGISTER_EMAIL)}\n >\n Sign up with email\n \n\n
\n );\n break;\n case STAGE_REGISTER_EMAIL:\n titleText = 'Join Zeitcaster Today';\n modalContent = (\n <>\n or
\n Already have an account? \n \n Log in\n \n
\n \n \n
\n ) : (\n \n Already have an account? \n \n Log in\n \n
\n )}\n \n );\n break;\n case STAGE_REGISTER_SUCCESS:\n titleText = '';\n modalContent = \n {content}\n
\n );\n\n const innerContent = wrap(\n <>\n {titleText && {titleText}
}\n {modalContent}\n ,\n );\n\n return modal ? (\n\n {width && (\n <>\n
\n );\n};\n\nResponsiveLocatorMap.propTypes = {\n aspectRatio: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.func,\n ]),\n ...LocatorMap.propTypes,\n};\n\nexport default ResponsiveLocatorMap;\n","import React from 'react';\nimport ResponsiveLocatorMap from './ResponsiveLocatorMap';\n\n/**\n * A helper component that provides custom aspectRatio values to ResponsiveLocatorMap.\n */\nconst DefaultLocatorMap = props => {\n const getAspectRatio = width => width < 400 ? 2 : 2.78;\n return \n {children}\n \n
\n );\n\n return createPortal(\n content,\n document.getElementById('messages'),\n );\n};\n\nMessage.propTypes = {\n level: PropTypes.oneOf(['info', 'success', 'warning', 'error']),\n children: PropTypes.node,\n};\n\nexport default Message;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { urls } from 'app-constants';\nimport { getCsrfToken, trackEvent } from 'utils';\nimport { useAuthRequired } from 'hooks';\nimport PillButton from 'components/PillButton';\nimport Message from 'components/Message';\nimport LoadingBubbles from 'components/LoadingBubbles';\n\n\nconst PoiClaimButton = ({ className, id, name }) => {\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [message, setMessage] = useState(null);\n\n const handleSubmitClaim = useAuthRequired(() => {\n setIsSubmitting(true);\n\n fetch(urls.claimVenue, {\n credentials: 'include',\n method: 'POST',\n headers: {\n 'X-CSRFToken': getCsrfToken(),\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ id }),\n })\n .then(response => {\n setIsSubmitting(false);\n if (!response.ok) throw new Error(response.statusText);\n return response;\n })\n .then(response => response.json())\n .then(data => {\n if (data.status === 'succeeded') {\n trackEvent('prod_submit_venue_claim_detail_page', {\n venueName: name,\n venueId: id,\n });\n setMessage({\n level: 'success',\n text: We have received your request to claim {name}. You will be notified by email when our team completes the verification process.,\n })\n } else {\n throw new Error(data.error);\n }\n })\n .catch(err => {\n console.error(err);\n setMessage({\n level: 'error',\n text: err.message === 'claimed'\n ? 'This venue has already been claimed.'\n : 'There was a problem submitting your claim. Please try again later.',\n });\n });\n });\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\nResultItem.propTypes = {\n pois: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n lon: PropTypes.number,\n lat: PropTypes.number,\n absoluteUrl: PropTypes.string,\n published: PropTypes.bool,\n street: PropTypes.string,\n shortAddress: PropTypes.string,\n })),\n mapZoom: PropTypes.number,\n mapboxToken: PropTypes.string,\n onResolveSuccess: PropTypes.func,\n};\n\nexport default ResultItem;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport camelize from 'camelize';\nimport queryString from 'query-string';\nimport { urls } from 'app-constants';\nimport { pluralize } from 'utils';\nimport Badge from 'components/Badge';\nimport LoadingOverlay from 'components/LoadingOverlay';\nimport Filters from './Filters';\nimport ResultItem from './ResultItem';\n\nconst PoiDuplicateReport = ({ countyChoices, mapboxToken }) => {\n const [isFetching, setIsFetching] = useState(false);\n const [reportData, setReportData] = useState(null);\n\n const handleRunReport = filterParams => {\n const queryParams = Object.entries(filterParams).reduce((result, [key, value]) => {\n if (value) result[key] = value;\n return result;\n }, {});\n const url = `${urls.poiDuplicateReportData}?${queryString.stringify(queryParams)}`;\n\n setIsFetching(true);\n fetch(url, { credentials: 'include' })\n .then(response => {\n setIsFetching(false);\n if (!response.ok) throw new Error(response.statusText);\n return response;\n })\n .then(response => response.json())\n .then(data => setReportData(camelize(data)))\n .catch(err => {\n setIsFetching(false);\n console.error(err);\n });\n };\n\n const handleResolve = poiIds => setReportData(os => ({\n ...os,\n results: os.results.filter(pois => !pois.every(p => poiIds.includes(p.id))),\n }));\n\n let curParams = [];\n let mapZoom = 16;\n if (reportData) {\n const { radius, county, nameThreshold, streetThreshold } = reportData;\n if (county) curParams.push(county);\n if (radius) curParams.push(`< ${radius} meters`);\n if (nameThreshold) curParams.push(`name ${nameThreshold}%`);\n if (streetThreshold) curParams.push(`address ${streetThreshold}%`);\n\n if (radius >= 150) mapZoom = 15;\n if (radius >= 200) mapZoom = 14;\n if (radius >= 500) mapZoom = 12;\n }\n\n const keyFromResult = pois => pois.map(p => p.id).join('_');\n\n return (\n \n
\n \n {pois.map(({ id, name, absoluteUrl, shortAddress }) => (\n
\n \n
\n ))}\n \n {name}\n
\n\n
\n \n
\n {shortAddress}
\n \n
\n \n
\n );\n};\n\nPoiDuplicateReport.propTypes = {\n countyChoices: PropTypes.array,\n mapboxToken: PropTypes.string,\n};\n\nexport default PoiDuplicateReport;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useGetAPI } from 'hooks';\nimport EventCard from 'components/EventCard';\nimport LoadingOverlay from 'components/LoadingOverlay';\nimport PillButton from 'components/PillButton';\n\n/**\n * Renders event listings associated with the specified poi.\n */\nconst PoiEventList = ({ poiId, titleContent, defaultDisplayCount = 4, excludeEventIds = [], bgClassName = 'bg-white' }) => {\n // Call API\n const path = `poi/${poiId}/events/`;\n const { data: eventData, isFetching, error } = useGetAPI(path);\n\n const [showAll, setShowAll] = useState(false);\n\n const allEvents = (eventData || []).filter(event => !excludeEventIds.includes(event.id));\n const visibleEvents = showAll ? allEvents : allEvents.slice(0, defaultDisplayCount);\n\n const includeShowMoreButton = allEvents.length > defaultDisplayCount && !isFetching && !showAll;\n\n return (\n \n
\n
\n \n
\n
\n Configure the filter parameters as desired and select \"Run Report.\"
\n ) : (\n \n
\n )}\n \n {pluralize(reportData.results.length, 'result')} for:\n {curParams.map(val =>
\n\n {reportData.results.map(pois => (\n \n setShowAll(true)}\n />\n )}\n
\n );\n};\n\nPoiEventList.propTypes = {\n poiId: PropTypes.number.isRequired,\n /** Optional HTML to display before event listings */\n titleContent: PropTypes.string,\n /** Initial number of events to display */\n defaultDisplayCount: PropTypes.number,\n /** IDs of events to exclude from display */\n excludeEventIds: PropTypes.arrayOf(PropTypes.number),\n bgClassName: PropTypes.string,\n};\n\nexport default PoiEventList;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport camelize from 'camelize';\nimport { format, parse, isBefore } from 'date-fns';\n\nconst DAYS_OF_WEEK = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];\n\nconst PoiOpenHours = ({ poiData }) => {\n const { openTimes } = camelize(poiData);\n const now = new Date();\n\n return openTimes.map(({ dayOfWeek, closed, timeStart, timeEnd }, idx) => {\n const [timeStartAsDate, timeEndAsDate] = [timeStart, timeEnd].map(t => t && parse(t, 'HH:mm:ss', now));\n const openTimesString = timeStartAsDate && timeEndAsDate && `${format(timeStartAsDate, 'p')} – ${format(timeEndAsDate, 'p')}`.replace(/:00/g, '');\n\n const day = DAYS_OF_WEEK[dayOfWeek];\n const isToday = day === format(now, 'E');\n const isOpenNow = isToday && isBefore(timeStartAsDate, now) && isBefore(now, timeEndAsDate);\n const isSecondaryRange = !!openTimes[idx - 1] && openTimes[idx - 1].dayOfWeek === dayOfWeek;\n\n return (\n \n Failed to fetch event listings. Please try your request again.\n
\n )}\n\n {titleContent && visibleEvents.length > 0 && }\n\n {visibleEvents.map(event => (\n \n
\n ))}\n\n {includeShowMoreButton && (\n \n
\n );\n });\n};\n\nPoiOpenHours.propTypes = {\n poiData: PropTypes.shape({\n open_times: PropTypes.arrayOf(PropTypes.shape({\n day_of_week: PropTypes.number,\n closed: PropTypes.bool,\n /** Time formatted as HH:MM:SS (24-hour clock) */\n time_start: PropTypes.string,\n /** Time formatted as HH:MM:SS (24-hour clock) */\n time_end: PropTypes.string,\n })),\n }),\n /** IANA Time Zone ID */\n timeZone: PropTypes.string,\n};\n\nexport default PoiOpenHours;\n","import React, { useEffect } from 'react';\nimport { useForm, FormProvider } from 'react-hook-form';\nimport { urls } from 'app-constants';\nimport { LiveSearchSelectField } from 'components/formFields';\n\nconst PoiSearchForm = () => {\n const formMethods = useForm();\n const val = formMethods.watch('venue');\n\n const openPoiPage = id => {\n fetch(`${urls.poiLivesearch}?id=${id}`)\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n return response;\n })\n .then(response => response.json())\n .then(data => {\n const [{ absolute_url }] = data;\n window.location.href = absolute_url;\n })\n .catch(err => {\n console.error(err);\n });\n };\n\n useEffect(() => {\n if (val) openPoiPage(val);\n }, [val]);\n\n return (\n {isSecondaryRange || day}
\n \n {closed ? 'CLOSED' : openTimesString}\n
\n {isOpenNow && Open Now!
}\n \n
\n {name}
\n\n
\n \n {error}\n
\n );\n }\n\n return (\n \n
\n \n );\n};\n\nSubscriptionPlanSelect.propTypes = {\n priceType: PropTypes.oneOf(['one_time', 'recurring']),\n value: PropTypes.string,\n onChange: PropTypes.func,\n};\n\nexport default SubscriptionPlanSelect;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useUserContext } from 'context';\nimport { useBootstrapBreakpoint } from 'hooks';\nimport PillButton from 'components/PillButton';\n\nconst AuthRequired = ({\n poiData,\n isNewVenue = false,\n isCancellable = false,\n onCancel,\n}) => {\n const { setAuthRequested } = useUserContext();\n const isMobile = useBootstrapBreakpoint('down-sm');\n\n if (!poiData && !isNewVenue) return null;\n\n const handleAuthClick = () => setAuthRequested({\n register: true,\n socialRedirect: window.location.pathname + (isNewVenue ? '%3Fn=1' : `%3Fvid=${poiData.id}`),\n });\n\n const buttonSizeClass = isMobile ? null : 'lg';\n\n const cancelButton = isCancellable && (\n \n {availOptions.map(({ id, name, description, price, basicListing, images }) => {\n const labelClasses = classNames({\n 'z-form-radio': true,\n selected: price.id === value,\n });\n\n const [imgUrl] = images || [];\n\n return (\n onChange(price.id, basicListing)}\n >\n
\n );\n })}\n \n
\n \n
\n {!!imgUrl && (\n \n
\n {name}
\n{description}
\n\n \n
\n {price.humanReadablePrice.replace(/(.00)? USD\\//, ' per ')}
\n\n \n
\n )}\n \n \n Thousands of locals and visitors search Zeitcaster every month for events like yours. Create a free account to put your venue on the map — it takes about two minutes — or log in if you’re already a member.\n
\n \n {cancelButton}\n
\n \n );\n};\n\nAuthRequired.propTypes = {\n poiData: PropTypes.object,\n isAuthenticated: PropTypes.bool,\n isNewVenue: PropTypes.bool,\n isCancellable: PropTypes.bool,\n onCancel: PropTypes.func,\n};\n\nexport default AuthRequired;\n","import React, { useState, useEffect, useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport camelize from 'camelize';\nimport { components } from 'react-select';\nimport { useForm, FormProvider } from 'react-hook-form';\nimport { urls } from 'app-constants';\nimport { useHistory, useTrackEventOnce } from 'hooks';\nimport { useUserContext } from 'context';\nimport { getCsrfToken, trackEvent } from 'utils';\nimport { EventForm, saveEventData } from 'components/EventEditForm';\nimport { LiveSearchSelectField } from 'components/formFields';\nimport LoadingBubbles from 'components/LoadingBubbles';\nimport PillButton from 'components/PillButton';\nimport PoiCard from 'components/PoiCard';\nimport SubscriptionPlanSelect from 'components/SubscriptionPlanSelect';\nimport AuthRequired from './AuthRequired';\n\nconst QUERY_MIN_CHARS = 3;\n\nconst SearchForm = ({\n poiData,\n producerLinkId,\n isAuthenticated,\n isSubmitting,\n errorData,\n categoryChoices,\n onRequestNew,\n onPoiChange,\n onClaimExisting,\n}) => {\n const [claimVenue, setClaimVenue] = useState(true);\n\n const formMethods = useForm();\n const poiVal = formMethods.watch('venue');\n\n const getPoiData = (id, onSuccess = onPoiChange) => {\n fetch(`${urls.poiDetailBase}${id}/?u=1`)\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n return response;\n })\n .then(response => response.json())\n .then(data => onSuccess(camelize(data)))\n .catch(err => {\n console.error(err);\n onPoiChange(null);\n });\n };\n\n useEffect(() => {\n if (poiVal) {\n getPoiData(poiVal);\n } else {\n onPoiChange(null);\n }\n }, [poiVal]);\n\n const { location: { queryParams }, updateQueryParams } = useHistory();\n const { vid, n } = queryParams || {};\n useEffect(() => {\n if (vid) {\n formMethods.setValue('venue', vid);\n updateQueryParams({ vid: null });\n } else if (n) {\n onRequestNew();\n updateQueryParams({ n: null });\n }\n }, [vid, n]);\n\n const handleRequestNew = useCallback(evt => {\n evt.preventDefault();\n onRequestNew();\n }, []);\n\n const trackStartClaim = useTrackEventOnce('prod_start_venue_claim', {\n venueId: poiData?.id,\n venueName: poiData?.name,\n });\n const handleFocus = () => {\n trackStartClaim();\n };\n\n const handleSupportLinkClick = () => trackEvent('prod_contact_support', {\n venueId: poiData?.id,\n venueName: poiData?.name,\n });\n\n const [eventFormIsFetching, setEventFormIsFetching] = useState(false);\n\n const handleEventFormCancel = () => {\n formMethods.setValue('venue', '');\n setTimeout(() => window.scrollTo(0, 0), 200);\n };\n\n const redirectToCheckout = linkId => {\n // redirect to stripe checkout\n fetch(urls.stripeCheckout, {\n credentials: 'include',\n method: 'POST',\n headers: {\n 'X-CSRFToken': getCsrfToken(),\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n price_id: selectedPlanId,\n link_id: linkId,\n }),\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(response.statusText);\n } else {\n response.json().then(data => window.location.href = data.url);\n }\n return response;\n })\n .catch(err => {\n console.error(err);\n });\n };\n\n const trackSubmitEvent = useTrackEventOnce('prod_submit_new_event', {\n venueId: poiData?.id,\n venueName: poiData?.name,\n venueClaimed: claimVenue,\n });\n const handleEventFormSubmit = (payload, onValidationError) => {\n trackSubmitEvent({\n eventName: payload.name,\n });\n\n if (claimVenue) { // Recurring subscription flow\n const doSaveEventData = linkId => saveEventData(payload, {\n setIsFetching: setEventFormIsFetching,\n onValidationError,\n onSuccess: () => redirectToCheckout(linkId),\n });\n\n if (producerLinkId) {\n doSaveEventData(producerLinkId)\n } else {\n // claim the venue\n onClaimExisting(poiData.id, ({ id: linkId }) => {\n // save the event if claim succeeds\n doSaveEventData(linkId)\n });\n }\n } else { // One-off payment flow\n saveEventData({ ...payload, price_id: selectedPlanId }, {\n setIsFetching: setEventFormIsFetching,\n usePublicEndpoint: true,\n onValidationError,\n onSuccess: data => window.location.href = data.payment.checkoutUrl,\n });\n }\n };\n\n const trackSkipEvent = useTrackEventOnce('prod_skip_event', {\n venueId: poiData?.id,\n venueName: poiData?.name,\n });\n const handleCheckoutClick = () => {\n trackSkipEvent();\n if (producerLinkId) {\n redirectToCheckout(producerLinkId)\n } else {\n // claim the venue\n onClaimExisting(poiData.id, ({ id: linkId }) => {\n // save the event if claim succeeds\n redirectToCheckout(linkId)\n });\n }\n };\n\n const [selectedPlanId, setSelectedPlanId] = useState(null);\n const [isBasicListing, setIsBasicListing] = useState(true);\n const handlePlanSelect = (val, basicListing) => {\n setSelectedPlanId(val);\n setIsBasicListing(basicListing);\n };\n\n /* eslint-disable react/prop-types */\n // eslint-disable-next-line react/display-name\n const CustomMenuList = useMemo(() => props => {\n const { MenuList } = components;\n const showSubmitOpt = props.selectProps.inputValue.length >= QUERY_MIN_CHARS;\n\n return (\n <>\n \n \n Don’t see your venue listed? Click here to add it to Zeitcaster.\n \n
\n )}\n \n );\n }, [handleRequestNew]);\n /* eslint-enable react/prop-types */\n\n const authRequired = !!poiData && !isAuthenticated && (\n \n {producerQuotas.find(q => q.poi.id === poiVal) ? (\n This venue has an active subscription. Please visit the producer dashboard to manage your events and venue profile.\n ) : (\n Oops! This venue has already been claimed. If you believe this is an error, please contact help@zeitcaster.com.\n )}\n
\n );\n }\n\n useEffect(() => {\n setSelectedPlanId(null);\n setIsBasicListing(true);\n }, [claimVenue]);\n\n let claimField;\n if (!isClaimed && !authRequired) {\n claimField = (\n \n
\n setClaimVenue(true)}\n >\n
\n \n \n );\n }\n\n const showEventForm = !!poiData && !isClaimed && isAuthenticated;\n const trackStartEvent = useTrackEventOnce('prod_start_new_event', {\n venueId: poiData?.id,\n venueName: poiData?.name,\n });\n useEffect(() => {\n if (showEventForm) trackStartEvent();\n }, [showEventForm]);\n\n const eventForm = showEventForm && (\n \n
How are you connected to {poiData?.name}?
\n\n setClaimVenue(false)}\n >\n
\n\n I’m promoting an event here
\nI’m a performer, artist, or promoter posting a single event at this venue.
\nI manage this venue
\nI own or operate this venue and want to list its events, manage its page, and see stats.
\n\n
\n {claimVenue ? (\n <>\n
\n
\n )}\n renderPostForm={({ formHasErrors, formIsValid }) => (\n \n {claimVenue ? (\n <>\n
Membership Options
\nYour user account is free. Membership lists your events and gives you the venue tools to manage them.
\n \n ) : (\n <>\nListing Options
\nYour user account is free. You only pay to promote this one event.
\n \n )}\n\n
\n
\n
\n )}\n />\n );\n\n return (\n <>\n \n
\n
\n \n {formHasErrors && \n {(isSubmitting || eventFormIsFetching) ? \n {(isSubmitting || eventFormIsFetching)\n ?
\n Please correct form errors before submitting.
}\n {formIsValid && !selectedPlanId && (\n Please select a subscription plan to continue.
\n )}\n {claimVenue && (\n \n \n
\n \n
\n\n {authRequired}\n {claimedMsg}\n {claimField}\n {eventForm}\n \n )}\n \n );\n};\n\nSearchForm.propTypes = {\n poiData: PropTypes.object,\n producerLinkId: PropTypes.number,\n isAuthenticated: PropTypes.bool,\n isSubmitting: PropTypes.bool,\n errorData: PropTypes.shape({\n status: PropTypes.oneOf(['failed']).isRequired,\n error: PropTypes.string.isRequired,\n detail: PropTypes.string.isRequired,\n pendingUserClaimId: PropTypes.number,\n }),\n categoryChoices: PropTypes.arrayOf(PropTypes.array),\n onRequestNew: PropTypes.func,\n onPoiChange: PropTypes.func,\n onClaimExisting: PropTypes.func,\n};\n\nexport default SearchForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport AuthRequired from './AuthRequired';\nimport PoiEditForm from 'components/PoiEditForm';\n\nconst RequestForm = ({\n isAuthenticated,\n regionChoices,\n timezoneChoices,\n mapboxToken,\n poiTypeChoices,\n onSubmit,\n onCancel,\n}) => {\n if (!isAuthenticated) {\n return (\n \n
\n );\n};\n\nRequestForm.propTypes = {\n isAuthenticated: PropTypes.bool,\n regionChoices: PropTypes.arrayOf(PropTypes.array),\n timezoneChoices: PropTypes.arrayOf(PropTypes.array),\n mapboxToken: PropTypes.string,\n poiTypeChoices: PropTypes.arrayOf(PropTypes.array),\n onSubmit: PropTypes.func,\n onCancel: PropTypes.func,\n};\n\nexport default RequestForm;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport camelize from 'camelize';\nimport { useUserContext } from 'context';\nimport { useHistory, usePrevious, useToggle } from 'hooks';\nimport { getCsrfToken, trackEvent } from 'utils';\nimport { urls } from 'app-constants';\nimport SearchForm from './SearchForm';\nimport RequestForm from './RequestForm';\n\n// const SUCCESS_TYPE_CLAIM = 'claim';\n// const SUCCESS_TYPE_SUBMIT_VENUE = 'submit';\n\nconst ProducerOnboardingForm = ({\n headerLabel = 'List Your Event',\n regionChoices,\n timezoneChoices,\n mapboxToken,\n poiTypeChoices,\n categoryChoices,\n}) => {\n const { id: userId } = useUserContext();\n const [poiData, setPoiData] = useState(null);\n const prevPoiData = usePrevious(poiData);\n\n const [showRequestForm, toggleRequestForm] = useToggle(false);\n\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [errorData, setErrorData] = useState(null);\n useEffect(() => {\n setErrorData(null)\n }, [poiData]);\n\n const doClaim = (id, onSuccess) => {\n setIsSubmitting(true);\n setErrorData(null);\n\n fetch(urls.claimVenue, {\n credentials: 'include',\n method: 'POST',\n headers: {\n 'X-CSRFToken': getCsrfToken(),\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ id, notify: false }),\n })\n .then(response => {\n setIsSubmitting(false);\n if (!response.ok) throw new Error(response.statusText);\n return response;\n })\n .then(response => response.json())\n .then(data => onSuccess(data))\n .catch(err => {\n console.error(err);\n });\n };\n\n const handleClaimExisting = (id, onSuccess) => doClaim(id, data => {\n if (data.status === 'succeeded') {\n onSuccess(data);\n trackEvent('prod_submit_venue_claim', {\n venueName: poiData.name,\n venueId: poiData.id,\n });\n } else {\n const err = camelize(data);\n setErrorData(err);\n if (err?.pendingUserClaimId) {\n onSuccess({ id: err.pendingUserClaimId});\n trackEvent('prod_submit_venue_claim', {\n venueName: poiData.name,\n venueId: poiData.id,\n });\n }\n }\n });\n\n const { updateQueryParams } = useHistory();\n const [producerLinkId, setProducerLinkId] = useState(null);\n\n const handleSubmitNew = data => {\n doClaim(data.id, plData => {\n updateQueryParams({ vid: data.id });\n setProducerLinkId(plData.id);\n toggleRequestForm(false);\n setTimeout(() => window.scrollTo(0, 0), 200);\n });\n\n trackEvent('prod_submit_new_venue', {\n venueName: data.name,\n venueId: data.id,\n });\n };\n\n useEffect(() => {\n if (!poiData && prevPoiData) setProducerLinkId(null);\n }, [poiData]);\n\n useEffect(() => {\n if (errorData?.pendingUserClaimId) setProducerLinkId(errorData.pendingUserClaimId);\n }, [errorData]);\n\n const handleCancelRequest = () => {\n toggleRequestForm(false);\n setTimeout(() => window.scrollTo(0, 0), 200);\n };\n\n const form = showRequestForm ? (\n \n \n \n {/*{successMsg || form}*/}\n {form}\n
\n );\n};\n\nProducerOnboardingForm.propTypes = {\n headerLabel: PropTypes.string,\n regionChoices: PropTypes.arrayOf(PropTypes.array),\n timezoneChoices: PropTypes.arrayOf(PropTypes.array),\n mapboxToken: PropTypes.string,\n poiTypeChoices: PropTypes.arrayOf(PropTypes.array),\n categoryChoices: PropTypes.arrayOf(PropTypes.array),\n};\n\nexport default ProducerOnboardingForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { urls } from 'app-constants';\nimport DropdownButton from 'components/DropdownButton';\nimport EventCard from 'components/EventCard';\nimport Icon from 'components/Icon';\n\nconst ProducerEventCard = ({ eventData }) => {\n const renderActionButtons = () => (\n {headerLabel}
\n\n \n View\n \n \n Edit\n \n \n Delete\n \n
\n \n );\n\n return (\n \n
\n );\n\n message = `${quota.used} of ${pluralize(quota.allowed, 'active event')}`;\n } else {\n message = 'No event limit';\n }\n\n return (\n \n {multiVenue &&
\n );\n });\n\n return producerQuotas.length > 0 && (\n {poi.name}
}\n\n \n {graph}\n\n
\n \n {message}\n
\n\n \n\n {isBillingContact && (\n Manage subscription »\n )}\n \n {rows}\n
\n );\n};\n\nQuotaIndicator.propTypes = {\n currentOnly: PropTypes.bool,\n};\n\nexport default QuotaIndicator;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { v4 as uuid4 } from 'uuid';\nimport { urls } from 'app-constants';\nimport { useUserContext } from 'context';\nimport { useBootstrapBreakpoint, useGetAPI, useHistory, usePrevious } from 'hooks';\nimport DropdownButton from 'components/DropdownButton';\nimport Icon from 'components/Icon';\nimport LoadingOverlay from 'components/LoadingOverlay';\nimport ProducerEventCard from 'components/ProducerEventCard';\nimport CtaWithGraphic from 'components/CtaWithGraphic';\nimport QuotaIndicator from 'components/QuotaIndicator';\n\nconst ORDER_CREATED = '-created';\nconst ORDER_DATE = 'date';\nconst DEFAULT_ORDER = ORDER_CREATED;\n\nconst ProducerEventList = ({ emptyImgUrl }) => {\n const { location: { queryParams }, updateQueryParams } = useHistory();\n const { ordering = DEFAULT_ORDER } = queryParams || {};\n\n const { producerQuotas = [] } = useUserContext();\n const activeQuotaObj = producerQuotas.find(pq => pq.isCurrentActive);\n const showAddButton = activeQuotaObj?.quota.canAdd;\n\n // Call API\n const [refreshKey, setRefreshKey] = useState(uuid4());\n let path;\n if (typeof queryParams !== 'undefined') path = urls.apiProducerEventList;\n const apiParams = { ordering };\n const { data: eventData, isFetching, error } = useGetAPI(path, {\n queryObject: apiParams,\n fullPath: true,\n extraDeps: [refreshKey],\n });\n\n const prevQuotaObj = usePrevious(activeQuotaObj);\n useEffect(() => {\n if (activeQuotaObj && prevQuotaObj) {\n setRefreshKey(uuid4());\n }\n }, [activeQuotaObj]);\n\n // Data cached in local state so we can update the UI immediately when an item is deleted.\n const [cachedEventData, setCachedEventData] = useState();\n useEffect(() => setCachedEventData(eventData), [eventData]);\n\n const orderingMenuRef = useRef();\n const handleOrderChange = (evt, ordering) => {\n evt.preventDefault();\n updateQueryParams({ ordering });\n orderingMenuRef.current.close();\n };\n\n // Reset scroll position when fetching new data\n useEffect(() => window.scrollTo(0, 0), [isFetching]);\n\n const isMobile = useBootstrapBreakpoint('down-md');\n\n const countLabel = !cachedEventData ? 'My' : `${cachedEventData.length} Upcoming`;\n\n const quotaMsg = activeQuotaObj?.quota.canAdd === false && (\n To create additional events for this venue, you must either delete existing events or upgrade your subscription package.
\n );\n\n const orderingButtonLabel = isMobile ? null : (\n <>\n Sort by: \n \n {ordering === ORDER_CREATED && 'Last added'}\n {ordering === ORDER_DATE && 'Date'}\n \n \n );\n\n return (\n \n \n {quotaMsg}\n\n {!isMobile && (\n \n\n {(cachedEventData || []).map(event => (\n
\n );\n};\n\nProducerEventList.propTypes = {\n emptyImgUrl: PropTypes.string,\n};\n\nexport default ProducerEventList;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport queryString from 'query-string';\nimport { addDays, format, formatISO } from 'date-fns';\nimport { urls } from 'app-constants';\nimport { useGetAPI } from 'hooks';\nimport EventCard from 'components/EventCard';\nimport LoadingOverlay from 'components/LoadingOverlay';\n\n/**\n * Renders \"related\" events for display on event/POI detail pages.\n */\nconst RelatedEventList = ({\n filterParams = {},\n fallbackFilterParams,\n titleContent,\n displayCount = 3,\n excludeEventIds = [],\n excludePoiIds = [],\n}) => {\n // Call API\n const [apiParams, setApiParams] = useState({ ...filterParams });\n const { data: eventData, isFetching, error } = useGetAPI('events/', { queryObject: apiParams });\n\n const allEvents = (eventData || []).filter(event => (\n !excludeEventIds.includes(event.id) && !excludePoiIds.includes(event.pointOfInterest.id)\n ));\n const visibleEvents = allEvents.slice(0, displayCount);\n\n useEffect(() => {\n if (!isFetching && eventData && !allEvents.length && !error && fallbackFilterParams) {\n setApiParams({ ...fallbackFilterParams });\n }\n }, [eventData, allEvents.length, isFetching, error, fallbackFilterParams]);\n\n const includeShowMoreButton = allEvents.length > displayCount && !isFetching;\n /* eslint-disable camelcase */\n const date_start = formatISO(new Date());\n const date_end = format(addDays(new Date(), 29), 'yyyy-MM-dd');\n /* eslint-enable */\n const qs = queryString.stringify({ ...apiParams, date_start, date_end }, {\n arrayFormat: 'bracket',\n skipNull: true,\n skipEmptyString: true,\n });\n const moreUrl = `${urls.events}?${qs}`;\n\n return (\n \n Add Event\n )}\n
\n )}\n {countLabel} Event{(cachedEventData || []).length !== 1 && 's'}
\n {showAddButton && (\n\n {isMobile && (\n <>\n Add Event\n )}\n \n )}\n
\n\n {!!error && (\n \n {countLabel} Event{countLabel !== 1 && 's'}\n
\n \n {showAddButton && (\n\n handleOrderChange(evt, ORDER_CREATED)}\n >\n handleOrderChange(evt, ORDER_DATE)}\n >\n
\n \n \n Failed to fetch results. Please try your request again.\n
\n )}\n \n
\n ))}\n \n )}\n \n
\n );\n};\n\nRelatedEventList.propTypes = {\n /** Query parameters passed through to API call */\n filterParams: PropTypes.object,\n /** Fallback query parameters passed through to API call, if initial query returns no results */\n fallbackFilterParams: PropTypes.object,\n /** Optional HTML to display before event listings */\n titleContent: PropTypes.string,\n /** Number of events to display */\n displayCount: PropTypes.number,\n /** IDs of events to exclude from display */\n excludeEventIds: PropTypes.arrayOf(PropTypes.number),\n /** IDs of POIs to exclude from display */\n excludePoiIds: PropTypes.arrayOf(PropTypes.number),\n};\n\nexport default RelatedEventList;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { urls } from 'app-constants';\nimport { getCsrfToken } from 'utils';\nimport CardDeletionMenu from 'components/CardDeletionMenu';\nimport EventCard from 'components/EventCard';\n\nconst SavedEventCard = ({\n eventData,\n onDeleteRequest = () => {},\n onDeleteSuccess = () => {},\n onDeleteFailure = () => {},\n}) => {\n const [isDeleting, setIsDeleting] = useState(false);\n\n const handleDeleteClick = () => {\n setIsDeleting(true);\n\n fetch(`${urls.toggleSavedEventBase}${eventData.id}/`, {\n credentials: 'include',\n method: 'POST',\n headers: { 'X-CSRFToken': getCsrfToken() },\n })\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n return response;\n })\n .then(response => response.json())\n .then(data => {\n if (data.saved) {\n setIsDeleting(false);\n onDeleteFailure();\n } else {\n onDeleteSuccess();\n }\n })\n .catch(err => {\n console.error(err);\n setIsDeleting(false);\n onDeleteFailure(err);\n });\n };\n\n const renderActionButtons = ({ shareButton, calendarButton }) => (\n <>\n {shareButton}\n {calendarButton}\n \n Failed to fetch event listings. Please try your request again.\n
\n )}\n\n {titleContent && visibleEvents.length > 0 && }\n\n {visibleEvents.map(event => (\n \n
\n ))}\n\n {includeShowMoreButton && (\n \n Explore More\n
\n )}\n \n \n {!isMobile && \n\n {(cachedEventData || []).map(savedEvent => (\n
\n );\n};\n\nSavedEventList.propTypes = {\n emptyImgUrl: PropTypes.string,\n distanceUnits: PropTypes.oneOf([DISTANCE_UNITS_MI, DISTANCE_UNITS_KM]),\n};\n\nexport default SavedEventList;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport queryString from 'query-string';\nimport { useBootstrapBreakpoint, useGetAPI } from 'hooks';\nimport EventCard from 'components/EventCard';\nimport LoadingOverlay from 'components/LoadingOverlay';\nimport CircleButtonNext from 'components/CircleButtonNext';\nimport CircleButtonPrev from 'components/CircleButtonPrev';\n\nconst SavedSearchWidget = ({\n searchUrl,\n apiUrl,\n maxResults = 12,\n buttonText,\n}) => {\n const params = {\n ...queryString.parse((new URL(apiUrl, window.location.origin)).search),\n page_size: maxResults,\n };\n const url = apiUrl ? 'events/' : undefined;\n const { data: eventData, isFetching, error } = useGetAPI(url, { queryObject: params });\n\n // Pagination\n const ltLg = useBootstrapBreakpoint('down-lg');\n const ltMd = useBootstrapBreakpoint('down-md');\n const ltSm = useBootstrapBreakpoint('down-sm');\n let perPage = 4;\n if (ltLg) perPage = 3;\n if (ltMd) perPage = 2;\n if (ltSm) perPage = 1;\n\n const [activeIndex, setActiveIndex] = useState(0);\n let handlePrevClick;\n let handleNextClick;\n if (activeIndex > 0) {\n handlePrevClick = () => setActiveIndex(os => Math.max(os - perPage, 0));\n }\n if (activeIndex + perPage < (eventData || []).length) {\n handleNextClick = () => setActiveIndex(os => os + perPage);\n }\n\n const wrapStyle = {\n '--cols': perPage,\n '--active-index': activeIndex,\n };\n\n return !error && !!apiUrl && (\n {countLabel} Event{(cachedEventData || []).length !== 1 && 's'}
}\n\n {isMobile && (\n
\n\n {!!error && (\n \n {countLabel} Event{countLabel !== 1 && 's'}\n
\n )}\n\n handleOrderChange(evt, ORDER_CREATED)}\n >\n handleOrderChange(evt, ORDER_DATE)}\n >\n handleOrderChange(evt, ORDER_DISTANCE)}\n >\n
\n \n \n Failed to fetch results. Please try your request again.\n
\n )}\n\n {!!deletionError && (\n \n {deletionError}\n
\n )}\n \n handleDeleteSuccess(savedEvent.event.id)}\n />\n
\n ))}\n \n )}\n \n
\n );\n};\n\nSavedSearchWidget.propTypes = {\n searchUrl: PropTypes.string,\n apiUrl: PropTypes.string.isRequired,\n maxResults: PropTypes.number,\n buttonText: PropTypes.string,\n};\n\nexport default SavedSearchWidget;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { urls } from 'app-constants';\nimport { useBootstrapBreakpoint, useGetAPI, useHistory } from 'hooks';\nimport { DISTANCE_UNITS_MI, DISTANCE_UNITS_KM } from 'components/filters';\nimport DropdownButton from 'components/DropdownButton';\nimport Icon from 'components/Icon';\nimport LoadingOverlay from 'components/LoadingOverlay';\nimport PoiCard from 'components/PoiCard';\nimport CtaWithGraphic from 'components/CtaWithGraphic';\n\nconst ORDER_CREATED = '-created';\nconst ORDER_DISTANCE = 'distance';\nconst DEFAULT_ORDER = ORDER_CREATED;\n\nconst SavedPoiList = ({ emptyImgUrl, distanceUnits = DISTANCE_UNITS_MI }) => {\n const { location: { queryParams }, updateQueryParams } = useHistory();\n const { address_id: addressId, latitude, longitude, ordering = DEFAULT_ORDER } = queryParams || {};\n\n const waitForGeoLoc = addressId === 'current' && !latitude;\n\n // Call API\n let path;\n if (typeof queryParams !== 'undefined' && !waitForGeoLoc) path = urls.savedPoiList;\n const apiParams = { latitude, longitude, ordering };\n const { data: poiData, isFetching, error } = useGetAPI(path, { queryObject: apiParams, fullPath: true });\n\n // Data cached in local state so we can update the UI immediately when an item is deleted.\n const [cachedPoiData, setCachedPoiData] = useState();\n useEffect(() => setCachedPoiData(poiData), [poiData]);\n\n const [deletionError, setDeletionError] = useState(null);\n const handleDeleteFailure = errorText => setDeletionError(`Failed to delete item: ${errorText || 'unknown error'}`);\n const handleDeleteSuccess = poiId => setCachedPoiData(oldState => oldState.filter(({ pointOfInterest: { id } }) => id !== poiId));\n\n const orderingMenuRef = useRef();\n const handleOrderChange = (evt, ordering) => {\n evt.preventDefault();\n updateQueryParams({ ordering });\n orderingMenuRef.current.close();\n };\n\n // Reset scroll position when fetching new data\n useEffect(() => window.scrollTo(0, 0), [isFetching]);\n\n const isMobile = useBootstrapBreakpoint('down-md');\n\n const countLabel = !cachedPoiData ? 'Saved' : cachedPoiData.length;\n\n const orderingButtonLabel = isMobile ? null : (\n <>\n Sort by: \n {ordering === ORDER_DISTANCE ? 'Distance' : 'Last added'}\n \n );\n\n return (\n \n {(eventData || []).map(item => (\n
\n \n
\n \n
\n\n {!!searchUrl && !!buttonText && {buttonText}}\n \n \n {!isMobile && \n\n {(cachedPoiData || []).map(savedPoi => (\n
\n );\n};\n\nSavedPoiList.propTypes = {\n emptyImgUrl: PropTypes.string,\n distanceUnits: PropTypes.oneOf([DISTANCE_UNITS_MI, DISTANCE_UNITS_KM]),\n};\n\nexport default SavedPoiList;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { urls } from 'app-constants';\nimport { useToggle } from 'hooks';\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\nimport LoadingOverlay from 'components/LoadingOverlay';\nimport Modal from 'components/Modal';\n\nconst COUNT_OPTIONS = [10, 20, 50];\nconst DEFAULT_COUNT = 10;\n\nconst SavedSearchTextExport = ({ searchId, calendarId, utmCampaign, utmSource = 'search-export', isOpen, onRequestClose }) => {\n const [copied, toggleCopied] = useToggle(false);\n const [isFetching, setIsFetching] = useState(false);\n const [eventData, setEventData] = useState(null);\n\n const [count, setCount] = useState(DEFAULT_COUNT);\n\n // Reset \"copied\" state when modal is closed.\n useEffect(() => {\n if (isOpen) {\n fetchData();\n } else {\n toggleCopied(false);\n setEventData(null);\n }\n }, [isOpen, count]);\n\n const fetchData = () => {\n setIsFetching(true);\n\n fetch(`${urls.savedSearchBase}${searchId}/results/?count=${count}`, {\n credentials: 'include',\n })\n .then(response => {\n setIsFetching(false);\n if (!response.ok) throw new Error(response.statusText);\n return response.json();\n })\n .then(data => setEventData(data))\n .catch(err => {\n console.error(err);\n setEventData(null);\n });\n };\n\n const resultText = (eventData || []).map(event => (\n [\n event.name,\n event.point_of_interest.name,\n event.next_event_occurrence_formatted,\n `${window.location.origin}${event.absolute_url}?utm_source=${utmSource}&utm_campaign=${utmCampaign || searchId}`,\n ].join('\\n')\n )).join('\\n\\n');\n\n return (\n {countLabel} Venue{(cachedPoiData || []).length !== 1 && 's'}
}\n\n {isMobile && (\n
\n\n {!!error && (\n \n {countLabel} Venue{countLabel !== 1 && 's'}\n
\n )}\n\n handleOrderChange(evt, ORDER_CREATED)}\n >\n handleOrderChange(evt, ORDER_DISTANCE)}\n >\n
\n \n \n Failed to fetch results. Please try your request again.\n
\n )}\n\n {!!deletionError && (\n \n {deletionError}\n
\n )}\n \n handleDeleteSuccess(savedPoi.pointOfInterest.id)}\n />\n
\n ))}\n \n )}\n Export Saved Search Results
\n\n {!!eventData && eventData.length === 0 && (\n\n No results found for this search.\n
\n )}\n\n \n
\n \n );\n};\n\nexport default SavedSearchTextExport;\n\nSavedSearchTextExport.propTypes = {\n searchId: PropTypes.number,\n calendarId: PropTypes.number,\n utmSource: PropTypes.string,\n utmCampaign: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]),\n isOpen: PropTypes.bool,\n onRequestClose: PropTypes.func,\n};\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { formatDistanceToNow, isValid, parseISO, parse as parseDate } from 'date-fns';\nimport { dateRangeLabels, defaultLocations, urls } from 'app-constants';\nimport { useUserContext } from 'context';\nimport { useToggle } from 'hooks';\nimport { formatDateRange, getCsrfToken } from 'utils';\nimport { DISTANCE_UNITS_LABELS } from 'components/filters';\nimport TruncateText from 'components/TruncateText';\nimport CardDeletionMenu from 'components/CardDeletionMenu';\nimport SavedSearchTextExport from 'components/SavedSearchTextExport';\nimport Icon from 'components/Icon';\nimport LoadingBubbles from 'components/LoadingBubbles';\n\nconst SavedSearchCard = ({\n className,\n useCompactStyle,\n id,\n searchName,\n searchUrl,\n isPublic,\n defaultLocId,\n address,\n radius,\n namedDate,\n dateStart,\n dateEnd,\n timeLabel,\n keyword,\n eventSetting,\n eventTypeLabels,\n ageGroupLabels,\n priceLabels,\n created,\n updated,\n metaLabel = 'updated',\n onDeleteSuccess = () => {},\n onDeleteFailure = () => {},\n onRenameSuccess = () => {},\n onRenameFailure = () => {},\n onTogglePublicSuccess = () => {},\n}) => {\n const [isDeleting, setIsDeleting] = useState(false);\n\n const { distanceUnits, isStaff, hasWagtailAccess } = useUserContext();\n const distanceUnitsLabel = DISTANCE_UNITS_LABELS[distanceUnits];\n\n const handleCardClick = () => window.location.href = searchUrl;\n const handleTitleClick = evt => evt.stopPropagation(); // Don't break cmd+click\n\n const [isEditing, setIsEditing] = useState(false);\n const [isSaving, setIsSaving] = useState(false);\n const [titleValue, setTitleValue] = useState(searchName);\n useEffect(() => setTitleValue(searchName), [searchName]);\n\n const dateCreated = parseISO(created);\n const dateUpdated = parseISO(updated);\n\n const handleEditClick = evt => {\n evt.stopPropagation();\n setIsEditing(true);\n };\n\n const handleTitleFormSubmit = evt => {\n evt && evt.preventDefault();\n setIsSaving(true);\n\n fetch(`${urls.savedSearchBase}${id}/`, {\n credentials: 'include',\n method: 'PATCH',\n headers: {\n 'X-CSRFToken': getCsrfToken(),\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ search_name: titleValue }),\n })\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n setIsSaving(false);\n setIsEditing(false);\n onRenameSuccess(titleValue);\n })\n .catch(err => {\n console.error(err);\n setIsSaving(false);\n setIsEditing(false);\n // revert to original value\n setTitleValue(searchName);\n onRenameFailure(err);\n });\n };\n\n const handleSaveClick = evt => {\n evt.preventDefault();\n evt.stopPropagation();\n handleTitleFormSubmit();\n };\n\n const handleCancelClick = evt => {\n evt.preventDefault();\n if (isSaving) return null;\n setTitleValue(searchName);\n setIsEditing(false);\n };\n\n const handleDeleteClick = () => {\n setIsDeleting(true);\n\n fetch(`${urls.savedSearchBase}${id}/`, {\n credentials: 'include',\n method: 'DELETE',\n headers: { 'X-CSRFToken': getCsrfToken() },\n })\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n onDeleteSuccess();\n })\n .catch(err => {\n console.error(err);\n setIsDeleting(false);\n onDeleteFailure(err);\n });\n };\n\n const handleTogglePublic = evt => {\n evt && evt.preventDefault();\n setIsSaving(true);\n\n fetch(`${urls.savedSearchBase}${id}/`, {\n credentials: 'include',\n method: 'PATCH',\n headers: {\n 'X-CSRFToken': getCsrfToken(),\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ is_public: !isPublic }),\n })\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n setIsSaving(false);\n onTogglePublicSuccess(!isPublic);\n })\n .catch(err => {\n console.error(err);\n setIsSaving(false);\n });\n };\n\n let dateText;\n if (namedDate) {\n dateText = dateRangeLabels[namedDate.replaceAll('_', '-')];\n } else if (dateStart && dateEnd) {\n const dateStartAsDate = parseDate(dateStart, 'yyyy-MM-dd', new Date());\n const dateEndAsDate = parseDate(dateEnd, 'yyyy-MM-dd', new Date());\n if (isValid(dateStartAsDate) && isValid(dateEndAsDate)) {\n dateText = formatDateRange(dateStartAsDate, dateEndAsDate);\n }\n }\n\n const defaultLoc = defaultLocations.find(({ id }) => id === defaultLocId);\n let locName;\n if (address) {\n const { addressName, lat, lon, streetNumber, street, city, state } = address;\n if (addressName) {\n locName = addressName;\n } else if (street || city || state) {\n const parts = [[streetNumber, street].join(' '), city, state];\n locName = parts.join(', ');\n } else if (lat && lon) {\n locName = `${lat}, ${lon}`;\n }\n } else if (defaultLoc) {\n locName = defaultLoc.name;\n } else if (defaultLocId === 'current') {\n locName = 'Current Location';\n }\n\n const eventSettingLabel = {\n online: 'Online',\n in_person: 'In Person',\n }[eventSetting];\n\n const showFilters = !!eventSettingLabel || eventTypeLabels.length > 0 || ageGroupLabels.length > 0 || priceLabels.length > 0;\n\n const deletionMenuExtraItems = !useCompactStyle ? [] : [\n { label: 'Rename', onClick: handleEditClick },\n ];\n\n if (hasWagtailAccess) {\n deletionMenuExtraItems.push(\n { label: `Make ${isPublic ? 'Private' : 'Public'}`, onClick: handleTogglePublic },\n )\n }\n\n const [showExportModal, toggleShowExportModal] = useToggle(false);\n deletionMenuExtraItems.push({\n label: 'Export Results',\n onClick: () => toggleShowExportModal(),\n attrs: {\n 'data-action': 'text-export',\n 'data-object-type': 'search',\n 'data-object-id': id,\n },\n });\n\n if (isStaff) {\n deletionMenuExtraItems.push({\n label: 'Preview Email',\n attrs: {\n href: `${urls.savedSearchMailPreviewBase}${id}/`,\n target: '_blank',\n rel: 'noopener noreferrer',\n },\n });\n\n const sendTestMail = () => {\n fetch(urls.savedSearchMailSendTest, {\n credentials: 'include',\n method: 'POST',\n headers: {\n 'X-CSRFToken': getCsrfToken(),\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ id }),\n })\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n return response;\n })\n .catch(err => {\n console.error(err);\n });\n };\n deletionMenuExtraItems.push({\n label: 'Send Email',\n onClick: sendTestMail,\n });\n }\n\n return (\n \n
\n\n \n \n \n {copied ? Text Copied! : Copy Text}\n \n \n
\n \n Item limit:\n {COUNT_OPTIONS.map(val => (\n setCount(val)}\n >\n {val}\n \n ))}\n
\n \n
\n \n\n \n
\n\n {!!locName && (\n \n {isEditing ? (\n evt.stopPropagation()}\n >\n \n\n
\n ) : (\n \n {isSaving\n ?
\n\n \n \n Cancel\n \n
\n \n \n \n
\n\n {!useCompactStyle && (\n
\n )}\n \n \n
\n\n {!useCompactStyle && (\n \n
\n )}\n \n
\n )}\n\n {!!dateText && (\n \n
\n {locName} {!!radius && !!distanceUnitsLabel && `within ${radius} ${distanceUnitsLabel}`}\n \n
\n )}\n\n {!!keyword && (\n \n
\n {dateText}{!!timeLabel && `, ${timeLabel}`}\n \n
\n )}\n\n {showFilters && (\n \n
\n {keyword}\n \n
\n )}\n\n \n
\n \n {eventTypeLabels.length > 0 && (\n
\n \n Category \n \n
\n )}\n {ageGroupLabels.length > 0 && (\n \n Age Group \n \n
\n )}\n {priceLabels.length > 0 && (\n \n Price \n \n
\n )}\n {!!eventSettingLabel && (\n \n Type \n {eventSettingLabel}\n
\n )}\n \n
\n \n {isPublic && (\n \n
\n e.stopPropagation()}>\n
\n \n {metaLabel === 'created' && `Created ${formatDistanceToNow(dateCreated)} ago`}\n {metaLabel === 'updated' && `Edited ${formatDistanceToNow(dateUpdated)} ago`}\n
\n )}\n \n );\n};\n\nSavedSearchCard.propTypes = {\n className: PropTypes.string,\n useCompactStyle: PropTypes.bool,\n id: PropTypes.number,\n searchName: PropTypes.string,\n searchUrl: PropTypes.string,\n isPublic: PropTypes.bool,\n defaultLocId: PropTypes.oneOf(['', 'current', ...defaultLocations.map(({ id }) => id)]),\n address: PropTypes.shape({\n id: PropTypes.number,\n addressName: PropTypes.string,\n lat: PropTypes.number,\n lon: PropTypes.number,\n streetNumber: PropTypes.string,\n street: PropTypes.string,\n city: PropTypes.string,\n state: PropTypes.string,\n postalCode: PropTypes.string,\n }),\n radius: PropTypes.number,\n namedDate: PropTypes.oneOf(['', 'today', 'tomorrow', 'this_weekend', 'next_3', 'next_7', 'next_30']),\n dateStart: PropTypes.string,\n dateEnd: PropTypes.string,\n timeLabel: PropTypes.string,\n keyword: PropTypes.string,\n eventSetting: PropTypes.oneOf(['', 'online', 'in_person']),\n eventTypeLabels: PropTypes.arrayOf(PropTypes.string),\n ageGroupLabels: PropTypes.arrayOf(PropTypes.string),\n priceLabels: PropTypes.arrayOf(PropTypes.string),\n created: PropTypes.string,\n updated: PropTypes.string,\n metaLabel: PropTypes.oneOf(['updated', 'created']),\n onDeleteSuccess: PropTypes.func,\n onDeleteFailure: PropTypes.func,\n onRenameSuccess: PropTypes.func,\n onRenameFailure: PropTypes.func,\n onTogglePublicSuccess: PropTypes.func,\n};\n\nexport default SavedSearchCard;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { urls } from 'app-constants';\nimport { useBootstrapBreakpoint, useGetAPI, useHistory } from 'hooks';\nimport { DISTANCE_UNITS_MI, DISTANCE_UNITS_KM } from 'components/filters';\nimport DropdownButton from 'components/DropdownButton';\nimport Icon from 'components/Icon';\nimport LoadingOverlay from 'components/LoadingOverlay';\nimport SavedSearchCard from 'components/SavedSearchCard';\nimport CtaWithGraphic from 'components/CtaWithGraphic';\n\nconst ORDER_UPDATED = '-updated';\nconst ORDER_CREATED = '-created';\nconst DEFAULT_ORDER = ORDER_UPDATED;\n\nconst SavedSearchList = ({ emptyImgUrl, distanceUnits = DISTANCE_UNITS_MI }) => {\n const { location: { queryParams }, updateQueryParams } = useHistory();\n const { ordering = DEFAULT_ORDER } = queryParams || {};\n\n // Call API\n let path;\n if (typeof queryParams !== 'undefined') path = urls.savedSearchList;\n const apiParams = { ordering };\n const { data: searchData, isFetching, error } = useGetAPI(path, { queryObject: apiParams, fullPath: true });\n\n // Data cached in local state so we can update the UI immediately when an item is deleted.\n const [cachedSearchData, setCachedSearchData] = useState();\n useEffect(() => setCachedSearchData(searchData), [searchData]);\n\n const [errorMessage, setErrorMessage] = useState(null);\n\n const handleDeleteFailure = errorText => setErrorMessage(`Failed to delete item: ${errorText || 'unknown error'}`);\n const handleDeleteSuccess = searchId => setCachedSearchData(oldState => oldState.filter(({ id }) => id !== searchId));\n\n const handleRenameFailure = errorText => setErrorMessage(`Failed to rename item: ${errorText || 'unknown error'}`);\n const handleRenameSuccess = (searchId, searchName) => setCachedSearchData(oldState => oldState.map(item => {\n return item.id === searchId ? { ...item, searchName } : item;\n }));\n const handleTogglePublicSuccess = (searchId, isPublic) => setCachedSearchData(oldState => oldState.map(item => {\n return item.id === searchId ? { ...item, isPublic } : item;\n }));\n\n const orderingMenuRef = useRef();\n const handleOrderChange = (evt, ordering) => {\n evt.preventDefault();\n updateQueryParams({ ordering });\n orderingMenuRef.current.close();\n };\n\n // Reset scroll position when fetching new data\n useEffect(() => window.scrollTo(0, 0), [isFetching]);\n\n const isMobile = useBootstrapBreakpoint('down-md');\n\n const countLabel = !cachedSearchData ? 'My' : cachedSearchData.length;\n\n const orderingButtonLabel = isMobile ? null : (\n <>\n Sort by: \n {ordering === ORDER_UPDATED ? 'Last edited' : 'Last added'}\n \n );\n\n return (\n \n \n {!isMobile && \n\n {(cachedSearchData || []).map(savedSearch => (\n
\n );\n};\n\nSavedSearchList.propTypes = {\n emptyImgUrl: PropTypes.string,\n distanceUnits: PropTypes.oneOf([DISTANCE_UNITS_MI, DISTANCE_UNITS_KM]),\n};\n\nexport default SavedSearchList;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useToggle } from 'hooks';\n\nconst ShowMoreText = ({ className, truncatedText = '', fullText = '', enableShowLess = false }) => {\n const [showAll, toggleShowAll] = useToggle(false);\n\n return (\n <>\n \n {(!showAll || enableShowLess) && (\n {countLabel} Saved Search{countLabel !== 1 && 'es'}
}\n\n {isMobile && (\n
\n\n {!!error && (\n \n {countLabel} Saved Search{countLabel !== 1 && 'es'}\n
\n )}\n\n handleOrderChange(evt, ORDER_UPDATED)}\n >\n handleOrderChange(evt, ORDER_CREATED)}\n >\n
\n \n \n Failed to fetch results. Please try your request again.\n
\n )}\n\n {!!errorMessage && (\n \n {errorMessage}\n
\n )}\n \n handleDeleteSuccess(savedSearch.id)}\n onRenameFailure={handleRenameFailure}\n onRenameSuccess={name => handleRenameSuccess(savedSearch.id, name)}\n onTogglePublicSuccess={isPublic => handleTogglePublicSuccess(savedSearch.id, isPublic)}\n />\n
\n ))}\n \n )}\n \n \n
\n )}\n \n );\n};\n\nShowMoreText.propTypes = {\n className: PropTypes.string,\n truncatedText: PropTypes.string,\n fullText: PropTypes.string,\n enableShowLess: PropTypes.bool,\n};\n\nexport default ShowMoreText;\n","import { useState, useEffect } from 'react';\nimport { format } from 'date-fns';\nimport camelize from 'camelize';\nimport queryString from 'query-string';\nimport { urls } from 'app-constants';\n\nexport default function useReportData (reportName, startDate, endDate, poiId = null) {\n let url;\n\n const baseUrl = {\n summaryStats: urls.gaSummaryStats,\n summaryCustomEvents: urls.gaSummaryCustomEvents,\n poiCombined: urls.gaPoiCombined,\n }[reportName];\n\n if ([baseUrl, startDate, endDate].every(Boolean)) {\n url = baseUrl;\n\n if (poiId) {\n url += `${poiId}/`;\n }\n\n url += '?' + queryString.stringify({\n start_date: format(startDate, 'yyyy-MM-dd'),\n end_date: format(endDate, 'yyyy-MM-dd'),\n });\n }\n\n const [data, setData] = useState(null);\n const [isFetching, setIsFetching] = useState(false);\n\n const fetchReportData = () => {\n if (!url) return null;\n setIsFetching(true);\n fetch(url)\n .then(response => {\n setIsFetching(false);\n if (!response.ok) {\n throw new Error(response.statusText);\n }\n return response;\n })\n .then(response => response.json())\n .then(data => setData(camelize(data)))\n .catch(err => {\n setIsFetching(false);\n console.error(err);\n });\n };\n\n useEffect(() => {\n fetchReportData();\n }, [url]);\n\n return { data, isFetching };\n}\n","import React, { useEffect, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { endOfMonth, format, parseISO, startOfMonth, subDays, subMonths } from 'date-fns';\nimport { useHistory } from 'hooks';\nimport DateRangePicker from 'components/DateRangePicker';\n\nconst DateSelector = ({ onChange }) => {\n const { location: { queryParams }, updateQueryParams } = useHistory();\n\n const optionsData = useMemo(() => {\n const now = new Date();\n const nowMinus1 = subDays(now, 1);\n const nowMinus6 = subDays(now, 6);\n const nowMinus29 = subDays(now, 29);\n const thisMonthStart = startOfMonth(now);\n const lastMonthStart = subMonths(thisMonthStart, 1);\n const lastMonthEnd = endOfMonth(lastMonthStart);\n // const fmt = 'MMM d';\n\n return {\n today: { label: 'Today', dateRange: [now, now] },\n yesterday: { label: 'Yesterday', dateRange: [nowMinus1, nowMinus1] },\n 'last-7': { label: 'Last 7 Days', dateRange: [nowMinus6, now] },\n 'last-30': { label: 'Last 30 Days', dateRange: [nowMinus29, now] },\n 'current-month': { label: 'This Month', dateRange: [thisMonthStart, now] },\n 'last-month': { label: 'Last Month', dateRange: [lastMonthStart, lastMonthEnd] },\n };\n }, []);\n\n const defaultOptionKey = 'last-7';\n\n let dateRange;\n if (typeof queryParams !== 'undefined') {\n const { date_range, date_start, date_end } = queryParams;\n if (date_start && date_end) {\n dateRange = [\n parseISO(date_start),\n parseISO(date_end),\n ];\n } else {\n dateRange = optionsData[date_range || defaultOptionKey].dateRange;\n }\n }\n\n useEffect(() => {\n if (dateRange) {\n onChange(dateRange);\n }\n }, [dateRange && JSON.stringify(dateRange.map(d => format(d, 'yyyy-MM-dd')))]);\n\n const handleDateChange = ([start, end, slug]) => {\n const params = optionsData[slug] ? { date_range: slug } : {\n date_start: start && format(start, 'yyyy-MM-dd'),\n date_end: end && format(end, 'yyyy-MM-dd'),\n };\n updateQueryParams(params, { clear: true });\n };\n\n return !!dateRange && (\n \n
\n);\n\nMetricCards.propTypes = {\n data: PropTypes.arrayOf(PropTypes.array),\n isFetching: PropTypes.bool,\n};\n\nexport default MetricCards;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport LoadingOverlay from 'components/LoadingOverlay';\n\nconst MetricTable = ({ className, style = {}, config, data, isFetching = false }) => {\n const rows = (data || []).map(record => config.map(({ dataKey, align = 'left', width }) => ({\n value: record[dataKey],\n align,\n width,\n })));\n return (\n \n
\n ))}\n {label}
\n {value}
\n \n \n \n
\n
\n );\n};\n\nMetricTable.propTypes = {\n className: PropTypes.string,\n style: PropTypes.object,\n config: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.string,\n dataKey: PropTypes.any,\n sortable: PropTypes.bool,\n align: PropTypes.oneOf(['left', 'right']),\n })),\n data: PropTypes.arrayOf(PropTypes.object),\n isFetching: PropTypes.bool,\n};\n\nexport default MetricTable;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { round, formatDuration } from 'utils';\nimport { useUserContext } from 'context';\nimport useReportData from './useReportData';\nimport DateSelector from './DateSelector';\nimport MetricCards from './MetricCards';\nimport MetricTable from './MetricTable';\n\nconst StatsDashboard = () => {\n const { producerQuotas = [] } = useUserContext();\n const activePoi = producerQuotas.find(pq => pq.isCurrentActive)?.poi;\n\n const [dateRange, setDateRange] = useState([]);\n const [startDate, endDate] = dateRange;\n\n const handleDateChange = range => {\n setDateRange(range);\n }\n\n const formatInteger = val => parseInt(val, 10).toLocaleString();\n\n const {\n data: zcSummaryData,\n isFetching: zcSummaryFetching,\n } = useReportData('summaryStats', startDate, endDate);\n\n const {\n data: zcSummaryCustomEventData,\n isFetching: zcSummaryCustomEventFetching,\n } = useReportData('summaryCustomEvents', startDate, endDate);\n\n let zcCardData;\n if (zcSummaryData && zcSummaryCustomEventData) {\n let {\n activeUsers,\n averageSessionDuration,\n screenPageViews,\n screenPageViewsPerSession\n } = zcSummaryData.rows[0];\n activeUsers = formatInteger(activeUsers);\n averageSessionDuration = formatDuration(round(averageSessionDuration));\n screenPageViews = formatInteger(screenPageViews);\n screenPageViewsPerSession = round(screenPageViewsPerSession, 1).toLocaleString();\n\n let {\n 'Event Card Impression': eventCardImpressions,\n 'Event Detail Impression': eventDetailImpressions,\n 'POI Card Impression': poiCardImpressions,\n 'POI Detail Impression': poiDetailImpressions,\n } = zcSummaryCustomEventData.data;\n eventCardImpressions = formatInteger(eventCardImpressions || 0);\n eventDetailImpressions = formatInteger(eventDetailImpressions || 0);\n poiCardImpressions = formatInteger(poiCardImpressions || 0);\n poiDetailImpressions = formatInteger(poiDetailImpressions || 0);\n\n zcCardData = [\n ['Active Users', activeUsers],\n ['Avg. Session Duration', averageSessionDuration],\n ['Pageviews', screenPageViews],\n ['Pages / Session', screenPageViewsPerSession],\n ['Venue Card Views', poiCardImpressions],\n ['Venue Detail Views', poiDetailImpressions],\n ['Event Card Views', eventCardImpressions],\n ['Event Detail Views', eventDetailImpressions],\n ];\n }\n\n let poiCardData;\n let poiByEventTableData;\n let poiBySourceTableData;\n\n const poiByEventTableConfig = [\n { label: 'Event', dataKey: 'name', sortable: true },\n { label: 'Card Views', dataKey: 'card', sortable: true, align: 'right', width: 150 },\n { label: 'Detail Views', dataKey: 'detail', sortable: true, align: 'right', width: 150 },\n ];\n\n const poiBySourceTableConfig = [\n { label: 'Source', dataKey: 'source', sortable: true },\n { label: 'Card Views', dataKey: 'card', sortable: true, align: 'right', width: 150 },\n { label: 'Detail Views', dataKey: 'detail', sortable: true, align: 'right', width: 150 },\n ];\n\n const {\n data: poiData,\n isFetching: poiFetching,\n } = useReportData(!!activePoi && 'poiCombined', startDate, endDate, activePoi?.id);\n\n if (poiData) {\n const {\n poiCardImpressions,\n poiDetailImpressions,\n eventCardImpressions,\n eventDetailImpressions,\n } = poiData.summary;\n\n poiCardData = [\n ['Venue Card Views', formatInteger(poiCardImpressions)],\n ['Venue Detail Views', formatInteger(poiDetailImpressions)],\n ['Event Card Views', formatInteger(eventCardImpressions)],\n ['Event Detail Views', formatInteger(eventDetailImpressions)],\n ];\n\n if (poiData.byEvent?.length > 0) {\n poiByEventTableData = poiData.byEvent;\n }\n if (poiData.bySource?.length > 1) {\n poiBySourceTableData = poiData.bySource;\n }\n }\n\n return (\n | {label} | )}\n
|---|
| {value.toLocaleString()} | )}\n
\n
\n\n
\n );\n};\n\nStatsDashboard.propTypes = {\n poiChoices: PropTypes.arrayOf(PropTypes.array),\n};\n\nexport default StatsDashboard;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { urls } from 'app-constants';\nimport { useBootstrapBreakpoint } from 'hooks';\nimport LoadingOverlay from 'components/LoadingOverlay';\n\nconst MAX_ATTEMPTS = 10;\n\nconst SubscriptionProcessing = ({\n imgUrl,\n imgUrlError,\n supportEmail,\n}) => {\n const isDesktop = useBootstrapBreakpoint('up-md');\n const timeoutRef = useRef();\n const intervalRef = useRef();\n const counter = useRef(1);\n const [isError, setIsError] = useState(false);\n\n const startPinging = () => {\n intervalRef.current = setInterval(() => {\n const attempt = counter.current;\n fetch(window.location.pathname, {\n headers: { 'Accept': 'application/json' },\n })\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n return response;\n })\n .then(response => response.json())\n .then(data => {\n if (data.valid) {\n window.location.href = data.redirect || urls.producerEventList;\n } else if (attempt >= MAX_ATTEMPTS) {\n setIsError(true);\n }\n })\n .catch(err => {\n console.error(err);\n setIsError(true);\n });\n\n counter.current++;\n }, 1000);\n };\n\n useEffect(() => {\n timeoutRef.current = setTimeout(startPinging, 3000);\n\n return () => {\n clearTimeout(timeoutRef.current);\n clearInterval(intervalRef.current);\n };\n }, []);\n\n useEffect(() => {\n if (isError) {\n clearInterval(intervalRef.current);\n }\n }, [isError]);\n\n const primaryText = isError\n ? 'Oops, something went wrong'\n : 'Just a Moment...';\n\n const secondaryText = isError\n ? 'Your request could not be processed.'\n : 'We are processing your transaction.';\n\n return (\n \n
\n My Venue Data{producerQuotas.length > 1 && `: ${activePoi.name}`}
\nBy Event
\nBy Traffic Source
\n\n\n
\n
\n Zeitcaster Data
\n\n
\n );\n};\n\nSubscriptionProcessing.propTypes = {\n imgUrl: PropTypes.string,\n imgUrlError: PropTypes.string,\n supportEmail: PropTypes.string,\n};\n\nexport default SubscriptionProcessing;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Badge from 'components/Badge';\n\nconst statusColors = {\n incomplete: 'red',\n incomplete_expired: 'red',\n trialing: 'yellow',\n active: 'green',\n past_due: 'yellow',\n canceled: 'red',\n unpaid: 'red',\n};\n\nconst SubscriptionStatusBadge = ({ className, status }) => (\n \n 
\n
\n \n \n Contact Support\n \n )}\n
\n {secondaryText}
\n {primaryText}
\n {isError && (\n| \n | \n {label} | \n\n HTML: <i data-component=\"Icon\" data-i='{JSON.stringify(iconType)}'></i>\n React: <Icon i={{JSON.stringify(iconType).replace(/\"/g, '\\'')}} />\n | \n
\n {links.map(({ url, label, icon, type = 'link', targetBlank }) => {\n const linkAttrs = (widgetId || targetBlank) ? {\n target: '_blank',\n rel: 'noopener noreferrer',\n } : {};\n\n return type === 'separator' ? (\n
\n \n ) : (\n Log In\n )}\n {label}
\n ) : (\n \n Editing Venue Request
\n| Venue | \n\n {poi ? (\n <>\n {poi.name}\n {!poi.published && unpublished}\n \n ) : (\n Venue missing\n )}\n | \n
|---|---|
| Contact | \n{billingContact?.email} | \n
| Status | \n\n | \n
Explanation
\n\n
\n \n )}\n\n \n Enter reason for rejection. This information will be shared with the user.\n
\n \n
\n\n History
\n {visibleAuditEvents.map(({ user, message, created }) => (\n\n
\n ))}\n {displayShowAllLink && }\n {message}
\n {format(parseISO(created), 'yyyy-MM-dd p')}{!!user && ` – ${user.email}`}
\n \n Cancel\n \n Save\n \n
\n \n );\n\n return (\n <>\n \n
\n\n \n
\n \n {poi ? (\n <>\n \n
\n {!poi.published && unpublished}\n \n ) : (\n
\n\n \n e.stopPropagation()}\n >{poi.name}\n
\n {!poi.published && unpublished}\n \n ) : (\n \n Venue missing\n
\n )}\n\n
\n\n {!!subscription && (\n \n
\n \n {billingContact.email}\n
\n \n
\n )}\n \n {subscription.plan.summary}\n
\n \n
\n e.stopPropagation()}>\n {status === 'verified' ? (\n
\n \n {metaLabel === 'created' && `Created ${formatDistanceToNow(dateCreated)} ago`}\n {metaLabel === 'updated' && `Updated ${formatDistanceToNow(dateUpdated)} ago`}\n
\n \n {editModal}\n \n );\n};\n\nconst userPropTypes = PropTypes.shape({\n id: PropTypes.number,\n username: PropTypes.string,\n email: PropTypes.string,\n});\n\nItem.propTypes = {\n className: PropTypes.string,\n id: PropTypes.number,\n poi: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n absoluteUrl: PropTypes.string,\n published: PropTypes.bool,\n }),\n status: PropTypes.oneOf(statusOptions),\n billingContact: userPropTypes,\n auditEvents: PropTypes.arrayOf(PropTypes.shape({\n user: userPropTypes,\n message: PropTypes.string,\n created: PropTypes.string,\n })),\n subscription: PropTypes.shape({\n status: PropTypes.string,\n plan: PropTypes.string,\n }),\n created: PropTypes.string,\n updated: PropTypes.string,\n metaLabel: PropTypes.oneOf(['updated', 'created']),\n onEditComplete: PropTypes.func,\n onDeleteSuccess: PropTypes.func,\n onDeleteFailure: PropTypes.func,\n};\n\nexport default Item;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { statusOptions } from './statusOptions';\n\nconst StatusFilter = ({ value, onChange }) => {\n const handleChange = val => onChange(\n value.includes(val)\n ? value.filter(v => v !== val)\n : [...value, val]\n );\n\n const handleResetClick = evt => {\n evt.preventDefault();\n onChange([]);\n }\n\n const classes = val => classNames('z-form-choice-button', 'small', value.includes(val) && 'selected');\n\n return (\n \n Status:\n {statusOptions.map(val => (\n handleChange(val)}\n >{val}\n ))}\n reset\n
\n );\n};\n\nStatusFilter.propTypes = {\n value: PropTypes.arrayOf(PropTypes.oneOf(statusOptions)),\n onChange: PropTypes.func,\n};\n\nexport default StatusFilter;\n","import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport { v4 as uuid4 } from 'uuid';\nimport { urls } from 'app-constants';\nimport { useBootstrapBreakpoint, useGetAPI, useHistory, useOrderingMenu } from 'hooks';\nimport { statusOptions, activeStatusVals } from './statusOptions';\nimport LoadingOverlay from 'components/LoadingOverlay';\nimport Item from './Item';\nimport StatusFilter from './StatusFilter';\n\nconst ORDER_CREATED = '-created';\nconst ORDER_UPDATED = '-updated';\nconst DEFAULT_ORDER = ORDER_CREATED;\n\nconst VenueModeration = () => {\n const { location: { queryParams }, updateQueryParams } = useHistory();\n const { orderingVal, orderingMenu } = useOrderingMenu({\n options: [\n { label: 'Created', value: ORDER_CREATED },\n { label: 'Updated', value: ORDER_UPDATED },\n ],\n defaultValue: DEFAULT_ORDER,\n });\n\n const [cacheKey, setCacheKey] = useState(uuid4());\n const updateCacheKey = () => setCacheKey(uuid4())\n\n // Call API\n let path;\n let apiParams = { ordering: orderingVal };\n if (typeof queryParams !== 'undefined') {\n path = urls.poiClaimModerationList;\n apiParams = ['all', 'status'].reduce((result, key) => {\n if (typeof queryParams[key] !== 'undefined') {\n result[key] = queryParams[key];\n }\n return result;\n }, apiParams);\n }\n const { data, isFetching, error } = useGetAPI(path, {\n queryObject: apiParams,\n fullPath: true,\n extraDeps: [orderingVal, cacheKey],\n });\n\n let statusFilterVal = [];\n if (typeof queryParams !== 'undefined') {\n statusFilterVal = queryParams.status\n ? queryParams.status.split(',').filter(s => statusOptions.includes(s))\n : activeStatusVals;\n }\n\n const handleStatusFilterChange = val => {\n updateQueryParams({ status: val.length ? val.join(',') : null });\n }\n\n const [errorMessage, setErrorMessage] = useState(null);\n const handleDeleteFailure = errorText => setErrorMessage(`Failed to delete item: ${errorText || 'unknown error'}`);\n\n const isMobile = useBootstrapBreakpoint('down-md');\n const showEmptyMessage = data && data.length === 0 && !isFetching;\n const HeadingTag = isMobile ? 'h4' : 'h2';\n\n return (\n \n \n Manage Producer Requests \n\n \n\n {(data || []).map(item => (\n
\n );\n};\n\n// VenueModeration.propTypes = {\n\n// };\n\nexport default VenueModeration;\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useToggle } from 'hooks';\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\nimport Modal from 'components/Modal';\n\nconst CalendarEmbedCode = ({ embedUrl, isOpen, onRequestClose }) => {\n const [copied, toggleCopied] = useToggle(false);\n\n useEffect(() => {\n if (!isOpen) {\n toggleCopied(false);\n }\n }, [isOpen]);\n\n const textContent = ``;\n\n return (\n \n {!isMobile && (\n
\n\n {!!error && (\n \n Failed to fetch results. Please try your request again.\n
\n )}\n\n {!!errorMessage && (\n \n {errorMessage}\n
\n )}\n \n
\n ))}\n\n {showEmptyMessage && No items to display.
}\n Embed Calendar
\n\n\n
\n \n );\n};\n\nexport default CalendarEmbedCode;\n\nCalendarEmbedCode.propTypes = {\n embedUrl: PropTypes.string,\n isOpen: PropTypes.bool,\n onRequestClose: PropTypes.func,\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { formatDistanceToNow, parseISO } from 'date-fns';\nimport { urls } from 'app-constants';\nimport { useToggle } from 'hooks';\nimport { getCsrfToken } from 'utils';\nimport CalendarEmbedCode from 'components/CalendarEmbedCode';\nimport CardDeletionMenu from 'components/CardDeletionMenu';\nimport SavedSearchTextExport from 'components/SavedSearchTextExport';\nimport Icon from 'components/Icon';\n\nconst CalendarCard = ({\n id,\n title,\n created,\n updated,\n embedUrl,\n search,\n poi,\n className,\n useCompactStyle,\n metaLabel = 'updated',\n onEditClick = () => {},\n onDeleteSuccess = () => {},\n onDeleteFailure = () => {},\n}) => {\n const [isDeleting, setIsDeleting] = useState(false);\n const [embedModalOpen, toggleEmbedModal] = useToggle(false);\n const [exportModalOpen, toggleExportModal] = useToggle(false);\n\n const dateCreated = parseISO(created);\n const dateUpdated = parseISO(updated);\n\n const handleCardClick = () => window.open(embedUrl, '_blank', 'width=600,height=800,top=0,left=1500,resizable');\n\n const handleDeleteClick = () => {\n setIsDeleting(true);\n\n fetch(`${urls.apiWidgetList}${id}/`, {\n credentials: 'include',\n method: 'DELETE',\n headers: { 'X-CSRFToken': getCsrfToken() },\n })\n .then(response => {\n if (!response.ok) throw new Error(response.statusText);\n onDeleteSuccess();\n })\n .catch(err => {\n console.error(err);\n setIsDeleting(false);\n onDeleteFailure(err);\n });\n };\n\n return (\n <>\n \n
\n \n\n
\n\n \n \n \n \n
\n \n
\n\n \n
\n \n {title}\n
\n\n {!!search && (\n\n
\n )}\n\n {!!poi && (\n \n
\n \n {search.searchName} – {search.description}\n
\n \n
\n )}\n \n
\n {poi.name}
\n \n
\n e.stopPropagation()}>\n toggleExportModal(),\n attrs: {\n 'data-action': 'text-export',\n 'data-object-type': 'calendar',\n 'data-object-id': id,\n },\n },\n ]}\n deleteLinkAttrs={{\n 'data-calendar-name': `${id} - ${title}`,\n 'data-action': 'delete',\n }}\n />\n
\n \n {metaLabel === 'created' && `Created ${formatDistanceToNow(dateCreated)} ago`}\n {metaLabel === 'updated' && `Edited ${formatDistanceToNow(dateUpdated)} ago`}\n
\n )}\n \n \n {typeChoices.map(([value, label]) => {\n const isSelected = isCustom ? value === TYPE_CUSTOM : value === poiIdVal;\n return (\n
\n );\n\n // TODO - RadioField is behaving strangely here. Value gets cleared when editing an existing item and clearing the \"saved search\" value.\n // const poiField = producerQuotas.length < 6 ? (\n // <>\n // \n \n
\n );\n })}\n Venue
\n // \n
\n \n {isEditing ? 'Edit' : 'Create New'} Calendar{!!title && `: ${title}`}\n
\n {errorMessages.map((msg, idx) =>{msg}
)}\n {form}\n \n {createButton}\n \n {!isMobile && \n\n {(cachedData || []).map(widget => (\n
\n );\n};\n\nCalendarList.propTypes = {\n emptyImgUrl: PropTypes.string,\n};\n\nexport default CalendarList;\n","// Date format config\n// patterns are described here: https://date-fns.org/v2.23.0/docs/format\nexport const QUERY_PARAM_FMT = 'yyyy-MM-dd'; // for API query parameters\nexport const DAY_LABEL_FMT = 'M/d'; // for \"day\" labels on chart\nexport const MONTH_LABEL_FMT = 'MMM yyyy'; // for \"month\" labels on chart\nexport const TOOLTIP_FMT = 'MMM d, yyyy'; // for tooltips on chart\nexport const DISPLAY_FMT = 'MMMM d, yyyy'; // for date range display text\n\nexport const DATE_RANGE_CHOICES = {\n lastSeven: 'last-seven',\n lastThirty: 'last-thirty',\n lastNinety: 'last-ninety',\n lastYear: 'last-year',\n allTime: 'all-time',\n customRange: 'custom-range',\n};\n\nexport const CHART_METRIC_CHOICES = {\n widgetImpressions: 'widget_hit_ct',\n eventImpressions: 'event_hit_ct',\n};\n\nexport const CHART_UNIT_CHOICES = {\n day: 'by_day',\n month: 'by_month',\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { format } from 'date-fns';\nimport {\n QUERY_PARAM_FMT,\n DISPLAY_FMT,\n DATE_RANGE_CHOICES,\n CHART_METRIC_CHOICES,\n CHART_UNIT_CHOICES,\n} from './constants';\n\nconst Controls = ({\n dateRange,\n chartMetric,\n chartUnit,\n customRangeStart,\n customRangeEnd,\n startDate,\n endDate,\n onDateRangeChange = () => {},\n onCustomRangeStartChange = () => {},\n onCustomRangeEndChange = () => {},\n onMetricChange = () => {},\n onUnitChange = () => {},\n}) => {\n const { lastSeven, lastThirty, lastNinety, lastYear, allTime, customRange } = DATE_RANGE_CHOICES;\n const { widgetImpressions, eventImpressions } = CHART_METRIC_CHOICES;\n const { day, month } = CHART_UNIT_CHOICES;\n const dateRangeText = startDate && endDate ? `${format(startDate, DISPLAY_FMT)} – ${format(endDate, DISPLAY_FMT)}` : '';\n\n return (\n {countLabel} Calendar{(cachedData || []).length !== 1 && 's'}
}\n\n {isMobile && (\n
\n\n {!!error && (\n \n {countLabel} Calendar{countLabel !== 1 && 's'}\n
\n )}\n {orderingMenu}\n\n Failed to fetch results. Please try your request again.\n
\n )}\n\n {!!errorMessage && (\n \n {errorMessage}\n
\n )}\n \n editWidget(widget)}\n onDeleteFailure={handleDeleteFailure}\n onDeleteSuccess={() => handleDeleteSuccess(widget.id)}\n />\n
\n ))}\n \n )}\n\n {editModal}\n \n onDateRangeChange(evt.target.value)}\n >\n \n \n \n \n \n \n \n\n
\n \n {dateRange === customRange ? (\n <>\n onCustomRangeStartChange(evt.target.value)}\n />\n –\n onCustomRangeEndChange(evt.target.value)}\n />\n \n ) : (\n
\n {dateRangeText}
\n )}\n \n
\n \n Show:\n
\n - \n
- \n
- \n
\n By:\n \n
\n \n {width &&
\n );\n};\n\nChart.propTypes = {\n startDate: PropTypes.instanceOf(Date),\n endDate: PropTypes.instanceOf(Date),\n chartMetric: PropTypes.oneOf(Object.values(CHART_METRIC_CHOICES)),\n chartUnit: PropTypes.oneOf(Object.values(CHART_UNIT_CHOICES)),\n data: PropTypes.object,\n};\n\nexport default Chart;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport camelize from 'camelize';\nimport queryString from 'query-string';\nimport urlJoin from 'url-join';\nimport {\n format,\n isValid,\n subDays,\n subYears,\n} from 'date-fns';\nimport { urls } from 'app-constants';\nimport { hasOwnProperty } from 'utils';\nimport {\n QUERY_PARAM_FMT,\n DATE_RANGE_CHOICES,\n CHART_METRIC_CHOICES,\n CHART_UNIT_CHOICES,\n} from './constants';\nimport Controls from './Controls';\nimport Chart from './Chart';\n\nconst WidgetMetrics = ({ widgetId }) => {\n const loadingOverlayTimeout = useRef();\n\n const [excludeHosts, setExcludeHosts] = useState([]);\n const [data, setData] = useState(null);\n const [isFetching, setIsFetching] = useState(false);\n const [showLoadingOverlay, setShowLoadingOverlay] = useState(true);\n const [dateRange, setDateRange] = useState(DATE_RANGE_CHOICES.lastSeven);\n const [customRangeStart, setCustomRangeStart] = useState(null);\n const [customRangeEnd, setCustomRangeEnd] = useState(null);\n const [dataStart, setDataStart] = useState(null);\n const [chartMetric, setChartMetric] = useState(CHART_METRIC_CHOICES.widgetImpressions);\n const [chartUnit, setChartUnit] = useState(CHART_UNIT_CHOICES.day);\n\n useEffect(() => {\n clearTimeout(loadingOverlayTimeout.current);\n if (isFetching) {\n // Display the loading overlay only after a brief timeout has elapsed\n loadingOverlayTimeout.current = setTimeout(() => setShowLoadingOverlay(true), 300);\n } else {\n setShowLoadingOverlay(false);\n }\n }, [isFetching]);\n\n useEffect(() => fetchData(), [excludeHosts]);\n\n useEffect(() => {\n if (!(dateRange === DATE_RANGE_CHOICES.customRange && (!customRangeStart || !customRangeEnd))) {\n fetchData();\n }\n }, [dateRange, customRangeStart, customRangeEnd]);\n\n useEffect(() => {\n if (data && hasOwnProperty(data, 'by_day')) {\n const allDateStrings = Object.keys(data.by_day);\n allDateStrings.sort();\n setDataStart(allDateStrings.length > 0 ? new Date(`${allDateStrings[0]} 00:00`) : null);\n }\n }, [data]);\n\n\n const { lastSeven, lastThirty, lastNinety, lastYear, allTime, customRange } = DATE_RANGE_CHOICES;\n const now = new Date();\n let startDate = null;\n let endDate = now;\n\n switch (dateRange) {\n case lastSeven:\n startDate = subDays(now, 6);\n break;\n case lastThirty:\n startDate = subDays(now, 29);\n break;\n case lastNinety:\n startDate = subDays(now, 89);\n break;\n case lastYear:\n startDate = subYears(now, 1);\n break;\n case allTime:\n // In this case, set the start date based on the earliest metrics\n // included in the actual data.\n startDate = dataStart;\n break;\n case customRange:\n if (customRangeStart && customRangeEnd) {\n startDate = customRangeStart;\n endDate = customRangeEnd;\n }\n break;\n default:\n break;\n }\n\n const fetchData = () => {\n const params = {};\n\n if (dateRange !== DATE_RANGE_CHOICES.allTime) {\n if (startDate) {\n params.start_date = format(startDate, QUERY_PARAM_FMT);\n }\n if (endDate) {\n params.end_date = format(endDate, QUERY_PARAM_FMT);\n }\n }\n\n if (excludeHosts.length) {\n params.exclude_hosts = excludeHosts.join(',');\n }\n\n const url = urlJoin(urls.widgetMetricsBase, widgetId.toString(), '?' + queryString.stringify(params));\n\n setIsFetching(true);\n fetch(url)\n .then(response => {\n if (!response.ok) {\n throw new Error(response.statusText);\n }\n return response;\n })\n .then(response => response.json())\n .then(data => {\n setData(data);\n setIsFetching(false);\n })\n .catch(err => {\n setIsFetching(false);\n console.error(err);\n });\n };\n\n const validateDateInput = val => {\n val = val ? new Date(`${val} 00:00`) : null;\n if (val && !isValid(val)) {\n val = null;\n }\n return val;\n };\n\n const handleCustomRangeStartChange = val => setCustomRangeStart(validateDateInput(val));\n const handleCustomRangeEndChange = val => setCustomRangeEnd(validateDateInput(val));\n\n const handleRowSelectionChange = host => {\n const newVal = excludeHosts.includes(host) ? excludeHosts.filter(d => d !== host) : [...excludeHosts, host];\n setExcludeHosts(newVal);\n };\n\n const tableRows = data ? Object.entries(data.by_host).map(([host, stats]) => {\n const { widgetHitCt, eventHitCt } = camelize(stats);\n const enabled = !excludeHosts.includes(host);\n return (\n \n
\n \n
\n );\n};\n\nWidgetMetrics.propTypes = {\n widgetId: PropTypes.number.isRequired,\n};\n\nexport default WidgetMetrics;\n","import React, { useState, createContext, useContext } from 'react';\nimport PropTypes from 'prop-types';\n\nconst FilterContext = createContext();\n\nexport const FilterContextProvider = ({ children }) => {\n const [contextVal, setContextVal] = useState({});\n const updateFilterContext = val => setContextVal(prevState => ({ ...prevState, ...val }));\n const value = {\n ...contextVal,\n setFilterContext: setContextVal,\n updateFilterContext,\n };\n return (\n \n
\n \n
\n \n
\n {widgetHitCt}
\nWidget Impressions
\n \n
\n {eventHitCt}
\nEvent Impressions
\n \n
\n \n
\n {showLoadingOverlay && (\n \n
\n \n \n \n
\n
\n | Origin Domain | \nWidget Impr. | \nEvent Impr. | \nGraph | \n
|---|
\n Traffic data is updated every five minutes.\n
\n \n \n
\n )}\n