{activeOnly ? \"Active Listings\" : displayName}
\n\n {generatingPdf && (\n \n
\n\n {!activeOnly && <>\n \n
\n\n \n
\n }\n\n \n
\n\n \n
\n\n \n
\n \n
\n }\n
\n );\n };\n}\n","import { set } from 'lodash/fp';\nimport { useState } from 'react';\nimport { saveAs } from 'file-saver';\nimport { titleize } from 'components/shared/humanize';\nimport { exportCSV } from 'components/shared/api_request_helpers';\n\nconst SCOPES = ['active', 'expiring_soon', 'expired', 'drafted', 'stalled', 'adopted', 'archived'];\nconst DEFAULT_FILTERS = {\n created_at: {start: '', end: ''},\n updated_at: {start: '', end: ''},\n scope: SCOPES\n};\nconst filtersFromLocation = ({search}) => {\n if (search) {\n const params = new URLSearchParams(search);\n return {\n ...DEFAULT_FILTERS,\n scope: params.getAll('scope')\n };\n }\n}\n\nconst regExpFilename = /filename=\"(?Generating PDF, please wait
\n )}\n \n \n {isSupervisor && (\n
\n\n {statistics === null ? (\n \n this.updateOrganization(selected)}\n onInputChange={(string) => this.setState({selectedOrganization: string})}\n />\n
\n )}\n \n loading\n
\n ) : <>\n \n {error && \n \n
\n\n
\n );\n}\n","import { useState, useCallback } from 'react';\nimport Dropzone from 'react-dropzone';\nimport { importCSV } from 'components/shared/api_request_helpers';\nimport { parseCSVPreview, guessMappings } from 'components/shared/csv_helpers';\nimport CSVMappingTable, { IGNORE_VALUE } from 'components/CSVForm/CSVMappingTable';\n\nconst INSTRUCTION_CONTENT = {\n template: (\n <>\n Instructions\n {error}
}\n\n \n \n\n \n
\n\n \n \n
\n\n \n {SCOPES.map((scope) => (\n \n ))}\n
\n | Right Horse Field | \nCSV Field | \n
|---|
\n \n
\n- \n
- Categories with a * are required. If you don't include them in the spreadsheet, you'll have to manually add them later in each listing. \n
- Name is the horse's name and can be as long or as short as needed. \n
- Height is in hands. \n
- We list nearly all breed options, with an option to click \"other\" if one isn't listed. \n
- If your horse has multiple breeds, you can seperate each with a comma. \n
- Gender options are: Gelding, Mare, Stallion, Colt, and Filly. If you use Male/Female, you will have to edit it in the listing. \n
- Birth Year is the horse's year of birth. \n
- Adoption fee cannot be set to 0 at this time. If the adoption is sponsored feel free to write that in the description. \n
- ID gives you the option to identify horses by unique numbers, which can help you update the horse listing via CSV later if you'd like to. Examples of this would be the Chip ID number or the intake number. \n
- Images that are already hosted on the web can be included here in a comma-seperate list of their URLs and will import directly into the listing. \n
If you want to update a horse (or multiple horses) that have already been listed, you can upload a CSV with the updated information and that listing will update automatically. Here’s how:
\n- \n
- Make sure the horses you posted previously have a unique identifier in the “Id” section. This could be a chip ID number or intake number. This is how the CSV uploader identifies which horse needs to be updated. \n
- Update the information in your intake system and download the CSV (or edit directly in the CSV). For example, If you use Airtable to track your horses, and you wrote a new description for a horse that’s already been posted, you would edit the description in airtable, download the CSV, and upload it to My Right Horse. \n
- As long as the ID in the CSV and the listing for the horse match, all updated information will be edited and your listing will update automatically. \n
There are two options for uploading images:
\n- \n
- Once your CSV is done uploading, you will see list of the horses you've just imported. To the right of the horse you'd like to edit, you can click “add cover photo” and upload up to 8 images for the listing. \n
- If you have images publically available on the web, you can copy and paste their links as a comma-seperate list into your spreadsheet under “images”. When you upload your csv, they will automatically be added to the listing. \n
\n
\n );\n}\n","import { eq } from 'lodash/fp';\nimport { useState } from 'react';\nimport { titleize } from 'components/shared/humanize';\nimport { DISPLAY_NAMES } from '../shared/csv_helpers';\n\nexport const IGNORE_VALUE = \"*IGNORE THIS FIELD*\";\nconst FIELD_HELP = {\n height: 'in hands',\n birth_year: 'year, ex 2022, but assumes values less than 50 are ages',\n price: 'USD',\n};\n\nconst isDuplicate = (mapping, header) => mapping[header] !== IGNORE_VALUE && (\n _.filter(_.values(mapping), eq(mapping[header])).length > 1\n);\n\nconst MappingRow = ({header, required, previewRow, csvFields, selected, setMapping, duplicate}) => (\n \n {error && (\n \n \n \n or drag & drop files here\n \n \n
\n {error}
\n )}\n - \n
- \n Upload your CSV file\n Choose or drag your file to add horses for adoption.\n \n
- \n Match the fields\n Connect your information with our categories. For example, \"Horse name\" would go with \"Name\".\n\n \n
- \n Edit\n Add photos and edit your listings. If there are categories required that aren't\n recorded in your CSV, consider adding a column to collect that information to make adding\n horses quicker and easier.\n \n
- \n Publish\n Listings that meet all requirements will show a \"publish\" button. Don't\n worry - if you can't publish them all right away, they'll be saved in your drafts.\n \n
\n \n \n \n
\n {selected == \"template\" && (\n \n Click to download CSV template\n {INSTRUCTION_CONTENT[\"template\"]}\n
\n )}\n {selected == \"update\" && {INSTRUCTION_CONTENT[\"update\"]}
}\n {selected == \"upload\" && {INSTRUCTION_CONTENT[\"upload\"]}
}\n \n {file ? <> {file.name} : \"No file selected\"}\n
\n \n {file && (\n
\n \n \n
\n )}\n \n
\n Preview
\n\n \n
\n loading....
;\n\n const [previewIndex, setPreviewIndex] = useState(0);\n const {data, meta} = preview ?? {};\n return (\n | Right Horse Field | \nCSV Field | \n\n \n Data Preview (row {previewIndex + 1})\n \n | \n
|---|
\n {isDone ? (\n
\n Your import of {carrierwave_file_identifier} is complete!
\n ) : (\nYour file, {carrierwave_file_identifier}, is currently importing.
\n )}\n\n
\n\n {!_.isEmpty(listing_update_problems) && <>\n \n
\n {uploadSupportEnabled && (\n Errors:
\n - \n {_.map(listing_update_problems, trRowNumber(({row_number, errors}) => (\n
- \n {!!row_number && Row {row_number}: }\n {errors}\n \n )))}\n
\n {youWillBeContacted ? (\n
\n )}\n }\n \n Someone from My Right Horse will be in touch about this.\n
\n ) : (\n \n )}\n\n { isDone && total_records === 0 ? (\n \n \n
\n )}\n {selectedListing && (\n \n \n )}\n
\n \n}\n","export default function InfoBlock({icon, number, words}) {\n return (\n \n
\n ) : (\n Processing Halted
\n| Name | \n {!selectedListing && <>\n {hasExternalId &&CSV Id | }\nActions | \n }\n
|---|
\n \n
\n Editing {selectedListing.name}
\n\n \n
\n )\n}\n","import { useEffect, useContext, useState } from \"react\";\n\nimport flash from \"shared/flash\";\n\nimport ListingContext from \"@/contexts/ListingContext\";\nimport { titleize } from 'components/shared/humanize';\n\nconst ActionText = (published, status) => (\n \n
\n {number}
\n {words}
\n \n {published ? (\n <>\n Published\n \n ) : (\n titleize(listing.status)\n )}\n
\n);\n\nexport const ListingRow = ({addCoverPhoto, selectedId, hasExternalId}) => {\n const {publish, listing, errors} = useContext(ListingContext);\n const selected = selectedId === listing.id;\n useEffect(() => {\n if (!_.isEmpty(errors)) flash('errors', _.map(errors, (values, key) => (\n [_.capitalize(key), new Intl.ListFormat().format(values)].join(' ')\n )).join('\\n'));\n }, [errors]);\n\n const [published, setPublished] = useState(false);\n\n const makePublished = async () => {\n await publish();\n setPublished(true);\n };\n\n return (\n\n
\n );\n}\n","import {contributorSearchListings} from 'shared/api_request_helpers';\nimport DashboardListingCard from './DashboardListingCard';\nimport ContributorSearch from './ContributorSearch';\nimport {SectionTitle, LinkCard, ResultsMessage} from './shared/displayHelpers';\n\nexport default class Dashboard extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.requestListings = _.debounce(this.postTerms.bind(this), 1000, {leading: true});\n this.state = {\n search: \"\",\n results: [],\n loading: true,\n listings: this.props.listings || []\n };\n }\n\n postTerms() {\n if (!this.pendingRequest) {\n const {search} = this.state;\n this.pendingRequest = true;\n this.setState({loading: true});\n contributorSearchListings({search, view_scope: this.props.scope})\n .then(({results}) => {\n this.setState({results, loading: false});\n this.pendingRequest = false;\n if (search != this.state.search) this.requestListings();\n })\n .catch((error) => {\n if (error) console.warn(error);\n this.pendingRequest = false;\n this.setState({loading: false});\n });\n }\n }\n\n setFilterTerm = (search) => this.setState({search, loading: true}, this.requestListings);\n\n render() {\n const {scope, EXPIRING_SOON_DAYS, MAX_DASHBOARD_COUNT, LISTING_SCOPES} = this.props;\n const {search, results, loading, listings} = this.state;\n const dashboardHasNoResults = scope == \"all\" && _.isEmpty(search);\n\n const recentListings = this.props.listings.filter((l) => l.updated_at >= EXPIRING_SOON_DAYS)\n const expiringListings = this.props.listings.filter((l) => l.updated_at < EXPIRING_SOON_DAYS)\n\n const mostRecent = (listings) => listings.reverse().slice(0, MAX_DASHBOARD_COUNT - 1);\n\n const searchPlaceholder = LISTING_SCOPES.includes(scope) ? (\n `Search your organization's ${_.lowerCase(scope)} listings`\n ) : (\n \"Search all of your organization's listings\"\n );\n const cardContext = _.pick(this.props, 'EXPIRING_SOON_DAYS', 'STATUS_REASONS', 'MAX_DASHBOARD_COUNT', 'userType', 'userID');\n\n return (\n \n
\n setFilterTerm(e.target.value)}\n id=\"search\"\n name=\"search\"\n value={search}\n placeholder={searchPlaceholder}\n />\n \n
\n
\n );\n }\n}\n","import ListingCard from './ListingCard';\nimport MoveToDraftsButtons from './DashboardListingCard/components/MoveToDraftsButtons';\nimport ActiveButtons from './DashboardListingCard/components/ActiveButtons';\nimport ExpirationButtons from './DashboardListingCard/components/ExpirationButtons';\nimport DraftButtons from './DashboardListingCard/components/DraftButtons';\nimport { submitListingAction } from './shared/api_request_helpers';\nimport { setInitialStatus } from './shared/listing_helpers';\n\nconst LISTING_BUTTONS = {\n archived: MoveToDraftsButtons,\n stalled: DraftButtons,\n adopted: MoveToDraftsButtons,\n published: ActiveButtons,\n expired: ExpirationButtons,\n expiring_soon: ExpirationButtons,\n draft: DraftButtons\n};\n\nexport default class DashboardListingCard extends React.Component {\n state = {\n listing: this.props.listing\n }\n\n submitListing = (action, status_reason) => {\n const {listing} = this.props;\n submitListingAction(listing, action, status_reason, (error, response) => {\n if (!_.isEmpty(_.get(response.body, 'errors', {}))) {\n window.location.href = `/listings/${listing.id}/edit`;\n } else {\n this.setState(({listing}) => ({\n listing: {\n ...listing,\n ..._.pick(response.body, ['status', 'days_remaining', 'percent_remaining'])\n }\n }));\n }\n });\n }\n\n render() {\n const {EXPIRING_SOON_DAYS, STATUS_REASONS, userType, userID} = this.props;\n const {days_remaining, status, active_transfer} = this.props.listing;\n const {listing} = this.state;\n\n const initialStatus = setInitialStatus(status, days_remaining, EXPIRING_SOON_DAYS);\n const ListingButtons = LISTING_BUTTONS[initialStatus];\n const moved = listing.status !== status;\n\n return (\n \n \n {scope !== \"all\" && (\n \n Download CSV\n \n )}\n
\n \n {!_.isEmpty(search) && <>\n
\n \n {_.map(results, (listing) => (\n
\n )}\n }\n\n {scope == \"all\" ? <>\n {!_.isEmpty(expiringListings) && <>\n \n {_.map(mostRecent(expiringListings), (listing) =>\n
\n }\n\n \n {_.map(mostRecent(recentListings), (listing) =>\n
\n : (\n \n {_.isEmpty(search) && (\n _.isEmpty(listings) ? (\n
\n )}\n There are no {_.lowerCase(scope)} listings
\n ) : (\n\n {scope == \"drafted\" &&
\n )\n )}\n \n \n \n {active_transfer && (\n
\n );\n }\n}\n","import ReversibleButton from './buttons/ReversibleButton';\nimport EditButton from './buttons/EditButton';\nimport ChangeStatusButton from './buttons/ChangeStatusButton';\nimport AdoptedButton from './buttons/AdoptedButton';\n\nexport default function ActiveButtons({\n submitListingAction, initialStatus, listing, moved, statusReasons\n}) {\n const movedToStall = listing.status === 'stalled' && initialStatus === 'published'\n const disable = moved && !movedToStall\n\n return (\n \n {\n active_transfer.status == 'initiated' ? 'Pending Transfer to' : 'Transfer Accepted by'\n }: {active_transfer.organization_name}\n
\n )}\n\n
\n );\n}\n","import ReversibleButton from './buttons/ReversibleButton';\nimport EditButton from './buttons/EditButton';\nimport ChangeStatusButton from './buttons/ChangeStatusButton';\nimport AdoptedButton from './buttons/AdoptedButton';\n\nexport default function DraftButtons({\n submitListingAction, initialStatus, listing, moved, statusReasons\n}) {\n const pendingAdoption = listing.status_reason === \"Pending Adoption\";\n\n return (\n \n \n {!listing.active_transfer && (\n \n )}\n
\n \n \n
\n \n
\n )\n}\n","import AdoptedButton from './buttons/AdoptedButton';\nimport EditButton from './buttons/EditButton';\nimport ChangeStatusButton from './buttons/ChangeStatusButton';\n\nexport default function ExpirationButtons({\n submitListingAction, listing, initialStatus, moved, statusReasons\n}) {\n const extended = listing.percent_remaining === \"100.0%\";\n\n return (\n \n \n )}\n
\n \n \n \n
\n \n
\n );\n}\n","import EditButton from './buttons/EditButton';\n\nexport default class MoveToDraftsButtons extends React.Component {\n render() {\n const {submitListingAction, listing} = this.props;\n\n return (\n \n \n )}\n
\n \n submitListingAction(\"published\")}\n disabled={extended}\n >\n {status === \"expired\" ? \"Relist\" : \"Extend\"}\n \n
\n {!listing.active_transfer && (\n \n \n
\n \n {listing.status == \"draft\" ? (\n
\n );\n }\n}\n","import StatusReasonOption from 'shared/StatusReasonOption';\n\nconst ADOPTED = \"adopted\";\nconst UNDO = \"undo\";\n\nexport default class AdoptedButton extends React.Component {\n state = {showDropdown: false, undoMode: false}\n\n componentWillUnmount() {\n document.removeEventListener('click', this.hideDropdown);\n }\n\n showDropdown = (e) => {\n e.stopPropagation();\n this.setState({showDropdown: true});\n document.addEventListener('click', this.hideDropdown, false);\n }\n\n hideDropdown = () => {\n if (this.state.showDropdown) {\n this.setState({showDropdown: false});\n document.removeEventListener('click', this.hideDropdown);\n }\n }\n\n changeAdoptionStatus = (_status, status_reason) => {\n const {action} = this.props;\n const {undoMode} = this.state;\n this.setState({undoMode: !undoMode});\n action((undoMode ? UNDO : ADOPTED), status_reason);\n }\n\n render() {\n const {moved, primaryClass, statusReasons, activeTransfer} = this.props;\n const {showDropdown, undoMode} = this.state;\n\n return (\n \n
\n ) : (\n \n submitListingAction(\"undo\")} >\n Undo\n \n
\n \n
\n )}\n \n submitListingAction(\"draft\")}\n >\n Move to Drafts\n \n
\n \n this.showDropdown(e)}\n disabled={activeTransfer ? activeTransfer : moved && !undoMode}\n >\n {undoMode ? \"Undo\" : \"Adopted\"}\n \n\n {!undoMode && (\n
\n );\n }\n}\n","import StatusReasonOption from 'shared/StatusReasonOption';\nimport TransferListingOptions from 'shared/TransferListingOptions';\nimport React from 'react';\nimport classNames from 'classnames';\n\nconst ARCHIVED = \"archived\";\nconst STALLED = \"stalled\";\n\nexport default class ChangeStatusButton extends React.Component {\n state = {showDropdown: false}\n\n componentWillUnmount() {\n document.removeEventListener('click', this.hideDropdown);\n }\n\n showDropdown = (e) => {\n e.stopPropagation();\n this.setState({showDropdown: true});\n document.addEventListener('click', this.hideDropdown, false);\n }\n\n hideDropdown = () => {\n if (this.state.showDropdown) {\n this.setState({showDropdown: false});\n document.removeEventListener('click', this.hideDropdown);\n }\n }\n\n render() {\n const {\n listing,\n action,\n initialStatus,\n moved,\n statusReasons,\n primaryClass,\n dropupMenu\n } = this.props;\n const {showDropdown} = this.state;\n const activeStatus = listing.status;\n const undoMode = initialStatus != activeStatus && _.includes([ARCHIVED, STALLED], activeStatus);\n const notInitiallyStalled = initialStatus != STALLED;\n const isDraft = listing.status == 'draft';\n const transferStatus = _.get(listing.active_transfer, 'status');\n\n return (\n \n {_.map(statusReasons[ADOPTED], (reason) => (\n \n ))}\n
\n )}\n \n undoMode ? action(\"undo\") : this.showDropdown(e)}\n disabled={moved && !undoMode}\n >\n {undoMode ? \"Undo\" : \"Change Status\"}\n \n\n {!undoMode && (\n
\n );\n }\n}\n","export default function EditButton({listingId, primaryClass, width=\"half\", openInNewTab}) {\n return (\n \n {notInitiallyStalled && <>\n \n ))}\n }\n {!isDraft && <>\n \n ))}\n }\n
\n )}\n Move to Stall
\n {_.map(statusReasons[STALLED], (reason) => (\nTransfer Listing
\n {!listing.active_transfer && (\nMove to Archive
\n {_.map(statusReasons[ARCHIVED], (reason) => (\n\n \n Edit\n \n
\n );\n}\n","export default function ReversibleButton({\n activeStatus, newStatus, action, actionLabel, moved, width=\"half\", primaryClass\n}) {\n const undoMode = activeStatus == newStatus;\n\n return (\n \n action(undoMode ? \"undo\" : newStatus)}\n disabled={moved && !undoMode}\n >\n {undoMode ? \"Undo\" : actionLabel}\n \n
\n );\n}\n","import ListingCard from './ListingCard';\nimport EditButton from './DashboardListingCard/components/buttons/EditButton';\n\nexport default function DashboardListings({\n listings,\n openInNewTab,\n EXPIRING_SOON_DAYS,\n STATUS_REASONS,\n MAX_DASHBOARD_COUNT\n}) {\n return (\n \n {_.map(listings, (listing) =>\n
\n );\n}\n","import Switch from \"react-switch\";\nimport {updateEntity} from './libs/requestsManager';\n\nexport default class DataPrivacyToggle extends React.Component {\n constructor(props) {\n super(props);\n this.state = {data_public: props.organization.data_public};\n }\n\n handleToggle = () => {\n const {id} = this.props.organization;\n const {data_public} = this.state;\n\n return updateEntity(`/data_privacy`, {id, data_public: !data_public})\n .then((response) => {\n this.setState({data_public: !data_public});\n return response;\n })\n .catch((error) => {\n this.setState({error: error.response.data.error});\n return error;\n });\n }\n\n render() {\n const {id} = this.props.organization;\n const {data_public} = this.state;\n\n return(\n \n
\n )}\n \n \n
\n \n
\n )\n }\n}\n","import { addFavorite, deleteFavorite } from './shared/api_request_helpers';\n\nexport default class FavoriteButton extends React.Component {\n state = {favorite: this.props.favorite}\n\n toggle = (e) => {\n e.stopPropagation();\n this.setState(({favorite}) => ({favorite: !favorite}), this.persistFavorite);\n }\n\n persistFavorite = () => {\n const {id} = this.props;\n if (this.state.favorite) {\n addFavorite(id)\n } else {\n deleteFavorite(id);\n }\n }\n\n render() {\n const heart = this.state.favorite ? \"icon-heart\" : \"icon-heart-empty\"\n\n return (\n \n\n
\n \n {data_public ? \"Active\" : \"Disabled\"}\n
\n\n this.handleChange(e)}\n onFocus={this.props.onFocus ? e => this.props.onFocus(e) : null} />\n { limit ? {this.state.charLeft} : ''}\n
\n\n );\n }\n}\n","import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';\n\nexport function listToSelectOptions(list) {\n return _.map(list, (item) => [item, item]);\n}\n\nexport default class Select extends React.Component {\n constructor(props) {\n super(props);\n this.state = {dropdownOpen: false}\n }\n\n updateField = (e) => {\n if (e.target.value === \"\") {\n this.props.updateField({target: {\n name: e.target.name,\n value: null\n }});\n } else {\n this.props.updateField(e);\n }\n }\n\n toggleSelect = () => this.setState(({dropdownOpen}) => ({dropdownOpen: !dropdownOpen}));\n\n humanizedValue = (value, options) => {\n if (isNaN(value) || value == \"\") {\n return value;\n } else {\n const option = _.find(options, (o) => o[0] == value) || [null, \"\"];\n return option[1];\n }\n }\n\n render() {\n const {label, value, required, fieldName, defaultOption, options, error=[]} = this.props;\n const requiredField = required ? '*' : null;\n const defaultValue = defaultOption ? defaultOption[1] : null;\n\n return (\n \n \n {error.length > 0 && \n \n {(_.isNil(value) || value === defaultOption[0]) ? defaultValue : this.humanizedValue(value, [defaultOption, ...options])}\n \n \n {defaultOption[0] === \"\" ? null :\n this.updateField(e)}\n >\n {defaultOption[1]}\n \n }\n { _.map(options, ([value, display]) =>\n this.updateField(e)}\n >\n {display}\n \n )}\n \n \n
\n )\n }\n}\n","import ReactSlider from 'react-slider';\n\nexport default function Slider(props) {\n const {name, min, max, step, value, before, after, setTerm, setTermLabel, disabled} = props;\n\n const format = (value) => {\n const overflow = value == max ? '+' : '';\n return [before, value, overflow, after].join('');\n };\n const fakeEvent = (value) => ({target: {name, value}});\n\n return (\n { _.capitalize(error[0]) }
}\n\n \n setTerm(fakeEvent(newValue))}\n onChange={(newValue) => setTermLabel(fakeEvent(newValue))} />\n
\n );\n}\n","import LightBox from 'react-images';\n\nexport default class Gallery extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n images: this.props.images,\n open: false,\n currentImage: 0,\n width:0,\n height:100\n }\n }\n\n imageNumber(number) {\n return number%this.state.images.length;\n }\n\n openLightbox(e, currentImage = 0) {\n e.preventDefault();\n this.setState({open: true, currentImage});\n }\n\n closeLightbox(_e) {\n this.setState({open: false});\n }\n\n selectNextImage(_e) {\n const { currentImage } = this.state;\n this.setState({currentImage: this.imageNumber(currentImage+1)});\n }\n\n selectPreviousImage(_e) {\n const { currentImage } = this.state;\n this.setState({currentImage: this.imageNumber(currentImage-1)});\n }\n\n render() {\n const {open, currentImage, images} = this.state;\n const {name} = this.props.listing;\n const {name: orgName} = this.props.organization;\n\n return (\n \n {_.isArray(value) ? `${format(value[0])} to ${format(value[1])}` : format(value)}\n
\n \n this.closeLightbox(e)}\n onClickNext={e => this.selectNextImage(e)}\n onClickPrev={e => this.selectPreviousImage(e)}\n currentImage={currentImage}\n backdropClosesModal={true}\n />\n
\n );\n }\n}\n","import moment from 'moment';\nimport pluralize from 'pluralize';\nimport ahoy from 'ahoy.js';\nimport PopoverShare from './PopoverShare';\nimport { preventDefault } from './shared/events';\nimport { addFavorite, deleteFavorite } from './shared/api_request_helpers';\nimport { breedsToShortString } from './shared/listing_helpers';\n\nexport const listingPath = (slug) => `/available-horses/${slug}`;\n\nfunction daysRemainingLabel(days_remaining) {\n if (days_remaining <= 0 || days_remaining === undefined) {\n return \"Listing expired\";\n } else {\n return `Listing expires in ${_.round(days_remaining)} days`;\n }\n}\n\nexport default class ListingCard extends React.Component {\n state = {\n days_remaining: this.props.listing.days_remaining,\n percent_remaining: this.props.listing.percent_remaining,\n favorite: this.props.favorite\n }\n\n static getDerivedStateFromProps(props, state) {\n const {days_remaining, percent_remaining, status} = props.listing;\n if (status === \"published\") {\n return {days_remaining, percent_remaining};\n }\n return null;\n }\n\n toggleFavorite = (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n this.setState(({favorite}) => ({favorite: !favorite}), this.persistFavorite);\n }\n\n persistFavorite = () => {\n const {id} = this.props.listing;\n if (this.state.favorite) {\n addFavorite(id)\n } else {\n deleteFavorite(id);\n }\n }\n\n render() {\n const {listing, moved, contributor, adopter, noToggler, userType, userID, trackEvent} = this.props;\n const {\n id, slug, name, gender, breeds, age, height, location,\n status, status_reason, status_changed_at, cover\n } = listing;\n const {days_remaining, percent_remaining, favorite} = this.state;\n const published = status == 'published' && days_remaining > 0;\n const notAvailable = adopter && !published;\n\n const trackClick = () => {\n if (trackEvent) {\n const path = window.location.pathname + window.location.search;\n ahoy.track(trackEvent, {listing_id: id, user_type: userType, user_id: userID, path});\n }\n };\n\n return (\n \n \n {images.map((image, index) => {\n const imageAlt = `My Right Horse: ${name} ${orgName} photo ${index+1}`;\n return (\n this.openLightbox(e, index)}\n alt={imageAlt}\n />\n )\n })}\n
\n \n \n 
\n {published && !noToggler && (\n \n )}\n {adopter && (\n \n )}\n \n \n {cropImage !== null ? (\n this.imageRef = i}\n crop={crop}\n />\n ) : (\n \n \n {cropImage !== null ? (\n \n ) : (\n \n )}\n \n \n \n );\n }\n}\n","export default class DateInput extends React.Component {\n constructor(props) {\n super(props);\n this.state = {...props};\n }\n\n localUpdate = (e) => this.setState({value: e.target.value});\n\n render() {\n const {label, required, placeholder, updateField, fieldName, error=[], has_errors} = this.props;\n const {value} = this.state;\n const requiredField = required ? '*' : null;\n return (\n \n \n );\n}\n","import { useContext } from 'react';\n\nimport StepContext from '@/contexts/StepContext';\nimport ListingContext from '../../../../contexts/ListingContext';\nimport { stepHasErrors } from '../../helpers/hasErrors';\n\nfunction stepIcon({complete, skip, error, step, currentStep}) {\n if (skip) return ;\n if (complete) return ;\n if (error && step != currentStep) return ;\n return currentStep;\n}\n\nfunction stepSubText({active, skip}) {\n if (active || skip) return null;\n return Click here to modify;\n}\n\nexport default function InfoStep({currentStep, className, children, title, skip}) {\n const {errors} = useContext(ListingContext);\n const {step, gotoStep} = useContext(StepContext);\n\n const hasErrors = stepHasErrors(errors, currentStep);\n\n const active = String(currentStep) === String(step);\n const complete = parseInt(currentStep, 10) < parseInt(step, 10) && !hasErrors;\n\n return (\n gotoStep(currentStep)}\n >\n \n {stepIcon({step, complete, skip, currentStep, error:hasErrors})}\n
\n {active ? children : null}\n
\n )\n}\n","import { useContext } from 'react';\n\nimport ListingContext from '@/contexts/ListingContext';\n\nimport InfoStep from './InfoStep';\n\nexport default function InfoStepFive() {\n const {listing: {has_behavior_profile}={}} = useContext(ListingContext);\n const skip = !has_behavior_profile;\n return (\n {name}
\n\n {location && (\n
\n \n );\n }\n}\n","import { preventDefault } from 'shared/events';\n\nexport default class BooleanSelect extends React.Component {\n constructor(props) {\n super(props);\n const {complete} = props;\n this.state = {complete};\n }\n\n toggle = () => {\n const {complete} = this.state;\n const {fieldName, updateField} = this.props;\n this.setState({complete: !complete});\n updateField(fieldName, !complete);\n }\n\n render() {\n const {complete} = this.state;\n const {\n label,\n fieldName,\n trueLabel='Complete',\n falseLabel='Incomplete'\n } = this.props;\n\n return (\n \n {location.city}, {location.state}\n
\n )}\n\n {_.compact([\n breedsToShortString(breeds),\n gender,\n (age && pluralize('year', age, true)),\n (height && `${height} HH`)\n ]).join(' / ')}\n
\n\n {notAvailable && (\n\n This horse has been adopted!\n
\n )}\n\n {contributor && <>\n {published && (\n\n
\n \n \n \n {daysRemainingLabel(days_remaining)}\n \n
\n )}\n {status_reason && (\n \n {status == 'stalled' && 'In '}\n {status_reason}: {moment(status_changed_at).format('M/D/YYYY')}\n
\n )}\n }\n {published && noToggler && (\n\n \n
\n )\n }\n}\n","import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';\nimport ReactCrop from 'react-image-crop';\n\nimport superagent from 'superagent';\n\nconst ASPECT = 16 / 10;\nconst MODAL_MAX_WIDTH = 466;\nconst NULL_CROPPABLE = {width: 1, height: 1};\n\nconst FILE_NAME_REGEX = /filename[^;=\\n]*=((['\"]).*?\\2|[^;\\n]*)/;\n\nconst asPercent = (pixels, totalPixels) => pixels / totalPixels * 100;\n\nconst centerCrop = ({width, height}) => {\n if (width / height < ASPECT) {\n const newWidth = width * 0.9;\n const newHeight = newWidth / ASPECT;\n return {x: 5, y: asPercent(height - newHeight, height) / 2, width: 90};\n } else {\n const newHeight = height * 0.9;\n const newWidth = newHeight * ASPECT;\n return {x: asPercent(width - newWidth, width) / 2, y: 5, height: 90};\n }\n}\n\nconst cropSize = ({width, height}=NULL_CROPPABLE) => {\n const aspectRatio = height !== 0 ? width / height : 1;\n const cropModalWidth = _.min([MODAL_MAX_WIDTH, width]);\n const cropModalHeight = cropModalWidth / aspectRatio;\n return {cropModalWidth, cropModalHeight};\n}\n\nexport default class CropModal extends React.Component {\n constructor(props) {\n super(props);\n const {croppedImage, uncroppedImage} = props;\n\n const {url, crop_width, crop_x, crop_y} = croppedImage;\n const cropCoordinates = _.isNil(crop_x) ? centerCrop(uncroppedImage) : {\n x: asPercent(crop_x, uncroppedImage.width),\n y: asPercent(crop_y, uncroppedImage.height),\n width: asPercent(crop_width, uncroppedImage.width)\n };\n const crop = {...cropCoordinates, aspect: ASPECT};\n const {cropModalWidth, cropModalHeight} = cropSize(uncroppedImage);\n\n this.state = {\n open: true,\n cropImage: null,\n fileName: url,\n cropModalWidth,\n cropModalHeight,\n uncroppedUrl: uncroppedImage.url,\n crop\n };\n }\n\n updateCropState = (crop, pixelCrop) => {\n this.setState({crop, pixelCrop});\n }\n\n setCropImage = (res) => {\n let {filename, open} = this.state;\n if (!open) return;\n const disposition = res.header['content-disposition'];\n if (_.includes(disposition, 'inline')) {\n const matches = FILE_NAME_REGEX.exec(disposition);\n if (matches != null && matches[1]) {\n filename = matches[1].replace(/['\"]/g, '');\n }\n }\n this.setState({cropImage: res.text, fileName: filename});\n }\n\n cropImage = () => {\n const {pixelCrop} = this.state;\n const imageRef = this.imageRef;\n const canvas = document.createElement('canvas');\n this.drawImage(canvas, imageRef, pixelCrop);\n\n new Promise((resolve) => {\n canvas.toBlob(blob => {\n blob.name = this.state.fileName;\n window.URL.revokeObjectURL(this.fileUrl);\n this.fileUrl = window.URL.createObjectURL(blob);\n resolve(blob);\n }, 'image/jpeg');\n }).then((blob) => {\n const file = new File([blob], blob.name);\n file.preview = this.fileUrl;\n this.props.updateCroppedImage(file, pixelCrop);\n });\n }\n\n drawImage = (canvas, imageRef, pixelCrop) => {\n canvas.width = pixelCrop.width;\n canvas.height = pixelCrop.height;\n const context = canvas.getContext('2d');\n\n context.drawImage(\n imageRef,\n pixelCrop.x,\n pixelCrop.y,\n pixelCrop.width,\n pixelCrop.height,\n 0,\n 0,\n pixelCrop.width,\n pixelCrop.height\n );\n }\n\n componentDidMount() {\n superagent.get(`/listing_media/${_.get(this, 'props.croppedImage.id')}`).then(this.setCropImage);\n }\n\n render() {\n const {\n open,\n cropImage,\n cropModalWidth,\n cropModalHeight,\n crop,\n uncroppedUrl\n } = this.state;\n\n const {toggle} = this.props;\n\n return (\n \n
\n \n
\n \n \n {trueLabel}\n \n
\n \n
\n \n \n {falseLabel}\n \n
\n \n \n
\n )}\n Preparing image
\n \n \n
\n )\n }\n}\n","import { useEffect, useState, useContext } from 'react';\nimport Dropzone from 'react-dropzone';\nimport {concat, map} from 'lodash/fp';\n\nimport { preventDefault } from 'shared/events';\nimport flash from 'shared/flash';\n\nimport ListingContext from '@/contexts/ListingContext';\n\nconst ALLOWED_DOCUMENTS = 10;\n\nfunction fileCount(uploading, files) {\n if (uploading) {\n return \"Uploading documents\";\n } else {\n const moreDocuments = ALLOWED_DOCUMENTS - _.size(files);\n return `Upload up to ${moreDocuments} more documents.`;\n }\n}\n\nexport default function DocumentUpload({files:value, label, required}) {\n const [files, setFiles] = useState(value);\n const [uploading, setUploading] = useState(false);\n const [saveStatus, setSaveStatus] = useState();\n const {uploadAttachments, deleteAttachment} = useContext(ListingContext);\n\n useEffect(() => {\n if(saveStatus) {\n flash(...saveStatus);\n setSaveStatus(null);\n }\n }, [saveStatus]);\n useEffect(() => { setFiles(value); }, [value]);\n\n const onDrop = async (acceptedFiles) => {\n setUploading(true);\n\n setFiles(concat(map(({ name, preview }) => ({\n uploading: true,\n id: preview,\n document_name: name\n }), acceptedFiles)));\n\n try {\n await uploadAttachments('documents', acceptedFiles);\n setSaveStatus(['success', 'Uploaded Documents.']);\n } catch (e) {\n console.warn(e);\n setSaveStatus(['error', \"Error uploading.\"]);\n }\n setUploading(false);\n };\n\n const removeDocument = async (id) => {\n try {\n await deleteAttachment('documents', id);\n } catch(e) {\n console.warn(e);\n setSaveStatus(['error', 'Unable to delete image']);\n }\n }\n\n const requiredField = required ? '*' : null;\n\n return (\n \n { _.capitalize(error.join(', ')).replace(/_/g, ' ') }\n
\n \n \n \n \n \n \n Upload Documents\n \n or drag files here.\n \n \n
\n );\n}\n","export default class HandsInput extends React.Component {\n constructor(props) {\n super(props);\n this.state = { value: this.props.value };\n }\n\n translateToHands = ({target: {value}}) => {\n this.setState({value: value % 1 >= 0.4 ? _.ceil(value) : value});\n }\n\n render() {\n const {label, required, placeholder, updateField, fieldName, error=[], has_errors} = this.props;\n const {value} = this.state;\n const requiredField = required ? '*' : null;\n return (\n \n
\n \n
\n {_.map(files, ({id, document_name, document_extension, uploading=false}) => {\n const iconName = `icon-${document_extension}-documenticon`;\n return (\n \n { fileCount(uploading, files) }\n
\n \n
\n
\n )\n })}\n \n \n Delete\n \n
\n \n \n { document_name }\n
\n \n
\n \n
\n )\n }\n}\n","import { useContext, useEffect, useState } from 'react';\nimport { ReactSortable } from \"react-sortablejs\";\nimport Dropzone from 'react-dropzone';\nimport pluralize from 'pluralize';\nimport { map, reject, curry, concat} from 'lodash/fp';\n\nimport { preventDefault } from 'shared/events';\nimport flash from 'shared/flash';\n\nimport ListingContext from '@/contexts/ListingContext';\n\nimport CropModal from './CropModal';\n\nconst MAX_IMAGES = 8;\nconst IS_NUMERIC = /^\\d+$/;\n\nconst push = curry((value, array) => _.isArrayLike(array) ? concat(array, [value]) : [value]);\n\nconst updateImage = (id, update) => (img) => img.id === id ?\n {...img, ...update} :\n img;\n\nconst uploadMoreMessage = (count) => count < MAX_IMAGES ?\n `Upload up to ${MAX_IMAGES - count} more ${pluralize('image', MAX_IMAGES - count)}` :\n `Your listing contains the maximum number of images (${MAX_IMAGES})`;\n\nexport default function MediaUpload({\n images:value,\n\n cover_image_id='',\n label,\n required,\n modalImages,\n published,\n error:errors=[]\n}) {\n const [displayCropModal, setDisplayCropModal] = useState(false);\n const [saveStatus, setSaveStatus] = useState();\n const [images, setImages] = useState(value);\n const [uploadingImages, setUploadingImages] = useState(false);\n\n const {uploadImageCrop, deleteAttachment, uploadAttachments, updateField, updateImageOrder} = useContext(ListingContext);\n\n useEffect(() => {\n if (saveStatus) {\n flash(...saveStatus);\n setSaveStatus(null)\n }\n }, [saveStatus]);\n\n useEffect(() => { setImages(value) }, [value]);\n\n const onDrop = async (acceptedImages) => {\n _.each(acceptedImages, addAndModifyImages);\n\n try {\n await uploadAttachments('images', acceptedImages);\n setSaveStatus(['success', 'Uploaded Successfully']);\n } catch(e) {\n setSaveStatus(['error', 'Uploaded failed']);\n _.each(images, (image) => {\n if (!IS_NUMERIC.test(image.id)) URL.revokeObjectURL(image.id);\n });\n }\n setUploadingImages(false)\n };\n\n const addAndModifyImages = (file) => {\n const id = _.uniqueId();\n addImage({id, uploading: true});\n\n const reader = new FileReader();\n reader.onload = ({target}) => {\n const url = target.result;\n setImages(map(updateImage(id, {url})));\n };\n reader.onerror = (error) => {\n setImages(reject({id}));\n alert(\"Unable to upload file. Please use a different image.\");\n window.Rollbar && Rollbar.error(\"File Reader failed to load image\", error);\n }\n reader.readAsDataURL(file);\n };\n\n const addImage = (image) => {\n setImages(push(image));\n setUploadingImages(true);\n };\n\n const updateCroppedImage = async (file, pixelCrop) => {\n let id = cover_image_id;\n\n setImages(map((image) => {\n if (image.id !== id) return image;\n return {\n url: file.preview,\n uploading: true,\n id: file.preview\n };\n }));\n setUploadingImages(true);\n setDisplayCropModal(false);\n await uploadImageCrop(cover_image_id, pixelCrop);\n setUploadingImages(false)\n };\n\n const removeMedia = async (id) => {\n try {\n await deleteAttachment('images', id);\n } catch(e) {\n console.warn(e);\n saveStatus(['error', 'Unable to delete image']);\n }\n };\n\n const toggleCropModal = () => setDisplayCropModal((x) => !x);\n\n const requiredField = required ? '*' : '';\n const lastPublishedPhoto = published && _.size(images) == 1;\n\n const coverImage = _.find(images, {id: cover_image_id});\n const modalCoverImage = _.find(modalImages, {id: cover_image_id});\n const imagePresence = coverImage || modalCoverImage;\n\n return (\n \n { _.capitalize(error.join(', ')).replace(/_/g, ' ') }\n
\n \n \n \n {errors.length > 0 && = MAX_IMAGES}\n accept=\"image/*\"\n >\n \n or drag files here.\n \n
\n )\n}\n","import { preventDefault } from 'shared/events';\nexport { listToSelectOptions } from '../../Fields/Select';\n\nconst selectedOptions = ({ options, values }) => {\n const acceptableValues = _.map(options, _.first);\n const valid = (value) => _.includes(acceptableValues, value);\n return _.filter(values, valid);\n}\n\nconst listToBoolMap = (list) => {\n return _.reduce(list, (values, value) => ({...values, [value]: true }), {});\n}\n\nexport default class MultiSelect extends React.Component {\n constructor(props) {\n super(props);\n const values = listToBoolMap(selectedOptions(props));\n\n this.state = { values };\n }\n\n toggleSelection = (value) => {\n const checked = !_.get(this.state.values, value);\n\n this.setState((state) => {\n return _.set(state.values, value, checked);\n });\n\n this.setState(({values}) => {\n this.props.updateField(_.reduce(values, (selectedValues, checked, value) => {\n if (checked) {\n return [...selectedValues, value];\n } else {\n return selectedValues;\n }\n }, []));\n });\n }\n\n render() {\n const {label, required, options, error=[]} = this.props;\n const { values } = this.state;\n const requiredField = required ? '*' : null;\n\n const checked = (value) => !!values[value];\n\n return (\n Upload at least 1 image
}\n \n
\n {displayCropModal && imagePresence && (\n \n updateImageOrder(_.map(images, (i) => i.id))}\n >\n {_.map(images, ({id, url, uploading=false}) => (\n
\n \n {uploadingImages ? \"Uploading images.\" : uploadMoreMessage(_.size(images))}\n
\n\n \n
\n ))}\n \n \n ![]()
\n {uploading ?
\n Processing image
: ''}\n \n
\n \n {id === cover_image_id ? (\n \n Crop Image\n \n ) : (\n \n Set Thumbnail\n \n )}\n
\n \n \n Delete\n \n
\n \n \n
\n )\n }\n}\n","import BooleanSelect from \"./BooleanSelect\";\nimport MultiSelect, { listToSelectOptions } from \"./MultiSelect\";\n\nconst CRITERIA_OPTIONS = [\n 'Former Broodmare',\n 'Cribber',\n 'Requires Rehab',\n 'Has Career Limitations',\n];\n\nconst NOT_ELIGIBLE_MESSAGE = `\n Your horse does not appear to be eligible for the 2025\n Retired Racehorse Project’s Thoroughbred Makeover. You can still list this horse on\n myrighthorse.org, but they will not receive a scholarship listing or be cross promoted on\n the Retired Racehorse Project’s website. If you believe you’ve received this message in\n error, please contact therighthorse@aspca.org\n`;\n\nconst eligible = (rrp) => {\n if (!rrp) return;\n return (rrp.racehorse && rrp.last_race_date > '2023-07-01') || (rrp.broodmare && rrp.last_cover_date > '2023-01-01');\n};\nconst answered = (rrp) => {\n if (!rrp) return;\n return Boolean((rrp.racehorse && rrp.last_race_date) || (rrp.broodmare && rrp.last_cover_date));\n};\nconst promotable = (rrp) => {\n if (!rrp) return;\n return Boolean(eligible(rrp) && rrp.criteria?.length && rrp.ready);\n};\nconst withDerived = (rrp) => ({...rrp, eligible: eligible(rrp), promotable: promotable(rrp)});\n\nexport default function RRPQuestionare({value={}, updateField}) {\n const update = (key, newValue) => updateField('rrp', withDerived({...value, [key]: newValue}));\n \n return (\n { _.capitalize(error.join(', ')) }
\n \n {_.map(options, ([value, display]) => (\n
\n \n
\n ))}\n \n
\n \n update('criteria', newValue)}\n />\n \n : (\n
\n );\n}\n ","import ReactSlider from 'react-slider';\nimport { Popover, PopoverBody } from 'reactstrap';\n\nexport default class Slider extends React.Component {\n constructor(props) {\n super(props);\n this.state = {value: props.value, popoverOpen: false};\n }\n\n toggle = (e) => {\n e.preventDefault();\n this.setState({popoverOpen: !this.state.popoverOpen});\n }\n\n updateValue = (value) => {\n this.setState({value: value});\n this.props.updateField({target: { name: this.props.fieldName, value: value ? value : null}});\n }\n\n render() {\n const {minLabel, maxLabel, fieldName, min, max, step, label, valueLabels=[], helpText=[]} = this.props;\n const {value, popoverOpen} = this.state;\n var minDistance = (max-min)/20;\n const className = classnames('slider', {hasValue: value});\n\n return (\n \n
\n \n {value?.racehorse && (\n 2025 Thoroughbred Makeover-Eligible
\n\n\n
\n \n
\n \n update('racehorse', e.target.checked)}\n />\n \n
\n \n
\n \n update('broodmare', e.target.checked)}\n />\n \n
\n \n \n update('last_race_date', e.target.value)}/>\n
\n )}\n {value?.broodmare && (\n \n \n update('last_cover_date', e.target.value)}/>\n
\n )}\n {answered(value) && (eligible(value) ? <>\n \n {NOT_ELIGIBLE_MESSAGE}\n
\n ))}\n {promotable(value) && (\n \n Your horse will be promoted through Retired Racehorse Project’s Thoroughbred Makeover!\n
\n )}\n \n \n
\n );\n }\n}\n","export default class TextInput extends React.Component {\n constructor(props) {\n super(props);\n this.state = {...props};\n }\n\n localUpdate = (e) => this.setState({value: e.target.value});\n\n render() {\n const {label, required, placeholder, updateField, fieldName,\n error=[], has_errors} = this.props;\n const {value} = this.state;\n const requiredField = required ? '*' : null;\n return (\n \n \n
\n \n {valueLabels[_.clamp(value, 0, valueLabels.length - 1)]}\n \n \n {helpText[_.clamp(value, 0, helpText.length - 1)]}\n \n \n
\n ?
\n \n {minLabel || min}\n {maxLabel || max}\n
\n \n \n
\n )\n }\n}\n","import { pullAt } from 'lodash/fp';\nimport ReactPlayer from 'react-player';\nimport { preventDefault } from 'shared/events';\n\nexport default class VideoLinks extends React.Component {\n constructor(props) {\n super(props);\n this.state = {...props, newValue: ''};\n }\n\n localUpdate = (e) => this.setState({newValue: e.target.value})\n\n addVideo = (e) => {\n const value = [...(this.state.value || []), this.state.newValue];\n\n this.setState({value, newValue: ''});\n this.props.updateField({target: {value, name: this.props.fieldName}});\n }\n\n removeVideo = (index) => {\n const value = pullAt(index, this.state.value);\n\n this.setState({value});\n this.props.updateField({target: {value, name: this.props.fieldName}});\n }\n\n render() {\n const {error=[], has_errors} = this.props;\n const {value, newValue} = this.state;\n\n return (\n \n { _.capitalize(error.join(', ')).replace(/_/g, ' ') }\n
\n \n \n \n
\n )\n }\n}\n","import { Editor, Label } from \"@tinymce/tinymce-react\";\n\nconst CharacterMessage = ({characterCount, min, className}) => {\n if (characterCount >= min) return null;\n\n const charsRemaining = Math.max(0, min - characterCount);\n return (\n \n {charsRemaining} characters short of {min} character requirement\n \n );\n};\n\nexport default class DescriptionEditor extends React.Component {\n state = {value: \"\"}\n\n tinymce = React.createRef()\n\n localUpdate = (value) => this.setState({value})\n\n render() {\n const {\n label, required, min=0, placeholder, updateField, fieldName,\n error=[], has_errors\n } = this.props;\n const {value} = this.state;\n const requiredField = required ? '*' : null;\n const characterCount = _.invoke(this.tinymce, 'current.plugins.wordcount.body.getCharacterCount');\n\n return (\n \n { _.capitalize(error.join(', ')).replace(/_/g, ' ') }\n
\n {value &&\n \n
\n }\n \n {_.map(value, (url, index) => (\n
\n \n
\n ))}\n \n \n
\n \n
\n \n \n
\n \n \n \n
\n \n \n {\n this.tinymce.current = editor;\n this.localUpdate(editor.getContent());\n }}\n initialValue={this.props.value}\n init={{\n placeholder: 'Describe your horse',\n height: 300,\n menubar: false,\n plugins: [\n 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',\n 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',\n 'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'\n ],\n toolbar: 'undo redo | blocks | ' +\n 'bold italic forecolor | alignleft aligncenter ' +\n 'alignright alignjustify | bullist numlist outdent indent | ' +\n 'removeformat | help',\n content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'\n }}\n onEditorChange={this.localUpdate}\n onBlur={() => updateField(this.state.value)}\n />\n \n
\n );\n }\n}\n","import { useContext } from 'react';\n\nimport ListingContext from '@/contexts/ListingContext';\nimport StepContext from '@/contexts/StepContext';\n\nimport InfoStep from './InfoStep';\n\nexport default function InfoPreviewStep() {\n const {listing, unpublish} = useContext(ListingContext);\n const {step} = useContext(StepContext);\n\n const saveDraft = async () => {\n if (_.includes([\"published\", \"stalled\"], listing.status)) {\n await unpublish();\n }\n window.location.href = '/listings/drafted';\n };\n\n return (\n \n { _.capitalize(error.join(', ')).replace(/_/g, ' ') }\n
\n \n
\n\n \n Take a look at how your listing will appear in a search. If everything looks good, make it live so someone can find their right horse!
\n\n {stepIcon({step, complete, skip, currentStep, error:hasErrors})}\n \n \n {title}\n {stepSubText({active, skip})}\n \n \n
\n {active ? children : null}\n \n {title}\n {stepSubText({active, skip})}\n
\n \n
\n \n { \"Your horse has completed the Basic Behavior Profile. Make sure to select the correct result and provide the evaluator's name and completion date.\" }\n
\n\n
\n \n );\n}\n\n","import InfoStep from './InfoStep';\n\nexport default function InfoStepFour() {\n return (\n \n { \"This helps the adopter understand where a horse is at in its training.\" }\n
\n\n
\n You can add any documents you want here. Think of this as a storage folder for anything important the adopter might want to know.
\n\n
\n Document file types that can be uploaded here include JPEG, JPG, PNG, PDF, CSV, and DOCX.
\n\n { \"Let's start with the basics.\" }\n
\n\n \n
\n \n Adding extra details helps the right person find the right horse.\n
\n
\n { \"If you need to change these details later, it's easy to come back and make edits.\" }\n
\n
\n The best videos are just a few minutes long, in good lighting, without heavy editing or loud music.
\n\n
\n The most important photo is the conformation shot from the side of the horse. Photos of the front, rear legs, and a photo of the horse engaging in its discipline are helpful too.
\n\n
\n Image file types that can be uploaded here include JPEG, JPG, and PNG.
\n\n
\n \n {`\n Specify the location where the horse is currently residing. The primary location for\n your organization will automatically be selected if one isn't provided. This can be\n changed later.\n `}\n
\n\n
\n Select only the disciplines your horse has worked in or is well suited for.
\n\n
\n )\n }\n}\n","import DocumentUpload from '../DocumentUpload';\n\nexport default class StepFour extends React.Component {\n render() {\n const { documents } = this.props;\n\n return (\n \n
\n {_.map(behaviorFieldSet, (complete, fieldName) => (\n \n
\n \n
\n \n
\n );\n }\n}\n","import HandsInput from '../HandsInput';\nimport DateInput from '../DateInput';\nimport TextInput from '../TextInput';\nimport Select, {listToSelectOptions} from '../../../Fields/Select';\nimport Slider from '../Slider';\nimport BooleanSelect from '../BooleanSelect';\nimport DescriptionEditor from './DescriptionEditor';\nimport MultiSelect from '../MultiSelect';\n\nconst DESCRIPTION_MIN = 280;\nconst replacePriceError = (error) => _.replace(error, \"price\", \"adoption fee\");\n\nexport default function StepOne({\n name,\n price,\n breed,\n gender,\n color,\n birth_year,\n height,\n description,\n intake_date,\n microchip_serial_number,\n has_behavior_profile,\n temperament,\n temperament_short_descriptions,\n temperament_long_descriptions,\n breed_list,\n gender_list,\n color_list,\n breeds,\n\n errors={},\n ...props\n }) {\n\n const updateField = (e) => props.updateField(e.target.name, e.target.value);\n\n const breedOptions = listToSelectOptions(breed_list);\n\n if (errors['price']) errors['price'] = _.map(errors['price'], replacePriceError);\n return (\n \n
\n );\n}\n","import VideoLinks from '../VideoLinks';\nimport MediaUpload from '../MediaUpload';\n\nexport default class StepThree extends React.Component {\n\n render() {\n const {videos, images, large_images, cover_image_id, status, errors={}} = this.props;\n\n const updateField = (e) => {\n this.props.updateField(e.target.name, e.target.value);\n }\n\n return (\n \n
\n );\n }\n}\n","import Select from '../../../Fields/Select';\nimport MultiSelect, { listToSelectOptions } from '../MultiSelect';\nimport RRPQuestionare from '../RRPQuestionare'\n\nfunction collectionToSelectOptions(coll, valueKey='id', displayKey='name') {\n return _.map(coll, (item) => [item[valueKey], item[displayKey]]);\n}\n\nexport default class StepTwo extends React.Component {\n render() {\n const {\n primary_location={},\n location_id,\n locations,\n disciplines,\n discipline_list,\n rrp,\n errors={}\n } = this.props;\n\n const updateField = (e) => {\n this.props.updateField(e.target.name, e.target.value);\n };\n\n const defaultLocationOption = [primary_location.id, primary_location.name]\n const otherLocations = _.reject(locations, {id: primary_location.id||''});\n const locationOptions = collectionToSelectOptions(otherLocations);\n\n const disciplineOptions = listToSelectOptions(discipline_list);\n\n return (\n \n \n )}\n
\n );\n }\n}\n","export const FETCH_LISTING_SUCCESS = 'FETCH_LISTING_SUCCESS';\nexport const FETCH_LISTING_FAILURE = 'FETCH_LISTING_FAILURE';\n\nexport const SUBMIT_PROGRESS_SUCCESS = 'SUBMIT_PROGRESS_SUCCESS';\nexport const SUBMIT_PROGRESS_FAILURE = 'SUBMIT_PROGRESS_FAILURE';\n\nexport const SET_IS_FETCHING = 'SET_IS_FETCHING';\nexport const SET_IS_SAVING = 'SET_IS_SAVING';","import {eq} from \"lodash/fp\";\n\nexport default function hasErrors(errors, stepKeys) {\n if (_.isEmpty(errors)) return false;\n const errorKeys = _.keys(errors);\n return _.some(stepKeys, (key) => _.some(errorKeys, eq(key)));\n}\n\nexport function errorsWithFullMessages(errorMap) {\n return _.mapValues(errorMap, (errors, key) => {\n return _.map(errors, (error) => `${key} ${error}`)\n });\n}\n\nexport const STEP_KEYS = {\n '1': [\n 'name',\n 'price',\n 'breed',\n 'gender',\n 'color',\n 'age',\n 'height',\n 'intake_date',\n 'microchip_serial_number',\n 'temperament',\n 'description'\n ],\n '2': ['location_id', 'disciplines'],\n '3': ['videos', 'listing_media'],\n '4': ['documents'],\n '5': [\n 'behavior_profile_evaluator_name',\n 'behavior_profile_evaluation_date'\n ],\n}\n\nSTEP_KEYS['preview'] = _.uniq(_.flatten(_.values(STEP_KEYS)));\n\nexport const stepHasErrors = (errors, step) => hasErrors(errors, STEP_KEYS[String(step)]);\n","import { Provider as StepProvider } from '@/contexts/StepContext';\nimport { Provider as ListingProvider } from '@/contexts/ListingContext';\n\nimport FormBox from './containers/FormBox';\nimport InfoBox from './containers/InfoBox';\n\nexport default function ListingWizardApp({userType, userID, ...listing}) {\n return (\n \n \n
\n \n { editing ? (\n
\n );\n }\n}\n","import { Popover, PopoverBody } from 'reactstrap';\nimport copy from 'copy-text-to-clipboard';\nimport ahoy from 'ahoy.js';\nimport flash from 'shared/flash';\nimport loadPinterest from './shared/pinterest';\nimport { breedsToString } from './shared/listing_helpers';\n\nconst X_HASHTAGS = [\n \"myrighthorse\",\n \"aspca\"\n];\n\nconst FACEBOOK_HASHTAG = \"myrighthorse\";\n\nexport default class PopoverShare extends React.Component {\n state = {popoverOpen: false}\n\n trackShare = (share_type) => {\n const {listing: {id:listing_id}, userType, userID} = this.props;\n const ahoy_props = {share_type, listing_id, url: window.location.href};\n\n if (userType && userID) {\n ahoy_props.user_type = userType\n ahoy_props.user_id = userID\n }\n\n ahoy.track(\"LISTING_SHARE\", ahoy_props);\n }\n\n toggle = (e) => {\n e.preventDefault();\n this.setState(({popoverOpen}) => ({popoverOpen: !popoverOpen}));\n }\n\n copyLink = () => {\n const {url} = this.props.listing;\n if (copy(url)) {\n flash('success', 'Link Copied!');\n }\n }\n\n fbShare = () => {\n const {url} = this.props.listing;\n const fbUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}&hashtag=%23${FACEBOOK_HASHTAG}`;\n window.open(fbUrl, 'facebook-popup', 'height=350, width=600');\n }\n\n xShare = () => {\n const {url, breeds} = this.props.listing;\n const hashtags = _.join([X_HASHTAGS, breedsToString(breeds).replace(/ /g, '')], ',');\n const xUrl = `https://twitter.com/share?url=${url}&hashtags=${hashtags}`;\n window.open(xUrl, 'twitter-popup', 'height=350,width=600');\n }\n\n pinterestShare = async () => {\n const {url, cover, name, age, breeds, gender, location} = this.props.listing;\n const PinUtils = await loadPinterest();\n\n if (!PinUtils) return alert(\"Pintrest did not successfully load.\");\n\n PinUtils.pinOne({\n url,\n media: cover,\n description: `${name} is a ${age} year old #${breedsToString(breeds)} ${gender} in ${location.city}, ${location.state}. #myrighthorse`\n });\n }\n\n share = (source, method) => (e) => {\n e.preventDefault();\n this.trackShare(source);\n method();\n }\n\n render() {\n const {listing: {id}, noToggler} = this.props;\n\n const SocialShareButtons = <>\n \n \n \n \n ;\n\n return noToggler ? (\n \n {SocialShareButtons}\n \n ) : <>\n \n \n \n {error &&
\n ) : (\n {error}
}\n \n \n http://{window.location.host}/organizations/\n \n
\n \n \n {`http://${window.location.host}/organizations/${slug}`}\n \n \n
\n )}\n \n \n {editMode ? (\n setName(e.target.value)}\n onClick={stopAll()}\n onBlur={saveName}\n onKeyUp={keyboardShortcuts}\n className=\"name\"/>\n ) : (\n {name || \"Search Filters\"}\n )}\n \n \n
\n );\n}\n","import {Typeahead, AsyncTypeahead} from 'react-bootstrap-typeahead';\nimport { Multiselect } from 'multiselect-react-dropdown';\n\nimport Slider from '../../Fields/Slider';\nimport Select, {listToSelectOptions} from '../../Fields/Select';\nimport LocationTypeahead from './LocationTypeahead';\nimport {filterUnspecifiedTerms, humanizedTerms} from '../helpers/terms';\n\nconst ZIP_CODE_MATCHER = /^\\d{5}(-\\d{4})?$/;\nconst THREEPLUS_LETTERS_MATCHER = /[a-z]{3,}/i;\nconst BLUE = \"var(--secondary)\";\n\nconst isInvalidLocation = (location) => !(\n _.isString(location) && (\n ZIP_CODE_MATCHER.test(location) || THREEPLUS_LETTERS_MATCHER.test(location)\n )\n);\nconst organizationLabel = ({organizations, terms:{organization_id}}) => (\n _.get(_.find(organizations, {id: _.toNumber(organization_id)}), 'name') || \"\"\n)\n\nexport default class Filters extends React.Component {\n state = {\n location: this.props.terms.location || '',\n organization: organizationLabel(this.props)\n };\n\n componentDidUpdate(prevProps) {\n if (prevProps.terms.location != this.props.terms.location) {\n this.setState({location: this.props.terms.location})\n }\n if (prevProps.terms.organization_id != this.props.terms.organization_id) {\n this.setState({organization: organizationLabel(this.props)})\n }\n }\n\n emptyTypeahead = (string, label) => {\n this.setState({[label.replace(\"_id\", \"\")]: string})\n if (_.isEmpty(string)) {\n this.props.setFilterTerm(label, string);\n }\n }\n\n selectTypeahead = (selected, name, property) => {\n if (!_.isEmpty(selected)) {\n this.setState({[name.replace(\"_id\", \"\")]: selected})\n this.props.setFilterTerm(name, _.get(selected, property, selected));\n }\n }\n\n render() {\n const {\n advanced,\n setFilterTerm,\n terms,\n setTermLabel,\n organizations,\n breeds,\n genders,\n disciplines,\n googleMapsKey\n } = this.props;\n const {isLoadingLocation, locationOptions, location, organization} = this.state;\n\n const activeAdvancedFilters = filterUnspecifiedTerms(_.omit(terms, \"search\"));\n const humanizedActiveFilters = humanizedTerms(activeAdvancedFilters, organizations);\n const organizationOptions = organizations.map((org) => ({id: org.id, label: org.name}));\n const onChange = ({target: {name, value}}) => setFilterTerm(name, value);\n\n return (\n\n
\n );\n }\n}\n","import React from 'react';\nimport classnames from 'classnames';\n\nexport default function ListingMarker({location, active, setActive}) {\n const {id, name, address, city, state, zipcode, listing_count} = location;\n return (\n \n
\n {advanced ? <>\n \n \n \n
\n \n
\n \n \n this.selectTypeahead(selected, \"organization_id\", \"id\")}\n onInputChange={(string) => this.emptyTypeahead(string, \"organization_id\")}\n inputProps={{autoComplete: \"chrome-off\"}} />\n
\n \n \n this.selectTypeahead(selected, \"location\")}\n onInputChange={(string) => this.emptyTypeahead(string, \"location\")}\n googleMapsKey={googleMapsKey}/>\n
\n \n \n
\n \n
\n : (!_.isEmpty(humanizedActiveFilters) && (\n \n \n
\n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n Filtering results by {humanizedActiveFilters}
\n ))}\n setActive(id)}>\n
\n );\n}\n","import {useState, useCallback} from 'react';\nimport {AsyncTypeahead} from 'react-bootstrap-typeahead';\nimport {Loader} from '@googlemaps/js-api-loader';\n\nlet loader;\nconst getLoader = (key) => {\n if (!loader) loader = new Loader({apiKey: key, \"language\": \"en\"});\n return loader;\n}\n\nexport default function LocationTypeahead({selected, onChange, onInputChange, googleMapsKey}) {\n const [loading, setLoading] = useState(false);\n const [options, setOptions] = useState([]);\n\n const locationUpdate = useCallback((query) => {\n setLoading(true);\n getLoader(googleMapsKey).importLibrary('places').then(({AutocompleteService}) => {\n const autocomplete = new AutocompleteService();\n const queryObject = {\n input: query,\n types: ['(regions)'],\n componentRestrictions: {country: 'us'}\n };\n autocomplete.getPlacePredictions(queryObject, (predictions) => {\n setOptions(_.map(predictions, (p) => p.description.slice(0, -5)));\n setLoading(false);\n });\n });\n }, [googleMapsKey]);\n\n return (\n \n
\n \n
\n \n
\n {city}, {state} {zipcode}\n
\n {name}
\n {address}\n\n {city}, {state} {zipcode}\n
\n
\n {listing_count}
\n Horses Available\nThe map cannot be displayed. Please try again later
;\n\n const {center, zoom} = mapPosition(this.props.center, bounds, this.mapRef.current);\n\n return (\n \n \n {_.map(locations, (location) => {\n const {latitude, longitude} = location;\n if (latitude && longitude) {\n return
\n )\n }\n}\n\nconst MAP_STYLE =\n[\n {\n \"featureType\": \"administrative\",\n \"elementType\": \"all\",\n \"stylers\": [\n {\n \"lightness\": \"40\"\n },\n {\n \"gamma\": \"1.73\"\n },\n {\n \"weight\": \"2.24\"\n },\n {\n \"hue\": \"#00ff3b\"\n },\n {\n \"visibility\": \"on\"\n }\n ]\n },\n {\n \"featureType\": \"administrative\",\n \"elementType\": \"labels.text.fill\",\n \"stylers\": [\n {\n \"color\": \"#444444\"\n }\n ]\n },\n {\n \"featureType\": \"landscape\",\n \"elementType\": \"all\",\n \"stylers\": [\n {\n \"color\": \"#f2f2f2\"\n }\n ]\n },\n {\n \"featureType\": \"landscape.natural.landcover\",\n \"elementType\": \"all\",\n \"stylers\": [\n {\n \"lightness\": \"17\"\n },\n {\n \"saturation\": \"-45\"\n },\n {\n \"gamma\": \"4.75\"\n },\n {\n \"weight\": \"1.46\"\n }\n ]\n },\n {\n \"featureType\": \"landscape.natural.terrain\",\n \"elementType\": \"all\",\n \"stylers\": [\n {\n \"lightness\": \"-26\"\n },\n {\n \"gamma\": \"2.68\"\n },\n {\n \"saturation\": \"35\"\n }\n ]\n },\n {\n \"featureType\": \"landscape.natural.terrain\",\n \"elementType\": \"geometry\",\n \"stylers\": [\n {\n \"visibility\": \"on\"\n },\n {\n \"lightness\": \"44\"\n },\n {\n \"weight\": \"4.98\"\n },\n {\n \"gamma\": \"8.61\"\n },\n {\n \"hue\": \"#ff0000\"\n }\n ]\n },\n {\n \"featureType\": \"landscape.natural.terrain\",\n \"elementType\": \"geometry.fill\",\n \"stylers\": [\n {\n \"lightness\": \"53\"\n }\n ]\n },\n {\n \"featureType\": \"poi\",\n \"elementType\": \"all\",\n \"stylers\": [\n {\n \"visibility\": \"off\"\n }\n ]\n },\n {\n \"featureType\": \"road\",\n \"elementType\": \"all\",\n \"stylers\": [\n {\n \"saturation\": -100\n },\n {\n \"lightness\": 45\n }\n ]\n },\n {\n \"featureType\": \"road.highway\",\n \"elementType\": \"all\",\n \"stylers\": [\n {\n \"visibility\": \"simplified\"\n }\n ]\n },\n {\n \"featureType\": \"road.arterial\",\n \"elementType\": \"labels.icon\",\n \"stylers\": [\n {\n \"visibility\": \"off\"\n }\n ]\n },\n {\n \"featureType\": \"transit\",\n \"elementType\": \"all\",\n \"stylers\": [\n {\n \"visibility\": \"off\"\n }\n ]\n },\n {\n \"featureType\": \"water\",\n \"elementType\": \"all\",\n \"stylers\": [\n {\n \"color\": \"#BBD9E1\"\n },\n {\n \"visibility\": \"on\"\n }\n ]\n }\n]\n","import { useState, useContext } from \"react\";\nimport ahoy from 'ahoy.js';\nimport flash from 'shared/flash';\nimport { subscribeSearch, unsubscribeSearch } from 'shared/api_request_helpers';\nimport { filterUnspecifiedTerms } from \"../helpers/terms\";\nimport SessionContext from '@/contexts/SessionContext';\n\nconst LEGAL_OPT_IN_MESSAGE = `\n By providing my email address and saving this search, I agree to receive emails from the ASPCA, which may include updates on horses that meet my saved search criteria and promotional emails from the ASPCA Right Horse program. I understand I can unsubscribe or remove a saved search at any time.\n`;\nconst SUBSCRIBED_MESSAGE = `\n Your search is saved! We’ll send you an email as soon as your #RightHorse is listed for adoption.\n You can manage your saved searches at anytime in the “Saved Search” panel. You can access this information\n in your account panel located on the top right corner of your browser.\n`;\nconst UNSUBSCRIBED_MESSAGE = `\n You have unsubscribed to this search and will no longer receive emails about new equines that match this search.\n`;\n\nconst subscribe = async (adopter, terms, setSearchNotificationId, updateUser) => {\n let optIn;\n if (!adopter.notification_opt_in_at) {\n if (confirm(LEGAL_OPT_IN_MESSAGE)) {\n optIn = new Date();\n } else {\n ahoy.track(\"NOTIFICATION_OPT_IN_DECLINE\", {user_type: \"Adopter\", user_id: adopter.id});\n }\n }\n\n const {data} = await subscribeSearch(filterUnspecifiedTerms(terms), optIn);\n if (optIn) updateUser({notification_opt_in_at: optIn});\n setSearchNotificationId(_.get(data, 'id'));\n flash('success', SUBSCRIBED_MESSAGE);\n};\n\nconst unsubscribe = async (searchNotificationId, setSearchNotificationId) => {\n await unsubscribeSearch(searchNotificationId);\n setSearchNotificationId(null);\n flash('success', UNSUBSCRIBED_MESSAGE);\n};\n\nexport default function SearchNotificationCheckbox({terms, searchNotificationId: search_notification_id}) {\n const {adopter, showSignInModal, updateUser} = useContext(SessionContext);\n const [searchNotificationId, setSearchNotificationId] = useState(search_notification_id);\n\n const toggleSubscription = async () => {\n if (adopter) {\n try {\n if (!searchNotificationId) {\n subscribe(adopter, terms, setSearchNotificationId, updateUser);\n } else {\n unsubscribe(searchNotificationId, setSearchNotificationId);\n }\n } catch (e) {\n flash('error', _.get(e.response, 'data.error', e.message));\n }\n } else {\n const onSuccess = (adopter) => {\n try {\n subscribe(adopter, terms, setSearchNotificationId, updateUser);\n } catch (e) {\n flash('error', _.get(e.response, 'data.error', e.message));\n }\n };\n showSignInModal({onSuccess});\n }\n };\n return (\n \n );\n}\n","import PropTypes from 'prop-types';\nimport queryString from 'query-string';\n\nimport {searchListings} from 'shared/api_request_helpers';\nimport {ResultsMessage} from 'shared/displayHelpers';\nimport PersistedSearch from '../helpers/PersistedSearch';\nimport {\n filterUnspecifiedTerms, similarTerms, DEFAULT_TERMS, HIDDEN_DEFAULT_TERMS\n} from '../helpers/terms';\n\nimport ListingCard from '@/components/ListingCard';\nimport Filters from '../components/Filters';\nimport ListingMap from '../components/Map';\nimport SearchNotificationCheckbox from '../components/SearchNotificationCheckbox';\n\nimport FUTURE_HORSE from \"@images/future-horse.png\";\n\nconst PER_PAGE = 30;\nconst SHOW_SUGGESTED = 12;\n\nconst setFilteredTerms = _.debounce((terms) => {\n const qs = queryString.stringify(filterUnspecifiedTerms(terms));\n history.replaceState(history.state, '', `search${_.isEmpty(qs) ? '' : '?'}${qs}`);\n}, 500)\n\nconst normalizedQueryString = (rawQueryString) => {\n return _.reduce(queryString.parse(rawQueryString), (state, value, key) => {\n if (key === 'distance') return {...state, [key]: parseInt(value, 10)};\n if (_.includes(['breed', 'discipline'], key)) return {...state, [key]: _.flatten([value])};\n if (_.isArray(value)) return {...state, [key]: [parseInt(value[0], 10), parseInt(value[1], 10)]};\n return {...state, [key]: value};\n }, {});\n}\n\nconst useCachedTerms = () => {\n const terms = PersistedSearch.load() || DEFAULT_TERMS;\n setFilteredTerms(terms);\n return terms;\n}\n\nconst useQueryFilterTerms = (queryFilters) => {\n return {...DEFAULT_TERMS, ...queryFilters};\n}\n\nexport default class Search extends React.Component {\n static propTypes = {\n center: PropTypes.array,\n zoom: PropTypes.number,\n };\n\n constructor(props, context) {\n super(props, context);\n const queryFilters = normalizedQueryString(location.search);\n const terms = _.isEmpty(queryFilters) ? useCachedTerms() : useQueryFilterTerms(queryFilters);\n this.requestListings = _.debounce(this.postTerms.bind(this), 1500);\n this.showMore = _.throttle(this.moreListings, 250);\n this.state = {\n center: {},\n bounds: {},\n advanced: false,\n mode: 'DEFAULT',\n terms,\n results: [],\n suggestedResults: [],\n maxResults: PER_PAGE,\n loading: true,\n locations: props.default_map_locations\n };\n }\n\n componentDidMount() {\n const {organization_id} = this.state.terms;\n const organization = _.find(this.props.organizations, {id: _.toNumber(organization_id)})\n if (!organization && organization_id) {\n this.clearFilters();\n } else {\n const selectedIndex = history.state ? history.state.index : 0;\n const roundedResults = Math.ceil(selectedIndex / PER_PAGE) * PER_PAGE;\n this.postTerms(roundedResults);\n }\n document.addEventListener('scroll', this.watchScroll, false);\n }\n\n componentWillUnmount() {\n document.removeEventListener('scroll', this.watchScroll);\n }\n\n watchScroll = (e) => {\n const nearBottom = window.scrollY > document.body.offsetHeight - window.innerHeight*2;\n if (nearBottom) this.showMore();\n }\n\n moreListings = () => {\n const {count=PER_PAGE, results} = this.state;\n const maxResults = Math.min(count, _.get(this.state, 'maxResults', 0) + PER_PAGE);\n if (count > results.length) this.postTerms(maxResults, results.length);\n\n this.setState({maxResults});\n }\n\n setFilterTerm = (name, value) => {\n const terms = {...this.state.terms, [name]: value};\n setFilteredTerms(terms);\n history.pushState({}, '');\n this.setState({terms, results: [], loading: true}, this.requestListings);\n }\n\n setTermLabel = ({target: {name, value}}) => {\n this.setState(({terms}) => ({terms: {...terms, [name]: value}}));\n }\n\n postTerms(maxIndex=PER_PAGE, offset=0) {\n const {terms} = this.state;\n maxIndex = _.max([PER_PAGE, maxIndex]);\n const limit = maxIndex - offset;\n if (!this.pendingRequest && limit > 0) {\n this.pendingRequest = true;\n this.setState({loading: true});\n\n searchListings({...terms, limit, offset})\n .then(({results, count, center, bounds, locations, search_notification_id}) => {\n PersistedSearch.save(terms);\n this.setState(({results: existingRecords}) => ({\n loading: false,\n results: _.uniqBy([...existingRecords, ...results], 'id'),\n maxResults: results.length,\n center,\n bounds,\n locations,\n count,\n searchNotificationId: search_notification_id\n }));\n this.pendingRequest = false;\n\n if (!_.isMatch(terms, this.state.terms)) {\n this.setState({results: [], loading: true}, this.postTerms);\n } else {\n _.delay(() => {\n this.scrollToElement?.scrollIntoView()\n if (count <= SHOW_SUGGESTED) this.getSuggested();\n }, 200);\n }\n })\n .catch((error) => {\n if (error) console.warn(\"Failed to fetch search results\", error);\n this.pendingRequest = false;\n this.setState({loading: false});\n });\n }\n }\n\n getSuggested() {\n const {terms, results} = this.state;\n const excluded_ids = _.map(results, 'id');\n searchListings({...similarTerms(terms), limit: PER_PAGE, excluded_ids})\n .then(({results}) => {\n this.setState({suggestedResults: results});\n })\n .catch((error) => {\n if (error) console.warn(\"Failed to fetch suggested results\", error);\n });\n }\n\n setViewMode = (viewType) => {\n this.setState(({mode}) => ({mode: mode === viewType ? \"DEFAULT\" : viewType}));\n }\n\n clearFilters = () => {\n this.setState({terms: {...DEFAULT_TERMS, ...HIDDEN_DEFAULT_TERMS}, results: []}, () => {\n history.replaceState(history.state, '', 'search');\n PersistedSearch.clear();\n this.postTerms();\n });\n }\n\n persistIndex = (i) => {\n history.replaceState({index: i}, '', `#${i}`);\n }\n\n setScrollToRef = (element) => {\n this.scrollToElement = element;\n }\n\n render() {\n const {\n mode, loading, center, bounds, terms, results, suggestedResults, maxResults, locations,\n searchNotificationId\n } = this.state;\n const {\n googleMapsKey, breeds, genders, disciplines, organizations, favorite_ids,\n adopter, userType, userID\n } = this.props;\n\n const fewSearchResults = results.length < 50 && !_.isEmpty(filterUnspecifiedTerms(terms));\n const subscribableSearch = userType !== \"Contributor\" && !loading && fewSearchResults;\n\n return (\n \n
\n );\n }\n}\n","export default {\n load: () => {\n try {\n if (localStorage.getItem('terms') && localStorage.getItem('terms') != 'undefined') {\n const localStorageTerms = JSON.parse(localStorage.getItem('terms'));\n localStorageTerms.location = _.defaultTo(localStorageTerms.location, '');\n return localStorageTerms;\n }\n } catch (e) {\n if (e instanceof DOMException && e.message === \"The operation is insecure.\") {\n return {location: ''};\n }\n\n throw e;\n }\n },\n\n save: (terms) => {\n try {\n localStorage.setItem('terms', JSON.stringify(_.omit(terms, \"limit\", \"offset\")));\n } catch (e) {\n if (e instanceof DOMException && e.message === \"The operation is insecure.\") {\n return;\n }\n\n throw e;\n }\n },\n\n clear: () => {\n try {\n localStorage.removeItem('terms');\n } catch (e) {\n if (e instanceof DOMException && e.message === \"The operation is insecure.\") {\n return;\n }\n\n throw e;\n }\n }\n}\n","import { titleize } from 'components/shared/humanize';\n\nexport const DEFAULT_TERMS = {location: '', distance: 1000, organization_id: null};\nexport const HIDDEN_DEFAULT_TERMS = {\n breed: null,\n gender: null,\n discipline: null,\n age_range: [0, 20],\n height_range: [1, 20],\n price_range: [0, 5000]\n};\n\nconst UNITS = {\n age_range: \" years\",\n height_range: \" HH\",\n}\n\nconst isUnspecified = (value, key) => {\n if (_.isNil(value)) return true;\n if (key === 'distance' && value == 1000) return true;\n if (key === 'location' && value === '') return true;\n if (key === 'organization_id' && value === '') return true;\n if (_.isArray(value) && _.isEqual(_.slice(value).sort(), _.get(HIDDEN_DEFAULT_TERMS, key))) return true;\n return false;\n}\n\nexport const filterUnspecifiedTerms = (terms) => _.omitBy(terms, isUnspecified);\n\nconst FilterTerm = ({term, children, value}) => {\n value = children ? [children] : _.flatten([value]);\n return \n {term}:\n {\" \"}\n {_.map(value, (v) => (\n {v}\n ))}\n ;\n}\n\nexport const humanizedTerms = (terms, organizations) => {\n return _.compact(_.map(terms, (value, key) => {\n if (_.isEmpty(value)) return null;\n switch(key) {\n case \"location\":\n if (!terms[\"distance\"]) return null;\n return (\n \n
\n\n {mode === \"MAP\" && \n
\n \n \n \n \n
\n \n \n\n {results.length > 0 && (\n
\n \n {results.map((listing, i) => (\n
\n )}\n {subscribableSearch && results.length === 0 && (\n this.persistIndex(i)}\n >\n \n
\n ))}\n {subscribableSearch && (\n \n
\n )}\n \n 
\n
\n \n
\n Let us find your #RightHorse!
\n \n\n
\n )}\n\n {(_.inRange(results.length, 1, maxResults) && (results.length > 0)) && (\n Let us find your #RightHorse!
\n \n\n \n
\n )}\n {suggestedResults.length > 0 && <>\n You might {results.length > 0 && 'also'} like...
\n {terms.location && (!terms.distance || terms.distance < 1000) ? (\n\n The #RightHorse is never in the wrong place. Ask about transportation options when\n inquiring on your #RightHorse.\n
\n ) : null}\n \n {suggestedResults.map((listing) => (\n
\n }\n \n \n
\n ))}\n \n
\n );\n }\n}\n","import pluralize from 'pluralize';\nimport { listingPath } from './ListingCard';\nimport TransferCardButtons from './TransferListingCard/components/TransferCardButtons';\nimport { breedsToShortString } from './shared/listing_helpers';\n\nexport default class TransferListingCard extends React.Component {\n render() {\n const {listing, transfer, transfer_type, org_name, locations} = this.props;\n const {name, gender, breeds, slug, age, height, cover} = listing;\n\n const breed = breedsToShortString(breeds);\n\n const statusMessage = () => {\n if (transfer.status == \"initiated\") {\n return transfer_type == \"inbound\" ? \"Transfer Requested\" : \"Pending Transfer to\"\n } else {\n return transfer_type == \"inbound\" ? \"Transfer Accepted\" : \"Transfer Accepted by\"\n }\n }\n\n return (\n \n );\n }\n}\n","import Modal from \"react-bootstrap/Modal\";\nimport { Typeahead } from 'react-bootstrap-typeahead';\n\nconst modalContent = {\n 'accept': {\n 'TITLE': \"Accept Transfer\",\n 'STATUS_VALUE': \"accepted\",\n 'BUTTON_TEXT': \"Accept Transfer\"\n },\n 'decline': {\n 'TITLE': \"Decline Transfer\",\n 'STATUS_VALUE': \"declined\",\n 'BUTTON_TEXT': \"Yes, Decline Transfer\"\n },\n 'cancel': {\n 'TITLE': \"Cancel Transfer\",\n 'STATUS_VALUE': \"canceled\",\n 'BUTTON_TEXT': \"Yes, Cancel Transfer\"\n },\n 'complete': {\n 'TITLE': \"Complete Transfer\",\n 'STATUS_VALUE': \"completed\",\n 'BUTTON_TEXT': \"Yes, Complete Transfer\"\n }\n}\n\nexport default class TransferListingCard extends React.Component {\n state = {\n isOpen: false,\n csrfToken: '',\n action: 'cancel',\n locationOptions: this.props.locations,\n selectedLocation: []\n };\n\n componentDidMount() {\n const csrfToken = _.get(document.querySelector('[name=csrf-token]'), 'content');\n this.setState({csrfToken});\n }\n\n disableButton = () => (\n this.state.action == 'accept' && _.isEmpty(this.state.selectedLocation)\n )\n\n render() {\n const {transferType, transfer, listingName, orgName} = this.props;\n const {isOpen, csrfToken, action, locationOptions, selectedLocation} = this.state;\n\n const showButtonGroup = (targetType, targetStatus) => {\n return transferType == targetType && transfer.status == targetStatus\n }\n\n return (\n {ADMIN_HEADER[listing.status]}
\n\n \n \n \n \n
\n {active_transfer && (\n \n {\n active_transfer.status == 'initiated' ? 'Pending Transfer to' : 'Transfer Accepted by'\n }: {active_transfer.organization_name}\n
\n )}\n\n {showButtonGroup(\"inbound\", \"initiated\") && (\n this.setState({isOpen: false})} centered>\n \n \n
\n );\n }\n}\n","import ReactPlayer from 'react-player';\n\nconst emptyString = v => v === '';\nconst negate = func => (...args) => !func(...args);\n\nexport default class VideoGallery extends React.Component {\n render() {\n const { videos } = this.props;\n const width = $('.details').width();\n const height = width*(9/16);\n const videoUrls = videos.filter(negate(emptyString));\n\n return (\n \n
\n )}\n {(showButtonGroup(\"outbound\", \"initiated\") || transfer.status == \"accepted\") && (\n \n this.setState({isOpen: true, action: \"decline\"})}\n >Decline\n
\n \n this.setState({isOpen: true, action: \"accept\"})}\n >Accept\n
\n \n
\n )}\n {showButtonGroup(\"outbound\", \"accepted\") && (\n \n this.setState({isOpen: true, action: \"cancel\"})}\n >Cancel Transfer\n
\n \n
\n )}\n \n this.setState({isOpen: true, action: \"complete\"})}\n >Complete Transfer\n
\n \n
\n );\n }\n}\n","import { useContext, useEffect } from 'react';\nimport { preventDefault } from 'shared/events';\n\nimport flash from 'shared/flash';\nimport { MAX_STEPS } from 'shared/listing_helpers';\n\nimport StepContext from '@/contexts/StepContext';\nimport ListingContext from '@/contexts/ListingContext';\n\nimport StepOne from '../ListingWizard/components/steps/StepOne';\nimport StepTwo from '../ListingWizard/components/steps/StepTwo';\nimport StepThree from '../ListingWizard/components/steps/StepThree';\nimport StepFour from '../ListingWizard/components/steps/StepFour';\nimport StepFive from '../ListingWizard/components/steps/StepFive';\nimport PreviewStep from '../ListingWizard/components/steps/PreviewStep';\n\nconst StepComponents = [StepOne, StepTwo, StepThree, StepFour, StepFive, PreviewStep];\n\nconst allowUpdateToBeCalledFirst = (func) => () => _.defer(func);\n\nconst published = ({status}={}) => status === 'published';\nconst indexPath = (listing) => {\n switch (listing.status) {\n case 'published':\n return listing.days_remaining >= 0 ? '/listings/active' : '/listings/expired';\n case 'stalled':\n return '/listings/stalled';\n default:\n return '/listings/drafted';\n }\n};\n\nexport default function FormBox({userType, userID}) {\n const {listing, errors, getErrors, publish, updateField, validateStep} = useContext(ListingContext);\n const {step, nextStep, prevStep} = useContext(StepContext);\n\n useEffect(() => {\n if (listing.name) validateStep(step);\n }, []);\n\n const publishAndCreate = async (_e) => {\n try {\n await publish();\n window.location.href = '/listings/new';\n } catch(e) {\n console.warn(e);\n }\n };\n\n const publishAndShow = async (_e) => {\n try {\n const {slug} = await publish();\n if (slug) {\n window.location.href = `/available-horses/${slug}`;\n } else {\n window.location.href = '/dashboard';\n }\n } catch(e) {\n console.warn(e);\n if (!_.isEmpty(getErrors())) {\n flash(\"errors\", \"Could not save changes, some fields were invalid.\");\n }\n }\n };\n\n const saveChanges = async (_e) => {\n await validateStep(step);\n if (_.isEmpty(getErrors())) {\n window.location.href = indexPath(listing) + '?success=Changes+Saved';\n } else {\n flash(\"errors\", \"Could not save changes, some fields were invalid.\");\n }\n };\n\n const StepComponent = (step < StepComponents.length) ? StepComponents[step-1] : _.last(StepComponents);\n const nextButton = step === MAX_STEPS ? (\n Video
\n {videoUrls.map((url) => (\n\n
\n );\n}\n","import request from 'axios';\n\nconst csrfToken = _.get(document.querySelectorAll('meta[name=\"csrf-token\"]'), '[0].content');\nconst headers = {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': csrfToken\n};\n\nexport function getEntities(url) {\n return request({\n method: 'GET',\n url: url,\n headers\n });\n}\n\nexport function createEntity(url, data) {\n return request({\n method: 'POST',\n url: url,\n headers,\n data: data\n });\n}\n\nexport function updateEntity(url, data) {\n return request({\n method: 'PATCH',\n url: url,\n headers,\n data: data\n });\n}\n","const preventDefault = (fn) => (e) => {\n e.preventDefault();\n if (_.isFunction(fn)) return fn();\n}\nconst REASON_OPTION_LABELS = {\n 'Deleted': 'Delete'\n};\nconst optionLabelFor = (reason) => _.get(REASON_OPTION_LABELS, reason, reason);\n\nconst StatusReasonOption = ({action, status, reason}) => (\n action(status, reason))}\n >\n {optionLabelFor(reason)}\n \n);\n\nexport default StatusReasonOption;\n","import axios from \"axios\";\nimport React from \"react\";\nimport Modal from \"react-bootstrap/Modal\";\nimport { Typeahead } from 'react-bootstrap-typeahead';\nimport { preventDefault } from 'shared/events';\n\nconst modalContent = {\n 'initiate': {\n 'TITLE': \"Request Transfer\",\n 'BUTTON_TEXT': \"Submit Request\"\n },\n 'cancel': {\n 'TITLE': \"Cancel Transfer\",\n 'BUTTON_TEXT': \"Yes, Cancel Transfer\"\n },\n 'complete': {\n 'TITLE': \"Complete Transfer\",\n 'BUTTON_TEXT': \"Yes, Complete Transfer\"\n }\n}\n\nexport default class TransferListingOptions extends React.Component {\n state = {\n isOpen: false,\n organizationOptions: [],\n selectedOrganization: [],\n csrfToken: ''\n }\n\n componentDidMount() {\n const csrfToken = _.get(document.querySelector('[name=csrf-token]'), 'content');\n this.setState({csrfToken});\n }\n\n showModal = () => {\n if (this.props.action === 'initiate' && _.isEmpty(this.state.organizationOptions)) {\n axios.get('/api/v1/organizations').then((response) => {\n this.setState({organizationOptions: response.data});\n });\n }\n this.setState({isOpen: true});\n }\n\n disableButton = () => this.props.action === 'initiate' && _.isEmpty(this.state.selectedOrganization);\n\n render() {\n const {listing, transfer:{id, organization_name}={}, action} = this.props;\n const {isOpen, organizationOptions, selectedOrganization, csrfToken} = this.state;\n const formAction = action === 'initiate' ? '/listing_transfers' : `/listing_transfers/${id}`\n\n return (\n \n
\n \n \n {modalContent[action]['TITLE']}\n \n this.setState({isOpen: false})} centered>\n \n \n
\n )\n }\n}\n","import superagent from 'superagent'\nimport axios from 'axios';\n\nconst csrfTag = (doc=document) => _.first(doc.querySelectorAll('meta[name=\"csrf-token\"]'));\nconst csrfToken = () => csrfTag()?.content;\n\nexport const submitListingAction = (listing, action, status_reason, callback) => {\n const {id} = listing;\n const initialStatus = _.pick(listing, ['id', 'status', 'status_reason', 'status_changed_at']);\n const newStatus = {id, status: action, status_reason, status_changed_at: new Date()};\n const msgData = action == \"undo\" ? initialStatus : newStatus;\n\n superagent.patch(`/listings/${id}`)\n .set({\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': csrfToken()\n }).responseType('json')\n .send({listing: msgData})\n .end(callback)\n};\n\nexport function getAxios() {\n const headers = {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': csrfToken()\n };\n return axios.create({headers});\n}\n\nexport function refreshHeader() {\n return axios.get(\"/\", {headers: {'X-CSRF-Token': csrfToken()}})\n .then(({data}) => new DOMParser().parseFromString(data, \"text/html\"))\n .then((page) => {\n csrfTag(document).content = csrfTag(page)?.content;\n document.querySelector(\"body > header\").innerHTML = page.querySelector(\"body > header\").innerHTML;\n });\n}\n\nexport function signInAdopter({email, password}) {\n return getAxios().post('/adopters/sign_in', {adopter: {email, password}})\n .then((response) => response.data);\n}\n\nexport function signUpAdopter({email, password, passwordConfirm: password_confirmation, subscribe}) {\n return getAxios().post('/adopters', {adopter: {email, password, password_confirmation, subscribe}})\n .then((response) => response.data);\n}\n\nexport function searchListings(terms) {\n return getAxios().post('/search', {terms})\n .then((response) => response.data);\n}\n\nexport function contributorSearchListings({search, view_scope}) {\n return getAxios().post('/contributor_search', {search, view_scope})\n .then((response) => response.data);\n}\n\nexport function addFavorite(id) {\n return getAxios().post(`/api/v1/listings/${id}/favorite`, {})\n .then((response) => response.status)\n .catch((error) => console.warn(error));\n}\n\nexport function deleteFavorite(id) {\n return getAxios().delete(`/api/v1/listings/${id}/favorite`)\n .then((response) => response.status)\n .catch((error) => console.warn(error));\n}\n\nexport function subscribeSearch(search, notification_opt_in_at) {\n return getAxios().post('/api/v1/search_notifications', {search, notification_opt_in_at});\n}\n\nexport function unsubscribeSearch(search_notification_id) {\n return getAxios().delete(`/api/v1/search_notifications/${search_notification_id}`);\n}\n\nexport function updateSearchNotification(search_notification_id, {name}) {\n return getAxios().patch(`/api/v1/search_notifications/${search_notification_id}`, {search_notification: {name}});\n}\n\nexport function updateListing(id, params) {\n return getAxios().patch(`/listings/${id}`, {listing: {id, ...params}});\n}\n\nexport function uploadAttachments(key, id, files) {\n const formData = new FormData();\n files.forEach((file) => formData.append(`listing[${key}][]`, file));\n formData.append('listing[id]', id);\n return getAxios().post(`/upload.json`, formData, {headers: {'Content-Type': 'multipart/form-data'}});\n}\n\nexport function deleteListingMedium(id) {\n return getAxios().delete(`/listing_media/${id}`)\n}\n\nexport function deleteListingDocument(id) {\n return getAxios().delete(`/listing_documents/${id}`)\n}\n\nexport function updateImageOrder(id, order) {\n return getAxios().post(`/media_order/${id}`, {media_order: order});\n}\n\nexport function uploadImageCropping(id, {width, height, x, y}) {\n return getAxios().patch(`/listing_media/${id}`, {\n listing_medium: {crop_width: width, crop_height: height, crop_x: x, crop_y: y}\n });\n}\n\nexport function importCSV(file, mapping) {\n const formData = new FormData();\n formData.append('csv_upload[carrierwave_file]', file);\n if (mapping) formData.append('csv_upload[mapping]', JSON.stringify(mapping));\n return getAxios().post(`/csv_uploads.json`, formData, {headers: {'Content-Type': 'multipart/form-data'}});\n}\n\nexport function exportCSV(mapping, filters) {\n return getAxios().post(`/csv_exports`, {csv_export: {mapping, filters}});\n}\n\nexport function createHelpRequest(csv_upload_id) {\n return getAxios().post(`/csv_uploads/${csv_upload_id}/help_requests`)\n}\n\nexport function createAPIKey() {\n return getAxios().post('/api_keys');\n}\n","import Papa from 'papaparse';\nimport levenshtein from 'js-levenshtein';\nexport const DISPLAY_NAMES = {\n external_id: 'id',\n price: 'adoption fee'\n};\n\nexport const guessFieldMapping = (field, csvFields) => {\n if (!field) return;\n return getClosestBySpelling(csvFields, field) || guessFieldMapping(DISPLAY_NAMES[field], csvFields);\n};\n\nconst previousMappingIfPresent = (previousField, fields) => (\n _.includes(fields, previousField) ? previousField : undefined\n);\n\nexport const guessMappings = (supportedHeaders, CSVHeaders, currentMapping) => (\n _.reduce(supportedHeaders, (mapping, field) => ({...mapping,\n [field]: (\n guessFieldMapping(field, CSVHeaders)\n || previousMappingIfPresent(mapping[field], CSVHeaders)\n )\n }), currentMapping)\n);\n\nexport const parseCSVPreview = (file, options={}) => (\n new Promise((resolve, reject) => Papa.parse(file, {\n header: true,\n preview: 20,\n skipEmptyLines: true,\n worker: true,\n ...options,\n complete: resolve,\n error: reject\n }))\n);\nfunction getClosestBySpelling(csvFields, field) {\n return _.minBy(['', ...csvFields], (csvField) => {\n if (!csvField) return field.length / 2;\n const lengthDifference = Math.abs(csvField.length - field.length);\n const distance = levenshtein(field, _.lowerCase(csvField)) - lengthDifference / 2;\n return distance;\n });\n}\n\n","import Spinner from 'react-bootstrap/Spinner';\n\nconst LISTINGS_PATHS = {\n expiringSoon: '/listings/expiring_soon',\n new: '/listings/new',\n active: '/listings/active'\n}\n\nexport const SectionTitle = ({text}) => (\n {text}
\n \n \n {text}\n \n
\n);\n\nexport const ResultsMessage = ({count, loading}) => (count == 0 &&\n \n {loading ? (\n \n )}\n
\n);\n","export const preventDefault = (func=_.noop, ...args) => (e) => {\n e.preventDefault();\n return func(...args, e);\n};\n\nexport const stopPropagation = (func=_.noop, ...args) => (e) => {\n e.stopPropagation();\n return func(...args, e);\n};\n\nexport const stopAll = (func=_.noop, ...args) => (e) => {\n e.preventDefault();\n e.stopPropagation();\n return func(...args, e);\n};\n","export default function flash(type=\"\", message) {\n if (!_.isEmpty(message)) {\n $('.notice').remove();\n $(document.body).append(`\n loading
\n ) : (\n No Results
Sorry, there are no horses that match your search.
\n
\n `);\n } else {\n try { throw new Error('empty message sent to flash?') } catch (e) { console.warn(e) }\n }\n}\n","export const titleize = (string) => _.kebabCase(string).split('-').map(_.capitalize).join(' ');\nexport const errorsToSentence = (response) => {\n if (!response?.data?.errors) return;\n\n const errorToString = (errors, field) => `${titleize(field)} ${_.join(errors, ' and ')}.`;\n return _.join(_.map(response.data.errors, errorToString), \" \");\n}","export const MAX_STEPS = 6;\nexport const MIN_STEPS = 1;\n\nexport const breedsToString = string => _.join(string, ', ');\nexport const breedsToShortString = string => string?.length > 1 ? `${string[0]}, Cross` : string;\n\nexport function setInitialStatus(status, days_remaining, EXPIRING_SOON_DAYS) {\n if (status == \"published\" && days_remaining <= 0) {\n return \"expired\";\n } else if (status == \"published\" && days_remaining <= EXPIRING_SOON_DAYS) {\n return \"expiring_soon\";\n } else {\n return status;\n }\n}\n","let loading = false\n\nexport default async function loadPinterest() {\n if (!window.PinUtils && !loading) {\n loading = new Promise((resolve, reject) => {\n const script = document.createElement('script');\n script.type = 'text/javascript'\n script.src = \"//assets.pinterest.com/js/pinit.js\";\n const ready = () => setTimeout(() => window.PinUtils ? resolve() : ready(), 100);\n script.onload = () => {\n ready();\n setTimeout(resolve, 500);\n };\n document.head.appendChild(script);\n })\n }\n\n await loading;\n return window.PinUtils;\n}\n","import { useMemo, useState, useEffect, useRef } from 'react';\nimport { createContext } from 'react';\nimport { get, set, curry, update, omit, reject, assign } from 'lodash/fp';\n\nimport {\n updateListing,\n deleteListingDocument,\n deleteListingMedium,\n uploadAttachments,\n uploadImageCropping,\n updateImageOrder\n} from 'shared/api_request_helpers';\n\n\nconst imageFromResponse = (res) => {\n const {id, carrierwave_media={}, crop_width, crop_height, crop_x, crop_y} = _.get(res, 'data', {});\n const url = `${carrierwave_media.cover.url}?${crop_width}x${crop_height}+${crop_x}+${crop_y}`;\n\n return {id, url, crop_width, crop_height, crop_x, crop_y};\n};\n\nconst updateCoverImage = (coverImageId, res) => (images) => images.map((image) => {\n return image.id === coverImageId ? imageFromResponse(res) : image;\n});\n\nconst updateStep = async (id, step) => updateListing(id, {step, editing: true});\n\nconst newContextAPI = ({\n listing, listingRef, setListing,\n errors, errorsRef, setErrors,\n lastUpdate, receivedUpdateAt,\n stepValidation\n}) => {\n const holdValidationFor = (func) => (...args) => {\n const promise = func(...args);\n stepValidation.current.queue.push({promise});\n return promise;\n }\n\n const processErrors = (response) => {\n const errors = _.get(response, 'data.errors')\n\n if (!_.isEmpty(errors)) {\n setErrors(assign(errors));\n }\n\n return errors;\n }\n\n const submitStatusUpdate = async (id, status) => {\n try {\n const response = await updateListing(id, {status});\n\n const errors = processErrors(response);\n if (!_.isEmpty(errors)) {\n throw errors;\n }\n return response.data;\n } catch (e) {\n console.warn('StatusUpdate failed', e);\n if (!e.isAxiosError) {\n throw e;\n }\n }\n }\n\n const api = {\n listing,\n errors,\n getListing() {\n return listingRef.current;\n },\n getErrors() {\n return errorsRef.current;\n },\n uploadAttachments: holdValidationFor(async(type, acceptedFiles) => {\n const key = type === 'images' ? 'listing_media' : 'listing_documents';\n const response = await uploadAttachments(key, listing.id, acceptedFiles);\n const stateKey = type === 'images' ? 'images' : 'documents';\n\n if (_.some(response.data, {id: null})) {\n alert(\"Unable to upload. Please use a different image.\");\n window.Rollbar && Rollbar.info(\"Invalid image uploaded\");\n }\n const value = _.reject(response.data, {id: null});\n setListing(set(stateKey, value));\n }),\n\n uploadImageCrop: holdValidationFor(async (coverImageId, pixelCrop) => {\n try {\n const response = await uploadImageCropping(coverImageId, pixelCrop)\n setListing(update('images', updateCoverImage(coverImageId, response)));\n } catch (e) {\n if (!e.isAxiosError) {\n throw e;\n }\n }\n }),\n\n updateImageOrder: holdValidationFor(async (order) => {\n try {\n await updateImageOrder(listing.id, order)\n } catch (e) {\n if (!e.isAxiosError) {\n throw e;\n }\n }\n }),\n\n deleteAttachment: holdValidationFor(async (type, id) => {\n if (!id) {\n console.warn(`deleteAttachment id is empty: '${String(id)}'`);\n return;\n }\n\n switch(type) {\n case 'images':\n await deleteListingMedium(id);\n break;\n case 'documents':\n await deleteListingDocument(id)\n break;\n default:\n throw new Error(`invalid attachment type: '${type}'. Deletion failed.`);\n }\n\n setListing(update(type, reject({id})));\n }),\n\n updateField: holdValidationFor(curry(async (name, value) => {\n const thisUpdate = new Date();\n lastUpdate.current = thisUpdate;\n\n const localListing = await new Promise((resolve) => {\n setListing((_listing) => {\n listing = set(name, value, _listing);\n resolve(listing);\n return listing;\n });\n });\n\n if (_.first(name) === 'behavior_profile') {\n name = \"behavior_profile_attributes\";\n value = localListing.behavior_profile;\n }\n const response = await updateListing(listing.id, {[name]: value});\n processErrors(response);\n const updatedListing = response.data;\n if (lastUpdate.current <= thisUpdate) {\n if (updatedListing.status === \"published\") {\n setListing(set(name, get(name, updatedListing)));\n setListing(set('large_images', get('large_images', updatedListing)));\n } else {\n setListing(updatedListing);\n }\n receivedUpdateAt.current = thisUpdate;\n setErrors(omit(name));\n }\n })),\n\n waitForPendingOperations: async () => await stepValidation.current.promise,\n\n validateStep: ((process) => {\n return async (step) => {\n const wait = stepValidation.current.processing;\n stepValidation.current.queue.push({step, listing});\n\n if (wait) return stepValidation.current.promise;\n\n stepValidation.current.processing = true;\n await stepValidation.current.promise;\n stepValidation.current.promise = new Promise((resolve) => process(resolve))\n await stepValidation.current.promise;\n stepValidation.current.processing = false;\n }\n })(async function process(resolve) {\n if (stepValidation.current.queue.length === 0) {\n resolve();\n return;\n }\n\n const {step, listing, promise} = stepValidation.current.queue.shift();\n if (promise) {\n await promise;\n } else {\n const response = await updateStep(listing.id, step);\n if (_.isEmpty(processErrors(response))) {\n setListing(response.data);\n }\n }\n setTimeout(() => process(resolve), 1);\n }),\n\n publish: () => submitStatusUpdate(listing.id, \"published\"),\n unpublish: () => submitStatusUpdate(listing.id, \"draft\")\n };\n\n return api;\n};\n\nexport const useDistinctContextAPI = (value, updater=_.noop) => {\n const [listing, setListing] = useState(value);\n const [errors, setErrors] = useState(value?.errors);\n\n const listingRef = useRef(listing);\n const errorsRef = useRef(errors);\n\n const lastUpdate = useRef();\n const receivedUpdateAt = useRef();\n const stepValidation = useRef({queue: [], promise: Promise.resolve(), processing: false});\n\n useEffect(() => {\n setListing(value)\n setErrors(value.errors);\n }, [value]);\n\n useEffect(() => {\n listingRef.current = listing;\n if (listing != value) updater(listing);\n }, [listing]);\n\n useEffect(() => {\n errorsRef.current = errors;\n }, [errors]);\n\n const contextAPI = useMemo(() => {\n return newContextAPI({listing, listingRef, setListing, errors, errorsRef, setErrors: (...args) => {\n setErrors(...args)\n }, lastUpdate, receivedUpdateAt, stepValidation});\n }, [listing, errors]);\n\n return contextAPI;\n}\n\nconst ListingContext = createContext();\nexport function Provider({value, updater, children}) {\n const contextAPI = useDistinctContextAPI(value, updater);\n\n return \n ${message}\n
\n