\n
\n )\n }\n\n get renderSyncInstructions () {\n return (\n \n Linked Sheet: {syncedGoogleSheet.spreadsheet_url}\n
\n \n
\n \n Any changes you make to your Google Sheet will update your locations on Closeby every 15 minutes.\n
\n\n Did you make changes to your Google Sheet? {this.renderSyncNowButton}\n
\n\n
\n )\n }\n\n get renderInstructions () {\n return (\n \n Connect your Google account and a new Google Sheet will be created for you. This file will be automatically imported as your list of locations on Closeby.\n
\n\n Once it is set up, any changes you make to your Google Sheet will update your locations on Closeby every 15 minutes. Adding, editing and removing locations from the Closeby dashboard will be disabled.\n
\n\n { this.showSyncedSheet ? this.renderSyncedSheet : this.renderSyncInstructions }\n { this.renderConnectOrDisconnectButton }\n
\n )\n }\n\n get renderLoading () {\n return (\n \n
\n )\n }\n\n render () {\n const { errorMessage, isLoading } = this.state\n const { isFree } = this.props\n\n if (errorMessage) return \n
\n {errorMessage}
\n\n return (\n \n
\n )\n }\n}\n\nGoogleSheetsInstructions.propTypes = {\n isFree: PropTypes.bool.isRequired,\n onForceSync: PropTypes.func.isRequired,\n someAreProcessing: PropTypes.bool.isRequired\n}\n","import React, { Component } from 'react'\nimport URLS from '../../constants/urls'\n\nexport default class IntegrationsHeader extends Component {\n render() {\n return (\n \n Google Sheets Integration\n
\n\n Connect Google Sheets to automatically sync all your locations data.\n
\n Limited to 10,000 locations at this time. Learn more\n
\n {isFree && (\n \n Limited to 10,000 locations at this time. Learn more\n
\n Notice: You're currently on the free plan, so no more than 5 locations will be imported.\n
\n )}\n { isLoading ? this.renderLoading : this.renderInstructions }\n \n
\n );\n }\n}\n","import PropTypes from 'prop-types'\nimport React, { Component } from 'react'\nimport classNames from 'classnames'\nimport { create, show, index } from '../../actions/importTaskActions'\nimport URLS from '../../constants/urls'\n\nimport ImportTasksList from '../import_tasks/ImportTasksList'\nimport ImportCsvInstructions from '../import_tasks/ImportCsvInstructions'\nimport GoogleSheetsInstructions from '../import_tasks/GoogleSheetsInstructions'\nimport LocatorSpinner from '../locator/LocatorSpinner'\nimport IntegrationsHeader from './IntegrationsHeader'\n\nexport default class IntegrationsIndex extends Component {\n constructor (props) {\n super(props)\n this.state = {\n hidingUploadForm: false,\n pageIsLoading: true\n }\n }\n\n componentDidMount () {\n this.fetchTaskList()\n }\n\n fetchTaskList () {\n index().then((resp) => {\n this.setState({\n importTasks: resp.import_tasks || [],\n hidingUploadForm: resp.import_tasks && resp.import_tasks.length > 0,\n pageIsLoading: false,\n })\n }).catch(this.handleError.bind(this))\n }\n\n updateImportTask = (importTaskId) => {\n return show(importTaskId).then((resp) => {\n const { importTasks } = this.state\n const idx = importTasks.findIndex((task) => {\n return +task.id === +importTaskId\n })\n importTasks[idx] = resp.import_task\n this.setState({\n importTasks\n })\n }).catch(this.handleError.bind(this))\n }\n\n showUploadForm = () => {\n this.setState({ hidingUploadForm: false })\n }\n\n get someAreProcessing () {\n const { importTasks } = this.state\n return !!(\n importTasks &&\n importTasks.find((it) => it.state === 'processing')\n )\n }\n\n filePicked = (fileInput) => {\n if (!fileInput) {\n return this.handleError(new Error('Missing fileinput'))\n }\n this.setState({ isUploading: true })\n const file = fileInput.files[0]\n create(file).then((resp) => {\n this.fetchTaskList().then(() => {\n this.setState({ isUploading: false, resp })\n }).catch(this.handleError.bind(this))\n }).catch(this.handleError.bind(this))\n }\n\n forceSync = () => {\n this.setState({ isUploading: true })\n create().then((resp) => {\n this.fetchTaskList().then(() => {\n this.setState({ isUploading: false, resp })\n }).catch(this.handleError.bind(this))\n }).catch(this.handleError.bind(this))\n }\n\n handleError (error) {\n this.setState({\n isUploading: false,\n errorMessage: error && error.message || 'Woops, something went wrong',\n pageIsLoading: false,\n })\n }\n\n render () {\n const { hidingUploadForm, isUploading, pageIsLoading, errorMessage, importTasks } = this.state\n const { type, isFree } = this.props\n const someAreProcessing = this.someAreProcessing\n\n return (\n \n Sync Locations\n
\n \n {this.props.type === 'CSV' ? (\n Sync Google Sheet\n ) : (\n Import CSV File\n )}\n Back To Locations\n
\n \n
\n )\n }\n}\n\nIntegrationsIndex.propTypes = {\n isFree: PropTypes.bool\n}\n","import PropTypes from 'prop-types'\nimport React, { Component } from 'react'\nimport URLS from '../../constants/urls'\n\nexport default class PaymentBannerNotice extends Component {\n render() {\n const { isFree, isTrialing, hasWixConnected } = this.props\n\n let bannerCopy = 'Please enter a new payment method to continue using Closeby.'\n\n if (isFree && hasWixConnected) {\n bannerCopy = 'Limited to 5 locations on the free plan.'\n } else if (isFree) {\n bannerCopy = 'On the free plan you are limited to 5 locations. Click here to upgrade your plan.'\n } else if (isTrialing) {\n bannerCopy = 'You\\'re currently on the 14-day free trial. Click here to upgrade your plan.'\n }\n\n return (\n \n
\n \n\n { false ? (\n
\n \n
\n ): ''}\n\n { type === 'GOOGLE_SHEETS' ?\n \n Google Sheets\n CSV Import\n
\n \n
\n ) : null }\n\n {importTasks && importTasks.length ? (\n console.log(importTasks),\n \n
\n \n
\n ) : null}\n Import History
\n\n \n { bannerCopy }\n \n
\n )\n }\n}\n\nPaymentBannerNotice.propTypes = {\n isFree: PropTypes.bool,\n isTrialing: PropTypes.bool,\n hasWixConnected: PropTypes.bool,\n}\n","export const createFlash = (message, type = 'error') => {\n let classNames = 'alert ';\n switch (type) {\n case 'notice':\n classNames += 'alert-notice';\n case 'success':\n classNames += 'alert-success';\n case 'error':\n classNames += 'alert-error';\n }\n\n let html = ``\n\n if($('.alert').length === 0){\n $('body').append(html);\n setTimeout(function() {\n $('.alert').addClass('showing');\n },10);\n setTimeout(function() {\n $('.alert').addClass('hiding');\n setTimeout(function() {\n $('.alert').remove();\n }, 500);\n }, 5000);\n }\n}\n","import API_ENDPOINTS from '../constants/apiEndpoints'\nimport apiClient from '../services/apiClient'\nimport { createFlash } from '../shared/createFlash'\n\nimport {\n GET_LOCATIONS,\n LOCATIONS_UPDATE_LIST,\n LOCATION_SHOW_FORM,\n LOCATION_HIDE_FORM,\n LOCATION_UPDATE_FORM_VALUES,\n LOCATION_SAVE_FORM_VALUES\n} from '../constants';\n\nexport const showLocation = (values) => {\n return {\n type: LOCATION_SHOW_FORM,\n values\n };\n}\n\nexport const hideLocation = (values) => {\n return {\n type: LOCATION_HIDE_FORM,\n values\n };\n}\n\nexport const getLocations = (params) => (dispatch) => {\n apiClient.get(API_ENDPOINTS.LOCATIONS.INDEX, {\n params: {\n page_num: (params && params.page_num ? params.page_num : 1),\n search: (params && params.search ? params.search : ''),\n }\n })\n .then(response => {\n dispatch(requestGetLocations(response.data))\n })\n}\n\nconst requestGetLocations = (json) => {\n return {\n type: GET_LOCATIONS,\n json\n };\n}\n\nexport const updateLocationsList = (values) => {\n return {\n type: LOCATIONS_UPDATE_LIST,\n values\n };\n}\n\nexport const updateLocation = (values) => {\n return {\n type: LOCATION_UPDATE_FORM_VALUES,\n values\n };\n}\n\nexport const saveLocation = (id, params) => (dispatch) => {\n let request;\n const formData = new FormData();\n const { location } = params;\n\n const appendFormData = (key, value) => {\n formData.append(`location[${key}]`, value);\n };\n\n const appendArrayToFormData = (key, array) => {\n if (array.length === 0) {\n appendFormData(`${key}[]`, '');\n } else {\n array.forEach(item => {\n formData.append(`location[${key}][]`, item);\n });\n }\n };\n\n const handleSecondaryImages = () => {\n if (location.secondary_images.length === 0) {\n appendFormData('secondary_images[]', '');\n } else {\n location.secondary_images.forEach(file => {\n const value = file.signed_id || file.file;\n formData.append('location[secondary_images][]', value);\n });\n }\n };\n\n const handleLocationHours = () => {\n location.location_hours.forEach((hour) => {\n ['day', 'time_open', 'time_close'].forEach((field) => {\n formData.append(`location[location_hours][][${field}]`, hour[field]);\n });\n if (hour.id) {\n appendFormData('location_hours][][id]', hour.id);\n }\n if (hour._destroy) {\n appendFormData('location_hours][][_destroy]', hour._destroy);\n }\n });\n };\n\n Object.entries(location).forEach(([key, value]) => {\n switch (key) {\n case 'secondary_images':\n handleSecondaryImages();\n break;\n case 'location_hours':\n handleLocationHours();\n break;\n case 'categories':\n appendArrayToFormData(key, value);\n break;\n default:\n appendFormData(key, value);\n }\n });\n\n if (id && id !== '') {\n request = apiClient.patch(API_ENDPOINTS.LOCATIONS.UPDATE(id), formData, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n }).then(response => response.data);\n } else {\n request = apiClient.post(API_ENDPOINTS.LOCATIONS.CREATE, formData, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n }).then(response => response.data);\n }\n\n return request;\n};\n\nexport const deleteLocation = (id, params) => (dispatch) => {\n return apiClient.delete(API_ENDPOINTS.LOCATIONS.DESTROY(id), params)\n}\n\nexport const showGoogleSheetUneditableFlashError = () => {\n return createFlash('Locations cannot be edited on Closeby with Google Sheets enabled.' , 'error')\n}\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport URLS from '../../constants/urls'\n\nimport { updateLocationsList, getLocations } from '../../actions/locationActions'\n\nexport class LocationsSearch extends Component {\n handleInputChange = (event) => {\n this.props.updateLocationsList({\n isFetching: true,\n locations: [],\n page_num: 1,\n search: event.currentTarget.value,\n });\n this.props.getLocations({ page_num: 1, search: event.currentTarget.value });\n }\n\n render() {\n return (\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state.locations\n }\n};\n\nexport default connect(mapStateToProps, { updateLocationsList, getLocations })(LocationsSearch);\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport URLS from '../../constants/urls'\n\nimport { showLocation, showGoogleSheetUneditableFlashError } from '../../actions/locationActions';\nimport LocationsSearch from './LocationsSearch';\n\nexport class LocationsListHeader extends Component {\n handleNewLocationClick = () => {\n this.props.showLocation({ 'showing': true, id: null });\n }\n\n handleNewLocationGoogleSyncClick = () => {\n window.open(this.props.googleSheetsUrl, \"_blank\");\n };\n\n renderAddButton = () => {\n const { hasGoogleSheetsSyncEnabled } = this.props.locations;\n\n if (hasGoogleSheetsSyncEnabled) {\n return (\n \n Add Location\n \n )\n } else {\n return (\n \n Add Location\n \n )\n }\n }\n\n render() {\n return (\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state\n }\n};\n\nexport default connect(mapStateToProps, { showLocation, showGoogleSheetUneditableFlashError })(LocationsListHeader);\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { showLocation, showGoogleSheetUneditableFlashError } from '../../actions/locationActions';\n\nexport class LocationsListItem extends Component {\n handleLocationEditClick = (location) => {\n return () => {\n const { hasGoogleSheetsSyncEnabled } = this.props.locations;\n\n const currentPageNum = this.props.locations.page_num || 1;\n this.props.showLocation({ showing: true, listPageNum: currentPageNum, ...this.props.location });\n }\n }\n\n render() {\n const { location, key } = this.props;\n const outOfStock = location.status && location.status !== 'in_stock';\n\n return (\n \n Locations\n
\n \n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state\n }\n};\n\nexport default connect(mapStateToProps, { showLocation, showGoogleSheetUneditableFlashError })(LocationsListItem);\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { showLocation, getLocations } from '../../actions/locationActions';\n\nimport LocationsListItem from './LocationsListItem';\nimport LocatorSpinner from '../locator/LocatorSpinner';\nimport ReactPaginate from 'react-paginate';\n\nexport class LocationsList extends Component {\n componentDidMount() {\n const { page_num } = this.props.locations;\n this.props.getLocations({ page_num: page_num });\n }\n\n handlePaginationClick = (page) => {\n const { search } = this.props.locations;\n const pageToShow = page.selected + 1;\n this.props.getLocations({ page_num: pageToShow, search: search });\n }\n\n renderLoading() {\n return (\n \n
\n \n {location.priority && (\n \n )}\n {location.title}\n
\n \n {location.address_full}\n
\n \n {location.hours_formatted_days ? location.hours_formatted_days : }\n
\n \n { location.phone_number && location.phone_number.length ? location.phone_number : }\n
\n \n { location.categories && location.categories.length ? location.categories.join(', ') : }\n
\n \n { location.banner_url && location.banner_url.length ? (\n \n ) : (\n \n )}\n
\n \n {location.status && location.status === 'in_stock' ? : }\n
\n \n
\n )\n }\n\n renderEmptyState() {\n return (\n \n
\n )\n }\n\n renderColumnHeaders() {\n const { isFetching } = this.props.locations;\n if (isFetching) return;\n\n return (\n \n You don't have any locations yet.\n
\n \n Add them by clicking 'Add Location' or import from Google Sheets.\n
\n \n
\n );\n }\n\n renderLocations() {\n const { locations, isFetching } = this.props.locations;\n\n if (isFetching) {\n return (\n \n
\n \n Name / Address\n
\n \n Hours\n
\n \n Phone\n
\n \n Categories\n
\n \n Images\n
\n \n In-Stock\n
\n \n {this.renderLoading()}\n
\n )\n } else if (locations.length === 0) {\n return (\n \n {this.renderEmptyState()}\n
\n )\n } else {\n return locations.map((location, key) => {\n return (\n \n
\n )\n }\n\n render() {\n return (\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n locations: state.locations\n }\n};\n\nexport default connect(mapStateToProps, { showLocation, getLocations })(LocationsList);\n","import PropTypes from 'prop-types'\nimport imgixUrl from '../../services/imgixUrl'\nimport React, { PureComponent } from 'react'\n\nimport { createFlash } from \"../../shared/createFlash\";\n\nexport class LocationBannerUploader extends PureComponent {\n state = {\n uploading: false\n }\n\n componentDidMount() {\n const { name, s3FormData, s3PostUrl, s3PostHost, onBannerChange, fileUrl } = this.props;\n\n $(this.fileInput).fileupload({\n fileInput: this.fileInput,\n url: s3PostUrl,\n type: 'POST',\n autoUpload: true,\n maxFileSize: 10000000, // 10 MB\n formData: s3FormData,\n paramName: 'file', // S3 does not like nested name fields i.e. name=\"user[avatar_url]\"\n dataType: 'XML', // S3 returns XML if success_action_status is set to 201\n replaceFileInput: false,\n start: (e) => {\n this.setState({ uploading: true });\n },\n submit: function (e, data) {\n $.each(data.files, function(i, file) {\n file.uploadName = encodeURI(file.name.replace(/\\s+/g, '_').replace(/\\+/g, '-'));\n });\n },\n done: (e, data) => {\n // Extract key and generate URL from response\n const uploaderKey = s3FormData.key.replace('${filename}', '');\n let key = $(data.jqXHR.responseXML).find('Key').text();\n const url = encodeURI(`//${s3PostHost}/${key}`);\n const filename = key.replace(uploaderKey, '');\n\n this.setState({ uploading: false });\n onBannerChange({ [name]: url });\n },\n fail: (e, data) => {\n createFlash('Sorry there was a problem uploading your image.', 'error')\n }\n });\n }\n\n handleRemoveBackground = (e) => {\n const { name, onRemoveBanner } = this.props;\n\n e.preventDefault()\n onRemoveBanner({ [name]: '' })\n this.fileInput.value = ''\n }\n\n render() {\n const { name, fileUrl } = this.props;\n\n return (\n \n {this.renderColumnHeaders()}\n\n
\n \n {this.renderLocations()}\n
\n\n {this.renderPagination()}\n \n {this.props.fileUrl && this.props.fileUrl.length ? (\n \n \n \n ) : (\n { this.fileInput.click() }}\n style={{ backgroundImage: `url(${imgixUrl(fileUrl, {w: 600})})` }}\n >\n \n {this.state.uploading ? (\n { this.fileInput = input }}\n />\n
\n );\n }\n}\n\nLocationBannerUploader.propTypes = {\n fileUrl: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n s3FormData: PropTypes.object.isRequired,\n s3PostUrl: PropTypes.string.isRequired,\n s3PostHost: PropTypes.string.isRequired,\n onBannerChange: PropTypes.func.isRequired,\n onRemoveBanner: PropTypes.func\n}\n\nexport default LocationBannerUploader;\n","import PropTypes from \"prop-types\";\nimport React, { Component } from \"react\";\nimport mapboxgl, { Marker } from 'mapbox-gl';\n\nclass MapPreview extends Component {\n render () {\n return (\n \n Upload an image.\n
\n )}\n \n Original dimensions will be shown in your widget.\n
\n \n
\n ) : ''}\n Uploading...
\n \n
\n )\n }\n\n get center () {\n const { latitude, longitude } = this.props\n return [longitude, latitude]\n }\n\n onDragEnd = () => {\n const lngLat = this.marker.getLngLat();\n this.props.onChange({\n latitude: lngLat.lat,\n longitude: lngLat.lng\n })\n }\n\n setMarker () {\n if (this.map) {\n this.marker = new Marker({\n draggable: true\n }).setLngLat(this.center)\n .addTo(this.map)\n\n this.marker.on('dragend', this.onDragEnd);\n }\n }\n\n componentDidUpdate () {\n if (this.marker) this.marker.remove()\n\n if (this.map) {\n this.map.setCenter(this.center)\n this.setMarker()\n }\n }\n\n componentDidMount () {\n if (this.mapNode) {\n mapboxgl.accessToken = this.props.mapboxClientKey;\n\n this.map = new mapboxgl.Map({\n attributionControl: false,\n container: this.mapNode,\n style: 'mapbox://styles/mapbox/streets-v9',\n minZoomNumber: 10,\n maxZoomNumber: 20,\n zoom: 15,\n center: this.center,\n interactive: true\n });\n this.map.scrollZoom.disable();\n this.map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), 'bottom-right');\n this.setMarker();\n }\n }\n}\n\nexport default MapPreview\n","import React, { Component } from \"react\";\nimport Geosuggest from 'react-geosuggest';\nimport MapPreview from './MapPreview'\n\nconst suggestionHasRequiredData = ({ gmaps, location }) =>\n gmaps?.formatted_address && location?.lat && location?.lng;\n\nclass AddressOnelineInput extends Component {\n constructor (props) {\n super(props)\n this.state = {}\n }\n\n onSuggestSelect = (suggest) => {\n if (this.geoSuggestNode) this.geoSuggestNode.blur();\n if (!suggest) return;\n if (this.state.error) this.setState({ error: null });\n \n if (!suggestionHasRequiredData(suggest)) {\n return this.setError(new Error('Missing data for this address, please try again'));\n }\n \n const { lat: latitude, lng: longitude } = suggest.location;\n \n this.props.onChange({\n address_full: suggest.gmaps.formatted_address,\n latitude,\n longitude,\n });\n };\n\n onInputChange = (value) => {\n this.props.onChange({\n address_full: value,\n });\n }\n \n setError = (error) => {\n this.setState({\n error: error.message || 'Error with this address selection',\n });\n }\n\n render () {\n const { addressFull, latitude, longitude, mapboxClientKey, onChange } = this.props\n const { error } = this.state\n return (\n this.mapNode = node}>\n
\n \n { error &&
\n )\n }\n}\n\nexport default AddressOnelineInput\n","export const hoursList = {\n '00:00': '12AM',\n '00:15': '12:15AM',\n '00:30': '12:30AM',\n '00:45': '12:45AM',\n '01:00': '1AM',\n '01:15': '1:15AM',\n '01:30': '1:30AM',\n '01:45': '1:45AM',\n '02:00': '2AM',\n '02:15': '2:15AM',\n '02:30': '2:30AM',\n '02:45': '2:45AM',\n '03:00': '3AM',\n '03:15': '3:15AM',\n '03:30': '3:30AM',\n '03:45': '3:45AM',\n '04:00': '4AM',\n '04:15': '4:15AM',\n '04:30': '4:30AM',\n '04:45': '4:45AM',\n '05:00': '5AM',\n '05:15': '5:15AM',\n '05:30': '5:30AM',\n '05:45': '5:45AM',\n '06:00': '6AM',\n '06:15': '6:15AM',\n '06:30': '6:30AM',\n '06:45': '6:45AM',\n '07:00': '7AM',\n '07:15': '7:15AM',\n '07:30': '7:30AM',\n '07:45': '7:45AM',\n '08:00': '8AM',\n '08:15': '8:15AM',\n '08:30': '8:30AM',\n '08:45': '8:45AM',\n '09:00': '9AM',\n '09:15': '9:15AM',\n '09:30': '9:30AM',\n '09:45': '9:45AM',\n '10:00': '10AM',\n '10:15': '10:15AM',\n '10:30': '10:30AM',\n '10:45': '10:45AM',\n '11:00': '11AM',\n '11:15': '11:15AM',\n '11:30': '11:30AM',\n '11:45': '11:45AM',\n '12:00': '12PM',\n '12:15': '12:15PM',\n '12:30': '12:30PM',\n '12:45': '12:45PM',\n '13:00': '1PM',\n '13:15': '1:15PM',\n '13:30': '1:30PM',\n '13:45': '1:45PM',\n '14:00': '2PM',\n '14:15': '2:15PM',\n '14:30': '2:30PM',\n '14:45': '2:45PM',\n '15:00': '3PM',\n '15:15': '3:15PM',\n '15:30': '3:30PM',\n '15:45': '3:45PM',\n '16:00': '4PM',\n '16:15': '4:15PM',\n '16:30': '4:30PM',\n '16:45': '4:45PM',\n '17:00': '5PM',\n '17:15': '5:15PM',\n '17:30': '5:30PM',\n '17:45': '5:45PM',\n '18:00': '6PM',\n '18:15': '6:15PM',\n '18:30': '6:30PM',\n '18:45': '6:45PM',\n '19:00': '7PM',\n '19:15': '7:15PM',\n '19:30': '7:30PM',\n '19:45': '7:45PM',\n '20:00': '8PM',\n '20:15': '8:15PM',\n '20:30': '8:30PM',\n '20:45': '8:45PM',\n '21:00': '9PM',\n '21:15': '9:15PM',\n '21:30': '9:30PM',\n '21:45': '9:45PM',\n '22:00': '10PM',\n '22:15': '10:15PM',\n '22:30': '10:30PM',\n '22:45': '10:45PM',\n '23:00': '11PM',\n '23:15': '11:15PM',\n '23:30': '11:30PM',\n '23:45': '11:45PM',\n}\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport orderby from 'lodash.orderby';\nimport Select from 'react-select';\n\nimport { hoursList } from '../../shared/hoursList';\n\nfunction isLocationHoursEqual (locationHour1, locationHour2) {\n return (\n locationHour1.day === locationHour2.day &&\n locationHour1.time_open === locationHour2.time_open &&\n locationHour1.time_close === locationHour2.time_close\n )\n}\n\nclass HoursPicker extends Component {\n constructor (props) {\n super(props)\n\n this.state = {\n day: this.daysOptions()[1],\n timeOpen: this.hoursOptions('timeOpen')[18],\n timeClose: this.hoursOptions('timeClose')[34],\n }\n }\n\n daysOptions() {\n return Object.keys(days).map((dayKey) => {\n const label = days[dayKey]\n const value = dayKey\n\n return {\n value: parseInt(value, 10),\n label: label,\n type: 'day'\n }\n })\n }\n\n hoursOptions(type) {\n return Object.keys(hoursList).map((hourKey) => {\n const label = hoursList[hourKey]\n const value = hourKey\n\n return {\n value: value,\n label: label,\n type: type\n }\n })\n }\n\n onAddHoursChange = (selectedOption) => {\n this.setState({ [selectedOption.type]: selectedOption })\n }\n\n setError (error) {\n console.error(error)\n this.setState({\n error: error.message || 'Something went wrong'\n })\n }\n\n addHours = () => {\n this.setState({error: null})\n const { day, timeOpen, timeClose } = this.state\n const { locationHours = [] } = this.props\n const newHours = {\n day: day.value,\n time_open: timeOpen.value,\n time_close: timeClose.value\n }\n const alreadyHave = locationHours.filter((locationHour) => {\n return isLocationHoursEqual(locationHour, newHours)\n })\n if (alreadyHave.length) {\n return this.setError(new Error('Those hours have already been added.'))\n }\n locationHours.push(newHours)\n this.props.onChange({\n location_hours: locationHours\n })\n }\n\n removeLocationHour (locationHour) {\n this.setState({error: null})\n const { locationHours = [] } = this.props\n if (locationHour.id) {\n locationHour._destroy = 1\n } else {\n const _locationHours = locationHours.filter((_locationHour) => {\n return !isLocationHoursEqual(_locationHour, locationHour)\n })\n this.props.onChange({\n location_hours: _locationHours\n })\n }\n }\n\n renderHoursList() {\n let { locationHours = [] } = this.props\n locationHours = orderby(locationHours, ['day', 'time_open']).filter((lh) => !lh._destroy)\n\n\n if (locationHours.length) {\n return (\n {error}
}\n \n No location set. Please select an address to save this location.\n
\n )}\n \n
\n )\n } else {\n return (\n \n {locationHours.map((locationHour, index) => {\n return (\n
\n \n {days[locationHour.day]}\n
\n )\n })}\n \n {hoursList[locationHour.time_open]} - {hoursList[locationHour.time_close]}\n
\n this.removeLocationHour(locationHour)} className=\"location-edit-form-hours-item-remove\">\n \n \n \n No hours added yet.\n
\n )\n }\n\n\n }\n\n render () {\n const { day, timeOpen, timeClose, error } = this.state\n\n return (\n \n { error ?
\n )\n }\n}\n\nconst days = {\n 0: 'Sunday',\n 1: 'Monday',\n 2: 'Tuesday',\n 3: 'Wednesday',\n 4: 'Thursday',\n 5: 'Friday',\n 6: 'Saturday'\n}\n\nexport default HoursPicker\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport differenceby from 'lodash.differenceby';\n\nimport TagsInput from 'react-tagsinput'\nimport Autosuggest from 'react-autosuggest'\n\nclass CategoriesPicker extends Component {\n constructor (props) {\n super(props)\n }\n\n handleChange = (categories) => {\n this.props.updateLocation({ categories });\n }\n\n currentCategoriesAsSelectOptions = () => {\n const { categories } = this.props;\n return categories.map((category)=> {\n return { name: category, value: category }\n })\n }\n\n render () {\n const { categories } = this.props;\n const currentCategoriesArray = categories.length ? this.currentCategoriesAsSelectOptions() : []\n\n function autocompleteRenderInput ({addTag, ...props}) {\n const handleOnChange = (e, {newValue, method}) => {\n if (method === 'enter') {\n e.preventDefault()\n } else {\n props.onChange(e)\n }\n }\n\n const inputValue = (props.value && props.value.trim().toLowerCase()) || ''\n const inputLength = inputValue.length\n const suggestions = differenceby(props.suggestions, props.categories, 'value')\n\n return (\n {error}
: ''}\n\n {this.renderHoursList()}\n\n \n
\n \n
\n \n
\n \n
\n \n Add hours\n
\n \n
\n )\n }\n}\n\nCategoriesPicker.propTypes = {\n updateLocation: PropTypes.func.isRequired,\n categories: PropTypes.array.isRequired,\n categories_available: PropTypes.array.isRequired,\n}\n\nexport default CategoriesPicker\n","import React, { useRef, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport accordionUp from 'images/locations/up.png';\nimport accordionDown from 'images/locations/down.png';\nimport uploadIcon from 'images/locations/upload.png';\nimport deleteButton from 'images/locations/delete.png';\n\nconst MAX_IMAGES = 25;\n\nconst LocationEditSecondaryImages = ({\n hasImages,\n imageCounts,\n images,\n onImagesUpload,\n showing,\n}) => {\n const [isAccordionOpen, setIsAccordionOpen] = useState(true);\n const [hasSecondaryImages, setHasSecondaryImages] = useState(false);\n const [imageCount, setImageCount] = useState(imageCounts);\n const [imageArray, setImageArray] = useState(images);\n const fileInputRef = useRef(null);\n\n useEffect(() => { \n setHasSecondaryImages(hasImages > 0);\n setImageCount(imageCounts);\n setImageArray(images);\n }, [showing]);\n\n const handleAddSecondaryImages = () => {\n setHasSecondaryImages(true);\n };\n\n const handleUploadClick = () => {\n if (fileInputRef.current) {\n fileInputRef.current.click();\n }\n };\n\n const handleFileChange = (event) => {\n const files = Array.from(event.target.files);\n \n if (imageArray.length + files.length > MAX_IMAGES) {\n const availableSlots = MAX_IMAGES - imageArray.length;\n\n alert(`You can only add ${availableSlots} more ${availableSlots === 1 ? 'image' : 'images'}.`);\n files.splice(availableSlots);\n }\n \n if (files.length > 0) {\n const newImageArray = Array.prototype.slice.call(files);\n let imageSignedIdArray = imageArray.map((image) => (image.signed_id ? image.signed_id : image));\n imageSignedIdArray.push(...newImageArray);\n \n const imageObjects = newImageArray.map((file) => ({\n file: file,\n url: URL.createObjectURL(file),\n }));\n \n setImageArray(imageArray.concat(imageObjects));\n setImageCount(imageArray.length + imageObjects.length);\n onImagesUpload({ secondary_images: imageArray.concat(imageObjects) });\n }\n };\n\n const handleRemoveImage = (id, index) => {\n const newImages = imageArray.filter((image, i) => (\n (id !== undefined)\n ? (image.signed_id !== id)\n : (i !== index)\n ));\n\n setImageArray(newImages);\n setImageCount(imageCount - 1);\n onImagesUpload({ secondary_images: newImages });\n };\n\n return (\n \n {hasSecondaryImages ? (\n \n Enable secondary images\n
\n )}\n \n );\n};\n\nLocationEditSecondaryImages.propTypes = {\n hasImages: PropTypes.bool,\n imageCounts: PropTypes.number,\n images: PropTypes.array,\n onImagesUpload: PropTypes.func,\n showing: PropTypes.bool,\n};\n\nexport default LocationEditSecondaryImages;\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { Editor } from 'react-draft-wysiwyg';\nimport { convertToRaw, ContentState, EditorState, createFromBlockArray, Modifier } from 'draft-js';\nimport draftToHtml from 'draftjs-to-html';\nimport htmlToDraft from 'html-to-draftjs';\n\nimport { getLocations, hideLocation, updateLocation, saveLocation, deleteLocation, showLocation } from '../../actions/locationActions';\nimport { createFlash } from '../../shared/createFlash';\n\nimport LocationBannerUploader from './LocationBannerUploader';\nimport AddressOnelineInput from './AddressOnelineInput';\nimport HoursPicker from './HoursPicker';\nimport CategoriesPicker from './CategoriesPicker';\nimport LocationEditSecondaryImages from './LocationEditSecondaryImages';\n\nexport class LocationEditForm extends Component {\n constructor(props) {\n super(props)\n this.state = { isSaving: false }\n }\n\n handleHideLocation = () => {\n this.props.hideLocation({ showing: false });\n }\n\n handleChange = (name, normalizer = value => value) => {\n return event => {\n const { target: { value } } = event;\n this.props.updateLocation({ [name]: normalizer(value) });\n }\n }\n\n handleCheckboxChange = name => {\n return event => {\n if (name === 'status') {\n this.props.updateLocation({ [name]: event.target.checked ? 'out_of_stock' : 'in_stock' });\n } else {\n this.props.updateLocation({ [name]: event.target.checked });\n }\n }\n }\n\n hangleEditorChange = (updatedContent) => {\n this.props.updateLocation({ welcome_text_json: updatedContent });\n }\n\n handleSubmit = (event) => {\n event.stopPropagation()\n event.preventDefault()\n\n this.setState({ isSaving: true });\n\n let stateToSave = Object.assign({}, this.props.form)\n let wysiwygContent = this.props.form.welcome_text_json.getCurrentContent()\n stateToSave.welcome_text_json = convertToRaw(wysiwygContent)\n stateToSave.welcome_text = draftToHtml(stateToSave.welcome_text_json)\n\n this.props.saveLocation(this.props.form.id, { location: stateToSave })\n .then(json => {\n if (json.status === 'error') {\n createFlash(json.error_message, 'error')\n } else {\n if (json.new_record) {\n createFlash('New location has been saved!', 'success');\n } else {\n createFlash('Your location changes have been saved!', 'success');\n }\n this.props.hideLocation({ showing: false });\n this.props.getLocations({ page_num: this.props.listPageNum });\n }\n\n this.setState({ isSaving: false });\n }).catch((error) => {\n let msg = 'Something went wrong trying to save these changes please try again.'\n if (error.response && error.response && error.response.data.error_message) {\n msg = error.response.data.error_message\n }\n createFlash(msg, 'error')\n this.setState({ isSaving: false });\n })\n }\n\n handleDelete = (event) => {\n event.stopPropagation()\n event.preventDefault()\n if (this.props.hasGoogleSheetsSyncEnabled) {\n createFlash('Adding, editing and deleting locations is disabled when google sheets syncing is turned on.', 'error');\n return;\n }\n\n this.props.deleteLocation(this.props.form.id)\n .then(json => {\n createFlash('Your location has been deleted.', 'notice')\n this.props.hideLocation({ 'showing': false });\n this.props.getLocations({ page_num: this.props.listPageNum });\n }).catch((error) => {\n createFlash('Something went wrong. Please try again.', 'error')\n })\n }\n\n get renderSampleDeleteNotion() {\n if (!this.props.form.sample) return;\n\n return (\n \n
\n ) : (\n \n Secondary Images\n setIsAccordionOpen(!isAccordionOpen)}\n />\n
\n {isAccordionOpen && (\n <>\n \n \n 
\n Upload images\n \n = MAX_IMAGES}\n accept=\"image/*\"\n />\n \n {imageCount}/{MAX_IMAGES}\n \n
\n \n {imageArray.map((image, index) => (\n
\n \n )}\n \n
\n ))}\n \n 
\n 
handleRemoveImage(image.signed_id, index)} />\n
\n \n {image.filename}\n
\n \n
\n )\n }\n\n get renderOutOfStockNotice() {\n if (this.props.form.sample) return;\n if (this.props.form.status === 'in_stock') return;\n\n return (\n This is just an example location :)
\n \n Delete Location\n \n \n This location has been marked \"Out-Of-Stock\"\n
\n )\n }\n\n get renderBannerImage() {\n const { form: { banner_url }, s3BannerProps } = this.props;\n const { isSaving } = this.state;\n const url = banner_url && banner_url.length && banner_url.includes('//') ? banner_url : '';\n\n return (\n \n
\n )\n }\n\n get renderTitle() {\n return (\n \n \n \n
\n )\n }\n\n get renderPhoneNumber() {\n return (\n \n \n \n
\n )\n }\n\n get renderAddress() {\n return (\n \n \n
\n )\n }\n\n get renderWebsiteAndEmail() {\n return (\n \n
\n )\n }\n\n get renderCategories () {\n return (\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n \n
\n )\n }\n\n get renderHours () {\n return (\n \n \n
\n )\n }\n\n get renderWelcomeMessage() {\n return (\n \n \n
\n )\n }\n\n get renderOutOfStock() {\n const { status } = this.props.form;\n\n return (\n \n {\n const blockMap = ContentState.createFromText(text.trim()).blockMap;\n const newState = Modifier.replaceWithFragment(this.props.form.welcome_text_json.getCurrentContent(), this.props.form.welcome_text_json.getSelection(), blockMap);\n this.hangleEditorChange(EditorState.push(this.props.form.welcome_text_json, newState, 'insert-fragment'));\n return true;\n }}\n toolbar={{\n options: ['inline', 'list', 'link'],\n inline: {\n inDropdown: true,\n options: ['bold', 'italic', 'underline', 'strikethrough']\n },\n list: { inDropdown: true },\n link: { defaultTargetOption: '_blank' }\n }}\n />\n
\n \n \n
\n )\n }\n\n get renderPriorityLocation() {\n const { priority } = this.props.form;\n\n return (\n \n \n
\n )\n }\n\n get renderAdvancedOptions() {\n const { buttonSetting } = this.props;\n const { custom_button_enabled } = this.props.form;\n\n const showCustomButtonWithDefault = buttonSetting === 'custom_button_overrides_directions' ? true : false;\n\n return (\n \n
\n )\n }\n\n get renderCustomButton() {\n const { buttonSetting } = this.props;\n\n return (\n \n Advanced Options\n
\n {this.renderPriorityLocation}\n\n {this.renderOutOfStock}\n \n
\n )\n }\n\n get renderDeliveryLinks() {\n return (\n \n
\n \n \n \n
\n \n \n \n
\n \n Note: If you would like to always show directions or always hide the \"Get Directions\" button, update your button settings in your theme options.\n
\n \n
\n )\n }\n\n get submitFormBtn() {\n const { isSaving } = this.state;\n\n return (\n \n Delivery/Integration Links\n Learn More\n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n Save Changes\n Cancel\n
\n )\n }\n\n render() {\n const { hasGoogleSheetsSyncEnabled, googleSheetsUrl } = this.props;\n\n return (\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n let wysiwygState,\n formValues;\n\n if (state.locationForm.welcome_text_json && state.locationForm.welcome_text_json.hasOwnProperty('_immutable')) {\n wysiwygState = state.locationForm.welcome_text_json\n } else if (state.locationForm.id && (state.locationForm.welcome_text_json || state.locationForm.welcome_text)) {\n // Converting from database welcome_text_json or welcome_text format\n const sanitizedHtml = (state.locationForm.welcome_text || '').replace(/[\\r\\n]+/g, '');\n const blocksFromHTML = htmlToDraft(sanitizedHtml);\n wysiwygState = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks, blocksFromHTML.entityMap);\n wysiwygState = EditorState.createWithContent(wysiwygState)\n } else {\n wysiwygState = EditorState.createEmpty()\n }\n\n formValues = {\n address_full: state.locationForm.address_full || '',\n banner_url: state.locationForm.banner_url || '',\n categories: state.locationForm.categories || [],\n categories_available: state.locationForm.categories_available,\n custom_button_enabled: state.locationForm.custom_button_enabled,\n custom_button_text: state.locationForm.custom_button_text || '',\n custom_button_url: state.locationForm.custom_button_url || '',\n didi: state.locationForm.didi || '',\n deliveroo: state.locationForm.deliveroo || '',\n doordash: state.locationForm.doordash || '',\n email: state.locationForm.email || '',\n grubhub: state.locationForm.grubhub || '',\n id: state.locationForm.id || '',\n just_eat: state.locationForm.just_eat || '',\n latitude: state.locationForm.latitude || '',\n longitude: state.locationForm.longitude || '',\n location_hours: state.locationForm.location_hours || [],\n phone_number: state.locationForm.phone_number || '',\n postmates: state.locationForm.postmates || '',\n priority: state.locationForm.priority || false,\n rappi: state.locationForm.rappi || '',\n sample: state.locationForm.sample,\n short_description: state.locationForm.short_description || '',\n secondary_images: state.locationForm.secondary_images || [],\n status: state.locationForm.status || 'in_stock',\n swiggy: state.locationForm.swiggy || '',\n title: state.locationForm.title || '',\n website: state.locationForm.website || '',\n welcome_text_json: wysiwygState,\n uber_eats: state.locationForm.uber_eats || '',\n zomato: state.locationForm.zomato || '',\n }\n\n return {\n form: formValues,\n mapboxClientKey: state.locationForm.mapboxClientKey,\n s3BannerProps: state.locationForm.s3BannerProps,\n showLocationPath: state.locationForm.showLocationPath,\n listPageNum: state.locationForm.listPageNum,\n }\n};\n\nexport default connect(mapStateToProps, {\n getLocations,\n hideLocation,\n updateLocation,\n saveLocation,\n deleteLocation\n})(LocationEditForm);\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nimport { hideLocation } from \"../../actions/locationActions\";\n\nimport LocationEditForm from './LocationEditForm';\n\nexport class LocationEdit extends Component {\n handleHideLocation = () => {\n this.props.hideLocation({ showing: false });\n }\n\n render() {\n\n return (\n \n
\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n hasGoogleSheetsSyncEnabled: state.locations.hasGoogleSheetsSyncEnabled,\n showing: state.locationForm.showing,\n showCustomButtonWithDefault: state.locationForm.showCustomButtonWithDefault\n }\n};\n\nexport default connect(mapStateToProps, { hideLocation })(LocationEdit);\n","import PropTypes from \"prop-types\";\nimport React, { Component } from \"react\";\nimport { Provider } from \"react-redux\";\n\nimport store, { stateInitializer } from \"../../store\";\nimport PaymentBannerNotice from \"../subscriptions/PaymentBannerNotice\";\nimport LocationsListHeader from \"./LocationsListHeader\";\nimport LocationsList from \"./LocationsList\";\nimport LocationEdit from \"./LocationEdit\";\n\nexport default class LocationsIndex extends Component {\n constructor(props) {\n super(props);\n\n stateInitializer({\n locations: {\n isFetching: true,\n page_num: 1,\n search: '',\n hasGoogleSheetsSyncEnabled: props.hasGoogleSheetsSyncEnabled,\n },\n locationForm: {\n buttonSetting: props.buttonSetting,\n categories_available: props.categories_available,\n mapboxClientKey: props.mapboxClientKey,\n s3BannerProps: {\n s3FormData: props.s3BannerFormData,\n s3PostUrl: props.s3BannerPostUrl,\n s3PostHost: props.s3BannerPostHost\n },\n showing: false,\n }\n });\n }\n\n render() {\n const { isFree, isTrialing } = this.props\n\n return (\n \n
\n \n
\n \n
\n \n
\n );\n }\n}\n\nexport default MapsHeader\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { Provider } from 'react-redux';\n\nimport store, { stateInitializer } from '../../store';\nimport PaymentBannerNotice from '../subscriptions/PaymentBannerNotice';\nimport MapsHeader from './MapsHeader';\nimport LocatorWrapper from '../locator/LocatorWrapper';\nimport URLS from '../../constants/urls'\n\nimport KeyIcon from 'images/map/key.png';\nimport BookIcon from 'images/map/book.png';\n\nexport default class MapsIndex extends Component {\n constructor(props) {\n super(props);\n\n stateInitializer({\n locator: {\n ...props,\n isFetching: true,\n location: this.props.specificLocation,\n locations: [],\n markers: [],\n popups: [],\n selectedCategories: [],\n showRefreshList: false\n },\n embed: {\n pageEmbed: props.pageEmbed,\n showingMobileList: false,\n },\n });\n }\n\n componentDidMount () {\n if (/signed_up=true/.test(window.location.search)) {\n Track.event('Signed up');\n }\n }\n\n render() {\n const {\n defaultViewport,\n doesMapGeolocate,\n hasWixConnected,\n isFree,\n isTrialing,\n mapboxClientKey,\n hasMapboxClientKey,\n mapKey\n } = this.props\n\n return (\n \n Map Theming\n
\n \n \n Features\n \n \n FAQ\n \n
\n \n
\n \n
\n \n {hasMapboxClientKey && (\n \n 
\n Installation Instructions\n \n )}\n {!hasMapboxClientKey && (\n \n 
\n Activate Your Map\n \n )}\n
\n \n
\n \n \n
\n )\n });\n }\n\n renderCustomStyleOption = () => {\n const { mapbox_client_key } = this.props;\n const mapboxClientKeyExists = mapbox_client_key && mapbox_client_key.length > 50 && mapbox_client_key.includes('pk.');\n\n if (!mapboxClientKeyExists) return;\n\n return (\n \n
\n )\n }\n\n render() {\n return (\n \n
\n \n
\n \n
\n\n Use Custom Mapbox Style
\n \n
\n Add the Style URL from your Mapbox account to use a custom style. Learn more here.
\n\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state.mapsEditor\n }\n};\n\nexport default connect(mapStateToProps, { updateMapsEditor })(MapsEditorStylePicker);\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport find from 'lodash.find';\n\nimport { Editor } from 'react-draft-wysiwyg';\nimport { convertToRaw, ContentState, EditorState, createFromBlockArray, Modifier } from 'draft-js';\nimport draftToHtml from 'draftjs-to-html';\nimport htmlToDraft from 'html-to-draftjs';\n\nimport { SUPPORT_EMAIL } from '../../constants';\n\nimport { updateMapsEditor } from '../../actions/mapsEditorActions';\n\nexport class MapsEditorTextOverrides extends Component {\n handleChange = name => {\n return event => {\n const { text_overrides } = this.props;\n const { target: { value } } = event;\n\n let newState = {...text_overrides };\n newState[name] = value;\n\n if (name === 'no_locations_json') {\n let wysiwygContent = this.props.form.welcome_text_json.getCurrentContent()\n newState.welcome_text_json = convertToRaw(wysiwygContent)\n newState.welcome_text = draftToHtml(newState.welcome_text_json)\n }\n\n this.props.updateMapsEditor({ text_overrides: newState });\n }\n }\n\n handleEditorChange = json_name => {\n return updatedContent => {\n const { text_overrides } = this.props;\n let newState = { ...text_overrides };\n newState[json_name] = updatedContent;\n\n this.props.updateMapsEditor({ text_overrides: newState });\n }\n }\n\n get renderLocationsLimit() {\n return (\n \n
\n \n Map Style\n
\n \n Select an underlying style to use for your map. If you'd like to use your own custom style using Mapbox Studio, you can learn more here.\n
\n \n
\n \n {this.renderStyles()}\n {this.renderCustomStyleOption()}\n
\n \n
\n )\n }\n\n get renderLocationWebsiteLabel() {\n return (\n \n Locations Limit\n
\n \n When more locations than the limit is found (ie \"Showing 200 of 621 locations. Zoom in or use the search...\").\n
\n \n
\n \n
\n )\n }\n\n get renderMobileToggles() {\n return (\n \n Location Website Link\n
\n \n When locations have a URL set, this is the text that will be displayed for the link.\n
\n \n
\n \n
\n )\n }\n\n get renderOpenHourDays() {\n return (\n \n Mobile List Toggles\n
\n \n The text to hide or show the locations list on mobile browsers. Only applicable when \"Full Map\" is enabled as the mobile theme style.\n
\n \n
\n \n
\n \n
\n \n
\n
\n )\n }\n\n get renderOpenHourDayRange() {\n return (\n \n Open Hour Days\n
\n \n The labels for each day of the week when displaying open hours.\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n \n Closed Day Text (if enabled in theming)\n
\n \n
\n \n
\n )\n }\n\n get renderTextOptions() {\n return (\n \n Open Hours Day Range\n
\n \n The text when indicating a range between open days. For example, \"Open Mon-Fri\" or \"Monday to Friday\".\n
\n \n
\n \n
\n \n
\n \n
\n )\n }\n\n render() {\n return (\n \n
\n \n
\n \n
\n \n Language Customization FAQ\n
\n \n Visit this article to learn more about customizing your map language.\n
\n \n
\n \n Search Placeholder\n
\n \n Placeholder text shown inside the map search box.\n
\n \n
\n \n
\n \n Filters Options\n
\n \n The label to show the category filters (if being used).\n
\n \n
\n \n
\n {this.renderLocationsLimit}\n {this.renderLocationWebsiteLabel}\n {this.renderMobileToggles}\n \n No Locations Found\n
\n \n The text to show the customer when no locations are found.\n
\n \n
\n \n
\n \n
\n \n Directions Button\n
\n \n The link automatically created to show directions to a location.\n
\n \n
\n \n
\n \n Refresh Search\n
\n \n The link that appears to refresh the search after moving the map.\n
\n \n
\n \n
\n\n {this.renderOpenHourDays}\n {this.renderOpenHourDayRange}\n \n Open 24 Hours\n
\n \n The text that is displayed when a location is open 24 hours.\n
\n \n
\n \n {this.renderTextOptions}\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n let wysiwygState,\n formValues;\n\n let text_overrides = state.mapsEditor.text_overrides;\n\n if (text_overrides['no_locations_json'] && text_overrides['no_locations_json'].hasOwnProperty('_immutable')) {\n wysiwygState = text_overrides['no_locations_json'];\n } else if (text_overrides['no_locations']) {\n const sanitizedHtml = text_overrides['no_locations'] ? text_overrides['no_locations'].replace(/[\\r\\n]+/g, '') : '';\n const blocksFromHTML = htmlToDraft(sanitizedHtml);\n wysiwygState = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks, blocksFromHTML.entityMap);\n wysiwygState = EditorState.createWithContent(wysiwygState)\n } else {\n wysiwygState = EditorState.createEmpty();\n }\n\n text_overrides['no_locations_json'] = wysiwygState;\n\n return {\n ...state.mapsEditor,\n text_overrides: {\n ...text_overrides\n }\n }\n};\n\nexport default connect(mapStateToProps, { updateMapsEditor })(MapsEditorTextOverrides);\n","import PropTypes from 'prop-types';\nimport React, { Component, useRef, useState } from 'react';\nimport { connect } from 'react-redux';\nimport { SketchPicker } from 'react-color';\n\nimport { useClickAway } from '../../shared/useClickAway.js'\n\nexport const MapsEditorColorPicker = (props) => {\n const activeColor = props.css[props.name] || props.defaultColor;\n\n const [state, setState] = useState({\n showing: null,\n color: props.css[props.name],\n colors: [\n props.defaultColor,\n '#ea704b',\n '#715f30',\n '#88852b',\n '#5eaf44',\n '#30bd68',\n '#406bcc',\n '#0a7cbd',\n '#FFFFFF',\n '#514fb1',\n '#E96464',\n '#d03434',\n '#cc7021',\n '#7d35a5',\n '#724f98',\n '#000000',\n ],\n showingPicker: false,\n });\n\n const colorPickerRef = useRef(null);\n\n const handleChangeComplete = color => {\n if (!props.name) return;\n\n const newColor =\n color.rgb && color.rgb.a != 1\n ? `rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`\n : color.hex;\n\n let newProps = { ...props.css };\n newProps[props.name] = newColor;\n\n setState({ ...state, color: newColor, showingPicker: true });\n props.handleChange(newProps);\n };\n\n const openPicker = () => {\n setState({ ...state, showingPicker: true });\n }\n\n const closePicker = () => {\n setState({ ...state, showingPicker: false });\n }\n\n // useClickAway(colorPickerRef, () => {\n // if (state.showingPicker) closePicker();\n // })\n\n return (\n \n
\n ) : (\n \n {state.showingPicker ? (\n
\n \n \n \n \n \n
\n {activeColor}\n \n {state.showingPicker && (\n
\n \n );\n}\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nimport { updateMapsEditor } from '../../actions/mapsEditorActions';\n\nimport { MapsEditorColorPicker } from './MapsEditorColorPicker';\n\nexport class MapsEditorAdvancedTheming extends Component {\n handleColorChange = params => {\n this.props.updateMapsEditor({\n css_overrides: params,\n reset: false\n })\n }\n\n handleColorRemove = name => {\n return () => {\n let cssOverrides = this.props.css_overrides;\n delete cssOverrides[name];\n\n this.props.updateMapsEditor({ css_overrides: cssOverrides, reset: false });\n //Note: Added this because DOM wasn't redrawing after updating css_overrides\n this.forceUpdate();\n }\n }\n\n resetColors = () => {\n this.props.updateMapsEditor({\n css_overrides: {\n reset: true\n }\n })\n }\n\n renderClearLink = name => {\n if (this.props.css_overrides[name]) {\n return (\n \n Clear\n \n )\n }\n }\n\n get renderListBackgroundColor() {\n return (\n \n
\n )\n }\n\n get renderActionTextColor() {\n return (\n \n Locations List Background\n
\n \n Background color of your locations list.\n
\n \n
\n )\n }\n\n get renderPopupTextColor() {\n return (\n \n Button Text Color\n
\n \n Text color of your location button.\n
\n \n
\n )\n }\n\n get renderLocationTitleColor() {\n return (\n \n Popup Text Color\n
\n \n Text color of your map poups.\n
\n \n
\n )\n }\n\n get renderLocationSubtitleColor() {\n return (\n \n Location Title Color\n {this.renderClearLink('location_title_color')}\n
\n \n Location name color in full list and location details.\n
\n \n
\n )\n }\n\n get renderLocationDetailsColor() {\n return (\n \n Location Subtitle Color\n {this.renderClearLink('location_subtitle_color')}\n
\n \n Location address color in full list and location details.\n
\n \n
\n )\n }\n\n get renderFiltersBackgroundColor() {\n return (\n \n Location Details Color\n {this.renderClearLink('location_details_color')}\n
\n \n Text color of location hours and additional details.\n
\n \n
\n )\n }\n\n get renderFiltersPlaceholderColor() {\n return (\n \n Filters Background\n {this.renderClearLink('filters_background_color')}\n
\n \n Background color of your location filters.\n
\n \n
\n )\n }\n\n get renderFiltersSelectedColor() {\n return (\n \n Filters Placeholder Color\n {this.renderClearLink('filters_placeholder_color')}\n
\n \n Text color of your filters empty state.\n
\n \n
\n )\n }\n\n get renderSearchTextColor() {\n return (\n \n Filters Selected Icon Color\n {this.renderClearLink('filters_selected_icon_color')}\n
\n \n Color for the icon on selected filters.\n
\n \n
\n )\n }\n\n get renderSearchIconColor() {\n return (\n \n Search Text Color\n {this.renderClearLink('search_text_color')}\n
\n \n Text color of your autocomplete search.\n
\n \n
\n )\n }\n\n get renderSearchPlaceholderColor() {\n return (\n \n Search Icon Color\n {this.renderClearLink('search_icon_color')}\n
\n \n Color of your autocomplete search icon.\n
\n \n
\n )\n }\n\n get renderSearchBackgroundColor() {\n return (\n \n Search Placeholder Color\n {this.renderClearLink('search_placeholder_text_color')}\n
\n \n Text color of your autocomplete search placeholder.\n
\n \n
\n )\n }\n\n get renderUserLocationColor() {\n return (\n \n Search Input Background\n {this.renderClearLink('search_background_color')}\n
\n \n Background color of your autocomplete search.\n
\n \n
\n )\n }\n\n render() {\n return (\n \n User Location Icon Color\n {this.renderClearLink('user_location_color')}\n
\n \n Color of the user's current location on the map when the default map position is set to \"geolocate\".\n
\n \n
\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state.mapsEditor\n }\n};\n\nexport default connect(mapStateToProps, { updateMapsEditor })(MapsEditorAdvancedTheming);\n","import PropTypes from \"prop-types\";\nimport React, { Component } from \"react\";\nimport mapboxgl from 'mapbox-gl';\nimport { MAPS_EDITOR_MODAL_ID } from '../../constants/index'\n\nclass MapsEditorDefaultMap extends Component {\n componentDidUpdate () {\n this.setMapBoundsByCoordinates()\n }\n\n componentDidMount () {\n if (this.mapNode) {\n mapboxgl.accessToken = this.props.appMapboxKey;\n\n this.map = new mapboxgl.Map({\n attributionControl: false,\n container: this.mapNode,\n style: 'mapbox://styles/mapbox/streets-v9',\n interactive: false\n });\n this.map.scrollZoom.disable();\n\n this.map.resize()\n this.setMapBoundsByCoordinates()\n }\n }\n\n setMapBoundsByCoordinates = () => {\n if (this.boundsCoordinatesArePresent()) {\n const mapBounds = [this.props.southwestCoordinates, this.props.northEastCoordinates];\n this.map.fitBounds(mapBounds, { duration: 0 })\n }\n }\n\n boundsCoordinatesArePresent = () => {\n return this.props.southwestCoordinates &&\n typeof this.props.southwestCoordinates[0] !== 'undefined' &&\n this.props.southwestCoordinates[0] !== ''\n }\n\n render () {\n return (\n \n
\n Warning: Making changes to the advanced theming options may be more difficult to revert.
\n \n Click here to reset your customizations to their default values.\n
\n \n
\n \n {this.renderListBackgroundColor}\n {this.renderActionTextColor}\n {this.renderPopupTextColor}\n {this.renderFiltersBackgroundColor}\n {this.renderFiltersPlaceholderColor}\n {this.renderFiltersSelectedColor}\n
\n \n {this.renderLocationTitleColor}\n {this.renderLocationSubtitleColor}\n {this.renderLocationDetailsColor}\n
\n \n
\n
\n \n {this.renderSearchTextColor}\n {this.renderSearchIconColor}\n {this.renderUserLocationColor}\n
\n \n {this.renderSearchPlaceholderColor}\n {this.renderSearchBackgroundColor}\n
\n \n
\n )\n }\n}\n\nMapsEditorDefaultMap.propTypes = {\n southwestCoordinates: PropTypes.array,\n northEastCoordinates: PropTypes.array\n}\n\nexport default MapsEditorDefaultMap\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst RadioInput = ({ name, value, checked, onChange, label }) => (\n \n);\n\nRadioInput.propTypes = {\n name: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n checked: PropTypes.bool.isRequired,\n onChange: PropTypes.func.isRequired,\n label: PropTypes.string.isRequired,\n};\n\nexport default RadioInput;\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport Geosuggest from 'react-geosuggest';\nimport Select from 'react-select';\nimport TagsInput from 'react-tagsinput';\nimport Autosuggest from 'react-autosuggest';\nimport without from 'lodash.without';\n\nimport { COUNTRY_CODES } from '../../constants/index';\nimport { DEFAULT_POSITION_TEXTS, DEFAULT_POSITION_OPTIONS, AUTOCOMPLETE_OPTIONS} from '../../constants/index';\n\nimport { updateMapsEditor } from '../../actions/mapsEditorActions';\n\nimport MapsEditorDefaultMap from './MapsEditorDefaultMap';\nimport RadioInput from './RadioInput';\n\nexport class MapsEditorGeographySettings extends Component {\n handleEditorChange = (name) => (value) => \n this.props.updateMapsEditor({ [name]: value });\n \n handleCheckboxChange = (name) => ({ target: { checked } }) => \n this.props.updateMapsEditor({ [name]: checked });\n \n handleChange = (name) => ({ target: { value } }) => \n this.props.updateMapsEditor({ [name]: value });\n\n handleSpecificLocationChange = (fieldName) => (selectedOption) => {\n if (!selectedOption) {\n this.props.updateMapsEditor({\n specific_location_id: null,\n default_viewport_sw_longitude: null,\n default_viewport_sw_latitude: null,\n default_viewport_ne_longitude: null,\n default_viewport_ne_latitude: null,\n });\n return;\n }\n\n const { latitude, longitude } = selectedOption;\n\n if (!latitude || !longitude) return;\n\n const boundsOffset = 0.0015;\n\n const southwestCoordinates = [longitude - boundsOffset, latitude - boundsOffset];\n const northEastCoordinates = [longitude + boundsOffset, latitude + boundsOffset];\n\n this.props.updateMapsEditor({\n specific_location_id: selectedOption.value,\n default_viewport_sw_longitude: southwestCoordinates[0],\n default_viewport_sw_latitude: southwestCoordinates[1],\n default_viewport_ne_longitude: northEastCoordinates[0],\n default_viewport_ne_latitude: northEastCoordinates[1],\n });\n };\n\n onViewportSuggestSelect = (suggestion) => {\n if (!suggestion) return\n const bounds = suggestion.gmaps.geometry && suggestion.gmaps.geometry.viewport\n\n if (!bounds) {\n return console.error('Expected suggestion.gmaps.geometry.bounds', suggestion)\n }\n\n const sw = bounds.getSouthWest()\n const ne = bounds.getNorthEast()\n\n if (!(sw && ne)) {\n return console.error('Expected bounds sw and ne', bounds)\n }\n\n if (sw && ne) {\n this.props.updateMapsEditor({\n default_viewport_label: suggestion.label,\n default_viewport_sw_longitude: sw.lng(),\n default_viewport_sw_latitude: sw.lat(),\n default_viewport_ne_longitude: ne.lng(),\n default_viewport_ne_latitude: ne.lat()\n })\n }\n };\n\n removeDefaultViewport = () => {\n this.props.updateMapsEditor({\n default_viewport_label: '',\n default_viewport_sw_longitude: '',\n default_viewport_sw_latitude: '',\n default_viewport_ne_longitude: '',\n default_viewport_ne_latitude: ''\n })\n }\n\n get renderDefaultMapView() {\n const {\n appMapboxKey,\n default_viewport_label,\n default_viewport_sw_longitude,\n default_viewport_sw_latitude,\n default_viewport_ne_longitude,\n default_viewport_ne_latitude,\n } = this.props;\n\n return (\n <>\n \n
\n this.mapNode = node}>\n
\n \n { this.geoSuggestNode = node }}\n />\n {default_viewport_label && (\n
\n \n Remove\n
\n )}\n \n value === specific_location_id)}\n onChange={this.handleSpecificLocationChange('specific_location_id')}\n isClearable\n isSearchable\n menuShouldScrollIntoView\n menuPlacement={'auto'}\n />\n
\n \n
\n );\n case 'show_all':\n case 'geolocate':\n case 'viewport':\n return (\n \n
\n {texts.notice}
\n{this.renderSpecificLocationMapView}
\n \n {texts.details && (\n
\n );\n default:\n return null;\n }\n };\n\n get renderDefaultMapPosition() {\n const {\n default_position,\n } = this.props;\n\n return (\n \n {texts.details}\n
\n )}\n {texts.copy && (\n \n {texts.copy.map((paragraph) => (\n
\n )}\n {this.renderDefaultMapView}\n {paragraph}
\n ))}\n\n
\n )\n }\n\n get renderAutocompleteCountry() {\n const {\n suggestion_countries\n } = this.props;\n\n const suggestionOptions = Object.keys(COUNTRY_CODES);\n\n function autocompleteRenderInput({ addTag, ...props }) {\n const handleOnChange = (e) => { e.preventDefault() };\n const suggestions = without(props.suggestions, ...suggestion_countries)\n\n return (\n \n Default Map Position\n
\n \n
\n \n {DEFAULT_POSITION_OPTIONS.map(({ value, label }) => (\n
\n {this.renderDefaultPositionNotice()}\n \n
\n )\n }\n\n get renderLocationReposition() {\n const { location_reposition } = this.props;\n\n return (\n \n Autocomplete Country Restriction\n
\n \n Select the countries you would like to restrict suggestions to. This is useful if you have locations in a specific country and want to prevent users from searching in other countries.\n
\n \n
\n \n
\n )\n }\n\n\n get renderGeneral() {\n const {\n suggestion_type,\n } = this.props;\n\n return (\n \n Location Repositioning\n
\n \n When enabled, this will automatically reposition the map to center on the selected location when a user clicks on a location in the list.\n
\n \n \n
\n \n
\n )\n }\n\n render() {\n return this.renderGeneral;\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state.mapsEditor\n }\n};\n\nexport default connect(mapStateToProps, { updateMapsEditor })(MapsEditorGeographySettings);\n","import PropTypes from 'prop-types'\nimport React, { PureComponent } from 'react'\n\nimport { createFlash } from \"../../shared/createFlash\";\n\nexport class MapsEditorMarkerImage extends PureComponent {\n constructor(props) {\n super(props);\n\n this.state = {\n uploading: false\n }\n }\n\n componentDidMount() {\n const {\n s3MarkerFormData,\n s3MarkerPostUrl,\n s3MarkerPostHost,\n handleChange,\n maxFileSize,\n } = this.props;\n\n $(this.fileInput).fileupload({\n fileInput: this.fileInput,\n url: s3MarkerPostUrl,\n type: 'POST',\n autoUpload: true,\n formData: s3MarkerFormData,\n paramName: 'file', // S3 does not like nested name fields i.e. name=\"user[avatar_url]\"\n dataType: 'XML', // S3 returns XML if success_action_status is set to 201\n replaceFileInput: false,\n start: (e) => {\n this.setState({ uploading: true });\n },\n submit: function (e, data) {\n $.each(data.files, function(i, file) {\n \n if (file.size > maxFileSize) {\n createFlash(`File size exceeds the maximum limit of ${maxFileSize === 75000 ? '75KB' : '10MB'}.`, 'error');\n return false;\n }\n\n file.uploadName = encodeURI(file.name.replace(/\\s+/g, '_').replace(/\\+/g, '-'));\n });\n },\n done: (e, data) => {\n // Extract key and generate URL from response\n $.each(data.files, function(i, file) {\n if (file.size < maxFileSize) {\n const uploaderKey = s3MarkerFormData.key.replace('${filename}', '');\n let key = $(data.jqXHR.responseXML).find('Key').text();\n const url = encodeURI(`//${s3MarkerPostHost}/${key}`);\n const filename = key.replace(uploaderKey, '');\n handleChange(url);\n }\n });\n this.setState({ uploading: false });\n },\n fail: (e, data) => {\n createFlash('Sorry there was a problem uploading your image.', 'error')\n }\n });\n }\n\n handleRemoveBackground = (e) => {\n const { handleChange } = this.props;\n\n e.preventDefault()\n handleChange(null);\n this.fileInput.value = '';\n }\n\n valueExists = () => {\n const { value } = this.props;\n return value && value.length;\n }\n\n coercedValue = () => {\n const { value } = this.props;\n\n if (value && value.length && value.startsWith('//')) {\n return `https:${value}`;\n }\n\n return value;\n }\n\n render() {\n const {\n name,\n value\n } = this.props;\n\n return (\n \n
\n \n {this.renderDefaultMapPosition}\n
\n \n {this.renderLocationReposition}\n
\n \n
\n {this.renderAutocompleteCountry}\n \n Autocomplete Suggestions\n
\n \n Select the types of geographic locations you would like to be autocompleted when your visitors type in your map's search bar.\n
\n \n {AUTOCOMPLETE_OPTIONS.map(({ value, label }) => (\n \n ))}\n
\n \n {this.valueExists() ? (\n \n \n \n ) : (\n { this.fileInput.click() }}\n >\n })
\n \n\n {this.state.uploading && (\n { this.fileInput = input }}\n />\n
\n );\n }\n}\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nimport { updateMapsEditor } from '../../actions/mapsEditorActions';\nimport { MapsEditorMarkerImage } from './MapsEditorMarkerImage';\n\nexport class MapsEditorLocationImageForm extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n location_image: props.location_image,\n }\n }\n\n handleImageChange = (image) => {\n const { categories_attributes, id } = this.props;\n\n let categoryExistsInState = false,\n newCategoryState = categories_attributes.map(category => {\n if (category?.id === id) {\n categoryExistsInState = true;\n\n return { ...category, location_image: image };\n }\n\n return category;\n });\n\n if (!categoryExistsInState) {\n newCategoryState.push({\n id: this.props.id,\n location_image: image\n });\n }\n\n this.props.updateMapsEditor({ categories_attributes: newCategoryState });\n\n this.setState({\n location_image: image\n });\n }\n\n render () {\n const {\n key,\n name,\n s3MarkerFormData,\n s3MarkerPostUrl,\n s3MarkerPostHost,\n } = this.props;\n const imageMaxFileSize = 10000000;\n\n return (\n \n Upload\n
\n )}\n\n \n
\n )}\n\n ...
\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state.mapsEditor\n };\n};\n\nexport default connect(mapStateToProps, { updateMapsEditor })(MapsEditorLocationImageForm);\n\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nimport { updateMapsEditor } from '../../actions/mapsEditorActions';\n\nimport MapsEditorLocationImageForm from './MapsEditorLocationImageForm';\nimport { MapsEditorMarkerImage } from './MapsEditorMarkerImage';\n\nexport class MapsEditorImageSettings extends Component {\n handleCheckboxChange = (name) => (event) => {\n this.props.updateMapsEditor({ [name]: event.target.checked });\n };\n\n handleImageChange = (locationDefaultImage) => {\n this.props.updateMapsEditor({\n location_default_image: locationDefaultImage,\n });\n };\n\n renderLocationDefaultImage = () => {\n const imageMaxFileSize = 10000000;\n\n return (\n \n {name}\n
\n \n
\n \n
\n );\n };\n\n renderCategoriesLocationImages = () => {\n const { category_location_images_enabled } = this.props;\n\n return (\n \n Default Location Image\n
\n \n Upload a default image to use for locations that don't have an image set. PNG (recommended), JPG and JPEG formats supported.\n
\n \n
\n );\n };\n\n renderCategoryLocationImages = () => {\n const { categories, categories_attributes } = this.props;\n if (!categories?.length) return null;\n\n return categories.map(({ id, name, location_image }) => (\n \n Category Location Images\n
\n \n Set a default location image for each category. Location images will be displayed in the location popup when a user clicks on a location pin.\n
\n \n \n {category_location_images_enabled && (\n
\n \n {this.renderCategoryLocationImages()}\n
\n )}\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n ...state.mapsEditor,\n});\n\nexport default connect(mapStateToProps, { updateMapsEditor })(MapsEditorImageSettings);\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { updateMapsEditor } from '../../actions/mapsEditorActions';\n\nexport class MapsEditorMobileSettings extends Component {\n handleCheckboxChange = (name) => {\n return event => {\n this.props.updateMapsEditor({ [name]: event.target.checked });\n }\n }\n\n handleChange = (name) => {\n return event => {\n const { target: { value } } = event;\n this.props.updateMapsEditor({ [name]: value });\n }\n }\n\n renderMobileLayoutSetting = () => {\n const { mobile_style } = this.props;\n const MOBILE_STYLE_OPTIONS = [\n { value: 'mobile_map_list_style', label: 'Small Map & List View (default)' },\n { value: 'mobile_map_search_style', label: 'Full Map & Search View' },\n ];\n\n return (\n \n
\n \n {this.renderLocationDefaultImage()}\n
\n \n {this.renderCategoriesLocationImages()}\n
\n \n
\n )\n }\n\n get renderSingleFingerScroll() {\n const {\n enable_single_finger_scroll\n } = this.props;\n\n return (\n \n {\n MOBILE_STYLE_OPTIONS.map(({ value, label }) => (\n
\n \n \n {value === 'mobile_map_search_style' && (\n
\n )) \n }\n \n Note: Users can toggle the still list view when viewing the map\n
\n )}\n \n \n
\n \n
\n )\n }\n\n get renderGeneral() {\n return (\n \n Single Finger Scroll\n
\n \n By default, map interaction on a mobile device requires two fingers - \"one finger to scroll the page, two fingers to scroll the map\". If you set single finger scroll, mobile users will only be able to scroll the page outside of the map.\n
\n \n \n
\n \n
\n )\n }\n\n render() {\n return this.renderGeneral;\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state.mapsEditor\n }\n};\n\nexport default connect(mapStateToProps, { updateMapsEditor })(MapsEditorMobileSettings);\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { TwitterPicker } from 'react-color';\nimport union from 'lodash.union';\n\nimport { updateMapsEditor } from '../../actions/mapsEditorActions';\nimport { MapsEditorMarkerImage } from './MapsEditorMarkerImage';\n\nexport class MapsEditorCategoryForm extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n showing: null,\n color: props.color,\n image: props.image,\n colors: union([\n props.primaryColor, '#ea704b', '#715f30', '#88852b', '#5eaf44', '#30bd68', '#406bcc', '#0a7cbd', '#8195a7', '#514fb1', '#bf1b46', '#d03434', '#cc7021', '#7d35a5', '#724f98', '#4a4a4a', '#333333'\n ])\n }\n }\n\n changeColorInput = (e) => {\n const newColor = e.target.value;\n this.handleColorChange(newColor);\n }\n\n handleColorPickerChange = (color) => {\n this.handleColorChange(color.hex);\n }\n\n handleColorChange = (value) => {\n const { categories_attributes, id } = this.props;\n\n let categoryExistsInState = false,\n newCategoryState = categories_attributes.map(category => {\n if (category && category.id === id) {\n categoryExistsInState = true;\n return { ...category, color: value };\n }\n return category;\n });\n \n if (!categoryExistsInState) {\n newCategoryState.push({\n id: this.props.id,\n color: value\n });\n }\n \n this.props.updateMapsEditor({ categories_attributes: newCategoryState });\n \n this.setState({\n showing: null,\n color: value\n });\n }\n\n showColorPicker = (key) => {\n return (e) => {\n e.preventDefault();\n this.setState({ showing: key });\n }\n };\n\n hideColorPicker = (key) => {\n return (e) => {\n e.preventDefault();\n this.setState({ showing: null });\n }\n };\n\n handleImageChange = (url) => {\n const { categories_attributes, id } = this.props;\n\n let categoryExistsInState = false;\n let newCategoryState = categories_attributes.map(category => {\n if (category && category.id === id) {\n categoryExistsInState = true;\n return { ...category, marker_background_url: url };\n }\n return category;\n });\n\n if (!categoryExistsInState) {\n newCategoryState.push({\n id: this.props.id,\n marker_background_url: url\n });\n }\n\n this.props.updateMapsEditor({ categories_attributes: newCategoryState });\n\n this.setState({ image: url });\n }\n\n render() {\n const {\n key,\n name,\n primaryColor,\n marker_style,\n s3MarkerFormData,\n s3MarkerPostUrl,\n s3MarkerPostHost,\n } = this.props;\n const markerMaxFileSize = 75000;\n\n return (\n \n
\n \n
\n \n Mobile Layout\n
\n \n {this.renderMobileLayoutSetting()}\n
\n \n {this.renderSingleFingerScroll}\n
\n \n
\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state.mapsEditor\n }\n};\n\nexport default connect(mapStateToProps, { updateMapsEditor })(MapsEditorCategoryForm);\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport Select from 'react-select';\nimport classNames from 'classnames';\n\nimport { ZENDESK_LINK } from '../../constants';\n\nimport { updateMapsEditor } from '../../actions/mapsEditorActions';\n\nimport { MapsEditorMarkerImage } from './MapsEditorMarkerImage';\nimport MapsEditorCategoryForm from './MapsEditorCategoryForm';\n\nexport class MapsEditorPinSettings extends Component {\n handleCheckboxChange = (name) => {\n return event => {\n this.props.updateMapsEditor({ [name]: event.target.checked });\n }\n }\n\n handleSelectChange = (name) => {\n return (selectedOption) => {\n this.props.updateMapsEditor({ [name]: selectedOption.value });\n }\n }\n\n handleMarkerChange = backgroundUrl => {\n this.props.updateMapsEditor({\n marker_background_url: backgroundUrl\n })\n }\n\n get renderLocationCluster() {\n const { enable_location_cluster } = this.props;\n\n return (\n \n {name}\n
\n \n {marker_style === 'marker_custom' ? (\n \n \n \n {this.state.color ? this.state.color : 'Default'}\n
\n \n
\n \n )}\n \n
\n )\n }\n\n get renderMarkerIconImage() {\n const { marker_style } = this.props;\n const markerMaxFileSize = 75000;\n\n if (marker_style !== 'marker_custom') return;\n\n return (\n \n Cluster Locations\n
\n \n When enabled, this will group your location pins together at lower zoom levels. This is useful when you have many locations in a specific area that make individual pins difficult to see.\n Learn More\n
\n \n \n
\n \n
\n )\n }\n\n get renderMarkerStyle() {\n const { marker_style } = this.props;\n const options = [\n { value: 'marker_default', label: 'Default Map Pin' },\n { value: 'marker_circle', label: 'Circle Icon' },\n { value: 'marker_custom', label: 'Custom Image' },\n ];\n\n return (\n <>\n \n Default Custom Marker Icon\n
\n \n Upload a default custom icon image 60px x 80px to use as the marker icon on your map. PNG (recommended), JPG and JPEG formats supported. This will override any category colors you set for your location pins.\n
\n \n Pin Style\n
\n \n value === marker_style)}\n onChange={this.handleSelectChange('marker_style')}\n menuShouldScrollIntoView\n menuPlacement=\"auto\"\n />\n
\n\n \n
\n )\n }\n\n get renderCategoryColors() {\n const { categories, categories_attributes, primary_color } = this.props;\n if (!categories || categories.length === 0) return;\n\n return categories.map(({id, name, marker_background_url, color}) => (\n \n { marker_style !== 'marker_custom' ? 'Pin Colors' : 'Pin Images' }\n
\n <>\n {marker_style !== 'marker_custom' ? (\n \n ) : (\n \n )}\n {( (marker_style !== 'marker_custom' && category_colors_enabled) || (marker_style == 'marker_custom' && category_images_enabled)) && (\n \n Set specific { marker_style !== 'marker_custom' ? 'colors' : 'images'} for each category to display for your visitors. Location pins on your map will use the { marker_style !== 'marker_custom' ? 'colors' : 'images'} of the first category added to it. Category { marker_style !== 'marker_custom' ? 'colors' : 'images'} will not be used if zoomed out and locations are clustered.\n
\n \n {this.renderCategoryColors}\n
\n )}\n \n \n
\n )\n }\n\n render() {\n return this.renderGeneral;\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state.mapsEditor\n }\n};\n\nexport default connect(mapStateToProps, { updateMapsEditor })(MapsEditorPinSettings);\n","export const DEFAULT_BROWSER_FONTS = [\n {\n label: 'Arial',\n value: 'Arial, Helvetica, sans-serif',\n files: {},\n },\n {\n label: 'FF Meta Serif',\n value: 'ff meta serif, Georgia, serif',\n files: {},\n },\n {\n label: 'Helvetica',\n value: 'Helvetica, Arial, sans-serif',\n files: {},\n },\n {\n label: 'Gellix',\n value: 'Gellix, Helvetica, Arial, sans-serif',\n files: {},\n },\n {\n label: 'Georgia',\n value: 'Georgia, serif',\n files: {},\n },\n {\n label: 'Proxima Nova',\n value: 'Proxima Nova, Helvetica, Arial, sans-serif',\n files: {},\n },\n {\n label: 'Tahoma',\n value: 'Tahoma,Geneva, sans-serif',\n files: {},\n },\n {\n label: 'Times New Roman',\n value: 'Times New Roman, Times, serif',\n files: {},\n },\n {\n label: 'Verdana',\n value: 'Verdana, Geneva, sans-serif',\n files: {},\n },\n];\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport Select from 'react-select';\n\nimport { DEFAULT_BROWSER_FONTS } from '../../constants/defaultBrowserFonts';\n\nimport { fetchGoogleFonts, updateMapsEditor } from '../../actions/mapsEditorActions';\n\nexport class MapFontFamilySelector extends Component {\n constructor(props) {\n const { GOOGLE_FONTS_KEY } = window.PAGEDATA\n super(props);\n this.state = { loading: true };\n\n this.props.fetchGoogleFonts(GOOGLE_FONTS_KEY).then(() => {\n this.setState({ loading: false });\n })\n }\n\n googleFontFamilies = () => {\n let fontOptions = DEFAULT_BROWSER_FONTS;\n\n if (this.props.googleFontFamilies && this.props.googleFontFamilies.length) {\n fontOptions = this.props.googleFontFamilies\n .concat(DEFAULT_BROWSER_FONTS)\n .sort((a, b) => (a.label > b.label ? 1 : -1));\n }\n\n return fontOptions;\n }\n\n handleChange = option => {\n if (option) {\n const { font_family_400_url, font_family_500_url, font_family_600_url } = this.setFontWeights(option.files)\n\n this.props.updateMapsEditor({\n googleFontSelection: option,\n font_family: option.value,\n font_family_400_url: font_family_400_url,\n font_family_500_url: font_family_500_url,\n font_family_600_url: font_family_600_url\n })\n } else {\n this.props.updateMapsEditor({\n googleFontSelection: null,\n font_family: null,\n font_family_400_url: null,\n font_family_500_url: null,\n font_family_600_url: null\n })\n }\n }\n\n fontSelection = () => {\n if (this.props.font_family && this.googleFontFamilies().length) {\n return this.googleFontFamilies().find(option => option.value === this.props.font_family)\n } else {\n return null;\n }\n }\n\n setFontWeights = files => {\n const isGoogleFont = Object.keys(files).length > 0;\n\n if (isGoogleFont) {\n const fallback = files['regular'] || files['500'] || files[keys(files)[0]];\n\n return {\n font_family_400_url: files['400'] || fallback,\n font_family_500_url: files['500'] || fallback,\n font_family_600_url: files['600'] || fallback\n }\n } else {\n return {\n font_family_400_url: null,\n font_family_500_url: null,\n font_family_600_url: null\n }\n }\n }\n\n render() {\n const { font_family } = this.props;\n\n return (\n \n
\n \n {this.renderMarkerStyle}\n {this.renderMarkerIconImage}\n {this.renderLocationCluster}\n
\n \n {this.renderCategories}\n
\n \n
\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state.mapsEditor\n }\n};\n\nexport default connect(mapStateToProps, { fetchGoogleFonts, updateMapsEditor })(MapFontFamilySelector);\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport Select from 'react-select';\nimport { TwitterPicker } from 'react-color';\nimport classNames from 'classnames';\n\nimport URLS from '../../constants/urls'\nimport { TWITTER_PICKER_COLORS, TABS } from '../../constants/index'\nimport { updateMapsEditor, saveMapEditor } from '../../actions/mapsEditorActions';\nimport { createFlash } from '../../shared/createFlash';\n\nimport MapsEditorStylePicker from './MapsEditorStylePicker';\nimport MapsEditorTextOverrides from './MapsEditorTextOverrides';\nimport MapsEditorAdvancedTheming from './MapsEditorAdvancedTheming';\nimport MapsEditorGeographySettings from './MapsEditorGeographySettings';\nimport MapsEditorImageSettings from './MapsEditorImageSettings';\nimport MapsEditorMobileSettings from './MapsEditorMobileSettings';\nimport MapsEditorPinSettings from './MapsEditorPinSettings';\nimport MapFontFamilySelector from './MapFontFamilySelector';\n\nexport class MapsEditorForm extends Component {\n state = {\n activeTab: 'general'\n };\n\n handleTabClick = (name) => {\n return () => {\n this.setState({ activeTab: name });\n }\n }\n\n handleColorChange = (color) => {\n this.props.updateMapsEditor({ primary_color: color.hex })\n }\n\n handleChange = (name) => {\n return event => {\n const { target: { value } } = event;\n if (name === 'default_position') {\n this.props.updateMapsEditor({ \n default_viewport_sw_longitude: null,\n default_viewport_sw_latitude: null,\n default_viewport_ne_longitude: null,\n default_viewport_ne_latitude: null, \n specific_location_id: null,\n });\n };\n this.props.updateMapsEditor({ [name]: value });\n }\n }\n\n handleSelectChange = (name) => {\n return (selectedOption) => {\n this.props.updateMapsEditor({ [name]: selectedOption.value });\n }\n }\n\n handleCheckboxChange = (name) => {\n return event => {\n this.props.updateMapsEditor({ [name]: event.target.checked });\n }\n }\n\n handleSubmit = (event) => {\n event.stopPropagation()\n event.preventDefault()\n\n this.props.saveMapEditor(this.props.mapId, { map: this.props })\n .then(json => {\n createFlash('Your theming changes have been saved!', 'success')\n }).catch((error) => {\n createFlash('Sorry, there was a problem saving your changes.', 'error')\n })\n }\n\n get renderDistanceUnits() {\n const { units } = this.props;\n\n return (\n \n Font Family\n
\n \n Set a custom font for your map to best match your company branding.\n
\n \n
\n )\n }\n\n get renderHoursFormat() {\n const { hours_format } = this.props;\n\n return (\n \n Distance Units\n
\n \n When users view your map this is the units of distance they will see.\n
\n \n {\n [{value: 'mi', label: 'Miles (mi)'}, {value: 'km', label: 'Kilometers (km)'}].map((unit) => {\n return (\n \n )\n })\n }\n
\n \n
\n )\n }\n\n get renderResultsLimit() {\n const { results_limit, show_results_summary } = this.props;\n const options = [\n { value: 1000, label: '1000 Location Results' },\n { value: 3000, label: '3000 Location Results' },\n { value: 5000, label: '5000 Location Results' },\n { value: 10000, label: '10000 Location Results' },\n ];\n\n const summaryOptions = [\n { value: true, label: 'Show the location results summary' },\n { value: false, label: 'Hide the total location results summary' },\n ];\n\n return (\n \n Hours Formatting\n
\n \n {\n [{value: 'format_12_hours', label: '12-Hour Clock (12AM - 11:59PM)'}, {value: 'format_24_hours', label: '24-Hour Clock (00:00 - 23:59)'}].map((format) => {\n return (\n \n )\n })\n }\n
\n \n
\n )\n }\n\n get renderLauncherText() {\n const {\n launcher_enabled,\n launcher_text,\n shopify_launcher_script_required\n } = this.props;\n\n if (!launcher_enabled || shopify_launcher_script_required) return;\n\n return (\n \n Results Limit\n
\n \n This limit applies when there are more locations than can be shown in a specific map area (usually when showing larger areas like countries). A higher limit can result in slower loading times.\n
\n \n option.value === results_limit)}\n onChange={this.handleSelectChange('results_limit')}\n clearable={false}\n isSearchable={false}\n menuShouldScrollIntoView\n menuPlacement={'auto'}\n />\n
\n \n
\n \n Show the summary of locations found. This is displayed at the bottom of your map's location list (ie \"Showing 200 within 50 mi\").\n
\n \n option.value === show_results_summary)}\n onChange={this.handleSelectChange('show_results_summary')}\n clearable={false}\n isSearchable={false}\n menuShouldScrollIntoView\n menuPlacement={'auto'}\n />\n
\n \n
\n );\n }\n\n get renderLauncherSettings() {\n const {\n launcher_enabled,\n launcher_text,\n shopify_launcher_script_required,\n hasWixConnected\n } = this.props;\n\n if (hasWixConnected) return;\n\n return (\n \n Launcher Text\n
\n \n This is the text that will be displayed when using the default launcher in the corner of your website.\n
\n \n
\n \n {shopify_launcher_script_required ? (\n
\n )\n }\n\n get renderOpenAsNewTab() {\n const { open_as_new_tab } = this.props;\n\n return (\n \n
\n ) : (\n \n Enable Launcher\n
\n \n You must enable the \"Shopify Overlay\" on your map installation settings to use the launcher on your Shopify store.\n
\n \n
\n )}\n\n {this.renderLauncherText}\n \n Enable Launcher\n
\n \n \n Note: Disabling the launcher will require you to manually open your map by using buttons/links on your website.\n
\n \n
\n )\n }\n\n get renderButtonSetting() {\n const {\n button_setting,\n } = this.props;\n\n const options = [\n { value: 'custom_button_overrides_directions', label: 'Override direction button with custom buttons' },\n { value: 'always_show_directions', label: 'Always show directions (even if custom button added)' },\n { value: 'always_hide_directions', label: 'Always hide directions (even if custom button added)' }\n ];\n\n return (\n \n Custom Button Links\n
\n \n \n This option only applies when custom buttons are added to your locations.\n
\n \n
\n )\n };\n\n get renderClosedDaysOption() {\n const { show_closed_days } = this.props;\n const options = [\n { value: 'do_not_show', label: 'Do not show closed days' },\n { value: 'show_days', label: 'Show days as closed when no hours set' },\n ];\n\n return (\n \n Showing \"Get Directions\" Button\n
\n \n This setting will determine when the \"Get Directions\" button is shown on your map in relation to any custom buttons you add.\n
\n \n option.value === button_setting)}\n onChange={this.handleSelectChange('button_setting')}\n clearable={false}\n isSearchable={false}\n menuShouldScrollIntoView\n menuPlacement={'auto'}\n />\n
\n \n
\n );\n }\n\n get renderHideLocationCategories() {\n const { hide_location_categories } = this.props;\n const options = [\n { value: false, label: 'Show categories when viewing location details' },\n { value: true, label: 'Hide categories when viewing location details' },\n ];\n\n return (\n \n Showing Closed Days\n
\n \n This will show days as \"Closed\" if no hours have been set on a location.\n
\n \n option.value === show_closed_days)}\n onChange={this.handleSelectChange('show_closed_days')}\n clearable={false}\n isSearchable={false}\n menuShouldScrollIntoView\n menuPlacement={'auto'}\n />\n
\n \n
\n )\n }\n\n get renderDetailsPreference() {\n const {\n location_detail_preference\n } = this.props;\n\n return (\n \n Location Category Display\n
\n \n This will hide/show the categories when viewing a location in your map.\n
\n \n option.value === hide_location_categories)}\n onChange={this.handleSelectChange('hide_location_categories')}\n clearable={false}\n isSearchable={false}\n menuShouldScrollIntoView\n menuPlacement={'auto'}\n />\n
\n \n
\n )\n }\n\n get renderScrollZoom() {\n const {\n scroll_zoom_enabled,\n show_fullscreen,\n } = this.props;\n\n return (\n \n Popup Preference\n
\n \n Change the details shown on your map when a location's popup is displayed.\n
\n \n {\n [{ value: 'details_hours_first', label: 'Prioritize days open (ie \"Open Mon-Fri\")' }, { value: 'details_phone_first', label: 'Prioritize phone number' }, { value: 'details_website_first', label: 'Prioritize website URL' }].map((option) => {\n return (\n \n )\n })\n }\n
\n \n
\n )\n }\n\n get renderAutoRefresh() {\n const {\n auto_refresh\n } = this.props;\n\n return (\n \n Scroll Zoom & Full-Screen Viewing\n
\n \n Allow or prevent zooming on your map by scrolling on a trackpad (on laptops). On mobile, users must always use 2-finger gestures to zoom. \"Full-screen viewing\" allow users to view the map portion in full screen.\n
\n \n \n
\n \n \n
\n \n
\n )\n }\n\n get renderLayoutSetting() {\n const { list_style } = this.props;\n const MAP_STYLE_OPTIONS = [\n { value: 'standard_list_style', label: 'Standard Location List (default)' },\n { value: 'image_list_style', label: 'Location & Image List' },\n { value: 'column_list_style', label: '2-Column Location Image List' },\n ];\n\n return (\n \n Auto-Refresh Map Locations\n
\n \n By default, your map will prompt the user to refresh the search area when moving the map position. This is considered smoother experience for most maps, but in some cases such as hyper-localized map viewing, it may be preferable to always auto-refresh results instead.\n
\n \n \n
\n \n
\n )\n }\n\n get renderButtonStyle() {\n const { button_style } = this.props;\n const options = [\n { value: 'button_rounded', label: 'Completely rounded buttons (default)' },\n { value: 'button_rectangular_sharp', label: 'Rectangular buttons with sharp edges' },\n { value: 'button_rectangular_rounded', label: 'Rectangular buttons with rounded edges' }\n ];\n\n return (\n \n {\n MAP_STYLE_OPTIONS.map(({ value, label }) => (\n \n ))\n }\n
\n \n
\n \n
\n );\n }\n\n get renderShowFilters() {\n const { show_filters } = this.props;\n\n return (\n \n Button Style\n
\n \n This style applies to the \"Directions\" button and any custom button you add.\n
\n \n value === button_style)}\n onChange={this.handleSelectChange('button_style')}\n menuShouldScrollIntoView\n menuPlacement=\"auto\"\n />\n
\n \n
\n );\n }\n\n get renderGeneral() {\n const {\n suggestion_range,\n suggestion_strict,\n primary_color,\n } = this.props;\n\n return (\n \n Category Filter Bar\n
\n \n Show or hide the category filter bar in your map's location list.\n
\n \n \n
\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state.mapsEditor\n }\n};\n\nexport default connect(mapStateToProps, { updateMapsEditor, saveMapEditor })(MapsEditorForm);\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { Provider } from 'react-redux';\n\nimport store, { stateInitializer } from '../../store';\n\nimport MapsEditorForm from './MapsEditorForm';\n\nexport default class MapsEditor extends Component {\n constructor(props) {\n super(props);\n\n stateInitializer({\n mapsEditor: {\n ...props,\n categories_attributes: []\n }\n });\n }\n\n componentDidMount() {\n Track.event('Map theming form viewied')\n }\n\n render() {\n return (\n \n
\n )\n }\n\n get renderActiveTabContent() {\n const { activeTab } = this.state;\n \n switch (activeTab) {\n case 'general':\n return this.renderGeneral;\n case 'geography':\n return \n
\n \n Full Layout\n
\n {this.renderLayoutSetting}\n {this.renderScrollZoom}\n {this.renderDetailsPreference}\n {this.renderButtonSetting}\n {this.renderOpenAsNewTab}\n {this.renderLauncherSettings}\n {this.renderShowFilters}\n \n
\n \n
\n \n Primary Color\n
\n\n \n Darker shade recommended. This color is used for defaults such as location buttons and links, map markers, and popups.\n
\n \n
\n {this.renderButtonStyle}\n {this.renderAutoRefresh}\n {this.renderLocationCluster}\n {this.renderLocationReposition}\n \n
\n \n Suggestion Range\n
\n \n This configuration is used when an autocomplete suggestion is selected. \"Bounding Box\" will let users see all locations within the suggested coordinates for a location, and \"Near Center\" will show all locations within a 50 mile range of the center point.\n
\n \n {\n [{value: 'bounding_box', label: 'Bounding Box (default)'}, {value: 'near_center', label: 'Near Center'}].map((option) => {\n return (\n
\n {this.renderDistanceUnits}\n {this.renderHoursFormat}\n {this.renderResultsLimit}\n {this.renderClosedDaysOption}\n {this.renderHideLocationCategories}\n \n \n {option.value === 'bounding_box' && suggestion_range === 'bounding_box' && (\n
\n \n \n
\n )}\n {option.value === 'bounding_box' && suggestion_range !== 'bounding_box' && (\n \n )}\n
\n )\n })\n }\n \n
\n \n
\n \n \n
\n \n
\n \n
\n {this.renderActiveTabContent}\n \n {\n TABS.map(({ key, label }) => (\n \n {label}\n
\n ))\n }\n \n
\n );\n }\n}\n\nexport default MapsInstallHeader\n","import React, { useState } from 'react';\n\nimport { saveMapboxKey } from '../../actions/mapsEditorActions';\nimport { createFlash } from '../../shared/createFlash';\n\nconst MapsMapboxContent = (props) => {\n const [state, setState] = useState({\n showing: !props.mapbox_client_key,\n showingOverageFees: false, \n mapbox_client_key: props.mapbox_client_key,\n });\n\n const { setKey } = props;\n\n const handleSubmit = (event) => {\n event.stopPropagation()\n event.preventDefault()\n\n saveMapboxKey(props.mapId, {\n map: {\n mapbox_client_key: state.mapbox_client_key\n }\n })\n .then(() => {\n createFlash('Your map changes have been saved!', 'success');\n setKey(state.mapbox_client_key);\n setState((prevState) => ({ ...prevState, showing: false }));\n }).catch((error) => {\n if (error.response && error.response.status === 422) {\n const validationErrorMessage = error.response.data.message || 'Please provide a valid Mapbox Access Token to proceed with installation instructions.';\n createFlash(validationErrorMessage, 'error');\n } else {\n createFlash('Sorry, there was a problem saving your changes.', 'error');\n };\n });\n };\n\n const handleChange = (text) => {\n setState((prevState) => ({ ...prevState, mapbox_client_key: text }))\n };\n\n const toggleContent = () => {\n setState((prevState) => ({ ...prevState, showing: !state.showing }))\n };\n\n // pending implementation\n // const toggleOverageFees = () => {\n // this.setState((prevState) => ({ ...prevState, showingOverageFees: !this.state.showingOverageFees }))\n // };\n\n const {\n mapbox_client_key\n } = props\n\n return (\n \n Map Installation\n
\n \n \n
\n );\n};\n\nexport default MapsMapboxContent;\n","const isValidMapboxClientKey = (key) => key?.includes('pk.ey');\n\nexport default isValidMapboxClientKey;\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nimport URLS from '../../constants/urls'\n\nimport isValidMapboxClientKey from '../../utils/mapbox';\n\nexport default class WixInstallation extends Component {\n constructor(props) {\n super(props)\n this.state = { showIframePageEmbed: false };\n }\n\n handleToggleIframeCode = name => {\n return () => {\n this.setState({ [name]: !this.state[name] });\n }\n }\n\n get renderInstallationOptions() {\n return (\n \n
\n \n \n Activate Your Map\n \n \n \n
\n {state.showing && (\n\n
\n )}\n \n
\n \n Set your Mapbox access token to use your map publicly.\n
\n \n
\n \n Create an account with Mapbox and save your access token below to activate your map. This will let allow you to use your map publicly on your own website.\n Learn More\n
\n\n \n
\n {/* \n Note: If you do not add a valid Mapbox token to your account, you will be billed for overage fees in addition to your base plan.{' '}\n \n {state.showingOverageFees ? 'Hide Overage Fees' : 'View Overage Fees'}\n \n\n {this.state.showingOverageFees && (\n
*/}\n \n
\n )}\n With a valid Mapbox access token, you will only be charged the base price of your subscription.
\nWithout a Mapbox access token, your base subscription has up to 100 locations and 1000 public map views per month. For volume beyond that, overage fees apply at +{window.PAGEDATA.currentExpansionPrice} per additional 100 locations or 1000 public map views per month. Learn More
\n\n
\n )\n }\n\n get renderPageEmbed() {\n const { showIframePageEmbed } = this.state;\n const { EMBED_HOST, WEB_HOST } = window.PAGEDATA\n\n return (\n \n Manual Installation\n
\n\n While most users prefer to use the native Wix installation, you can also choose to manually install your map to your website if you prefer a more custom setup. Using the instructions below, you can embed your map inside your Wix shopifyMetafieldsGenerated on specific pages.\n
\n \n
\n )\n }\n\n render() {\n const { mapbox_client_key: mapboxClientKey, valueKey } = this.props;\n const mapboxClientKeyValid = (mapboxClientKey && isValidMapboxClientKey(mapboxClientKey) && !valueKey) || (valueKey && isValidMapboxClientKey(valueKey));\n\n return mapboxClientKeyValid ? (\n <>\n \n Page Embed Installation\n
\n\n
\n \n
\n \n If you wish to embed your map within the content of your web page instead of using the overlay, the installation is simple. Just add the following code to your website:\n
\n\n
\n \n Paste this code to embed your map into your website.\n\n
\n {showIframePageEmbed ? (\n \n {showIframePageEmbed ? 'Use Embed Code' : 'Use iFrame Code'}\n
\n <iframe src="{WEB_HOST}/embed/{this.props.mapKey}" width="100%" height="600" style="height:600px;border:none" allow="geolocation"></iframe><div class="closeby-embed-{this.props.mapKey}"></div>
\n <script src="{EMBED_HOST}/v1.js?closeby.mapKey={this.props.mapKey}&embed=true&height=700" async defer></script>\n \n
\n \n For Wix in-page installation, use this article for more details instructions.\n
\n {showIframePageEmbed ? (\n\n To restrict a map to a specific category, you can do so by adding a url param ?category=[CATEGORY NAME] when embedding your iframe. Learn more\n
\n To restrict a map to a specific category, you can do so by adding the category: '[CATEGORY NAME]' property to the options in your embed code. Learn more\n
\n By default, your Wix store will automatically install a page for your Closeby map.\n
\n \n Once you have activated your map above, you will be able to view your locations on your Wix website.\n
\n \n To add locations, go to your locations dashboard. To preview your map, edit your custom theming and other settings, go to your map dashboard.\n
\n\n {this.renderInstallationOptions}\n \n\n {this.renderPageEmbed}\n
\n \n ) : (\n
\n Provide a Mapbox Access Token above to proceed with installation instructions.\n
\n )\n };\n};\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport apiClient from '../../services/apiClient'\nimport API_ENDPOINTS from '../../constants/apiEndpoints'\nimport URLS from '../../constants/urls'\n\nexport default class ShopifyInstructions extends Component {\n constructor(props) {\n super(props);\n this.state = {}\n }\n\n componentDidMount () {\n this.getShopifyDetails()\n }\n\n handleError (e) {\n this.setState({ errorMessage: (e && e.message) || 'Error loading ShopifyInstructions' })\n }\n\n getShopifyDetails () {\n this.getOauthAccounts()\n this.getScriptTags()\n }\n\n disconnect (id) {\n return apiClient.delete(API_ENDPOINTS.OAUTH_ACCOUNTS.DESTROY(id)).then(() => {\n this.getShopifyDetails()\n }).catch(this.handleError.bind(this))\n }\n\n getOauthAccounts () {\n this.setState({ isLoading: true })\n return apiClient.get(API_ENDPOINTS.OAUTH_ACCOUNTS.SHOPIFY)\n .then((resp) => {\n const { oauth_account } = resp.data\n const shopifyAccount = oauth_account || null\n this.setState({ shopifyAccount, isLoading: false })\n }).catch(this.handleError.bind(this))\n }\n\n createScriptTag () {\n this.setState({ isLoading: true })\n return apiClient.post(API_ENDPOINTS.SHOPIFY_SCRIPT_TAGS.CREATE)\n .then((resp) => {\n this.getShopifyDetails()\n }).catch(this.handleError.bind(this))\n }\n\n destroyScriptTags () {\n this.setState({ isLoading: true })\n return apiClient.delete(API_ENDPOINTS.SHOPIFY_SCRIPT_TAGS.DESTROY)\n .then((resp) => {\n this.getShopifyDetails()\n }).catch(this.handleError.bind(this))\n }\n\n getScriptTags () {\n this.setState({ isLoading: true })\n return apiClient.get(API_ENDPOINTS.SHOPIFY_SCRIPT_TAGS.INDEX)\n .then((resp) => {\n const { script_tags } = resp.data\n const scriptTags = script_tags || []\n this.setState({ scriptTags: scriptTags, isLoading: false })\n }).catch(this.handleError.bind(this))\n }\n\n get hasScriptTags () {\n const { scriptTags } = this.state\n return scriptTags && scriptTags.length\n }\n\n getOauthAccounts () {\n this.setState({ isLoading: true })\n return apiClient.get(API_ENDPOINTS.OAUTH_ACCOUNTS.SHOPIFY)\n .then((resp) => {\n const { oauth_account, script_tags } = resp.data\n this.setState({\n shopifyAccount: oauth_account,\n scriptTags: script_tags,\n isLoading: false,\n })\n }).catch(this.handleError.bind(this))\n }\n\n get canDisconnect () {\n const { currentCompany } = window.PAGEDATA\n return !(currentCompany.shopify_billing_enabled && currentCompany.shopify_billing_configured)\n }\n\n get renderDisconnect () {\n const { shopifyAccount } = this.state\n return (\n this.canDisconnect ?\n \n \n Connected: {shopifyAccount.uid}\n { this.renderDisconnect }\n
\n )\n }\n\n get renderScriptTags () {\n return (\n this.hasScriptTags ?\n \n this.destroyScriptTags()}\n >\n Remove overlay script from Shopify\n \n
\n :\n \n Your Closeby account is now connected to your Shopify store. If you'd like to use the map launcher in your theme settings, you can enable it in your theme settings now.\n
\n\n It may take a few minutes for changes to be visible on Shopify. If you are experiencing any issues with this set up process, feel free to email our team for assistance.\n
\n\n By default, the Closeby overlay script is loaded into your website. If you do not plan to use the overlay implementation, click the button below to remove the script.\n
\n\n this.createScriptTag()}\n >\n Enable Launcher on Shopify\n \n
\n )\n }\n\n get renderConnectedAccount () {\n const { shopifyAccount } = this.state\n return (\n \n Your Shopify account is connected but the launcher is not enabled yet. If you are experiencing any issues with this set up process, feel free to email our team for assistance.\n
\n\n { this.renderConnect }\n { this.renderScriptTags }\n
\n )\n }\n\n get renderConnectForm () {\n return (\n \n )\n }\n\n render() {\n const { isLoading, errorMessage, shopifyAccount } = this.state\n if (errorMessage) return { errorMessage }
\n if (isLoading) {\n return (\n \n Installing on Shopify...\n
\n )\n }\n return (\n \n
\n )\n }\n}\n","import React, { Component } from 'react';\nimport moment from 'moment';\n\nimport apiClient from '../../services/apiClient'\nimport API_ENDPOINTS from '../../constants/apiEndpoints'\nimport { createFlash } from '../../shared/createFlash';\n\nexport default class ShopifyReinstallation extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n isLoading: false,\n currentTheme: null,\n selectedThemeId: null,\n showingShopifyThemes: false,\n };\n }\n\n componentDidMount() {\n this.fetchThemes();\n }\n\n fetchThemes = () => {\n this.setState({ isLoading: true })\n\n return apiClient.get(API_ENDPOINTS.SHOPIFY_SCRIPT_TAGS.THEMES)\n .then((resp) => {\n const themes = resp.data && resp.data.themes.length ? resp.data.themes : [];\n const currentTheme = themes.find((theme) => theme.role === 'main');\n\n if (currentTheme) {\n this.setState({ isLoading: false, currentTheme: currentTheme, selectedThemeId: currentTheme.id });\n } else {\n this.setState({ isLoading: false });\n }\n });\n }\n\n setupShopifyTemplates = () => {\n this.setState({ isLoading: true })\n\n const params = { theme_id: this.state.selectedThemeId };\n\n return apiClient.post(API_ENDPOINTS.SHOPIFY_SCRIPT_TAGS.SETUP_TEMPLATES, params)\n .then((resp) => {\n location.reload();\n }).catch((e) => {\n this.setState({ isLoading: false, showingShopifyThemes: false });\n createFlash('Sorry there was a problem reinstalling Closeby into your theme.', 'error')\n });\n }\n\n render() {\n const { currentTheme, showingShopifyThemes } = this.state;\n\n if (!currentTheme) return null;\n\n if (showingShopifyThemes) {\n return (\n \n Shopify Overlay Installation\n
\n\n { shopifyAccount ? this.renderConnectedAccount : this.renderConnectForm }\n
\n \n
\n )\n } else {\n return (\n \n
\n \n Confirm Shopify Theme\n
\n \n This will reinstall Closeby into your Shopify theme code.\n
\n \n
\n \n {currentTheme.name}\n Current Theme\n
\n \n Last Updated: {moment(currentTheme.updated_at).format('LLL ZZ')}\n
\n \n \n Reinstall Closeby\n \n
\n \n
\n )\n };\n }\n}\n","import React, { Component } from 'react';\nimport ShopifyInstructions from './ShopifyInstructions'\nimport ShopifyReinstallation from './ShopifyReinstallation'\n\nimport apiClient from '../../services/apiClient'\n\nimport API_ENDPOINTS from '../../constants/apiEndpoints'\n\nimport isValidMapboxClientKey from '../../utils/mapbox';\n\nexport default class ShopifyInstallation extends Component {\n state = {\n isLoading: false,\n showingSectionOption: false,\n showingTemplateOption: false,\n showingOverlayOption: false,\n showingIframePageEmbed: false,\n };\n\n toggleOption = (optionName) => {\n return () => {\n const newState = {};\n newState[optionName] = !this.state[optionName];\n this.setState(newState);\n }\n }\n\n get renderCategorySpecificInstructions() {\n const { showingIframePageEmbed } = this.state;\n\n if (showingIframePageEmbed) {\n return (\n \n
\n Don't see Closeby in your theme editor?
\nClick this.setState({ showingShopifyThemes: true })}>here to reinstall the Closeby integration into your Shopify theme.
\n\n To restrict a map to a specific category, you can do so by adding a url param ?category=[CATEGORY NAME] when embedding your iframe. Learn more\n
\n To restrict a map to a specific category, you can do so by adding the category: '[CATEGORY NAME]' property to the options in your embed code. Learn more\n
\n 
\n
\n\n
\n )\n }\n\n get renderTemplateOption() {\n const { imgInstallPageSection, shopifyMetafieldsGenerated } = this.props\n\n return (\n \n
\n\n \n To use Closeby in your Shopify theme, just select \"Store Locator - Closeby\" in your theme editor to add it as a new section. Select one of the section style options and your map will appear in your theme automatically.\n
\n\n That's it! You have your custom map integrated.\n
\n\n\n
\n
\n \n If you'd like a more custom setup, you may need to use your embed code and add it to a Custom HTML block instead:\n
\n\n
\n \n Paste this code to embed your map into your website.\n\n
\n {showingIframePageEmbed ? (\n \n {showingIframePageEmbed ? 'Use Embed Code' : 'Use iFrame Code'}\n
\n <iframe src="{WEB_HOST}/embed/{this.props.mapKey}" width="100%" height="600" style="height:600px;border:none" allow="geolocation"></iframe><div class="closeby-embed-{this.props.mapKey}"></div>
\n <script src="{EMBED_HOST}/v1.js?closeby.mapKey={this.props.mapKey}&embed=true&height=700" async defer></script>\n \n
\n \n If you are manually installing your map on a Shopify store, view this article for more information.\n
\n {this.renderCategorySpecificInstructions}\n\n 
\n\n {shopifyMetafieldsGenerated ? this.renderPageEmbedWithShopifyTemplates : this.renderPageEmbedWithoutShopifyTemplates}\n
\n )\n }\n\n get renderOverlayOption() {\n return (\n \n
\n )\n }\n\n get renderInstallationOptions () {\n const { shopifyMetafieldsGenerated } = this.props\n const { showingSectionOption, showingTemplateOption, showingOverlayOption } = this.state\n\n return (\n \n
\n )\n }\n\n get renderJavascriptInstructions () {\n const { EMBED_HOST } = window.PAGEDATA\n const { enableLauncher } = this.props\n\n return (\n \n Installation Overview\n
\n\n There are 3 approaches you can take for installing your map:\n
\n \n
\n\n {shopifyMetafieldsGenerated ? '' : (\n \n
\n \n
\n \n \n
\n {showingSectionOption && this.renderSectionOption}\n \n Theme Section\n
\n\n Use the Shopify theme editor to embed your map within your storefront.\n
\n \n
\n \n \n
\n {showingTemplateOption && this.renderTemplateOption}\n \n Single Page Template\n
\n\n Use auto-generated page templates to create a stand-alone Shopify page for your locations.\n
\n \n
\n \n \n \n
\n {showingOverlayOption && this.renderOverlayOption}\n \n Global Overlay\n
\n\n Add your map to your website to be opened as a modal from any page with custom links.\n
\n \n To learn more, check out the FAQ here\n
\n )}\n \n
\n )\n }\n\n get renderManualOpening () {\n const { enableLauncher } = this.props\n\n return (\n \n Overlay Manual Installation\n
\n\n
\n \n If you choose to manaully install the overlay instead of the using the automatic Shopify integration above, follow the steps below.\n
\n\n Copy and paste the JavaScript code below to every page where you want your map to be available to visitors. Add it before the closing </head> tag at the top of each page. For instructions on installing the widget on a Squarespace, you can follow these detailed instructions.\n
\n
\n \n Add this code:\n
\n <script>
\n window.closeby = {'{'}
\n mapKey: "{this.props.mapKey}"
\n {'}'};
\n </script>
\n <script src="{EMBED_HOST}/v1.js" async defer></script>\n \n { enableLauncher ?\n 'This will add the launcher in the bottom right corner of your website. If you do not want the default launcher and you would rather open the overlay yourself edit your theme and uncheck the \"Enable Launcher\" option.' :\n 'The default launcher is disabled, use HTML code (see below) to open the overlay. If you want to re-enable the default launcher edit your theme and check the \"Enable Launcher\" option.'\n }\n
\n \n
\n )\n }\n\n get renderPageEmbedWithoutShopifyTemplates() {\n return (\n \n Manually Opening Overlay\n
\n\n { enableLauncher ?\n '' :\n
\n \n Note: This step is required because you \"Enable Launcher\" is disabled for your map. If you want to skip this and use the default launcher instead edit your theme and check the box for \"Enable Launcher\".\n
\n }\n\n Once the javascript code has been added, most users use the built-in toggle to open their map. Alternatively, you can manually trigger the map with your own custom HTML link.\n
\n\n Add a link with a URL as javascript:closeby-open or #closeby-open to trigger your widget manually, as if it were an external website link. This can be useful if you have your own style or buttons that you want to use open the map.\n
\n So instead of a normal link like http://example.com, simply add javascript:closeby-open as the URL and it will open the widget.\n
\n
\n \n Example HTML link:\n
\n <a href="javascript:closeby-open">
\n View Locations
\n </a>\n
\n )\n }\n\n get renderPageEmbedWithShopifyTemplates() {\n const { showingIframePageEmbed } = this.state;\n const { EMBED_HOST, WEB_HOST } = window.PAGEDATA\n\n return (\n \n
\n\n
\n )\n }\n\n render() {\n // Note: Can escape js embed code using https://www.freeformatter.com/html-escape.html\n const { enableLauncher, mapInstalled, mapbox_client_key: mapboxClientKey, valueKey } = this.props;\n const mapboxClientKeyValid = (mapboxClientKey && isValidMapboxClientKey(mapboxClientKey) && !valueKey) || (valueKey && isValidMapboxClientKey(valueKey));\n \n return mapboxClientKeyValid ? (\n <>\n \n
\n\n \n If you wish to use your map embedded within the content of a Shopify page, all you need to do is select it as the page template.\n
\n\n Just select one of the automatically generated templates (default, centered or full-width) when creating a page and you will have your custom map integrated. That's it!\n
\n\n\n
\n
\n \n If you'd like set up a more customized setup with your iframe, follow the steps below.\n
\n\n
\n \n Paste this code to embed your map into your website.\n\n
\n {showingIframePageEmbed ? (\n \n {showingIframePageEmbed ? 'Use Embed Code' : 'Use iFrame Code'}\n
\n <iframe src="{WEB_HOST}/embed/{this.props.mapKey}" width="100%" height="600" style="height:600px;border:none" allow="geolocation"></iframe><div class="closeby-embed-{this.props.mapKey}"></div>
\n <script src="{EMBED_HOST}/v1.js?closeby.mapKey={this.props.mapKey}&embed=true&height=700" async defer></script>\n \n
\n \n If you are manually installing your map on a Shopify store, view this article for more information.\n
\n {this.renderCategorySpecificInstructions}\n\n By following these simple instructions, you can easily display your map on your Shopify website in just a few minutes.\n
\n\n {this.renderInstallationOptions}\n \n ) : (\n \n Provide a Mapbox Access Token above to proceed with installation instructions.\n
\n )\n };\n};\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nimport URLS from '../../constants/urls'\n\nimport isValidMapboxClientKey from '../../utils/mapbox';\n\nexport default class DefaultInstallation extends Component {\n constructor(props) {\n super(props)\n this.state = { showIframePageEmbed: false };\n }\n\n handleToggleIframeCode = name => {\n return () => {\n this.setState({ [name]: !this.state[name] });\n }\n }\n\n get renderInstallationOptions() {\n return (\n \n
\n )\n }\n\n get renderJavascriptInstructions() {\n const { EMBED_HOST } = window.PAGEDATA\n const { enableLauncher } = this.props\n\n return (\n \n Installation Overview\n
\n\n There are 2 approaches you can take for installing your map:\n
\n \n
\n - \n
- \n Page Embed - this will embed your map inside the content on specific pages and will always be showing when someone views that particular page.\n \n
- \n Overlay - this will open your map on top of the existing page and includes the optional launcher widget that floats in the corner of every page.\n \n
\n
\n )\n }\n\n get renderManualOpening() {\n const { enableLauncher } = this.props\n\n return (\n \n Overlay Installation\n
\n\n Copy and paste the JavaScript code below to every page where you want your map to be available to visitors. Add it before the closing
\n </head> tag at the top of each page. For instructions on installing the widget on a Squarespace, you can follow these detailed instructions.\n \n
\n \n Add this code:\n
\n <script>window.closeby = {'{'} mapKey: "{this.props.mapKey}" {'}'};</script>
\n <script src="{EMBED_HOST}/v1.js" async defer></script>\n \n {enableLauncher ?\n 'This will add the launcher in the bottom right corner of your website. If you do not want the default launcher and you would rather open the overlay yourself edit your theme and uncheck the \"Enable Launcher\" option.' :\n 'The default launcher is disabled, use HTML code (see below) to open the overlay. If you want to re-enable the default launcher edit your theme and check the \"Enable Launcher\" option.'\n }\n
\n \n
\n )\n }\n\n get renderPageEmbed() {\n const { showIframePageEmbed } = this.state;\n const { EMBED_HOST, WEB_HOST } = window.PAGEDATA\n\n return (\n \n Manually Opening Overlay\n
\n\n {enableLauncher ?\n '' :\n
\n \n Note: This step is required because you \"Enable Launcher\" is disabled for your map. If you want to skip this and use the default launcher instead edit your theme and check the box for \"Enable Launcher\".\n
\n }\n\n Once the javascript code has been added, most users use the built-in toggle to open their map. Alternatively, you can manually trigger the map with your own custom HTML link.\n
\n\n Add a link with a URL as javascript:closeby-open or #closeby-open to trigger your widget manually, as if it were an external website link. This can be useful if you have your own style or buttons that you want to use open the map.\n
\n So instead of a normal link like http://example.com, simply add javascript:closeby-open as the URL and it will open the widget.\n
\n
\n \n Example HTML link:\n
\n <a href="javascript:closeby-open">
\n View Locations
\n </a>\n
\n )\n }\n\n render() {\n const { mapbox_client_key: mapboxClientKey, valueKey } = this.props;\n const mapboxClientKeyValid = (mapboxClientKey && isValidMapboxClientKey(mapboxClientKey) && !valueKey) || (valueKey && isValidMapboxClientKey(valueKey));\n\n return mapboxClientKeyValid ? (\n <>\n \n Page Embed Installation\n
\n\n
\n \n
\n \n If you wish to embed your map within the content of your web page instead of using the overlay, the installation is simple. Just add the following code to your website:\n
\n\n
\n \n Paste this code to embed your map into your website.\n\n
\n {showIframePageEmbed ? (\n \n {showIframePageEmbed ? 'Use Embed Code' : 'Use iFrame Code'}\n
\n <iframe src="{WEB_HOST}/embed/{this.props.mapKey}" width="100%" height="600" style="height:600px;border:none" allow="geolocation"></iframe><div class="closeby-embed-{this.props.mapKey}"></div>
\n <script src="{EMBED_HOST}/v1.js?closeby.mapKey={this.props.mapKey}&embed=true&height=700" async defer></script>\n \n
\n \n If you are manually installing your map to a Shopify store, view this article for more information. For Wix, use this article for more details instructions.\n
\n {showIframePageEmbed ? (\n\n To restrict a map to a specific category, you can do so by adding a url param ?category=[CATEGORY NAME] when embedding your iframe. Learn more\n
\n To restrict a map to a specific category, you can do so by adding the category: '[CATEGORY NAME]' property to the options in your embed code. Learn more\n
\n By following these instructions, you can easily display your custom map to your visitors with all your locations.\n
\n\n {this.renderInstallationOptions}\n \n\n {this.renderPageEmbed}\n
\n\n {this.renderJavascriptInstructions}\n {this.renderManualOpening}\n \n ) : (\n
\n Provide a valid Mapbox Access Token above to proceed with installation instructions.\n
\n )\n };\n};\n","import React from 'react';\n\nimport WixInstallation from './WixInstallation';\nimport ShopifyInstallation from './ShopifyInstallation';\nimport DefaultInstallation from './DefaultInstallation';\n\nconst RenderInstructions = ({ shopifyConnected, valueKey, hasWixConnected, ...props }) => {\n if (shopifyConnected) {\n return \n
\n );\n};\n\nexport default MapsEmbedContent;\n","import PropTypes from 'prop-types';\nimport React, { useState, useEffect } from 'react';\n\nimport MapsInstallHeader from './MapsInstallHeader';\nimport MapsMapboxContent from './MapsMapboxContent';\nimport MapsEmbedContent from './MapsEmbedContent';\nimport PaymentBannerNotice from \"../subscriptions/PaymentBannerNotice\";\n\nconst MapsEmbed = (props) => {\n useEffect(() => {\n Track.event('Map embed instructions viewed')\n }, [])\n\n const [key, setKey] = useState(props.mapbox_client_key);\n\n return (\n \n \n Install Your Map\n
\n
\n \n Install Your Map\n
\n \n
\n )\n};\n\nMapsEmbed.propTypes = {\n isFree: PropTypes.bool.isRequired,\n hasWixConnected: PropTypes.bool.isRequired,\n};\n\nexport default MapsEmbed;\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { SUPPORT_EMAIL } from '../../constants'\n\nexport default class MarketingAbout extends Component {\n constructor(props) {\n super(props);\n }\n\n componentDidMount () {\n Track.event('About page viewed');\n }\n\n render() {\n return (\n \n
\n \n
\n \n
\n );\n }\n}\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { SUPPORT_EMAIL } from '../../constants'\n\nexport default class HowItWorks extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n activeOption: 'page'\n }\n }\n\n toggleOption = (option) => {\n return () => {\n this.setState({ activeOption: option })\n }\n }\n\n get renderOverlayDetails() {\n if (this.state.activeOption !== 'overlay') return;\n\n return (\n \n
\n \n
\n \n
\n \n Though it is often overlooked by companies, we see store locators as one of the most important ways to convert your online visitors into offline business.\n
\n \n
\n \n If a business wants a locator, usually they will either pay thousands of dollars for an engineer and designer to create one or they will use a pre-built widget (like Closeby) and pay a subscription per month.\n
\n\n The benefit of using a widget is not only the time and cost savings, but also the reassurance that you know what you're buying beforehand and that it'll be maintained by a team for the foreseeable future.\n
\n\n
\n \n At Closeby, we strive to offer the best-in-class locator for brands by using modern technology and UX design to help them capture more potential business.\n
\n\n We're creators and hackers. Over the years, we've helped build websites for Fortune 500 companies, Top 40 artists, online brands and even our own startups. We can relate and we know the importance of creating delightful user experiences.\n
\n\n So, if you have any questions or feature requests, feel free to reach out and we'd love to hear from you.\n
\n\n Closeby Team\n
\n {SUPPORT_EMAIL}\n
\n
\n )\n }\n\n get renderPageEmbedDetails() {\n if (this.state.activeOption !== 'page') return;\n\n return (\n \n
\n \n
\n \n
\n \n 
\n
\n \n Once installed, you can use the default launcher in the corner of your website to open your map. The launcher text and color is customizable, so you can make sure it fits your brand well.\n
\n\n You can also hide the launcher and manually add html links that open your map as well, giving you the ultimate flexibility on how you want to integrate the widget.\n
\n\n
\n )\n }\n\n render() {\n const { activeOption } = this.state\n\n return (\n \n
\n \n
\n \n
\n \n 
\n
\n \n You can easily embed your map within your website content without an overlay, giving you better control on how the map appears to your visitors.\n
\n\n This can be useful if you want to have a specific page for finding your locations or plan to create sections on your website that show your locations without requiring any clicks by your user.\n
\n\n
\n );\n }\n}\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { SUPPORT_EMAIL } from '../../constants';\nimport { mapboxStyles } from '../../constants/mapThemeOptions';\n\nimport HowItWorks from './HowItWorks';\n\nexport default class MarketingFeatures extends Component {\n constructor(props) {\n super(props);\n }\n\n componentDidMount () {\n Track.event('Features page viewed');\n }\n\n get renderStyles() {\n return mapboxStyles.map((style, key) => {\n return (\n \n
\n \n
\n \n You can choose to embed your map in 2 different ways: as an overlay or an in-page embed within your website content.\n
\n \n
\n {this.renderPageEmbedDetails}\n {this.renderOverlayDetails}\n \n \n In-Page Embed\n \n \n Overlay Embed\n \n
\n \n
\n )\n });\n }\n\n render() {\n return (\n \n 
\n
\n \n {style.name}\n
\n \n
\n );\n }\n}\n\nMarketingFeatures.propTypes = {\n overlayImage: PropTypes.string.isRequired,\n pageEmbedImage: PropTypes.string.isRequired,\n showEmbedOptions: PropTypes.bool.isRequired,\n};\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nimport { SUPPORT_EMAIL } from '../../constants';\n\nexport default class MarketingIndex extends Component {\n state = {\n styleSelected: 'basic'\n }\n\n componentDidMount() {\n Track.event('Home page viewed');\n }\n\n toggleStyle = (style) => {\n return () => {\n this.setState({ styleSelected: style })\n }\n }\n\n render() {\n return (\n \n {this.props.showEmbedOptions && (\n <>\n
\n \n \n Map Embed Options\n\n
\n
\n \n Map Embed Options\n\n \n Embed your map on any website.\n \n
\n \n
\n\n \n \n Features Overview\n
\n
\n \n Features Overview\n \n We're always adding new features! If you have any questions, feel free to send an email to our team.\n \n
\n \n
\n \n \n Custom details per location\n
\n \n Add details to your locations with basic formatting options and automatic link creation.\n
\n \n \n Open hours and contact details\n
\n \n Add location hours, phone number and email to a location to help people get in touch.\n
\n \n \n Add custom categories per location\n
\n \n Set custom tags for each location, whether it's type of vendor or product category.\n
\n \n \n Automatic links for directions\n
\n \n Getting directions are just one click away with immediate directions on Google Maps.\n
\n \n \n Set default map positioning\n
\n \n Choose to set a default map position or position the map by visitors' IP address.\n
\n \n \n Search and sort by distance\n
\n\n \n Let customers search by city name, state, zip code and more.\n
\n \n \n Custom map theming options\n
\n \n Choose from a variety of robust themes that go far beyond other locators on the market.\n
\n \n \n Custom color and font for your brand\n
\n \n Set a custom color and font family and the rest of the map and location pins will use it.\n
\n \n \n Set miles or kilometers on your map\n
\n \n In a country using kilometers? Easily change map settings to use the metric system instead.\n
\n \n \n Custom HTML links to open the map\n
\n \n Use HTML links and other custom triggers to best works with your website user experience.\n
\n \n \n Track location and device views\n
\n \n Integrate with your Google Analytics account or simply use the built-in usage tracking.\n
\n \n \n Add custom delivery links\n
\n \n If your in the business of delivery, add links to UberEats, Doordash, Postmates and more.\n
\n \n \n Customize the call-to-action\n
\n \n Link to other stores, products or leave the call-to-action as a \"Get Directions\" link.\n
\n \n \n Sync with Google Sheets\n
\n \n If using the web app is too complicated for your team, simply share a new Google Sheet (beta).\n
\n \n
\n \n \n Custom Themes\n
\n
\n \n Custom Themes\n \n Choose from a variety of theming options, from black & white to something completely your own.\n \n
\n \n {this.renderStyles}\n\n
\n \n
\n \n
\n \n Design your own in Mapbox Studio & we'll import it for you.\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {this.state.styleSelected === 'basic' && (\n \n Basic List\n
\n \n Image List\n
\n \n 2-Column List\n
\n \n
\n )}\n {this.state.styleSelected === 'image' && (\n \n
\n \n
\n )}\n {this.state.styleSelected === 'column' && (\n \n
\n \n
\n )}\n \n
\n \n
\n \n
\n \n From basic stockists to advanced customizations.\n
\n \n
\n \n Along with a variety of map themes to choose from, you can change the entire layout of your map experience.\n
\n\n No need for the web developer or designer. Follow the step-by-step instructions and you can have a powerful tool in minutes.\n
\n\n Get Started Free\n
\n \n
\n )\n }\n\n render() {\n return (\n \n
\n \n
\n \n Test\n
\n \n
\n \n Test\n
\n \n
\n \n Test\n
\n \n
\n \n Test\n
\n \n
\n );\n }\n}\n\nPostsList.propTypes = {\n posts: PropTypes.array\n};\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nexport class StatsHeader extends Component {\n render() {\n return (\n \n Recent Posts\n
\n {this.renderListItems}\n\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state\n }\n};\n\nexport default connect(mapStateToProps)(StatsHeader);\n","import API_ENDPOINTS from '../constants/apiEndpoints'\nimport apiClient from '../services/apiClient'\n\nimport {\n STATS_UPDATE_VALUES,\n STATS_UPDATE_RECEIVE,\n GET_STATS_SUGGESTIONS,\n GET_STATS_DEVICES,\n GET_STATS_VIEWS\n} from '../constants';\n\nexport const updateStats = (values) => {\n return {\n type: STATS_UPDATE_VALUES,\n values\n };\n}\n\nexport const saveStats = (id, params) => (dispatch) => {\n return apiClient.patch(API_ENDPOINTS.STATS.UPDATE(id), params)\n .then(response => {\n dispatch(saveStatsReceive(response.data))\n })\n}\n\nconst saveStatsReceive = (json) => {\n return {\n type: STATS_UPDATE_RECEIVE,\n json\n };\n}\n\nexport const getStatsSuggestions = (params) => (dispatch) => {\n apiClient.get(API_ENDPOINTS.STATS.SUGGESTIONS, {\n params: {}\n })\n .then(response => {\n dispatch(requestGetStatsSuggestions(response.data))\n })\n}\n\nconst requestGetStatsSuggestions = (json) => {\n return {\n type: GET_STATS_SUGGESTIONS,\n json\n };\n}\n\nexport const getStatsViews = (params) => (dispatch) => {\n apiClient.get(API_ENDPOINTS.STATS.LOCATION_VIEWS, {\n params: {}\n })\n .then(response => {\n dispatch(requestGetStatsViews(response.data))\n })\n}\n\nconst requestGetStatsViews = (json) => {\n return {\n type: GET_STATS_VIEWS,\n json\n };\n}\n\nexport const getStatsDevices = (params) => (dispatch) => {\n apiClient.get(API_ENDPOINTS.STATS.DEVICES, {\n params: {}\n })\n .then(response => {\n dispatch(requestGetStatsDevices(response.data))\n })\n}\n\nconst requestGetStatsDevices = (json) => {\n return {\n type: GET_STATS_DEVICES,\n json\n };\n}\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nimport { getStatsSuggestions, getStatsViews, getStatsDevices, updateStats, saveStats } from '../../actions/statsActions';\nimport LocatorSpinner from '../locator/LocatorSpinner';\nimport { createFlash } from '../../shared/createFlash';\nimport API_ENDPOINTS from '../../constants/apiEndpoints';\n\nexport class StatsPage extends Component {\n componentDidMount() {\n this.props.getStatsSuggestions()\n this.props.getStatsViews()\n this.props.getStatsDevices()\n }\n\n handleChangeInput = (name) => {\n return event => {\n const { target: { value } } = event;\n this.props.updateStats({ [name]: value });\n }\n }\n\n saveStatsForm = (e) => {\n const { currentCompany } = window.PAGEDATA\n e.preventDefault();\n e.stopPropagation();\n\n this.props.updateStats({\n isSaving: true\n });\n\n this.props.saveStats( currentCompany.id, {\n google_analytics_id: this.props.stats.googleAnalyticsId\n }).then(() => {\n createFlash('Your settings have been saved!', 'success')\n })\n }\n\n googleAnalyticsIdValid = () => {\n if (!this.props.stats.googleAnalyticsId || this.props.stats.googleAnalyticsId === '') return true;\n return this.props.stats.googleAnalyticsId && this.props.stats.googleAnalyticsId.includes('G-');\n }\n\n downloadCSV = () => {\n const url = API_ENDPOINTS.STATS.CSV;\n window.location.href = url;\n }\n\n get renderAutosuggests() {\n return (\n \n Analytics\n
\n \n {this.props.stats.autosuggest_counts.map((group) => {\n const name = encodeURIComponent(group[0])\n const placesId = group[1][0].google_maps_places_id\n\n return (\n \n
\n )\n }\n\n get renderAutosuggestEmptyState() {\n return (\n \n {group[0]}\n \n
\n \n
\n \n )\n })}\n \n {group[1].length}\n
\n \n
\n )\n }\n\n get renderAutosuggestListOrEmptyState() {\n const autosuggestsExist = this.props.stats.autosuggest_counts && this.props.stats.autosuggest_counts.length\n return autosuggestsExist ? this.renderAutosuggests : this.renderAutosuggestEmptyState\n }\n\n get renderViews() {\n return (\n \n No search data available yet.\n
\n \n {this.props.stats.location_views.map((location) => {\n return (\n
\n )\n }\n\n get renderViewedEmptyState() {\n return (\n \n
\n )\n })}\n \n {location.title}\n
\n \n {location.address_full}\n
\n \n
\n \n {location.view_count}\n
\n \n
\n )\n }\n\n get renderViewedListOrEmptyState() {\n const viewsExist = this.props.stats.location_views && this.props.stats.location_views.length\n return viewsExist ? this.renderViews : this.renderViewedEmptyState\n }\n\n get renderDevices() {\n const { devices, devicesTotalCount } = this.props.stats;\n return (\n \n No location data available yet.\n
\n \n
\n )\n }\n\n render() {\n const { isFetchingSuggestions, isFetchingDevices, isFetchingViews } = this.props.stats;\n\n return (\n \n {Object.keys(devices).map((id, key) => {\n return (\n
\n \n
\n )\n })}\n \n {devices[id].label}\n
\n \n
\n \n {devices[id].percentage}%\n
\n \n from {devicesTotalCount ? `${String(devicesTotalCount).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')}` : 0} total map views\n
\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n ...state\n }\n};\n\nexport default connect(mapStateToProps, { getStatsSuggestions, getStatsViews, getStatsDevices, updateStats, saveStats })(StatsPage);\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { Provider } from 'react-redux';\n\nimport store, { stateInitializer } from '../../store';\nimport StatsHeader from './StatsHeader';\nimport StatsPage from './StatsPage';\n\nexport default class StatsIndex extends Component {\n constructor(props) {\n super(props);\n\n stateInitializer({\n stats: {\n isFetchingSuggestions: true,\n isFetchingDevices: true,\n isFetchingViews: true,\n googleAnalyticsId: props.googleAnalyticsId\n },\n });\n }\n\n render() {\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n Most Used Suggestions\n
\n\n
\n {isFetchingSuggestions ? (\n \n
\n \n
\n Location Name
\n Times Used
\n \n
\n ) : this.renderAutosuggestListOrEmptyState}\n \n
\n \n
\n \n Most Viewed Locations\n
\n \n\n
\n {isFetchingViews ? (\n \n
\n \n
\n Location Name
\n Times Viewed
\n \n
\n ) : this.renderViewedListOrEmptyState}\n \n
\n \n
\n \n \n Device Type\n
\n\n
\n {isFetchingDevices ? (\n \n
\n \n
\n Type
\n % Used
\n \n
\n ) : this.renderDevices}\n \n
\n \n
\n );\n};\n\nPlan.propTypes = {\n type: PropTypes.string.isRequired,\n num_locations: PropTypes.string.isRequired,\n price: PropTypes.number.isRequired,\n monthly: PropTypes.bool.isRequired,\n disable: PropTypes.bool,\n changePlan: PropTypes.bool,\n selectedPlan: PropTypes.bool,\n};\n\nexport default Plan;\n","import PropTypes from \"prop-types\"\nimport React, { Component } from \"react\"\nimport CcInput from './CcInput'\nimport URLS from '../../constants/urls'\nimport { SUPPORT_EMAIL } from '../../constants';\nimport { getCsrfToken } from '../../services/apiClient'\n\nimport Plan from \"./Plan\";\n\nexport default class SubscriptionsIndex extends Component {\n constructor(props) {\n super(props)\n if (typeof window.Stripe !== 'undefined') {\n this.stripe = Stripe(process.env.STRIPE_PUB_KEY)\n }\n }\n\n subscriptionIsTrialing = () => {\n const { subscription } = this.props\n return subscription && subscription.status === 'trialing'\n }\n\n subscriptionNeedsPaymentMethod = () => {\n const { subscription } = this.props\n return subscription && (subscription.status === 'past_due' || subscription.status === 'canceled' || subscription.status === 'unpaid')\n }\n\n createSubscription = ({ token }, coupon) => {\n let hiddenInput = document.createElement('input')\n hiddenInput.setAttribute('type', 'hidden')\n hiddenInput.setAttribute('name', 'stripe_token')\n hiddenInput.setAttribute('value', token.id)\n this.formEl.appendChild(hiddenInput)\n\n if (coupon && coupon.length) {\n let couponInput = document.createElement('input')\n couponInput.setAttribute('type', 'hidden')\n couponInput.setAttribute('name', 'coupon')\n couponInput.setAttribute('value', coupon)\n this.formEl.appendChild(couponInput)\n }\n\n this.formEl.submit()\n }\n\n get shopifyBillingMethod() {\n const { authenticityToken, stripePlan } = this.props\n return (\n \n {changePlan &&
\n \n Current:
}\n {type}
\n \n
\n \n \n 
\n
\n \n Full functionality for up to\n {num_locations} locations.\n
\n\n Take advantage of all customizations, embed options and bulk uploading.\n
\n\n If you haven't already, add a \n \n \n Mapbox access token\n \n \n on the \n \n \n Install page\n \n \n to activate your map - it's free for 50k loads per month.\n
\n \n
\n \n
\n ${price}/{monthly ? 'month' : 'year'}
\n \n \n {selectedPlan ? 'Applied' : 'Select'}\n
\n \n\n {changePlan && (\n \n Change
\n \n )}\n \n {monthly ? 'Or save 17% with annual billing' : \"Saving 17% with annual billing\" }\n
\n \n
\n )\n }\n\n get renderSubheaderCopy() {\n if (this.subscriptionIsTrialing()) {\n return 'Add a credit card to continue once your trial ends.'\n } else if (this.subscriptionNeedsPaymentMethod()) {\n return 'Reactivate your account by adding a new payment method.'\n } else {\n return 'Enter your payment details to get started.'\n }\n }\n\n get renderCCInput() {\n let ctaText,\n subTitle;\n\n if (this.subscriptionIsTrialing()) {\n ctaText = 'Save Payment Method'\n subTitle = 'You can cancel your subscription at any time.'\n } else if (this.subscriptionNeedsPaymentMethod()) {\n ctaText = 'Update Payment Method'\n subTitle = 'Your account will be immediately reactived.'\n } else {\n ctaText = 'Upgrade My Account'\n subTitle = 'You can cancel your subscription at any time.'\n }\n\n return (\n \n
\n \n
\n \n
\n \n Activate Billing Through Shopify\n
\n\n By activating billing with Shopify, you will be charged through the connected Shopify account. If you have any questions with billing, feel free to send an email to our team.\n
\n \n
\n \n \n
\n \n
\n )\n }\n\n render() {\n const { \n defaultBillingMethod,\n hasShopifyConnected,\n hasWixConnected,\n authenticityToken,\n planType,\n planMonthly,\n planNumLocations,\n planPrice,\n stripePlan\n } = this.props\n if (defaultBillingMethod === 'shopify') return this.shopifyBillingMethod\n\n return (\n \n
\n )\n }\n}\n\nSubscriptionsIndex.propTypes = {\n authenticityToken: PropTypes.string.isRequired,\n hasPaymentMethod: PropTypes.bool.isRequired,\n hasShopifyConnected: PropTypes.bool.isRequired,\n hasWixConnected: PropTypes.bool.isRequired,\n defaultBillingMethod: PropTypes.string,\n subscription: PropTypes.object,\n planType: PropTypes.string,\n planPrice: PropTypes.number,\n planMonthly: PropTypes.bool,\n planNumLocations: PropTypes.string,\n stripePlan: PropTypes.string\n}\n","import PropTypes from \"prop-types\"\nimport React, { Component } from \"react\"\nimport API_ENDPOINTS from \"../../constants/apiEndpoints\"\nimport apiClient from \"../../services/apiClient\"\nimport { createFlash } from \"../../shared/createFlash\"\n\nexport default class StripeCustomerDetails extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n description: props.stripeCustomer.description\n };\n };\n\n updateStripeCustomer = () => {\n apiClient.post(API_ENDPOINTS.SUBSCRIPTIONS.UPDATE_CUSTOMER, {\n description: this.state.description\n })\n .then(response => createFlash(response.data.message, 'notice'));\n };\n\n handleChange = (e) => {\n this.setState({ description: e.target.value })\n };\n\n render() {\n return (\n \n
\n \n
\n \n Power up your locator.\n
\n\n {this.renderSubheaderCopy}\n
\n \n
\n {\n hasShopifyConnected ?\n \n
\n \n \n
\n \n \n
: null\n }\n \n
\n