\n
\n\n \n
\n \n
\n\n \n
\n
\n\n \n
\n \n
\n \n
\n \n
\n {props.children}
\n \n);\n\nModal.propTypes = {\n children: PropTypes.node.isRequired,\n isOpen: PropTypes.bool.isRequired,\n onRequestClose: PropTypes.func.isRequired,\n ariaHideApp: PropTypes.bool,\n shouldCloseOnOverlayClick: PropTypes.bool,\n className: PropTypes.string,\n dialogClassName: PropTypes.string,\n onAfterOpen: PropTypes.func\n};\n\nModal.defaultProps = {\n ariaHideApp: false,\n shouldCloseOnOverlayClick: true,\n className: '',\n dialogClassName: '',\n onAfterOpen: null\n};\n\nexport default Modal;\n","// extracted by mini-css-extract-plugin\nexport default {\"btn-add-friend\":\"Tagging--btn-add-friend--LUbvS\",\"btnAddFriend\":\"Tagging--btn-add-friend--LUbvS\",\"dialog\":\"Tagging--dialog--BEeeQ\",\"close-button\":\"Tagging--close-button--HSnz5\",\"closeButton\":\"Tagging--close-button--HSnz5\"};","import createNetworkingClient from 'utils/networking-client';\n\nexport const types = {\n TOGGLE_MODAL: 'TOGGLE_MODAL',\n HIDE_INTERSTITIAL: 'HIDE_INTERSTITIAL',\n INVITE_SUBMITTING: 'INVITE_SUBMITTING',\n INVITE_COMPLETE: 'INVITE_COMPLETE',\n INVITE_ERROR: 'INVITE_ERROR',\n FOLLOWERS_LOADING: 'FOLLOWERS_LOADING',\n FOLLOWERS_COMPLETE: 'FOLLOWERS_COMPLETE',\n FOLLOWERS_ERROR: 'FOLLOWERS_ERROR'\n};\n\nexport const toggleModal = () => ({\n type: types.TOGGLE_MODAL\n});\n\nexport const hideInterstitial = () => ({\n type: types.HIDE_INTERSTITIAL\n});\n\nconst inviteSubmitting = (athleteId) => ({\n type: types.INVITE_SUBMITTING,\n athleteId\n});\n\nconst inviteComplete = (athleteId) => ({\n type: types.INVITE_COMPLETE,\n athleteId\n});\n\nconst inviteError = (athleteId) => ({\n type: types.INVITE_ERROR,\n athleteId\n});\n\nexport const invite = (athleteId, activityId) => (dispatch) => {\n dispatch(inviteSubmitting(athleteId));\n\n createNetworkingClient()\n .post(`/activities/${activityId}/invite_friend`, {\n invitedAthleteId: athleteId\n })\n .then((response) => {\n if (response && response.status === 200) {\n dispatch(inviteComplete(athleteId));\n } else {\n dispatch(inviteError(athleteId));\n }\n })\n .catch(() => {\n dispatch(inviteError(athleteId));\n });\n};\n\nconst followersLoading = () => ({\n type: types.FOLLOWERS_LOADING\n});\n\nconst followersComplete = (followers) => ({\n type: types.FOLLOWERS_COMPLETE,\n followers\n});\n\nconst followersError = (error) => ({\n type: types.FOLLOWERS_ERROR,\n error: error.message\n});\n\nexport const fetchFollowers = (input) => (dispatch) => {\n const searchTerm = input === undefined ? '' : input;\n dispatch(followersLoading());\n return createNetworkingClient()\n .get(`/athlete/followers/${searchTerm}`)\n .then((response) => {\n if (response && response.status === 200) {\n dispatch(followersComplete(response.data.results.followers));\n } else {\n dispatch(\n followersError(\n 'An error has occured fetching your followers, please try again later.'\n )\n );\n }\n })\n .catch((e) => {\n dispatch(followersError(e));\n });\n};\n\nexport default {\n types,\n toggleModal,\n hideInterstitial,\n invite,\n fetchFollowers\n};\n","// extracted by mini-css-extract-plugin\nexport default {\"interstitial-container\":\"TaggingInterstitial--interstitial-container--2hOyJ\",\"interstitialContainer\":\"TaggingInterstitial--interstitial-container--2hOyJ\",\"body\":\"TaggingInterstitial--body--A7AXz\",\"banner\":\"TaggingInterstitial--banner--H6p22\",\"title\":\"TaggingInterstitial--title--W3+ut\",\"description\":\"TaggingInterstitial--description--zaRxl\",\"continue-button\":\"TaggingInterstitial--continue-button--UWmYv\",\"continueButton\":\"TaggingInterstitial--continue-button--UWmYv\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@strava/ui/Button';\n\nimport I18n from 'utils/I18n';\n\nimport banner from '../../assets/banner-tagging-interstitial.jpg';\nimport retinaBanner from '../../assets/banner-tagging-interstitial@2x.jpg';\nimport styles from './styles.scss';\n\nconst TaggingInterstitial = (props) => (\n \n
\n);\n\nTaggingInterstitial.propTypes = {\n activityType: PropTypes.string.isRequired,\n triggerContinue: PropTypes.func.isRequired\n};\n\nexport default TaggingInterstitial;\n","// extracted by mini-css-extract-plugin\nexport default {\"invite-container\":\"TaggingInviteContainer--invite-container--izdgX\",\"inviteContainer\":\"TaggingInviteContainer--invite-container--izdgX\",\"invite-container-body\":\"TaggingInviteContainer--invite-container-body--Pfwl7\",\"inviteContainerBody\":\"TaggingInviteContainer--invite-container-body--Pfwl7\",\"title\":\"TaggingInviteContainer--title--fluwG\",\"footer\":\"TaggingInviteContainer--footer--MfhHf\",\"footer-title\":\"TaggingInviteContainer--footer-title--iRw7R\",\"footerTitle\":\"TaggingInviteContainer--footer-title--iRw7R\",\"footer-description\":\"TaggingInviteContainer--footer-description--vjQe1\",\"footerDescription\":\"TaggingInviteContainer--footer-description--vjQe1\"};","// extracted by mini-css-extract-plugin\nexport default {\"list-container\":\"FollowersList--list-container--DKaL7\",\"listContainer\":\"FollowersList--list-container--DKaL7\",\"search-bar-container\":\"FollowersList--search-bar-container--u0Lxt\",\"searchBarContainer\":\"FollowersList--search-bar-container--u0Lxt\",\"search-bar\":\"FollowersList--search-bar--C0-Mq\",\"searchBar\":\"FollowersList--search-bar--C0-Mq\",\"loading-container\":\"FollowersList--loading-container--ptMTZ\",\"loadingContainer\":\"FollowersList--loading-container--ptMTZ\",\"empty-state-container\":\"FollowersList--empty-state-container--AZVnX\",\"emptyStateContainer\":\"FollowersList--empty-state-container--AZVnX\",\"find-friends-button\":\"FollowersList--find-friends-button--k4zig\",\"findFriendsButton\":\"FollowersList--find-friends-button--k4zig\",\"followers-list\":\"FollowersList--followers-list--TGYI4\",\"followersList\":\"FollowersList--followers-list--TGYI4\"};","// extracted by mini-css-extract-plugin\nexport default {\"list-item\":\"FollowersListItem--list-item--Tn1Nm\",\"listItem\":\"FollowersListItem--list-item--Tn1Nm\",\"content\":\"FollowersListItem--content--5Ca1A\",\"button-wrapper\":\"FollowersListItem--button-wrapper--Y-L3B\",\"buttonWrapper\":\"FollowersListItem--button-wrapper--Y-L3B\",\"add-button\":\"FollowersListItem--add-button--U5W8b\",\"addButton\":\"FollowersListItem--add-button--U5W8b\",\"complete\":\"FollowersListItem--complete--AOhfV\",\"error-message\":\"FollowersListItem--error-message--JdRDB\",\"errorMessage\":\"FollowersListItem--error-message--JdRDB\",\"error-icon\":\"FollowersListItem--error-icon--GBuck\",\"errorIcon\":\"FollowersListItem--error-icon--GBuck\",\"name\":\"FollowersListItem--name--HNRBf\",\"location\":\"FollowersListItem--location--Q--1u\"};","export const followerStatus = {\n READY: 1,\n SUBMITTING: 2,\n COMPLETE: 3,\n ERROR: 4\n};\n\nexport default { followerStatus };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@strava/ui/Button';\nimport Spinner from '@strava/ui/Spinner';\nimport Avatar from '@strava/ui/Avatar';\n\nimport I18n from 'utils/I18n';\n\nimport styles from './styles.scss';\nimport { followerStatus } from '../../const';\n\nclass FollowersListItem extends React.Component {\n addButtonClickHandler = (athleteId, activityId) => () => {\n this.props.handleInvite(athleteId, activityId);\n };\n\n addButtonClassName = () => {\n const { follower } = this.props;\n const status =\n follower.status === followerStatus.COMPLETE ? styles.complete : '';\n\n return `${styles.addButton} ${status}`;\n };\n\n addButtonVariant = () => {\n const { follower } = this.props;\n\n if (follower.status === followerStatus.READY) {\n return 'primaryOutline';\n }\n return 'default';\n };\n\n renderSubmitButtonContent = () => {\n switch (this.props.follower.status) {\n case followerStatus.SUBMITTING:\n return \n
\n \n
\n \n {I18n.t('strava.activities.tagging.feature_ed.title', {\n activity_type: I18n.t(\n `strava.activities.types_v2.${props.activityType}`\n )\n })}\n
\n\n {I18n.t('strava.activities.tagging.feature_ed.description')}\n
\n\n {I18n.t('strava.activities.tagging.feature_ed.privacy')}\n
\n\n \n {I18n.t('strava.activities.tagging.feature_ed.cta')}\n \n
\n \n
\n );\n };\n\n render() {\n const { follower, activityId } = this.props;\n const { athleteId, name, location, avatarUrl } = follower;\n\n return (\n \n \n Sorry, we were unable to add {follower.name}. Try again later.\n
\n\n
\n {follower.status === followerStatus.ERROR && this.renderErrorMessage()}\n \n
\n \n
\n {name}
\n {location}
\n \n \n {this.renderSubmitButtonContent()}\n \n
\n \n
\n );\n\n renderErrorState = () => (\n // TODO: Get design feedback and translations here.\n \n An error has occured fetching your followers, please try again later.\n
\n );\n\n renderEmptyState = () => (\n \n \n {I18n.t('strava.activities.tagging.invite_module.find_friend_cta')}\n \n
\n );\n\n renderFollowersList = () => (\n {I18n.t('strava.activities.tagging.invite_module.empty_state')}
\n- \n {this.props.followers.map((follower) => (\n
\n
\n );\n }\n}\n\nFollowersList.propTypes = {\n followers: PropTypes.arrayOf(PropTypes.object).isRequired,\n activityId: PropTypes.number.isRequired,\n handleInvite: PropTypes.func.isRequired,\n handleFetchFollowers: PropTypes.func.isRequired,\n loading: PropTypes.bool.isRequired,\n error: PropTypes.string.isRequired,\n findFriendsUrl: PropTypes.string.isRequired\n};\n\nfunction mapStateToProps(state) {\n return {\n followers: state.followers,\n activityId: state.activityId,\n loading: state.loading,\n error: state.error,\n findFriendsUrl: state.findFriendsUrl\n };\n}\n\nexport default connect(\n mapStateToProps,\n {\n handleInvite: invite,\n handleFetchFollowers: fetchFollowers\n }\n)(FollowersList);\n","// extracted by mini-css-extract-plugin\nexport default {\"link-copy\":\"TaggingLinkCopy--link-copy--jMGs3\",\"linkCopy\":\"TaggingLinkCopy--link-copy--jMGs3\",\"copy-base\":\"TaggingLinkCopy--copy-base--PhAKO\",\"copyBase\":\"TaggingLinkCopy--copy-base--PhAKO\",\"copy-text\":\"TaggingLinkCopy--copy-text--wWcrM\",\"copyText\":\"TaggingLinkCopy--copy-text--wWcrM\",\"copy-button\":\"TaggingLinkCopy--copy-button--1f8PY\",\"copyButton\":\"TaggingLinkCopy--copy-button--1f8PY\",\"copied-to-clipboard\":\"TaggingLinkCopy--copied-to-clipboard--c1x4F\",\"copiedToClipboard\":\"TaggingLinkCopy--copied-to-clipboard--c1x4F\",\"copied\":\"TaggingLinkCopy--copied--Ih+bu\",\"wrapper\":\"TaggingLinkCopy--wrapper--9ng6h\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@strava/ui/Button';\n\nimport I18n from 'utils/I18n';\nimport styles from './styles.scss';\n\nclass TaggingLinkCopy extends React.Component {\n state = {\n showCopiedText: false,\n branchLink: this.props.branchLinkData.desktopUrl\n };\n\n componentDidMount() {\n const {\n branchLinkData,\n activityId,\n activityType,\n athleteId,\n athleteName\n } = this.props;\n const { signature, desktopUrl, inviterAvatarUrl } = branchLinkData;\n\n const data = {\n channel: 'web',\n feature: 'activity-tagging',\n data: {\n '$desktop_url': desktopUrl, // eslint-disable-line\n strava_deeplink_url: `strava://activities/${activityId}?activity_tag=true&sig=${signature}`,\n inviter_athlete_id: athleteId.toString(),\n inviter_first_name: athleteName,\n inviter_avatar_url: inviterAvatarUrl,\n inviter_tagged_activity_id: activityId.toString(),\n inviter_activity_type_key: activityType,\n inviter_activity_signature: signature,\n redirect_after_signup: 'true'\n }\n };\n try {\n window.Strava.BranchIO.createLink(data).done((link) => {\n this.setState({ branchLink: link });\n });\n } catch (err) {\n console.warn(err); // eslint-disable-line\n }\n }\n\n componentWillUnmount() {\n if (this.hideCopiedTextTimer) {\n clearTimeout(this.hideCopiedTextTimer);\n this.hideCopiedTextTimer = null;\n }\n }\n\n onInputClick = () => {\n this.input.select();\n };\n\n copyToClipboard = () => {\n this.input.select();\n // This is the actual code that copies selected text to clipboard\n const successful = document.execCommand('copy');\n if (successful) {\n this.setState(() => ({ showCopiedText: true }));\n this.hideCopiedText();\n }\n };\n\n hideCopiedText = () => {\n this.hideCopiedTextTimer = setTimeout(() => {\n this.setState(() => ({ showCopiedText: false }));\n }, 5000);\n };\n\n render() {\n return (\n \n
\n {listContent}
\n \n \n
\n \n );\n }\n}\n\nTaggingLinkCopy.propTypes = {\n branchLinkData: PropTypes.shape({\n signature: PropTypes.string.isRequired,\n desktopUrl: PropTypes.string.isRequired,\n inviterAvatarUrl: PropTypes.string.isRequired\n }).isRequired,\n activityId: PropTypes.number.isRequired,\n activityType: PropTypes.string.isRequired,\n athleteName: PropTypes.string.isRequired,\n athleteId: PropTypes.number.isRequired\n};\n\nexport default TaggingLinkCopy;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport I18n from 'utils/I18n';\nimport styles from './styles.scss';\nimport FollowersList from '../FollowersList';\nimport TaggingLinkCopy from '../TaggingLinkCopy';\n\nconst TaggingInviteContainer = (props) => (\n \n {\n this.input = el;\n }}\n className={styles.copyText}\n type=\"text\"\n value={this.state.branchLink}\n onClick={this.onInputClick}\n readOnly={true}\n />\n \n {I18n.t('strava.activities.tagging.invite_module.copy_cta')}\n \n
\n\n \n \n \n \n {I18n.t('strava.activities.tagging.invite_module.copied')}\n
\n \n
\n);\n\nTaggingInviteContainer.propTypes = {\n activityId: PropTypes.number.isRequired,\n activityType: PropTypes.string.isRequired,\n athleteId: PropTypes.number.isRequired,\n athleteName: PropTypes.string.isRequired,\n branchLinkData: PropTypes.shape({}).isRequired\n};\n\nexport default TaggingInviteContainer;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport Button from '@strava/ui/Button';\n\nimport I18n from 'utils/I18n';\nimport Modal from 'components/shared/Modal';\n\nimport styles from './styles.scss';\nimport { toggleModal, hideInterstitial } from '../../actions';\nimport TaggingInterstitial from '../TaggingInterstitial';\nimport TaggingInviteContainer from '../TaggingInviteContainer';\n\nexport class Tagging extends React.Component {\n openModal = () => {\n this.props.handleToggleModal();\n };\n\n closeModal = () => {\n this.props.handleToggleModal();\n };\n\n addOthersBtn = () => (\n \n {I18n.t('strava.activities.tagging.invite_module.title')}\n
\n\n
\n \n
\n \n {I18n.t('strava.activities.tagging.invite_module.not_on_strava')}\n
\n\n {I18n.t('strava.activities.tagging.invite_module.share_activity')}\n
\n\n
\n \n );\n };\n\n render() {\n return (\n {inviteContent}
\n \n {this.props.groupActivity ? this.addOthersBtn() : this.someoneWithYou()}\n {this.renderInviteList()}\n
\n );\n }\n}\n\nTagging.propTypes = {\n groupActivity: PropTypes.bool,\n activityId: PropTypes.number.isRequired,\n activityType: PropTypes.string.isRequired,\n athleteId: PropTypes.number.isRequired,\n athleteName: PropTypes.string.isRequired,\n findFriendsUrl: PropTypes.string.isRequired,\n branchLinkData: PropTypes.shape({}).isRequired,\n isModalOpen: PropTypes.bool,\n handleToggleModal: PropTypes.func.isRequired,\n showInterstitial: PropTypes.bool,\n handleHideInterstitial: PropTypes.func.isRequired\n};\n\nTagging.defaultProps = {\n groupActivity: false,\n isModalOpen: false,\n showInterstitial: true\n};\n\nfunction mapStateToProps(state) {\n return {\n groupActivity: state.groupActivity,\n activityId: state.activityId,\n activityType: state.activityType,\n athleteId: state.activityId,\n athleteName: state.athleteName,\n findFriendsUrl: state.findFriendsUrl,\n branchLinkData: state.branchLinkData,\n isModalOpen: state.isModalOpen,\n showInterstitial: state.showInterstitial\n };\n}\n\nexport default connect(\n mapStateToProps,\n {\n handleToggleModal: toggleModal,\n handleHideInterstitial: hideInterstitial\n }\n)(Tagging);\n","import { types } from './actions';\nimport { followerStatus } from './const';\n\nfunction prepareFollowerItem(follower) {\n return {\n ...follower,\n status: followerStatus.READY\n };\n}\n\nfunction updateFollowerStatus(state, action, status) {\n return state.followers.map((follower) => {\n if (follower.athleteId === action.athleteId) {\n return {\n ...follower,\n status\n };\n }\n return follower;\n });\n}\n\nexport default function reducer(state = {}, action) {\n switch (action.type) {\n case types.TOGGLE_MODAL:\n return {\n ...state,\n isModalOpen: !state.isModalOpen\n };\n case types.HIDE_INTERSTITIAL:\n return {\n ...state,\n showInterstitial: false\n };\n case types.INVITE_SUBMITTING:\n return {\n ...state,\n followers: updateFollowerStatus(\n state,\n action,\n followerStatus.SUBMITTING\n )\n };\n case types.INVITE_COMPLETE:\n return {\n ...state,\n followers: updateFollowerStatus(state, action, followerStatus.COMPLETE)\n };\n case types.INVITE_ERROR:\n return {\n ...state,\n followers: updateFollowerStatus(state, action, followerStatus.ERROR)\n };\n case types.FOLLOWERS_LOADING:\n return {\n ...state,\n loading: true,\n error: ''\n };\n case types.FOLLOWERS_COMPLETE:\n return {\n ...state,\n followers: action.followers.map(prepareFollowerItem),\n loading: false,\n error: ''\n };\n case types.FOLLOWERS_ERROR:\n return {\n ...state,\n loading: true,\n error: action.error\n };\n default:\n return state;\n }\n}\n","import React from 'react';\nimport { createStore, applyMiddleware } from 'redux';\nimport { Provider } from 'react-redux';\nimport thunk from 'redux-thunk';\n\nimport Tagging from './components/Tagging';\nimport reducer from './reducers';\n\nclass ActivityTagging extends React.Component {\n store = createStore(\n reducer,\n {\n ...this.props,\n followers: [],\n isModalOpen: false,\n showInterstitial: true,\n loading: false,\n error: ''\n },\n applyMiddleware(thunk)\n );\n\n render() {\n return (\n \n {\n setStart(values[0]);\n setEnd(values[1]);\n }}\n values={[start, end]}\n className={styles.slider}\n >\n \n {({ tracks, getTrackProps }) => (\n \n\n {/*\n whe need to use Rail component here so that we can add getRailProps\n which will add mouse interections\n */}\n \n {({ getRailProps }) => (\n \n\n \n {({ handles, getHandleProps }) => (\n \n \n
\n\n \n \n
\n\n \n {tracks.map(({ id, source, target }) => (\n
\n )}\n \n \n
\n )}\n \n
\n )}\n \n
\n \n );\n};\n\nRangeSlider.defaultProps = {\n step: 1,\n onUpdate: () => {}\n};\n\nRangeSlider.propTypes = {\n step: PropTypes.number,\n scopeTo: PropTypes.arrayOf(Number).isRequired,\n domain: PropTypes.arrayOf(Number).isRequired,\n onUpdate: PropTypes.func\n};\n\nexport default RangeSlider;\n","import createNetworkingClient from 'utils/networking-client';\n\nexport async function fetchStreams({ id }) {\n const response = await createNetworkingClient({ timeout: 30 * 1000 }).get(\n `/activities/${id}/streams`,\n {\n params: {\n stream_types: ['latlng', 'altitude', 'distance']\n }\n }\n );\n\n if (!response || response.status !== 200) {\n throw new Error('Request failed');\n }\n\n return response.data;\n}\nexport default {\n fetchStreams\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport I18n from 'utils/I18n';\nimport ElevationChart from '@strava/ui/ElevationChart';\nimport RangeSelectMap from 'components/RangeSelectMap';\nimport RangeSlider from 'components/RangeSlider';\n\n// Stylesheets\nimport { fetchStreams } from './api';\n\nclass Truncate extends React.Component {\n state = {\n activityLatlng: [],\n cropLatlng: [],\n scopeTo: null,\n altitude: [],\n distance: []\n };\n\n async componentDidMount() {\n const { activityId, startIndex, endIndex } = this.props;\n\n try {\n const { altitude, distance, latlng } = await fetchStreams({\n id: activityId\n });\n\n const scopeTo = [\n startIndex === null ? 0 : startIndex,\n endIndex === null ? parseInt(latlng.length / 2, 10) : endIndex\n ];\n\n this.setState({\n scopeTo,\n activityLatlng: latlng,\n cropLatlng: latlng.slice(scopeTo[0], scopeTo[1] + 1),\n altitude,\n distance\n });\n } catch (error) {\n // TODO: show some error to the user\n console.error(error);\n }\n }\n\n handleRangeSliderChange = (values) => {\n const { activityLatlng } = this.state;\n const [startIndex, endIndex] = values;\n\n document.getElementById('start-index').value = startIndex;\n document.getElementById('end-index').value = endIndex;\n\n this.setState({\n scopeTo: values,\n cropLatlng: activityLatlng.slice(startIndex, endIndex + 1)\n });\n };\n\n render() {\n const { unitSystem, privacyZones } = this.props;\n const {\n scopeTo,\n activityLatlng,\n cropLatlng,\n altitude,\n distance\n } = this.state;\n\n if (activityLatlng.length === 0) {\n return null;\n }\n\n return (\n <>\n \n setStart(getStartBackValue(start, 0, step))}\n disabled={start === domain[0]}\n >\n {I18n.t('strava.ui.slider.back')}\n \n setStart(getStartForwardValue(start, end, step))}\n >\n {I18n.t('strava.ui.slider.forward')}\n \n
\n \n {I18n.t('strava.ui.slider.move_start')}\n
\n \n setEnd(getEndForwardValue(end, domain[1], step))}\n disabled={end === domain[domain.length - 1]}\n >\n {I18n.t('strava.ui.slider.forward')}\n \n
\n \n {I18n.t('strava.ui.slider.move_end')}\n
\n \n \n
\n \n
\n \n
\n \n );\n }\n}\n//\n\nTruncate.defaultProps = {\n privacyZones: [],\n startIndex: null,\n endIndex: null\n};\n\nTruncate.propTypes = {\n activityId: PropTypes.number.isRequired,\n unitSystem: PropTypes.string.isRequired,\n privacyZones: PropTypes.arrayOf(\n PropTypes.shape({\n position: PropTypes.shape({\n lat: PropTypes.number.isRequired,\n lng: PropTypes.number.isRequired\n }).isRequired,\n radius: PropTypes.number.isRequired\n })\n ),\n startIndex: PropTypes.number,\n endIndex: PropTypes.number\n};\n\nexport default Truncate;\n","// extracted by mini-css-extract-plugin\nexport default {\"spinner-container\":\"RelativeEffort--spinner-container--3CghA\",\"spinnerContainer\":\"RelativeEffort--spinner-container--3CghA\",\"container\":\"RelativeEffort--container--6dZ9v\"};","// extracted by mini-css-extract-plugin\nexport default {\"base\":\"Disclaimer--base--+0euY\",\"fade-out\":\"Disclaimer--fade-out--k6pf-\",\"fadeOut\":\"Disclaimer--fade-out--k6pf-\",\"dialog\":\"Disclaimer--dialog--ZIQx5\",\"content\":\"Disclaimer--content--p-gJ6\",\"cta\":\"Disclaimer--cta--nOiWQ\"};","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport I18n from 'utils/I18n';\nimport Button from '@strava/ui/Button';\n\nimport styles from './styles.scss';\n\nconst I18nPrefix = 'strava.relative_effort.disclaimer';\n\nfunction Disclaimer({ handleContinueClick }) {\n const [fadeOut, setFadeOut] = useState(false);\n\n return (\n \n
\n );\n}\n\nDisclaimer.propTypes = {\n handleContinueClick: PropTypes.func.isRequired\n};\n\nexport default Disclaimer;\n","const COLORS = {\n NO_ZONE: {\n PRIMARY: 'rgba(190, 190, 190, 1)',\n SECONDARY: 'rgba(190, 190, 190, 0.3)'\n },\n LOW_ZONE: {\n PRIMARY: 'rgba(174, 157, 255, 1)',\n SECONDARY: 'rgba(174, 157, 255, 0.3)'\n },\n OPTIMUM_ZONE: {\n PRIMARY: 'rgba(176, 60, 255, 1)',\n SECONDARY: 'rgba(176, 60, 255, 0.3)'\n },\n HIGH_ZONE: {\n PRIMARY: 'rgba(189, 12, 15, 1)',\n SECONDARY: 'rgba(189, 12, 15, 0.3)'\n }\n};\n\nconst ZONES = {\n NONE: 'NONE',\n LOW: 'LOW',\n OPTIMUM: 'OPTIMUM',\n STEADY_PROGRESS: 'STEADY_PROGRESS',\n HIGH: 'HIGH',\n VERY_HIGH: 'VERY_HIGH'\n};\n\nconst TRAINING_IMPACT = {\n LOWER_RATIO: 0.33,\n MID_RATIO: 0.5,\n UPPER_RATIO: 0.66\n};\n\nexport const CONSTS = {\n COLORS,\n ZONES,\n TRAINING_IMPACT\n};\n\n/**\n * @param {Number} value RE score\n * @param {Array} buckets RE buckets\n * @return {String} zone\n */\nexport function getZone(value, buckets) {\n switch (true) {\n case value === 0:\n return ZONES.NONE;\n case value < buckets[0]:\n return ZONES.LOW;\n case buckets[0] <= value && value < buckets[1]:\n return ZONES.OPTIMUM;\n case buckets[1] <= value && value < buckets[2]:\n return ZONES.STEADY_PROGRESS;\n case buckets[2] <= value && value < buckets[3]:\n return ZONES.HIGH;\n case buckets[3] <= value:\n return ZONES.VERY_HIGH;\n default:\n return ZONES.NONE;\n }\n}\n\n/**\n * @param {Number} value RE score\n * @param {Array} buckets RE buckets\n * @return {String} rgba color\n */\nexport function getPrimaryColor(value, buckets) {\n const zone = getZone(value, buckets);\n\n switch (zone) {\n case ZONES.NONE:\n return COLORS.NO_ZONE.PRIMARY;\n\n case ZONES.LOW:\n return COLORS.LOW_ZONE.PRIMARY;\n\n case ZONES.OPTIMUM:\n case ZONES.STEADY_PROGRESS:\n return COLORS.OPTIMUM_ZONE.PRIMARY;\n\n case ZONES.HIGH:\n case ZONES.VERY_HIGH:\n return COLORS.HIGH_ZONE.PRIMARY;\n\n default:\n return '';\n }\n}\n\n/**\n * @param {Number} value RE score\n * @param {Array} buckets RE buckets\n * @return {String} rgba color\n */\nexport function getSecondaryColor(value, buckets) {\n const zone = getZone(value, buckets);\n\n switch (zone) {\n case ZONES.NONE:\n return COLORS.NO_ZONE.SECONDARY;\n\n case ZONES.LOW:\n return COLORS.LOW_ZONE.SECONDARY;\n\n case ZONES.OPTIMUM:\n case ZONES.STEADY_PROGRESS:\n return COLORS.OPTIMUM_ZONE.SECONDARY;\n\n case ZONES.HIGH:\n case ZONES.VERY_HIGH:\n return COLORS.HIGH_ZONE.SECONDARY;\n\n default:\n return '';\n }\n}\n\n/**\n * @param {Number} ratio float number between 0.0 and 1.0\n * @return {String} rgba color\n */\nexport function getTrainingImpactColor(ratio) {\n let color = COLORS.LOW_ZONE;\n\n if (ratio < TRAINING_IMPACT.LOWER_RATIO) {\n color = COLORS.LOW_ZONE.PRIMARY;\n } else if (ratio < TRAINING_IMPACT.UPPER_RATIO) {\n color = COLORS.OPTIMUM_ZONE.PRIMARY;\n } else {\n color = COLORS.HIGH_ZONE.PRIMARY;\n }\n\n return color;\n}\n\n/**\n * Return Monday for a given year and ISO 8601 calendar week (where a week number\n * is counted based on the Thursday of that week). This matches the Ruby cweek\n * implementation.\n * @param {Number} year\n * @param {Number} week\n * @return {Date}\n */\nexport function getDateFromYearWeek(year, week) {\n const simple = new Date(year, 0, 1 + (week - 1) * 7);\n const dow = simple.getDay();\n const ISOweekStart = simple;\n if (dow <= 4) {\n ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);\n } else {\n ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());\n }\n\n return ISOweekStart;\n}\n\n/**\n * Returns first day of a week for a give date\n * @param {Date} date\n * @return {Date}\n */\nexport function getFirstDayOfWeekFromDate(date) {\n return date.getDate() - date.getDay();\n}\n\n/**\n * Check if date is current week\n * @param {Date} week\n * @return {Bool}\n */\nexport function isCurrentWeek(week) {\n const now = new Date();\n now.setHours(0, 0, 0, 0);\n\n const firstDayOfWeek = getFirstDayOfWeekFromDate(now);\n const monday = new Date(now.setDate(firstDayOfWeek + 1));\n const sunday = new Date(now.setDate(firstDayOfWeek + 7));\n\n return monday <= week && week <= sunday;\n}\n\nexport default {\n CONSTS,\n getZone,\n getPrimaryColor,\n getSecondaryColor,\n getTrainingImpactColor,\n getDateFromYearWeek,\n getFirstDayOfWeekFromDate,\n isCurrentWeek\n};\n","// extracted by mini-css-extract-plugin\nexport default {\"base\":\"ActivitySummary--base--gKFJA\",\"title\":\"ActivitySummary--title--CDBz+\",\"info-icon\":\"ActivitySummary--info-icon---7mzk\",\"infoIcon\":\"ActivitySummary--info-icon---7mzk\",\"bucket\":\"ActivitySummary--bucket--1J0S6\",\"impact\":\"ActivitySummary--impact--QUNSY\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport I18n from 'utils/I18n';\nimport { CONSTS, getTrainingImpactColor } from 'utils/relative-effort';\n\nimport styles from './styles.scss';\n\nexport const I18nPrefix = 'strava.relative_effort';\n\nfunction getTrainingImpactText(trendingRatio) {\n let textKey = 'low';\n\n if (trendingRatio < CONSTS.TRAINING_IMPACT.LOWER_RATIO) {\n textKey = 'low';\n } else if (trendingRatio < CONSTS.TRAINING_IMPACT.UPPER_RATIO) {\n textKey = 'moderate';\n } else {\n textKey = 'high';\n }\n\n return I18n.t(`${I18nPrefix}.impact.${textKey}`);\n}\n\nconst ActivitySummary = ({ trendingRatio, summary }) => {\n const trainingImpactColor = getTrainingImpactColor(trendingRatio);\n\n return (\n \n
\n \n
\n \n {I18n.t(`${I18nPrefix}.title`)}\n
\n{I18n.t(`${I18nPrefix}.body`)}
\n\n {\n if (fadeOut) {\n return;\n }\n setFadeOut(true);\n setTimeout(() => handleContinueClick(), 200);\n }}\n >\n {I18n.t(`${I18nPrefix}.cta`)}\n \n
\n \n \n {I18n.t(`${I18nPrefix}.title`)}\n
\n\n {summary && (\n <>\n
\n );\n};\n\nActivitySummary.defaultProps = {\n summary: null\n};\n\nActivitySummary.propTypes = {\n trendingRatio: PropTypes.number.isRequired,\n summary: PropTypes.shape({\n score: PropTypes.number.isRequired,\n label: PropTypes.string\n })\n};\n\nexport default ActivitySummary;\n","// extracted by mini-css-extract-plugin\nexport default {\"base\":\"WeeklySummary--base--YQgHZ\",\"title\":\"WeeklySummary--title--Tcbes\",\"week-chart\":\"WeeklySummary--week-chart--uxKmw\",\"weekChart\":\"WeeklySummary--week-chart--uxKmw\",\"week-details\":\"WeeklySummary--week-details--7Fo3D\",\"weekDetails\":\"WeeklySummary--week-details--7Fo3D\",\"week-insight\":\"WeeklySummary--week-insight--7Xvc7\",\"weekInsight\":\"WeeklySummary--week-insight--7Xvc7\",\"weekly-graph\":\"WeeklySummary--weekly-graph--YXffH\",\"weeklyGraph\":\"WeeklySummary--weekly-graph--YXffH\",\"divider\":\"WeeklySummary--divider--AlY-B\"};","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"WeekInsight--container--gVWGA\",\"date-range\":\"WeekInsight--date-range--O8aWx\",\"dateRange\":\"WeekInsight--date-range--O8aWx\",\"cumulative-score\":\"WeekInsight--cumulative-score--qezwF\",\"cumulativeScore\":\"WeekInsight--cumulative-score--qezwF\",\"title\":\"WeekInsight--title--CitJN\",\"description\":\"WeekInsight--description--V1GNG\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Cldr from 'utils/Cldr';\nimport I18n from 'utils/I18n';\nimport reUtils, {\n CONSTS,\n getZone,\n getPrimaryColor,\n getDateFromYearWeek,\n getFirstDayOfWeekFromDate\n} from 'utils/relative-effort';\n\nimport styles from './styles.scss';\n\nexport const I18nPrefix = 'strava.relative_effort.insight_week';\n\nclass WeekInsight extends React.Component {\n getTitleText = (isCurrentWeek) => {\n const { cumulativeScore, buckets } = this.props;\n const zone = getZone(cumulativeScore, buckets);\n const titles = `${I18nPrefix}.${isCurrentWeek ? 'current' : 'past'}.titles`;\n\n switch (zone) {\n case CONSTS.ZONES.NONE:\n return I18n.t(`${titles}.none`);\n case CONSTS.ZONES.LOW:\n return I18n.t(`${titles}.low`);\n case CONSTS.ZONES.OPTIMUM:\n return I18n.t(`${titles}.optimum`);\n case CONSTS.ZONES.STEADY_PROGRESS:\n return I18n.t(`${titles}.steady_progress`);\n case CONSTS.ZONES.HIGH:\n return I18n.t(`${titles}.high`);\n case CONSTS.ZONES.VERY_HIGH:\n return I18n.t(`${titles}.very_high`);\n default:\n return '';\n }\n };\n\n getDescriptionText = (isCurrentWeek) => {\n const { cumulativeScore, buckets } = this.props;\n const zone = getZone(cumulativeScore, buckets);\n if (isCurrentWeek) {\n const descriptions = `${I18nPrefix}.current.descriptions`;\n switch (zone) {\n case CONSTS.ZONES.NONE:\n return I18n.t(`${descriptions}.none`);\n case CONSTS.ZONES.LOW:\n return I18n.t(`${descriptions}.low`, {\n value: parseInt(buckets[0], 10)\n });\n case CONSTS.ZONES.OPTIMUM:\n return I18n.t(`${descriptions}.optimum`);\n case CONSTS.ZONES.STEADY_PROGRESS:\n return I18n.t(`${descriptions}.steady_progress`, {\n value: parseInt(buckets[2] - cumulativeScore, 10)\n });\n case CONSTS.ZONES.HIGH:\n return I18n.t(`${descriptions}.high`);\n case CONSTS.ZONES.VERY_HIGH:\n return I18n.t(`${descriptions}.very_high`);\n default:\n return '';\n }\n } else {\n const descriptions = `${I18nPrefix}.past.descriptions`;\n switch (zone) {\n case CONSTS.ZONES.NONE:\n return I18n.t(`${descriptions}.none`);\n case CONSTS.ZONES.LOW:\n return I18n.t(`${descriptions}.low_v2`, {\n value: parseInt(buckets[0], 10)\n });\n case CONSTS.ZONES.OPTIMUM:\n return I18n.t(`${descriptions}.optimum_v2`);\n case CONSTS.ZONES.STEADY_PROGRESS:\n return I18n.t(`${descriptions}.steady_progress_v2`, {\n value: parseInt(buckets[2] - cumulativeScore, 10)\n });\n case CONSTS.ZONES.HIGH:\n return I18n.t(`${descriptions}.high_v2`);\n case CONSTS.ZONES.VERY_HIGH:\n return I18n.t(`${descriptions}.very_high_v2`);\n default:\n return '';\n }\n }\n };\n\n dateRange = (activityWeek) => {\n const date = new Date(activityWeek);\n const firstDayOfWeek = getFirstDayOfWeekFromDate(date);\n\n const monday = Cldr.formatDateTime(\n new Date(date.setDate(firstDayOfWeek + 1)),\n {\n format: 'additional',\n type: 'yMMMd'\n }\n );\n const sunday = Cldr.formatDateTime(\n new Date(date.setDate(firstDayOfWeek + 7)),\n {\n format: 'additional',\n type: 'yMMMd'\n }\n );\n\n return `${monday} - ${sunday}`;\n };\n\n render() {\n const { year, week, cumulativeScore, buckets } = this.props;\n const activityWeek = getDateFromYearWeek(year, week);\n const isCurrentWeek = reUtils.isCurrentWeek(activityWeek);\n const cumulativeScoreColor = getPrimaryColor(cumulativeScore, buckets);\n\n return (\n \n {I18n.t(`${I18nPrefix}.title`)}\n \n \n \n \n \n
\n\n {summary && (\n <>\n \n \n {summary.score}\n \n {summary.label && (\n \n {summary.label}\n \n )}\n
\n\n \n {getTrainingImpactText(trendingRatio)}\n
\n \n )}\n \n \n {cumulativeScore}\n
\n \n {this.dateRange(activityWeek)}\n
\n \n {this.getTitleText(isCurrentWeek)}\n
\n \n {this.getDescriptionText(isCurrentWeek)}\n
\n \n );\n }\n}\n\nWeekInsight.propTypes = {\n year: PropTypes.number.isRequired,\n week: PropTypes.number.isRequired,\n cumulativeScore: PropTypes.number.isRequired,\n buckets: PropTypes.arrayOf(PropTypes.number).isRequired\n};\n\nexport default WeekInsight;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { XAxis, BarChart, Bar } from 'recharts';\nimport Cldr from 'utils/Cldr';\n\nconst weekdayNames = (key) => {\n return Cldr.calendar.weekdays({\n format: 'stand-alone',\n names_form: 'narrow'\n })[key];\n};\n\nconst WEEKDAY_KEYS = {\n 0: 'mon',\n 1: 'tue',\n 2: 'wed',\n 3: 'thu',\n 4: 'fri',\n 5: 'sat',\n 6: 'sun'\n};\n\nconst WeekChart = ({ dailyScores }) => {\n const tickTextStyle = {\n fill: '#6b6b76',\n fontSize: '11px'\n };\n\n const barData = dailyScores.map((v, i) => ({\n x: v,\n w: weekdayNames(WEEKDAY_KEYS[i])\n }));\n\n return (\n | \n | \n \n {formatDate(activity.start_date_local)}\n | \n\n {currentActivityId === activity.id.toString() ? (\n activity.name\n ) : (\n {activity.name}\n )}\n {activity.private && (\n \n | \n \n {formatMovingTime(activity.moving_time)}\n | \n\n | \n
\n
\n );\n }\n}\n\nWeeklySummary.propTypes = {\n currentActivityId: PropTypes.string.isRequired,\n weeklyScores: PropTypes.arrayOf(PropTypes.object).isRequired,\n selectedWeekIndex: PropTypes.number.isRequired\n};\n\nexport default WeeklySummary;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport createNetworkingClient from 'utils/networking-client';\nimport Spinner from '@strava/ui/Spinner';\n\nimport styles from './styles.scss';\nimport Disclaimer from './Disclaimer';\nimport ActivitySummary from './ActivitySummary';\nimport WeeklySummary from './WeeklySummary';\n\nclass TrainingImpact extends React.Component {\n state = {\n isLoading: true,\n disclaimerAgreed: false,\n weeklyScores: [],\n selectedWeekIndex: -1,\n trendingRatio: 0,\n activitySummary: null\n };\n\n componentDidMount() {\n const { athleteId, activityId } = this.props;\n\n createNetworkingClient()\n .get(`/athletes/${athleteId}/relative_effort`, {\n params: {\n activity_id: activityId\n }\n })\n .then((response) => {\n if (response && response.status === 200) {\n this.handleDataFetchComplete(response.data);\n } else {\n // TODO: show some error to the user\n }\n })\n .catch(() => {\n // TODO: show some error to the user\n });\n }\n\n handleDataFetchComplete = (data) => {\n const weeklyScores = data.weekly_scores.reverse();\n const selectedWeekIndex =\n weeklyScores.length - data.selected_week_index - 1;\n\n const activitySummary = data.bucket_detail\n ? {\n score: data.bucket_detail.relative_effort,\n label: data.bucket_detail.label ? data.bucket_detail.label : null\n }\n : null;\n\n this.setState({\n isLoading: false,\n disclaimerAgreed: data.disclaimer_agreed,\n weeklyScores,\n selectedWeekIndex,\n trendingRatio: data.trending_ratio,\n activitySummary\n });\n };\n\n handleDisclaimerContinueClick = () => {\n const { athleteId } = this.props;\n\n createNetworkingClient().post(\n `/athletes/${athleteId}/relative_effort_disclaimer_agreed`\n );\n\n this.setState({ disclaimerAgreed: true });\n };\n\n render() {\n const {\n isLoading,\n disclaimerAgreed,\n weeklyScores,\n selectedWeekIndex,\n trendingRatio,\n activitySummary\n } = this.state;\n const { activityId } = this.props;\n const showDisclaimer = !disclaimerAgreed;\n\n if (isLoading) {\n return (\n \n
\n\n \n\n \n
\n \n {I18n.t(`${I18nPrefix}.weekly_effort`)}\n
\n\n
\n \n
\n \n
\n\n {selectedWeek.activities.length > 0 && (\n <>\n \n \n
\n );\n }\n\n return (\n \n {showDisclaimer && (\n
\n );\n }\n}\n\nTrainingImpact.propTypes = {\n athleteId: PropTypes.number.isRequired,\n activityId: PropTypes.string.isRequired\n};\n\nexport default TrainingImpact;\n","// extracted by mini-css-extract-plugin\nexport default {\"placeholder-no-op-empty-nothing-here\":\"ExcludedEfforts--placeholder-no-op-empty-nothing-here--W1HBU\",\"placeholderNoOpEmptyNothingHere\":\"ExcludedEfforts--placeholder-no-op-empty-nothing-here--W1HBU\"};","// extracted by mini-css-extract-plugin\nexport default {\"overlay\":\"ExcludedSegmentEffortsModal--overlay--UZ1V5\",\"close-button\":\"ExcludedSegmentEffortsModal--close-button--yftv9\",\"closeButton\":\"ExcludedSegmentEffortsModal--close-button--yftv9\",\"excluded-efforts\":\"ExcludedSegmentEffortsModal--excluded-efforts---QO+E\",\"excludedEfforts\":\"ExcludedSegmentEffortsModal--excluded-efforts---QO+E\",\"ee-description\":\"ExcludedSegmentEffortsModal--ee-description--DcCJN\",\"eeDescription\":\"ExcludedSegmentEffortsModal--ee-description--DcCJN\",\"table-data-body\":\"ExcludedSegmentEffortsModal--table-data-body--138Ly\",\"tableDataBody\":\"ExcludedSegmentEffortsModal--table-data-body--138Ly\",\"table-body\":\"ExcludedSegmentEffortsModal--table-body--E1MDm\",\"tableBody\":\"ExcludedSegmentEffortsModal--table-body--E1MDm\",\"subtitle\":\"ExcludedSegmentEffortsModal--subtitle--LoIU4\"};","// extracted by mini-css-extract-plugin\nexport default {\"unit\":\"AbbrUnit--unit--zfiTg\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './styles.scss';\n\nconst AbbrUnit = ({ data }) => {\n return (\n <>\n {data.value}\n \n {data.unit.unit_short}\n \n \n );\n};\n\nAbbrUnit.propTypes = {\n data: PropTypes.shape({\n value: PropTypes.string,\n unit: PropTypes.shape({\n unit_long: PropTypes.string,\n unit_short: PropTypes.string\n })\n }).isRequired\n};\n\nexport default AbbrUnit;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport {\n ModalOverlay,\n ModalContent,\n ModalCloseButton,\n ModalTitle,\n ModalBody\n} from '@strava/ui/Modal';\nimport I18n from 'utils/I18n';\nimport { trackV2 } from 'utils/analytics';\n\nimport styles from './styles.scss';\n\nimport AbbrUnit from './components/AbbrUnit';\n\nconst ExcludedSegmentEffortsModal = ({\n entity,\n flaggedEfforts,\n speedUnit,\n isModalOpen,\n onDismiss\n}) => {\n const trackModalClick = () => {\n trackV2({\n action: 'click',\n element: 'learn_more',\n category: 'segments',\n page: 'excluded_efforts',\n properties: { source: `${entity}_detail` }\n });\n return true;\n };\n\n const modalContent = () => {\n return (\n <>\n \n {I18n.t(\n 'strava.labs.activities.segments_view.excluded_efforts.description1_v2'\n )}\n
\n\n {I18n.t_html(\n 'strava.labs.activities.segments_view.excluded_efforts.description2_html',\n {\n learn_more_path:\n 'https://support.strava.com/hc/articles/360061896712'\n },\n {\n onLinkClick: trackModalClick\n }\n )}\n
\n| {I18n.t('templates.activities.segments.table.name')} | \n{I18n.t('templates.activities.segments.table.time')} | \n {speedUnit && (\n\n {I18n.t(\n `templates.activities.segments.table.speed.${speedUnit}`\n )}\n | \n )}\n
|---|---|---|
| \n \n {entity === 'segment' && (\n \n \n {row.date}\n \n )}\n {entity === 'activity' && (\n\n {row.name}\n \n )}\n\n {`${I18n.t(\n 'strava.labs.activities.segments_view.excluded_efforts.subtitle'\n )} - `}{' '}\n | \n {row.elapsed_time} | \n\n | \n
\n
\n );\n\n const openModal = () => {\n setIsModalOpen(true);\n trackV2({\n action: 'click',\n element: 'excluded_efforts',\n category: 'activity_detail',\n page: 'activity_detail'\n });\n trackV2({\n action: 'screen_enter',\n category: 'segments',\n page: 'excluded_efforts'\n });\n };\n\n const closeModal = () => {\n setIsModalOpen(false);\n trackV2({\n action: 'screen_exit',\n category: 'segments',\n page: 'excluded_efforts'\n });\n };\n\n const button = (\n <>\n \n \n {I18n.t('templates.activities.edit.map_types.modal.title')}\n
\n {I18n.t('templates.activities.edit.map_types.modal.text_1')}
\n\n {I18n.t_html('templates.activities.edit.map_types.modal.text_2_html')}\n
\n \n );\n\n return\n {I18n.t(`templates.activities.edit.hide_stats.${modalStringKey}.title`)}\n
\n \n {I18n.t(`templates.activities.edit.hide_stats.${modalStringKey}.text_1`)}\n
\n\n {I18n.t(`templates.activities.edit.hide_stats.${modalStringKey}.text_2`)}\n
\n\n
\n );\n};\n\nMapControls.propTypes = {\n showCreateRoute: PropTypes.bool,\n activityId: PropTypes.number.isRequired,\n showGpxDownload: PropTypes.bool,\n showFullScreenToggle: PropTypes.bool,\n mapStyle: PropTypes.string.isRequired,\n handleMapStyleChange: PropTypes.func.isRequired,\n hasPrivacyZones: PropTypes.bool.isRequired\n};\n\nMapControls.defaultProps = {\n showCreateRoute: true,\n showGpxDownload: true,\n showFullScreenToggle: false\n};\n\nexport default MapControls;\n","// extracted by mini-css-extract-plugin\nexport default {\"map\":\"ActivityDetailsMap--map--gchax\",\"marker\":\"ActivityDetailsMap--marker--0sHXc\",\"rabbit-marker\":\"ActivityDetailsMap--rabbit-marker--1eruO\",\"rabbitMarker\":\"ActivityDetailsMap--rabbit-marker--1eruO\",\"photo-marker\":\"ActivityDetailsMap--photo-marker--WZoCF\",\"photoMarker\":\"ActivityDetailsMap--photo-marker--WZoCF\",\"photo-arrow\":\"ActivityDetailsMap--photo-arrow--wXhOL\",\"photoArrow\":\"ActivityDetailsMap--photo-arrow--wXhOL\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Polyline from '@strava/ui/Map/Polyline';\nimport { color } from '@strava/ui-tokens/js';\n\nconst PrivacyZonePolylines = ({\n polyline,\n privacyZoneFromStartIndex,\n privacyZoneFromEndIndex\n}) => {\n const privacyZonePolylineStyle = {\n lineColor: color.colorExtendedNeutralN2,\n outlineWidth: 5\n };\n\n return (\n <>\n \n {showCreateRoute && (\n \n \n option.value === mapStyle)}\n onChange={handleMapStyleChange}\n options={styleOptions}\n isSearchable={false}\n blurInputOnSelect={true}\n components={{\n DropdownIndicator\n }}\n styles={customDropdownStyles}\n />\n\n {showFullScreenToggle && (\n \n {isFullscreen ? (\n
\n\n {hasPrivacyZones && (\n \n
\n )}\n \n \n
\n \n {I18n.t(\n 'strava.maps.mapbox_gl.custom_control.route_visible_label'\n )}\n
\n \n \n
\n \n {I18n.t(\n 'strava.maps.mapbox_gl.custom_control.route_hidden_label'\n )}\n
\n \n
\n \n \n );\n};\n\nBaseModal.propTypes = {\n isOpen: PropTypes.bool,\n children: PropTypes.node.isRequired,\n onSubmit: PropTypes.func,\n onDismiss: PropTypes.func,\n isSaving: PropTypes.bool,\n hasChanges: PropTypes.bool,\n title: PropTypes.string.isRequired,\n buttonLabels: PropTypes.shape({\n saveText: PropTypes.string,\n isSavingText: PropTypes.string\n }).isRequired,\n hideSaveBtn: PropTypes.bool\n};\n\nBaseModal.defaultProps = {\n isOpen: false,\n onSubmit: () => {},\n onDismiss: () => {},\n isSaving: false,\n hasChanges: false,\n hideSaveBtn: false\n};\n\nexport default BaseModal;\n","export { default } from './BaseModal';\n","// extracted by mini-css-extract-plugin\nexport default {\"label\":\"ReportMediaModal--label--avF7v\",\"label-value\":\"ReportMediaModal--label-value--C15io\",\"labelValue\":\"ReportMediaModal--label-value--C15io\",\"label-example\":\"ReportMediaModal--label-example--9Eyf6\",\"labelExample\":\"ReportMediaModal--label-example--9Eyf6\",\"reported-photo-message\":\"ReportMediaModal--reported-photo-message--SutgK\",\"reportedPhotoMessage\":\"ReportMediaModal--reported-photo-message--SutgK\",\"eu-form\":\"ReportMediaModal--eu-form--pC0VJ\",\"euForm\":\"ReportMediaModal--eu-form--pC0VJ\"};","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Markup } from 'interweave';\n\nimport Radio from '@strava/ui/Radio';\nimport I18n from 'utils/I18n';\n\nimport BaseModal from '../BaseModal';\n\nimport styles from './styles.scss';\n\nconst ReportMediaModal = ({\n isOpen,\n isReported,\n isReporting,\n onDismiss,\n onSubmit\n}) => {\n const [selectedOption, setSelectedOption] = useState('');\n\n const optionInappropriate = 'inappropriate';\n const optionHarassment = 'harassment';\n const optionNoConsent = 'no_consent';\n\n const labelStyles = {\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center'\n };\n\n const handleOnDismiss = () => {\n setSelectedOption('');\n onDismiss();\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n onSubmit(selectedOption);\n setSelectedOption('');\n };\n\n return (\n \n \n
\n\n \n \n {title}\n \n
\n \n \n
\n \n {I18n.t('templates.feed.activity.report_photo.report_success_media')}\n
\n )}\n\n {!isReported && (\n <>\n \n \n {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n
\n );\n}\n\nVideo.defaultProps = {\n onReady: undefined,\n className: undefined\n};\n\nVideo.propTypes = {\n // Full list of options can be checked here:\n // https://docs.videojs.com/tutorial-options.html\n // The following is not a complete list so please\n // add more as needed!\n options: PropTypes.shape({\n autoplay: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.oneOf(['muted', 'play', 'any'])\n ]),\n sources: PropTypes.arrayOf(\n PropTypes.shape({\n src: PropTypes.string,\n type: PropTypes.string\n })\n ),\n controls: PropTypes.bool,\n muted: PropTypes.bool,\n loop: PropTypes.bool\n }).isRequired,\n onReady: PropTypes.func,\n className: PropTypes.string\n};\n\nexport default Video;\n","export { default } from './Video';\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Video from 'components/Video';\n\nfunction Poc({ media, onReady, options, className }) {\n const { video, large } = media;\n\n return (\n // TODO: Placeholder for enhanced tag?\n \n \n {currentPhoto.caption_escaped && (\n {\n openAddEditDescriptionModal();\n trackV2({\n category: 'media',\n page: 'lightbox',\n action: 'click',\n element: 'description',\n properties: {\n source: feedType,\n entity_id: entityId,\n entity_type: page,\n element_entity_type: currentPhoto.media_type,\n element_entity_id: currentPhoto.photo_id,\n cta_copy: addOrEditDescriptionLabel()\n }\n });\n }}\n type=\"button\"\n >\n {addOrEditDescriptionLabel()}\n \n )}\n
\n );\n }, [currentPhoto, video]);\n\n function handleVolumeEvent(player) {\n trackV2({\n category: 'media',\n page: player.isFullscreen() ? 'video_full_screen_player' : 'lightbox',\n action: 'click',\n properties: {\n source: feedType,\n source_type: 'activity',\n source_id: currentPhoto.activity_id,\n video_id: currentPhoto.photo_id,\n cta: player.muted() ? 'muted' : 'unmute'\n }\n });\n }\n\n function handleFullScreenEvent(player) {\n // Screen Enter / Exit\n trackV2({\n category: 'media',\n page: 'video_full_screen_player',\n action: player.isFullscreen() ? 'screen_enter' : 'screen_exit',\n properties: {\n source: feedType,\n source_type: 'activity',\n source_id: currentPhoto.activity_id,\n video_id: currentPhoto.photo_id\n }\n });\n\n // Click Event\n trackV2({\n category: 'media',\n page: 'lightbox',\n action: 'click',\n element: 'full_screen',\n properties: {\n source: feedType,\n source_type: 'activity',\n source_id: currentPhoto.activity_id,\n video_id: currentPhoto.photo_id,\n cta: player.isFullscreen()\n ? 'enter_full_screen_view'\n : 'exit_full_screen_view'\n }\n });\n }\n\n const isVideo = currentPhoto && currentPhoto.media_type === 2;\n const currentVideo = useCallback(\n isVideo ? (\n \n
\n )}\n {!currentPhoto.caption_escaped &&\n currentPhoto.viewing_athlete_id === currentPhoto.owner_id && (\n \n {currentPhoto.caption_escaped &&\n currentPhoto.viewing_athlete_id === currentPhoto.owner_id && (\n {\n openAddEditDescriptionModal();\n trackV2({\n category: 'media',\n page: 'lightbox',\n action: 'click',\n element: 'description',\n properties: {\n source: feedType,\n entity_id: entityId,\n entity_type: page,\n element_entity_type: currentPhoto.media_type,\n element_entity_id: currentPhoto.photo_id,\n cta_copy: addOrEditDescriptionLabel()\n }\n });\n }}\n variant=\"icon\"\n type=\"button\"\n >\n
\n \n \n setParams({ ...params, openEditDescriptionModal: false })\n }\n onSubmit={updateDescription}\n onTextChange={(descriptionText) => {\n params.updatedDescription = descriptionText;\n }}\n title={addOrEditDescriptionLabel()}\n analyticProps={{ currentPhoto, ...analyticProps }}\n />\n {\n setParams({ ...params, openReportMediaModal: false });\n toggleReportMediaButton();\n }}\n onSubmit={(reason) => {\n reportMedia(reason);\n }}\n />\n\n 1 ? nextPhoto.large : ''} // no next photo if activity only has one photo\n prevSrc={photoCount > 1 ? prevPhoto.large : ''} // no previous photo if activity only has one photo\n onCloseRequest={() => {\n onCloseRequest();\n const currentMedia = isVideo ? currentVideo : currentPhoto;\n // Lightbox Screen Exit Photo / Video\n trackV2({\n category: 'media',\n page: 'lightbox',\n properties: {\n source: feedType,\n entity_id: entityId,\n entity_type: page,\n element_entity_type: currentMedia.media_type,\n element_entity_id: currentMedia.photo_id\n },\n action: 'screen_exit',\n element: currentMedia.media_type === 1 ? 'photo' : 'video'\n });\n }}\n onMovePrevRequest={onMovePrevRequest}\n onMoveNextRequest={onMoveNextRequest}\n imageCaption={imageDescription()}\n imagePadding={80}\n reactModalStyle={lightboxCustomStyles}\n toolbarButtons={toolbarButtons()}\n enableZoom={!isVideo}\n />\n
\n )}\n \n );\n};\n\nStravaMediaLightbox.defaultProps = {\n onMount: () => {},\n analyticProps: undefined\n};\n\nStravaMediaLightbox.propTypes = {\n selectedPhotoIndex: PropTypes.number.isRequired,\n photoList: PropTypes.arrayOf(\n PropTypes.shape({\n large: PropTypes.string.isRequired,\n caption_escaped: PropTypes.string,\n photo_id: PropTypes.string.isRequired,\n viewing_athlete_id: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]),\n owner_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n editable: PropTypes.bool,\n media_type: PropTypes.number\n })\n ).isRequired,\n onMount: PropTypes.func,\n onCloseRequest: PropTypes.func.isRequired,\n analyticProps: PropTypes.shape({\n entityId: PropTypes.string,\n page: PropTypes.string,\n feedType: PropTypes.string\n })\n};\n\nexport default StravaMediaLightbox;\n","export { default } from './StravaMediaLightbox';\n","import React, { useState, useEffect, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport I18n from 'utils/I18n';\nimport Map, { MAP_STYLES } from '@strava/ui/Map';\nimport Polyline from '@strava/ui/Map/Polyline';\nimport Marker from '@strava/ui/Map/Marker';\nimport startMarkerSrc from '@strava/ui/Map/images/map-marker-start.png';\nimport endMarkerSrc from '@strava/ui/Map/images/map-marker-end.png';\nimport { getBoundsFromLatLng } from '@strava/ui/Map/mapboxGeometry';\nimport MapControls from './MapControls';\nimport styles from './ActivityDetailsMap.scss';\nimport PrivacyZonePolylines from './PrivacyZonePolylines';\nimport StravaMediaLightbox from '../StravaMediaLightbox';\n\nconst FALLBACK_LATLNG = [0, 0];\n\nconst ActivityDetailsMap = ({\n activityId,\n mapBounds,\n streamData,\n defaultHighlight,\n interactive,\n showCreateRoute,\n showGpxDownload,\n showFullScreenToggle,\n measurementUnits,\n mapCreatedCallback\n}) => {\n const polyline = streamData.latlng;\n\n // If we have privacy zone info from the stream request, we want to show those privacy zones on\n // the map via a polyline. Privacy stream data comes to the client in the form of an array of\n // numbers. The index of a given number corresponds to an index in the streamData.latLng array.\n // The values are either 0 or 2. 0 indicating that the corresponding latLng is not hidden, 2\n // indicating that it is. So we can look for the first index of a 0 value to figure out when the\n // privacy zones begin and end.\n const privacyZoneFromStartIndex = useMemo(\n () =>\n streamData.privacy ? streamData.privacy.findIndex((val) => val === 0) : 0,\n [streamData.privacy]\n );\n const privacyZoneFromEndIndex = useMemo(\n () =>\n streamData.privacy\n ? streamData.privacy.reverse().findIndex((val) => val === 0)\n : 0,\n [streamData.privacy]\n );\n\n const hasPrivacyZones =\n privacyZoneFromStartIndex > 0 || privacyZoneFromEndIndex > 0;\n\n // For some views, we want to highlight a section of the route by default, i.e. when viewing a map\n // for a segment within an activity\n const defaultHighlightLatLng = defaultHighlight\n ? [...streamData.latlng.slice(defaultHighlight[0], defaultHighlight[1])]\n : null;\n\n const [mapboxRef, setMapboxRef] = useState(null);\n const [currentMapBounds, setCurrentMapBounds] = useState(\n defaultHighlightLatLng ?? mapBounds\n );\n const [polylineHighlight, setPolylineHightlight] = useState(\n defaultHighlightLatLng ?? null\n );\n const [rabbitLatLng, setRabbitLatLng] = useState(null);\n const [mapStyle, setMapStyle] = useState('standard');\n const [mapStyleUrl, setMapStyleUrl] = useState(MAP_STYLES.standard);\n const [resizeMap, setResizeMap] = useState(false);\n const [mapPhotos, setMapPhotos] = useState(null);\n const [expandedPhoto, setExpandedPhoto] = useState(null);\n\n useEffect(() => {\n if (mapboxRef) {\n const bounds = getBoundsFromLatLng(currentMapBounds);\n\n mapboxRef.fitBounds(bounds, {\n linear: false,\n duration: 0,\n // TODO do we need to adjust padding at all?\n padding: 24\n });\n }\n }, [currentMapBounds, mapboxRef]);\n\n useEffect(() => {\n if (mapboxRef) {\n mapboxRef.resize();\n setResizeMap(false);\n }\n }, [mapboxRef, resizeMap]);\n\n const handleMapStyleChange = ({ value }) => {\n setMapStyle(value);\n setMapStyleUrl(MAP_STYLES[value]);\n };\n\n const onSetRabbitPosition = ({ detail }) => {\n const { index } = detail;\n const latLng = streamData.latlng[index];\n setRabbitLatLng(latLng);\n };\n\n const onHideRabbit = () => {\n setRabbitLatLng(null);\n };\n\n const onHighlightPolyline = ({ detail }) => {\n const { start, end } = detail;\n const latLng = [...streamData.latlng.slice(start, end)];\n setPolylineHightlight(latLng);\n };\n\n const onUnhighlightPolyline = () => {\n setPolylineHightlight(null);\n };\n\n const onHighlightPolylineAndCenterOnMap = ({ detail }) => {\n const { start, end } = detail;\n const latLng = [...streamData.latlng.slice(start, end)];\n\n setPolylineHightlight(latLng);\n setCurrentMapBounds(latLng);\n };\n\n const onResetMapBounds = () => {\n setCurrentMapBounds(mapBounds);\n };\n\n const onResizeMap = () => {\n setResizeMap(true);\n };\n\n const onRenderMapImages = ({ detail }) => {\n const { photos } = detail;\n setMapPhotos(photos);\n };\n\n useEffect(() => {\n document.addEventListener('SetRabbitPosition', onSetRabbitPosition);\n document.addEventListener('HideRabbit', onHideRabbit);\n\n document.addEventListener('HighlightPolyline', onHighlightPolyline);\n document.addEventListener('UnhighlightPolyline', onUnhighlightPolyline);\n document.addEventListener(\n 'HighlightPolyLineAndCenterOnMap',\n onHighlightPolylineAndCenterOnMap\n );\n document.addEventListener('ResetMapBounds', onResetMapBounds);\n document.addEventListener('ResizeMap', onResizeMap);\n\n document.addEventListener('RenderMapImages', onRenderMapImages);\n\n return function cleanup() {\n [\n 'SetRabbitPosition',\n 'HideRabbit',\n 'HighlightPolyline',\n 'UnhighlightPolyline',\n 'HighlightPolyLineAndCenterOnMap',\n 'ResetMapBounds',\n 'ResizeMap',\n 'RenderMapImages'\n ].forEach((listener) => {\n document.removeEventListener(listener);\n });\n };\n }, []);\n\n useEffect(() => {\n if (mapCreatedCallback) {\n mapCreatedCallback()();\n }\n }, [mapCreatedCallback]);\n\n return (\n \n \n \n
\n );\n};\n\nDetails.propTypes = {\n athlete: PropTypes.shape({\n name: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n location: PropTypes.string.isRequired,\n avatarUrl: PropTypes.string.isRequired,\n primarySport: PropTypes.string.isRequired,\n followersCount: PropTypes.number.isRequired,\n followingCount: PropTypes.number.isRequired,\n followUrl: PropTypes.string.isRequired\n }).isRequired\n};\nexport default Details;\n","// extracted by mini-css-extract-plugin\nexport default {\"image-wrapper\":\"ImageGrid--image-wrapper--I4J4Y\",\"imageWrapper\":\"ImageGrid--image-wrapper--I4J4Y\",\"container\":\"ImageGrid--container--tRkmf\",\"image\":\"ImageGrid--image--OFg5j\",\"images-1-up\":\"ImageGrid--images-1-up--y26vR\",\"images1Up\":\"ImageGrid--images-1-up--y26vR\",\"photo\":\"ImageGrid--photo--do-jO\",\"map\":\"ImageGrid--map--DOkdX\",\"images-2-up\":\"ImageGrid--images-2-up--AcSsY\",\"images2Up\":\"ImageGrid--images-2-up--AcSsY\",\"images-3-up\":\"ImageGrid--images-3-up--fVg80\",\"images3Up\":\"ImageGrid--images-3-up--fVg80\",\"images-4-up\":\"ImageGrid--images-4-up--9hfGg\",\"images4Up\":\"ImageGrid--images-4-up--9hfGg\",\"images-5-up\":\"ImageGrid--images-5-up--2tb2Z\",\"images5Up\":\"ImageGrid--images-5-up--2tb2Z\",\"images-6-up\":\"ImageGrid--images-6-up--jygU8\",\"images6Up\":\"ImageGrid--images-6-up--jygU8\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport I18n from 'utils/I18n';\nimport styles from './styles.scss';\n\nclass ImageGrid extends React.Component {\n hasImages() {\n return this.props.images.length > 0;\n }\n\n gridClassName() {\n return styles[`images${this.props.images.length}Up`];\n }\n\n mapSrc(image) {\n const { images } = this.props;\n // If image is primary image (map), check to see if it should render\n // as a square or the default ratio\n return images.length === 2 || images.length === 5\n ? image.squareSrc\n : image.defaultSrc;\n }\n\n renderGrid() {\n const { images } = this.props;\n return (\n \n \n Analytics.trackV2({\n category: 'athletes',\n page: 'athlete_profile',\n action: 'click',\n element: 'follow_athlete_button'\n })\n }\n >\n {I18n.t('strava.athletes.show_public.follow_cta')}\n \n
\n\n \n {name}\n
\n{location}
\n \n {this.hasImages() &&\n images.map((image, index) => (\n // eslint-disable-next-line react/no-array-index-key\n
\n );\n }\n\n render() {\n return this.hasImages() ? this.renderGrid() : null;\n }\n}\n\nImageGrid.propTypes = {\n images: PropTypes.arrayOf(PropTypes.shape())\n};\n\nImageGrid.defaultProps = {\n images: []\n};\n\nexport default ImageGrid;\n","// extracted by mini-css-extract-plugin\nexport default {\"card\":\"Activities--card--0cXkf\",\"card-body\":\"Activities--card-body--imLmO\",\"cardBody\":\"Activities--card-body--imLmO\",\"card-header\":\"Activities--card-header--W-ADA\",\"cardHeader\":\"Activities--card-header--W-ADA\",\"list-stats\":\"Activities--list-stats--nqNfk\",\"listStats\":\"Activities--list-stats--nqNfk\",\"stat-value\":\"Activities--stat-value--CDawT\",\"statValue\":\"Activities--stat-value--CDawT\",\"side-column\":\"Activities--side-column--37DFz\",\"sideColumn\":\"Activities--side-column--37DFz\",\"title\":\"Activities--title--XrBDF\",\"timestamp\":\"Activities--timestamp---8G-6\",\"empty\":\"Activities--empty--dttdl\",\"upsell-wrapper\":\"Activities--upsell-wrapper--D4tky\",\"upsellWrapper\":\"Activities--upsell-wrapper--D4tky\",\"upsell\":\"Activities--upsell--5s5F2\",\"cta\":\"Activities--cta--dbszb\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Markup } from 'interweave';\nimport I18n from 'utils/I18n';\nimport Analytics from 'utils/analytics';\nimport Avatar from '@strava/ui/Avatar';\nimport Stat from '@strava/ui/Stat';\nimport Stats from '@strava/ui/Stats';\n\nimport ActivityIcon from 'components/ActivityIcon';\n\nimport ImageGrid from '../ImageGrid';\nimport styles from './styles.scss';\nimport emptyActivitiesImg from './images/img-empty.png';\nimport emptyActivitiesImg2x from './images/img-empty@2x.png';\n\n// Good candidate for a shared Upsell component\nconst Upsell = () => (\n \n
\n ))}\n \n
\n \n
\n);\n\nconst ActivityStats = ({ activity }) => {\n const stats =\n activity.isManual || !activity.hasGps\n ? { time: activity.movingTime }\n : {\n distance: activity.distance,\n elevation: activity.elevation,\n time: activity.movingTime\n };\n\n return (\n \n
\n \n
\n {I18n.t('strava.athletes.show_public.mobile_cta')}
\n\n \n Analytics.trackV2({\n category: 'athletes',\n page: 'athlete_profile',\n action: 'click',\n element: 'mobile_signup_button'\n })\n }\n >\n {I18n.t('strava.athletes.show_public.get_strava_cta')}\n \n
\n - \n {activities.map((activity) => (\n
- \n \n\n {activity.images.length > 0 && (\n\n\n\n\n\n\n\n\n
{activity.name}
\n\n\n\n\n\n\n\n\n \n\n )}\n\n \n ))}\n
\n {/* Will refactor into tab component */}\n \n \n\n {chartData && (\n
\n );\n};\n\nMonthlyStats.propTypes = {\n stats: PropTypes.shape({\n monthlyTime: PropTypes.string,\n monthlyDistance: PropTypes.string,\n chartData: PropTypes.arrayOf(PropTypes.object)\n })\n};\n\nMonthlyStats.defaultProps = {\n stats: {\n monthlyTime: '',\n monthlyDistance: '',\n chartData: []\n }\n};\n\nexport default MonthlyStats;\n","// extracted by mini-css-extract-plugin\nexport default {\"list\":\"Trophies--list--+Xx7q\",\"list-item\":\"Trophies--list-item--a61dB\",\"listItem\":\"Trophies--list-item--a61dB\",\"trophy-image\":\"Trophies--trophy-image--1jkSB\",\"trophyImage\":\"Trophies--trophy-image--1jkSB\",\"description\":\"Trophies--description--gCRcN\",\"timestamp\":\"Trophies--timestamp--yqP2s\",\"effort\":\"Trophies--effort--ApVtd\",\"empty\":\"Trophies--empty--L6Ch4\",\"upsell\":\"Trophies--upsell--+IeVA\",\"cta\":\"Trophies--cta--Bskm9\",\"media-right\":\"Trophies--media-right--NwxDG\",\"mediaRight\":\"Trophies--media-right--NwxDG\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport I18n from 'utils/I18n';\nimport Analytics from 'utils/analytics';\nimport styles from './index.scss';\n\nconst EmptyTrophyCase = ({ athleteName, followUrl }) => (\n {I18n.t('strava.athletes.show_public.current_month')}
\n\n\n \n \n \n
\n )}\n \n
\n);\n\nconst Trophy = ({ trophy }) => (\n \n {/* TODO: analytics / click tracking for trophy link */}\n \n \n
\n \n \n {I18n.t('strava.athletes.show_public.trophy_empty_state', {\n athlete_name: athleteName\n })}\n \n
\n\n
\n \n);\n\nconst Upsell = () => (\n {trophy.name}
\n \n{trophy.rank}
: }\n \n
\n);\n\nconst Trophies = ({ trophies, athleteName, followUrl }) => (\n \n
\n {I18n.t('strava.athletes.show_public.add_trophies')}
\n\n \n Analytics.trackV2({\n category: 'athletes',\n page: 'athlete_profile',\n action: 'click',\n element: 'join_challenge_button'\n })\n }\n >\n {I18n.t('strava.athletes.show_public.join_cta')}\n \n
\n \n
\n);\n\nTrophies.propTypes = {\n trophies: PropTypes.arrayOf(PropTypes.object).isRequired,\n athleteName: PropTypes.string.isRequired,\n followUrl: PropTypes.string.isRequired\n};\n\nEmptyTrophyCase.propTypes = {\n athleteName: PropTypes.string.isRequired,\n followUrl: PropTypes.string.isRequired\n};\n\nTrophy.propTypes = {\n trophy: PropTypes.shape({\n url: PropTypes.string.isRequired,\n logo_url: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n teaser: PropTypes.string.isRequired,\n date: PropTypes.string.isRequired,\n effort: PropTypes.string.isRequired,\n rank: PropTypes.number.isRequired\n }).isRequired\n};\n\nexport default Trophies;\n","// extracted by mini-css-extract-plugin\nexport default {\"athlete-achievements\":\"Achievements--athlete-achievements--HZBJQ\",\"athleteAchievements\":\"Achievements--athlete-achievements--HZBJQ\",\"app-icon\":\"Achievements--app-icon--eHEGq\",\"appIcon\":\"Achievements--app-icon--eHEGq\",\"description\":\"Achievements--description--zVBz+\",\"title\":\"Achievements--title--u2yZA\",\"timestamp\":\"Achievements--timestamp--S1L9a\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport I18n from 'utils/I18n';\n\nimport styles from './styles.scss';\n\nconst Achievements = ({ achievements }) => {\n if (achievements.length === 0) {\n return null;\n }\n\n return (\n {I18n.t('strava.athletes.show_public.trophy_case')}
\n\n {trophies.length >= 1 ? (\n- \n {trophies.map((trophy) => (\n
- \n
\n \n ))}\n
{I18n.t('strava.athletes.show_public.recent_achievements')}
\n- \n {achievements.map(\n ({ showTrophy, spriteName, description, timeago }) => (\n
- \n {showTrophy ? (\n \n\n{description}\n \n )\n )}\n
\n
\n );\n};\n\nLimitedProfileEntry.propTypes = {\n athleteName: PropTypes.string.isRequired\n};\n\nexport default LimitedProfileEntry;\n","export { default } from './LimitedProfileEntry';\n","// extracted by mini-css-extract-plugin\nexport default {\"options-dropdown\":\"FollowsList--options-dropdown--R1LSD\",\"optionsDropdown\":\"FollowsList--options-dropdown--R1LSD\",\"results-container\":\"FollowsList--results-container--c2mD+\",\"resultsContainer\":\"FollowsList--results-container--c2mD+\",\"spinner\":\"FollowsList--spinner--36rfO\",\"error\":\"FollowsList--error--VeWXQ\"};","import { useState } from 'react';\nimport createNetworkingClient from 'utils/networking-client';\nimport { logError } from '../../../../../utils/sentry';\n\nconst useFetchFollowers = ({ resultsPerPage }) => {\n const [results, setResults] = useState([]);\n const [hasMore, setHasMore] = useState(true);\n const [error, setError] = useState();\n const [isLoading, setIsLoading] = useState(false);\n\n const errorState = (e) => {\n setError(e);\n setIsLoading(false);\n logError(e);\n };\n\n /**\n * Computes the page number that is to be used for retrieving more results based on\n * the current number of rows that have already been fetched.\n * eg. If an athlete has 50 rows retrieved, the next page is 50/25 + 1 (== 2)\n *\n * @param {boolean} reset - forces the page number to be 1\n * @returns {number} representing the page number which is used for pagination\n */\n const pageNum = (reset) =>\n reset ? 1 : Math.ceil(results.length / resultsPerPage) + 1;\n\n /**\n * Retrieves follows data using endpoint FollowsController#index\n * @param {Object} param\n * @param {String} param.selectionOption the type of follows selected by athlete (eg. \"suggested\", \"blocked\", \"following\")\n * @param {Boolean} param.reset a switch to indicate if an athlete changed the follows type. When the value is true, it means that\n * a new type of follows was selected so we want to clear the results instead of appending to the previous results.\n */\n const loadFollows = async ({ selectedOption: followsType, reset }) => {\n setIsLoading(true);\n setHasMore(false);\n const url = `follows?type=${followsType}&page=${pageNum(reset)}`;\n\n if (reset) {\n // start all over again when the follows type has been changed\n setResults([]);\n }\n\n try {\n await createNetworkingClient()\n .get(url, { params: {} })\n .then((response) => {\n if (response && response.status === 200) {\n const { data } = response;\n const fetchedFollows = data.follows;\n\n setResults((prev) => [...prev, ...fetchedFollows]);\n setHasMore(fetchedFollows.length >= resultsPerPage);\n setIsLoading(false);\n } else {\n errorState(response.error);\n }\n })\n .catch((err) => {\n errorState(err);\n });\n } catch (err) {\n errorState(err);\n }\n };\n\n return { loadFollows, isLoading, results, hasMore, error };\n};\n\nexport default useFetchFollowers;\n","import React, { useState } from 'react';\nimport I18n from 'utils/I18n';\nimport PropTypes from 'prop-types';\nimport DropdownSelect from '@strava/ui/DropdownSelect';\n\nimport Spinner from '@strava/ui/Spinner';\nimport { AutoSizer, InfiniteLoader, List } from 'react-virtualized';\nimport styles from './styles.scss';\nimport useFetchFollowers from './hooks/useFetchFollowers';\n\nconst FollowsList = ({\n athleteFirstName,\n primaryNav,\n hasBlockedAthletes,\n resultsPerPage,\n type\n}) => {\n const t = (key, name) =>\n name\n ? I18n.t(`strava.athletes.follows.menu.${key}`, name)\n : I18n.t(`strava.athletes.follows.menu.${key}`);\n\n const [selectedOption, setSelectedOption] = useState(type);\n\n const { isLoading, loadFollows, results, hasMore, error } = useFetchFollowers(\n {\n resultsPerPage\n }\n );\n\n const options = (() => {\n if (primaryNav === 'profile') {\n // when viewing own profile\n const o = [\n { label: t('profile.following'), value: 'following' },\n { label: t('profile.followers'), value: 'followers' },\n { label: t('profile.suggested'), value: 'suggested' }\n ];\n if (hasBlockedAthletes) {\n o.push({ label: t('profile.blocked'), value: 'blocked' });\n }\n return o;\n }\n const nameParam = { firstName: athleteFirstName };\n // when viewing another athletes profile\n return [\n {\n label: t('athlete.following', nameParam),\n value: 'following'\n },\n {\n label: t('athlete.followers', nameParam),\n value: 'followers'\n },\n { label: t('athlete.both_following'), value: 'both_following' }\n ];\n })();\n\n const handleOptionChange = (option) => {\n setSelectedOption(option.value);\n // clear and reload results when an athlete changes the follows type\n loadFollows({\n selectedOption: option.value,\n reset: true\n });\n };\n\n const loader = () => {\n return (\n \n {I18n.t(`${I18nPrefix}.account_is_private`)}\n
\n\n {I18n.t(`${I18nPrefix}.follow_athlete_cta`, { name: athleteName })}\n
\n \n
\n );\n };\n\n /**\n * Number of follows.\n *\n * This messages to infinite scroller that there is always one more\n * row to be fetched until we verify that the athlete does not have any more follows\n * (hasMore == false). This happens when we fetch a page that returns less results than\n * the results per page limit (resultsPerPage)\n */\n const rowCount = (() => (hasMore ? results.length + 1 : results.length))();\n\n /**\n * Responsible for tracking the loaded state of each result row\n */\n const isRowLoaded = ({ index }) => {\n return index < results.length;\n };\n\n // responsible for rendering a single card entry (row), given its index\n const rowRenderer = (params) => {\n // [ named parameters from react-virtualized ]\n // index - index of row\n // key - unique key within array of rows\n // style - style object to be applied to row\n const { index, key, style } = params;\n let content;\n if (!isRowLoaded({ index })) {\n content = loader();\n } else {\n const athleteEntry = results[index].find((o) => o.athlete);\n const followEntry = results[index].find((o) => o.follow);\n\n const athlete = athleteEntry ? athleteEntry.athlete : {};\n const follow = followEntry ? followEntry.follow : {}; // some follows-types do not have this follow entry\n content = `${athlete.firstname} - ${follow.status}`;\n }\n\n return (\n \n {content}\n
\n );\n };\n\n /**\n * Callback to be invoked when more rows must be loaded.\n */\n const loadMoreRows = ({ startIndex, stopIndex }) => {\n return new Promise((resolve) => {\n loadFollows({\n selectedOption,\n reset: false,\n startIndex,\n stopIndex\n }).then(() => {\n resolve();\n });\n });\n };\n\n /**\n * Callback used to render placeholder content when rowCount is 0\n */\n const noRowsRenderer = () => {\n return isLoading ? (\n loader()\n ) : (\n {t(`no_results.${selectedOption}`)}
\n );\n };\n\n return (\n <>\n \n {!error && (\n \n {({ onRowsRendered, registerChild }) => (\n \n {({ width }) => (\n \n )}\n \n )}\n\n {error &&
\n \n );\n};\n\nFollowsList.propTypes = {\n primaryNav: PropTypes.oneOf(['profile', 'athlete']).isRequired,\n hasBlockedAthletes: PropTypes.bool.isRequired,\n athleteFirstName: PropTypes.string.isRequired,\n resultsPerPage: PropTypes.number.isRequired,\n type: PropTypes.oneOf([\n 'following',\n 'followers',\n 'both_following',\n 'suggested',\n 'blocked'\n ]).isRequired\n};\n\nexport default FollowsList;\n","export { default } from './FollowsList';\n","// extracted by mini-css-extract-plugin\nexport default {\"btn-cta\":\"ButtonCTAWithCancel--btn-cta--GEeWm\",\"btnCta\":\"ButtonCTAWithCancel--btn-cta--GEeWm\",\"btn-cancel\":\"ButtonCTAWithCancel--btn-cancel--PsNTV\",\"btnCancel\":\"ButtonCTAWithCancel--btn-cancel--PsNTV\",\"controls\":\"ButtonCTAWithCancel--controls--5Lw+m\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@strava/ui/Button';\n\nimport I18n from 'utils/I18n';\n\nimport styles from './index.scss';\n\nconst I18nPrefix = 'components.button_cta_with_cancel.';\nconst I18nKey = {\n cancel: `${I18nPrefix}cancel`,\n ok: `${I18nPrefix}ok`,\n next: `${I18nPrefix}next`\n};\n\nfunction ButtonCTAWithCancel({\n onCancel,\n onCTA,\n disabled,\n ctaDisabled,\n ctaVariant,\n ctaText\n}) {\n return (\n {t('error_message')}
}\n \n \n {I18n.t(I18nKey.cancel)}\n \n \n {ctaVariant === 'custom' && ctaText\n ? ctaText\n : I18n.t(I18nKey[ctaVariant])}\n \n
\n );\n}\n\nButtonCTAWithCancel.defaultProps = {\n disabled: false,\n ctaDisabled: false,\n ctaVariant: 'ok',\n ctaText: null\n};\n\nButtonCTAWithCancel.propTypes = {\n onCancel: PropTypes.func.isRequired,\n onCTA: PropTypes.func.isRequired,\n disabled: PropTypes.bool,\n ctaDisabled: PropTypes.bool,\n ctaVariant: PropTypes.oneOf(['ok', 'next', 'custom']),\n ctaText: PropTypes.string\n};\n\nexport default ButtonCTAWithCancel;\n","// extracted by mini-css-extract-plugin\nexport default {\"options\":\"OptionList--options--7zMaY\",\"title\":\"OptionList--title--Oo06n\",\"detail\":\"OptionList--detail--Jessw\"};","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport styles from './index.scss';\n\nfunction OptionList({ currentValue, handleNext, handleValueChange, options }) {\n return (\n - \n {options.map((option) => (\n
{title}
\n{I18n.t(I18nKey.title)}
\n{I18n.t_html(I18nKey.detailHtml)}
\n\n
| {summary[attr].title} | \n\n {isSubmitted ? I18n.t(I18nKey.updating) : summary[attr].changes}\n | \n
\n {!isSubmitted && (\n
\n \n \n \n ))}\n \n \n \n
\n \n
\n );\n }\n return null;\n};\n\nconst OptOutSetting = ({ partner, partnerType, onChange, selected }) => (\n {getDescriptionString(name, value)}
\n\n
\n);\n\nOptOutSetting.propTypes = {\n onChange: PropTypes.func.isRequired,\n partnerType: PropTypes.string.isRequired,\n selected: PropTypes.bool.isRequired,\n partner: PropTypes.shape({\n name: PropTypes.string,\n disabled: PropTypes.bool,\n optOutName: PropTypes.string.isRequired,\n partnerName: PropTypes.string.isRequired,\n profileImage: PropTypes.string.isRequired,\n value: PropTypes.bool.isRequired\n }).isRequired\n};\n\nexport default OptOutSetting;\n","// extracted by mini-css-extract-plugin\nexport default {\"sponsored-section\":\"PartnerIntegrationsList--sponsored-section--ZmlXh\",\"sponsoredSection\":\"PartnerIntegrationsList--sponsored-section--ZmlXh\",\"enhanced-header\":\"PartnerIntegrationsList--enhanced-header--G5PmK\",\"enhancedHeader\":\"PartnerIntegrationsList--enhanced-header--G5PmK\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport Analytics from 'utils/analytics';\n\nimport I18n from 'utils/I18n';\nimport { valueChanged } from '../../actions';\nimport OptOutSetting from '../OptOutSetting';\n\nimport styles from './index.scss';\n\nconst I18nPrefix = 'strava.settings.partner_integrations.';\nconst I18nKey = {\n enhancedHeader: `${I18nPrefix}enhanced_header`,\n sponsoredHeader: `${I18nPrefix}sponsored_header`,\n yourHeader: `${I18nPrefix}your_header`\n};\n\nexport class PartnerIntegrationsList extends React.Component {\n onChange = ({ optOutName, partnerName, value, partnerType }) => {\n Analytics.trackV2({\n action: 'click',\n category: 'sponsor_opt_out',\n page: 'all_sponsored_settings',\n element: value ? 'enable' : 'disable',\n properties: { partner: optOutName }\n });\n\n this.props.onValueChanged({\n athleteId: this.props.athleteId,\n optOutName,\n partnerName,\n partnerType,\n value: !value\n });\n };\n\n selected = (partnerName) => this.props.selected === partnerName;\n\n hasSponsored() {\n const { sponsored } = this.props;\n return Object.keys(sponsored).length > 0;\n }\n\n hasEnhanced() {\n const { enhanced } = this.props;\n return Object.keys(enhanced).length > 0;\n }\n\n showEnhancedHeading() {\n return this.hasSponsored() && this.hasEnhanced();\n }\n\n sponsoredMapping() {\n const { sponsored } = this.props;\n return Object.keys(sponsored).map((partner) => (\n \n
\n \n
\n \n {partner.partnerName}\n
\n \n {renderText(selected, partner.partnerName, partner.value)}\n\n
\n );\n }\n return null;\n }\n\n enhancedIntegrations() {\n if (this.hasEnhanced()) {\n if (this.showEnhancedHeading()) {\n return (\n {I18n.t(I18nKey.sponsoredHeader)}
\n {this.sponsoredMapping()}\n\n
\n );\n }\n return {I18n.t(I18nKey.yourHeader)}
\n {this.enhancedMapping()}\n{this.enhancedMapping()}
;\n }\n return null;\n }\n\n render() {\n return (\n \n {this.sponsoredIntegrations()}\n {this.enhancedIntegrations()}\n
\n );\n }\n}\n\nPartnerIntegrationsList.defaultProps = {\n selected: null\n};\n\nPartnerIntegrationsList.propTypes = {\n athleteId: PropTypes.number.isRequired,\n onValueChanged: PropTypes.func.isRequired,\n selected: PropTypes.string,\n sponsored: PropTypes.shape({}).isRequired,\n enhanced: PropTypes.shape({}).isRequired\n};\n\nexport default connect(\n ({ athleteId, sponsored, enhanced, selected }) => ({\n athleteId,\n sponsored,\n enhanced,\n selected\n }),\n { onValueChanged: valueChanged }\n)(PartnerIntegrationsList);\n","import React from 'react';\nimport { Provider } from 'react-redux';\nimport { createStore, applyMiddleware } from 'redux';\nimport thunk from 'redux-thunk';\n\nimport reducer from './reducers';\n\nimport PartnerIntegrationsList from './components/PartnerIntegrationsList';\n\nclass PartnerIntegrations extends React.Component {\n store = createStore(\n reducer,\n { ...this.props, selected: null, disabled: false },\n applyMiddleware(thunk)\n );\n\n render() {\n return (\n \n
\n \n );\n};\n\nHandle.propTypes = {\n domain: PropTypes.arrayOf(PropTypes.number).isRequired,\n handle: PropTypes.shape({\n id: PropTypes.string.isRequired,\n value: PropTypes.number.isRequired,\n percent: PropTypes.number.isRequired\n }).isRequired,\n getHandleProps: PropTypes.func.isRequired\n};\n\nexport default Handle;\n","export { default } from './Handle';\n","// extracted by mini-css-extract-plugin\nexport default {\"track\":\"Track--track--AsBZs\"};","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport styles from './styles.scss';\n\nconst Track = ({ source, target }) => (\n \n {\n onChange(values[0]);\n trackV2({\n category: 'privacy_settings',\n page: 'hide_any_start_end',\n action: 'click',\n element: 'slider',\n properties: { distance: values[0] }\n });\n }}\n values={[defaultStreamPrivacy.meters_value]}\n className={styles.slider}\n >\n \n {({ tracks }) => (\n \n\n \n {({ ticks }) => (\n \n\n {/*\n whe need to use Rail component here so that we can add getRailProps\n which will add mouse interactions\n */}\n \n {({ getRailProps }) => (\n \n\n \n {({ handles, getHandleProps }) => (\n \n \n
\n );\n};\n\nStreamPrivacySlider.propTypes = {\n defaultStreamPrivacy: PropTypes.shape({\n meters_value: PropTypes.number,\n luggage_value: PropTypes.string\n }).isRequired,\n domain: PropTypes.arrayOf(PropTypes.number).isRequired,\n onChange: PropTypes.func.isRequired,\n numTicks: PropTypes.number.isRequired\n};\n\nexport default StreamPrivacySlider;\n","export { default } from './StreamPrivacySlider';\n","// extracted by mini-css-extract-plugin\nexport default {\"detail\":\"HideAnywhereApp--detail--83HQb\",\"slider-container\":\"HideAnywhereApp--slider-container--vkWnN\",\"sliderContainer\":\"HideAnywhereApp--slider-container--vkWnN\",\"distance-hidden-label\":\"HideAnywhereApp--distance-hidden-label--ovQ3N\",\"distanceHiddenLabel\":\"HideAnywhereApp--distance-hidden-label--ovQ3N\",\"slider-scale\":\"HideAnywhereApp--slider-scale--X2DmU\",\"sliderScale\":\"HideAnywhereApp--slider-scale--X2DmU\",\"segment-visibility\":\"HideAnywhereApp--segment-visibility--H+igK\",\"segmentVisibility\":\"HideAnywhereApp--segment-visibility--H+igK\"};","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport I18n from 'utils/I18n';\nimport createNetworkingClient from 'utils/networking-client';\nimport { trackV2 } from 'utils/analytics';\nimport ConfirmModal from '../../../../components/ConfirmModal/ConfirmModal';\n\nimport StreamPrivacySlider from './components/StreamPrivacySlider';\nimport styles from './styles.scss';\n\nfunction HideAnywhereApp({\n defaultStreamPrivacy: streamPrivacyProp,\n streamPrivacyOptions,\n updateSettingsPath,\n isAthleteUnder18\n}) {\n const I18nPrefix = 'strava.settings.privacy.hide_anywhere.';\n const distanceUnits =\n I18n.measurementUnits() === 'metric' ? 'meters' : 'miles';\n const [defaultStreamPrivacy, setDefaultStreamPrivacy] = useState(\n streamPrivacyProp\n );\n const newStreamPrivacyRef = useRef();\n const oldStreamPrivacyRef = useRef();\n\n const sliderLabels = streamPrivacyOptions.filter((s, i) => i % 2 === 0);\n\n const trackEvent = (action, element = null, properties = null) => {\n trackV2({\n category: 'privacy_settings',\n page: 'hide_any_start_end',\n action,\n ...(element && { element }),\n ...(properties && { properties })\n });\n };\n\n useEffect(() => {\n trackEvent('screen_enter');\n }, []);\n\n const [openModal, setOpenModal] = useState(false);\n\n const applySettingUpdate = () => {\n createNetworkingClient()\n .put(updateSettingsPath, {\n settings: {\n default_stream_privacy: newStreamPrivacyRef.current.luggage_value\n }\n })\n .catch(() => {\n setDefaultStreamPrivacy(oldStreamPrivacyRef.current);\n });\n };\n\n const handleSettingUpdate = (radius) => {\n oldStreamPrivacyRef.current = { ...defaultStreamPrivacy };\n newStreamPrivacyRef.current = streamPrivacyOptions.find(\n (r) => r.meters_value === radius\n );\n setDefaultStreamPrivacy(newStreamPrivacyRef.current);\n\n if (\n isAthleteUnder18 &&\n newStreamPrivacyRef.current.meters_value <\n oldStreamPrivacyRef.current.meters_value\n ) {\n setOpenModal(true);\n } else {\n applySettingUpdate();\n }\n };\n\n const closeModal = () => {\n setDefaultStreamPrivacy(oldStreamPrivacyRef.current);\n setOpenModal(false);\n };\n\n const confirmSettingUpdate = () => {\n applySettingUpdate();\n setOpenModal(false);\n };\n\n return (\n \n \n
\n\n \n {tracks.map(({ id, source, target }) => (\n \n ))}\n
\n )}\n \n {ticks.map((tick) => (\n
\n )}\n \n \n
\n )}\n \n {handles.map((handle) => (\n
\n )}\n \n
\n );\n}\n\nHideAnywhereApp.propTypes = {\n defaultStreamPrivacy: PropTypes.shape({\n meters_value: PropTypes.number,\n luggage_value: PropTypes.string,\n label: PropTypes.string\n }).isRequired,\n streamPrivacyOptions: PropTypes.arrayOf(\n PropTypes.shape({\n meters_value: PropTypes.number,\n luggage_value: PropTypes.string,\n label: PropTypes.string\n })\n ).isRequired,\n updateSettingsPath: PropTypes.string.isRequired,\n isAthleteUnder18: PropTypes.bool.isRequired\n};\n\nexport default HideAnywhereApp;\n","export { default } from './HideAnywhereApp';\n","import createNetworkingClient from 'utils/networking-client';\nimport Analytics from 'utils/analytics';\n\nexport const types = {\n FETCH_CHALLENGE_PROGRESS_REQUESTED: 'FETCH_CHALLENGE_PROGRESS_REQUESTED',\n FETCH_CHALLENGE_PROGRESS_SUCCESS: 'FETCH_CHALLENGE_PROGRESS_SUCCESS',\n JOIN_CHALLENGE_FAILURE: 'JOIN_CHALLENGE_FAILURE',\n JOIN_CHALLENGE_REQUESTED: 'JOIN_CHALLENGE_REQUESTED',\n JOIN_CHALLENGE_SUCCESS: 'JOIN_CHALLENGE_SUCCESS',\n JOIN_CLUB_FAILURE: 'JOIN_CLUB_FAILURE',\n JOIN_CLUB_REQUESTED: 'JOIN_CLUB_REQUESTED',\n JOIN_CLUB_SUCCESS: 'JOIN_CLUB_SUCCESS',\n LEAVE_CHALLENGE_FAILURE: 'LEAVE_CHALLENGE_FAILURE',\n LEAVE_CHALLENGE_REQUESTED: 'LEAVE_CHALLENGE_REQUESTED',\n LEAVE_CHALLENGE_SUCCESS: 'LEAVE_CHALLENGE_SUCCESS',\n MODAL_OPEN: 'MODAL_OPEN',\n MODAL_CLOSE: 'MODAL_CLOSE',\n MODAL_CHANGE_DATE: 'MODAL_CHANGE_DATE',\n DOB_UPDATE_REQUESTED: 'DOB_UPDATE_REQUESTED',\n DOB_UPDATE_SUCCESS: 'DOB_UPDATE_SUCCESS',\n DOB_UPDATE_FAILED: 'DOB_UPDATE_FAILED'\n};\n\nconst fetchChallengeProgressSuccess = (data) => ({\n type: types.FETCH_CHALLENGE_PROGRESS_SUCCESS,\n data\n});\n\nconst fetchChallengeProgress = (challengeId) => (dispatch) => {\n dispatch({ type: types.FETCH_CHALLENGE_PROGRESS_REQUESTED });\n\n const instance = createNetworkingClient();\n return instance\n .get(`/challenges/${challengeId}/progress`)\n .then((response) => {\n const { data } = response;\n dispatch(fetchChallengeProgressSuccess(data));\n })\n .catch(() => window.location.reload());\n};\n\nconst joinChallengeFailure = () => ({\n type: types.JOIN_CHALLENGE_FAILURE\n});\n\nconst joinChallengeSuccess = (data) => ({\n type: types.JOIN_CHALLENGE_SUCCESS,\n data\n});\n\nexport const joinChallenge = (challengeId) => (dispatch) => {\n dispatch({ type: types.JOIN_CHALLENGE_REQUESTED });\n\n Analytics.trackV2({\n action: 'click',\n element: 'join',\n category: 'challenges',\n page: 'challenge_details',\n properties: { challenge_id: challengeId }\n });\n\n const redirectUrl = window.location;\n\n const instance = createNetworkingClient();\n return instance\n .get(\n `/challenges/${challengeId}/login_and_join?redirect_url=${redirectUrl}`\n )\n .then((response) => {\n const { data } = response;\n if (data.redirect && data.redirectUrl) {\n window.location = data.redirectUrl;\n } else {\n dispatch(fetchChallengeProgress(challengeId));\n dispatch(joinChallengeSuccess(data));\n }\n })\n .catch(() => dispatch(joinChallengeFailure()));\n};\n\nconst leaveChallengeFailure = () => ({\n type: types.LEAVE_CHALLENGE_FAILURE\n});\n\nconst leaveChallengeSuccess = (data) => ({\n type: types.LEAVE_CHALLENGE_SUCCESS,\n data\n});\n\nexport const leaveChallenge = (challengeId) => (dispatch) => {\n dispatch({ type: types.LEAVE_CHALLENGE_REQUESTED });\n\n Analytics.trackV2({\n action: 'click',\n element: 'leave',\n category: 'challenges',\n page: 'challenge_details',\n properties: { challenge_id: challengeId }\n });\n\n const instance = createNetworkingClient();\n return instance\n .post(`/challenges/${challengeId}/leave`)\n .then((response) => {\n const { data } = response;\n dispatch(leaveChallengeSuccess(data));\n })\n .catch(() => dispatch(leaveChallengeFailure()));\n};\n\nconst joinClubFailure = () => ({\n type: types.JOIN_CLUB_FAILURE\n});\n\nconst joinClubSuccess = (data) => ({\n type: types.JOIN_CLUB_SUCCESS,\n data\n});\n\nexport const joinClub = (destUrl) => (dispatch) => {\n dispatch({ type: types.JOIN_CLUB_REQUESTED });\n\n const redirectUrl = window.location;\n\n const instance = createNetworkingClient();\n return instance\n .get(`${destUrl}?redirect_url=${redirectUrl}`)\n .then((response) => {\n const { data } = response;\n if (data.redirect && data.redirectUrl) {\n window.location = data.redirectUrl;\n } else {\n dispatch(joinClubSuccess(data));\n }\n })\n .catch(() => dispatch(joinClubFailure()));\n};\n\nexport const showAgeModal = (\n gatingConditions,\n joinChallengeFn,\n dateSelected\n) => (dispatch) => {\n dispatch({\n type: types.MODAL_OPEN,\n data: {\n gatingConditions,\n joinChallengeFn,\n dateSelected\n }\n });\n};\n\nexport const handleModalClose = () => (dispatch) =>\n dispatch({ type: types.MODAL_CLOSE });\n\nexport const handleDateSelectionChange = (date) => (dispatch) =>\n dispatch({ type: types.MODAL_CHANGE_DATE, date });\n\nexport const handleDateUpdateInProgress = () => (dispatch) =>\n dispatch({ type: types.DOB_UPDATE_REQUESTED });\n\nexport const handleDateUpdateSuccess = (date) => (dispatch) =>\n dispatch({ type: types.DOB_UPDATE_SUCCESS, date });\n\nexport const handleDateUpdateFailure = () => (dispatch) =>\n dispatch({ type: types.DOB_UPDATE_FAILED });\n\nexport default types;\n","import { types } from './actions';\n\nexport default function reducer(state = {}, action) {\n const [numParticipants, ...remaining] = state.participantCount;\n\n switch (action.type) {\n case types.FETCH_CHALLENGE_PROGRESS_SUCCESS:\n return {\n ...state,\n progress: { ...state.progress, data: action.data }\n };\n case types.JOIN_CHALLENGE_FAILURE:\n return {\n ...state,\n challengeJoinRequested: false\n };\n case types.JOIN_CHALLENGE_REQUESTED:\n return {\n ...state,\n challengeJoinRequested: true\n };\n case types.JOIN_CHALLENGE_SUCCESS:\n return {\n ...state,\n joined: action.data.joined,\n participantCount: [\n { ...numParticipants, value: numParticipants.value + 1 },\n ...remaining\n ],\n challengeJoinRequested: false\n };\n case types.LEAVE_CHALLENGE_FAILURE:\n return {\n ...state,\n challengeLeaveRequested: false\n };\n case types.LEAVE_CHALLENGE_REQUESTED:\n return {\n ...state,\n challengeLeaveRequested: true\n };\n case types.LEAVE_CHALLENGE_SUCCESS:\n return {\n ...state,\n joined: false,\n participantCount: [\n { ...numParticipants, value: numParticipants.value - 1 },\n ...remaining\n ],\n challengeLeaveRequested: false,\n progress: { ...state.progress, data: {} }\n };\n case types.JOIN_CLUB_FAILURE:\n return {\n ...state,\n clubJoinRequested: false\n };\n case types.JOIN_CLUB_REQUESTED:\n return {\n ...state,\n clubJoinRequested: true\n };\n case types.JOIN_CLUB_SUCCESS:\n return {\n ...state,\n clubJoinRequested: false,\n club: {\n ...state.club,\n memberCount: action.data.memberCount,\n isClubMember: action.data.isClubMember\n }\n };\n\n case types.MODAL_OPEN:\n return {\n ...state,\n gatingModal: {\n gatingConditions: action.data.gatingConditions,\n joinChallengeFn: action.data.joinChallengeFn,\n ageGate: action.data.dateSelected,\n requestInProgress: false\n }\n };\n\n case types.MODAL_CLOSE:\n return {\n ...state,\n gatingModal: null\n };\n\n case types.MODAL_CHANGE_DATE:\n return {\n ...state,\n gatingModal: {\n ...state.gatingModal,\n ageGate: {\n ...state.gatingModal.ageGate,\n dateSelected: action.date\n }\n }\n };\n\n case types.DOB_UPDATE_REQUESTED:\n return {\n ...state,\n gatingModal: {\n ...state.gatingModal,\n requestInProgress: true\n }\n };\n\n case types.DOB_UPDATE_FAILED:\n return {\n ...state,\n gatingModal: {\n ...state.gatingModal,\n requestInProgress: false\n }\n };\n\n case types.DOB_UPDATE_SUCCESS:\n if (action.date) {\n return {\n ...state,\n currentAthlete: {\n ...state.currentAthlete,\n dateOfBirth: [\n action.date.getFullYear(),\n action.date.getMonth() + 1,\n action.date.getDate()\n ].join('-')\n },\n gatingModal: null\n };\n }\n return state;\n\n default:\n return state;\n }\n}\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"Achievements--container--6477X\",\"header\":\"Achievements--header--UWjkC\",\"headline-achievement\":\"Achievements--headline-achievement--SGkrN\",\"headlineAchievement\":\"Achievements--headline-achievement--SGkrN\",\"other-achievements\":\"Achievements--other-achievements--LoxEI\",\"otherAchievements\":\"Achievements--other-achievements--LoxEI\",\"achievements\":\"Achievements--achievements--7z0F4\"};","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport I18n from 'utils/I18n';\n\nimport styles from './styles.scss';\n\nconst I18nPrefix = 'strava.challenges.challenge_detail';\n\nconst Achievements = ({\n className,\n headlineAchievement,\n otherAchievements\n}) => (\n {I18n.t(`${I18nPrefix}detail_v2`)}
\n \n
\n \n {defaultStreamPrivacy.meters_value === 0\n ? I18n.t(\n `strava.settings.privacy.distance.no_${distanceUnits}_hidden`\n )\n : I18n.t_html(\n `strava.settings.privacy.distance.${distanceUnits}_hidden`,\n {\n distance: I18n.t(defaultStreamPrivacy.label)\n }\n )}\n
\n \n {sliderLabels.map((s) => (\n
\n {I18n.t_html(s.label)}
\n ))}\n \n {I18n.t_html(\n `${I18nPrefix}segment_visibility_html`,\n {},\n {\n onLinkClick: () =>\n trackEvent('click', 'learn_more', {\n article_id: 115000173384\n })\n }\n )}\n
\n \n
\n);\n\nAchievements.defaultProps = {\n className: ''\n};\n\nAchievements.propTypes = {\n className: PropTypes.string,\n headlineAchievement: PropTypes.shape({\n url: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired\n }).isRequired,\n otherAchievements: PropTypes.arrayOf(\n PropTypes.shape({\n url: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired\n })\n ).isRequired\n};\n\nexport default Achievements;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"Club--container--BCE7t\",\"club\":\"Club--club--ka7W2\",\"name\":\"Club--name--Duyag\",\"logo\":\"Club--logo--hm-h1\",\"info\":\"Club--info--ZMm2O\",\"member-count\":\"Club--member-count--MTgmQ\",\"memberCount\":\"Club--member-count--MTgmQ\",\"button\":\"Club--button--WSW5O\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport Button from '@strava/ui/Button';\nimport Spinner from '@strava/ui/Spinner';\nimport Avatar from '@strava/ui/Avatar';\n\nimport Cldr from 'utils/Cldr';\nimport I18n from 'utils/I18n';\n\nimport styles from './styles.scss';\nimport { joinClub } from '../../actions';\n\nexport const I18nPrefix = 'strava.challenges.challenge_detail.club';\n\nexport const memberCountString = (count) => {\n const localeCount = Cldr.formatDecimal(count);\n const suffix = count > 1 ? 'many' : 'one';\n return I18n.t(`${I18nPrefix}.athletes.${suffix}`, { number: localeCount });\n};\n\nexport class Club extends React.Component {\n onJoinClub = () => this.props.onJoinClub(this.props.club.joinUrl);\n\n joinButton = (isClubMember, clubJoinRequested) => (\n \n {I18n.t(`${I18nPrefix}.achievements_earned`)}\n
\n\n 
\n
\n {otherAchievements.length > 0 && (\n \n
\n )}\n \n {otherAchievements.map((achievement) => (\n
\n \n
\n );\n }\n}\n\nClub.defaultProps = {\n clubJoinRequested: false\n};\n\nClub.propTypes = {\n onJoinClub: PropTypes.func.isRequired,\n clubJoinRequested: PropTypes.bool,\n club: PropTypes.shape({\n name: PropTypes.string.isRequired,\n sportType: PropTypes.string.isRequired,\n isClubMember: PropTypes.bool.isRequired,\n clubLogoUrl: PropTypes.string.isRequired,\n memberCount: PropTypes.number.isRequired,\n clubUrl: PropTypes.string.isRequired,\n joinUrl: PropTypes.string.isRequired\n }).isRequired\n};\n\nexport default connect(\n ({ club, clubJoinRequested }) => ({\n clubJoinRequested,\n club: {\n name: club.name,\n sportType: club.sportType,\n isClubMember: club.isClubMember,\n clubLogoUrl: club.clubLogoUrl,\n memberCount: club.memberCount,\n clubUrl: club.clubUrl,\n joinUrl: club.joinUrl\n }\n }),\n { onJoinClub: joinClub }\n)(Club);\n","// extracted by mini-css-extract-plugin\nexport default {\"hero\":\"Header--hero--6zFle\",\"hero-group\":\"Header--hero-group--g1I0C\",\"heroGroup\":\"Header--hero-group--g1I0C\",\"challenge-logo\":\"Header--challenge-logo--9DQa6\",\"challengeLogo\":\"Header--challenge-logo--9DQa6\",\"text\":\"Header--text--eO0Wy\",\"title\":\"Header--title--bnRbH\",\"subtitle\":\"Header--subtitle--OLAlJ\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport MediaQuery, { breakpoints } from 'utils/media-query';\n\nimport styles from './styles.scss';\n\nconst Header = ({\n className,\n coverImageUrl,\n name,\n subtitle,\n challengeLogoUrl,\n coverTitleText,\n logoTitleText\n}) => (\n \n {I18n.t(`${I18nPrefix}.organizing_club`)}\n
\n\n {name}\n
\n\n \n \n \n \n {memberCountString(memberCount)}\n \n
\n {this.joinButton(isClubMember, clubJoinRequested)}\n \n \n \n\n {/* Smaller screens - mobile */}\n \n \n
\n);\n\nHeader.defaultProps = {\n className: ''\n};\n\nHeader.propTypes = {\n className: PropTypes.string,\n coverImageUrl: PropTypes.string.isRequired,\n challengeLogoUrl: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n subtitle: PropTypes.string.isRequired,\n coverTitleText: PropTypes.string.isRequired,\n logoTitleText: PropTypes.string.isRequired\n};\n\nexport default Header;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"CollapsibleTitleWithCaret--container--9wPpr\"};","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport styles from './styles.scss';\n\nconst CollapsibleTitleWithCaret = ({ title, arrowStyle }) => (\n \n \n \n\n {/* Smaller screens - mobile */}\n \n \n
\n\n {/* Bigger screens - tablets & desktop */}\n {name}
\n{name}
\n{subtitle}
\n{subtitle}
\n\n
\n);\n\nCollapsibleTitleWithCaret.propTypes = {\n title: PropTypes.string.isRequired,\n arrowStyle: PropTypes.string.isRequired\n};\n\nexport default CollapsibleTitleWithCaret;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"CreatePost--container--TnszW\",\"form-layout\":\"CreatePost--form-layout--qQuRP\",\"formLayout\":\"CreatePost--form-layout--qQuRP\",\"input-wrapper\":\"CreatePost--input-wrapper--ZR739\",\"inputWrapper\":\"CreatePost--input-wrapper--ZR739\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport TextareaAutosize from 'react-textarea-autosize';\nimport Button from '@strava/ui/Button';\nimport Avatar from '@strava/ui/Avatar';\n\nimport createNetworkingClient from 'utils/networking-client';\nimport I18n from 'utils/I18n';\n\nimport styles from './styles.scss';\n\nconst I18nPrefix = 'components.discussions.posts';\n\nclass CreatePost extends React.Component {\n state = {\n value: '',\n isSubmitting: false\n };\n\n handleChange = (event) => {\n this.setState({ value: event.target.value });\n };\n\n submitPost = () => {\n const { value } = this.state;\n const { discussionPath } = this.props;\n\n const instance = createNetworkingClient();\n\n this.setState({ isSubmitting: true });\n\n // The only validation we need for discussions is that there is text\n // Might be overkill to need this, though\n if (!value.trim()) {\n this.onSubmitFail();\n return;\n }\n\n instance\n .post(\n discussionPath,\n { text: value },\n { headers: { Accept: 'text/javascript' } }\n )\n .then((response) => {\n if (response && response.status === 200) {\n this.onSubmitSuccess(response.data);\n } else {\n this.onSubmitFail();\n }\n })\n .catch(() => {\n this.onSubmitFail();\n });\n };\n\n onSubmitSuccess = (data) => {\n const { onCreateSuccess } = this.props;\n\n this.setState({ value: '', isSubmitting: false });\n onCreateSuccess(data);\n };\n\n onSubmitFail = () => {\n this.setState({ isSubmitting: false });\n throw new Error('Your post submission failed. Please try again');\n };\n\n render() {\n const { value, isSubmitting } = this.state;\n const { name, avatarSrc } = this.props;\n\n return (\n {title}
\n \n \n \n\n \n {I18n.t(`${I18nPrefix}.post`)}\n \n
\n );\n }\n}\n\nCreatePost.propTypes = {\n avatarSrc: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n onCreateSuccess: PropTypes.func.isRequired,\n discussionPath: PropTypes.string.isRequired\n};\n\nexport default CreatePost;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"Comment--container--JGlgb\",\"delete\":\"Comment--delete--0q3fd\",\"report\":\"Comment--report--BR7C4\",\"quarantine\":\"Comment--quarantine--Rv1HB\",\"avatar-wrapper\":\"Comment--avatar-wrapper--3uwwS\",\"avatarWrapper\":\"Comment--avatar-wrapper--3uwwS\",\"body-text\":\"Comment--body-text--h-mWP\",\"bodyText\":\"Comment--body-text--h-mWP\",\"header\":\"Comment--header--8HiT2\",\"author-name\":\"Comment--author-name--EHv8e\",\"authorName\":\"Comment--author-name--EHv8e\",\"hoverable\":\"Comment--hoverable--CXLm5\",\"report-link\":\"Comment--report-link--USFhW\",\"reportLink\":\"Comment--report-link--USFhW\",\"quarantine-link\":\"Comment--quarantine-link--EIFwu\",\"quarantineLink\":\"Comment--quarantine-link--EIFwu\",\"delete-button\":\"Comment--delete-button--XmY1x\",\"deleteButton\":\"Comment--delete-button--XmY1x\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@strava/ui/Button';\n\nimport Cldr from 'utils/Cldr';\nimport I18n from 'utils/I18n';\nimport { trackV2 } from 'utils/analytics';\n\nimport styles from './styles.scss';\n\nexport const I18nPrefix = 'components.comments';\n\nconst Comment = ({\n id,\n avatar,\n authorId,\n authorName,\n timestamp,\n deletable,\n quarantinable,\n reportable,\n bodyText,\n className,\n deleteComment,\n parentId\n}) => {\n const logReportComment = (e) => {\n e.preventDefault();\n\n trackV2({\n category: 'challenges',\n page: 'comment',\n action: 'click',\n element: 'report',\n properties: {\n comment_id: id,\n post_id: parentId\n }\n });\n\n window.location = `/comments/${id}/feedback`;\n };\n\n return (\n \n
\n \n
\n \n \n
\n \n
\n );\n};\n\nComment.defaultProps = {\n className: '',\n quarantinable: false\n};\n\nComment.propTypes = {\n id: PropTypes.number.isRequired,\n avatar: PropTypes.element.isRequired,\n authorId: PropTypes.number.isRequired,\n authorName: PropTypes.string.isRequired,\n timestamp: PropTypes.number.isRequired,\n deletable: PropTypes.bool.isRequired,\n quarantinable: PropTypes.bool,\n reportable: PropTypes.bool.isRequired,\n bodyText: PropTypes.string.isRequired,\n className: PropTypes.string,\n deleteComment: PropTypes.func.isRequired,\n parentId: PropTypes.number.isRequired\n};\n\nexport default Comment;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"CreateComment--container--cE0tC\",\"show-button\":\"CreateComment--show-button--OP9-h\",\"showButton\":\"CreateComment--show-button--OP9-h\",\"form-layout\":\"CreateComment--form-layout--ISdUG\",\"formLayout\":\"CreateComment--form-layout--ISdUG\",\"input-wrapper\":\"CreateComment--input-wrapper--3yOTt\",\"inputWrapper\":\"CreateComment--input-wrapper--3yOTt\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport TextareaAutosize from 'react-textarea-autosize';\nimport Button from '@strava/ui/Button';\n\nimport createNetworkingClient from 'utils/networking-client';\nimport I18n from 'utils/I18n';\n\nimport styles from './styles.scss';\n\nconst I18nPrefix = 'components.comments';\n\nclass CreateComment extends React.Component {\n state = {\n value: '',\n isSubmitting: false,\n focused: false\n };\n\n toggleFocus = () => {\n this.setState((prevState) => ({ focused: !prevState.focused }));\n };\n\n handleChange = (event) => {\n this.setState({ value: event.target.value });\n };\n\n submitComment = () => {\n const { value } = this.state;\n const { parentId } = this.props;\n\n const instance = createNetworkingClient();\n\n const commentPath = `/posts/${parentId}/comments`;\n\n this.setState({ isSubmitting: true });\n\n // The only validation we need for discussions is that there is text\n // Might be overkill to need this, though\n if (!value.trim()) {\n this.onSubmitFail();\n return;\n }\n\n instance\n .post(\n commentPath,\n { text: value },\n { headers: { Accept: 'text/javascript' } }\n )\n .then((response) => {\n if (response && response.status === 200) {\n this.onSubmitSuccess(response.data);\n } else {\n this.onSubmitFail();\n }\n })\n .catch(() => {\n this.onSubmitFail();\n });\n };\n\n onSubmitSuccess = (data) => {\n const { onCreateSuccess } = this.props;\n\n this.setState({ value: '', isSubmitting: false });\n onCreateSuccess(data);\n };\n\n onSubmitFail = () => {\n this.setState({ isSubmitting: false });\n throw new Error('Your comment submission failed. Please try again');\n };\n\n render() {\n const { value, isSubmitting, focused } = this.state;\n\n return (\n {avatar}
\n \n
\n \n
\n \n \n {authorName}\n \n
\n \n
\n \n {bodyText}\n
\n \n {reportable && (\n
\n \n \n {I18n.t(`${I18nPrefix}.report`)}\n \n
\n )}\n {quarantinable && (\n \n \n {I18n.t(`${I18nPrefix}.soft_delete`)}\n \n
\n )}\n {deletable && (\n \n deleteComment(id, parentId)}\n >\n {I18n.t(`${I18nPrefix}.delete`)}\n \n
\n )}\n \n {Cldr.formatTimespan(timestamp)}\n
\n \n \n {I18n.t(`${I18nPrefix}.reply`)}\n \n
\n );\n }\n}\n\nCreateComment.propTypes = {\n onCreateSuccess: PropTypes.func.isRequired,\n parentId: PropTypes.number.isRequired\n};\n\nexport default CreateComment;\n","// extracted by mini-css-extract-plugin\nexport default {\"button-wrapper\":\"Comments--button-wrapper--B7NQ3\",\"buttonWrapper\":\"Comments--button-wrapper--B7NQ3\",\"comment\":\"Comments--comment--Tr4TI\",\"show-comments\":\"Comments--show-comments--G-7o5\",\"showComments\":\"Comments--show-comments--G-7o5\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@strava/ui/Button';\nimport Avatar from '@strava/ui/Avatar';\n\nimport createNetworkingClient from 'utils/networking-client';\nimport { trackV2 } from 'utils/analytics';\nimport I18n from 'utils/I18n';\n\nimport Comment from '../Comment';\nimport CreateComment from '../CreateComment';\n\nimport styles from './styles.scss';\n\nexport const I18nPrefix = 'components.comments';\n\nclass Comments extends React.Component {\n state = {\n expanded: false,\n comments: this.props.comments\n };\n\n deleteComment = (commentId, parentId) => {\n const instance = createNetworkingClient();\n const destUrl = `/posts/${this.props.parentId}/comments/${commentId}`;\n\n trackV2({\n category: 'challenges',\n page: 'comment',\n action: 'click',\n element: 'delete',\n properties: {\n comment_id: commentId,\n post_id: parentId\n }\n });\n\n // eslint-disable-next-line no-restricted-globals, no-alert\n if (window.confirm(I18n.t('strava.feed.comment_box_view.confirm_delete'))) {\n trackV2({\n category: 'challenges',\n page: 'comment',\n action: 'click',\n element: 'confirm_delete',\n properties: {\n comment_id: commentId,\n post_id: parentId\n }\n });\n\n instance\n .delete(destUrl)\n .then((response) => {\n if (response && response.status === 200) {\n this.onSuccess(response.data);\n } else {\n this.onFail();\n }\n })\n .catch(() => this.onFail());\n }\n };\n\n onFail = () => {\n throw new Error('Something went wrong deleting your comment');\n };\n\n onSuccess = (data) => {\n const { comments } = this.state;\n this.setState({\n comments: comments.filter((item) => item.id !== parseInt(data.id, 10))\n });\n };\n\n onCreateSuccess = (createdComment) => {\n this.setState((prevState) => ({\n comments: [...prevState.comments, createdComment]\n }));\n };\n\n toggleExpanded = () =>\n this.setState((prevState) => ({ expanded: !prevState.expanded }));\n\n showComments = () => {\n const { expanded, comments } = this.state;\n const { commentsToShow, parentId } = this.props;\n const startIndex = expanded ? 0 : comments.length - commentsToShow;\n\n return comments\n .slice(startIndex, comments.length)\n .map((comment) => (\n \n
\n \n
\n \n {comments.length > commentsToShow && (\n
\n );\n }\n}\n\nComments.defaultProps = {\n comments: [],\n className: null,\n commentsToShow: 2,\n currentAthlete: null\n};\n\nComments.propTypes = {\n comments: PropTypes.arrayOf(\n PropTypes.shape({\n author: PropTypes.shape({\n url: PropTypes.string,\n name: PropTypes.string,\n avatar: PropTypes.string\n }),\n ts: PropTypes.number,\n deletable: PropTypes.bool,\n quarantinable: PropTypes.bool,\n reportable: PropTypes.bool,\n text: PropTypes.string,\n id: PropTypes.number\n })\n ),\n parentId: PropTypes.number.isRequired,\n className: PropTypes.string,\n commentsToShow: PropTypes.number,\n currentAthlete: PropTypes.shape({})\n};\n\nexport default Comments;\n","// extracted by mini-css-extract-plugin\nexport default {\"dropdown-list\":\"ActionsDropdown--dropdown-list--sVB7T\",\"dropdownList\":\"ActionsDropdown--dropdown-list--sVB7T\",\"dropdown-item\":\"ActionsDropdown--dropdown-item--sP3vR\",\"dropdownItem\":\"ActionsDropdown--dropdown-item--sP3vR\",\"more-icon\":\"ActionsDropdown--more-icon--7I3zP\",\"moreIcon\":\"ActionsDropdown--more-icon--7I3zP\"};","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport styles from './styles.scss';\n\nclass ActionsDropdown extends React.Component {\n state = {\n expanded: false,\n actions: this.props.actions\n };\n\n toggleMenu = () => {\n this.setState((prev) => ({\n expanded: !prev.expanded\n }));\n };\n\n render() {\n return (\n \n \n {I18n.t(`${I18nPrefix}.${expanded ? 'show_fewer' : 'show_more'}`)}\n \n
\n )}\n {this.showComments()}\n {currentAthlete && (\n \n this.toggleMenu()}\n onKeyDown={() => this.toggleMenu()}\n />\n {this.state.expanded && (\n
\n );\n }\n}\n\nActionsDropdown.propTypes = {\n actions: PropTypes.arrayOf(PropTypes.shape({})).isRequired\n};\n\nexport default ActionsDropdown;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"Post--container--TMD7o\",\"delete\":\"Post--delete--bjh+W\",\"avatar-wrapper\":\"Post--avatar-wrapper--zGd69\",\"avatarWrapper\":\"Post--avatar-wrapper--zGd69\",\"header\":\"Post--header--8DQuo\",\"author-name\":\"Post--author-name--6nfjJ\",\"authorName\":\"Post--author-name--6nfjJ\",\"actions\":\"Post--actions--rk9BP\",\"body\":\"Post--body--lfsoe\",\"comments\":\"Post--comments--3a+Lb\"};","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport I18n from 'utils/I18n';\nimport Cldr from 'utils/Cldr';\n\nimport Comments from '../Comments';\nimport ActionsDropdown from '../ActionsDropdown';\n\nimport styles from './styles.scss';\n\nconst I18nPrefix = 'components.comments.';\nconst I18nKey = {\n report: `${I18nPrefix}report`,\n delete: `${I18nPrefix}delete`\n};\n\nconst Post = ({\n id,\n avatar,\n authorId,\n authorName,\n timestamp,\n deletable,\n bodyText,\n comments,\n deletePost,\n reportPost,\n currentAthlete\n}) => {\n const getAction = () => {\n if (deletable) {\n return { text: I18n.t(I18nKey.delete), onClick: () => deletePost(id) };\n }\n return { text: I18n.t(I18nKey.report), onClick: () => reportPost(id) };\n };\n return (\n - \n {this.state.actions.map((action) => (\n
- \n
\n
\n );\n};\n\nPost.defaultProps = {\n comments: [],\n currentAthlete: null\n};\n\nPost.propTypes = {\n id: PropTypes.number.isRequired,\n avatar: PropTypes.element.isRequired,\n authorId: PropTypes.number.isRequired,\n authorName: PropTypes.string.isRequired,\n timestamp: PropTypes.number.isRequired,\n deletable: PropTypes.bool.isRequired,\n bodyText: PropTypes.string.isRequired,\n comments: PropTypes.arrayOf(PropTypes.shape({})),\n deletePost: PropTypes.func.isRequired,\n reportPost: PropTypes.func.isRequired,\n currentAthlete: PropTypes.shape({})\n};\n\nexport default Post;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"Discussions--container--LirNp\",\"button-wrapper\":\"Discussions--button-wrapper--48o+i\",\"buttonWrapper\":\"Discussions--button-wrapper--48o+i\",\"discussion-list\":\"Discussions--discussion-list--5rl5S\",\"discussionList\":\"Discussions--discussion-list--5rl5S\",\"indent\":\"Discussions--indent--nPQWw\",\"empty-state\":\"Discussions--empty-state--rf4lV\",\"emptyState\":\"Discussions--empty-state--rf4lV\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@strava/ui/Button';\nimport Spinner from '@strava/ui/Spinner';\nimport Avatar from '@strava/ui/Avatar';\n\nimport createNetworkingClient from 'utils/networking-client';\nimport I18n from 'utils/I18n';\n\nimport CreatePost from './components/CreatePost';\nimport Post from './components/Post';\n\nimport styles from './styles.scss';\n\nconst I18nPrefix = 'components.discussions';\n\nclass Discussion extends React.Component {\n state = {\n isLoading: true,\n posts: [],\n totalPosts: null,\n page: null,\n discussionPath: this.props.discussionPath,\n error: false,\n currentAthlete: this.props.currentAthlete\n };\n\n componentDidMount() {\n this.fetchData();\n }\n\n fetchData = (params = {}) => {\n const { discussionPath } = this.state;\n const instance = createNetworkingClient();\n this.setState({ isLoading: true });\n\n instance\n .get(discussionPath, {\n params,\n headers: { Accept: 'text/javascript' }\n })\n .then((response) => {\n if (response && response.status === 200) {\n this.onFetchSuccess(response.data);\n } else {\n this.onFetchFail();\n }\n })\n .catch(() => this.onFetchFail());\n };\n\n onFetchFail = () => {\n this.setState({ isLoading: false, error: true });\n };\n\n onFetchSuccess = (data) => {\n this.setState((state) => ({\n isLoading: false,\n posts: [...state.posts, ...data.posts],\n totalPosts: data.total_posts,\n page: data.page\n }));\n };\n\n onCreateSuccess = (createdPost) => {\n this.setState((prevState) => ({\n posts: [createdPost, ...prevState.posts],\n totalPosts: prevState.totalPosts + 1\n }));\n };\n\n deletePost = (postId) => {\n const { discussionPath } = this.state;\n const instance = createNetworkingClient();\n\n instance\n .delete(`${discussionPath}/${postId}`)\n .then((response) => {\n if (response && response.status === 200) {\n this.onDeleteSuccess(response.data);\n } else {\n this.onDeleteFail();\n }\n })\n .catch(() => this.onDeleteFail());\n };\n\n onDeleteFail = () => {\n throw new Error('Something went wrong deleting your post');\n };\n\n onDeleteSuccess = (data) => {\n const { posts, totalPosts } = this.state;\n this.setState({\n posts: posts.filter((item) => item.id !== parseInt(data.id, 10)),\n totalPosts: totalPosts - 1\n });\n };\n\n reportPost = (postId) => {\n window.location = `/posts/${postId}/feedback`;\n };\n\n onSeeMore = () => {\n const { page } = this.state;\n this.fetchData({ page: page + 1 });\n };\n\n renderButtonOrSpinner = () => {\n const { isLoading, posts, totalPosts, error } = this.state;\n\n if (isLoading) {\n return (\n {avatar}
\n \n
\n\n {Object.keys(getAction()).length !== 0 && (\n \n \n {authorName}\n \n
\n \n {Cldr.formatTimespan(timestamp)}\n
\n \n
\n {(comments.length > 0 || currentAthlete) && (\n {bodyText}
\n\n
\n );\n }\n if (posts.length < totalPosts && !isLoading) {\n return (\n \n \n
\n );\n }\n return null;\n };\n\n renderPosts = () => {\n const { posts, currentAthlete } = this.state;\n\n return posts.map((post) => (\n \n {currentAthlete && (\n \n {posts.length === 0 && !isLoading ? (\n
\n {this.renderButtonOrSpinner()}\n \n );\n }\n}\n\nDiscussion.defaultProps = {\n currentAthlete: null\n};\n\nDiscussion.propTypes = {\n currentAthlete: PropTypes.shape({}),\n discussionPath: PropTypes.string.isRequired\n};\n\nexport default Discussion;\n","// extracted by mini-css-extract-plugin\nexport default {\"line\":\"CollapsibleSection--line--Gjb6T\",\"subsection\":\"CollapsibleSection--subsection--S7K8c\",\"dark\":\"CollapsibleSection--dark--RJ5au\",\"light\":\"CollapsibleSection--light--srjAr\",\"subsection-container\":\"CollapsibleSection--subsection-container--xemH+\",\"subsectionContainer\":\"CollapsibleSection--subsection-container--xemH+\",\"section-image\":\"CollapsibleSection--section-image--+3bOl\",\"sectionImage\":\"CollapsibleSection--section-image--+3bOl\"};","import { useEffect, useState, useRef } from 'react';\nimport I18n from 'utils/I18n';\nimport createNetworkingClient from 'utils/networking-client';\n\nimport { isEqual } from 'lodash-es';\n\nexport const STATUS = {\n idle: 'idle',\n pending: 'pending',\n resolved: 'resolved',\n rejected: 'rejected',\n restricted: 'restricted'\n};\n\nexport const CATEGORIES = {\n gender: 'gender', // Overall tab has gender filters - overall, men, and women\n following: 'following',\n club: 'club',\n country: 'country',\n age: 'age',\n weight: 'weight'\n};\n\nexport const PREMIUM_CATEGORIES = ['age', 'weight'];\n\nconst I18N_PREFIX = 'strava.challenges.challenge_detail.leaderboard';\nconst noResultsMsg = () => I18n.t(`${I18N_PREFIX}.no_results_found`);\n\nconst unprocessableClubMsg = () => I18n.t(`${I18N_PREFIX}.unprocessable_club`);\nconst errorState = () => {\n return {\n data: { entries: [], viewingAthletePublicEntry: null },\n status: STATUS.rejected,\n message: I18n.t(`${I18N_PREFIX}.error_message`)\n };\n};\n\nfunction useDeepCompareMemoize(value) {\n const prev = useRef();\n const id = useRef(0);\n if (!isEqual(value, prev.current)) {\n id.current += 1;\n prev.current = value;\n }\n return id.current;\n}\n\nconst useFetchLeaderboardData = ({\n weightMeasurementUnit,\n challengeId,\n joined,\n subscribed,\n params\n}) => {\n const [state, setState] = useState({\n status: STATUS.idle,\n data: {\n entries: [],\n viewingAthletePublicEntry: null\n },\n message: null\n });\n\n const buildParams = ({\n before,\n after,\n category,\n sub_category: subCategory,\n limit\n }) => {\n let paramCategory = category;\n if (category === 'weight') {\n paramCategory =\n weightMeasurementUnit === 'kg' ? 'metric_weight' : 'imperial_weight';\n }\n const base = {\n category: paramCategory,\n sub_category: subCategory,\n limit\n };\n\n if (after) {\n return {\n ...base,\n after_athlete_id: after.athlete_id,\n after_rank: after.rank,\n after_value: after.value\n };\n }\n if (before) {\n return {\n ...base,\n before_athlete_id: before.athlete_id,\n before_rank: before.rank,\n before_value: before.value\n };\n }\n return base;\n };\n\n useEffect(() => {\n if (!subscribed && PREMIUM_CATEGORIES.includes(params.category)) {\n setState({\n data: { entries: [], viewingAthletePublicEntry: null },\n status: STATUS.restricted,\n message: I18n.t(`${I18N_PREFIX}.subscribe_weight_and_age`)\n });\n } else if (\n params.category === CATEGORIES.club &&\n params.sub_category == null\n ) {\n // club subcategory not available, athlete is not in any clubs\n const noClubsState = {\n data: { entries: [], viewingAthletePublicEntry: null },\n status: STATUS.resolved,\n message: noResultsMsg()\n };\n setState(noClubsState);\n } else {\n setState({\n status: STATUS.pending,\n data: state.data\n });\n const url = `/frontend/challenges/${challengeId}/leaderboard`;\n createNetworkingClient()\n .get(url, { params: buildParams(params) })\n .then((response) => {\n if (response && response.status === 200) {\n const { showLeaderboard } = response.data;\n // all responses with leaderboards\n if (showLeaderboard) {\n const successState = {\n data: response.data,\n status: STATUS.resolved,\n message:\n response.data.entries.length === 0 ? noResultsMsg() : null\n };\n setState(successState);\n }\n // large clubs that do not have leaderboards\n else if (!showLeaderboard && params.category === CATEGORIES.club) {\n const unprocessableClubState = {\n data: {\n ...response.data,\n entries: [],\n viewingAthletePublicEntry: null\n },\n status: STATUS.resolved,\n message: unprocessableClubMsg()\n };\n setState(unprocessableClubState);\n } else {\n // fallback for all other requests that do not have leaderboards\n setState(errorState());\n }\n } else {\n // Response status codes other than 200\n setState(errorState());\n }\n })\n .catch(() => {\n setState(errorState());\n });\n }\n }, [challengeId, joined, useDeepCompareMemoize(params)]);\n\n return state;\n};\n\nexport default useFetchLeaderboardData;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"CurrentPlace--container--2iZvO\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Cldr from 'utils/Cldr';\nimport styles from './styles.scss';\n\nconst CurrentPlace = ({ currentPlaceLabel, viewingAthleteRank, size }) => (\n \n {I18n.t(`${I18nPrefix}.empty_state`)}\n
\n ) : (\n this.renderPosts()\n )}\n \n \n {currentCategoryHasFilters && (\n onFilterChangeCallback(option.value)}\n value={\n filterOptions.filter((o) => o.value === currentSubcategory)[0]\n }\n ariaLabel=\"filter\"\n />\n )}\n
\n \n \n \n {Object.keys(categories).map((tabKey) => (\n \n \n ))}\n \n
\n \n {categories[tabKey].premium && (\n
\n \n
\n )}\n {categories[tabKey].title}
\n \n \n
\n \n
\n \n {I18n.t(\n 'strava.challenges.challenge_detail.leaderboard.premium_leaderboards'\n )}\n
\n{message}
\n \n \n {I18n.t(\n 'strava.challenges.challenge_detail.leaderboard.subscribe'\n )}\n \n
\n \n
\n \n {paginationLabel && (\n \n {paginationLabel}\n
\n )}\n \n \n {thead(columnHeaders)}\n \n {tbody(resultRows, columnHeaders, status, message, onSubscribeCallback)}\n \n {tfoot(\n resultRows,\n status,\n columnHeaders,\n isFirstPage,\n isLastPage,\n onNextPageCallback,\n onPrevPageCallback,\n paginationLabel\n )}\n
\n
\n);\n\nLeaderboardsTable.defaultProps = {\n onNextPageCallback: () => {},\n onPrevPageCallback: () => {},\n onSubscribeCallback: () => {},\n resultRows: [],\n columnHeaders: [],\n status: STATUS.idle,\n isLastPage: false,\n isFirstPage: false,\n message: '',\n paginationLabel: null,\n className: null\n};\n\nLeaderboardsTable.propTypes = {\n columnHeaders: PropTypes.arrayOf(\n PropTypes.shape({\n style: PropTypes.string,\n label: PropTypes.string,\n styleName: PropTypes.string\n })\n ),\n resultRows: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n value: PropTypes.arrayOf(\n PropTypes.shape({ id: PropTypes.number, value: PropTypes.any })\n )\n })\n ),\n onNextPageCallback: PropTypes.func,\n onPrevPageCallback: PropTypes.func,\n onSubscribeCallback: PropTypes.func,\n status: PropTypes.oneOf(Object.keys(STATUS)),\n isLastPage: PropTypes.bool,\n isFirstPage: PropTypes.bool,\n message: PropTypes.string,\n paginationLabel: PropTypes.string,\n className: PropTypes.string\n};\n\nexport default LeaderboardsTable;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"Leaderboard--container--PJWVx\",\"progress\":\"Leaderboard--progress--Bq2yF\",\"bar\":\"Leaderboard--bar--inhxs\",\"percent\":\"Leaderboard--percent--6RliV\",\"avatar-and-name-container\":\"Leaderboard--avatar-and-name-container--PqA52\",\"avatarAndNameContainer\":\"Leaderboard--avatar-and-name-container--PqA52\",\"avatar\":\"Leaderboard--avatar--xrmSr\",\"details\":\"Leaderboard--details--iggfk\",\"name\":\"Leaderboard--name--nNWT5\",\"location\":\"Leaderboard--location--qCpmz\",\"privacy-section\":\"Leaderboard--privacy-section--PTdz2\",\"privacySection\":\"Leaderboard--privacy-section--PTdz2\",\"copy\":\"Leaderboard--copy--OJoTc\"};","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport I18n from 'utils/I18n';\nimport Avatar from '@strava/ui/Avatar';\nimport { trackV2 } from 'utils/analytics';\nimport Cldr from 'utils/Cldr';\nimport { countries, lookup } from 'country-data';\nimport ActionsLockClosedNormalSmall from '@strava/icons/ActionsLockClosedNormalSmall';\nimport useFetchLeaderboardData, {\n STATUS,\n CATEGORIES,\n PREMIUM_CATEGORIES\n} from './useFetchLeaderboardData';\nimport CurrentPlace from './CurrentPlace';\nimport CategoryTabs from './CategoryTabs';\nimport LeaderboardsTable from './LeaderboardsTable';\nimport ProgressBar from '../ProgressBar';\n\nimport styles from './styles.scss';\n\nconst I18N_PREFIX = 'strava.challenges.challenge_detail.leaderboard';\n\n// Overall tab - subcategory filters\nconst GENDER_SUB_CATEGORIES = {\n overall: 'overall',\n men: 'men',\n women: 'women'\n};\n\n// Age Group - subcategory filters\nconst AGE_SUB_CATEGORIES = {\n bucket_0_19: '0_19',\n bucket_20_24: '20_24',\n bucket_25_34: '25_34',\n bucket_35_44: '35_44',\n bucket_45_54: '45_54',\n bucket_55_64: '55_64',\n bucket_65_69: '65_69',\n bucket_70_74: '70_74',\n bucket_75_plus: '75_plus'\n};\n\nconst COUNTRY_SUB_CATEGORIES = countries.all\n .filter((c) => c.alpha3 !== '' && c.status === 'assigned')\n .map((c) => ({\n name: c.name,\n code: c.alpha3\n }))\n .sort((c1, c2) => {\n return c1.name.localeCompare(c2.name);\n });\n\nconst DEFAULT_PAGE_LIMIT = 20;\n\nconst Leaderboard = ({ currentAthlete, challengeId, limit, joined }) => {\n const [params, setParams] = useState({\n category: CATEGORIES.gender,\n sub_category: GENDER_SUB_CATEGORIES.overall,\n limit\n });\n\n const weightMeasurementUnit =\n (currentAthlete && currentAthlete.weight_measurement_unit) || 'lbs';\n\n const { data, status, message } = useFetchLeaderboardData({\n challengeId,\n joined,\n params,\n weightMeasurementUnit,\n subscribed: (currentAthlete && currentAthlete.subscribed) || false\n });\n const {\n entries,\n viewingAthletePublicEntry,\n activityType,\n size,\n dimension,\n showActivityCount,\n challengeType,\n isTeamChallenge\n } = data;\n\n const weightCategories = () => {\n if (weightMeasurementUnit === 'kg') {\n return [\n '0_54_kg',\n '55_64_kg',\n '65_74_kg',\n '75_84_kg',\n '85_94_kg',\n '95_104_kg',\n '105_114_kg',\n '115_plus_kg'\n ];\n }\n return [\n '0_124_lb',\n '125_149_lb',\n '150_164_lb',\n '165_179_lb',\n '180_199_lb',\n '200_224_lb',\n '225_249_lb',\n '250_plus_lb'\n ];\n };\n\n const defaultClub = currentAthlete && Object.keys(currentAthlete.clubs)[0];\n\n const trackAnalytics = (elementData, category, subCategory) => {\n trackV2({\n page: 'challenge_details',\n category: 'challenges',\n ...elementData,\n properties: {\n viewing_athlete_id: currentAthlete ? currentAthlete.id : null,\n challenge_id: challengeId,\n leaderboard_category_type: category,\n leaderboard_subcategory_type: subCategory\n }\n });\n };\n\n useEffect(() => {\n trackAnalytics(\n {\n element: 'challenge_leaderboards',\n action: 'screen_enter'\n },\n params.category,\n params.sub_category\n );\n }, []);\n\n const currentAthleteCountryISO = () => {\n const country = lookup.countries({ name: currentAthlete.country })[0];\n return country ? country.alpha3 : 'USA';\n };\n\n const activityCountLabel = () => {\n if (activityType === 'run') return I18n.t(`${I18N_PREFIX}.columns.runs`);\n if (activityType === 'ride') return I18n.t(`${I18N_PREFIX}.columns.rides`);\n return I18n.t(`${I18N_PREFIX}.columns.activities`);\n };\n\n const dimensionLabel = () => {\n if (dimension === 'elevation_gain' || dimension === 'elevation_loss')\n return I18n.t(`${I18N_PREFIX}.columns.elevation`);\n if (dimension === 'elapsed_time' || dimension === 'moving_time')\n return I18n.t(`${I18N_PREFIX}.columns.time`);\n if (dimension === 'distance')\n return I18n.t(`${I18N_PREFIX}.columns.distance`);\n if (dimension === 'avg_pace_min_distance')\n return I18n.t(`${I18N_PREFIX}.columns.pace`);\n return '';\n };\n\n // Overall filter is technically not a filter since that is a superset of\n // all the entries. The other filters are a subset.\n const hasFilteredEntrySubset = () => {\n return !(\n params.category === CATEGORIES.gender &&\n params.sub_category === GENDER_SUB_CATEGORIES.overall\n );\n };\n\n const showDistanceColumn = dimension === 'avg_pace_min_distance';\n\n const showProgressColumn =\n challengeType !== 'BestActivityChallenge' && !isTeamChallenge;\n\n const columnHeaders = () => {\n const headers = [\n {\n id: 1,\n label: I18n.t(`${I18N_PREFIX}.columns.overall`),\n styleName: 'overallRank'\n },\n {\n id: 2,\n label: I18n.t(`${I18N_PREFIX}.columns.name`),\n styleName: 'name'\n },\n { id: 4, label: dimensionLabel(), styleName: 'dimension' }\n ];\n if (showProgressColumn) {\n headers.push({\n id: 5,\n label: I18n.t(`${I18N_PREFIX}.columns.progress`),\n styleName: 'progress'\n });\n }\n\n if (hasFilteredEntrySubset()) {\n headers.splice(1, 0, {\n id: 6,\n label: I18n.t(`${I18N_PREFIX}.columns.place`),\n styleName: 'filteredEntryPlace'\n });\n // Readjust name column\n headers[2].style = styles.nameShort;\n }\n // hide/show activity count column\n if (showActivityCount) {\n headers.splice(hasFilteredEntrySubset() ? 3 : 2, 0, {\n id: 3,\n label: activityCountLabel(),\n styleName: 'activityCount'\n });\n }\n // hide/show extra distance column\n if (showDistanceColumn) {\n headers.splice(hasFilteredEntrySubset() ? 3 : 2, 0, {\n id: 7,\n label: I18n.t(`${I18N_PREFIX}.columns.distance`),\n styleName: 'distance'\n });\n }\n\n return headers;\n };\n\n const progressBar = (progressPercentage, progressFraction) => {\n return (\n \n 1 ? 1 : progressFraction || 0}\n />\n
\n );\n };\n\n const avatarColumn = (athlete) => (\n {progressPercentage}
\n \n
\n );\n\n const dimensionValueColumn = (entry) => {\n if (entry.activityLink) {\n return {entry.dimensionValue};\n }\n\n return entry.dimensionValue;\n };\n\n const isViewingAthleteEntry = (entryAthleteId) =>\n currentAthlete && entryAthleteId === currentAthlete.id;\n\n const extractColumnValuesForEntry = (entry) => {\n const displayRowColumns = [\n {\n id: 1,\n value: (entry && Cldr.formatDecimal(entry.overallRank)) || '...'\n },\n { id: 2, value: (entry && avatarColumn(entry.athlete)) || '...' },\n { id: 4, value: (entry && dimensionValueColumn(entry)) || '...' }\n ];\n if (showProgressColumn) {\n displayRowColumns.push({\n id: 5,\n value:\n (entry &&\n progressBar(entry.progressPercentage, entry.progressFraction)) ||\n '...'\n });\n }\n if (hasFilteredEntrySubset()) {\n displayRowColumns.splice(1, 0, {\n id: 6,\n value: (entry && Cldr.formatDecimal(entry.place)) || '--'\n });\n }\n // hide/show activity count column\n if (showActivityCount) {\n displayRowColumns.splice(hasFilteredEntrySubset() ? 3 : 2, 0, {\n id: 3,\n value: (entry && Cldr.formatDecimal(entry.activityCount)) || '...'\n });\n }\n // hide/show distance column\n if (showDistanceColumn) {\n displayRowColumns.splice(hasFilteredEntrySubset() ? 3 : 2, 0, {\n id: 7,\n value: (entry && entry.formattedDistance) || '--'\n });\n }\n return displayRowColumns;\n };\n\n const rowsWithDisplayValuesOnly = () => {\n const displayRows = [];\n let viewingAthleteIsOnPage = false;\n entries.forEach((entry, index) => {\n const isViewingAthlete = isViewingAthleteEntry(entry.athlete.id);\n if (isViewingAthlete) {\n viewingAthleteIsOnPage = true;\n }\n const row = {\n id: index,\n highlight: isViewingAthlete\n };\n row.value = extractColumnValuesForEntry(entry);\n displayRows.push(row);\n });\n // Build contextual position row for viewing athlete if:\n // 1. Viewing athlete public entry is present - athlete is participating in challenge\n // 2. Viewing athlete entry does not fall into current page ranking range\n // 3. Page has result rows\n // 4. Viewing athlete entry is on a later page (one of the next-pages)\n if (\n viewingAthletePublicEntry &&\n !viewingAthleteIsOnPage &&\n entries.length > 0 &&\n entries.slice(-1)[0].place < viewingAthletePublicEntry.place\n ) {\n // dummy row\n displayRows.push({\n id: entries.length + 1,\n highlight: false,\n value: extractColumnValuesForEntry()\n });\n displayRows.push({\n id: entries.length + 2,\n highlight: true,\n value: extractColumnValuesForEntry(viewingAthletePublicEntry)\n });\n }\n return displayRows;\n };\n\n // Builds leaderboard categories and their respective sub-category filter labels\n // This dictionary is used to populate leaderboard tabs and the values in the filter\n // dropdown for that particular category.\n // eg.\n // { gender: {\n // title:\"Overall\",\n // subCategories:{male: \"Male\", female: \"Female\", overall: \"Overall\" ...}\n // } }\n const categories = () => {\n const categoriesMap = {};\n // logged out athletes should only see overall tab\n if (currentAthlete) {\n Object.keys(CATEGORIES).forEach((category) => {\n categoriesMap[category] = {\n title: I18n.t(`${I18N_PREFIX}.categories.${category}`),\n premium: PREMIUM_CATEGORIES.includes(category)\n };\n });\n } else {\n categoriesMap[CATEGORIES.gender] = {\n title: I18n.t(`${I18N_PREFIX}.categories.gender`),\n premium: PREMIUM_CATEGORIES.includes(CATEGORIES.gender)\n };\n }\n // populate categories with their respective sub_categories\n Object.keys(categoriesMap).forEach((category) => {\n const subCategoryMap = {};\n\n switch (category) {\n // Overall tab - subcategoy\n case CATEGORIES.gender:\n Object.keys(GENDER_SUB_CATEGORIES).forEach((subCategory) => {\n subCategoryMap[subCategory] = I18n.t(\n `${I18N_PREFIX}.sub_categories.gender.${subCategory}`\n );\n });\n break;\n // Age tab - subcategory filter options\n case CATEGORIES.age:\n Object.values(AGE_SUB_CATEGORIES).forEach((subCategory) => {\n subCategoryMap[subCategory] = I18n.t(\n `${I18N_PREFIX}.sub_categories.age.${subCategory}`\n );\n });\n break;\n // Country tab - subcategory filter options\n case CATEGORIES.country:\n COUNTRY_SUB_CATEGORIES.forEach((f) => {\n subCategoryMap[f.code] = f.name;\n });\n break;\n // Clubs tab\n case CATEGORIES.club:\n Object.keys(currentAthlete.clubs).forEach((clubId) => {\n subCategoryMap[clubId] = currentAthlete.clubs[clubId];\n });\n break;\n // Weight tab\n case CATEGORIES.weight:\n weightCategories().forEach((weightCategory) => {\n subCategoryMap[weightCategory] = I18n.t(\n `${I18N_PREFIX}.sub_categories.weight.${weightCategory}`\n );\n });\n break;\n default:\n }\n categoriesMap[category].subCategories = subCategoryMap;\n });\n return categoriesMap;\n };\n\n const handleSubscribeClick = (e) => {\n e.preventDefault();\n trackAnalytics(\n {\n element: 'subscribe_btn',\n action: 'click'\n },\n params.category,\n params.sub_category\n );\n\n window.location = e.target.href;\n };\n\n const onNextClick = () => {\n const row = entries.slice(-1)[0];\n setParams((prevParams) => {\n // Remove before from params (can only navigate in one direction)\n const { before, ...rest } = prevParams;\n return {\n ...rest,\n after: {\n rank: row.place,\n value: row.value,\n athlete_id: row.athlete.id\n }\n };\n });\n trackAnalytics(\n {\n element: 'pagination_next_btn',\n action: 'click'\n },\n params.category,\n params.sub_category\n );\n };\n\n const onPrevClick = () => {\n const row = entries[0];\n setParams((prevParams) => {\n // Remove after from params (can only navigate in one direction)\n const { after, ...rest } = prevParams;\n return {\n ...rest,\n before: {\n rank: row.place,\n value: row.value,\n athlete_id: row.athlete.id\n }\n };\n });\n trackAnalytics(\n {\n element: 'pagination_prev_btn',\n action: 'click'\n },\n params.category,\n params.sub_category\n );\n };\n\n // Leaderboard tabs [ Overall, I'm Following, Clubs, Country etc... ]\n const onTabChange = (i) => {\n // Reset pagination progress and current filter when tab is changed\n const { before, after, sub_category: _, ...rest } = params;\n const newParams = { ...rest };\n switch (i) {\n case 0:\n newParams.category = CATEGORIES.gender;\n newParams.sub_category = GENDER_SUB_CATEGORIES.overall;\n break;\n case 1:\n // Following tab (has no filters)\n newParams.category = CATEGORIES.following;\n break;\n case 2:\n newParams.category = CATEGORIES.club;\n if (defaultClub) {\n newParams.sub_category = defaultClub;\n }\n break;\n case 3:\n newParams.category = CATEGORIES.country;\n newParams.sub_category = currentAthleteCountryISO();\n break;\n case 4:\n newParams.category = CATEGORIES.age;\n newParams.sub_category = currentAthlete.ageGroup;\n break;\n case 5:\n newParams.category = CATEGORIES.weight;\n newParams.sub_category = currentAthlete.weight_group.concat(\n weightMeasurementUnit === 'kg' ? '_kg' : '_lb'\n );\n break;\n default:\n }\n\n setParams(newParams);\n trackAnalytics(\n {\n element: 'category_tab',\n action: 'click'\n },\n newParams.category,\n newParams.sub_category\n );\n };\n\n const onFilterChange = (subCategory) => {\n // Reset pagination progress when filter is changed\n const { before, after, ...rest } = params;\n setParams({\n ...rest,\n sub_category: subCategory\n });\n trackAnalytics(\n { element: 'leaderboard_filter', action: 'click' },\n params.category,\n subCategory\n );\n };\n\n const tableColumnHeaders = columnHeaders();\n\n const buildPaginationLabel = () => {\n if (status === STATUS.resolved && entries.length > 0) {\n return I18n.t(`${I18N_PREFIX}.pagination_label`, {\n topRowRank: Cldr.formatDecimal(entries[0].place) || '--',\n bottomRowRank: Cldr.formatDecimal(entries.slice(-1)[0].place) || '--',\n leaderboardSize: Cldr.formatDecimal(size) || '--'\n });\n }\n return `--`;\n };\n\n const leaderboardData = {\n currentCategory: params.category,\n currentSubcategory: params.sub_category,\n viewingAthleteRank:\n viewingAthletePublicEntry && viewingAthletePublicEntry.place,\n categories: categories(),\n columnHeaders: tableColumnHeaders,\n size,\n currentPlaceLabel: I18n.t(`${I18N_PREFIX}.current_place`),\n status,\n limit: params.limit,\n message,\n resultRows: rowsWithDisplayValuesOnly(),\n isLastPage: entries.length > 0 && entries.slice(-1)[0].place === size,\n isFirstPage: entries.length > 0 && entries[0].place === 1,\n paginationLabel: buildPaginationLabel()\n };\n\n return (\n \n
\n \n
\n \n {athlete.name}\n
\n {athlete.location}
\n \n {!isTeamChallenge &&
\n );\n};\nLeaderboard.defaultProps = {\n currentAthlete: null,\n limit: DEFAULT_PAGE_LIMIT,\n joined: false\n};\n\nLeaderboard.propTypes = {\n currentAthlete: PropTypes.shape({\n id: PropTypes.number,\n ageGroup: PropTypes.string,\n country: PropTypes.string,\n clubs: PropTypes.shape({}),\n weight_measurement_unit: PropTypes.string,\n weight_group: PropTypes.string,\n subscribed: PropTypes.bool\n }),\n challengeId: PropTypes.number.isRequired,\n limit: PropTypes.number,\n joined: PropTypes.bool\n};\n\nexport default Leaderboard;\nexport { I18N_PREFIX };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Collapsible from 'react-collapsible';\n\nimport CollapsibleTitleWithCaret from 'components/CollapsibleTitleWithCaret';\nimport Discussion from 'components/Discussions';\nimport { connect } from 'react-redux';\nimport QualifyingActivities from '../QualifyingActivities';\nimport styles from './styles.scss';\n\nimport Leaderboard from '../Leaderboard';\n\nconst CollapsibleSection = ({\n challengeId,\n sections,\n currentAthlete,\n joined\n}) => {\n const createMarkup = (html) => ({ __html: html });\n\n const buildSections = () =>\n sections.map((section) => (\n \n
\n \n {I18n.t(\n `${I18N_PREFIX}.${\n isTeamChallenge ? 'team_privacy_v2' : 'privacy_v3'\n }`\n )}\n
\n \n
\n \n \n {section.content.map((content) => (\n
\n ))}\n \n {content.heading && (\n \n {content.heading}\n
\n )}\n\n {/* HTML is being (dangerously) rendered because this description is\n added by an admin from a dashboard on admin.strava.com */}\n {content.text && (\n \n \n ));\n\n return (\n
\n {sections.length > 0 && buildSections(sections)}\n
\n );\n};\n\nCollapsibleSection.defaultProps = {\n currentAthlete: null,\n joined: false\n};\n\nCollapsibleSection.propTypes = {\n challengeId: PropTypes.number.isRequired,\n sections: PropTypes.arrayOf(\n PropTypes.shape({\n title: PropTypes.string.isRequired,\n content: PropTypes.arrayOf(\n PropTypes.shape({\n key: PropTypes.string.isRequired,\n heading: PropTypes.string,\n text: PropTypes.string,\n imageUrl: PropTypes.string,\n imageTitle: PropTypes.string,\n qualifyingActivities: PropTypes.arrayOf(PropTypes.shape({}))\n })\n ).isRequired,\n openOnLoad: PropTypes.bool.isRequired\n })\n ).isRequired,\n currentAthlete: PropTypes.shape({}),\n joined: PropTypes.bool\n};\n\nexport default connect((state) => ({\n joined: state.joined\n}))(CollapsibleSection);\n\nexport { CollapsibleSection };\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"Facepile--container--2nJHN\",\"avatar-list\":\"Facepile--avatar-list--4j4R0\",\"avatarList\":\"Facepile--avatar-list--4j4R0\",\"avatar\":\"Facepile--avatar--1V7OV\",\"avatar-img\":\"Facepile--avatar-img--rr1lE\",\"avatarImg\":\"Facepile--avatar-img--rr1lE\",\"message\":\"Facepile--message--WDyJB\",\"xsmall\":\"Facepile--xsmall--5nxJ7\",\"small\":\"Facepile--small--BEBrE\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Avatar from '@strava/ui/Avatar';\n\nimport styles from './styles.scss';\n\nconst messageTextStyleClass = (size) => {\n return size === 'small' ? `text-subhead` : `text-caption1`;\n};\n\nconst Facepile = ({ athletes, message, size, className, ...props }) => (\n \n
\n);\n\nFacepile.propTypes = {\n athletes: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n displayName: PropTypes.string.isRequired,\n profileImg: PropTypes.string.isRequired\n })\n ).isRequired,\n message: PropTypes.string,\n size: PropTypes.oneOf(['xsmall', 'small']),\n className: PropTypes.string\n};\n\nFacepile.defaultProps = {\n message: null,\n size: null,\n className: ''\n};\n\nexport default Facepile;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Tabs as ReactTabs } from 'react-tabs';\n\nconst Tabs = ({ children, className, defaultIndex, ...props }) => (\n - \n {athletes.map((athlete) => (\n
- \n
\n {message}\n
\n )}\n \n {friend.name}\n
\n {friend.location}
\n \n \n \n \n
\n \n);\n\nFriendsList.defaultProps = {\n friends: null\n};\n\nFriendsList.propTypes = {\n modalIsOpen: PropTypes.bool.isRequired,\n friendsRequested: PropTypes.bool.isRequired,\n friends: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n avatarSrc: PropTypes.string,\n athletePath: PropTypes.string,\n location: PropTypes.string\n })\n ),\n closeModal: PropTypes.func.isRequired,\n onModalOpen: PropTypes.func.isRequired,\n challengeLogo: PropTypes.string.isRequired,\n challengeName: PropTypes.string.isRequired\n};\n\nexport default FriendsList;\n","// extracted by mini-css-extract-plugin\nexport default {\"facepile-wrapper\":\"Followers--facepile-wrapper--usVMO\",\"facepileWrapper\":\"Followers--facepile-wrapper--usVMO\",\"facepile\":\"Followers--facepile--AgKJn\"};","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport createNetworkingClient from 'utils/networking-client';\nimport I18n from 'utils/I18n';\n\nimport Facepile from 'components/shared/Facepile';\n\nimport FriendsList from '../FriendsList';\n\nimport styles from './styles.scss';\n\nconst I18nPrefix = 'strava.challenges.challenge_detail';\n\nclass Followers extends React.Component {\n state = {\n modalIsOpen: false,\n friendsRequested: false,\n friends: null\n };\n\n onModalOpen = () => {\n const { challengeId } = this.props;\n const { friends } = this.state;\n\n if (!friends) {\n this.setState({ friendsRequested: true });\n const instance = createNetworkingClient();\n\n instance\n .get(`/challenges/${challengeId}/friends`)\n .then((response) => {\n if (response && response.status === 200) {\n this.onSuccess(response.data);\n } else {\n this.onFail();\n }\n })\n .catch(() => {\n this.onFail();\n });\n }\n };\n\n onSuccess = (data) => {\n this.setState({ friendsRequested: false, friends: data });\n };\n\n onFail = () => {\n this.setState({ friendsRequested: false });\n throw new Error('Something went wrong...');\n };\n\n openModal = () => {\n this.setState({ modalIsOpen: true });\n };\n\n closeModal = () => {\n this.setState({ modalIsOpen: false });\n };\n\n render() {\n const { modalIsOpen, friendsRequested, friends } = this.state;\n const {\n followersCount,\n followers,\n challengeLogo,\n challengeName,\n size,\n className\n } = this.props;\n\n return (\n \n \n \n\n {/* Smaller screens - mobile */}\n \n \n
\n \n {challengeName}\n
\n\n {challengeName}\n
\n\n \n \n {`Friends ${\n friends ? `(${friends.length})` : ''\n }`} \n \n \n \n \n
\n - \n {friendsRequested ? (\n
- \n
\n \n ) : (\n friends && renderFriends(friends)\n )}\n
\n
\n );\n }\n}\n\nFollowers.defaultProps = {\n size: 'small',\n className: null\n};\n\nFollowers.propTypes = {\n challengeId: PropTypes.number.isRequired,\n challengeLogo: PropTypes.string.isRequired,\n challengeName: PropTypes.string.isRequired,\n followersCount: PropTypes.number.isRequired,\n followers: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n size: PropTypes.string,\n className: PropTypes.string\n};\n\nexport default Followers;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\n\nimport ProgressBar from '../../../shared/components/ProgressBar';\nimport StreaksCalendar from '../../../shared/components/StreaksCalendar';\n\nexport const Progress = ({ streaksCalendar, data }) => {\n if (!Object.keys(data).length) {\n return null;\n }\n\n return (\n \n
\n \n {streaksCalendar ? (\n
\n );\n};\n\nProgress.propTypes = {\n streaksCalendar: PropTypes.bool.isRequired,\n data: PropTypes.shape({}).isRequired\n};\n\nexport default connect(({ progress }) => ({\n data: progress.data,\n streaksCalendar: progress.streaksCalendar\n}))(Progress);\n","export function validateEmail(email) {\n return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(\n email\n );\n}\n\nexport default { validateEmail };\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"EmailInput--container--vek-4\",\"error\":\"EmailInput--error--xUGR-\"};","import React, { Component } from 'react';\nimport CreatableSelect from 'react-select/creatable';\nimport PropTypes from 'prop-types';\n\nimport { validateEmail } from 'utils/validators';\nimport I18n from 'utils/I18n';\n\nimport styles from './styles.scss';\n\nconst I18nPrefix = 'strava.challenges.challenge_detail';\n\nconst createOption = (label) => {\n const email = label.trim().replace(',', '');\n\n return { label: email, value: email };\n};\n\nconst customStyles = {\n container: (provided) => ({\n ...provided,\n width: '100%',\n flex: 1,\n minHeight: 40\n }),\n control: (provided) => ({\n ...provided,\n border: 'solid 1px #ccccd0',\n boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.11)',\n borderRadius: 2,\n minHeight: 40\n }),\n menu: (provided) => ({\n ...provided,\n marginTop: 0,\n borderRadius: '0 0 2px 2px',\n border: 'solid 1px #ccccd0',\n borderTop: 'none',\n boxShadow: '0px 1px 3px 2px rgba(0,0,0,.1)'\n }),\n multiValue: (provided) => ({\n ...provided,\n backgroundColor: '#F0F0F5'\n }),\n multiValueRemove: (provided) => ({\n ...provided,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n color: 'inherit',\n ':hover': {\n backgroundColor: '#6D6D78',\n color: '#fff'\n }\n })\n};\n\nclass EmailInput extends Component {\n state = {\n inputValue: '',\n invalidInput: false,\n value: []\n };\n\n handleChange = (value) => {\n const { handleAddressesChange } = this.props;\n\n this.setState({ value });\n handleAddressesChange(value);\n };\n\n handleInputChange = (inputValue) => {\n this.setState({ inputValue });\n };\n\n validateInput = () => {\n const { inputValue } = this.state;\n\n return validateEmail(inputValue);\n };\n\n updateValue = () => {\n const { inputValue, value } = this.state;\n const { handleAddressesChange } = this.props;\n let newValue;\n\n if (!this.validateInput(inputValue)) {\n this.setState({ inputValue: '', invalidInput: true });\n return;\n }\n if (!value) {\n newValue = [createOption(inputValue)];\n } else {\n newValue = [...value, createOption(inputValue)];\n }\n this.setState({\n inputValue: '',\n value: newValue,\n invalidInput: false\n });\n handleAddressesChange(newValue);\n };\n\n handleKeyDown = (event) => {\n const { inputValue, value } = this.state;\n\n if (!inputValue) return;\n if (value && value.length >= 4) return;\n // eslint-disable-next-line default-case\n switch (event.key) {\n case 'Enter':\n case ',':\n case ' ':\n this.updateValue();\n event.preventDefault();\n }\n };\n\n handleBlur = () => {\n const { inputValue } = this.state;\n\n if (!inputValue) return;\n this.updateValue();\n };\n\n render() {\n const { inputValue, value, invalidInput } = this.state;\n return (\n \n
\n );\n }\n}\n\nEmailInput.propTypes = {\n handleAddressesChange: PropTypes.func.isRequired\n};\n\nexport default EmailInput;\n","// extracted by mini-css-extract-plugin\nexport default {\"above-input\":\"Email--above-input--alcu4\",\"aboveInput\":\"Email--above-input--alcu4\",\"select-input\":\"Email--select-input--4YL59\",\"selectInput\":\"Email--select-input--4YL59\",\"submit-button\":\"Email--submit-button--BxtP2\",\"submitButton\":\"Email--submit-button--BxtP2\",\"spinner\":\"Email--spinner--kaQzG\",\"message\":\"Email--message--h1tDs\",\"error\":\"Email--error--Ao1b7\",\"success\":\"Email--success--UDj1l\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@strava/ui/Button';\nimport Spinner from '@strava/ui/Spinner';\n\nimport createNetworkingClient from 'utils/networking-client';\nimport I18n from 'utils/I18n';\n\nimport EmailInput from '../EmailInput';\n\nimport styles from './styles.scss';\n\nconst I18nPrefix = 'strava.challenges.challenge_detail';\n\nclass Email extends React.Component {\n state = {\n submitRequested: false,\n submitSucceeded: false,\n errorMessage: '',\n successMessage: '',\n addresses: []\n };\n\n handleAddressesChange = (addresses) => {\n if (!addresses) {\n this.setState({ addresses: [] });\n return;\n }\n const emails = addresses.map((address) => address.value);\n this.setState({ addresses: emails });\n };\n\n handleSubmit = () => {\n const { addresses } = this.state;\n const { challengeId, challengeName, currentAthlete } = this.props;\n\n this.setState({ submitRequested: true });\n\n const message = I18n.t(`${I18nPrefix}.invite_message`, {\n athleteName: currentAthlete.name,\n challengeName\n });\n\n const instance = createNetworkingClient();\n\n instance\n .post(`/challenges/${challengeId}/share/send_email`, {\n emails: addresses,\n message\n })\n .then((response) => {\n if (response && response.status === 200) {\n this.onSubmitSuccess(response.data);\n } else {\n this.onSubmitFail();\n }\n })\n .catch(() => {\n this.onSubmitFail();\n });\n };\n\n onSubmitSuccess = () => {\n this.setState({\n submitRequested: false,\n submitSucceeded: true,\n errorMessage: '',\n successMessage: I18n.t(`${I18nPrefix}.success_message`)\n });\n\n setTimeout(() => {\n const { closeModal } = this.props;\n closeModal();\n }, 2000);\n };\n\n onSubmitFail = () => {\n this.setState({\n submitRequested: false,\n errorMessage: I18n.t(`${I18nPrefix}.error_message`)\n });\n };\n\n renderMessage = () => {\n const { errorMessage, successMessage } = this.state;\n\n if (errorMessage) {\n return (\n \n {I18n.t(`${I18nPrefix}.invalid_email`)}\n
\n )}\n {errorMessage}
\n );\n }\n\n if (successMessage) {\n return (\n\n {successMessage}\n
\n );\n }\n\n return null;\n };\n\n render() {\n const { addresses, submitRequested, submitSucceeded } = this.state;\n const { challengeName, currentAthlete } = this.props;\n\n return (\n <>\n {this.renderMessage()}\n {submitRequested ? (\n\n
\n ) : (\n !submitSucceeded && (\n \n \n {I18n.t(`${I18nPrefix}.invite`)}\n \n
\n )\n )}\n \n );\n }\n}\n\nEmail.propTypes = {\n closeModal: PropTypes.func.isRequired,\n challengeId: PropTypes.number.isRequired,\n currentAthlete: PropTypes.shape({\n name: PropTypes.string.isRequired\n }).isRequired,\n challengeName: PropTypes.string.isRequired\n};\n\nexport default Email;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"Select--container--Krxee\",\"avatar\":\"Select--avatar--YN9aw\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Select from 'react-select';\nimport Avatar from '@strava/ui/Avatar';\n\nimport I18n from 'utils/I18n';\n\nimport styles from './styles.scss';\n\nconst I18nPrefix = 'strava.challenges.challenge_detail';\n\nconst FriendOption = ({ name, picture }) => (\n \n {I18n.t(`${I18nPrefix}.to`)}\n \n {I18n.t(`${I18nPrefix}.limit`)}\n \n
\n \n
\n \n
\n {I18n.t(`${I18nPrefix}.message`)}
\n \n {I18n.t(`${I18nPrefix}.invite_message`, {\n athleteName: currentAthlete.name,\n challengeName\n })}\n
\n \n
\n);\n\nFriendOption.propTypes = {\n name: PropTypes.string.isRequired,\n picture: PropTypes.string.isRequired\n};\n\nexport const FriendSelect = ({ options, handleChange }) => {\n const customStyles = {\n container: (provided) => ({\n ...provided,\n flex: 1,\n minHeight: 40\n }),\n control: (provided) => ({\n ...provided,\n border: 'solid 1px #ccccd0',\n boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.11)',\n borderRadius: 2,\n minHeight: 40\n }),\n menu: (provided) => ({\n ...provided,\n marginTop: 0,\n borderRadius: '0 0 2px 2px',\n border: 'solid 1px #ccccd0',\n borderTop: 'none',\n boxShadow: '0px 1px 3px 2px rgba(0,0,0,.1)'\n }),\n multiValue: (provided) => ({\n ...provided,\n backgroundColor: '#F0F0F5'\n }),\n multiValueRemove: (provided) => ({\n ...provided,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n color: 'inherit',\n ':hover': {\n backgroundColor: '#6D6D78',\n color: '#fff'\n }\n })\n };\n\n return (\n {errorMessage}
\n );\n }\n\n if (successMessage) {\n return (\n\n {successMessage}\n
\n );\n }\n\n return null;\n };\n\n render() {\n const { inviteValue, submitRequested, submitSucceeded } = this.state;\n const { friends, challengeName, currentAthlete } = this.props;\n\n return (\n <>\n {this.renderMessage()}\n {submitRequested ? (\n\n
\n ) : (\n !submitSucceeded && (\n \n {I18n.t(`${I18nPrefix}.to`)}\n \n {I18n.t(`${I18nPrefix}.invite`)}\n \n
\n )\n )}\n \n );\n }\n}\n\nStravaInvite.defaultProps = {\n friends: []\n};\n\nStravaInvite.propTypes = {\n friends: PropTypes.arrayOf(PropTypes.shape({})),\n closeModal: PropTypes.func.isRequired,\n challengeId: PropTypes.number.isRequired,\n currentAthlete: PropTypes.shape({\n name: PropTypes.string.isRequired\n }).isRequired,\n challengeName: PropTypes.string.isRequired\n};\n\nexport default StravaInvite;\n","// extracted by mini-css-extract-plugin\nexport default {\"modal-dialog\":\"ShareModal--modal-dialog--8JAWC\",\"modalDialog\":\"ShareModal--modal-dialog--8JAWC\",\"modal-content\":\"ShareModal--modal-content--V2xaI\",\"modalContent\":\"ShareModal--modal-content--V2xaI\",\"close-button\":\"ShareModal--close-button--TAWIV\",\"closeButton\":\"ShareModal--close-button--TAWIV\",\"modal-header\":\"ShareModal--modal-header--3+7-d\",\"modalHeader\":\"ShareModal--modal-header--3+7-d\",\"challenge-logo\":\"ShareModal--challenge-logo--Q-rKd\",\"challengeLogo\":\"ShareModal--challenge-logo--Q-rKd\",\"challenge-name\":\"ShareModal--challenge-name--P3NuL\",\"challengeName\":\"ShareModal--challenge-name--P3NuL\",\"tab-list\":\"ShareModal--tab-list--Eisfl\",\"tabList\":\"ShareModal--tab-list--Eisfl\",\"active-tab\":\"ShareModal--active-tab--LErXu\",\"activeTab\":\"ShareModal--active-tab--LErXu\",\"tab\":\"ShareModal--tab--nreZU\",\"tab-panel\":\"ShareModal--tab-panel--0MYBk\",\"tabPanel\":\"ShareModal--tab-panel--0MYBk\",\"spinner\":\"ShareModal--spinner--avKPB\",\"message\":\"ShareModal--message--UUh9y\",\"error\":\"ShareModal--error--LVpz-\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Spinner from '@strava/ui/Spinner';\n\nimport createNetworkingClient from 'utils/networking-client';\nimport I18n from 'utils/I18n';\nimport MediaQuery, { breakpoints } from 'utils/media-query';\n\nimport Modal from 'components/shared/Modal';\nimport { Tabs, TabList, Tab, TabPanel } from 'components/shared/tabs';\n\nimport Email from '../Email';\nimport StravaInvite from '../StravaInvite';\n\nimport styles from './styles.scss';\n\nexport const I18nPrefix = 'strava.challenges.challenge_detail';\n\nclass ShareModal extends React.Component {\n state = {\n friends: [],\n friendsRequested: false,\n errorMessage: ''\n };\n\n onClose = () => {\n const { closeModal } = this.props;\n\n this.setState({\n friendsRequested: false,\n errorMessage: ''\n });\n\n closeModal();\n };\n\n fetchAthletes = () => {\n const { friends } = this.state;\n\n if (!friends || friends.length < 1) {\n this.setState({ friendsRequested: true });\n const instance = createNetworkingClient();\n\n instance\n .get('/share/autocomplete_athlete_data')\n .then((response) => {\n if (response && response.status === 200) {\n this.fetchAthletesSuccess(response.data);\n } else {\n this.fetchAthletesFail();\n }\n })\n .catch(() => {\n this.fetchAthletesFail();\n });\n }\n };\n\n fetchAthletesSuccess = (data) => {\n this.setState({ friendsRequested: false, friends: data, errorMessage: '' });\n };\n\n fetchAthletesFail = () => {\n this.setState({\n friendsRequested: false,\n errorMessage: I18n.t(`${I18nPrefix}.error_message`)\n });\n };\n\n renderMessage = () => {\n const { errorMessage } = this.state;\n\n return errorMessage ? (\n \n \n
\n \n
\n {I18n.t(`${I18nPrefix}.message`)}
\n \n {I18n.t(`${I18nPrefix}.invite_message`, {\n athleteName: currentAthlete.name,\n challengeName\n })}\n
\n {errorMessage}
\n ) : null;\n };\n\n render() {\n const { friends, friendsRequested } = this.state;\n\n const {\n modalIsOpen,\n challengeId,\n challengeLogoUrl,\n challengeName,\n currentAthlete\n } = this.props;\n\n return (\n\n \n \n \n
\n \n );\n }\n}\n\nShareModal.propTypes = {\n modalIsOpen: PropTypes.bool.isRequired,\n closeModal: PropTypes.func.isRequired,\n challengeId: PropTypes.number.isRequired,\n challengeLogoUrl: PropTypes.string.isRequired,\n currentAthlete: PropTypes.shape({\n name: PropTypes.string.isRequired\n }).isRequired,\n challengeName: PropTypes.string.isRequired\n};\n\nexport default ShareModal;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"InviteFriends--container--W9+05\",\"button\":\"InviteFriends--button--6-0Iv\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@strava/ui/Button';\n\nimport I18n from 'utils/I18n';\n\nimport ShareModal from './components/ShareModal';\n\nimport styles from './styles.scss';\n\nconst I18nPrefix = 'strava.challenges.challenge_detail';\n\nclass InviteFriends extends React.Component {\n state = { modalIsOpen: false };\n\n openModal = () => {\n this.setState({ modalIsOpen: true });\n };\n\n closeModal = () => {\n this.setState({\n modalIsOpen: false\n });\n };\n\n render() {\n const { modalIsOpen } = this.state;\n const {\n outline,\n challengeLogoUrl,\n challengeName,\n currentAthlete,\n challengeId\n } = this.props;\n\n return (\n \n \n \n\n {/* Smaller screens - mobile */}\n \n \n
\n \n {challengeName}\n
\n\n {challengeName}\n
\n\n \n \n \n \n \n Strava\n \n \n \n {I18n.t(`${I18nPrefix}.invite_strava_friends`)}\n \n \n \n \n {this.renderMessage()}\n {friendsRequested ? (\n \n \n \n \n
\n \n
\n ) : (\n \n \n {I18n.t(`${I18nPrefix}.invite_friends`)}\n \n
\n );\n }\n}\n\nInviteFriends.defaultProps = {\n outline: false\n};\n\nInviteFriends.propTypes = {\n challengeId: PropTypes.number.isRequired,\n challengeLogoUrl: PropTypes.string.isRequired,\n currentAthlete: PropTypes.shape({\n name: PropTypes.string.isRequired\n }).isRequired,\n challengeName: PropTypes.string.isRequired,\n outline: PropTypes.bool\n};\n\nexport default InviteFriends;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"ChallengeJoinButton--container--YOfHh\",\"button\":\"ChallengeJoinButton--button--Q7s71\"};","import { split } from 'lodash-es';\n\nexport { timeout } from './devUtils';\n\nexport const generateRandomId = () =>\n Math.random()\n .toString(36)\n .substring(2);\n\n// Capitalizes all the words and replaces some characters in the string to create a nicer looking title.\n// eg. 'man from the boondocks' => 'Man From The Boondocks'\nconst titleize = (str) =>\n str.replace(\n /\\w\\S*/g,\n (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()\n );\n\nexport const displayName = (\n { firstName = '', lastName = '' },\n options = { forceAnonymize: false, maxLength: 100 }\n) => {\n const { maxLength, forceAnonymize } = options;\n const fullName = `${firstName} ${lastName}`;\n\n if (forceAnonymize || fullName.length > maxLength) {\n if (firstName.length > maxLength - 3) {\n return `${titleize(\n firstName.substring(0, maxLength - 4)\n )}... ${lastName.charAt(0).toUpperCase()}.`;\n }\n return `${titleize(firstName)} ${lastName.charAt(0).toUpperCase()}.`;\n }\n return fullName.trim();\n};\n\nexport const isMobile = () => window.navigator.userAgent.includes('Mobile');\n\nexport const dateYearsAgo = (years) => {\n const d = new Date(new Date().toDateString());\n d.setFullYear(d.getFullYear() - years);\n return d;\n};\n\nexport const parseServerDateString = (date) => {\n const dobArray = split(date, '-');\n return {\n year: parseInt(dobArray[0], 10),\n month: parseInt(dobArray[1], 10),\n day: parseInt(dobArray[2], 10)\n };\n};\n\n// eg. given,\n// \"urls\": {\n// \"100\": \"https://photo_url_1\",\n// \"1800\": \"https://photo_url_2\"\n// }\n// returns https://photo_url_2\nexport const getPhotoWithMaxDimension = (photoUrlHash) => {\n const key = Object.keys(photoUrlHash).reduce((a, b) => (a > b ? a : b));\n return photoUrlHash[key];\n};\n\nexport default {\n displayName,\n generateRandomId,\n isMobile,\n dateYearsAgo,\n parseServerDateString,\n getPhotoWithMaxDimension\n};\n","import { dateYearsAgo } from 'utils/generalUtils';\n\nconst GatingHelper = {};\n\nGatingHelper.dateFromString = (str) => new Date(str);\nGatingHelper.dateYearsAgo = (years) => {\n const d = new Date(new Date().toDateString());\n d.setFullYear(d.getFullYear() - years);\n return d;\n};\n\nGatingHelper.shouldShowAgeGateModal = (\n loggedIn,\n joined,\n dateOfBirth,\n gatingConditions\n) => {\n if (joined) {\n return false;\n }\n\n if (!loggedIn) {\n return false;\n }\n\n const minimumAge = gatingConditions && gatingConditions.minimumAge;\n if (!minimumAge) {\n // no gating conditions\n return false;\n }\n\n const dob = dateOfBirth && GatingHelper.dateFromString(dateOfBirth);\n\n if (dob && dob <= dateYearsAgo(minimumAge)) {\n // old enough to join\n return false;\n }\n\n return true;\n};\n\nexport default GatingHelper;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport Button from '@strava/ui/Button';\n\nimport I18n from 'utils/I18n';\n\nimport styles from './styles.scss';\nimport { joinChallenge, leaveChallenge, showAgeModal } from '../../../actions';\nimport GatingHelper from '../../../../shared/helpers/gating_helper';\n\nexport const I18nPrefix = 'strava.challenges.challenge_detail';\n\nexport class ChallengeJoinButton extends React.Component {\n state = {\n keepHovered: false\n };\n\n onJoinChallenge = () => {\n return GatingHelper.shouldShowAgeGateModal(\n this.props.loggedIn,\n this.props.joined,\n this.props.currentAthlete && this.props.currentAthlete.dateOfBirth,\n this.props.gatingConditions\n )\n ? this.props.showAgeModal(\n this.props.gatingConditions,\n () => this.props.onJoinChallenge(this.props.challengeId),\n new Date('1970-1-1')\n )\n : this.props.onJoinChallenge(this.props.challengeId);\n };\n\n onLeaveChallenge = () => this.props.onLeaveChallenge(this.props.challengeId);\n\n onHoverToggle = () =>\n this.setState((prevState) => ({\n keepHovered: !prevState.keepHovered\n }));\n\n joinButton = (externalJoinUrl) => (\n <>\n {externalJoinUrl ? (\n \n {joined ? this.leaveButton() : this.joinButton(externalJoinUrl)}\n
\n );\n }\n}\n\nChallengeJoinButton.defaultProps = {\n externalJoinUrl: null,\n challengeJoinRequested: false,\n challengeLeaveRequested: false,\n gatingConditions: null,\n currentAthlete: null,\n loggedIn: false\n};\n\nChallengeJoinButton.propTypes = {\n onJoinChallenge: PropTypes.func.isRequired,\n onLeaveChallenge: PropTypes.func.isRequired,\n showAgeModal: PropTypes.func.isRequired,\n challengeJoinRequested: PropTypes.bool,\n challengeLeaveRequested: PropTypes.bool,\n challengeId: PropTypes.number.isRequired,\n joined: PropTypes.bool.isRequired,\n externalJoinUrl: PropTypes.string,\n gatingConditions: PropTypes.shape({\n minimumAge: PropTypes.number\n }),\n currentAthlete: PropTypes.shape({\n dateOfBirth: PropTypes.string\n }),\n loggedIn: PropTypes.bool\n};\n\nexport default connect(\n (state) => ({\n challengeJoinRequested: state.challengeJoinRequested,\n challengeLeaveRequested: state.challengeLeaveRequested,\n challengeId: state.challengeId,\n joined: state.joined,\n externalJoinUrl: state.externalJoinUrl\n }),\n {\n onJoinChallenge: joinChallenge,\n onLeaveChallenge: leaveChallenge,\n showAgeModal\n }\n)(ChallengeJoinButton);\n","// extracted by mini-css-extract-plugin\nexport default {\"title\":\"DataGrid--title--fUzww\",\"row\":\"DataGrid--row--kqDUg\",\"grid-item\":\"DataGrid--grid-item--yTJOI\",\"gridItem\":\"DataGrid--grid-item--yTJOI\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Stats from '@strava/ui/Stats';\nimport Stat from '@strava/ui/Stat';\n\nimport Cldr from 'utils/Cldr';\n\nimport styles from './styles.scss';\n\nconst DataGrid = ({ dataGrid, containerClass }) => {\n const formatValue = (value) =>\n typeof value === 'number' ? Cldr.formatDecimal(value) : value;\n\n const addStat = (row) => (\n \n {buildSelectors()}\n
\n );\n};\n\nDropdownDatePicker.defaultProps = {\n className: null,\n dateMax: null,\n dateSelected: null,\n erroredControls: [],\n required: false,\n locale: window.navigator.userLanguage || window.navigator.language,\n disabled: false,\n focusTarget: null,\n enableDefaultFocus: false\n};\n\nDropdownDatePicker.propTypes = {\n className: PropTypes.string,\n dateMax: PropTypes.instanceOf(Date),\n dateSelected: PropTypes.instanceOf(Date),\n dateChangeCallback: PropTypes.func.isRequired,\n erroredControls: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year'])),\n locale: PropTypes.string,\n required: PropTypes.bool,\n disabled: PropTypes.bool,\n focusTarget: PropTypes.string,\n enableDefaultFocus: PropTypes.bool\n};\n\nexport default DropdownDatePicker;\n","export { default } from './DropdownDatePicker';\n","// extracted by mini-css-extract-plugin\nexport default {\"modal\":\"AgeGateModal--modal--1Ti1K\",\"body\":\"AgeGateModal--body--qvB-5\",\"prompt-text\":\"AgeGateModal--prompt-text--c0JTN\",\"promptText\":\"AgeGateModal--prompt-text--c0JTN\",\"controls\":\"AgeGateModal--controls--VXwRS\",\"datepicker\":\"AgeGateModal--datepicker--3vk2o\",\"btn-modal-verify\":\"AgeGateModal--btn-modal-verify--BspCU\",\"btnModalVerify\":\"AgeGateModal--btn-modal-verify--BspCU\",\"btn-modal-dismiss\":\"AgeGateModal--btn-modal-dismiss--+UTrC\",\"btnModalDismiss\":\"AgeGateModal--btn-modal-dismiss--+UTrC\",\"denied-text\":\"AgeGateModal--denied-text--t3QME\",\"deniedText\":\"AgeGateModal--denied-text--t3QME\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Markup } from 'interweave';\n\nimport Modal, { ModalTitle, ModalBody, ModalActions } from '@strava/ui/Modal';\nimport Button from '@strava/ui/Button';\n\nimport I18n from 'utils/I18n';\n\nimport { YOUNGEST_AGE_ON_PLATFORM } from 'constants/appConstants';\nimport { dateYearsAgo } from 'utils/generalUtils';\nimport Helper from '../../../Show/components/ChallengeGalleryJoinButton/helper';\nimport GatingHelper from '../../helpers/gating_helper';\nimport DropdownDatePicker from '../../../../../components/shared/DropdownDatePicker';\n\nimport styles from './styles.scss';\n\nconst I18nPromptHeading = 'strava.challenges.age_gate.prompt.heading';\nconst I18nPromptText = 'strava.challenges.age_gate.prompt.text_html';\nconst I18nPromptCTA = 'strava.challenges.age_gate.prompt.cta';\nconst I18nPromptDismiss = 'strava.challenges.age_gate.prompt.dismiss';\nconst I18nPromptFooter = 'strava.challenges.age_gate.prompt.footer';\nconst I18nDeniedHeading = 'strava.challenges.age_gate.denied.heading';\nconst I18nDeniedText = 'strava.challenges.age_gate.denied.text';\nconst I18nDeniedDismiss = 'strava.challenges.age_gate.denied.dismiss';\n\nconst AgeGateModal = ({\n handleModalClose,\n handleDateSelectionChange,\n handleDateUpdateInProgress,\n handleDateUpdateSuccess,\n handleDateUpdateFailure,\n gatingModal,\n currentAthlete,\n locale\n}) => {\n if (!gatingModal || !currentAthlete) {\n return null;\n }\n\n const {\n gatingConditions,\n ageGate,\n joinChallengeFn,\n requestInProgress\n } = gatingModal;\n\n const { dateOfBirth } = currentAthlete;\n const { minimumAge } = gatingConditions;\n\n if (!minimumAge) {\n return null;\n }\n if (\n dateOfBirth &&\n GatingHelper.dateFromString(dateOfBirth) > dateYearsAgo(minimumAge)\n ) {\n return (\n \n
\n {\n const { month, day, year } = obj;\n let date;\n if (!month || !day || !year) {\n // Force the athlete DOB to be the minimum required date if a date less than the strava minimum age requirement was entered\n // There is an opportunity to handle this differently here:\n // possible alternatives - show an error message?, make drop-downs not required which would allow them\n // to be cleared in this scenario and we can show error state on them (red border) ...\n // This comment was added on update that changed the date-picker component used without modifying\n // current existing business logic.\n date = dateMax;\n } else {\n date = new Date(year, month - 1, day); // UI Jan => 1\n }\n handleDateSelectionChange(date);\n }}\n locale={locale}\n required={true}\n isSearchable={true}\n showFullMonth={true}\n />\n \n {I18n.t(I18nPromptCTA)}\n \n \n {I18n.t(I18nPromptDismiss)}\n \n
\n {I18n.t(I18nPromptFooter, gatingConditions)}\n \n {I18n.t(`${I18nPrefix}.overall_stats`)}\n
\n );\n }\n return null;\n }\n\n function overallStats() {\n if (auxiliaryStats.length > 0) {\n return (\n\n {auxiliaryStats && (\n
\n );\n }\n return null;\n }\n\n function teamStatsHeading() {\n if (showTeamStats && teamStats.length > 0) {\n return (\n \n {I18n.t(`${I18nPrefix}.team_stats`)}\n
\n );\n }\n return null;\n }\n\n function teamStatsList() {\n if (teamStats.length > 0) {\n return (\n\n {teamStats && (\n
\n );\n }\n return null;\n }\n\n if (onlyTeamStats) {\n return (\n \n {teamStatsHeading()}\n {teamStatsList()}\n
\n );\n }\n return (\n\n
\n );\n};\n\nTopSidebar.defaultProps = {\n currentAthlete: null,\n externalJoinUrl: null,\n rewardUrl: '',\n gatingConditions: null,\n gatingModal: null,\n onlyTeamStats: false\n};\n\nTopSidebar.propTypes = {\n currentAthlete: PropTypes.shape({}),\n header: PropTypes.shape({\n name: PropTypes.string.isRequired,\n challengeLogoUrl: PropTypes.string.isRequired\n }).isRequired,\n challengeId: PropTypes.number.isRequired,\n ended: PropTypes.bool.isRequired,\n joined: PropTypes.bool.isRequired,\n externalJoinUrl: PropTypes.string,\n completed: PropTypes.bool.isRequired,\n rewardUrl: PropTypes.string,\n rewardButtonText: PropTypes.string.isRequired,\n loggedIn: PropTypes.bool.isRequired,\n participantCount: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n auxiliaryStats: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n teamStats: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n gatingConditions: PropTypes.shape({}),\n gatingModal: PropTypes.shape({}),\n onHandleModalClose: PropTypes.func.isRequired,\n onHandleDateSelectionChange: PropTypes.func.isRequired,\n onHandleDateUpdateInProgress: PropTypes.func.isRequired,\n onHandleDateUpdateSuccess: PropTypes.func.isRequired,\n onHandleDateUpdateFailure: PropTypes.func.isRequired,\n locale: PropTypes.string.isRequired,\n onlyTeamStats: PropTypes.bool,\n showTeamStats: PropTypes.bool.isRequired\n};\n\nexport default connect(\n (state) => ({\n currentAthlete: state.currentAthlete,\n header: state.header,\n challengeId: state.challengeId,\n ended: state.ended,\n joined: state.joined,\n externalJoinUrl: state.externalJoinUrl,\n completed: state.completed,\n rewardUrl: state.rewardUrl,\n rewardButtonText: state.rewardButtonText,\n loggedIn: state.loggedIn,\n participantCount: state.participantCount,\n auxiliaryStats: state.auxiliaryStats,\n teamStats: state.teamStats,\n gatingConditions: state.gatingConditions,\n gatingModal: state.gatingModal\n }),\n {\n onHandleModalClose: handleModalClose,\n onHandleDateSelectionChange: handleDateSelectionChange,\n onHandleDateUpdateInProgress: handleDateUpdateInProgress,\n onHandleDateUpdateSuccess: handleDateUpdateSuccess,\n onHandleDateUpdateFailure: handleDateUpdateFailure\n }\n)(TopSidebar);\n","// extracted by mini-css-extract-plugin\nexport default {\"header\":\"Show--header--NWmC-\",\"top-row\":\"Show--top-row--siFxa\",\"topRow\":\"Show--top-row--siFxa\",\"bottom-row\":\"Show--bottom-row--slCyt\",\"bottomRow\":\"Show--bottom-row--slCyt\",\"team-challenge-row\":\"Show--team-challenge-row--NG-cs\",\"teamChallengeRow\":\"Show--team-challenge-row--NG-cs\",\"achievements\":\"Show--achievements--Wa45Y\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Provider } from 'react-redux';\nimport { createStore, applyMiddleware } from 'redux';\n\nimport thunk from 'redux-thunk';\n\nimport Analytics from 'utils/analytics';\n\nimport reducer from './reducers';\n\nimport Achievements from './components/Achievements';\nimport Club from './components/Club';\nimport Header from './components/Header';\nimport Summary from '../shared/components/Summary';\nimport CollapsibleSection from '../shared/components/CollapsibleSection';\nimport Followers from './components/Followers';\nimport Progress from './components/Progress';\nimport TopSidebar from './components/TopSidebar';\n\nimport styles from './styles.scss';\nimport ProgressBar from '../shared/components/ProgressBar';\n\nclass Show extends React.Component {\n store = createStore(reducer, { ...this.props }, applyMiddleware(thunk));\n\n componentDidMount() {\n const { challengeId } = this.props;\n\n Analytics.trackV2({\n action: 'screen_enter',\n category: 'challenges',\n page: 'challenge_details',\n properties: { challenge_id: challengeId }\n });\n }\n\n render() {\n const {\n challengeId,\n activityType,\n club,\n header,\n sections,\n followersInChallenge,\n summary,\n achievements,\n currentAthlete,\n joined,\n locale,\n teamProgressBar\n } = this.props;\n\n return (\n {buttonGroup()}
\n \n {participantCount && teamStats.length === 0 && (\n
\n {overallStatsHeading()}\n {overallStats()}\n {showTeamStats && teamStatsHeading()}\n {showTeamStats && teamStatsList()}\n \n
\n \n
\n \n \n
\n \n
\n \n {teamProgressBar && (\n
\n \n
\n \n {teamProgressBar &&
\n \n
\n \n
\n \n {achievements && (\n
\n \n {modalBodyText}\n
\n \n
\n );\n};\n\nDisclaimerText.propTypes = {\n showLoginOption: PropTypes.bool\n};\n\nDisclaimerText.defaultProps = {\n showLoginOption: true\n};\n\nexport default DisclaimerText;\n","export { default } from './DisclaimerText';\n","// extracted by mini-css-extract-plugin\nexport default {\"facebook-button\":\"FacebookButton--facebook-button---mxGR\",\"facebookButton\":\"FacebookButton--facebook-button---mxGR\"};","// extracted by mini-css-extract-plugin\nexport default {\"auth-button\":\"ButtonWrapper--auth-button--7vRBM\",\"authButton\":\"ButtonWrapper--auth-button--7vRBM\"};","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport styles from './index.scss';\n\nexport const LOG_IN = 'log_in';\nexport const SIGN_UP = 'sign_up';\n\nconst ButtonWrapper = ({ children, className, ...options }) => {\n return (\n \n
\n {I18n.t(`${I18nPrefix}.already_a_member`)}{' '}\n \n {' '}\n {I18n.t(`${I18nPrefix}.log_in`)}\n \n
\n )}\n\n
\n );\n\n return (\n {I18n.t(`${I18nPrefix}.or`)}
\n \n {!isEmpty(flashMessage) && (\n \n {flashMessage}\n \n )}\n handleOnClick(FACEBOOK)} />\n handleOnClick(GOOGLE)} />\n {config.appleEnabled && (\n handleOnClick(APPLE)} />\n )}\n {page === LANDING_PAGE && orDivider}\n handleOnClick(EMAIL)} />\n
\n );\n};\n\nAccountSignupForm.defaultProps = {\n flashMessage: null,\n className: null\n};\n\nAccountSignupForm.propTypes = {\n page: PropTypes.oneOf([\n LANDING_PAGE,\n PRIVATE_ACTIVITY,\n MOBILE_REGISTRATION_PAGE\n ]).isRequired,\n config: PropTypes.shape({\n appleEnabled: PropTypes.bool.isRequired,\n appleState: PropTypes.string.isRequired // https://developer.apple.com/documentation/sign_in_with_apple/clientconfigi/3230956-state\n }).isRequired,\n authorizationUrls: PropTypes.shape({\n google: PropTypes.string.isRequired,\n facebook: PropTypes.string.isRequired\n }).isRequired,\n flashMessage: PropTypes.string,\n className: PropTypes.string\n};\n\nexport default AccountSignupForm;\n","// extracted by mini-css-extract-plugin\nexport default {\"card\":\"SegmentDetailsSideBar--card--cOh-u\",\"title\":\"SegmentDetailsSideBar--title--gV4Yh\",\"data\":\"SegmentDetailsSideBar--data--q+aH7\",\"action-link\":\"SegmentDetailsSideBar--action-link--5PFSK\",\"actionLink\":\"SegmentDetailsSideBar--action-link--5PFSK\"};","// extracted by mini-css-extract-plugin\nexport default {\"row-container\":\"AvatarWithDataRow--row-container--TMoIe\",\"rowContainer\":\"AvatarWithDataRow--row-container--TMoIe\",\"row-data\":\"AvatarWithDataRow--row-data--gcnuL\",\"rowData\":\"AvatarWithDataRow--row-data--gcnuL\",\"avatar-border\":\"AvatarWithDataRow--avatar-border--eA0+I\",\"avatarBorder\":\"AvatarWithDataRow--avatar-border--eA0+I\",\"call-out-row\":\"AvatarWithDataRow--call-out-row--FI8f-\",\"callOutRow\":\"AvatarWithDataRow--call-out-row--FI8f-\",\"call-out-achievement\":\"AvatarWithDataRow--call-out-achievement--Hn01-\",\"callOutAchievement\":\"AvatarWithDataRow--call-out-achievement--Hn01-\",\"call-out-effort\":\"AvatarWithDataRow--call-out-effort--cfToQ\",\"callOutEffort\":\"AvatarWithDataRow--call-out-effort--cfToQ\",\"call-out-icon\":\"AvatarWithDataRow--call-out-icon--g+1u5\",\"callOutIcon\":\"AvatarWithDataRow--call-out-icon--g+1u5\",\"call-out-date\":\"AvatarWithDataRow--call-out-date--UDQ3M\",\"callOutDate\":\"AvatarWithDataRow--call-out-date--UDQ3M\",\"data-value-pair\":\"AvatarWithDataRow--data-value-pair--TKShC\",\"dataValuePair\":\"AvatarWithDataRow--data-value-pair--TKShC\"};","// extracted by mini-css-extract-plugin\nexport default {\"effort-count\":\"ExcludedSegmentEffortsItem--effort-count--UzlWP\",\"effortCount\":\"ExcludedSegmentEffortsItem--effort-count--UzlWP\",\"excluded-efforts-btn\":\"ExcludedSegmentEffortsItem--excluded-efforts-btn--JScHB\",\"excludedEffortsBtn\":\"ExcludedSegmentEffortsItem--excluded-efforts-btn--JScHB\",\"data-value-pair\":\"ExcludedSegmentEffortsItem--data-value-pair--2-HmO\",\"dataValuePair\":\"ExcludedSegmentEffortsItem--data-value-pair--2-HmO\",\"call-out-achievement\":\"ExcludedSegmentEffortsItem--call-out-achievement--wMu0u\",\"callOutAchievement\":\"ExcludedSegmentEffortsItem--call-out-achievement--wMu0u\",\"call-out-effort\":\"ExcludedSegmentEffortsItem--call-out-effort--wi6zJ\",\"callOutEffort\":\"ExcludedSegmentEffortsItem--call-out-effort--wi6zJ\"};","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport I18n from 'utils/I18n';\nimport { trackV2 } from 'utils/analytics';\nimport createNetworkingClient from 'utils/networking-client';\nimport Button from '@strava/ui/Button';\nimport Spinner from '@strava/ui/Spinner';\nimport styles from './styles.scss';\n\nimport ExcludedSegmentEffortsModal from '../../../ExcludedSegmentEffortsModal';\n\nconst ExcludedSegmentEffortsItem = ({ entity, id }) => {\n const [isLoading, setIsLoading] = useState(true);\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [flaggedEfforts, setFlaggedEfforts] = useState([]);\n const [speedUnit, setSpeedUnit] = useState(null);\n\n useEffect(() => {\n const fetchData = async () => {\n const url = '/frontend/segments/excluded_efforts';\n const params = { params: { entity, id } };\n createNetworkingClient()\n .get(url, params)\n .then(({ data }) => {\n setFlaggedEfforts(data.flagged_efforts);\n setSpeedUnit(data.speed_unit);\n })\n .catch(() => {})\n .finally(() => {\n setIsLoading(false);\n });\n };\n\n fetchData();\n }, [entity, id]);\n\n useEffect(() => {\n if (flaggedEfforts.length > 0) {\n trackV2({\n action: 'screen_enter',\n element: 'excluded_efforts',\n category: 'segments',\n page: 'segment_detail'\n });\n }\n }, [flaggedEfforts]);\n\n const spinner = (\n \n
\n );\n\n const openModal = () => {\n setIsModalOpen(true);\n trackV2({\n action: 'click',\n element: 'excluded_efforts',\n category: 'segments',\n page: 'segment_detail'\n });\n trackV2({\n action: 'screen_enter',\n category: 'segments',\n page: 'excluded_efforts'\n });\n };\n\n const closeModal = () => {\n setIsModalOpen(false);\n trackV2({\n action: 'screen_exit',\n category: 'segments',\n page: 'excluded_efforts'\n });\n };\n\n const item = (\n \n
\n \n {I18n.t(\n 'strava.labs.activities.segments_view.excluded_efforts.heading'\n )}\n
\n \n {`- `}\n \n {flaggedEfforts.length}\n \n
\n \n
\n );\n};\n\nAvatarWithDataRow.defaultProps = {\n achievementIcon: null,\n loadExcludedEfforts: false,\n segmentId: null\n};\n\nAvatarWithDataRow.propTypes = {\n achievementIcon: PropTypes.element,\n data: PropTypes.shape({\n segmentEffortId: PropTypes.number,\n activityId: PropTypes.number,\n name: PropTypes.string,\n profile: PropTypes.string,\n id: PropTypes.number,\n date: PropTypes.string,\n stats: PropTypes.array,\n segmentId: PropTypes.string\n }).isRequired,\n loadExcludedEfforts: PropTypes.bool,\n segmentId: PropTypes.number\n};\n\nexport default AvatarWithDataRow;\n","// extracted by mini-css-extract-plugin\nexport default {\"url-label\":\"CardActionsSection--url-label--t8PS6\",\"urlLabel\":\"CardActionsSection--url-label--t8PS6\",\"link-with-caret\":\"CardActionsSection--link-with-caret--ZDp2b\",\"linkWithCaret\":\"CardActionsSection--link-with-caret--ZDp2b\",\"upcoming-segment-goal\":\"CardActionsSection--upcoming-segment-goal--+oQ+C\",\"upcomingSegmentGoal\":\"CardActionsSection--upcoming-segment-goal--+oQ+C\",\"not-allowed\":\"CardActionsSection--not-allowed--9-bZ-\",\"notAllowed\":\"CardActionsSection--not-allowed--9-bZ-\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport I18n from 'utils/I18n';\nimport Popup from '@strava/ui/Popup';\nimport Analytics from 'utils/analytics';\n\nimport Button from '@strava/ui/Button';\nimport styles from './styles.scss';\n\nconst trackClick = (id, element) => {\n Analytics.trackV2({\n action: 'click',\n element,\n category: 'side_bar',\n page: 'segment_details',\n properties: { segment_id: id }\n });\n};\n\n// This is hack to reuse the legacy modal for setting goals.\nconst onClickSetGoal = (segmentId) => {\n trackClick(segmentId, 'set_goal');\n document.getElementById('set_goal_button').click();\n};\n\nconst urlLabelWithCaret = (label) => {\n return (\n \n
\n \n {data.name &&
\n {data.name}
}\n \n {achievementIcon && (\n
\n {achievementIcon}
\n )}\n - \n {data.stats.map((entry) => (\n
- \n \n\n{entry.label}\n \n ))}\n {loadExcludedEfforts && (\n
\n \n {data.date}\n \n
\n )}\n \n
\n );\n};\n\nconst upcomingGoalDescription = (upcomingGoal, segmentId) => {\n return (\n {label}
\n \n {\n trackClick(segmentId, 'all_goals');\n }}\n >\n {urlLabelWithCaret(\n I18n.t('strava.performance_goals.upcoming_segment_goal')\n )}\n \n
\n );\n};\n\nconst sectionUrlAndLabel = (entry) => {\n let content;\n if (entry.useHamlGoalCreationModule) {\n if (entry.athleteRestricted) {\n content = (\n \n {\n trackClick(segmentId, 'upcoming_goal');\n }}\n >\n {I18n.t('templates.performance_goals.upcoming_segment_goal.details', {\n target_time: upcomingGoal.targetTime,\n segment_name: upcomingGoal.segmentName\n })}\n \n {upcomingGoal.endDate}\n
\n \n \n {\n trackClick(entry.segmentId, 'subscribe');\n window.location.href = '/subscribe?origin=segment_goal';\n return false;\n }}\n >\n {I18n.t('templates.segments.analysis.side_bar.subscribe')}\n \n
\n \n }\n >\n \n {I18n.t(\n 'templates.segments.analysis.side_bar.subscribe_copy'\n )}\n
\n\n {urlLabelWithCaret(entry.urlLabel)}\n
\n \n );\n } else {\n content = (\n // eslint-disable-next-line jsx-a11y/anchor-is-valid\n - \n {sideBarEntryData().map((entry) => (\n
- \n
{entry.title}
\n{entry.sectionComponents}\n\n\n\n \n ))}\n
\n
\n );\n }\n\n if (!isExpanded) {\n return ﹀
;\n }\n\n return null;\n}\n\nFooter.propTypes = {\n isSubmittable: PropTypes.bool.isRequired,\n isExpanded: PropTypes.bool.isRequired,\n handleValueSave: PropTypes.func.isRequired,\n settingCollapsed: PropTypes.func.isRequired\n};\n\nexport default Footer;\n","// extracted by mini-css-extract-plugin\nexport default {\"options\":\"OptionList--options--YnbkD\"};","// extracted by mini-css-extract-plugin\nexport default {\"setting\":\"Option--setting--Gsvqv\",\"label\":\"Option--label--jmD6S\",\"description\":\"Option--description--2zDdI\",\"title\":\"Option--title--M-tjF\",\"detail\":\"Option--detail--9-DwE\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport sizeMe from 'react-sizeme';\n\nimport styles from './index.scss';\n\nconst NotVisibleStyle = {\n position: 'absolute',\n visibility: 'hidden',\n zIndex: '-9999'\n};\n\nclass Option extends React.Component {\n /**\n * isVisible when the - \n {options.map((option, i) => (\n
\n {I18n.t(I18nKey.who_can_see)}\n
\n\n \n trackEvent('click', 'learn_more', { article_id: 115000173384 })\n }\n >\n {I18n.t(`${i18nPrefix}learn_more`)}\n \n
\n );\n}\n\nMapVisibilityControls.propTypes = {\n numPrivateLocations: PropTypes.number.isRequired,\n defaultStreamPrivacy: PropTypes.string.isRequired,\n defaultActivityMapVisibility: PropTypes.string.isRequired,\n paths: PropTypes.shape({\n hideAddress: PropTypes.string,\n hideAnywhere: PropTypes.string,\n athleteSettings: PropTypes.string\n }).isRequired,\n isAthleteUnder18: PropTypes.bool.isRequired\n};\n\nexport default MapVisibilityControls;\n","export { default } from './MapVisibilityControls';\n","// Setting style rules to `null` will prevent them from being rendered\n// This allows for standard styling using CSS without the need to use !important\n\n// important - input height and highlighter height needs to be the same in order\n// for highlighted mentions overlay to scroll together with the input text.\n\nexport const setMentionInputStyles = ({ inputHeight }) => ({\n // Container\n control: {\n height: null,\n width: null\n },\n\n // Mentioned Name Overlay\n highlighter: {\n lineHeight: null,\n border: '1px solid transparent',\n height: inputHeight,\n padding: null,\n color: null,\n width: null,\n pointerEvents: 'none',\n overflow: 'hidden',\n boxSizing: 'border-box'\n },\n\n // {I18n.t(`${i18nPrefix}header`)}
\n\n {\n trackEvent('click', 'hide_specific_address');\n window.location.href = paths.hideAddress;\n }}\n >\n {I18n.t(\n numPrivateLocations ? `${i18nPrefix}edit` : `${i18nPrefix}add`\n )}\n \n
\n \n
\n {I18n.t_html(`${i18nPrefix}hide_address_v2_html`)}
\n \n {I18n.t_html(\n `${i18nPrefix}address_hidden_html`,\n {\n count: numPrivateLocations,\n url: paths.hideAddress\n },\n {\n onLinkClick: () =>\n trackEvent('click', 'currently_hidden_address')\n }\n )}\n
\n \n {\n trackEvent('click', 'hide_any_start_end');\n window.location.href = paths.hideAnywhere;\n }}\n >\n {I18n.t(\n defaultStreamPrivacy === 'disabled'\n ? `${i18nPrefix}add`\n : `${i18nPrefix}edit`\n )}\n \n
\n {I18n.t_html(`${i18nPrefix}hide_anywhere_v2_html`)}
\n \n updateMapVisibility(() => setOpenModal(false))}\n isOpen={openModal}\n onDismiss={closeModal}\n />\n
\n \n
\n \n {I18n.t_html(`${i18nPrefix}hide_all_v2`)}\n
\n \n {I18n.t_html(`${i18nPrefix}hide_all_detail_html`)}\n
\n