\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.modal.title')}\n
\n {I18n.t('templates.activities.edit.hide_stats.modal.text_1')}
\n{I18n.t('templates.activities.edit.hide_stats.modal.text_2')}
\n \n );\n\n return\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 Colors from '@strava/ui/colors';\n\nconst PrivacyZonePolylines = ({\n polyline,\n privacyZoneFromStartIndex,\n privacyZoneFromEndIndex\n}) => {\n const privacyZonePolylineStyle = {\n lineColor: Colors.N70_GRAVEL,\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\"};","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\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 {/* 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\nDetails.propTypes = {\n athlete: PropTypes.shape({\n name: PropTypes.string.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';\n\nexport const types = {\n SET_DURATION: 'SET_DURATION',\n ADYEN_PRODUCT_CHECKOUT_REQUEST: 'ADYEN_PRODUCT_CHECKOUT_REQUEST',\n ADYEN_PRODUCT_CHECKOUT_SUCCESS: 'ADYEN_PRODUCT_CHECKOUT_SUCCESS',\n ADYEN_PRODUCT_CHECKOUT_FAILURE: 'ADYEN_PRODUCT_CHECKOUT_FAILURE',\n CLEAR_ADYEN_PRODUCT_CHECKOUT_ERROR: 'CLEAR_ADYEN_PRODUCT_CHECKOUT_ERROR',\n CHECK_PROMO_CODE_REQUEST: 'CHECK_PROMO_CODE_REQUEST',\n CHECK_PROMO_CODE_SUCCESS: 'CHECK_PROMO_CODE_SUCCESS',\n CHECK_PROMO_CODE_FAILURE: 'CHECK_PROMO_CODE_FAILURE',\n REMOVE_PROMO_CODE_REQUEST: 'REMOVE_PROMO_CODE_REQUEST',\n REMOVE_PROMO_CODE_SUCCESS: 'REMOVE_PROMO_CODE_SUCCESS',\n REMOVE_PROMO_CODE_FAILURE: 'REMOVE_PROMO_CODE_FAILURE',\n TOGGLE_PROMO_CODE_INPUT_VISIBILITY: 'TOGGLE_PROMO_CODE_INPUT_VISIBILITY',\n APP_PROPS_REFRESH_REQUEST: 'APP_PROPS_REFRESH_REQUEST',\n APP_PROPS_REFRESH_SUCCESS: 'APP_PROPS_REFRESH_SUCCESS',\n APP_PROPS_REFRESH_FAILURE: 'APP_PROPS_REFRESH_FAILURE',\n APP_PROPS_ORGANIC_REFRESH_SUCCESS: 'APP_PROPS_ORGANIC_REFRESH_SUCCESS'\n};\n\nexport const setYearlyDuration = () => ({\n type: types.SET_DURATION,\n duration: 'yearly'\n});\n\nexport const setMonthlyDuration = () => ({\n type: types.SET_DURATION,\n duration: 'monthly'\n});\n\nexport const postAdyenProductCheckoutRequest = () => ({\n type: types.ADYEN_PRODUCT_CHECKOUT_REQUEST\n});\n\nexport const postAdyenProductCheckoutSuccess = () => ({\n type: types.ADYEN_PRODUCT_CHECKOUT_SUCCESS\n});\n\nexport const postAdyenProductCheckoutFailure = () => ({\n type: types.ADYEN_PRODUCT_CHECKOUT_FAILURE\n});\n\nexport const clearCheckoutError = () => ({\n type: types.CLEAR_ADYEN_PRODUCT_CHECKOUT_ERROR\n});\n\nexport const postAdyenProductCheckout = (postData, state, dispatch) => {\n dispatch(postAdyenProductCheckoutRequest());\n const { priceId: priceIdMonthly } = state.products.monthly;\n const { priceId: priceIdYearly } = state.products.yearly;\n const data = {\n ...postData,\n price_id_monthly: priceIdMonthly,\n price_id_yearly: priceIdYearly\n };\n const instance = createNetworkingClient({ timeout: 30000 });\n return instance\n .post('/adyen/api_product_checkout', data)\n .then((response) => {\n if (response && response.data.success) {\n dispatch(postAdyenProductCheckoutSuccess());\n } else {\n dispatch(postAdyenProductCheckoutFailure());\n }\n })\n .catch(() => {\n dispatch(postAdyenProductCheckoutFailure());\n });\n};\n\nexport const postAdyenTrialCheckout = (postData, state, dispatch) => {\n dispatch(postAdyenProductCheckoutRequest());\n const { priceId: priceIdMonthly } = state.products.monthly;\n const { priceId: priceIdYearly } = state.products.yearly;\n const data = {\n ...postData,\n price_id_monthly: priceIdMonthly,\n price_id_yearly: priceIdYearly\n };\n const instance = createNetworkingClient({ timeout: 30000 });\n return instance\n .post('/adyen/api_product_trial_checkout', data)\n .then((response) => {\n if (response && response.data.success) {\n dispatch(postAdyenProductCheckoutSuccess());\n } else {\n dispatch(postAdyenProductCheckoutFailure());\n }\n })\n .catch(() => {\n dispatch(postAdyenProductCheckoutFailure());\n });\n};\n\nexport const getNewProductRequest = () => ({\n type: types.APP_PROPS_REFRESH_REQUEST\n});\n\nexport const getNewProductSuccess = (data) => ({\n type: types.APP_PROPS_REFRESH_SUCCESS,\n payload: data\n});\n\nexport const getNewOrganicProductSuccess = (data) => ({\n type: types.APP_PROPS_ORGANIC_REFRESH_SUCCESS,\n payload: data\n});\n\nexport const getNewProductFailure = () => ({\n type: types.APP_PROPS_REFRESH_FAILURE\n});\n\nexport const getOrganicProduct = (state, dispatch, promoCode) => {\n dispatch(getNewProductRequest());\n\n const { priceId: priceIdMonthly } = state.products.monthly;\n const { priceId: priceIdYearly } = state.products.yearly;\n const data = {\n price_id_yearly: priceIdYearly,\n price_id_monthly: priceIdMonthly,\n organic: true,\n ...(promoCode && { code: promoCode })\n };\n return createNetworkingClient({ timeout: 300000 })\n .get('/subscribe/checkout', { params: data })\n .then((response) => {\n if (response && response.data.success) {\n dispatch(\n getNewOrganicProductSuccess({\n ...response.data.checkout_app_props\n })\n );\n } else {\n dispatch(getNewProductFailure());\n }\n })\n .catch(() => {\n dispatch(getNewProductFailure());\n });\n};\n\nexport const getTrialProduct = (state, dispatch) => {\n dispatch(getNewProductRequest());\n const { priceId: priceIdMonthly } = state.products.monthly;\n const { priceId: priceIdYearly } = state.products.yearly;\n const data = {\n price_id_yearly: priceIdYearly,\n price_id_monthly: priceIdMonthly\n };\n return createNetworkingClient({ timeout: 300000 })\n .get('/subscribe/checkout', { params: data })\n .then((response) => {\n if (response && response.data.success) {\n dispatch(getNewProductSuccess(response.data.checkout_app_props));\n } else {\n dispatch(getNewProductFailure());\n }\n })\n .catch(() => {\n dispatch(getNewProductFailure());\n });\n};\n\nexport const postCheckPromoCodeRequest = () => ({\n type: types.CHECK_PROMO_CODE_REQUEST\n});\n\nexport const postCheckPromoCodeSuccess = (data) => ({\n type: types.CHECK_PROMO_CODE_SUCCESS,\n payload: data\n});\n\nexport const postCheckPromoCodeFailure = () => ({\n type: types.CHECK_PROMO_CODE_FAILURE\n});\n\nexport const postCheckPromoCode = (\n postData,\n dispatch,\n state,\n shouldRedirectToOrganicOnSuccess\n) => {\n dispatch(postCheckPromoCodeRequest());\n\n return createNetworkingClient({ timeout: 300000 })\n .post('/premium/check_promo', { ...postData })\n .then((response) => {\n if (response && response.data.success) {\n if (shouldRedirectToOrganicOnSuccess) {\n getOrganicProduct(state, dispatch, postData.code);\n }\n dispatch(postCheckPromoCodeSuccess(response.data));\n } else {\n dispatch(postCheckPromoCodeFailure());\n }\n })\n .catch(() => {\n dispatch(postCheckPromoCodeFailure());\n });\n};\n\nexport const postRemovePromoCodeRequest = () => ({\n type: types.REMOVE_PROMO_CODE_REQUEST\n});\n\nexport const postRemovePromoCodeSuccess = (data) => ({\n type: types.REMOVE_PROMO_CODE_SUCCESS,\n payload: data\n});\n\nexport const postRemovePromoCodeFailure = () => ({\n type: types.REMOVE_PROMO_CODE_FAILURE\n});\n\nexport const togglePromoCodeInputVisibility = () => ({\n type: types.TOGGLE_PROMO_CODE_INPUT_VISIBILITY\n});\n\nexport const postRemovePromoCode = (postData, dispatch) => {\n dispatch(postRemovePromoCodeRequest());\n\n return createNetworkingClient({ timeout: 300000 })\n .post('/premium/remove_promo', { ...postData })\n .then((response) => {\n if (response && response.data.success) {\n dispatch(postRemovePromoCodeSuccess(response.data));\n } else {\n dispatch(postRemovePromoCodeFailure());\n }\n })\n .catch(() => {\n dispatch(postRemovePromoCodeFailure());\n });\n};\n\nexport default {\n types,\n setYearlyDuration,\n setMonthlyDuration,\n postAdyenProductCheckout,\n postAdyenTrialCheckout,\n togglePromoCodeInputVisibility\n};\n","import { camelCase, mapKeys } from 'lodash-es';\nimport { types } from './Checkout.actions';\n\nconst getPricing = ({ duration, products }) => {\n if (!products) {\n return {};\n }\n const currentProduct = products[duration];\n const priceWithoutDiscount = currentProduct.priceWithoutDiscount || 0;\n const {\n recurringAmount,\n currency,\n sku,\n amountInMinorUnits,\n billedToday,\n yearlyTotal,\n monthlyTotal,\n priceId,\n billedTodayOther,\n discounts\n } = currentProduct;\n return {\n recurringAmount,\n priceWithoutDiscount,\n duration,\n currency,\n sku,\n billedToday,\n yearlyTotal,\n monthlyTotal,\n priceId,\n amountInMinorUnits,\n billedTodayOther,\n discounts\n };\n};\n\nexport const initCheckoutState = ({\n adyenClientPubkey,\n analyticsData,\n checkoutError,\n checkoutSubmitting,\n checkoutSuccess,\n checkoutSuccessRedirectPath,\n currency,\n dropInClientKey: clientKey,\n dropInEnvironment: environment,\n dropInSessionData: sessionData,\n dropInSessionEnabled: sessionEnabled,\n dropInSessionId: sessionId,\n redirectUrl,\n duration,\n experiments,\n isStudentPromotion,\n isHolidayPromotion,\n isTrial,\n isTrialEligible,\n packageIds,\n products,\n promoCampaign,\n promoCodeError,\n promoCodeInputVisibility,\n promoCodeSubmitting,\n showPaypal,\n trialInfo,\n yearlyPercentOff\n}) => {\n const pricing = getPricing({ duration, products });\n return {\n adyenClientPubkey,\n analyticsData,\n checkoutError,\n checkoutSubmitting,\n checkoutSuccess,\n checkoutSuccessRedirectPath,\n currency,\n clientKey,\n environment,\n sessionData,\n sessionEnabled,\n sessionId,\n redirectUrl,\n duration,\n experiments,\n isStudentPromotion,\n isHolidayPromotion,\n isTrial,\n isTrialEligible,\n packageIds,\n pricing,\n products,\n promoCampaign,\n promoCodeError,\n promoCodeInputVisibility,\n promoCodeSubmitting,\n showPaypal,\n trialInfo,\n yearlyPercentOff\n };\n};\n\nexport default function summitCheckoutAppReducer(state = {}, action) {\n let payload;\n let payloadCamelCase;\n switch (action.type) {\n case types.SET_DURATION:\n return {\n ...state,\n pricing: getPricing({\n duration: action.duration,\n products: state.products\n }),\n duration: action.duration\n };\n //\n // Adyen checkout block\n //\n case types.ADYEN_PRODUCT_CHECKOUT_REQUEST:\n return {\n ...state,\n checkoutSubmitting: true\n };\n case types.ADYEN_PRODUCT_CHECKOUT_SUCCESS:\n return {\n ...state,\n checkoutSuccess: true\n };\n case types.ADYEN_PRODUCT_CHECKOUT_FAILURE:\n return {\n ...state,\n checkoutSubmitting: false,\n checkoutError: true\n };\n case types.CLEAR_ADYEN_PRODUCT_CHECKOUT_ERROR:\n return {\n ...state,\n checkoutSubmitting: false,\n checkoutError: false\n };\n //\n // Promo code related\n //\n case types.CHECK_PROMO_CODE_REQUEST:\n case types.REMOVE_PROMO_CODE_REQUEST:\n return {\n ...state,\n promoCodeSubmitting: true\n };\n case types.CHECK_PROMO_CODE_SUCCESS:\n case types.REMOVE_PROMO_CODE_SUCCESS:\n return {\n ...state,\n pricing: getPricing({\n duration: action.payload.products.default_selected,\n products: action.payload.products\n }),\n promoCodeSubmitting: false,\n promoCodeError: false,\n promoCodeInputVisibility: false,\n products: action.payload.products,\n duration: action.payload.products.default_selected,\n sessionId: action.payload.dropInSessionId,\n sessionData: action.payload.dropInSessionData\n };\n case types.CHECK_PROMO_CODE_FAILURE:\n case types.REMOVE_PROMO_CODE_FAILURE:\n return {\n ...state,\n promoCodeSubmitting: false,\n promoCodeError: true\n };\n case types.TOGGLE_PROMO_CODE_INPUT_VISIBILITY:\n return {\n ...state,\n promoCodeInputVisibility: !state.promoCodeInputVisibility\n };\n case types.APP_PROPS_REFRESH_SUCCESS:\n ({ payload } = action);\n payloadCamelCase = mapKeys(payload, (val, key) => camelCase(key));\n return {\n ...state,\n ...payloadCamelCase,\n sessionId: payload.dropInSessionId,\n sessionData: payload.dropInSessionData,\n clientKey: payload.dropInClientKey,\n environment: payload.dropInEnvironment,\n pricing: getPricing({\n duration: payload.products.default_selected,\n products: payload.products\n })\n };\n case types.APP_PROPS_ORGANIC_REFRESH_SUCCESS:\n ({ payload } = action);\n payloadCamelCase = mapKeys(payload, (val, key) => camelCase(key));\n return {\n ...state,\n ...payloadCamelCase,\n promoCodeInputVisibility: true,\n sessionId: payload.dropInSessionId,\n sessionData: payload.dropInSessionData,\n clientKey: payload.dropInClientKey,\n environment: payload.dropInEnvironment,\n pricing: getPricing({\n duration: payload.products.default_selected,\n products: payload.products\n })\n };\n default:\n // some payloads include responses from APIs that are in snake case\n // we need to map snake case keys to camelCase\n return {\n ...mapKeys(state, (val, key) => camelCase(key)),\n pricing: getPricing(state)\n };\n }\n}\n","import { camelCase, mapKeys } from 'lodash-es';\n\n// most props from the checkout_app_props method in Ruby come through in snake case\nexport const buildInitialCheckoutState = (overrides) => {\n const stateSnakeCase = {\n duration: 'yearly',\n checkoutSubmitting: false,\n checkoutSuccess: false,\n checkoutError: null,\n hideTerms: false,\n isStudentPromotion: false,\n isHolidayPromotion: false,\n isTrial: false,\n promoCodeSubmitting: false,\n promoCodeError: false,\n promoCodeInputVisibility: false,\n products: null,\n ...overrides\n };\n // map top-level state keys to camelCase\n return mapKeys(stateSnakeCase, (val, key) => camelCase(key));\n};\n\nexport default { buildInitialCheckoutState };\n","import { useContext, createContext } from 'react';\n\nconst CheckoutContext = createContext();\nCheckoutContext.displayName = 'CheckoutContext';\n\nexport const useCheckoutContext = () => {\n const context = useContext(CheckoutContext);\n\n if (!context) {\n throw new Error(\n 'useCheckoutContext must be used within the CheckoutContext.Provider'\n );\n }\n\n return context;\n};\n\nexport default CheckoutContext;\n","export const subscriptionType = (isTrial) => (isTrial ? 'trial' : 'organic');\n\n/* For the Checkout Refresh experiment (\"sub-web-checkout-refresh-123\"):\n This experiment includes a number of design changes, all of which are \n applied under the BEM modifier \"--v2\". This method is used to grab the\n appropriate styles for each element according to whether the athlete\n should see the experiment.\n*/\nexport const getStyles = (styles, style, shouldAddV2Modifier) =>\n shouldAddV2Modifier ? [styles[style], styles[`${style}V2`]] : [styles[style]];\n\nexport const getPromotionTag = (isStudentPromotion, isHolidayPromotion) => {\n if (isStudentPromotion) {\n return 'student';\n }\n return isHolidayPromotion ? 'holiday' : 'none';\n};\n\nexport default {\n subscriptionType,\n getStyles,\n getPromotionTag\n};\n","import CardValidator from 'card-validator';\n\nconst AVAILABLE_CARDS = ['visa', 'mastercard', 'american-express', 'discover'];\n\nexport function isValidCardType(type) {\n return AVAILABLE_CARDS.indexOf(type) !== -1;\n}\n\nexport function isValidCardName(cardName) {\n return cardName.trim().length >= 2;\n}\n\nexport function isValidCardNumber(cardNumber) {\n let isValidNumber = false;\n const numberValidation = CardValidator.number(cardNumber);\n\n if (numberValidation.card) {\n isValidNumber =\n numberValidation.isValid && isValidCardType(numberValidation.card.type);\n }\n\n return isValidNumber;\n}\n\nexport function isValidCardExpDate(cardExpMonth, cardExpYear) {\n const expirationDateValidation = CardValidator.expirationDate({\n month: cardExpMonth,\n year: cardExpYear\n });\n\n return expirationDateValidation.isValid;\n}\n\nexport function isValidCardCvv(cardNumber, cardCvv) {\n const numberValidation = CardValidator.number(cardNumber);\n const cvvValidation = numberValidation.card\n ? CardValidator.cvv(cardCvv, numberValidation.card.code.size)\n : CardValidator.cvv(cardCvv);\n\n return cvvValidation.isValid;\n}\n\nexport default {\n isValidCardName,\n isValidCardNumber,\n isValidCardExpDate,\n isValidCardCvv\n};\n","// extracted by mini-css-extract-plugin\nexport default {\"form\":\"CreditCardForm--form--pFd84\",\"form-control\":\"CreditCardForm--form-control--wqhky\",\"formControl\":\"CreditCardForm--form-control--wqhky\",\"label\":\"CreditCardForm--label--fDvJt\",\"required-copy\":\"CreditCardForm--required-copy--BOzZt\",\"requiredCopy\":\"CreditCardForm--required-copy--BOzZt\",\"input-error-message\":\"CreditCardForm--input-error-message--4XYBK\",\"inputErrorMessage\":\"CreditCardForm--input-error-message--4XYBK\",\"card-meta\":\"CreditCardForm--card-meta--YBOFv\",\"cardMeta\":\"CreditCardForm--card-meta--YBOFv\",\"form-group\":\"CreditCardForm--form-group--DMbs2\",\"formGroup\":\"CreditCardForm--form-group--DMbs2\",\"expiration-date\":\"CreditCardForm--expiration-date--1aThA\",\"expirationDate\":\"CreditCardForm--expiration-date--1aThA\",\"dates\":\"CreditCardForm--dates--WbJ2Y\",\"date-divider\":\"CreditCardForm--date-divider--CUqFy\",\"dateDivider\":\"CreditCardForm--date-divider--CUqFy\",\"exp-month\":\"CreditCardForm--exp-month--TlZkH\",\"expMonth\":\"CreditCardForm--exp-month--TlZkH\",\"exp-year\":\"CreditCardForm--exp-year--TmpIZ\",\"expYear\":\"CreditCardForm--exp-year--TmpIZ\",\"cvv\":\"CreditCardForm--cvv--2rDym\",\"icon-lock\":\"CreditCardForm--icon-lock--hxjtA\",\"iconLock\":\"CreditCardForm--icon-lock--hxjtA\",\"submit-btn\":\"CreditCardForm--submit-btn--4OXTJ\",\"submitBtn\":\"CreditCardForm--submit-btn--4OXTJ\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport AdyenEncrypt from 'adyen-cse-js';\nimport Button from '@strava/ui/Button';\nimport Spinner from '@strava/ui/Spinner';\nimport { trackV2 } from 'utils/analytics';\n\nimport I18n from 'utils/I18n';\n\nimport {\n isValidCardName,\n isValidCardNumber,\n isValidCardExpDate,\n isValidCardCvv\n} from './validator';\n\nimport styles from './index.scss';\nimport {\n analyticsDataProps,\n isTrialProps\n} from '../../apps/subscriptions/Checkout/shared/prop-types';\nimport { subscriptionType } from '../../apps/subscriptions/Checkout/utils/checkoutUtils';\n\nconst I18nPrefix = 'components.credit_card_form';\nexport const I18nKey = {\n required: `${I18nPrefix}.required`,\n name: `${I18nPrefix}.name`,\n number: `${I18nPrefix}.card_number`,\n expiration: `${I18nPrefix}.expiration`,\n cvv: `${I18nPrefix}.cvv`,\n error: {\n name: `${I18nPrefix}.error.card_name`,\n number: `${I18nPrefix}.error.card_number`,\n expiration: `${I18nPrefix}.error.card_expiration`,\n cvv: `${I18nPrefix}.error.card_cvv`\n },\n placeholder: {\n name: `${I18nPrefix}.placeholder.card_name`,\n number: `${I18nPrefix}.placeholder.card_number`,\n expiration_month: `${I18nPrefix}.placeholder.expiration_month`,\n expiration_year: `${I18nPrefix}.placeholder.expiration_year`\n }\n};\n\nclass CreditCardForm extends React.Component {\n state = {\n name: '',\n number: '',\n cvv: '',\n expMonth: '',\n expYear: '',\n isValidName: null,\n isValidNumber: null,\n isValidExpDate: null,\n isValidCvv: null\n };\n\n cseInstance = AdyenEncrypt.createEncryption(this.props.adyenClientPubkey, {});\n\n handleSubmit = (e) => {\n e.preventDefault();\n\n // disabledInput is true when we have a full promotion code applied and\n // the user is not required to enter credit card. In that case, we need\n // to skip validation\n if (this.props.disabledInput) {\n this.props.submitHandler();\n } else if (this.isValidForm()) {\n const encryptCardData = this.cseInstance.encrypt({\n holderName: this.state.name,\n number: this.state.number,\n expiryMonth: this.state.expMonth,\n expiryYear: `20${this.state.expYear}`,\n cvc: this.state.cvv,\n generationtime: new Date().toISOString()\n });\n\n this.props.submitHandler(encryptCardData);\n } else {\n this.props.invalidHandler();\n }\n\n trackV2({\n category: 'subscriptions',\n page: this.props.isStudentPromotion\n ? 'student_plan_checkout'\n : 'checkout',\n element: 'trial_or_subscribe',\n action: 'click',\n properties: {\n ...this.props.analyticsData,\n subscription_type: subscriptionType(this.props.isTrial)\n }\n });\n };\n\n isValidForm = () => {\n const { name, number, expMonth, expYear, cvv } = this.state;\n\n const isValidName = isValidCardName(name);\n const isValidNumber = isValidCardNumber(number);\n const isValidExpDate = isValidCardExpDate(expMonth, expYear);\n const isValidCvv = isValidCardCvv(number, cvv);\n\n this.setState({\n isValidName,\n isValidNumber,\n isValidExpDate,\n isValidCvv\n });\n\n return isValidName && isValidNumber && isValidExpDate && isValidCvv;\n };\n\n hasError = (bool) => !(bool === null || bool);\n\n inputClassName = (input, bool) =>\n `${styles[input]} form-group ${this.hasError(bool) ? 'has-error' : ''}`;\n\n nameInputClassName = () =>\n this.inputClassName('name', this.state.isValidName);\n\n numberInputClassName = () =>\n this.inputClassName('number', this.state.isValidNumber);\n\n cvvInputClassName = () => this.inputClassName('cvv', this.state.isValidCvv);\n\n expMonthClassName = () =>\n this.inputClassName('expMonth', this.state.isValidExpDate);\n\n expYearClassName = () =>\n this.inputClassName('expYear', this.state.isValidExpDate);\n\n renderNameInput = () => (\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 {this.props.showRequiredCopy && (\n this.setState({ name: e.target.value })}\n />\n {this.hasError(this.state.isValidName) && (\n \n {I18n.t(I18nKey.error.name)}\n
\n )}\n \n );\n\n renderCardNumberInput = () => (\n {I18n.t(I18nKey.required)}
\n )}\n \n \n \n this.setState({ number: e.target.value })}\n />\n {this.hasError(this.state.isValidNumber) && (\n \n {I18n.t(I18nKey.error.number)}\n
\n )}\n \n );\n\n renderExpirationInputs = () => (\n \n \n \n {I18n.t(I18nKey.error.expiration)}\n
\n )}\n \n );\n\n renderCvvInput = () => (\n \n
\n {this.hasError(this.state.isValidExpDate) && (\n \n this.setState({ expMonth: e.target.value })}\n />\n
\n /\n \n this.setState({ expYear: e.target.value })}\n />\n
\n \n \n this.setState({ cvv: e.target.value })}\n />\n {this.hasError(this.state.isValidCvv) && (\n
\n );\n\n renderSubmitButtonContent = () => {\n const { isSubmitting, ctaText } = this.props;\n\n if (isSubmitting) {\n return \n {I18n.t(I18nKey.error.cvv)}\n
\n )}\n \n {children}\n
\n);\n\nCard.propTypes = {\n children: PropTypes.node.isRequired,\n className: PropTypes.string,\n dataTestId: PropTypes.string\n};\n\nCard.defaultProps = {\n className: null,\n dataTestId: undefined\n};\n\nexport default Card;\n","export { default } from './Card';\n","export const I18nPrefix = 'strava.subscriptions.checkout';\n\nexport const I18nPrefixOrganic = `${I18nPrefix}.summary.organic`;\nexport const I18nPrefixPromoButton = `${I18nPrefixOrganic}.promo_code.cta`;\nexport const I18nPrefixPromoCode = `${I18nPrefixOrganic}.promo_code`;\nexport const I18nPrefixTrial = `${I18nPrefix}.summary.trial`;\nexport const I18nPrefixHoliday = `${I18nPrefix}.summary.holiday`;\nexport const I18nPrefixStudent = `${I18nPrefix}.summary.students`;\nexport const I18nPrefixSubscriptionPreview =\n 'components.subscription_preview.checkout';\nexport const I18nPrefixForm = `${I18nPrefix}.form`;\nexport const I18nPrefixTerms = `${I18nPrefix}.terms`;\nexport const I18nPrefixFatmap = `${I18nPrefix}.summary.fatmap`;\n","// extracted by mini-css-extract-plugin\nexport default {\"checkout-error\":\"CheckoutError--checkout-error--XlvwT\",\"checkoutError\":\"CheckoutError--checkout-error--XlvwT\",\"message\":\"CheckoutError--message--wOPX7\",\"cta\":\"CheckoutError--cta--JhM-E\"};","import React from 'react';\nimport Button from '@strava/ui/Button';\n\nimport I18n from 'utils/I18n';\n\nimport { clearCheckoutError } from '../../../state/Checkout.actions';\nimport { useCheckoutContext } from '../../../state/CheckoutContext';\nimport { I18nPrefixForm } from '../../../shared/constants';\n\nimport styles from './CheckoutError.scss';\n\nexport const CheckoutError = () => {\n const { dispatch } = useCheckoutContext();\n return (\n \n dispatch(clearCheckoutError())}\n >\n {I18n.t(`${I18nPrefixForm}.payment_failure.cta`)}\n \n
\n );\n};\n\nexport default CheckoutError;\n","export { default } from './CheckoutError';\n","// extracted by mini-css-extract-plugin\nexport default {\"logo\":\"PayPalCheckout--logo--PMST3\"};","import React from 'react';\n\nimport I18n from 'utils/I18n';\nimport { csrfToken } from 'utils/networking-client';\n\nimport { useCheckoutContext } from '../../../state/CheckoutContext';\nimport { I18nPrefixForm } from '../../../shared/constants';\n\nimport styles from './PayPalCheckout.scss';\n\n// Note:\n// After POSTing the form, we redirect the athlete to PayPal's URI where\n// they enter their PayPal info. PayPal then redirects them back to our app.\n// Because this legacy PayPal flow and the SummitPayPalController use plain\n// old redirects, we can use a plain old HTML form to POST without any need\n// for redux or component instance methods.\n\nconst PayPalCheckout = () => {\n const { checkoutEntityState } = useCheckoutContext();\n\n const { duration, products } = checkoutEntityState;\n const sku = products?.[duration]?.sku;\n const promotionCode = products?.promotion?.code;\n\n return (\n \n );\n};\n\nexport default PayPalCheckout;\n","export { default } from './PayPalCheckout';\n","// extracted by mini-css-extract-plugin\nexport default {\"checkout-form\":\"Form--checkout-form--VRYaY\",\"checkoutForm\":\"Form--checkout-form--VRYaY\",\"card--v2\":\"Form--card--v2--fWk8i\",\"cardV2\":\"Form--card--v2--fWk8i\",\"payment-methods\":\"Form--payment-methods--9-irq\",\"paymentMethods\":\"Form--payment-methods--9-irq\",\"payment-title\":\"Form--payment-title--FCAi-\",\"paymentTitle\":\"Form--payment-title--FCAi-\",\"payment-option-list\":\"Form--payment-option-list--dPfHm\",\"paymentOptionList\":\"Form--payment-option-list--dPfHm\",\"payment-option\":\"Form--payment-option--vw9cM\",\"paymentOption\":\"Form--payment-option--vw9cM\",\"input\":\"Form--input--EeijL\",\"paypal-img\":\"Form--paypal-img--An+3q\",\"paypalImg\":\"Form--paypal-img--An+3q\",\"cards-container\":\"Form--cards-container--CaTUr\",\"cardsContainer\":\"Form--cards-container--CaTUr\",\"card-img\":\"Form--card-img--Ns5Pl\",\"cardImg\":\"Form--card-img--Ns5Pl\",\"divider\":\"Form--divider--gOUos\",\"payment\":\"Form--payment--aATjk\"};","import React, { useState } from 'react';\n\nimport I18n from 'utils/I18n';\nimport Cldr from 'utils/Cldr';\nimport clsx from '@strava/ui/clsx';\nimport { trackV2 } from 'utils/analytics';\n\nimport CreditCardForm from 'components/CreditCardForm';\nimport Card from '../shared/Card';\n\nimport {\n postAdyenProductCheckout,\n postAdyenTrialCheckout\n} from '../../state/Checkout.actions';\n\nimport visa from './assets/visa.svg';\nimport mc from './assets/mc.svg';\nimport discover from './assets/discover.svg';\nimport amex from './assets/amex.svg';\nimport paypal from './assets/paypal.svg';\n\nimport {\n subscriptionType,\n getStyles as _getStyles\n} from '../../utils/checkoutUtils';\nimport CheckoutError from './CheckoutError';\nimport PayPalCheckout from './PayPalCheckout';\nimport { useCheckoutContext } from '../../state/CheckoutContext';\nimport { I18nPrefixForm } from '../../shared/constants';\n\nimport styles from './Form.scss';\n\nconst PAYMENT_METHOD_CREDIT = 'credit';\nconst PAYMENT_METHOD_PAYPAL = 'paypal';\n\nexport const Form = () => {\n const { checkoutEntityState, dispatch } = useCheckoutContext();\n\n const {\n adyenClientPubkey,\n analyticsData,\n checkoutError,\n checkoutSubmitting,\n promoCodeSubmitting,\n checkoutSuccess,\n checkoutSuccessRedirectPath,\n isTrial,\n showPaypal,\n isStudentPromotion,\n duration,\n pricing,\n products,\n experiments\n } = checkoutEntityState;\n\n const { currency, sku, billedToday } = pricing;\n const fullPromo = products?.promotion?.full;\n const promotionCode = products?.promotion?.code;\n const { shouldShowCheckoutRefresh } = experiments;\n\n const [paymentMethod, setPaymentMethod] = useState(PAYMENT_METHOD_CREDIT);\n\n const getStyles = (style) =>\n _getStyles(styles, style, shouldShowCheckoutRefresh);\n\n const handleOnChange = (method) => {\n if (paymentMethod !== method) {\n setPaymentMethod(method);\n }\n };\n\n const ctaText = () => {\n if (isTrial) {\n return I18n.t(`${I18nPrefixForm}.submit_cta.start_trial`);\n }\n if (fullPromo) {\n return I18n.t(`${I18nPrefixForm}.submit_cta.start_membership`);\n }\n\n return I18n.t(`${I18nPrefixForm}.submit_cta.securely_pay`, {\n price: Cldr.formatCurrency(billedToday, currency)\n });\n };\n\n const handleCreditCardFormSubmit = (encryptCardData) => {\n trackV2({\n category: 'summit_upsell',\n page: 'cart',\n action: 'finish_payment',\n properties: {\n ...analyticsData,\n subscription_type: subscriptionType(isTrial)\n }\n });\n\n const formData = {\n adyen_card_data: encryptCardData,\n sku,\n promotion: promotionCode,\n duration\n };\n\n if (isTrial) {\n postAdyenTrialCheckout(formData, checkoutEntityState, dispatch);\n } else {\n postAdyenProductCheckout(formData, checkoutEntityState, dispatch);\n }\n };\n\n const renderPayment = () => {\n if (checkoutError) {\n return \n
\n \n {I18n.t(`${I18nPrefixForm}.payment_failure.we_are_sorry`)}\n
\n\n {I18n.t(`${I18nPrefixForm}.payment_failure.card_not_charged`)}\n
\n\n \n \n
\n );\n};\n\nexport default Form;\n","export { default } from './Form';\n","// extracted by mini-css-extract-plugin\nexport default {\"terms\":\"Terms--terms--smGBJ\"};","import React from 'react';\n\nimport I18n from 'utils/I18n';\nimport Cldr from 'utils/Cldr';\n\nimport { useCheckoutContext } from '../../state/CheckoutContext';\nimport { getPromotionTag, subscriptionType } from '../../utils/checkoutUtils';\nimport { I18nPrefixTerms } from '../../shared/constants';\n\nimport styles from './Terms.scss';\n\nexport const Terms = () => {\n const { checkoutEntityState } = useCheckoutContext();\n\n const {\n duration,\n isTrial,\n currency,\n isStudentPromotion,\n isHolidayPromotion,\n products,\n pricing,\n promoCampaign\n } = checkoutEntityState;\n const hideTerms = products?.promotion?.full || isHolidayPromotion;\n if (hideTerms) {\n return null;\n }\n\n const { billedToday, priceWithoutDiscount, recurringAmount } = pricing;\n const promotionApplied = !!products?.promotion?.code || promoCampaign;\n const promotionDuration = products?.promotion?.argument;\n const promotionTag = getPromotionTag(isStudentPromotion, isHolidayPromotion);\n\n // ignoring students here since they have their own terms and can't redeem other promos\n const promotionCopyKey =\n promotionTag === 'none' ? 'percent_off' : 'extended_duration';\n\n const formatPrice = (price) => Cldr.formatCurrency(price, currency);\n\n let content;\n if (isStudentPromotion) {\n content = I18n.t(\n `${I18nPrefixTerms}.students.${subscriptionType(isTrial)}`,\n {\n studentPrice: formatPrice(recurringAmount),\n priceWithoutDiscount: Cldr.formatCurrency(\n priceWithoutDiscount,\n currency\n )\n }\n );\n } else if (promotionApplied) {\n content = I18n.t(\n `${I18nPrefixTerms}.promo.${promotionCopyKey}.${duration}`,\n {\n promoPrice: formatPrice(billedToday),\n promoDuration: promotionDuration,\n count: promotionDuration,\n price: formatPrice(recurringAmount)\n }\n );\n } else {\n content = I18n.t(\n `${I18nPrefixTerms}.${subscriptionType(isTrial)}.${duration}`,\n {\n price: formatPrice(recurringAmount)\n }\n );\n }\n\n return (\n \n
\n\n \n\n \n {I18n.t(`${I18nPrefixForm}.payment_method`)}\n
\n \n \n {showPaypal && (\n \n )}\n
\n {renderPayment()}
\n \n
\n );\n};\n\nexport default Terms;\n","export { default } from './Terms';\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"Inset--container--S4qia\",\"transparent\":\"Inset--transparent--BYcjM\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from '@strava/ui/clsx';\n\nimport styles from './Inset.scss';\n\nconst Inset = ({ children, transparent, className, dataTestId }) => (\n \n {content}\n
\n\n {I18n.t(`${I18nPrefixOrganic}.yearly`)}\n \n {shouldShowCheckoutRefresh\n ? I18n.t(`${I18nPrefixOrganic}.best_value`)\n : I18n.t(`${I18nPrefixOrganic}.saving`, {\n percent: Math.round(yearlyPercentOff)\n })}\n \n
\n \n\n {I18n.t(`${I18nPrefixOrganic}.monthly`)}\n
\n \n \n );\n};\n\nexport default DurationSelectSideBySide;\n","export { default } from './DurationSelectSideBySide';\n","// extracted by mini-css-extract-plugin\nexport default {\"promo-code-container\":\"PromoCodeInput--promo-code-container--fot1o\",\"promoCodeContainer\":\"PromoCodeInput--promo-code-container--fot1o\",\"trial-info\":\"PromoCodeInput--trial-info--SQkdC\",\"trialInfo\":\"PromoCodeInput--trial-info--SQkdC\",\"icon\":\"PromoCodeInput--icon--Xh0Fu\",\"promo-code-input\":\"PromoCodeInput--promo-code-input---dGb5\",\"promoCodeInput\":\"PromoCodeInput--promo-code-input---dGb5\",\"form-control\":\"PromoCodeInput--form-control--LsBWh\",\"formControl\":\"PromoCodeInput--form-control--LsBWh\",\"btn-apply\":\"PromoCodeInput--btn-apply--3572A\",\"btnApply\":\"PromoCodeInput--btn-apply--3572A\",\"error-message\":\"PromoCodeInput--error-message--MvKcQ\",\"errorMessage\":\"PromoCodeInput--error-message--MvKcQ\"};","import React, { useState } from 'react';\nimport I18n from 'utils/I18n';\nimport Button from '@strava/ui/Button';\nimport clsx from '@strava/ui/clsx';\nimport { NavigationInformationNormalXsmall } from '@strava/icons';\nimport Spinner from '@strava/ui/Spinner';\nimport VisuallyHidden from '@strava/ui/VisuallyHidden';\nimport { trackV2 } from 'utils/analytics';\n\nimport { useCheckoutContext } from '../../../../state/CheckoutContext';\nimport { postCheckPromoCode } from '../../../../state/Checkout.actions';\nimport { subscriptionType } from '../../../../utils/checkoutUtils';\nimport { I18nPrefixPromoCode } from '../../../../shared/constants';\n\nimport styles from './PromoCodeInput.scss';\n\nconst PromoCodeInput = () => {\n const { checkoutEntityState, dispatch } = useCheckoutContext();\n const {\n analyticsData,\n checkoutSubmitting,\n experiments,\n promoCodeSubmitting,\n promoCodeError,\n isTrial,\n packageIds,\n duration\n } = checkoutEntityState;\n const { shouldShowCheckoutRefresh } = experiments;\n\n const [promoCode, setPromoCode] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n trackV2({\n category: 'checkout',\n page: 'cart',\n action: 'click',\n element: 'promo_code_submit',\n properties: {\n ...analyticsData,\n subscription_type: subscriptionType(isTrial)\n }\n });\n\n const formData = {\n code: promoCode,\n packageIds,\n recurring: duration\n };\n const shouldRedirectToOrganicOnSuccess =\n isTrial && shouldShowCheckoutRefresh;\n postCheckPromoCode(\n formData,\n dispatch,\n checkoutEntityState,\n shouldRedirectToOrganicOnSuccess\n );\n };\n\n return (\n\n {shouldShowCheckoutRefresh && isTrial && (\n <>\n
\n \n {promoCodeError && (\n {I18n.t(`${I18nPrefixPromoCode}.title`)}
\n\n
\n \n )}\n \n
\n {I18n.t_html(`${I18nPrefixPromoCode}.trial_info`)}\n \n {I18n.t(`${I18nPrefixPromoCode}.error`)}\n
\n )}\n \n );\n};\n\nexport default PromoCodeInput;\n","export { default } from './PromoCodeInput';\n","// extracted by mini-css-extract-plugin\nexport default {\"action-button\":\"RemovePromoIcon--action-button--8TiQl\",\"actionButton\":\"RemovePromoIcon--action-button--8TiQl\"};","import React from 'react';\nimport I18n from 'utils/I18n';\nimport clsx from '@strava/ui/clsx';\nimport { ActionsCancelCircleHighlightedLarge } from '@strava/icons';\n\nimport { useCheckoutContext } from '../../../../state/CheckoutContext';\nimport { postRemovePromoCode } from '../../../../state/Checkout.actions';\nimport { I18nPrefixPromoButton } from '../../../../shared/constants';\n\nimport styles from './RemovePromoIcon.scss';\n\nconst RemovePromoIcon = () => {\n const { checkoutEntityState, dispatch } = useCheckoutContext();\n\n const { packageIds, duration } = checkoutEntityState;\n\n const handlePostRemovePromoCode = () => {\n const formData = {\n package_ids: packageIds,\n recurring: duration\n };\n\n postRemovePromoCode(formData, dispatch);\n };\n\n return (\n \n
\n )}\n \n );\n};\n\nexport default Discounts;\n","export { default } from './Discounts';\n","// extracted by mini-css-extract-plugin\nexport default {\"pricing-list\":\"PricingList--pricing-list--uuSky\",\"pricingList\":\"PricingList--pricing-list--uuSky\",\"pricing-list--v2\":\"PricingList--pricing-list--v2--bWZLk\",\"pricingListV2\":\"PricingList--pricing-list--v2--bWZLk\",\"divider\":\"PricingList--divider--9TvsY\",\"totals\":\"PricingList--totals--r5uG3\",\"totals--v2\":\"PricingList--totals--v2--HhtBw\",\"totalsV2\":\"PricingList--totals--v2--HhtBw\",\"total-primary-text\":\"PricingList--total-primary-text--Gcr0Y\",\"totalPrimaryText\":\"PricingList--total-primary-text--Gcr0Y\",\"total-secondary-text\":\"PricingList--total-secondary-text--rDL+Y\",\"totalSecondaryText\":\"PricingList--total-secondary-text--rDL+Y\",\"total-secondary-text--v2\":\"PricingList--total-secondary-text--v2--i5ha+\",\"totalSecondaryTextV2\":\"PricingList--total-secondary-text--v2--i5ha+\",\"price-row\":\"PricingList--price-row--IX8x6\",\"priceRow\":\"PricingList--price-row--IX8x6\",\"note--v2\":\"PricingList--note--v2--kGMZc\",\"noteV2\":\"PricingList--note--v2--kGMZc\",\"discounts--v2\":\"PricingList--discounts--v2--vMiVM\",\"discountsV2\":\"PricingList--discounts--v2--vMiVM\"};","import React from 'react';\nimport I18n from 'utils/I18n';\nimport Cldr from 'utils/Cldr';\nimport clsx from '@strava/ui/clsx';\nimport { Markup } from 'interweave';\n\nimport PromoCodeInput from './PromoCodeInput';\nimport Discounts from './Discounts';\nimport { getStyles as _getStyles } from '../../../utils/checkoutUtils.js';\nimport { useCheckoutContext } from '../../../state/CheckoutContext';\nimport { I18nPrefixOrganic } from '../../../shared/constants';\n\nimport styles from './PricingList.scss';\n\nconst renderPerMonthPrice = (price, currency) => (\n \n
\n {discounts.map((discount) => (\n {totalPriceText()}
\n {subtotalText}
\n \n
\n ))}\n\n \n\n {shouldShowCheckoutRefresh && (\n \n {getDiscountItemText(discount)}\n {promotionApplied && shouldShowCheckoutRefresh && (\n
\n \n {isYearlyDuration\n ? renderPerYearPrice(-discount.amount, currency)\n : renderPerMonthPrice(-discount.amount, currency)}\n
\n \n
\n {I18n.t(`${I18nPrefixOrganic}.total`)}
\n \n \n {totalSecondaryTextInParentheses}\n
\n \n {totalPrimaryText}\n
\n \n {hasDiscounts && !shouldShowCheckoutRefresh &&
\n \n {shouldShowCheckoutRefresh && (\n <>\n \n \n {totalSecondaryText}\n
\n )}\n \n {I18n.t(\n `${I18nPrefixOrganic}.${\n shouldShowCheckoutRefresh ? 'billed_today' : 'total'\n }`\n )}\n
\n \n \n {totalPrimaryText}\n
\n {!shouldShowCheckoutRefresh && (\n \n {hasDiscounts\n ? promoBilledAfterText\n : I18n.t(`${I18nPrefixOrganic}.renews`)}\n
\n {hasDiscounts && {subtotalText}
}\n \n {hasDiscounts && - \n {features.map((feature) => (\n
\n
\n {feature.description}\n {feature.badge && (\n \n {feature.badge.toUpperCase()}\n \n )}\n \n ))}\n \n {shouldShowBilledToday && (\n
\n );\n};\n\nexport default Footer;\n","export { default } from './Footer';\n","// extracted by mini-css-extract-plugin\nexport default {\"checkout-summary\":\"Summary--checkout-summary---t8UL\",\"checkoutSummary\":\"Summary--checkout-summary---t8UL\",\"card--v2\":\"Summary--card--v2--BPb7F\",\"cardV2\":\"Summary--card--v2--BPb7F\",\"edit-packages\":\"Summary--edit-packages--oill-\",\"editPackages\":\"Summary--edit-packages--oill-\",\"summary-footer\":\"Summary--summary-footer--OWiHM\",\"summaryFooter\":\"Summary--summary-footer--OWiHM\",\"summary-footer--v2\":\"Summary--summary-footer--v2--8-lYO\",\"summaryFooterV2\":\"Summary--summary-footer--v2--8-lYO\",\"footnote\":\"Summary--footnote--a8eht\",\"promo-header\":\"Summary--promo-header--o+FqR\",\"promoHeader\":\"Summary--promo-header--o+FqR\",\"overview-section\":\"Summary--overview-section--FOjvE\",\"overviewSection\":\"Summary--overview-section--FOjvE\",\"overview-section--v2\":\"Summary--overview-section--v2--K8PMH\",\"overviewSectionV2\":\"Summary--overview-section--v2--K8PMH\",\"overview-title\":\"Summary--overview-title--eB0MB\",\"overviewTitle\":\"Summary--overview-title--eB0MB\",\"overview-title--v2\":\"Summary--overview-title--v2--UYzTc\",\"overviewTitleV2\":\"Summary--overview-title--v2--UYzTc\",\"overview-description\":\"Summary--overview-description--ugYP2\",\"overviewDescription\":\"Summary--overview-description--ugYP2\"};","import React from 'react';\n\nimport I18n from 'utils/I18n';\nimport Cldr from 'utils/Cldr';\nimport clsx from '@strava/ui/clsx';\n\nimport { useCheckoutContext } from '../../state/CheckoutContext';\n\nimport Card from '../shared/Card';\nimport Inset from '../shared/Inset';\nimport DurationSelectSideBySide from './DurationSelectSideBySide';\nimport PricingList from './PricingList';\nimport SubscriptionFeatures from '../shared/SubscriptionFeatures';\nimport Footer from './Footer';\nimport { getStyles as _getStyles } from '../../utils/checkoutUtils.js';\nimport {\n I18nPrefixOrganic,\n I18nPrefixSubscriptionPreview,\n I18nPrefixFatmap\n} from '../../shared/constants';\n\nimport styles from './Summary.scss';\n\nexport const Summary = () => {\n const { checkoutEntityState } = useCheckoutContext();\n const {\n duration,\n experiments,\n promoCampaign,\n pricing,\n products,\n analyticsData\n } = checkoutEntityState;\n const promotionArgument = products?.promotion?.argument;\n const { recurringAmount, billedToday, currency } = pricing;\n const {\n shouldShowSubscriptionPreview,\n shouldShowCheckoutRefresh\n } = experiments;\n const isFromFatmap = analyticsData.origin === 'fatmap';\n\n const shouldShowSubscriptionFeatures =\n shouldShowSubscriptionPreview || shouldShowCheckoutRefresh || isFromFatmap;\n const shouldShowMembershipHeader =\n promoCampaign && !shouldShowCheckoutRefresh;\n const title = () => {\n if (shouldShowSubscriptionPreview) {\n return I18n.t(`${I18nPrefixSubscriptionPreview}.title`)\n }\n if (isFromFatmap) {\n return I18n.t(`${I18nPrefixFatmap}.title_v2`)\n }\n return I18n.t(`${I18nPrefixOrganic}.title`);\n }\n\n const getStyles = (style) =>\n _getStyles(styles, style, shouldShowCheckoutRefresh);\n\n return (\n \n
\n )}\n {shouldShowPromoInput && (\n \n {I18n.t(`${I18nPrefixOrganic}.billed_today`)}\n
\n \n {Cldr.formatCurrency(billedToday, currency)}\n
\n \n
\n )}\n \n {shouldShowPromoButton && getTrialProduct(checkoutEntityState, dispatch)}\n type=\"button\"\n >\n {I18n.t(`${I18nPrefixOrganic}.cta.redeem_trial_offer`)}\n \n )}\n
\n \n \n {shouldShowSubscriptionFeatures && (\n \n \n )}\n {shouldShowMembershipHeader ? (\n \n \n ) : (\n \n \n )}\n \n \n \n\n {!shouldShowCheckoutRefresh && (\n \n {recurringAmount !== billedToday &&\n I18n.t(\n `${I18nPrefixOrganic}.price_after_discount_v2.${duration}`,\n {\n price: Cldr.formatCurrency(recurringAmount, currency),\n count: promotionArgument\n }\n )}{' '}\n {I18n.t(`${I18nPrefixOrganic}.cancel`)}\n \n )}\n \n
\n );\n};\n\nexport default Summary;\n","export { default } from './Summary';\n","// extracted by mini-css-extract-plugin\nexport default {\"duration-select\":\"DurationSelectStacked--duration-select---unv7\",\"durationSelect\":\"DurationSelectStacked--duration-select---unv7\",\"duration-option\":\"DurationSelectStacked--duration-option--wJ4xl\",\"durationOption\":\"DurationSelectStacked--duration-option--wJ4xl\",\"radio-button\":\"DurationSelectStacked--radio-button--Zw8Kw\",\"radioButton\":\"DurationSelectStacked--radio-button--Zw8Kw\",\"option-label\":\"DurationSelectStacked--option-label--HpDj5\",\"optionLabel\":\"DurationSelectStacked--option-label--HpDj5\",\"option-label-top\":\"DurationSelectStacked--option-label-top--5S63r\",\"optionLabelTop\":\"DurationSelectStacked--option-label-top--5S63r\",\"option-label-bottom\":\"DurationSelectStacked--option-label-bottom--Xi3Xf\",\"optionLabelBottom\":\"DurationSelectStacked--option-label-bottom--Xi3Xf\",\"yearly-percent-off\":\"DurationSelectStacked--yearly-percent-off--wDf2y\",\"yearlyPercentOff\":\"DurationSelectStacked--yearly-percent-off--wDf2y\",\"border-bottom\":\"DurationSelectStacked--border-bottom--WmXA7\",\"borderBottom\":\"DurationSelectStacked--border-bottom--WmXA7\"};","import React from 'react';\nimport Cldr from 'utils/Cldr';\nimport clsx from '@strava/ui/clsx';\nimport I18n from 'utils/I18n';\nimport { trackV2 } from 'utils/analytics';\nimport Radio from '@strava/ui/Radio';\n\nimport {\n setMonthlyDuration,\n setYearlyDuration\n} from '../../../state/Checkout.actions';\nimport { useCheckoutContext } from '../../../state/CheckoutContext';\nimport { I18nPrefixTrial } from '../../../shared/constants';\n\nimport styles from './DurationSelectStacked.scss';\n\nexport const DurationSelectStacked = () => {\n const { checkoutEntityState, dispatch } = useCheckoutContext();\n\n const {\n analyticsData,\n checkoutSubmitting,\n currency,\n duration,\n products,\n promoCodeSubmitting,\n trialInfo,\n yearlyPercentOff\n } = checkoutEntityState;\n const yearlyRecurringAmount = products?.yearly?.recurringAmount;\n const monthlyRecurringAmount = products?.monthly?.recurringAmount;\n const disabled =\n checkoutSubmitting || promoCodeSubmitting || products?.promotion?.full;\n const trialLength = trialInfo?.trialLength;\n\n const handleDurationChange = ({ durationSelected, onClickFunc }) => {\n trackV2({\n category: 'summit_upsell',\n page: 'cart',\n action: 'change_duration',\n properties: {\n ...analyticsData,\n duration: durationSelected,\n subscription_type: 'trial'\n }\n });\n\n dispatch(onClickFunc());\n };\n\n return (\n {title()}
\n\n
\n \n {I18n.t(`${I18nPrefixOrganic}.membership.${duration}`)}\n
\n\n
\n \n \n {I18n.t(`${I18nPrefixTrial}.yearly`)}\n \n {I18n.t(`${I18nPrefixTrial}.savings`, {\n percent: Math.round(yearlyPercentOff)\n })}\n \n
\n \n {I18n.t(`${I18nPrefixTrial}.recurring_cost.yearly`, {\n days: trialLength,\n price: Cldr.formatCurrency(yearlyRecurringAmount, currency)\n })}\n
\n \n
\n \n \n );\n};\n\nexport default DurationSelectStacked;\n","export { default } from './DurationSelectStacked';\n","// extracted by mini-css-extract-plugin\nexport default {\"checkout-summary\":\"SummaryTrials--checkout-summary--LZhsM\",\"checkoutSummary\":\"SummaryTrials--checkout-summary--LZhsM\",\"card--v2\":\"SummaryTrials--card--v2--exG2v\",\"cardV2\":\"SummaryTrials--card--v2--exG2v\",\"overview-section\":\"SummaryTrials--overview-section--QGrHY\",\"overviewSection\":\"SummaryTrials--overview-section--QGrHY\",\"overview-section--v2\":\"SummaryTrials--overview-section--v2--O9i-w\",\"overviewSectionV2\":\"SummaryTrials--overview-section--v2--O9i-w\",\"overview-title\":\"SummaryTrials--overview-title--sMzdj\",\"overviewTitle\":\"SummaryTrials--overview-title--sMzdj\",\"overview-title--v2\":\"SummaryTrials--overview-title--v2--JxYwA\",\"overviewTitleV2\":\"SummaryTrials--overview-title--v2--JxYwA\",\"overview-description\":\"SummaryTrials--overview-description--te5tr\",\"overviewDescription\":\"SummaryTrials--overview-description--te5tr\",\"pricing-section--v2\":\"SummaryTrials--pricing-section--v2--9UIue\",\"pricingSectionV2\":\"SummaryTrials--pricing-section--v2--9UIue\",\"options-section\":\"SummaryTrials--options-section--QW6Dp\",\"optionsSection\":\"SummaryTrials--options-section--QW6Dp\",\"line-item\":\"SummaryTrials--line-item--YYNkz\",\"lineItem\":\"SummaryTrials--line-item--YYNkz\",\"line-item--v2\":\"SummaryTrials--line-item--v2--IEBYA\",\"lineItemV2\":\"SummaryTrials--line-item--v2--IEBYA\",\"price-row\":\"SummaryTrials--price-row--rLaMF\",\"priceRow\":\"SummaryTrials--price-row--rLaMF\",\"billed-today\":\"SummaryTrials--billed-today--S8S9A\",\"billedToday\":\"SummaryTrials--billed-today--S8S9A\",\"billed-today--v2\":\"SummaryTrials--billed-today--v2--Jambv\",\"billedTodayV2\":\"SummaryTrials--billed-today--v2--Jambv\",\"billed-after-trial\":\"SummaryTrials--billed-after-trial--qh-ZA\",\"billedAfterTrial\":\"SummaryTrials--billed-after-trial--qh-ZA\",\"billed-after-trial--v2\":\"SummaryTrials--billed-after-trial--v2--rP1WJ\",\"billedAfterTrialV2\":\"SummaryTrials--billed-after-trial--v2--rP1WJ\",\"more-billing-options\":\"SummaryTrials--more-billing-options--X2d-s\",\"moreBillingOptions\":\"SummaryTrials--more-billing-options--X2d-s\",\"more-billing-options--v2\":\"SummaryTrials--more-billing-options--v2--XUfX9\",\"moreBillingOptionsV2\":\"SummaryTrials--more-billing-options--v2--XUfX9\",\"action-divider\":\"SummaryTrials--action-divider--CE8W4\",\"actionDivider\":\"SummaryTrials--action-divider--CE8W4\",\"more-billing-options-button\":\"SummaryTrials--more-billing-options-button--H46GO\",\"moreBillingOptionsButton\":\"SummaryTrials--more-billing-options-button--H46GO\",\"more-billing-options-button--v2\":\"SummaryTrials--more-billing-options-button--v2--Jy3CT\",\"moreBillingOptionsButtonV2\":\"SummaryTrials--more-billing-options-button--v2--Jy3CT\",\"footnote-section\":\"SummaryTrials--footnote-section--ejYQs\",\"footnoteSection\":\"SummaryTrials--footnote-section--ejYQs\"};","import React, { useState } from 'react';\n\nimport I18n from 'utils/I18n';\nimport Cldr from 'utils/Cldr';\nimport clsx from '@strava/ui/clsx';\nimport { Currency } from '@strava/units/react';\n\nimport SubscriptionFeatures from '../shared/SubscriptionFeatures';\nimport DurationSelectStacked from './DurationSelectStacked';\nimport DurationSelectSideBySide from '../Summary/DurationSelectSideBySide';\nimport Card from '../shared/Card';\nimport Inset from '../shared/Inset';\nimport PromoCodeInput from '../Summary/PricingList/PromoCodeInput';\n\nimport { getOrganicProduct } from '../../state/Checkout.actions';\nimport { useCheckoutContext } from '../../state/CheckoutContext';\nimport { getStyles as _getStyles } from '../../utils/checkoutUtils.js';\nimport { I18nPrefixTrial, I18nPrefixFatmap } from '../../shared/constants';\n\nimport styles from './SummaryTrials.scss';\n\nexport const calculateTrialEndDate = (trialLength, startDate) => {\n const trialEndDate = startDate ? new Date(startDate) : new Date();\n trialEndDate.setDate(trialEndDate.getDate() + trialLength);\n return Cldr.formatDateTime(trialEndDate, {\n format: 'additional',\n type: 'yMMMd'\n });\n};\n\nconst renderPerMonthPrice = (price, currency) =>\n I18n.t_html(`${I18nPrefixTrial}.per_month`, {\n price: Cldr.formatCurrency(price, currency)\n });\n\nconst renderPerYearPrice = (price, currency) =>\n I18n.t_html(`${I18nPrefixTrial}.per_year`, {\n price: Cldr.formatCurrency(price, currency)\n });\n\nexport const SummaryTrials = () => {\n const { checkoutEntityState, dispatch } = useCheckoutContext();\n const { experiments, trialInfo, pricing, analyticsData } = checkoutEntityState;\n const {\n currency,\n billedToday,\n yearlyTotal,\n monthlyTotal,\n duration\n } = pricing;\n const { shouldShowTrustLanguage, shouldShowCheckoutRefresh } = experiments;\n\n const [showMoreBillingOptions, setShowMoreBillingOptions] = useState(false);\n const [showPromoCodeInput, setShowPromoCodeInput] = useState(false);\n\n const getStyles = (style) =>\n _getStyles(styles, style, shouldShowCheckoutRefresh);\n\n const toggleShowBillingOptions = () =>\n setShowMoreBillingOptions(!showMoreBillingOptions);\n\n const handlePromoClick = () =>\n shouldShowCheckoutRefresh\n ? setShowPromoCodeInput(true)\n : getOrganicProduct(checkoutEntityState, dispatch);\n\n const isYearlyDuration = duration === 'yearly';\n const totalPrimaryPrice = isYearlyDuration ? yearlyTotal : monthlyTotal;\n const isFromFatmap = analyticsData.origin === 'fatmap';\n\n const title = () => {\n if (isFromFatmap) {\n return I18n.t(`${I18nPrefixFatmap}.title_v2`)\n }\n return I18n.t(\n `${I18nPrefixTrial}.title${\n shouldShowCheckoutRefresh ? '_v2' : ''\n }`,\n {\n days: trialInfo?.trialLength\n }\n )\n }\n const renderOverview = () => {\n if (shouldShowTrustLanguage && trialInfo?.trialLength) {\n return (\n \n {I18n.t_html(`${I18nPrefixTrial}.disclaimer`, {\n trialEndDate: calculateTrialEndDate(trialInfo.trialLength)\n })}\n \n );\n }\n return \n {I18n.t(`${I18nPrefixTrial}.monthly`)}\n
\n \n {I18n.t(`${I18nPrefixTrial}.recurring_cost.monthly`, {\n days: trialLength,\n price: Cldr.formatCurrency(monthlyRecurringAmount, currency)\n })}\n
\n \n \n \n \n\n {shouldShowDurationSelectSideBySide && (\n \n \n )}\n\n \n \n
\n\n \n {title()}\n
\n{renderOverview()}
\n \n {I18n.t(`${I18nPrefixTrial}.billed.today`)}\n {billedTodayFormatted}\n
\n \n {I18n.t(`${I18nPrefixTrial}.billed.after_trial`)}\n {totalPrimaryText}\n
\n \n \n\n \n {shouldShowBillingOptions && (\n \n {billingOptionsButtonText}\n \n )}\n {shouldShowDivider && (\n ·\n )}\n {showPromoCodeInput ? (\n \n {I18n.t(\n `${I18nPrefixTrial}.${\n shouldShowCheckoutRefresh ? 'redeem' : 'add'\n }_promo_code`\n )}\n \n )}\n
\n\n {shouldShowDurationSelectStacked && \n
\n );\n};\n\nexport default Overview;\n","export { default } from './Overview';\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"Pricing--container--rkOwA\",\"row\":\"Pricing--row--EXHd9\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Cldr from 'utils/Cldr';\nimport clsx from '@strava/ui/clsx';\nimport I18n from 'utils/I18n';\nimport { useCheckoutContext } from '../../../state/CheckoutContext';\nimport { I18nPrefixStudent } from '../../../shared/constants';\n\nimport styles from './Pricing.scss';\n\nconst Pricing = ({ isPrimary, label, showFootnote }) => {\n const { checkoutEntityState } = useCheckoutContext();\n const { pricing } = checkoutEntityState;\n\n const amount = isPrimary ? pricing.billedToday : pricing.recurringAmount;\n const formattedAmount = Cldr.formatCurrency(amount, pricing.currency);\n\n return (\n \n {I18n.t(`${I18nPrefixStudent}.annual_student_plan`)}\n
\n{subtitle}
\n\n
\n );\n};\n\nPricing.propTypes = {\n isPrimary: PropTypes.bool.isRequired,\n label: PropTypes.string.isRequired,\n showFootnote: PropTypes.bool.isRequired\n};\n\nexport default Pricing;\n","export { default } from './Pricing';\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"Footnote--container--7S89n\",\"icon\":\"Footnote--icon---CH-2\",\"row\":\"Footnote--row--VEDLG\"};","import React from 'react';\nimport I18n from 'utils/I18n';\nimport clsx from '@strava/ui/clsx';\nimport { NavigationStudentNormalSmall } from '@strava/icons';\nimport { I18nPrefixStudent } from '../../../shared/constants';\n\nimport styles from './Footnote.scss';\n\nconst Footnote = () => (\n \n
{label}
\n\n {isPrimary\n ? formattedAmount\n : I18n.t(`${I18nPrefixStudent}.billing.price_per_year`, {\n price: formattedAmount\n })}\n
\n \n {showFootnote && (\n {I18n.t(`${I18nPrefixStudent}.billing.cancel_anytime`)}\n )}\n\n
\n);\n\nexport default Footnote;\n","export { default } from './Footnote';\n","// extracted by mini-css-extract-plugin\nexport default {\"checkout-summary\":\"SummaryStudents--checkout-summary--UZNQl\",\"checkoutSummary\":\"SummaryStudents--checkout-summary--UZNQl\"};","import React, { useEffect } from 'react';\nimport I18n from 'utils/I18n';\nimport { trackV2 } from 'utils/analytics';\nimport Overview from '../shared/Overview';\nimport Card from '../shared/Card';\nimport Inset from '../shared/Inset';\nimport Pricing from '../shared/Pricing';\nimport Footnote from '../shared/Footnote';\nimport { I18nPrefixStudent } from '../../shared/constants';\nimport { useCheckoutContext } from '../../state/CheckoutContext';\nimport { subscriptionType } from '../../utils/checkoutUtils';\n\nimport styles from './SummaryStudents.scss';\n\nconst SummaryStudents = () => {\n const { checkoutEntityState } = useCheckoutContext();\n\n const { analyticsData, isTrial } = checkoutEntityState;\n\n useEffect(() => {\n const trackProps = {\n category: 'subscriptions',\n page: 'student_plan_checkout',\n properties: {\n ...analyticsData,\n subscription_type: subscriptionType(isTrial)\n }\n };\n trackV2({ ...trackProps, action: 'screen_enter' });\n return () => {\n trackV2({ ...trackProps, action: 'screen_exit' });\n };\n }, [analyticsData, isTrial]);\n\n return (\n \n
\n \n
\n {I18n.t(`${I18nPrefixStudent}.reverify_footnote`)}
\n\n \n \n \n \n \n {isTrial && (\n \n \n )}\n \n \n \n
\n );\n};\n\nexport default SummaryStudents;\n","export { default } from './SummaryStudents';\n","// extracted by mini-css-extract-plugin\nexport default {\"checkout-summary\":\"SummaryHoliday--checkout-summary--FL0r5\",\"checkoutSummary\":\"SummaryHoliday--checkout-summary--FL0r5\",\"overview-container\":\"SummaryHoliday--overview-container--knteS\",\"overviewContainer\":\"SummaryHoliday--overview-container--knteS\",\"top-border\":\"SummaryHoliday--top-border--JnHL+\",\"topBorder\":\"SummaryHoliday--top-border--JnHL+\",\"pricing-container\":\"SummaryHoliday--pricing-container--JQ6EX\",\"pricingContainer\":\"SummaryHoliday--pricing-container--JQ6EX\",\"pricing-row\":\"SummaryHoliday--pricing-row--phMka\",\"pricingRow\":\"SummaryHoliday--pricing-row--phMka\",\"pricing-footer\":\"SummaryHoliday--pricing-footer--3pJOC\",\"pricingFooter\":\"SummaryHoliday--pricing-footer--3pJOC\",\"footer-container\":\"SummaryHoliday--footer-container--OiRqM\",\"footerContainer\":\"SummaryHoliday--footer-container--OiRqM\",\"footer-row\":\"SummaryHoliday--footer-row--QshRv\",\"footerRow\":\"SummaryHoliday--footer-row--QshRv\"};","import React, { useEffect } from 'react';\nimport I18n from 'utils/I18n';\nimport { trackV2 } from 'utils/analytics';\nimport Cldr from 'utils/Cldr';\nimport Card from '../shared/Card';\nimport Inset from '../shared/Inset';\nimport { useCheckoutContext } from '../../state/CheckoutContext';\nimport { I18nPrefixHoliday } from '../../shared/constants';\nimport styles from './SummaryHoliday.scss';\n\nconst SummaryHoliday = () => {\n const { checkoutEntityState } = useCheckoutContext();\n const { analyticsData, pricing } = checkoutEntityState;\n const { currency, billedToday } = pricing;\n\n useEffect(() => {\n const trackProps = {\n category: 'subscriptions',\n page: 'holiday_2022_checkout',\n properties: {\n ...analyticsData,\n subscription_type: 'organic'\n }\n };\n trackV2({ ...trackProps, action: 'screen_enter' });\n return () => {\n trackV2({ ...trackProps, action: 'screen_exit' });\n };\n }, [analyticsData]);\n\n const renderPerYearPrice = (price) =>\n I18n.t_html(\n `${I18nPrefixHoliday}.per_year_v2`,\n {\n price: Cldr.formatCurrency(price, currency)\n },\n {\n tagName: 'div'\n }\n );\n\n const getAutoRenewDate = () => {\n const autoRenewDate = new Date();\n // auto renew date is 14 months from today (buy 12, get 2 free)\n autoRenewDate.setMonth(autoRenewDate.getMonth() + 14);\n return Cldr.formatDateTime(autoRenewDate, {\n format: 'additional',\n type: 'yMMMd'\n });\n };\n\n return (\n \n \n \n \n \n \n \n \n \n
\n );\n};\n\nexport default SummaryHoliday;\n","import React from 'react';\n\nimport Summary from '../Summary';\nimport SummaryTrials from '../SummaryTrials';\nimport SummaryStudents from '../SummaryStudents';\nimport SummaryHoliday from '../SummaryHoliday/SummaryHoliday';\nimport { useCheckoutContext } from '../../state/CheckoutContext';\n\nconst SummaryContainer = () => {\n const { checkoutEntityState } = useCheckoutContext();\n\n const {\n isTrial,\n isStudentPromotion,\n isHolidayPromotion\n } = checkoutEntityState;\n\n if (isStudentPromotion) {\n return \n
\n \n {I18n.t(`${I18nPrefixHoliday}.offer`)}\n
\n{renderPerYearPrice(billedToday)}
\n\n
\n \n
{I18n.t(`${I18nPrefixHoliday}.billed_today`)}
\n{renderPerYearPrice(billedToday)}
\n \n \n {I18n.t(`${I18nPrefixHoliday}.cancel`)}\n \n\n
\n \n
\n \n {I18n.t(`${I18nPrefixHoliday}.footnote_v2`, {\n date: getAutoRenewDate()\n })}\n
\n\n
\n );\n};\n\nAdyenForm.propTypes = {\n sessionData: PropTypes.string.isRequired,\n sessionId: PropTypes.string.isRequired,\n clientKey: PropTypes.string.isRequired,\n environment: PropTypes.string.isRequired,\n amount: PropTypes.number.isRequired,\n currency: PropTypes.string.isRequired,\n promotionCode: PropTypes.string,\n handleCompleted: PropTypes.func.isRequired,\n handleSubmit: PropTypes.func.isRequired,\n handleError: PropTypes.func.isRequired\n};\n\nAdyenForm.defaultProps = {\n promotionCode: null\n};\n\nexport default AdyenForm;\n","export { default } from './AdyenForm';\n","import React, { useReducer, useEffect, useMemo } from 'react';\nimport createNetworkingClient from 'utils/networking-client';\nimport { trackV2 } from 'utils/analytics';\nimport { logError } from '../../../../../utils/sentry';\nimport AdyenForm from '../AdyenForm';\nimport { useCheckoutContext } from '../../state/CheckoutContext';\nimport { subscriptionType } from '../../utils/checkoutUtils';\n\nconst INITIALIZED = 'initialized';\nconst UNSET = 'unset';\nconst ACTION_SET_SESSION_SUCCESS = 'setSessionSuccess';\nconst ACTION_SET_SESSION_ERROR = 'setSessionError';\nconst ACTION_RESET_SESSION = 'resetSession';\nconst startSubscription = async (\n adyenResult,\n sessionId,\n redirectUrl,\n recurring,\n sku,\n promotionCode,\n isPromoCodeInputVisible,\n isShowingTrial,\n analyticsData,\n isTrial,\n handleError\n) => {\n const client = createNetworkingClient();\n const options = {\n method: 'POST',\n url: '/adyen/start_drop_in_subscription',\n data: {\n result_code: adyenResult.resultCode,\n adyen_session_id: sessionId,\n redirect_url: redirectUrl,\n sku,\n recurring,\n code: promotionCode,\n organic: isPromoCodeInputVisible || !isShowingTrial\n }\n };\n client.request(options).then((response) => {\n if (response && response.status === 200) {\n trackV2({\n category: 'summit_upsell',\n page: 'cart',\n action: 'finish_payment',\n properties: {\n ...analyticsData,\n adyen_dropin: true,\n subscription_type: subscriptionType(isTrial)\n }\n });\n\n window.setTimeout(() => {\n if (redirectUrl) {\n window.location.replace(redirectUrl); // full url\n } else {\n window.location = response.headers.location; // path within www.strava.com\n }\n }, 2000);\n } else if (response) {\n const errorResponse = new Error(\n `Got an error response from server ${response.status}`\n );\n errorResponse.name = 'AdyenCustomError';\n handleError(errorResponse);\n } else {\n const errorNoResponse = new Error(\n 'Did not get a response from axios client'\n );\n errorNoResponse.name = 'AdyenCustomError';\n handleError(errorNoResponse);\n }\n });\n};\nconst sendSubmitTrackEvent = (analyticsData, isTrial, isStudentCheckout) => {\n const forPage = isStudentCheckout ? 'student_plan_checkout' : 'checkout';\n trackV2({\n category: 'subscriptions',\n page: forPage,\n element: 'trial_or_subscribe',\n action: 'click',\n properties: {\n ...analyticsData,\n adyen_dropin: true,\n subscription_type: subscriptionType(isTrial)\n }\n });\n};\nconst generateSession = async (\n recurring,\n amount,\n currency,\n isPromoCodeInputVisible,\n promotionCode,\n isShowingTrial,\n dispatch,\n redirectUrl\n) => {\n const client = createNetworkingClient();\n const options = {\n method: 'POST',\n url: '/adyen/generate_session',\n data: {\n recurring,\n organic: isPromoCodeInputVisible || !isShowingTrial,\n code: promotionCode\n }\n };\n client\n .request(options)\n .then((response) => {\n const payload = {\n sessionId: response.data.session_id,\n redirectUrl,\n sessionData: response.data.session_data,\n amount,\n currency,\n recurring\n };\n dispatch({ type: ACTION_SET_SESSION_SUCCESS, payload });\n })\n .catch(() => {\n dispatch({ type: ACTION_SET_SESSION_ERROR, payload: { recurring } });\n });\n};\n\nconst initialSessionData = (\n sessionData,\n sessionId,\n redirectUrl,\n duration,\n amount,\n currency,\n promotionCode,\n isPromoCodeInputVisible\n) => {\n const data = {\n currency,\n promotionCode,\n isPromoCodeInputVisible,\n redirectUrl,\n yearly: {\n amount: null,\n status: UNSET,\n sessionData: '',\n sessionId: ''\n },\n monthly: {\n amount: null,\n status: UNSET,\n sessionData: '',\n sessionId: ''\n }\n };\n\n data[duration].sessionId = sessionId;\n data[duration].sessionData = sessionData;\n data[duration].status = INITIALIZED;\n data[duration].amount = amount;\n\n return data;\n};\n\nconst getOrigin = () => {\n try {\n if (typeof document === 'undefined') {\n return 'no document found';\n }\n return document.location.origin;\n } catch (e) {\n return 'error retrieving origin';\n }\n};\n\nconst getAncestorOrigins = () => {\n try {\n if (typeof document === 'undefined') {\n return 'no document found';\n }\n const items = document.location.ancestorOrigins;\n if (!items) {\n return 'ancestor origin not supported';\n }\n if (items.length === 0) {\n return 'no ancestor origins';\n }\n\n const itemValues = [];\n for (let index = 0; index < items.length; index++) {\n itemValues.push(items.item(index));\n }\n return itemValues.join(',');\n } catch (e) {\n return 'error retrieving ancestor origins';\n }\n};\n\nconst reducer = (state, action) => {\n switch (action.type) {\n case ACTION_SET_SESSION_SUCCESS:\n return {\n ...state,\n [action.payload.recurring]: {\n sessionData: action.payload.sessionData,\n sessionId: action.payload.sessionId,\n redirectUrl: action.payload.redirectUrl,\n amount: action.payload.amount,\n status: INITIALIZED\n }\n };\n case ACTION_SET_SESSION_ERROR:\n return {\n ...state,\n [action.payload.recurring]: {\n sessionData: null,\n sessionId: null,\n amount: null,\n status: INITIALIZED\n }\n };\n case ACTION_RESET_SESSION:\n return initialSessionData(\n action.payload.sessionData,\n action.payload.sessionId,\n action.payload.redirectUrl,\n action.payload.duration,\n action.payload.amount,\n action.payload.currency,\n action.payload.promotionCode,\n action.payload.isPromoCodeInputVisible\n );\n default:\n throw new Error();\n }\n};\n\nconst isNewSessionId = (sessionId, state) => {\n return (\n state.yearly.sessionId !== sessionId &&\n state.monthly.sessionId !== sessionId\n );\n};\n\nconst createHandler = (\n sessionId,\n duration,\n sku,\n promotionCode,\n isPromoCodeInputVisible,\n isShowingTrial,\n analyticsData,\n isTrial,\n handleError,\n redirectUrl,\n) => {\n return (adyenResult) => {\n startSubscription(\n adyenResult,\n sessionId,\n redirectUrl,\n duration,\n sku,\n promotionCode,\n isPromoCodeInputVisible,\n isShowingTrial,\n analyticsData,\n isTrial,\n handleError\n );\n };\n};\n\nconst createSubmitHandler = (analyticsData, isTrial, isStudentPromotion) => {\n return () => {\n sendSubmitTrackEvent(analyticsData, isTrial, isStudentPromotion);\n };\n};\n\n// AdyenSessionAdapter supports managing of internal state for fetching and minting\n// new session data when the price changes. For the dropin, component we need\n// to create a new session on the server that has the price and currency to use\n// in concert with the dropin component.\nconst AdyenSessionAdapter = () => {\n const { checkoutEntityState } = useCheckoutContext();\n const {\n duration,\n sessionData,\n sessionId,\n redirectUrl,\n clientKey,\n environment,\n pricing,\n products,\n promoCodeInputVisibility,\n isTrial,\n analyticsData,\n isStudentPromotion\n } = checkoutEntityState;\n const { currency, amountInMinorUnits: amount, sku } = pricing;\n const promotionCode = products?.promotion.code;\n const isPromoCodeInputVisible = promoCodeInputVisibility;\n const isShowingTrial = isTrial;\n const [state, dispatch] = useReducer(\n reducer,\n initialSessionData(\n sessionData,\n sessionId,\n redirectUrl,\n duration,\n amount,\n currency,\n promotionCode,\n isPromoCodeInputVisible\n )\n );\n const currentStatus = state[duration].status;\n const currentSessionId = state[duration].sessionId;\n const currentSessionData = state[duration].sessionData;\n const currentCurrency = state.currency;\n const currentAmount = state[duration].amount;\n const handleError = useMemo(() => {\n const withErrorLogger = (error) => {\n const fetchVersion =\n typeof window !== 'undefined' && 'fetch' in window\n ? 'native-fetch'\n : 'whatwg-fetch';\n const ancestorOrigins = getAncestorOrigins();\n const origin = getOrigin();\n const context = {\n 'checkout.isTrial': isTrial,\n 'checkout.isStudentPromotion': isStudentPromotion,\n 'checkout.isPromoCodeInputVisible': isPromoCodeInputVisible,\n 'checkout.amount': amount,\n 'checkout.sessionid': currentSessionId,\n 'checkout.ancestorOrigins': ancestorOrigins\n };\n const tags = {\n 'checkout.source': 'adyen.dropin',\n 'checkout.environment': environment,\n 'checkout.sku': sku,\n 'checkout.duration': duration,\n 'checkout.clientkey': clientKey,\n 'checkout.fetchVersion': fetchVersion,\n 'checkout.origin': origin\n };\n logError(error, { contexts: { checkout: context }, tags });\n };\n return withErrorLogger;\n }, [\n environment,\n currentSessionId,\n isTrial,\n isStudentPromotion,\n isPromoCodeInputVisible,\n amount,\n sku,\n duration,\n clientKey\n ]);\n\n if (isNewSessionId(sessionId, state)) {\n dispatch({\n type: ACTION_RESET_SESSION,\n payload: {\n sessionData,\n sessionId,\n redirectUrl,\n duration,\n amount,\n currency,\n promotionCode,\n isPromoCodeInputVisible\n }\n });\n }\n\n useEffect(() => {\n if (currentStatus === INITIALIZED) {\n return;\n }\n generateSession(\n duration,\n amount,\n currency,\n isPromoCodeInputVisible,\n promotionCode,\n isShowingTrial,\n dispatch,\n redirectUrl\n );\n }, [duration, currentStatus, isPromoCodeInputVisible, promotionCode]);\n\n const completedHandler = createHandler(\n currentSessionId,\n duration,\n sku,\n promotionCode,\n isPromoCodeInputVisible,\n isShowingTrial,\n analyticsData,\n isTrial,\n handleError,\n redirectUrl\n );\n const submitHandler = createSubmitHandler(\n analyticsData,\n isTrial,\n isStudentPromotion\n );\n\n return (\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 {I18n.t(`${i18nPrefix}description_${units}_v2`)}\n
\n \n {I18n.t(`${i18nPrefix}.subtitle`)}\n
\n \n {I18n.t(`${I18nPrefix}.sign_up_with_email`)}\n
\n\n \n\n \n
\n );\n };\n\n return (\n {hasIcon && blurb.icon}
\n \n
\n \n {blurb.header}\n {hasBadge && (\n {blurb.badge.toUpperCase()}\n )}\n
\n{blurb.text}
\n\n \n 
\n
\n \n \n );\n};\n\nexport default SubscriptionFeatures;\n","export { default } from './SubscriptionFeatures';\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"FeatureCards--container--c-V3L\"};","// extracted by mini-css-extract-plugin\nexport default {\"card\":\"FeatureCard--card--hJtKP\",\"header\":\"FeatureCard--header--gLniG\",\"description\":\"FeatureCard--description--PClCe\",\"link\":\"FeatureCard--link--sVJb+\",\"image\":\"FeatureCard--image--iHz-K\"};","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport styles from './FeatureCard.scss';\n\nconst FeatureCard = ({ card }) => {\n return (\n \n \n {data.blurbs.map((blurb) => renderBlurb(blurb, blurb.header))}\n
\n {card.header}
\n{card.description}
\n{card.link_copy}
\n \n );\n};\n\nFeatureCard.propTypes = {\n card: PropTypes.shape({\n url: PropTypes.string.isRequired,\n header: PropTypes.string.isRequired,\n img_src: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n link_copy: PropTypes.string.isRequired\n }).isRequired\n};\n\nexport default FeatureCard;\n","export { default } from './FeatureCard';\n","import React from 'react';\nimport I18n from 'utils/I18n';\n\nimport styles from './index.scss';\nimport whatsNewImage from './assets/whats-new.png';\nimport sportTypesImage from './assets/sport-types.png';\nimport deviceImage from './assets/device.png';\nimport FeatureCard from './components/FeatureCard';\n\nconst I18nPrefix = 'templates.account.feature_cards';\n\nconst FeatureCards = () => {\n const cards = [\n {\n img_src: whatsNewImage,\n header: I18n.t(`${I18nPrefix}.whats_new_header`),\n description: I18n.t(`${I18nPrefix}.whats_new_description`),\n link_copy: I18n.t(`${I18nPrefix}.whats_new_link_copy`),\n url: 'https://www.strava.com/whats-new'\n },\n {\n img_src: sportTypesImage,\n header: I18n.t(`${I18nPrefix}.sport_types_header`),\n description: I18n.t(`${I18nPrefix}.sport_types_description`),\n link_copy: I18n.t(`${I18nPrefix}.sport_types_link_copy`),\n url:\n 'https://support.strava.com/hc/en-us/articles/216919407-Supported-Sport-Types-on-Strava'\n },\n {\n img_src: deviceImage,\n header: I18n.t(`${I18nPrefix}.devices_header`),\n description: I18n.t(`${I18nPrefix}.devices_description`),\n link_copy: I18n.t(`${I18nPrefix}.devices_link_copy`),\n url:\n 'https://support.strava.com/hc/en-us/articles/223297187-How-to-get-your-Activities-to-Strava'\n }\n ];\n\n return (\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