\n {this.props.children}\n
\n \n )\n }\n}\n\nHorizontalScroll.propTypes = {\n children: PropTypes.node\n}\n\nexport default HorizontalScroll\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Box, Flex } from 'ui/acro'\nimport { ChevronRightIcon } from 'components_v2/Icons'\nimport { AltHeaderText, HeaderCTAText } from '../../styles'\n\nconst AltSectionHeader = ({ headerText, linkId, linkHref, cta }) => {\n return (\n \n
\n )\n }\n\n let layoutSelector\n if (props.layout) {\n layoutSelector = (\n \n {sortableList}\n {layoutSelector}\n
\n )\n}\n\nBrowseOptions.propTypes = {\n onSort: PropTypes.func,\n order: PropTypes.string,\n layout: PropTypes.string,\n selectLayout: PropTypes.func,\n showSortableList: PropTypes.bool\n}\n\nexport default BrowseOptions\n","import React from 'react'\nimport ClassFinderDataLoader from './ClassFinderDataLoader'\nimport ReduxContainer from '../../reduxContainer/ReduxContainer'\nimport UserLoadWrapper from '../../reduxContainer/UserLoadWrapper'\nimport camelize from 'camelize'\nimport './classFinder.scss'\nimport {\n difficultyFilterOptions,\n intensityFilterOptions\n} from './classFinderDropdownInfo'\nimport { LightTheme } from 'ui/bend'\nimport { ThemeProvider } from 'styled-components'\n\nconst DURATION_MIN = 0\nconst DURATION_MAX = 90\n\nclass ClassFinder extends React.Component {\n constructor(props) {\n super(props)\n\n const instructorFilterOptions = camelize(\n JSON.parse(props.instructorFilterOptions)\n )\n const categoryFilterOptions = camelize(\n JSON.parse(props.categoryFilterOptions)\n )\n const includeFilters = props.includeFilters\n const defaultOrder = props.defaultOrder\n\n this.metaInfo = {\n defaultValue: props.defaultValue,\n autopaginate: props.autopaginate,\n includeFilters,\n defaultOrder,\n preloadedFilters: this.getPreloadedFilters(),\n baseUrl: props.baseUrl,\n withSubcategories: props.withSubcategories,\n dropdownOptions: {\n duration: [],\n instructors: instructorFilterOptions,\n styles: categoryFilterOptions,\n intensities: intensityFilterOptions,\n difficulties: difficultyFilterOptions,\n focus_area: props.focusAreaTags,\n equipment: props.equipmentTags\n }\n }\n }\n\n getPreloadedFilters() {\n const instructors = this.generateFilteredParams(\n this.props.filteredInstructors\n )\n const styles = this.generateFilteredParams(this.props.filteredStyles)\n const difficulties = this.generateFilteredParams(\n this.props.filteredDifficulties\n )\n\n const filteredIntensities = this.generateFilteredParams(\n this.props.filteredIntensities\n )\n const intensities = filteredIntensities.map((intensity) =>\n parseInt(intensity, 10)\n )\n\n const equipment = this.generateFilteredParams(this.props.filteredEquipment)\n\n const focus_area = this.generateFilteredParams(this.props.filteredFocusArea)\n\n const excludeCompleted = this.props.excludeCompleted\n const duration = this.generateFilteredParams(this.props.duration)\n\n return {\n instructors,\n styles,\n difficulties,\n intensities,\n equipment,\n focus_area,\n excludeCompleted,\n duration\n }\n }\n\n /**\n * Converts comma separated string of filters to array\n * @param {Comma separated string of filters} filtered\n */\n generateFilteredParams(filtered) {\n return filtered ? filtered.split(',') : []\n }\n\n render() {\n return (\n \n
\n \n \n
\n )\n}\n\nProductCheckBox.propTypes = {\n active: PropTypes.bool,\n handleChange: PropTypes.func,\n icon: PropTypes.node,\n value: PropTypes.string\n}\n\nexport default ProductCheckBox\n","import React from 'react'\nimport StyledAdminWrapper from './StyledAdminWrapper'\n\nconst BatchedFlowControl = React.lazy(() => import(/* webpackChunkName: 'admin-bfc-builder' */'components_v2/Admin/BatchedFlowControl'))\n\nconst StyledBatchedFlowControl = ({ ...rest }) => {\n return (\n {copy.title}
\n{copy.body}
\n {subscriptionSource === 'stripe' ? (\n\n We are updating your account. Please check back later.\n
\n)\n\nexport default Grace\n","import React, { useState } from 'react'\nimport uuidv4 from 'uuid/v4'\n\nimport { axios } from 'api'\nimport { useStripeCheckout } from 'context'\nimport { Button } from 'ui/bend'\nimport { useActiveMembershipContext } from '../../../ActiveMembershipStore'\nimport { useGetCountry } from 'hooks'\n\nconst idempotencyKey = uuidv4()\n\nconst SubmitButton = () => {\n const getStripe = useStripeCheckout()\n const { plan } = useActiveMembershipContext()\n\n const [loading, setLoading] = useState(false)\n const country = useGetCountry(false)\n\n const handleClick = async () => {\n setLoading(true)\n const stripe = await getStripe()\n try {\n const { data } = await axios.post('users/me/membership/stripe', {\n idempotency_key: idempotencyKey,\n plan: plan.id,\n checkout: true,\n cancel_path: window.location.pathname,\n country\n })\n\n stripe.redirectToCheckout({\n sessionId: data.checkoutSessionId\n })\n } catch (e) {\n console.error(e)\n setLoading(false)\n // TODO: handle error from POST request\n }\n }\n\n return (\nYour current payment method
\n{paymentMethods[0].cardName}
\n {paymentMethods.length > 1 && (\n <>\nOther payment methods
\n {paymentMethods.slice(1).map((card) => (\n{card.cardName}
\n ))}\n \n )}\n\n Changing your payment method will apply to your next scheduled\n payment. Your membership will remain the same.\n
\n \n ) : (\n\n We cannot retrieve your payment methods at this time. Your account may\n be updating.\n
\n )}\nYour payment schedule
\n {plan.description && (\n\n Your Membership is maintained through {text}\n
\nPlease go there to manage your account.
\n\n As an Alo Moves unlimited member, you receive all the benefits of our\n services\n {subscriptionEndTime &&\n ` until ${humanReadableDate(date)} at ${humanReadableTime(date)}`}\n .\n
\n )\n}\n\nUnlimited.propTypes = {\n subscriptionEndTime: PropTypes.string.isRequired\n}\n\nexport default Unlimited\n","import SubscriptionStates from './SubscriptionStates'\n\nexport default SubscriptionStates\n","import React, { Fragment } from 'react'\n\nimport Churning from './Churning'\nimport Grace from './Grace'\nimport Renewing from './Renewing'\nimport Unlimited from './Unlimited'\nimport { useActiveMembershipContext } from '../ActiveMembershipStore'\n\nconst renderSubscriptionComponents = (state) => {\n switch (state) {\n case 'churning': {\n return\n We are having a problem accessing your account details. Please click\n below to gain access.\n
\n \n\n You do not have an active Alo Moves Membership.\n
\n{filterLabels}
\n}\n\nFilterLabelsRow.propTypes = {\n activeDropdown: PropTypes.string,\n filterOptions: PropTypes.object,\n value: PropTypes.string,\n centerContent: PropTypes.bool\n}\n\nexport default FilterLabelsRow\n","import React from 'react'\nimport classNames from 'classnames'\nimport PropTypes from 'prop-types'\n\nclass HelpPopup extends React.Component {\n constructor (props) {\n super(props)\n\n this.popupElem = React.createRef()\n this.popupContent = React.createRef()\n this.getPopupTopPosition = this.getPopupTopPosition.bind(this)\n this.handleClick = this.handleClick.bind(this)\n this.hoverOut = this.hoverOut.bind(this)\n this.hoverOver = this.hoverOver.bind(this)\n\n this.state = {\n active: false\n }\n }\n\n hoverOver () {\n this.setState({ active: true })\n if (this.props.onHover) this.props.onHover()\n }\n\n hoverOut () {\n this.setState({ active: false })\n }\n\n handleClick (e) {\n e.stopPropagation()\n if (this.state.active) {\n this.hoverOut()\n } else {\n this.hoverOver()\n }\n }\n\n popupClashTop () {\n const navbar = document.querySelector('.js-navbar')\n return (\n (this.popupElem.current.getBoundingClientRect().top - navbar.clientHeight) <= this.popupContent.current.clientHeight\n )\n }\n\n getPopupTopPosition () {\n if (this.state.active) {\n if (this.popupClashTop()) {\n return -this.props.topOffset\n } else {\n return this.props.topOffset - this.popupContent.current.clientHeight\n }\n } else {\n return 0\n }\n }\n\n render () {\n let popupHover = classNames('HelpPopup', {\n 'HelpPopup--active': this.state.active\n })\n\n let popupClass = classNames('HelpPopup__content', {\n 'HelpPopup__content--active': this.state.active\n })\n\n let popupPosition = {\n top: this.getPopupTopPosition(),\n left: this.props.leftOffset ? this.props.leftOffset : 0,\n width: this.props.width ? `${this.props.width}px` : 'auto'\n }\n\n return (\n \n \n {this.props.trigger}\n
\n \n
\n )\n}\n\nSelectedFiltersDisplay.defaultProps = {\n additionalClassNames: [],\n excludedFilters: []\n}\n\nSelectedFiltersDisplay.propTypes = {\n additionalClassNames: PropTypes.array,\n excludedFilters: PropTypes.array,\n onLabelClick: PropTypes.func,\n filteredItemLabels: PropTypes.object,\n onClearAll: PropTypes.func,\n isMobile: PropTypes.bool\n}\nexport default SelectedFiltersDisplay\n","import { createSelector } from 'reselect'\nimport { createSelector as ormCreateSelector } from 'redux-orm'\nimport orm from '../../models/models'\n\nexport const currentUser = createSelector(\n state => state.orm,\n state => state.users.currentUserUsername,\n ormCreateSelector(orm, (session, username) => {\n return session.User.withId(username)\n })\n)\n","var map = {\n\t\"./AloButton\": 108,\n\t\"./AloButton.js\": 108,\n\t\"./AloButton.scss\": 951,\n\t\"./AloModal\": 107,\n\t\"./AloModal.js\": 107,\n\t\"./AloModal.scss\": 945,\n\t\"./BuilderSection\": 309,\n\t\"./BuilderSection/\": 309,\n\t\"./BuilderSection/BuilderSection\": 481,\n\t\"./BuilderSection/BuilderSection.js\": 481,\n\t\"./BuilderSection/index\": 309,\n\t\"./BuilderSection/index.js\": 309,\n\t\"./DataPageCover\": 723,\n\t\"./DataPageCover.js\": 723,\n\t\"./DataPageCover.scss\": 1099,\n\t\"./EmptyState\": 329,\n\t\"./EmptyState.js\": 329,\n\t\"./ErrorSummary\": 724,\n\t\"./ErrorSummary.js\": 724,\n\t\"./ErrorSummary.scss\": 1100,\n\t\"./FadeInFullscreen\": 272,\n\t\"./FadeInFullscreen.js\": 272,\n\t\"./FadeInFullscreen.scss\": 950,\n\t\"./Field\": 725,\n\t\"./Field.js\": 725,\n\t\"./Field.scss\": 1718,\n\t\"./GreyPageHeader\": 289,\n\t\"./GreyPageHeader.js\": 289,\n\t\"./GreyPageHeader.scss\": 1086,\n\t\"./HorizontalScroll\": 1101,\n\t\"./HorizontalScroll.js\": 1101,\n\t\"./Link\": 726,\n\t\"./Link.js\": 726,\n\t\"./Link.scss\": 1102,\n\t\"./PrivateContent\": 381,\n\t\"./PrivateContent.js\": 381,\n\t\"./PrivateContent.scss\": 962,\n\t\"./SchemaSectionRenderer\": 310,\n\t\"./SchemaSectionRenderer/\": 310,\n\t\"./SchemaSectionRenderer/MyPraticeSummary/MyPraticeCards\": 484,\n\t\"./SchemaSectionRenderer/MyPraticeSummary/MyPraticeCards.js\": 484,\n\t\"./SchemaSectionRenderer/MyPraticeSummary/MyPraticeSummary\": 483,\n\t\"./SchemaSectionRenderer/MyPraticeSummary/MyPraticeSummary.js\": 483,\n\t\"./SchemaSectionRenderer/RecommendationWidget\": 311,\n\t\"./SchemaSectionRenderer/RecommendationWidget/\": 311,\n\t\"./SchemaSectionRenderer/RecommendationWidget/index\": 311,\n\t\"./SchemaSectionRenderer/RecommendationWidget/index.js\": 311,\n\t\"./SchemaSectionRenderer/SchemaSectionRenderer\": 482,\n\t\"./SchemaSectionRenderer/SchemaSectionRenderer.js\": 482,\n\t\"./SchemaSectionRenderer/common/components\": 160,\n\t\"./SchemaSectionRenderer/common/components/\": 160,\n\t\"./SchemaSectionRenderer/common/components/Carousel/ButtonBase\": 312,\n\t\"./SchemaSectionRenderer/common/components/Carousel/ButtonBase.js\": 312,\n\t\"./SchemaSectionRenderer/common/components/Carousel/Carousel\": 486,\n\t\"./SchemaSectionRenderer/common/components/Carousel/Carousel.js\": 486,\n\t\"./SchemaSectionRenderer/common/components/Carousel/CarouselNextButton\": 487,\n\t\"./SchemaSectionRenderer/common/components/Carousel/CarouselNextButton.js\": 487,\n\t\"./SchemaSectionRenderer/common/components/Carousel/CarouselPrevButton\": 488,\n\t\"./SchemaSectionRenderer/common/components/Carousel/CarouselPrevButton.js\": 488,\n\t\"./SchemaSectionRenderer/common/components/ClassCard\": 435,\n\t\"./SchemaSectionRenderer/common/components/ClassCard.js\": 435,\n\t\"./SchemaSectionRenderer/common/components/ClassCountBadge\": 232,\n\t\"./SchemaSectionRenderer/common/components/ClassCountBadge.js\": 232,\n\t\"./SchemaSectionRenderer/common/components/FadeBox\": 446,\n\t\"./SchemaSectionRenderer/common/components/FadeBox.js\": 446,\n\t\"./SchemaSectionRenderer/common/components/KeepTrainingCard\": 442,\n\t\"./SchemaSectionRenderer/common/components/KeepTrainingCard.js\": 442,\n\t\"./SchemaSectionRenderer/common/components/Notification\": 445,\n\t\"./SchemaSectionRenderer/common/components/Notification.js\": 445,\n\t\"./SchemaSectionRenderer/common/components/Section/Section\": 485,\n\t\"./SchemaSectionRenderer/common/components/Section/Section.js\": 485,\n\t\"./SchemaSectionRenderer/common/components/SectionHeaders/AltSectionHeader\": 1103,\n\t\"./SchemaSectionRenderer/common/components/SectionHeaders/AltSectionHeader.js\": 1103,\n\t\"./SchemaSectionRenderer/common/components/SectionHeaders/SectionHeader\": 1104,\n\t\"./SchemaSectionRenderer/common/components/SectionHeaders/SectionHeader.js\": 1104,\n\t\"./SchemaSectionRenderer/common/components/SeriesCard\": 443,\n\t\"./SchemaSectionRenderer/common/components/SeriesCard.js\": 443,\n\t\"./SchemaSectionRenderer/common/components/TimeCodeBadge\": 191,\n\t\"./SchemaSectionRenderer/common/components/TimeCodeBadge.js\": 191,\n\t\"./SchemaSectionRenderer/common/components/ZenCard\": 444,\n\t\"./SchemaSectionRenderer/common/components/ZenCard.js\": 444,\n\t\"./SchemaSectionRenderer/common/components/index\": 160,\n\t\"./SchemaSectionRenderer/common/components/index.js\": 160,\n\t\"./SchemaSectionRenderer/common/styles\": 86,\n\t\"./SchemaSectionRenderer/common/styles/\": 86,\n\t\"./SchemaSectionRenderer/common/styles/AltHeaderText\": 437,\n\t\"./SchemaSectionRenderer/common/styles/AltHeaderText.js\": 437,\n\t\"./SchemaSectionRenderer/common/styles/CardSubtitle\": 441,\n\t\"./SchemaSectionRenderer/common/styles/CardSubtitle.js\": 441,\n\t\"./SchemaSectionRenderer/common/styles/CardTitle\": 440,\n\t\"./SchemaSectionRenderer/common/styles/CardTitle.js\": 440,\n\t\"./SchemaSectionRenderer/common/styles/HeaderCTAText\": 438,\n\t\"./SchemaSectionRenderer/common/styles/HeaderCTAText.js\": 438,\n\t\"./SchemaSectionRenderer/common/styles/HeaderText\": 436,\n\t\"./SchemaSectionRenderer/common/styles/HeaderText.js\": 436,\n\t\"./SchemaSectionRenderer/common/styles/SectionDivider\": 439,\n\t\"./SchemaSectionRenderer/common/styles/SectionDivider.js\": 439,\n\t\"./SchemaSectionRenderer/common/styles/index\": 86,\n\t\"./SchemaSectionRenderer/common/styles/index.js\": 86,\n\t\"./SchemaSectionRenderer/index\": 310,\n\t\"./SchemaSectionRenderer/index.js\": 310,\n\t\"./accessedItems/AccessedItemImage\": 353,\n\t\"./accessedItems/AccessedItemImage.js\": 353,\n\t\"./accessedItems/AccessedItemTile\": 420,\n\t\"./accessedItems/AccessedItemTile.js\": 420,\n\t\"./accessedItems/AccessedItemTile.scss\": 1091,\n\t\"./accessedItems/AccessedItemsCarousel\": 599,\n\t\"./accessedItems/AccessedItemsCarousel.js\": 599,\n\t\"./accessedItems/AccessedItemsList\": 600,\n\t\"./accessedItems/AccessedItemsList.js\": 600,\n\t\"./accessedItems/AccessedItemsRow\": 717,\n\t\"./accessedItems/AccessedItemsRow.scss\": 717,\n\t\"./accessedItems/AcessedItemRow\": 601,\n\t\"./accessedItems/AcessedItemRow.js\": 601,\n\t\"./admin/videos/VideoPreviewWrapper\": 596,\n\t\"./admin/videos/VideoPreviewWrapper.js\": 596,\n\t\"./admin/videos/VideoToggle\": 597,\n\t\"./admin/videos/VideoToggle.js\": 597,\n\t\"./aloButton/TrackableButton\": 1105,\n\t\"./aloButton/TrackableButton.js\": 1105,\n\t\"./aloCarousel/AloCarousel\": 418,\n\t\"./aloCarousel/AloCarousel.js\": 418,\n\t\"./aloCarousel/AloCarousel.scss\": 1090,\n\t\"./aloCarousel/CarouselCard\": 419,\n\t\"./aloCarousel/CarouselCard.js\": 419,\n\t\"./aloCarousel/CarouselCard.scss\": 1089,\n\t\"./aloCheckbox/AloCheckbox\": 344,\n\t\"./aloCheckbox/AloCheckbox.js\": 344,\n\t\"./aloCheckbox/AloCheckbox.scss\": 1081,\n\t\"./aloDropdown/AloDropdown\": 468,\n\t\"./aloDropdown/AloDropdown.js\": 468,\n\t\"./bottomWidget/BottomWidget\": 727,\n\t\"./bottomWidget/BottomWidget.js\": 727,\n\t\"./bottomWidget/BottomWidgetTempEntry\": 1106,\n\t\"./bottomWidget/BottomWidgetTempEntry.js\": 1106,\n\t\"./cappedTextArea/CappedTextArea\": 479,\n\t\"./cappedTextArea/CappedTextArea.js\": 479,\n\t\"./elementHeightAnimator/ElementHeightAnimator\": 374,\n\t\"./elementHeightAnimator/ElementHeightAnimator.js\": 374,\n\t\"./elementHeightAnimator/ElementHeightAnimator.scss\": 1719,\n\t\"./elementSlider/ElementSlider\": 1107,\n\t\"./elementSlider/ElementSlider.js\": 1107,\n\t\"./favoriteButton/Favoritable\": 253,\n\t\"./favoriteButton/Favoritable.js\": 253,\n\t\"./favoriteButton/FavoritePlusButton\": 351,\n\t\"./favoriteButton/FavoritePlusButton.js\": 351,\n\t\"./favoriteButton/NestedMenuPlusIcon\": 590,\n\t\"./favoriteButton/NestedMenuPlusIcon.js\": 590,\n\t\"./favoriteButton/PlusIcon\": 283,\n\t\"./favoriteButton/PlusIcon.js\": 283,\n\t\"./favoriteButton/PlusIcon.scss\": 953,\n\t\"./favoritesList/FavoriteDeleteUndo\": 421,\n\t\"./favoritesList/FavoriteDeleteUndo.js\": 421,\n\t\"./favoritesList/FavoriteDeleteUndo.scss\": 1108,\n\t\"./favoritesList/FavoritesList\": 728,\n\t\"./favoritesList/FavoritesList.js\": 728,\n\t\"./favoritesList/FavoritesList.scss\": 1109,\n\t\"./featuredProducts/FeaturedProductCard\": 585,\n\t\"./featuredProducts/FeaturedProductCard.js\": 585,\n\t\"./featuredProducts/FeaturedProductsCarousel\": 584,\n\t\"./featuredProducts/FeaturedProductsCarousel.js\": 584,\n\t\"./filterList/FilterList\": 383,\n\t\"./filterList/FilterList.js\": 383,\n\t\"./filterList/FilterList.scss\": 971,\n\t\"./filterList/FilterListItem\": 384,\n\t\"./filterList/FilterListItem.js\": 384,\n\t\"./filterList/FilterListItem.scss\": 970,\n\t\"./filterPills/FilterPill\": 414,\n\t\"./filterPills/FilterPill.js\": 414,\n\t\"./filterPills/FilterPill.scss\": 1085,\n\t\"./filterPills/FilterPillsSection\": 576,\n\t\"./filterPills/FilterPillsSection.js\": 576,\n\t\"./filterUniButton\": 337,\n\t\"./filterUniButton/\": 337,\n\t\"./filterUniButton/FilterUniButton\": 412,\n\t\"./filterUniButton/FilterUniButton.js\": 412,\n\t\"./filterUniButton/FilterUniButton.scss\": 1084,\n\t\"./filterUniButton/FilterUniButtonModal\": 413,\n\t\"./filterUniButton/FilterUniButtonModal.js\": 413,\n\t\"./filterUniButton/FilterUniButtonModal.scss\": 1083,\n\t\"./filterUniButton/index\": 337,\n\t\"./filterUniButton/index.js\": 337,\n\t\"./filtersRow\": 540,\n\t\"./filtersRow/\": 540,\n\t\"./filtersRow/FilterDropdownSet\": 407,\n\t\"./filtersRow/FilterDropdownSet.scss\": 407,\n\t\"./filtersRow/FilterLabelsRow\": 144,\n\t\"./filtersRow/FilterLabelsRow.js\": 144,\n\t\"./filtersRow/FilterLabelsRow.scss\": 944,\n\t\"./filtersRow/FilterMetaLayout\": 222,\n\t\"./filtersRow/FilterMetaLayout.js\": 222,\n\t\"./filtersRow/FilterMetaLayout.scss\": 946,\n\t\"./filtersRow/FilterModal\": 271,\n\t\"./filtersRow/FilterModal.js\": 271,\n\t\"./filtersRow/FilterModal.scss\": 947,\n\t\"./filtersRow/FilterRangeSlider\": 221,\n\t\"./filtersRow/FilterRangeSlider.js\": 221,\n\t\"./filtersRow/FilterRangeSlider.scss\": 972,\n\t\"./filtersRow/FilterRowDropdown\": 101,\n\t\"./filtersRow/FilterRowDropdown.js\": 101,\n\t\"./filtersRow/FilterRowDropdown.scss\": 941,\n\t\"./filtersRow/FilterRowDropdownItem\": 89,\n\t\"./filtersRow/FilterRowDropdownItem.js\": 89,\n\t\"./filtersRow/FilterRowDropdownItem.scss\": 942,\n\t\"./filtersRow/FilterRowDropdownSet\": 541,\n\t\"./filtersRow/FilterRowDropdownSet.js\": 541,\n\t\"./filtersRow/FilterRowItem\": 270,\n\t\"./filtersRow/FilterRowItem.js\": 270,\n\t\"./filtersRow/FilterRowItem.scss\": 943,\n\t\"./filtersRow/FilterSidebarLayout\": 274,\n\t\"./filtersRow/FilterSidebarLayout.js\": 274,\n\t\"./filtersRow/FilterSidebarLayout.scss\": 973,\n\t\"./filtersRow/FilterSquares\": 250,\n\t\"./filtersRow/FilterSquares.js\": 250,\n\t\"./filtersRow/FilterSquares.scss\": 974,\n\t\"./filtersRow/SelectedFiltersDisplay\": 164,\n\t\"./filtersRow/SelectedFiltersDisplay.js\": 164,\n\t\"./filtersRow/SelectedFiltersDisplay.scss\": 949,\n\t\"./filtersRow/SliderDropdown\": 285,\n\t\"./filtersRow/SliderDropdown.js\": 285,\n\t\"./filtersRow/SliderDropdown.scss\": 1720,\n\t\"./filtersRow/index\": 540,\n\t\"./filtersRow/index.js\": 540,\n\t\"./helpPopup/HelpPopup\": 145,\n\t\"./helpPopup/HelpPopup.js\": 145,\n\t\"./helpPopup/HelpPopup.scss\": 1721,\n\t\"./itemBrowsers/BrowseOptions\": 1110,\n\t\"./itemBrowsers/BrowseOptions.js\": 1110,\n\t\"./itemTile/ItemTileCover\": 357,\n\t\"./itemTile/ItemTileCover.js\": 357,\n\t\"./itemTile/ItemTileDescription\": 582,\n\t\"./itemTile/ItemTileDescription.js\": 582,\n\t\"./itemTile/ItemTileGrid\": 354,\n\t\"./itemTile/ItemTileGrid.js\": 354,\n\t\"./itemTile/ItemTileInformation\": 356,\n\t\"./itemTile/ItemTileInformation.js\": 356,\n\t\"./itemTile/withItemTileHover\": 347,\n\t\"./itemTile/withItemTileHover.js\": 347,\n\t\"./layoutSelector/LayoutSelector\": 334,\n\t\"./layoutSelector/LayoutSelector.js\": 334,\n\t\"./masonryLayout/MasonryLayout\": 572,\n\t\"./masonryLayout/MasonryLayout.js\": 572,\n\t\"./membership/cancellationSurvey/CancellationOfferModal\": 602,\n\t\"./membership/cancellationSurvey/CancellationOfferModal.js\": 602,\n\t\"./membership/cancellationSurvey/CancellationQuestion\": 603,\n\t\"./membership/cancellationSurvey/CancellationQuestion.js\": 603,\n\t\"./membership/cancellationSurvey/CancellationReason\": 604,\n\t\"./membership/cancellationSurvey/CancellationReason.js\": 604,\n\t\"./membership/cancellationSurvey/CancellationSurvey\": 729,\n\t\"./membership/cancellationSurvey/CancellationSurvey.js\": 729,\n\t\"./membership/cancellationSurvey/CancellationSurvey.scss\": 1111,\n\t\"./mixins\": 1112,\n\t\"./mixins.scss\": 1112,\n\t\"./nestedHoverMenu/NestedHoverMenu\": 282,\n\t\"./nestedHoverMenu/NestedHoverMenu.js\": 282,\n\t\"./nestedHoverMenu/NestedHoverMenu.scss\": 952,\n\t\"./nestedHoverMenu/NestedHoverMenuItem\": 252,\n\t\"./nestedHoverMenu/NestedHoverMenuItem.js\": 252,\n\t\"./nestedHoverMenu/NestedHoverMenuItem.scss\": 1722,\n\t\"./nestedHoverMenu/ThreeDotHoverMenu\": 475,\n\t\"./nestedHoverMenu/ThreeDotHoverMenu.js\": 475,\n\t\"./owlCarousel/ScrollableCarousel\": 583,\n\t\"./owlCarousel/ScrollableCarousel.js\": 583,\n\t\"./owlCarousel/scrollableCarousel.css\": 1113,\n\t\"./owlCarousel/scrollableCarousel.css.scss\": 1113,\n\t\"./pageLevelComponents/classFinder/ClassFinder\": 1114,\n\t\"./pageLevelComponents/classFinder/ClassFinder.js\": 1114,\n\t\"./pageLevelComponents/classFinder/ClassFinderContent\": 606,\n\t\"./pageLevelComponents/classFinder/ClassFinderContent.js\": 606,\n\t\"./pageLevelComponents/classFinder/ClassFinderDataLoader\": 605,\n\t\"./pageLevelComponents/classFinder/ClassFinderDataLoader.js\": 605,\n\t\"./pageLevelComponents/classFinder/ClassFinderMobileFilter\": 385,\n\t\"./pageLevelComponents/classFinder/ClassFinderMobileFilter.js\": 385,\n\t\"./pageLevelComponents/classFinder/ClassFinderNewFilteredList\": 608,\n\t\"./pageLevelComponents/classFinder/ClassFinderNewFilteredList.js\": 608,\n\t\"./pageLevelComponents/classFinder/ClassFinderNewSortAndClear\": 345,\n\t\"./pageLevelComponents/classFinder/ClassFinderNewSortAndClear.js\": 345,\n\t\"./pageLevelComponents/classFinder/ClassFinderTopSection\": 607,\n\t\"./pageLevelComponents/classFinder/ClassFinderTopSection.js\": 607,\n\t\"./pageLevelComponents/classFinder/CompletedClassFilter\": 489,\n\t\"./pageLevelComponents/classFinder/CompletedClassFilter.js\": 489,\n\t\"./pageLevelComponents/classFinder/CustomDuration\": 491,\n\t\"./pageLevelComponents/classFinder/CustomDuration.js\": 491,\n\t\"./pageLevelComponents/classFinder/classFinder\": 730,\n\t\"./pageLevelComponents/classFinder/classFinder.scss\": 730,\n\t\"./pageLevelComponents/classFinder/classFinderDropdownInfo\": 408,\n\t\"./pageLevelComponents/classFinder/classFinderDropdownInfo.js\": 408,\n\t\"./pageLevelComponents/classFinder/classFinderHelperMethods\": 109,\n\t\"./pageLevelComponents/classFinder/classFinderHelperMethods.js\": 109,\n\t\"./pageLevelComponents/explore/Explore\": 713,\n\t\"./pageLevelComponents/explore/Explore.scss\": 713,\n\t\"./pageLevelComponents/explore/ExploreHeaders\": 260,\n\t\"./pageLevelComponents/explore/ExploreHeaders.js\": 260,\n\t\"./pageLevelComponents/explore/ExplorePage\": 545,\n\t\"./pageLevelComponents/explore/ExplorePage.js\": 545,\n\t\"./pageLevelComponents/explore/browseBy/ExploreFilterPage\": 288,\n\t\"./pageLevelComponents/explore/browseBy/ExploreFilterPage.js\": 288,\n\t\"./pageLevelComponents/explore/browseBy/ExploreFilterPage.scss\": 1063,\n\t\"./pageLevelComponents/explore/browseBy/ExploreFilterWrapper\": 614,\n\t\"./pageLevelComponents/explore/browseBy/ExploreFilterWrapper.js\": 614,\n\t\"./pageLevelComponents/explore/browseBy/exploreFilterHelpers\": 187,\n\t\"./pageLevelComponents/explore/browseBy/exploreFilterHelpers.js\": 187,\n\t\"./pageLevelComponents/explore/carousel/ExploreCarouselPage\": 615,\n\t\"./pageLevelComponents/explore/carousel/ExploreCarouselPage.js\": 615,\n\t\"./pageLevelComponents/explore/carousel/ExploreCarousels\": 416,\n\t\"./pageLevelComponents/explore/carousel/ExploreCarousels.js\": 416,\n\t\"./pageLevelComponents/explore/carousel/ExploreCarousels.scss\": 1088,\n\t\"./pageLevelComponents/explore/exploreNav/CategoryBanner\": 415,\n\t\"./pageLevelComponents/explore/exploreNav/CategoryBanner.js\": 415,\n\t\"./pageLevelComponents/explore/exploreNav/CategoryBanner.scss\": 1087,\n\t\"./pageLevelComponents/explore/exploreNav/CategoryFilters\": 411,\n\t\"./pageLevelComponents/explore/exploreNav/CategoryFilters.js\": 411,\n\t\"./pageLevelComponents/explore/exploreNav/ExploreNav\": 573,\n\t\"./pageLevelComponents/explore/exploreNav/ExploreNav.js\": 573,\n\t\"./pageLevelComponents/explore/exploreNav/SeriesFinderNewFilteredList\": 578,\n\t\"./pageLevelComponents/explore/exploreNav/SeriesFinderNewFilteredList.js\": 578,\n\t\"./pageLevelComponents/playlists/Show\": 1115,\n\t\"./pageLevelComponents/playlists/Show.js\": 1115,\n\t\"./pageLevelComponents/playlists/ShowPageContent\": 609,\n\t\"./pageLevelComponents/playlists/ShowPageContent.js\": 609,\n\t\"./photoSelector/PhotoSelector\": 275,\n\t\"./photoSelector/PhotoSelector.js\": 275,\n\t\"./photoSelector/PhotoSelector.scss\": 965,\n\t\"./photoSelector/PhotoUploader\": 273,\n\t\"./photoSelector/PhotoUploader.js\": 273,\n\t\"./photoSelector/PhotoUploader.scss\": 963,\n\t\"./planEntry/PlanEntryListHeader\": 350,\n\t\"./planEntry/PlanEntryListHeader.js\": 350,\n\t\"./planEntry/PlanEntryTile\": 598,\n\t\"./planEntry/PlanEntryTile.js\": 598,\n\t\"./planEntryList/PlanEntriesList\": 286,\n\t\"./planEntryList/PlanEntriesList.js\": 286,\n\t\"./planEntryList/PlanEntriesList.scss\": 956,\n\t\"./planEntryList/PlanEntriesListContent\": 472,\n\t\"./planEntryList/PlanEntriesListContent.js\": 472,\n\t\"./planEntryList/PlanEntriesListRows\": 378,\n\t\"./planEntryList/PlanEntriesListRows.js\": 378,\n\t\"./planEntryList/PlanEntriesListRows.scss\": 961,\n\t\"./planEntryList/PlanEntryListHeader\": 473,\n\t\"./planEntryList/PlanEntryListHeader.js\": 473,\n\t\"./planEntryList/PlanEntryListLoading\": 377,\n\t\"./planEntryList/PlanEntryListLoading.js\": 377,\n\t\"./planEntryList/PlanEntryListLoading.scss\": 957,\n\t\"./planEntryList/PlanEntryListRow\": 379,\n\t\"./planEntryList/PlanEntryListRow.js\": 379,\n\t\"./planEntryList/PlanEntryListRow.scss\": 960,\n\t\"./planEntryList/PlanEntryOptions\": 474,\n\t\"./planEntryList/PlanEntryOptions.js\": 474,\n\t\"./planEntryList/PlanEntryOptionsModal\": 380,\n\t\"./planEntryList/PlanEntryOptionsModal.js\": 380,\n\t\"./planEntryList/PlanEntryOptionsModal.scss\": 958,\n\t\"./playlist/PlayListMenus\": 480,\n\t\"./playlist/PlayListMenus.js\": 480,\n\t\"./playlist/PlaylistDisplay\": 284,\n\t\"./playlist/PlaylistDisplay.js\": 284,\n\t\"./playlist/PlaylistDisplay.scss\": 969,\n\t\"./playlist/PlaylistEdit\": 330,\n\t\"./playlist/PlaylistEdit.js\": 330,\n\t\"./playlist/PlaylistEdit.scss\": 967,\n\t\"./playlist/PlaylistGrid\": 731,\n\t\"./playlist/PlaylistGrid.js\": 731,\n\t\"./playlist/PlaylistGrid.scss\": 1116,\n\t\"./playlist/PlaylistHeader\": 382,\n\t\"./playlist/PlaylistHeader.js\": 382,\n\t\"./playlist/PlaylistHeader.scss\": 968,\n\t\"./playlist/PlaylistLoadingCards\": 471,\n\t\"./playlist/PlaylistLoadingCards.js\": 471,\n\t\"./playlist/PlaylistRow\": 376,\n\t\"./playlist/PlaylistRow.js\": 376,\n\t\"./playlist/PlaylistRow.scss\": 954,\n\t\"./playlist/PlaylistSelector\": 220,\n\t\"./playlist/PlaylistSelector.js\": 220,\n\t\"./playlist/PlaylistSelector.scss\": 955,\n\t\"./playlist/PlaylistTile\": 290,\n\t\"./playlist/PlaylistTile.js\": 290,\n\t\"./playlist/PlaylistTile.scss\": 1092,\n\t\"./playlist/UserPlaylists\": 375,\n\t\"./playlist/UserPlaylists.js\": 375,\n\t\"./playlist/UserPlaylists.scss\": 1723,\n\t\"./playlist/modals/AddToPlaylistModal\": 588,\n\t\"./playlist/modals/AddToPlaylistModal.js\": 588,\n\t\"./playlist/modals/CreateNewPlaylistModal\": 326,\n\t\"./playlist/modals/CreateNewPlaylistModal.js\": 326,\n\t\"./playlist/modals/DuplicateEntryPrompt\": 328,\n\t\"./playlist/modals/DuplicateEntryPrompt.js\": 328,\n\t\"./playlist/modals/EditPlaylistModal\": 386,\n\t\"./playlist/modals/EditPlaylistModal.js\": 386,\n\t\"./playlist/modals/EditPlaylistModal.scss\": 1724,\n\t\"./playlist/modals/EntryAddedConfirmation\": 589,\n\t\"./playlist/modals/EntryAddedConfirmation.js\": 589,\n\t\"./playlist/modals/NewPlaylistForm\": 327,\n\t\"./playlist/modals/NewPlaylistForm.js\": 327,\n\t\"./playlist/modals/PlaylistEntryOptionsModal\": 1117,\n\t\"./playlist/modals/PlaylistEntryOptionsModal.js\": 1117,\n\t\"./playlist/modals/ReportPlaylistModal\": 478,\n\t\"./playlist/modals/ReportPlaylistModal.js\": 478,\n\t\"./playlist/modals/ShareError\": 477,\n\t\"./playlist/modals/ShareError.js\": 477,\n\t\"./productsComponents/productCarousel/ProductCarousel\": 579,\n\t\"./productsComponents/productCarousel/ProductCarousel.js\": 579,\n\t\"./productsComponents/productCarousel/productCarousel.css\": 712,\n\t\"./productsComponents/productCarousel/productCarousel.css.scss\": 712,\n\t\"./productsComponents/productFilters/DifficultyIntensityFilters\": 527,\n\t\"./productsComponents/productFilters/DifficultyIntensityFilters.js\": 527,\n\t\"./productsComponents/productFilters/DifficultyIntensityFilters.scss\": 1082,\n\t\"./productsComponents/productFilters/ProductCheckBox\": 1118,\n\t\"./productsComponents/productFilters/ProductCheckBox.js\": 1118,\n\t\"./productsComponents/productFilters/ProductCheckbox\": 1119,\n\t\"./productsComponents/productFilters/ProductCheckbox.scss\": 1119,\n\t\"./productsComponents/productMasonry/ProductMasonry\": 547,\n\t\"./productsComponents/productMasonry/ProductMasonry.js\": 547,\n\t\"./productsComponents/productTile/HoverableProductTile\": 580,\n\t\"./productsComponents/productTile/HoverableProductTile.js\": 580,\n\t\"./productsComponents/productTile/ProductTile\": 581,\n\t\"./productsComponents/productTile/ProductTile.js\": 581,\n\t\"./productsComponents/productsDisplay/ProductDisplay\": 1120,\n\t\"./productsComponents/productsDisplay/ProductDisplay.scss\": 1120,\n\t\"./productsComponents/productsDisplay/ProductsDisplay\": 546,\n\t\"./productsComponents/productsDisplay/ProductsDisplay.js\": 546,\n\t\"./readMore\": 542,\n\t\"./readMore/\": 542,\n\t\"./readMore/index\": 542,\n\t\"./readMore/index.js\": 542,\n\t\"./reduxContainer\": 166,\n\t\"./reduxContainer/\": 166,\n\t\"./reduxContainer/ReduxContainer\": 331,\n\t\"./reduxContainer/ReduxContainer.js\": 331,\n\t\"./reduxContainer/UserLoadWrapper\": 332,\n\t\"./reduxContainer/UserLoadWrapper.js\": 332,\n\t\"./reduxContainer/index\": 166,\n\t\"./reduxContainer/index.js\": 166,\n\t\"./reduxContainer/withRedux\": 459,\n\t\"./reduxContainer/withRedux.js\": 459,\n\t\"./reduxContainer/withUser\": 460,\n\t\"./reduxContainer/withUser.js\": 460,\n\t\"./shareModal/ShareModalContent\": 214,\n\t\"./shareModal/ShareModalContent.js\": 214,\n\t\"./shareModal/ShareModalContent.scss\": 959,\n\t\"./simpleFormatter/SimpleFormatter\": 346,\n\t\"./simpleFormatter/SimpleFormatter.js\": 346,\n\t\"./sortableList/SortableList\": 179,\n\t\"./sortableList/SortableList.js\": 179,\n\t\"./sortableList/SortableList.scss\": 948,\n\t\"./sortableList/SortableListLabel\": 490,\n\t\"./sortableList/SortableListLabel.js\": 490,\n\t\"./sortableList/SortableListMenu\": 470,\n\t\"./sortableList/SortableListMenu.js\": 470,\n\t\"./tracking\": 169,\n\t\"./tracking/\": 169,\n\t\"./tracking/Trackable\": 534,\n\t\"./tracking/Trackable.js\": 534,\n\t\"./tracking/TrackableContext\": 352,\n\t\"./tracking/TrackableContext.js\": 352,\n\t\"./tracking/TrackableSection\": 593,\n\t\"./tracking/TrackableSection.js\": 593,\n\t\"./tracking/index\": 169,\n\t\"./tracking/index.js\": 169,\n\t\"./v2Wrappers/Admin/BatchedFlowControl\": 1121,\n\t\"./v2Wrappers/Admin/BatchedFlowControl.js\": 1121,\n\t\"./v2Wrappers/Admin/RedemptionOffers\": 1122,\n\t\"./v2Wrappers/Admin/RedemptionOffers.js\": 1122,\n\t\"./v2Wrappers/Admin/StyledAdminWrapper\": 119,\n\t\"./v2Wrappers/Admin/StyledAdminWrapper.js\": 119,\n\t\"./v2Wrappers/Admin/StyledBillboardShow\": 1123,\n\t\"./v2Wrappers/Admin/StyledBillboardShow.js\": 1123,\n\t\"./v2Wrappers/Admin/StyledLiveInstructor\": 1124,\n\t\"./v2Wrappers/Admin/StyledLiveInstructor.js\": 1124,\n\t\"./v2Wrappers/Admin/StyledLiveShow\": 1125,\n\t\"./v2Wrappers/Admin/StyledLiveShow.js\": 1125,\n\t\"./v2Wrappers/Admin/StyledMusic\": 1126,\n\t\"./v2Wrappers/Admin/StyledMusic.js\": 1126,\n\t\"./v2Wrappers/Admin/StyledUrlShortener\": 1127,\n\t\"./v2Wrappers/Admin/StyledUrlShortener.js\": 1127,\n\t\"./v2Wrappers/Admin/StyledUtmBuilder\": 1128,\n\t\"./v2Wrappers/Admin/StyledUtmBuilder.js\": 1128,\n\t\"./v2Wrappers/EditMembership\": 1172,\n\t\"./v2Wrappers/EditMembership.js\": 1172,\n\t\"./v2Wrappers/StyledAuthProviders\": 1129,\n\t\"./v2Wrappers/StyledAuthProviders.js\": 1129,\n\t\"./v2Wrappers/StyledFooter\": 1130,\n\t\"./v2Wrappers/StyledFooter.js\": 1130,\n\t\"./v2Wrappers/StyledHeader\": 732,\n\t\"./v2Wrappers/StyledHeader.js\": 732,\n\t\"./v2Wrappers/StyledHeader.scss\": 1133,\n\t\"./v2Wrappers/StyledVideoPlayer\": 1134,\n\t\"./v2Wrappers/StyledVideoPlayer.js\": 1134,\n\t\"./v2Wrappers/StyledWrapper\": 257,\n\t\"./v2Wrappers/StyledWrapper.js\": 257,\n\t\"./v2Wrappers/ThemeWrapper\": 170,\n\t\"./v2Wrappers/ThemeWrapper.js\": 170,\n\t\"./videoPlayer/ExternalVideo\": 591,\n\t\"./videoPlayer/ExternalVideo.js\": 591,\n\t\"./videoPlayer/VideoListIcon\": 358,\n\t\"./videoPlayer/VideoListIcon.js\": 358,\n\t\"./videoPlayer/VideoListMobile\": 586,\n\t\"./videoPlayer/VideoListMobile.js\": 586,\n\t\"./videoPlayer/VideoPlayer\": 348,\n\t\"./videoPlayer/VideoPlayer.js\": 348,\n\t\"./videoPlayer/VideoTracker\": 592,\n\t\"./videoPlayer/VideoTracker.js\": 592,\n\t\"./videoPlayer/VideosList\": 587,\n\t\"./videoPlayer/VideosList.js\": 587,\n\t\"./videoPlayer/VideosListContent\": 349,\n\t\"./videoPlayer/VideosListContent.js\": 349,\n\t\"./videoPlayer/VideosListMenu\": 594,\n\t\"./videoPlayer/VideosListMenu.js\": 594,\n\t\"./videoPlayer/componentSetup\": 227,\n\t\"./videoPlayer/componentSetup/\": 227,\n\t\"./videoPlayer/componentSetup/formatTime\": 536,\n\t\"./videoPlayer/componentSetup/formatTime.js\": 536,\n\t\"./videoPlayer/componentSetup/index\": 227,\n\t\"./videoPlayer/componentSetup/index.js\": 227,\n\t\"./videoPlayer/componentSetup/navButtons\": 537,\n\t\"./videoPlayer/componentSetup/navButtons.js\": 537,\n\t\"./videoPlayer/componentSetup/progressBar\": 535,\n\t\"./videoPlayer/componentSetup/progressBar.js\": 535,\n\t\"./videoPlayer/componentSetup/videoList\": 538,\n\t\"./videoPlayer/componentSetup/videoList.js\": 538,\n\t\"./videoPlayer/helperFunctions/extractVideosListProps\": 595,\n\t\"./videoPlayer/helperFunctions/extractVideosListProps.js\": 595,\n\t\"./videoPlayer/videoComponents/Autoplay\": 714,\n\t\"./videoPlayer/videoComponents/Autoplay.js\": 714,\n\t\"./videoPlayer/videoComponents/NextVid\": 735,\n\t\"./videoPlayer/videoComponents/NextVid.js\": 735,\n\t\"./videoPlayer/videoComponents/PlayButton\": 715,\n\t\"./videoPlayer/videoComponents/PlayButton.js\": 715,\n\t\"./videoPlayer/videoComponents/PreviousVid\": 736,\n\t\"./videoPlayer/videoComponents/PreviousVid.js\": 736,\n\t\"./videoPlayer/videoComponents/SeekerButtons\": 734,\n\t\"./videoPlayer/videoComponents/SeekerButtons.js\": 734,\n\t\"./videoPlayer/videoComponents/VideoList\": 716,\n\t\"./videoPlayer/videoComponents/VideoList.js\": 716,\n\t\"./withFadeInEffect\": 1135,\n\t\"./withFadeInEffect.js\": 1135\n};\n\n\nfunction webpackContext(req) {\n\tvar id = webpackContextResolve(req);\n\treturn __webpack_require__(id);\n}\nfunction webpackContextResolve(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t}\n\treturn map[req];\n}\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = 1650;","import withRedux from './withRedux'\nimport withUser from './withUser'\n\nexport { withRedux, withUser }\n","import TrackableSection from './TrackableSection'\nimport Trackable from './Trackable'\n\nexport default TrackableSection\n\nexport { Trackable }\n","import styled from 'styled-components'\nimport { color, space } from 'styled-system'\n\nconst ThemeWrapper = styled.div`\n ${color}\n ${space}\n \n body.using-mouse {\n *:focus {\n outline: none;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n cursor: pointer;\n\n &:focus {\n color: inherit;\n }\n }\n\n /* Remove margin for labels so toggle switches will look good on legacy pages */\n label {\n margin: 0px;\n }\n\n /* Remove padding so the volume bar will look good in RangeSlider on legacy pages */\n input[type='range'] {\n padding: 0;\n }\n`\n\nexport default ThemeWrapper\n","/*\n** We need to add all of our components here due to the way the Redux ORM is set up. It expects these components (for reasons?).\n** Once we refactor Redux to not include the ORM and to be more modular, this shouldn't be a problem and we can both remove these and remove react.module entirely.\n*/\n\nimport { react2angular } from 'react2angular'\n\nimport ExplorePage from './components_v1/pageLevelComponents/explore/ExplorePage'\nimport VideoPlayer from './components_v1/videoPlayer/VideoPlayer'\nimport VideoPreviewWrapper from './components_v1/admin/videos/VideoPreviewWrapper'\nimport PlanEntryListHeader from './components_v1/planEntry/PlanEntryListHeader'\nimport PlanEntryTile from './components_v1/planEntry/PlanEntryTile'\nimport AccessedItemsCarousel from './components_v1/accessedItems/AccessedItemsCarousel'\nimport AccessedItemsList from './components_v1/accessedItems/AccessedItemsList'\nimport PlaylistTile from './components_v1/playlist/PlaylistTile'\nimport UserPlaylists from './components_v1/playlist/UserPlaylists'\n\nconst app = angular.module('cody.react', [])\n\napp.component(\n 'explorePage',\n react2angular(ExplorePage, [\n 'allProductCount',\n 'baseUrl',\n 'prefilteredSubcategories',\n 'prefilteredCategories',\n 'group',\n 'defaultOrder',\n 'categories',\n 'difficulty',\n 'intensity',\n 'categoryFeaturedProducts',\n 'featuredProducts',\n 'pageVersion'\n ])\n)\napp.component(\n 'planEntryListHeader',\n react2angular(PlanEntryListHeader, [\n 'background',\n 'coachName',\n 'favoritable',\n 'planSubscriptionId',\n 'entryListOrigin',\n 'title',\n 'type'\n ])\n)\napp.component(\n 'videoPlayer',\n react2angular(VideoPlayer, [\n 'autoplay',\n 'introVideo',\n 'offerId',\n 'origin',\n 'originType',\n 'poster',\n 'planId',\n 'planEntryId',\n 'planSubscriptionId',\n 'playlistPos',\n 'resolution',\n 'sourceId',\n 'sourceType',\n 'src',\n 'title',\n 'trackVideo',\n 'type',\n 'userLoggedIn',\n 'noAutoplayOption',\n 'video',\n 'videoSession'\n ])\n)\n\napp.component(\n 'videoPreviewWrapper',\n react2angular(VideoPreviewWrapper, ['label', 'video', 'durationInTitle'])\n)\n\napp.component(\n 'planEntryTile',\n react2angular(PlanEntryTile, ['planEntry', 'hasDescription'])\n)\n\napp.component('accessedItemsList', react2angular(AccessedItemsList, ['items']))\n\napp.component(\n 'accessedItemsCarousel',\n react2angular(AccessedItemsCarousel, ['items'])\n)\n\napp.component(\n 'playlistTile',\n react2angular(PlaylistTile, ['playlist', 'fromAngular'])\n)\n\napp.component(\n 'userPlaylists',\n react2angular(UserPlaylists, ['uuid', 'playlistTab'])\n)\n","import 'core-js/stable'\nimport 'regenerator-runtime/runtime'\nimport '../react.module'\nimport '../stylesheets/application.css.scss'\n\nconst componentRequireContext = require.context('components_v1', true)\nconst ReactRailsUJS = require('react_ujs')\nReactRailsUJS.useContext(componentRequireContext)\n","import React from 'react'\nimport className from 'classnames'\n\nimport SortableListLabel from './SortableListLabel'\nimport SortableListMenu from './SortableListMenu'\nimport PropTypes from 'prop-types'\nimport './SortableList.scss'\n\n/**\n * Possible sorting options that can be passed in as an array\n *\n * recentlyLogged, recentlyViewed, recentlyAdded, relevance, rank, date, az\n */\n\nclass SortableList extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n menuOpen: false\n }\n\n this.optionTitles = {\n recentlyLogged: 'Recently Loggeed',\n recentlyViewed: 'Recently Viewed',\n recentlyAdded: 'Recently Added',\n relevance: 'Most Relevant',\n rank: 'Most Popular',\n date: 'Newest',\n az: 'az',\n oldest: 'Oldest',\n title: 'Class Name A-Z',\n series: 'Series Name A-Z',\n plan: 'Series Name A-Z',\n style: 'Style A-Z',\n instructor: 'Instructor Name A-Z',\n durationShortToLong: 'Duration Short-Long',\n durationLongToShort: 'Duration Long-Short',\n 7: 'Last 7 Days',\n 30: 'Last 30 Days',\n 90: 'Last 90 Days',\n all: 'All Time'\n }\n }\n\n setOrder(order) {\n this.setState({ menuOpen: false })\n this.props.onSort(order)\n }\n\n toggleMenu() {\n this.setState((prevState) => {\n return {\n menuOpen: !prevState.menuOpen\n }\n })\n }\n\n render() {\n let listClass = className('SortableList', {\n 'SortableList--open': this.state.menuOpen,\n 'SortableList--left': this.props.alignLeftXs\n })\n\n return (\n - \n {filteredItems}\n {props.isMobile && filteredItems.length > 0 ?
props.onClearAll()}>Clear All
: null}\n \n
\n )\n }\n}\n\nSortableList.propTypes = {\n order: PropTypes.string,\n onSort: PropTypes.func,\n sortableFields: PropTypes.array,\n alignLeftXs: PropTypes.bool,\n sortLocation: PropTypes.string,\n isMobile: PropTypes.bool\n}\n\nexport default SortableList\n","import User from '../../models/User'\n\nexport const USER_FETCHED = 'USER_FETCHED'\nexport const USER_LOADED = 'USER_LOADED'\n\nexport const userFetched = user => ({\n type: USER_FETCHED,\n user\n})\n\nexport const userLoaded = () => ({\n type: USER_LOADED\n})\n\nexport function fetchCurrentUser() {\n return dispatch => {\n User.getCurrentUser()\n .then(res => {\n dispatch(userFetched(res))\n dispatch(userLoaded())\n })\n .catch(e => {\n dispatch(userLoaded())\n })\n }\n}\n","import PlaylistEntries from '../../models/PlaylistEntries'\nimport { getPlaylistEntry } from '../selectors/playlistEntries'\nimport { setDisplayedPlaylistEntriesOrder } from '../actions/playlists'\n\nexport const PLAYLIST_ENTRY_CREATED = 'PLAYLIST_ENTRY_CREATED'\nexport const START_PLAYLIST_ENTRY_SORT = 'START_PLAYLIST_ENTRY_SORT'\nexport const PLAYLIST_ENTRY_DELETED = 'PLAYLIST_ENTRY_DELETED'\n\nexport function startPlaylistEntrySort (uuid, sortedEntryObj) {\n return {\n type: START_PLAYLIST_ENTRY_SORT,\n uuid,\n sortedEntryObj\n }\n}\n\nexport function playlistEntryDeleted (playlistEntryId) {\n return {\n type: PLAYLIST_ENTRY_DELETED,\n playlistEntryId\n }\n}\n\nexport function playlistEntryCreated (playlistUUID, planEntryId, createdAt) {\n return {\n type: PLAYLIST_ENTRY_CREATED,\n playlistUUID,\n planEntryId,\n createdAt\n }\n}\n\nexport function createNewPlaylistEntry (playlistUUID, planEntryId) {\n return dispatch => {\n PlaylistEntries.createNew(playlistUUID, planEntryId).then(res => {\n dispatch(\n playlistEntryCreated(playlistUUID, planEntryId, res.data.createdAt)\n )\n })\n }\n}\n\nexport function sortPlaylistEntries (playlist, sortedEntryIds, e) {\n return dispatch => {\n playlist.sort(sortedEntryIds)\n\n dispatch(setDisplayedPlaylistEntriesOrder())\n dispatch(startPlaylistEntrySort(playlist.uuid, e))\n }\n}\n\nexport function deletePlaylistEntry (playlistEntryId) {\n return (dispatch, getState) => {\n const state = getState()\n const playlistEntry = getPlaylistEntry(state, playlistEntryId)\n playlistEntry.deleteEntry().then(() => {\n dispatch(playlistEntryDeleted(playlistEntryId))\n })\n }\n}\n","export const getCategoryObj = (categories, targetSlug) => {\n return categories.find(category => category.slug === targetSlug)\n}\n\nexport const getSubcategoryObj = (subcategories, targetSlug) => {\n return subcategories.find(subcategory => subcategory.slug === targetSlug)\n}\n","import { createSelector } from 'reselect'\nimport { createSelector as ormCreateSelector } from 'redux-orm'\nimport orm from '../../models/models'\n\nexport const getCategories = createSelector(\n state => state.orm,\n ormCreateSelector(orm, session => {\n return session.PlanCategory.all().toModelArray()\n })\n)\n\nexport const getLastSelectedCategory = createSelector(\n state => state.orm,\n state => state.ui.planCategories.selectedCategorySlug,\n ormCreateSelector(orm, (session, currCategorySlug) => {\n return session.PlanCategory.withId(currCategorySlug)\n })\n)\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport { P } from 'ui/acro'\n\nconst TimeCodeBadge = styled(P)(() =>\n css({\n bg: 'white',\n color: 'black',\n fontFamily: 'Arquitecta',\n wordBreak: 'none',\n fontSize: '13px',\n position: 'absolute',\n padding: '0px 5px',\n lineHeight: '170%',\n letterSpacing: '0.04em',\n textTransform: 'uppercase',\n margin: '0' // overwrite legacy p margin in application.css\n })\n)\n\nexport default TimeCodeBadge\n","import { createSelector } from 'reselect'\nimport { createSelector as ormCreateSelector } from 'redux-orm'\nimport orm from '../../models/models'\n\nexport const planEntries = createSelector(\n state => state.orm,\n ormCreateSelector(orm, session => {\n return session.PlanEntry.all().toModelArray()\n })\n)\n\nexport const getPlanEntryGridState = createSelector(\n state => state.ui.planEntries,\n planEntryState => {\n return planEntryState.grid\n }\n)\n\nexport const isPlanEntryFeatured = (state, entryId) => {\n const selector = createSelector(\n state => state.orm,\n state => state.orm.PlanEntry.itemsById[`${entryId}`].featured,\n ormCreateSelector(orm, (_, featured) => {\n return featured\n })\n )\n return selector(state)\n}\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from 'react'\nimport { CopyToClipboard } from 'react-copy-to-clipboard'\nimport './ShareModalContent.scss'\nimport PropTypes from 'prop-types'\nimport { Modal } from 'react-bootstrap'\n\nclass ShareModalContent extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n copied: false\n }\n\n this.handleKeyCopy = this.handleKeyCopy.bind(this)\n }\n\n handleKeyCopy (e) {\n const copied = !!e.metaKey && e.key.toLowerCase() === 'c'\n\n if (copied && this.state.inputSelected) {\n this.setState({ copied: true })\n }\n }\n\n componentDidMount () {\n document.addEventListener('keydown', this.handleKeyCopy)\n }\n\n componentWillMount () {\n document.removeEventListener('keydown', this.handleKeyCopy)\n }\n\n render () {\n return (\n \n Share {this.props.item} \n {\n const inputField = e.target\n inputField.select()\n this.setState({ inputSelected: true })\n }}\n onBlur={() => {\n this.setState({ inputSelected: false })\n }}\n />\n \n {\n this.setState({ copied: true })\n }}\n >\n \n \n\n \n \n
\n )\n }\n}\n\nShareModalContent.propTypes = {\n onHide: PropTypes.func,\n urlToShare: PropTypes.string,\n shareCaption: PropTypes.string,\n item: PropTypes.string\n}\n\nexport default ShareModalContent\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport PlaylistRow from './PlaylistRow'\nimport CreateNewPlaylistModal from './modals/CreateNewPlaylistModal'\n\nimport './PlaylistSelector.scss'\nimport PlaylistLoadingCards from './PlaylistLoadingCards'\nimport { Dropdown } from 'ui/bend'\nimport styled from 'styled-components'\nimport { Caption } from 'ui/bend'\nimport css from '@styled-system/css'\n\nimport { PlusIcon } from 'images/latest'\n\nconst DropDownWrapper = styled(Caption)(() =>\n css({\n display: 'flex',\n fontSize: '18px',\n letterSpacing: '0.396px',\n color: '#636363',\n alignItems: 'center',\n gap: '16px',\n ':nth-child(1)': {\n width: '290px'\n }\n })\n)\n\nclass PlaylistSelector extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n modalOpen: false\n }\n }\n\n selectEvent = ({ uuid }) => {\n const playlist = this.props.playlists.find((item) => item.uuid === uuid)\n this.props.onSelect(playlist)\n }\n\n isMobile = () => {\n const width = document?.body?.clientWidth\n return width <= 768 ? true : false\n }\n\n render() {\n const dropDownList = this.props.playlists.reduce((playlists, item) => {\n return [\n {\n label: item.title,\n value: item.uuid,\n uuid: item.uuid,\n isActive: this.props.isActive(item)\n },\n ...playlists\n ]\n }, [])\n const activeUuid = dropDownList.find((item) => item.isActive)?.uuid\n let playlists = this.props.playlists.map((playlist) => {\n return (\n \n {this.props.shareCaption}\n
\n \n {this.state.copied ? 'Successfully copied url' : null}\n
\n \n {this.props.loading ? (\n \n \n \n )}\n {\n this.setState({ modalOpen: true })\n }}\n >\n {this.isMobile() ? (\n <>\n
\n\n \n {this.renderRangeLabel(sliderValues)}\n
\n \n )\n }\n}\n\nFilterRangeSlider.defaultProps = {\n step: 1\n}\n\nFilterRangeSlider.propTypes = {\n allowOverMax: PropTypes.bool,\n rangeMin: PropTypes.number,\n rangeMax: PropTypes.number,\n step: PropTypes.number,\n values: PropTypes.object,\n onChange: PropTypes.func,\n onSlideEnd: PropTypes.func,\n lightVersion: PropTypes.bool\n}\n\nexport default FilterRangeSlider\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport './FilterMetaLayout.scss'\nimport FilterModal from '../filtersRow/FilterModal'\nimport LayoutSelector from '../layoutSelector/LayoutSelector'\nimport SortableList from '../sortableList/SortableList'\nimport SelectedFiltersDisplay from './SelectedFiltersDisplay'\nimport FadeInFullscreen from '../FadeInFullscreen'\nimport FilterIcon from '../../../assets/codicons/filter'\nimport { connect } from 'react-redux'\nimport { applyDurationFilter } from 'redux/actions/planEntries'\n\nclass FilterMetaLayout extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n fixed: false\n }\n }\n\n render() {\n const filterMetaLayoutClass = classNames('FilterMetaLayout', {\n 'FilterMetaLayout--fixed': this.state.fixed,\n 'FilterMetaLayout--noLowerXs': this.props.noLowerXs\n })\n\n const filterModalButtonClass = classNames(\n 'FilterMetaLayout__filterButtonLabel',\n {\n 'FilterMetaLayout__filterButtonLabel--filtered ':\n this.props.userHasFiltered\n }\n )\n let mobileFilter\n let newMobileData = this.props.renderTopRow()\n if (this.props.modalFilterOptions) {\n const mobileFilterContent = this.props.renderMobileFilters ? (\n \n
\n {this.props.totalfiltersSelected > 0 ? (\n \n {this.setState({ isMobileFilterOpen: false })}}\n >\n ×\n
*/}\n \n {this.props.totalfiltersSelected > 0\n ? `Filters Selected(${this.props.totalfiltersSelected})`\n : `Filters`}\n
\n\n {/* \n this.setState({ isMobileFilterOpen: true })}\n >\n {this.props?.totalfiltersSelected > 0\n ? `Filters(${this.props.totalfiltersSelected})`\n : 'Filters'}\n
\n \n {mobileFilterContent}\n \n {/* commenting this as part of MVS-644 class finder redesign\n
\n )\n }\n\n let layoutSelector\n if (this.props.onLayoutSelect) {\n layoutSelector = (\n \n
\n \n
\n )\n }\n}\n\nFilterMetaLayout.defaultProps = {\n onFixed: () => {},\n onUnfixed: () => {},\n onSort: () => {},\n totalProducts: 0\n}\n\nFilterMetaLayout.propTypes = {\n onFixed: PropTypes.func,\n onUnfixed: PropTypes.func,\n renderTopRow: PropTypes.func,\n renderBottomRowRight: PropTypes.func,\n renderBottomContent: PropTypes.func,\n totalProducts: PropTypes.number,\n filters: PropTypes.object,\n onModalClear: PropTypes.func,\n modalFilterOptions: PropTypes.object,\n order: PropTypes.string,\n onSort: PropTypes.func,\n onLayoutSelect: PropTypes.func,\n layout: PropTypes.string,\n userHasFiltered: PropTypes.bool,\n filteredLabels: PropTypes.object,\n onSelectedFilterLabelClick: PropTypes.func,\n noLowerXs: PropTypes.bool,\n sortableFields: PropTypes.array,\n excludedFilters: PropTypes.array,\n contentLabel: PropTypes.string.isRequired,\n renderMobileFilters: PropTypes.func,\n filteredItemLabels: PropTypes.array,\n onClearAll: PropTypes.func,\n applyFilter: PropTypes.array,\n loadPlanEntries: PropTypes.func,\n durationOptions: PropTypes.object\n}\n\nconst mapStateToProps = (state) => {\n return {\n filteredAttributes: state.ui.planEntries.filtered,\n customDuration: state.ui.planEntries.customDuration\n }\n}\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n addCustomDuration: ({ durationOptions }) => {\n dispatch(applyDurationFilter({ durationOptions }))\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(FilterMetaLayout)\n","import BaseModel from './BaseModel'\nimport axiosInstance from 'api/axios.config'\nimport { USER_FETCHED } from '../redux/actions/users'\nimport snakecase from 'snakecase-keys'\nimport { fk, many } from 'redux-orm'\nimport {\n FINISH_CREATE_NEW_PLAYLIST,\n FETCH_PLAYLISTS_SUCCESS,\n SET_DISPLAYED_PLAYLIST,\n PLAYLIST_FEATURED,\n PLAYLIST_UNFEATURED,\n PLAYLIST_UPDATED,\n PLAYLIST_DELETED,\n REORDER_USER_PLAYLISTS\n} from '../redux/actions/playlists'\n\nclass Playlist extends BaseModel {\n static reducer (action, Playlist, session) {\n const currentUser = session.User.first()\n let currentPlaylists, playlist\n\n switch (action.type) {\n case USER_FETCHED:\n action.user.followedPlaylists.forEach((playlist, order) => {\n playlist = {\n ...playlist,\n order,\n user: action.user.username\n }\n Playlist.upsert(playlist)\n })\n break\n case FETCH_PLAYLISTS_SUCCESS:\n currentPlaylists = Playlist.all()\n if (action.reloadAll && currentPlaylists.count() > 0) {\n currentPlaylists.delete()\n }\n action.playlists.forEach(playlist => {\n Playlist.create(playlist)\n })\n break\n case FINISH_CREATE_NEW_PLAYLIST:\n currentPlaylists = Playlist.all().toModelArray()\n currentPlaylists.forEach(playlist => {\n playlist.set('order', playlist.order + 1)\n })\n playlist = {\n ...action.playlist,\n order: 0,\n user: currentUser.getId()\n }\n const newPlaylist = Playlist.create(playlist)\n if (action.firstPlanEntryId) {\n newPlaylist.planEntries.add(action.firstPlanEntryId)\n }\n\n break\n case SET_DISPLAYED_PLAYLIST:\n Playlist.upsert(action.playlist)\n break\n case PLAYLIST_FEATURED:\n playlist = Playlist.withId(action.uuid)\n playlist.update({\n featured: true\n })\n break\n case PLAYLIST_UNFEATURED:\n playlist = Playlist.withId(action.uuid)\n playlist.update({\n featured: false\n })\n break\n case PLAYLIST_UPDATED:\n playlist = Playlist.withId(action.uuid)\n playlist.update(action.params)\n break\n case PLAYLIST_DELETED:\n playlist = Playlist.withId(action.uuid)\n playlist.delete()\n break\n case REORDER_USER_PLAYLISTS:\n action.order.forEach((playlistId, idx) => {\n const playlist = Playlist.get({ id: parseInt(playlistId) })\n\n if (playlist && playlist.order !== idx) {\n playlist.update({ order: idx })\n }\n })\n }\n }\n\n static createNew (title, planEntryId) {\n return axiosInstance.post(`/playlists`, {\n title,\n plan_entry_id: planEntryId\n })\n }\n\n static sortUserPlaylists (order) {\n return axiosInstance.post('/playlists/sort-user-playlists', {\n playlists: order\n })\n }\n\n toggleFavorites () {\n if (this.following) {\n return this.unfollowPlaylist()\n } else {\n return this.followPlaylist()\n }\n }\n\n imageUrl () {\n if (this.coverPhoto.small.url) {\n return this.coverPhoto.small.url\n }\n if (this.firstEntry?.videoThumbnail) {\n return this.firstEntry.videoThumbnail\n }\n return 'https://d28gwrkukqy4h7.cloudfront.net/playlists/playlist-default.png'\n }\n\n url () {\n return `/playlists/${this.uuid}`\n }\n\n duplicate () {\n return axiosInstance.post(`${this.url()}/duplicate`)\n }\n\n destroy () {\n return axiosInstance.delete(this.url())\n }\n\n feature () {\n return axiosInstance.post(`${this.url()}/feature`)\n }\n\n unfeature () {\n return axiosInstance.delete(`${this.url()}/feature`)\n }\n\n report () {\n return axiosInstance.post(`${this.url()}/report`)\n }\n\n fetchPlanEntries (params) {\n return axiosInstance.get(`${this.url()}/entries`, { params })\n }\n\n sort (planEntryIds) {\n axiosInstance.post(`${this.url()}/sort`, {\n plan_entry: planEntryIds\n })\n }\n\n updateBackend (params) {\n return axiosInstance.put(this.url(), snakecase(params))\n }\n}\n\nPlaylist.modelName = 'Playlist'\nPlaylist.apiPath = '/playlists'\n\nPlaylist.options = {\n idAttribute: 'uuid'\n}\n\nPlaylist.fields = {\n user: fk('User', 'playlists'),\n planEntries: many({\n to: 'PlanEntry',\n through: 'PlaylistEntries',\n relatedName: 'playlists'\n })\n}\n\nexport default Playlist\n","import initProgressBarAnimation from './progressBar'\nimport formatTime from './formatTime'\nimport setupNavButtons from './navButtons'\nimport setupVideoList from './videoList'\n\nexport {\n initProgressBarAnimation,\n formatTime,\n setupNavButtons,\n setupVideoList\n}\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport { P } from 'ui/acro'\n\nconst ClassCountBadge = styled(P)(() =>\n css({\n bg: 'black',\n color: 'white',\n fontFamily: 'Arquitecta',\n wordBreak: 'none',\n fontSize: '13px',\n position: 'absolute',\n padding: '0px 5px',\n textTransform: 'uppercase',\n margin: '0' // overwrite legacy p margin in application.css\n })\n)\n\nexport default ClassCountBadge\n","import BaseModel from './BaseModel'\nimport pluralize from 'pluralize'\nimport { FETCH_PRODUCTS_SUCCESS } from '../redux/actions/products/products'\nimport React from 'react'\n\nclass Product extends BaseModel {\n static reducer (action, Product) {\n const products = action.products\n\n switch (action.type) {\n case FETCH_PRODUCTS_SUCCESS:\n let currentProducts = Product.all()\n if (action.reloadAll && currentProducts.count() > 0) {\n currentProducts.delete()\n }\n products.forEach(element => {\n Product.upsert(element)\n })\n break\n }\n return undefined\n }\n\n url () {\n let url\n if (this.type) {\n let type = pluralize(this.type.toLowerCase())\n if (type === 'plans') {\n type = 'series'\n }\n url = `/${type}/${this.slug}`\n }\n return url\n }\n\n firstCoachUrl () {\n if (this.coaches && this.coaches.length > 0) {\n const firstCoach = this.coaches[0]\n if (firstCoach.coachInfo && firstCoach.coachInfo.slug) {\n return `/instructors/${firstCoach.coachInfo.slug}`\n }\n }\n }\n\n coachLabel () {\n if (this.coaches) {\n return this.coaches.map((coach, idx) => {\n let coachName = `${coach.firstName} ${coach.lastName}`\n if (this.coaches.length > 1 && idx === this.coaches.length - 1) {\n coachName = ' & '.concat(coachName)\n }\n if (this.coaches.length > 0 && idx < this.coaches.length - 2) {\n coachName += ', '\n }\n if (coach.coachInfo) {\n return (\n \n
\n \n {this.props.renderTopRow()}\n
\n \n
\n {/* {layoutSelector} */}\n \n {mobileFilter}\n
\n \n
\n {layoutSelector}\n \n {bottomContent}\n
\n \n {typeof this.props.totalProducts === 'number' &&\n !Number.isNaN(this.props.totalProducts)\n ? this.props.totalProducts\n : 0}{' '}\n {this.props.contentLabel}\n
\n \n {filterOptions.map((option, idx) => (\n \n {\n e.stopPropagation()\n onSelect({ option: option.obj || option.label })\n }}\n >\n
\n \n {option.label}\n
\n \n {option.decorator}\n
\n \n ))}\n \n )\n}\n\nFilterSquares.defaultProps = {\n numSquaresPerRow: 4\n}\n\nFilterSquares.propTypes = {\n filterOptions: PropTypes.array,\n onSelect: PropTypes.func,\n numSquaresPerRow: PropTypes.number\n}\n\nexport default FilterSquares\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nconst ANIMATION_DISTANCE = 20\nconst ITEM_CONTAINER_SIDE_PADDING = 16\n\nclass NestedHoverMenuItem extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n active: false,\n animating: false\n }\n\n this.revealHoverContent = this.revealHoverContent.bind(this)\n this.hideHoverContent = this.hideHoverContent.bind(this)\n this.popupClashTop = this.popupClashTop.bind(this)\n\n this.hoverMenuItem = React.createRef()\n this.itemHoverContainer = React.createRef()\n }\n\n popupClashTop () {\n const navbar = document.querySelector('.js-navbar')\n\n return (\n this.hoverMenuItem.current.getBoundingClientRect().top -\n navbar.clientHeight <=\n this.itemHoverContainer.current.clientHeight\n )\n }\n\n hoverItemClashLeft () {\n const hoverItemWidth = this.hoverMenuItem.current.clientWidth\n const hoverContainerLeftOffset = this.itemHoverContainer.current.getBoundingClientRect()\n .left\n return hoverItemWidth > hoverContainerLeftOffset\n }\n\n componentDidMount () {\n if (this.itemHoverContainer.current && !this.itemHoverContainerPositioned) {\n this.itemParent = this.hoverMenuItem.current.parentElement\n this.itemHoverContainerPositioned = true\n if (this.hoverItemClashLeft()) {\n this.itemHoverContainer.current.classList.add('pre-clash-left')\n this.itemHoverContainer.current.style.transform = `translate(${this\n .itemParent.clientWidth -\n ANIMATION_DISTANCE -\n ITEM_CONTAINER_SIDE_PADDING}px, 0)`\n } else {\n this.itemHoverContainer.current.style.transform = `translate(calc(-100% + ${ANIMATION_DISTANCE}px), 0)`\n }\n }\n }\n\n hideHoverContent () {\n if (this.allowAnimation()) {\n if (\n this.itemHoverContainer.current.classList.contains('pre-clash-left')\n ) {\n this.itemHoverContainer.current.classList.add('pre-clash-left')\n this.itemHoverContainer.current.style.transform = `translate(${this\n .itemParent.clientWidth - ANIMATION_DISTANCE}px, 0)`\n } else {\n this.itemHoverContainer.current.style.transform = `translate(calc(-100% + ${ANIMATION_DISTANCE}px), 0)`\n }\n\n this.setState({ active: false })\n }\n }\n\n revealHoverContent () {\n if (this.allowAnimation()) {\n this.setState({ animating: true, active: true })\n\n if (this.popupClashTop()) {\n this.itemHoverContainer.current.classList.add('clash-top')\n } else {\n this.itemHoverContainer.current.classList.remove('clash-top')\n }\n\n if (\n this.itemHoverContainer.current.classList.contains('pre-clash-left')\n ) {\n this.itemHoverContainer.current.style.transform = `translate(${this\n .itemParent.clientWidth - ITEM_CONTAINER_SIDE_PADDING}px, 0)`\n } else {\n this.itemHoverContainer.current.style.transform =\n 'translate(calc(-100%), 0)'\n }\n }\n }\n\n allowAnimation () {\n return (\n (window.innerWidth > 768 || !this.props.hoverEffectDesktopOnly) &&\n !this.state.animating &&\n this.props.subMenu\n )\n }\n\n render () {\n let processingIcon\n\n if (this.props.processing) {\n processingIcon = (\n \n \n \n )\n }\n\n let hoverableIcon\n if (this.props.subMenu) {\n hoverableIcon = \n }\n\n const hoverMenuItemClass = classNames('NestedHoverMenuItem', {\n 'NestedHoverMenuItem--hover': this.state.active,\n 'NestedHoverMenuItem--included': this.props.marked,\n 'NestedHoverMenuItem--nonActive': this.props.nonActive,\n underlined: this.props.underlined\n })\n\n let hoverContainer\n if (this.props.subMenu) {\n hoverContainer = (\n \n
\n \n )\n }\n}\n\nNestedHoverMenuItem.defaultProps = {\n hoverEffectDesktopOnly: true\n}\n\nNestedHoverMenuItem.propTypes = {\n hoverEffectDesktopOnly: PropTypes.bool,\n processing: PropTypes.bool,\n label: PropTypes.string,\n marked: PropTypes.bool,\n subMenu: PropTypes.node,\n handleClick: PropTypes.func,\n underlined: PropTypes.bool\n}\n\nexport default NestedHoverMenuItem\n","import React from 'react'\nimport { connect } from 'react-redux'\nimport PropTypes from 'prop-types'\nimport {\n newFavoriteCreated,\n favoriteRemoved\n} from '../../redux/actions/favorite'\nimport { getFavorites, isFavorite } from '../../redux/selectors/favorite'\n\nclass Favoritable extends React.Component {\n constructor (props) {\n super(props)\n\n this.toggleFavorite = this.toggleFavorite.bind(this)\n this.removeFromFavorites = this.removeFromFavorites.bind(this)\n this.addToFavorites = this.addToFavorites.bind(this)\n }\n\n addToFavorites (callback, params) {\n this.props.planEntry.addToFavorites(params).then(res => {\n const newFavorite = res.data.planEntry.favorite\n this.props.addToFavoritesState(newFavorite)\n\n if (callback) callback(res.data)\n })\n }\n\n removeFromFavorites (callback) {\n this.props.favorites\n .filter({ planEntry: this.props.planEntry.id })\n .first()\n .removeFavorite()\n .then(res => {\n this.props.removeFavoriteFromState(res.data.id)\n if (callback) callback(res.data)\n })\n }\n\n toggleFavorite (callbackFunctions = {}) {\n if (this.props.isFavorite) {\n this.removeFromFavorites(callbackFunctions.removeCallback)\n } else {\n this.addToFavorites(callbackFunctions.addCallback)\n }\n }\n\n render () {\n const childProps = {\n toggleFavorite: this.toggleFavorite,\n addToFavorites: this.addToFavorites,\n removeFromFavorites: this.removeFromFavorites,\n isFavorited: this.props.isFavorite\n }\n\n return this.props.children(childProps)\n }\n}\n\nFavoritable.propTypes = {\n addToFavoritesState: PropTypes.func,\n favorites: PropTypes.object,\n planEntry: PropTypes.object,\n removeFavoriteFromState: PropTypes.func,\n isFavorite: PropTypes.bool\n}\n\nconst mapStateToProps = (state, props) => {\n return {\n favorites: getFavorites(state),\n isFavorite: isFavorite(state, props.planEntry.id)\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n addToFavoritesState: planEntryId => {\n dispatch(newFavoriteCreated(planEntryId))\n },\n removeFavoriteFromState: favoriteId => {\n dispatch(favoriteRemoved(favoriteId))\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Favoritable)\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport { useToggleFocus } from 'hooks'\n\nimport ThemeWrapper from './ThemeWrapper'\nimport EntryProviders from 'components_v2/_entryPoints/EntryProviders'\n\nconst StyledWrapper = ({ user, children, ...rest }) => {\n\n // Because StyledWrapper is on StyledHeader, and StyledHeader loads on all pages (except Admin), we only need to attach global event listeners here.\n useToggleFocus()\n\n return (\n \n {this.props.label}\n {processingIcon}\n
\n {hoverableIcon}\n {hoverContainer}\n \n \n {props.optionInfo.renderDropdownContent()}\n \n
\n )\n }\n\n return (\n <>\n \n {\n props.onClickFilterDropdown(props.value)\n }}\n >\n
\n {props.optionInfo.renderDropdownContent && getDropDownOptions()}\n \n )\n}\n\nFilterRowItem.defaultProps = {\n customizeLabelDisplay: (label) => label,\n hasDropdown: true\n}\n\nFilterRowItem.propTypes = {\n active: PropTypes.bool,\n customClass: PropTypes.string,\n displayedLabel: PropTypes.string,\n hasDropdown: PropTypes.bool,\n onClickFilterDropdown: PropTypes.func,\n label: PropTypes.string,\n customizeLabelDisplay: PropTypes.func,\n value: PropTypes.string\n}\n\nexport default FilterRowItem\n","import React from 'react'\nimport { Modal } from 'react-bootstrap'\nimport PropTypes from 'prop-types'\nimport './FilterModal.scss'\n\nconst FilterModal = props => {\n let menus = []\n let dropdownIdx = 0\n for (let label in props.filterOptions) {\n const optionInfo = props.filterOptions[label]\n const filteredAttributes = props.filtered[label]\n let clearLabel\n if (filteredAttributes && filteredAttributes.length > 0) {\n clearLabel = (\n \n {props.customizeLabelDisplay(itemLabel)}\n
\n \n \n
\n )\n dropdownIdx++\n }\n\n return (\n \n {shownLabel}\n {clearLabel}\n
\n {optionInfo.renderDropdownContent(true, true)}\n \n
\n \n
\n Filter Results
\n\n ×\n
\n {menus}
\n {this.props.children}
\n \n )\n }\n}\n\nFadeInFullscreen.propTypes = {\n isOpen: PropTypes.bool\n}\n\nexport default FadeInFullscreen\n","import React from 'react'\nimport AloModal from '../AloModal'\nimport { Modal } from 'react-bootstrap'\nimport PropTypes from 'prop-types'\nimport PhotoSelector from './PhotoSelector'\nimport './PhotoUploader.scss'\nimport axiosInstance from 'api/axios.config'\nimport classNames from 'classnames'\nimport FileUploadProgress from 'react-fileupload-progress'\n\nimport ReactCrop from 'react-image-crop'\nimport '../../../../node_modules/react-image-crop/lib/ReactCrop.scss'\n\nimport { Line } from 'rc-progress'\nimport AloButton from '../AloButton'\n\nclass PhotoUploader extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n display: props.currentImageUrl ? 'SELECT' : 'EDIT',\n src: '',\n crop: {\n aspect: 1,\n width: 80,\n x: 0,\n y: 0\n },\n uploading: false,\n percentageUploaded: 0,\n croppedUrl: '', // this is the local url for the cropped file\n remoteCoverPhotoUrl: '' // This is the url to the temporary bucket on aws,\n }\n this.fileReader = new window.FileReader()\n\n this.handleOnChange = this.handleOnChange.bind(this)\n this.handleOnImageLoaded = this.handleOnImageLoaded.bind(this)\n this.handleOnChange = this.handleOnChange.bind(this)\n this.handleOnComplete = this.handleOnComplete.bind(this)\n this.getCroppedImage = this.getCroppedImage.bind(this)\n this.changeDisplay = this.changeDisplay.bind(this)\n this.uploadImage = this.uploadImage.bind(this)\n this.removePhoto = this.removePhoto.bind(this)\n }\n\n changeDisplay (display) {\n this.setState({ display })\n }\n\n componentDidUpdate (prevProps) {\n if (!prevProps.file || prevProps.file.name !== this.props.file.name) {\n this.fileReader.addEventListener(\n 'load',\n () => {\n this.setState({ src: this.fileReader.result })\n },\n false\n )\n\n if (this.props.file) {\n this.fileReader.readAsDataURL(this.props.file)\n }\n }\n }\n\n handleOnImageLoaded (image) {\n this.imageRef = image\n }\n\n handleOnChange (crop) {\n this.setState({ crop })\n }\n\n handleOnComplete (crop, pixelCrop) {\n if (this.imageRef && crop.width && crop.height) {\n this.getCroppedImage(this.imageRef, pixelCrop, 'croppedFile.jpeg').then(\n croppedBlob => {\n this.croppedFileUrl = window.URL.createObjectURL(croppedBlob)\n this.setState({ croppedUrl: this.croppedFileUrl, croppedBlob })\n }\n )\n }\n }\n\n removePhoto() {\n if (this.state.remoteCoverPhotoUrl) {\n this.setState({\n remoteCoverPhotoUrl: ''\n })\n this.props.onHide()\n } else {\n //making the first letter of photoType capital in order to pass it to snakeCase formatting later\n const remoteKey = `remove${this.props?.photoType?.charAt(0)?.toUpperCase()+this.props.photoType?.slice(1)}Photo`\n this.props.onDelete(remoteKey)\n }\n }\n\n getCroppedImage (image, pixelCrop, fileName) {\n const tempCanvas = document.createElement('canvas')\n tempCanvas.width = pixelCrop.width\n tempCanvas.height = pixelCrop.height\n\n const context = tempCanvas.getContext('2d')\n\n context.drawImage(\n image,\n pixelCrop.x,\n pixelCrop.y,\n pixelCrop.width,\n pixelCrop.height,\n 0,\n 0,\n pixelCrop.width,\n pixelCrop.height\n )\n\n return new Promise(resolve => {\n tempCanvas.toBlob(blob => {\n if (!blob) {\n console.log('Image could not be converted')\n }\n blob.name = fileName\n window.URL.revokeObjectURL(this.croppedFileUrl)\n resolve(blob)\n }, 'image/jpeg')\n })\n }\n\n uploadImage () {\n const fd = new window.FormData()\n fd.append('image', this.state.croppedBlob)\n\n axiosInstance.post('/upload/image', fd).then(res => {\n const tempURL = res.data.imageUrl\n this.props.onHide()\n this.props.onUploaded(tempURL)\n })\n }\n\n getDisplayedView () {\n switch (this.state.display) {\n case 'EDIT':\n if (this.state.src) {\n return (\n \n
\n \n
\n \n Uploading\n
\n Processing Photo
\n\n
\n \n
\n
\n )\n }\n}\n\nFilterSidebarLayout.defaultProps = {\n filterOptions: []\n}\n\nFilterSidebarLayout.propTypes = {\n filterOptions: PropTypes.array.isRequired,\n onSelect: PropTypes.func\n}\n\nexport default FilterSidebarLayout\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from 'react'\nimport Dropzone from 'react-dropzone'\nimport PhotoUploader from './PhotoUploader'\nimport PropTypes from 'prop-types'\nimport './PhotoSelector.scss'\nimport PhotoIcon from '../../../assets/codicons/picture.svg'\n\nconst ACCEPTED_FILE_TYPES = [\n 'image/jpg',\n 'image/jpeg',\n 'image/gif',\n 'image/png',\n 'image/svg'\n]\n\nclass PhotoSelector extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n file: null,\n showUploader: false\n }\n\n this.handleOnDrop = this.handleOnDrop.bind(this)\n }\n\n handleOnDrop (acceptedFiles) {\n this.setState({ file: acceptedFiles[0], showUploader: true })\n }\n\n render () {\n let error\n if (this.state.error) {\n error = (\n \n
\n - \n {filterOptions.map((filter, idx) => (\n
\n
\n - \n
\n {this.state.error}\n
\n )\n }\n\n let hint\n if (this.state.hint) {\n hint = {this.state.hint}
\n }\n\n return (\n\n
\n )\n }\n\n return (\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n
\n {notMinimalSection}\n {error}\n {hint}\n \n
\n )\n }\n}\n\nNestedHoverMenu.propTypes = {\n menuOptions: PropTypes.array\n}\n\nexport default NestedHoverMenu\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport './PlusIcon.scss'\n\nclass PlusIcon extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n hovered: false\n }\n }\n\n render () {\n const plusIconClass = classNames('PlusIcon', {\n 'PlusIcon--active': this.props.active,\n 'PlusIcon--activeHovered': this.props.active && this.state.hovered\n })\n\n const { onClick, onMouseEnter, onMouseLeave } = this.props\n\n return (\n \n \n {this.buildNestedMenu(this.props.menuOptions)}\n \n
\n \n {this.props.children({\n animateIn: this.animateIn,\n animateOut: this.animateOut\n })}\n
\n \n +\n
\n \n )\n }\n}\n\nPlusIcon.propTypes = {\n active: PropTypes.bool,\n onClick: PropTypes.func,\n onMouseEnter: PropTypes.func,\n onMouseLeave: PropTypes.func\n}\n\nexport default PlusIcon\n","import React from 'react'\nimport PlanEntriesList from '../planEntryList/PlanEntriesList'\nimport AloIcon from '../../../assets/codicons/a'\nimport PrivateContent from '../PrivateContent'\nimport {\n fetchPlaylistEntries,\n setDisplayedPlaylistEntriesOrder,\n featurePlaylist,\n unfeaturePlaylist,\n updatePlaylist,\n clearPlaylistEntries\n} from '../../redux/actions/playlists'\nimport {\n sortPlaylistEntries,\n deletePlaylistEntry\n} from '../../redux/actions/playlistEntries'\nimport { clearPlanEntries } from '../../redux/actions/planEntries'\nimport {\n followPlaylist,\n unfollowPlaylist\n} from '../../redux/actions/playlistFollowers'\nimport { displayedPlaylistEntries } from '../../redux/selectors/playlists'\nimport { connect } from 'react-redux'\nimport PlaylistHeader from './PlaylistHeader'\nimport './PlaylistDisplay.scss'\nimport PropTypes from 'prop-types'\n\nclass PlaylistDisplay extends React.Component {\n constructor (props) {\n super(props)\n\n this.reorderPlanEntries = this.reorderPlanEntries.bind(this)\n this.handleOnPlanEntrySort = this.handleOnPlanEntrySort.bind(this)\n this.deleteEntryFromPlaylist = this.deleteEntryFromPlaylist.bind(this)\n this.deletePlaylist = this.deletePlaylist.bind(this)\n this.handleOnTransitionEnd = this.handleOnTransitionEnd.bind(this)\n this.toggleFeatured = this.toggleFeatured.bind(this)\n this.handlePlaylistUpdate = this.handlePlaylistUpdate.bind(this)\n this.toggleFollowPlaylist = this.toggleFollowPlaylist.bind(this)\n\n this.state = {\n deleting: false\n }\n }\n\n componentDidMount () {\n const playlist = this.props.playlist\n this.props.clearPlanEntries(playlist)\n this.props.fetchPlaylistEntries(playlist)\n }\n\n componentDidUpdate (prevProps) {\n if (prevProps.playlist.uuid !== this.props.playlist.uuid) {\n const playlist = this.props.playlist\n this.props.clearPlaylistEntries()\n this.props.clearPlanEntries(playlist)\n this.props.fetchPlaylistEntries(playlist)\n }\n }\n\n toggleFeatured () {\n const playlist = this.props.playlist\n if (playlist.featured) {\n return this.props.unfeaturePlaylist(playlist)\n } else {\n return this.props.featurePlaylist(playlist)\n }\n }\n\n deletePlaylist () {\n this.props.playlist.destroy().then(() => {\n this.setState({ deleting: true })\n })\n }\n\n handleOnTransitionEnd (e) {\n if (\n e.target === e.currentTarget &&\n e.propertyName === 'opacity' &&\n this.props.onDeleted\n ) {\n this.props.onDeleted(this.props.playlist.uuid)\n this.setState({ deleting: false })\n }\n }\n\n deleteEntryFromPlaylist (entryId) {\n this.props.deleteEntry(entryId)\n }\n\n handleOnPlanEntrySort (sortedEntryIds, e) {\n this.props.sortPlaylistEntries(sortedEntryIds, e)\n }\n\n reorderPlanEntries (direction, field) {\n this.props.setDisplayedPlaylistEntriesOrder({\n field,\n direction\n })\n\n const playlist = this.props.playlist\n this.props.clearPlaylistEntries()\n this.props.clearPlanEntries(playlist)\n this.props.fetchPlaylistEntries(playlist)\n }\n\n handlePlaylistUpdate (newPlaylistParams, callback) {\n this.props.updatePlaylist(this.props.playlist, newPlaylistParams, callback)\n }\n\n toggleFollowPlaylist () {\n const playlist = this.props.playlist\n\n if (playlist.following) {\n this.props.unfollowPlaylist(playlist)\n } else {\n this.props.followPlaylist(playlist)\n }\n }\n\n renderPlaylistContent () {\n const {\n playlist,\n arePlanEntriesLoading,\n orderBy,\n playlistPlanEntries,\n userIsAdmin,\n userIsAuthor,\n signedIn,\n includePlaylistAddedDates,\n initialPlaylistEntryLoad\n } = this.props\n\n if (playlist && !playlist.userCanView) {\n return \n
\n )\n } else {\n return (\n \n
\n This playlist is empty
\n \n Explore Our Library\n \n\n
\n )\n }\n}\n\nPlaylistDisplay.propTypes = {\n arePlanEntriesLoading: PropTypes.bool,\n playlistPlanEntries: PropTypes.array,\n fetchPlaylistEntries: PropTypes.func,\n setDisplayedPlaylistEntriesOrder: PropTypes.func,\n playlist: PropTypes.object,\n orderBy: PropTypes.string,\n deleteEntry: PropTypes.func,\n onDeleted: PropTypes.func,\n featurePlaylist: PropTypes.func,\n unfeaturePlaylist: PropTypes.func,\n signedIn: PropTypes.bool,\n userIsAuthor: PropTypes.bool,\n userIsAdmin: PropTypes.bool,\n includePlaylistAddedDates: PropTypes.bool,\n onDuplicated: PropTypes.func,\n sortPlaylistEntries: PropTypes.func,\n userLoaded: PropTypes.bool,\n initialPlaylistEntryLoad: PropTypes.bool,\n updatePlaylist: PropTypes.func,\n followPlaylist: PropTypes.func,\n unfollowPlaylist: PropTypes.func,\n clearPlanEntries: PropTypes.func,\n clearPlaylistEntries: PropTypes.func\n}\n\nconst mapStateToProps = state => {\n return {\n arePlanEntriesLoading: state.ui.playlists.loadingEntries,\n playlistPlanEntries: displayedPlaylistEntries(state),\n orderBy: state.ui.playlists.entriesOrder\n ? state.ui.playlists.entriesOrder.field\n : null,\n initialPlaylistEntryLoad: state.ui.playlists.initialPlaylistEntryLoad,\n userLoaded: state.users.loaded\n }\n}\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n fetchPlaylistEntries: (playlist, reloadAll) => {\n if (playlist.entryCount > 0) {\n dispatch(fetchPlaylistEntries(playlist, reloadAll))\n }\n },\n setDisplayedPlaylistEntriesOrder: orderObj => {\n dispatch(setDisplayedPlaylistEntriesOrder(orderObj))\n },\n clearPlanEntries: playlist => {\n dispatch(\n clearPlanEntries(planEntry =>\n planEntry.playlistIds.includes(playlist.uuid)\n )\n )\n },\n sortPlaylistEntries: (sortedEntryIds, e) => {\n dispatch(sortPlaylistEntries(ownProps.playlist, sortedEntryIds, e))\n },\n deleteEntry: entryId => {\n dispatch(deletePlaylistEntry(entryId))\n },\n featurePlaylist: playlist => {\n return dispatch(featurePlaylist(playlist))\n },\n followPlaylist: playlist => {\n return dispatch(followPlaylist(playlist))\n },\n unfeaturePlaylist: playlist => {\n return dispatch(unfeaturePlaylist(playlist))\n },\n unfollowPlaylist: playlist => {\n return dispatch(unfollowPlaylist(playlist))\n },\n updatePlaylist: (playlist, params, callback) => {\n return dispatch(updatePlaylist(playlist, params, callback))\n },\n clearPlaylistEntries: () => {\n return dispatch(clearPlaylistEntries())\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(PlaylistDisplay)\n","import React from 'react'\nimport FilterRowDropdown from './FilterRowDropdown'\nimport FilterRangeSlider from './FilterRangeSlider'\nimport PropTypes from 'prop-types'\nimport './SliderDropdown'\n\nconst SliderDropdown = props => {\n return (\n \n
\n {this.renderPlaylistContent()}\n \n
\n )\n }}\n />\n )\n}\n\nSliderDropdown.propTypes = {\n open: PropTypes.bool,\n noSlideAnimation: PropTypes.bool,\n rangeMax: PropTypes.number,\n rangeMin: PropTypes.number,\n values: PropTypes.object,\n onChange: PropTypes.func,\n onSlideEnd: PropTypes.func,\n onAfterClose: PropTypes.func,\n lightVersion: PropTypes.bool\n}\n\nexport default SliderDropdown\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from 'react'\nimport './PlanEntriesList.scss'\nimport StopwatchSvg from '../../../assets/codicons/stopwatch'\nimport CalendarSvg from '../../../assets/codicons/logging/log-calendar.svg'\nimport PlanEntriesListContent from './PlanEntriesListContent'\nimport PropTypes from 'prop-types'\n\n// Note that the planEntries array takes objects of this form\n// { obj: PlanEntryObject, id: unique identifier for each row, and createdAt field representing when entry was added to the list }\n// This was so that we could allow for duplicate plan entries and also so that the createdAt field won't be the createdAt field of the PlanEntry instance\n/*\n Sample object from PlaylistEntries\n {\n obj: PlanEntry Object\n id: PlaylistEntry.id\n createdAt: PlaylistEntry.createdAt\n }\n*/\nclass PlanEntriesList extends React.Component {\n constructor (props) {\n super(props)\n\n this.handleSort = this.handleSort.bind(this)\n }\n\n handleSort (order, parameter) {\n this.setState({ orderBy: parameter })\n this.props.onSort(order, parameter)\n }\n\n generateHeaders () {\n const headerObj = (value, label) => {\n label = label || value\n return {\n label,\n value\n }\n }\n\n let headers = [\n headerObj('title'),\n headerObj('coach', 'Instructor'),\n headerObj('plan', 'Series'),\n headerObj('duration', \n
\n )\n}\n\nGreyPageHeader.propTypes = {\n title: PropTypes.string,\n caption: PropTypes.string\n}\n\nexport default GreyPageHeader\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport './PlaylistTile.scss'\nimport Playlist from '../../models/Playlist'\n\nconst PlaylistTile = ({ playlist, fromAngular }) => {\n if (fromAngular) {\n playlist = new Playlist(playlist)\n }\n\n return (\n \n
\n {props.title}
\n{props.caption}
\n\n \n })
\n \n
\n )\n};\n\nPlaylistTile.defaultProps = {\n fromAngular: false\n}\n\nPlaylistTile.propTypes = {\n playlist: PropTypes.object,\n fromAngular: PropTypes.bool // Temporary hack to bridge angular and react.\n}\n\nexport default PlaylistTile\n","export const humanReadableDate = (date) =>\n !isNaN(date) &&\n date.toLocaleDateString('default', {\n month: 'long',\n day: 'numeric',\n year: 'numeric'\n })\n\nexport const humanReadableTime = (date) =>\n !isNaN(date) &&\n date.toLocaleTimeString('default', {\n hour: '2-digit',\n minute: '2-digit',\n timeZoneName: 'short'\n })\n","import BaseModel from './BaseModel'\nimport { oneToOne } from 'redux-orm'\nimport axiosInstance from 'api/axios.config'\nimport {\n NEW_FAVORITE_CREATED,\n FAVORITE_REMOVED,\n FINISH_FETCHING_FAVORITES,\n CLEAR_FAVORITES\n} from '../redux/actions/favorite'\n\nclass Favorite extends BaseModel {\n static reducer (action, Favorite, session) {\n switch (action.type) {\n case NEW_FAVORITE_CREATED:\n Favorite.create({\n ...action.favorite,\n planEntry: action.favorite.planEntryId\n })\n break\n case FAVORITE_REMOVED:\n const favoriteToDelete = Favorite.withId(action.favoriteId)\n if (favoriteToDelete) {\n favoriteToDelete.delete()\n }\n break\n case CLEAR_FAVORITES:\n Favorite.all().delete()\n break\n case FINISH_FETCHING_FAVORITES:\n action.favorites.forEach(favorite => {\n Favorite.create({\n ...favorite,\n planEntry: favorite.planEntry.id\n })\n\n if (!session.PlanEntry.withId(favorite.planEntry.id)) {\n session.PlanEntry.create({\n ...favorite.planEntry,\n planProduct: favorite.planEntry.plan.id\n })\n\n const plan = favorite.planEntry.plan\n if (!session.Product.withId(plan.id)) {\n session.Product.create(plan)\n }\n }\n })\n break\n }\n }\n\n removeFavorite () {\n return axiosInstance.delete(`/favorites/${this.id}`)\n }\n\n static createNewFavorite (planEntryId, params) {\n return axiosInstance.post('/favorites', {\n ...params,\n plan_entry_id: planEntryId\n })\n }\n}\n\nFavorite.fields = {\n planEntry: oneToOne('PlanEntry', 'favorite')\n}\n\nFavorite.apiPath = '/favorites'\n\nFavorite.modelName = 'Favorite'\n\nexport default Favorite\n","import BuilderSection from './BuilderSection'\n\nexport default BuilderSection\n","import SchemaSectionRenderer from './SchemaSectionRenderer'\n\nexport default SchemaSectionRenderer\n","import React from 'react'\n\nimport { Box } from 'ui/acro'\n\nimport { breakpoints } from 'ui/acro'\n\nimport Section from '../common/components/Section/Section'\nimport Carousel from '../common/components/Carousel/Carousel'\nimport { FadeBox, ClassCard, SeriesCard } from '../common/components'\nimport { useFetchAPI } from 'hooks'\n\nconst RecommendationWidget = ({\n carousalType,\n data: config,\n location = '',\n ...rest\n}) => {\n const data = config.fetchDataFrom\n ? useFetchAPI(config.fetchDataFrom?.replace('/api/v2', ''))[0]?.data\n : config?.carousalItems\n\n if (!data || data.length <= 0) {\n return <>\n }\n const [slidesOffsetBefore, slidesOffsetAfter] = [0, 0]\n\n return (\n \n {playlist.title}\n
\n\n \n \n {\n this.props.createNewPlaylist(\n this.state.playlistName,\n this.props.planEntryId,\n this.props.onAdded\n )\n }}\n >\n Save\n \n \n
\n Name
\n\n Duplicate Class \n \n {props.entry.title} is already in {props.playlist.title}. Are you sure\n you want to still add it?\n \n\n \n \n \n \n
\n )\n}\n\nDuplicateEntryPrompt.propTypes = {\n onCancel: PropTypes.func,\n onConfirm: PropTypes.func,\n entry: PropTypes.object,\n playlist: PropTypes.object\n}\n\nexport default DuplicateEntryPrompt\n","import React from 'react'\nimport AloIcon from '../../assets/codicons/a'\nimport PropTypes from 'prop-types'\n\nconst EmptyState = ({ caption, link, linkCaption }) => {\n return (\n \n
\n )\n}\n\nEmptyState.defaultProps = {\n linkCaption: 'Explore our library'\n}\n\nEmptyState.propTypes = {\n caption: PropTypes.string,\n link: PropTypes.string,\n linkCaption: PropTypes.string\n}\n\nexport default EmptyState\n","import React from 'react'\nimport ShareModalContent from '../shareModal/ShareModalContent'\nimport ShareError from './modals/ShareError'\nimport AloModal from '../AloModal'\nimport ReportPlaylistModal from './modals/ReportPlaylistModal'\nimport EditPlaylistModal from './modals/EditPlaylistModal'\nimport PropTypes from 'prop-types'\nimport AloButton from '../AloButton'\nimport { unlock_membership_event } from 'gtm/pushEvents'\nimport { ShareIcon } from 'images/latest'\nimport { DeleteIcon } from 'images/latest'\nimport { EditIcon } from 'images/latest'\nimport { DuplicateIcon } from 'images/latest'\nimport './PlaylistEdit.scss'\nimport { PlaylistMenus } from './PlayListMenus'\n\nclass PlaylistEdit extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n openModal: '',\n duplicating: false\n }\n\n this.openModal = this.openModal.bind(this)\n this.hideModal = this.hideModal.bind(this)\n }\n\n openModal(modal) {\n this.setState({ openModal: modal })\n }\n\n hideModal() {\n this.setState({ openModal: null })\n }\n\n generateMenuOptions() {\n const {\n playlist,\n userIsAdmin,\n userIsAuthor,\n onDelete,\n toggleFeatured,\n onDuplicated,\n deleting\n } = this.props\n\n let menuOptions = [\n {\n text: 'Share',\n icon: ShareIcon,\n nonActive: playlist.private,\n handleClick: () => {\n if (playlist.private) {\n this.openModal('shareError')\n } else {\n this.openModal('share')\n }\n }\n },\n {\n text: 'Duplicate',\n icon: DuplicateIcon,\n processing: this.state.duplicating,\n handleClick: () => {\n this.setState({ duplicating: true })\n playlist.duplicate().then((duplicated) => {\n this.setState({ duplicating: false })\n onDuplicated(duplicated.data)\n })\n }\n }\n ]\n\n if (userIsAuthor) {\n menuOptions.push(\n {\n text: 'Edit',\n icon: EditIcon,\n handleClick: () => {\n this.openModal('edit')\n }\n },\n { text: 'Delete', \n icon: DeleteIcon,\n handleClick: onDelete, processing: deleting }\n )\n }\n\n return menuOptions\n }\n\n renderOptions() {\n const { playlist } = this.props\n\n const menuOptions = this.generateMenuOptions()\n\n return (\n \n
\n {caption}
\n \n {linkCaption}\n \n{this.renderView()}
\n }\n}\n\nPlaylistEdit.propTypes = {\n playlist: PropTypes.object,\n userIsAdmin: PropTypes.bool,\n userIsAuthor: PropTypes.bool,\n onDelete: PropTypes.func,\n toggleFeatured: PropTypes.func,\n onPlaylistUpdate: PropTypes.func,\n signedIn: PropTypes.bool,\n toggleFollowing: PropTypes.func,\n onDuplicated: PropTypes.func,\n deleting: PropTypes.bool\n}\n\nexport default PlaylistEdit\n","import { Provider } from 'react-redux'\nimport { getStore } from '../../redux/store'\nimport PropTypes from 'prop-types'\nimport React from 'react'\n\nconst ReduxContainer = props => {\n return - \n
\n \n
\n )\n}\n\nAloCheckbox.propTypes = {\n active: PropTypes.bool,\n handleChange: PropTypes.func,\n icon: PropTypes.node,\n value: PropTypes.string,\n label: PropTypes.string\n}\n\nexport default AloCheckbox\n","import React from 'react'\nimport styled from 'styled-components'\nimport Text from 'ui/acro/typography/Text'\nimport { Flex } from 'ui/chandra'\nimport SortableList from '../../sortableList/SortableList'\nimport { getTotalNumberOfFilters } from './classFinderHelperMethods'\n\nconst FlexContainer = styled(Flex)`\n padding: 16px 0;\n align-items: center;\n gap: 24px;\n margin: 16px 60px;\n`\nconst FirstContainer = styled(Flex)`\n justify-content: space-between;\n flex: 1;\n`\nconst SecondContainer = styled(Flex)`\n justify-content: space-between;\n flex: 4;\n`\n\nconst FilterSection = styled(Text)`\n color: #000;\n font-family: 'Proxima-Nova';\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px; /* 150% */\n letter-spacing: 0.352px;\n`\nconst ClearAllSection = styled('div')`\n color: #000;\n font-family: 'Proxima-Nova';\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 115%; /* 16.1px */\n text-decoration-line: underline;\n align-self: center;\n cursor: pointer;\n`\nconst ClassesSection = styled('div')`\n font-family: 'Proxima-Nova';\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; /* 150% */\n letter-spacing: 0.352px;\n align-self: center;\n`\nconst SortSection = styled('div')`\n align-self: flex-end;\n`\n\nexport default function ClassFinderNewSortAndClear({\n filteredItemLabels,\n onClearAll,\n totalProducts,\n order,\n onSort,\n contentLabel = 'Classes',\n sortableFields\n}) {\n let numberOfActiveFilters = getTotalNumberOfFilters(filteredItemLabels)\n\n return (\n {paragraph.replace(/
/g, '
').trim()}
{formattedText}
\n}\n\nSimpleFormat.defaultProps = {\n text: ''\n}\n\nSimpleFormat.propTypes = {\n text: PropTypes.string\n}\n\nexport default SimpleFormat\n","import React from 'react'\n\nconst DEFAULT_HOVER_RAISE_BY = 0\n\nconst withItemTileHover = (\n ItemTile,\n desktopOnly = true,\n raiseBy = DEFAULT_HOVER_RAISE_BY\n) => {\n class ItemTileHover extends React.Component {\n constructor (props) {\n super(props)\n\n this.hoverOver = this.hoverOver.bind(this)\n this.hoverOut = this.hoverOut.bind(this)\n this.handleTransitionEnd = this.handleTransitionEnd.bind(this)\n }\n\n onDesktop () {\n return window.innerWidth > 768\n }\n\n hoverOver (itemTileElement, itemToReveal) {\n if (this.onDesktop() || !desktopOnly) {\n this.hovered = true\n\n if (!this.itemTileElement) {\n this.itemTileElement = itemTileElement\n }\n if (!this.coverContainer) {\n this.coverContainer = this.itemTileElement.querySelector(\n '.product-cover-container'\n )\n }\n this.itemTileElement.classList.add('hovered')\n this.lockItemCardHeight()\n\n if (itemToReveal) {\n this.itemToReveal = itemToReveal\n this.itemToRevealOriginalHeight = itemToReveal.clientHeight\n const heightGain = this.findItemToRevealHeightGain()\n this.raiseCover(heightGain)\n } else {\n this.raiseCover(raiseBy)\n }\n }\n }\n\n hoverOut () {\n if (this.onDesktop() || !desktopOnly) {\n this.hovered = false\n if (this.itemToReveal) {\n this.itemToReveal.style.maxHeight = `${\n this.itemToRevealOriginalHeight\n }px`\n }\n if (this.itemTileElement) {\n this.itemTileElement.classList.remove('hovered')\n }\n if (this.coverContainer) {\n this.coverContainer.style.paddingTop = '56.25%'\n }\n }\n }\n\n handleTransitionEnd () {\n if (!this.hovered) {\n this.unlockItemCardHeight()\n }\n }\n\n findItemToRevealHeightGain () {\n this.itemToReveal.style.maxHeight = 'none'\n let raisedHeight = this.itemToReveal.clientHeight\n\n return Math.max(0, raisedHeight - this.itemToRevealOriginalHeight)\n }\n\n lockItemCardHeight () {\n if (this.itemTileElement) {\n let cardCurrHeight = this.itemTileElement.clientHeight\n this.itemTileElement.style.maxHeight = `${cardCurrHeight}px`\n this.itemTileElement.style.minHeight = `${cardCurrHeight}px`\n }\n }\n\n raiseCover (raiseBy) {\n if (this.coverContainer) {\n this.coverContainer.style.paddingTop = `calc(56.25% - ${raiseBy}px)`\n }\n }\n\n unlockItemCardHeight () {\n if (this.itemTileElement) {\n this.itemTileElement.style.maxHeight = 'auto'\n this.itemTileElement.style.minHeight = 'auto'\n }\n }\n\n render () {\n return (\n 
\n )\n } else {\n let videoElem = (\n \n
\n )\n\n if (video && trackVideo) {\n renderedContent = (\n \n {this.renderVideo()}\n {videoListMobile}\n
\n )\n }\n}\n\nVideoPlayer.defaultProps = {\n asyncFacebook: false,\n introVideo: false,\n noAutoplayOption: false,\n useExternal: true,\n userLoggedIn: false\n}\n\nVideoPlayer.propTypes = {\n autoplay: PropTypes.bool,\n asyncFacebook: PropTypes.bool,\n noAutoplayOption: PropTypes.bool,\n introVideo: PropTypes.bool,\n offerId: PropTypes.number,\n origin: PropTypes.object,\n originType: PropTypes.string,\n poster: PropTypes.string,\n planId: PropTypes.number,\n planEntryId: PropTypes.number,\n planSubscriptionId: PropTypes.number,\n playlistPos: PropTypes.number,\n resolution: PropTypes.number,\n sourceId: PropTypes.number,\n sourceType: PropTypes.string,\n src: PropTypes.string,\n trackVideo: PropTypes.bool,\n type: PropTypes.string,\n useExternal: PropTypes.bool,\n userLoggedIn: PropTypes.bool,\n video: PropTypes.object,\n videoSession: PropTypes.string\n}\n\nexport default VideoPlayer\n","import React from 'react'\nimport VideosList from './VideosList'\nimport PlanEntryListHeader from '../planEntry/PlanEntryListHeader'\nimport PropTypes from 'prop-types'\n\nconst VideosListContent = props => {\n let videoListProps = {\n entries: props.entryListOrigin.entries,\n playlistPos: props.playlistPos,\n playlistUUID: props.entryListOrigin.uuid,\n showPlanTitle: props.showPlanTitle,\n type: props.type\n }\n return (\n \n
\n )\n}\n\nVideosListContent.propTypes = {\n entryListOrigin: PropTypes.object,\n playlistPos: PropTypes.number,\n showPlanTitle: PropTypes.bool,\n type: PropTypes.string\n}\n\nexport default VideosListContent\n","import React from 'react'\nimport classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport FavoriteButton from '../favoriteButton/FavoritePlusButton'\nimport EntriesList from '../../models/EntriesList'\n\nclass PlanEntryListHeader extends React.Component {\n constructor (props) {\n super(props)\n\n this.origin =\n this.props.entryListOrigin instanceof EntriesList\n ? this.props.entryListOrigin\n : new EntriesList(this.props.entryListOrigin)\n\n this.origin.type = this.props.type\n this.origin.following = this.userIsFollowing()\n\n if (this.props.type === 'series') {\n this.origin.productSubscriptionId = this.props.planSubscriptionId\n }\n\n this.state = {\n userFollowingOrigin: this.origin.following\n }\n this.toggleFavorites = this.toggleFavorites.bind(this)\n }\n\n userIsFollowing () {\n return (\n this.props.entryListOrigin.following || !!this.props.planSubscriptionId\n )\n }\n\n toggleFavorites () {\n this.origin.toggleFavorites().then(res => {\n this.origin.following = res.following\n if (res.subscriptionId) {\n this.origin.productSubscriptionId = res.subscriptionId\n }\n this.setState({\n userFollowingOrigin: res.following\n })\n })\n }\n\n renderBackgroundImage () {\n if (this.props.type === 'playlist') {\n let secondImage\n if (this.origin.entries.length > 1) {\n secondImage = (\n \n
\n \n 
\n
\n )\n }\n\n let backgroundImageContainerClass = classNames(\n 'playlist-background-image',\n {\n full: this.origin.entries.length === 1\n }\n )\n return (\n \n
\n )\n } else if (this.props.type === 'series') {\n return (\n \n 
\n
\n {secondImage}\n \n 
\n
\n )\n }\n }\n\n renderFavoritesButton () {\n if (this.props.favoritable) {\n return (\n \n
\n )\n }\n }\n\n render () {\n let headerClass = classNames('entry-list-header', {\n 'white-background': this.props.type === 'series'\n })\n\n return (\n \n {this.renderBackgroundImage()}\n
\n )\n }\n}\n\nPlanEntryListHeader.defaultProps = {\n favoritable: false\n}\n\nPlanEntryListHeader.propTypes = {\n background: PropTypes.string,\n coachName: PropTypes.string,\n entryListOrigin: PropTypes.object,\n favoritable: PropTypes.bool,\n planSubscriptionId: PropTypes.number,\n title: PropTypes.string,\n type: PropTypes.string\n}\n\nexport default PlanEntryListHeader\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\nimport { userAuthoredPlaylists } from '../../redux/selectors/playlists'\nimport { createNewPlaylistEntry } from '../../redux/actions/playlistEntries'\nimport { getPlaylistEntries } from '../../redux/selectors/playlistEntries'\nimport { currentUser } from '../../redux/selectors/user'\nimport CreateNewPlaylistModal from '../playlist/modals/CreateNewPlaylistModal'\nimport AddToPlaylistModal from '../playlist/modals/AddToPlaylistModal'\nimport {\n featurePlanEntry,\n unfeaturePlanEntry\n} from '../../redux/actions/planEntries'\nimport { isPlanEntryFeatured } from '../../redux/selectors/planEntries'\nimport Favoritable from './Favoritable'\nimport NestedHoverMenuPlusIcon from './NestedMenuPlusIcon'\n\nclass FavoritePlusButton extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n playlistSelectModalOpen: false,\n newPlaylistModalOpen: false\n }\n }\n\n render () {\n return (\n {this.props.type}
\n\n
\n {this.props.title}
\n{this.props.coachName}
\n\n {this.props.entryListOrigin.entries.length} Classes\n
\n {this.renderFavoritesButton()}\n\n {\n this.setState({ newPlaylistModalOpen: false })\n }}\n planEntryId={this.props.planEntry.id}\n />\n {\n this.setState({ playlistSelectModalOpen: false })\n }}\n onAdd={playlist => {\n this.props.createNewPlaylistEntry(\n playlist.uuid,\n this.props.planEntry.getId()\n )\n this.setState({ playlistSelectModalOpen: false })\n }}\n />\n
\n )\n }}\n 
\n )\n }\n return {image}
\n }\n\n const renderImage = () => {\n if (props.item.type !== 'playlist') {\n let planEntryMeta\n if (props.item.type === 'class' && props.includeMetaInfo) {\n planEntryMeta = (\n \n
\n )\n }\n\n let playIcon\n if (props.item.type === 'class') {\n playIcon = \n {difficultyIcon()}\n {props.item.meta.difficulty}\n
\n \n {props.item.meta.humanDuration}\n
\n \n 
\n {playIcon}\n {planEntryMeta}\n
\n )\n } else {\n return (\n \n
\n )\n }\n }\n\n const difficultyIcon = () => {\n switch (props.item.meta.difficulty) {\n case 'introductory':\n return {renderPlaylistImage()}
\n \n \n
\n ))\n }\n\n const loadMoreTiles = () => {\n if (!this.props.isLoading) {\n this.props.onLoadMore()\n }\n }\n\n let seeMoreButton\n\n /**\n * See More button will appear when grid is not autopaginating and either has more entries\n * or it has not been paginated but the number of entries that are already loaded or\n * is more than or equal to the number showing but less than the total number of items. This is because\n * we initially hide some already loaded entries to show a smaller grid.\n */\n if (\n !this.state.autopaginate &&\n ((!this.state.paginated &&\n this.props.itemsLength <= this.props.totalItems &&\n this.props.itemsLength >= this.props.numInitialShow) ||\n this.props.hasMore)\n ) {\n seeMoreButton = (\n \n {\n e.preventDefault()\n if (this.state.paginated) {\n loadMoreTiles()\n } else {\n this.setState({ paginated: true })\n }\n }}\n >\n {this.props.seeMoreBtnLabel}\n \n
\n )\n }\n\n return (\n \n {this.props.renderItemTiles()}\n {loadingCards}\n
\n {seeMoreButton}\n \n \n )\n }\n}\n\nItemTileGrid.defaultProps = {\n scrollThreshold: 500,\n autopaginate: true,\n tilesPerRow: {\n 768: 1,\n 992: 2,\n 1200: 3\n }\n}\n\nItemTileGrid.propTypes = {\n additionalClassNames: PropTypes.array,\n autopaginate: PropTypes.bool,\n hasMore: PropTypes.bool,\n layout: PropTypes.string,\n onLoadMore: PropTypes.func,\n isLoading: PropTypes.bool,\n renderItemTiles: PropTypes.func,\n scrollThreshold: PropTypes.number,\n seeMoreBtnLabel: PropTypes.string,\n tilesPerRow: PropTypes.object,\n numInitialShow: PropTypes.number,\n totalItems: PropTypes.number,\n itemsLength: PropTypes.number\n}\n\nexport default ItemTileGrid\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from 'react'\nimport HelpPopup from '../helpPopup/HelpPopup'\n\nimport VideoIcon from '../../../assets/codicons/play.svg'\nimport ProfileIcon from '../../../assets/codicons/profile.svg'\nimport FlameIcon from '../../../assets/codicons/flame.svg'\n\nimport IntroductoryIcon from '../../../assets/codicons/introductory.svg'\nimport BeginnerIcon from '../../../assets/codicons/beginner.svg'\nimport ModerateIcon from '../../../assets/codicons/moderate.svg'\nimport IntermediateIcon from '../../../assets/codicons/intermediate.svg'\nimport AdvancedIcon from '../../../assets/codicons/advanced.svg'\n\nimport Measure from 'react-measure'\nimport numeral from 'numeral'\nimport PropTypes from 'prop-types'\n\nclass ProductInformation extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n flameHovered: false\n }\n\n this.initialCheck = true\n this.renderBestSeller = this.renderBestSeller.bind(this)\n this.renderDifficultyIcon = this.renderDifficultyIcon.bind(this)\n }\n\n renderBestSeller() {\n if (this.props.memberCount || this.props.memberCount === 0) {\n let popupTrigger = (\n \n \n
\n )\n } else {\n return (\n \n {\n this.setState({ flameHovered: true })\n }}\n offHover={() => {\n this.setState({ flameHovered: false })\n }}\n >\n \n Most Popular Series\n \n
\n \n
\n )\n }\n }\n }\n\n renderDifficultyIcon() {\n if (this.props.difficultyLevel === 'introductory') {\n return \n
\n )\n }\n }\n\n renderWorkoutCount() {\n if (this.props.workoutCount) {\n return (\n {this.renderDifficultyIcon()}
\n {this.props.difficultyLevel}
\n {mobileProductDifficulty}
\n \n \n
\n )\n }\n }\n\n render() {\n let productCoaches\n\n if (this.props.includeInstructorName) {\n productCoaches = this.props.product.coachLabel()\n }\n\n let favoriteButton\n if (this.props.renderItemFavoriteButton) {\n favoriteButton = this.props.renderItemFavoriteButton()\n }\n\n let zIdx = this.state.flameHovered ? 20000 : 10\n\n return (\n \n
\n \n \n
\n )\n }\n}\n\nProductInformation.defaultProps = {\n includeInstructorName: true\n}\n\nProductInformation.propTypes = {\n coaches: PropTypes.array,\n difficultyLevel: PropTypes.string,\n memberCount: PropTypes.number,\n workoutCount: PropTypes.number,\n onTitleHeightChange: PropTypes.func,\n renderItemFavoriteButton: PropTypes.func,\n includeInstructorName: PropTypes.bool,\n itemUrl: PropTypes.string,\n product: PropTypes.object,\n title: PropTypes.string,\n parentLabel: PropTypes.node\n}\n\nexport default ProductInformation\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import LazyLoad from 'react-lazyload'\nimport React from 'react'\nimport PropTypes from 'prop-types'\n\nimport Play80Icon from '../../../assets/codicons/play-80'\nimport Play150Icon from '../../../assets/codicons/play-150'\n\nconst ItemTileCover = props => {\n let renderProductCategory = () => {\n if (props.primaryCategory && props.primaryCategory.title !== '') {\n return (\n \n {\n if (this.props.onTitleHeightChange) {\n this.titleHeightChanged(contentDim)\n }\n }}\n >\n {({ measureRef }) => (\n
\n \n
\n )}\n \n \n \n
\n {this.props.parentLabel}\n \n \n {this.props.title}\n \n
\n\n {favoriteButton}\n
\n \n {this.props.coaches?.map((coach, idx) => {\n let coachName = `${coach.firstName} ${coach.lastName}`\n if (\n this.props.coaches.length > 1 &&\n idx === this.props.coaches.length - 1\n ) {\n coachName = ' & '.concat(coachName)\n }\n if (\n this.props.coaches.length > 0 &&\n idx < this.props.coaches.length - 2\n ) {\n coachName += ', '\n }\n if (coach.coachInfo) {\n return (\n \n {coachName}\n \n )\n } else {\n return {coachName}\n }\n })}\n
\n \n {this.renderWorkoutCount()}\n {this.renderDifficultyLabel()}\n {this.renderBestSeller()}\n
\n \n {props.primaryCategory.title}\n
\n )\n } else {\n return null\n }\n }\n\n let renderBundleTag = () => {\n if (props.type === 'Bundle') {\n return Bundle
\n }\n }\n\n let playIcon\n\n if (props.includePlayIcon) {\n playIcon = (\n \n
\n \n
\n \n
\n \n {renderProductCategory()}\n {renderBundleTag()}\n
\n {playIcon}\n {completedIcon}\n {props.metaDataComp}\n \n )\n}\n\nItemTileCover.defaultProps = {\n includePlayIcon: false\n}\n\nItemTileCover.propTypes = {\n completedIcon: PropTypes.func,\n coverPhoto: PropTypes.string,\n primaryCategory: PropTypes.object,\n itemUrl: PropTypes.string,\n includePlayIcon: PropTypes.bool,\n type: PropTypes.string,\n metaDataComp: PropTypes.node\n}\n\nexport default ItemTileCover\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from 'react'\nimport PlaylistSeriesIcon from '../../../assets/codicons/video-icons/playlist-series'\nimport PropTypes from 'prop-types'\n\nconst VideoListIcon = props => {\n return (\n {props.type}
\n \n
\n \n
\n )\n }\n}\n\nUserPlaylists.propTypes = {\n playlists: PropTypes.array,\n addDuplicatedPlaylist: PropTypes.func,\n uuid: PropTypes.string,\n playlistTab: PropTypes.number,\n displayedPlaylist: PropTypes.object,\n currentUser: PropTypes.object,\n userLoaded: PropTypes.bool,\n setDisplayedPlaylist: PropTypes.func,\n playlistDeleted: PropTypes.func,\n clearPlaylistEntries: PropTypes.func,\n reorderUserPlaylists: PropTypes.func\n}\n\nconst mapStateToProps = state => {\n return {\n playlists: userFollowedPlaylists(state),\n displayedPlaylist: getDisplayedPlaylist(state),\n currentUser: currentUser(state),\n userLoaded: state.users.loaded\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n setDisplayedPlaylist: playlist => {\n dispatch(setDisplayedPlaylist(playlist))\n },\n playlistDeleted: uuid => {\n dispatch(playlistDeleted(uuid))\n },\n addDuplicatedPlaylist: playlist => {\n dispatch(finishCreateNewPlaylist(playlist))\n },\n clearPlaylistEntries: () => {\n dispatch(clearPlaylistEntries())\n },\n reorderUserPlaylists: (order, sortable, e) => {\n dispatch(reorderUserPlaylists(order))\n }\n }\n}\n\nexport default withRedux(\n withUser(connect(mapStateToProps, mapDispatchToProps)(UserPlaylists))\n)\n","import React from 'react'\nimport { connect } from 'react-redux'\nimport pluralize from 'pluralize'\nimport PropTypes from 'prop-types'\nimport { currentUser } from '../../redux/selectors/user'\nimport classNames from 'classnames'\nimport './PlaylistRow.scss'\n\nconst PlaylistRow = ({ playlist, ...props }) => {\n const getPlaylistImage = () => {\n return (\n \n \n displayedPlaylist && playlist.uuid === displayedPlaylist.uuid\n }\n onPlaylistAdded={this.handleOnPlaylistAdded}\n loading={!userLoaded}\n onReordered={reorderUserPlaylists}\n />\n
\n {playlistDisplay}
\n \n \n
\n )\n }\n\n let playlistImage\n if (props.includeImage) {\n playlistImage = (\n {getPlaylistImage()}
\n )\n }\n\n let playlistAuthor\n if (props.currentUser.username !== playlist.author.username) {\n playlistAuthor = (\n \n By {playlist.author.firstName} {playlist.author.lastName}{' '}\n \n )\n }\n\n const rowItemClass = classNames('PlaylistRow', {\n 'PlaylistRow--active': props.active,\n 'PlaylistRow--marked': props.marked\n })\n\n return (\n \n
\n \n \n )\n}\n\nPlaylistRow.defaultProps = {\n includeImage: true\n}\n\nPlaylistRow.propTypes = {\n active: PropTypes.bool,\n marked: PropTypes.bool,\n includeImage: PropTypes.bool,\n playlist: PropTypes.object,\n currentUser: PropTypes.object,\n onSelect: PropTypes.func\n}\n\nconst mapStateToProps = state => {\n return {\n currentUser: currentUser(state)\n }\n}\n\nexport default connect(mapStateToProps)(PlaylistRow)\n","import React from 'react'\nimport './PlanEntryListLoading.scss'\n\nconst PlanEntryListLoading = () => {\n return (\n {playlist.title}
\n \n {playlistAuthor}\n \n {`${playlist.entryCount} ${pluralize(\n 'Class',\n playlist.entryCount\n )}`}\n \n \n \n \n
\n )\n}\n\nexport default PlanEntryListLoading\n","import React from 'react'\nimport PlanEntryListRow from './PlanEntryListRow'\nimport PropTypes from 'prop-types'\nimport ReactSortable from 'react-sortablejs'\nimport './PlanEntriesListRows.scss'\n\nconst PlanEntriesListRows = ({\n entries,\n favoritable,\n featurable,\n sortable,\n onDeleted,\n removable,\n locked,\n includeDates,\n onSortEnd,\n entryLinkSuffix\n}) => {\n const planEntryItems = entries.map(entry => (\n {planEntryRows}
\n}\n\nPlanEntriesListRows.propTypes = {\n entries: PropTypes.array,\n favoritable: PropTypes.bool,\n featurable: PropTypes.bool,\n sortable: PropTypes.bool,\n onDeleted: PropTypes.func,\n removable: PropTypes.bool,\n locked: PropTypes.bool,\n includeDates: PropTypes.bool,\n onSortEnd: PropTypes.func,\n entryLinkSuffix: PropTypes.string\n}\n\nexport default PlanEntriesListRows\n","import React from 'react'\nimport moment from 'moment'\nimport PlanEntryOptions from './PlanEntryOptions'\nimport Favoritable from '../favoriteButton/Favoritable'\nimport PlusIcon from '../favoriteButton/PlusIcon'\nimport HelpPopup from '../helpPopup/HelpPopup'\nimport PropTypes from 'prop-types'\nimport LockIcon from '../../../assets/codicons/lock'\nimport './PlanEntryListRow.scss'\n\nclass PlanEntryListRow extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n fadeOut: false\n }\n\n this.fadeRowOut = this.fadeRowOut.bind(this)\n this.handleTransitionEnd = this.handleTransitionEnd.bind(this)\n\n this.planEntryClassName = 'PlanEntryListRow'\n }\n\n fadeRowOut() {\n this.setState({ fadeOut: true })\n }\n\n handleTransitionEnd(e) {\n e.stopPropagation()\n\n if (\n e.currentTarget === e.target &&\n this.state.fadeOut &&\n e.propertyName === 'opacity'\n ) {\n if (this.toggleFavorite) {\n this.toggleFavorite()\n this.toggleFavorite = null\n }\n this.props.onDeleted()\n }\n }\n\n formatDateAddedLabel(dateAdded) {\n const createdAt = moment(dateAdded)\n const now = moment()\n\n if (now.diff(createdAt, 'days') > 14) {\n return createdAt.format('MMM D, YYYY')\n } else {\n return createdAt.fromNow()\n }\n }\n\n render() {\n const {\n planEntry,\n dateAdded,\n favoritable,\n featurable,\n sortable,\n locked,\n includeDates,\n entryId\n } = this.props\n\n const plan = planEntry.planProduct\n\n let handle\n if (sortable) {\n handle = \n }\n\n let favoriteButton\n if (favoritable) {\n favoriteButton = (\n \n \n Add To Playlist \n
\n )\n case 'SHARE':\n return (\n \n
\n )\n case 'DUPLICATE':\n return (\n \n
\n )\n }\n }\n\n render () {\n const view = this.getDisplayedView()\n\n return (\n - \n
- \n \n Go to instructor\n \n \n
- \n \n Go to series\n \n \n
\n
\n )\n}\n\nPrivateContent.propTypes = {\n caption: PropTypes.string,\n grey: PropTypes.bool\n}\n\nexport default PrivateContent\n","import React from 'react'\nimport pluralize from 'pluralize'\nimport PlaylistEdit from './PlaylistEdit'\nimport './PlaylistHeader.scss'\nimport PropTypes from 'prop-types'\n\nconst PlaylistHeader = ({\n playlist,\n userIsAdmin,\n userIsAuthor,\n onPlaylistDelete,\n toggleFeatured,\n toggleFollowing,\n onPlaylistUpdate,\n signedIn,\n onDuplicated,\n deleting\n}) => {\n const numFollowers = playlist.followerCount - 1 // Exclude author\n\n return (\n \n
\n \n
\n {caption}
\n \n \n
\n \n \n
\n \n \n
\n \n
\n ) : (\n \n
\n\n {playlist.htmlDescriptionAllowed ? (\n Playlist
\n\n
\n {playlist.title}
\n\n
\n \n {playlist.description}\n
\n )}\n \n
\n \n
\n \n Curated by {playlist.author.firstName}{' '}\n {playlist.author.lastName}\n
\n \n \n {numFollowers} {pluralize('Follower', numFollowers)}\n
\n \n \n
\n \n \n {playlist.entryCount}{' '}\n {pluralize('Class', playlist.entryCount)}\n \n
\n \n {playlist.humanDuration}
\n \n
\n \n )\n}\n\nPlaylistHeader.propTypes = {\n playlist: PropTypes.object,\n signedIn: PropTypes.bool,\n userIsAdmin: PropTypes.bool,\n userIsAuthor: PropTypes.bool,\n onPlaylistDelete: PropTypes.func,\n toggleFeatured: PropTypes.func,\n onPlaylistUpdate: PropTypes.func,\n toggleFollowing: PropTypes.func,\n onDuplicated: PropTypes.func,\n deleting: PropTypes.bool\n}\n\nexport default PlaylistHeader\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport FilterListItem from './FilterListItem'\nimport './FilterList.scss'\nimport FadeInFullscreen from '../FadeInFullscreen'\nimport { Transition } from 'react-transition-group'\n\n// FilterOptions is an array of objects with the following key/values\n/* {\n label: String,\n content: Node\n} */\n\nconst FULLSCREEN_TRANSITION_DURATION = 200\n\nclass FilterList extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n activeItems: []\n }\n\n this.itemIsActive = this.itemIsActive.bind(this)\n this.deactivateItem = this.deactivateItem.bind(this)\n this.activateItem = this.activateItem.bind(this)\n this.toggleItem = this.toggleItem.bind(this)\n this.startFullScreenAnimation = this.startFullScreenAnimation.bind(this)\n this.markThatUserHasChangedFilters = this.markThatUserHasChangedFilters.bind(\n this\n )\n }\n\n componentDidUpdate (prevProps) {\n if (this.props.isOpen !== prevProps.isOpen) {\n if (this.props.isOpen) {\n // Reset everytime filter list is just opened\n this.setState({ userHasChangedFilters: false })\n } else {\n this.setState({ activeItems: [] })\n }\n }\n }\n\n markThatUserHasChangedFilters () {\n this.setState({ userHasChangedFilters: true })\n }\n\n itemIsActive (idx) {\n return this.state.activeItems.includes(idx)\n }\n\n deactivateItem (idx) {\n const activeItems = this.state.activeItems.filter(item => item !== idx)\n this.setState({ activeItems })\n }\n\n activateItem (idx) {\n let activeItems = this.state.activeItems\n activeItems.push(idx)\n this.setState({ activeItems })\n }\n\n toggleItem (idx) {\n if (this.itemIsActive(idx)) {\n this.deactivateItem(idx)\n } else {\n this.activateItem(idx)\n }\n }\n\n startFullScreenAnimation (option) {\n this.setState({\n fullscreenContentToShow: option,\n shouldDisplayFullscreenFilters: true\n })\n }\n\n render () {\n let filterListContent\n let fullscreenDisplay\n\n if (!this.state.shouldDisplayFullscreenFilters) {\n let resetButton\n if (this.props.onReset) {\n resetButton = (\n \n
\n )\n }}\n \n )\n } else {\n fullscreenDisplay = (\n \n {this.props.filterListOptions.map((option, idx) => (\n
\n {resetButton}\n \n {\n if (option.isFullscreen) {\n this.startFullScreenAnimation(option)\n } else {\n this.toggleItem(idx)\n }\n }}\n onFilterSelected={this.markThatUserHasChangedFilters}\n isExpanded={this.itemIsActive(idx)}\n />\n
\n ))}\n \n {\n this.setState({ shouldDisplayFullscreenFilters: false })\n }}\n />\n {this.state.fullscreenContentToShow\n ? this.state.fullscreenContentToShow.label\n : null}\n
\n {this.state.fullscreenContentToShow\n ? this.state.fullscreenContentToShow.content(\n this.markThatUserHasChangedFilters\n )\n : null}\n \n )\n }}\n \n )\n }\n\n return (\n \n {\n this.props.onHide(this.state.userHasChangedFilters)\n }}\n >\n ×\n
\n {filterListContent}\n {fullscreenDisplay}\n \n {content(onFilterSelected)}
\n )\n }\n\n let labels = ''\n if (filteredLabels.length > 0) {\n filteredLabels.forEach((item, idx) => {\n labels += item\n if (idx !== filteredLabels.length - 1) {\n labels += ', '\n }\n })\n } else if (isFullscreen) {\n labels = 'All'\n }\n\n return (\n \n
\n )\n}\n\nFilterListItem.defaultProps = {\n filteredLabels: [],\n onFilterSelected: () => {}\n}\n\nFilterListItem.propTypes = {\n onSelect: PropTypes.func.isRequired,\n content: PropTypes.func,\n label: PropTypes.string,\n isExpanded: PropTypes.bool,\n onFilterSelected: PropTypes.func,\n filteredLabels: PropTypes.array\n}\n\nexport default FilterListItem\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\nimport FilterList from '../../filterList/FilterList'\nimport FilterRangeSlider from '../../filtersRow/FilterRangeSlider'\nimport FilterSquares from '../../filtersRow/FilterSquares'\nimport FilterRowDropdownItem from '../../filtersRow/FilterRowDropdownItem'\nimport FilterSidebarLayout from '../../filtersRow/FilterSidebarLayout'\nimport {\n addFilter,\n removeFilter,\n clearFilter,\n clearAllFilters\n} from '../../../redux/actions/planEntries'\nimport { isCategoryAlreadyFiltered } from './classFinderHelperMethods'\nimport { class_series_finder_filter_event } from 'gtm/pushEvents'\n\nclass ClassFinderMobileFilters extends React.Component {\n constructor(props) {\n super(props)\n\n this.instructorAlreadyFiltered = this.instructorAlreadyFiltered.bind(this)\n this.intensityAlreadyFiltered = this.intensityAlreadyFiltered.bind(this)\n this.categoryAlreadyFiltered = this.categoryAlreadyFiltered.bind(this)\n this.difficultyAlreadyFiltered = this.difficultyAlreadyFiltered.bind(this)\n this.noInstructorsFiltered = this.noInstructorsFiltered.bind(this)\n }\n\n noInstructorsFiltered() {\n return this.props.filtered.instructors.length === 0\n }\n\n instructorAlreadyFiltered(instructor) {\n return this.props.filtered.instructors\n .map((instructor) => instructor.slug)\n .includes(instructor.slug)\n }\n\n intensityAlreadyFiltered(intensityLevel) {\n return this.props.filtered.intensities\n .map((intensity) => intensity.level)\n .includes(intensityLevel)\n }\n\n difficultyAlreadyFiltered(difficulty) {\n return this.props.filtered.difficulties.includes(difficulty)\n }\n\n categoryAlreadyFiltered(root, { isRoot, subcategory }) {\n return isCategoryAlreadyFiltered(\n this.props.filtered.styles,\n root,\n isRoot,\n subcategory\n )\n }\n\n buildCategoryFilters() {\n const filterOptions = this.props.filterOptions\n let categoryFilters = []\n\n for (const rootCategory in filterOptions.styles) {\n const categoryObj = filterOptions.styles[rootCategory]\n\n const filterObj = {\n label: categoryObj.title,\n value: categoryObj,\n isAllSelected: this.categoryAlreadyFiltered(categoryObj, {\n isRoot: true\n }),\n subFilters: categoryObj.subcategories.map((subcategory) => {\n return {\n label: subcategory.title,\n value: subcategory,\n active: this.categoryAlreadyFiltered(categoryObj, {\n isRoot: false,\n subcategory\n })\n }\n })\n }\n categoryFilters.push(filterObj)\n }\n\n return categoryFilters\n }\n\n render() {\n const {\n filterOptions,\n sliderProps,\n filteredLabels,\n filtered,\n filterByFields,\n ...rest\n } = this.props\n\n const durationFilter = {\n label: 'duration',\n filteredLabels: filteredLabels.duration.map((duration) => duration.text),\n content: (touchList) => {\n return (\n \n
\n {itemContent}\n {label}
\n {labels}
\n \n
\n \n {this.displayPlaylistImage()}\n {\n this.setState({ openPhotoUploader: true })\n }}\n >\n
\n \n 
\n
\n )\n }\n }\n\n render () {\n return (\n \n {\n this.setState({ remoteCoverPhotoUrl })\n }}\n />\n
\n \n
\n Name
\nDescription
\n\n \n Private Playlist{' '}\n
\n On}\n off={
\n\n \n Private Playlist{' '}\n ?}\n width={520}\n topOffset={-20}\n >\n This will prevent other members from discovering and using\n your playlist\n \n
\n Off
}\n size='xs'\n offstyle='danger'\n value={this.state.private}\n />\nUpdate Image
\n\n {this.renderImageUploader()}\n
\n \n
\n \n ({\n label: category.title,\n filterValue: category.slug\n }))}\n filterContext='Styles'\n onSelect={selectedVal => {\n props.uniButtonSelect(selectedVal)\n }}\n />\n {filterPillsSection}\n
\n \n {\n this.setState({ modalOpen: true })\n }}\n >\n {this.props.currentlySelectedOption\n ? this.props.currentlySelectedOption\n : `All ${this.props.filterContext}`}\n \n
\n \n \n
\n )\n}\n\nCategoryBanner.propTypes = {\n category: PropTypes.object\n}\n\nexport default CategoryBanner\n","import React from 'react'\nimport ProductCarousel from '../../../productsComponents/productCarousel/ProductCarousel'\nimport PropTypes from 'prop-types'\nimport { getCategories } from '../../../../redux/selectors/planCategories'\nimport { connect } from 'react-redux'\n\nconst NUM_CATEGORY_CAROUSELS_TO_SHOW = 5\n\nconst ExploreCarousels = props => {\n const visibility = props.loaded ? 'visible' : 'hidden'\n\n return (\n \n
\n \n
\n {props.category.title}
\n\n {props.category.description}\n
\n \n {props.categories\n .slice(0, NUM_CATEGORY_CAROUSELS_TO_SHOW)\n .map((category, index) => (\n
\n )\n}\n\nExploreCarousels.propTypes = {\n categories: PropTypes.array,\n loaded: PropTypes.bool\n}\n\nconst mapStateToProps = state => {\n return {\n categories: getCategories(state)\n }\n}\n\nexport default connect(mapStateToProps)(ExploreCarousels)\n","import { createSelector } from 'reselect'\nimport { createSelector as ormCreateSelector } from 'redux-orm'\nimport orm from '../../models/models'\n\nexport const favorites = state =>\n state.orm.Favorite ? state.orm.Favorite.items : {}\n\nexport const getFavorites = createSelector(\n state => state.orm,\n state => state.ui.favorites.orderInfo,\n favorites,\n ormCreateSelector(orm, (session, order) => {\n let favorites = session.Favorite.all()\n\n if (\n !order ||\n Object.keys(order).length === 0 ||\n order.direction === 'DEFAULT'\n ) {\n favorites = favorites.orderBy('orderby')\n } else {\n // This code is here to maintain order of entries when they are sorted and a user undos a removal\n let orderByFns = []\n switch (order.order) {\n case 'title':\n orderByFns.push(favorite => {\n const planEntry = session.PlanEntry.withId(favorite.planEntry)\n return planEntry.title\n })\n break\n case 'coach':\n const orderFirstNameFn = favorite => {\n const planEntry = session.PlanEntry.withId(favorite.planEntry)\n const firstCoach = planEntry.planProduct.coaches[0]\n return firstCoach.firstName\n }\n\n const orderLastNameFn = favorite => {\n const planEntry = session.PlanEntry.withId(favorite.planEntry)\n const firstCoach = planEntry.planProduct.coaches[0]\n return firstCoach.lastName\n }\n\n orderByFns = [orderFirstNameFn, orderLastNameFn]\n break\n case 'plan':\n orderByFns.push(favorite => {\n const planEntry = session.PlanEntry.withId(favorite.planEntry)\n return planEntry.planProduct.title\n })\n break\n case 'duration':\n orderByFns.push(favorite => {\n const planEntry = session.PlanEntry.withId(favorite.planEntry)\n return planEntry.durationInMs\n })\n break\n case 'date':\n orderByFns.push(favorite => {\n return favorite.createdAt\n })\n break\n }\n\n let isAscendingOrder = order.direction === 'ASC'\n\n if (order.order === 'date') {\n isAscendingOrder = !isAscendingOrder\n }\n\n const direction = isAscendingOrder ? 'asc' : 'desc'\n\n favorites = favorites.orderBy(orderByFns, direction)\n }\n return favorites\n })\n)\n\nexport const isFavorite = (state, planEntryId) => {\n const selector = createSelector(\n state => state.orm,\n favorites,\n ormCreateSelector(orm, session => {\n return session.Favorite.filter(\n favorite => favorite.planEntry === planEntryId\n ).exists()\n })\n )\n return selector(state)\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport CarouselCard from './CarouselCard'\nimport './AloCarousel.scss'\n\nclass AloCarousel extends React.Component {\n constructor (props) {\n super(props)\n\n this.totalNumberOfItemsPerPage = props.numberPerItemOnPage.reduce(\n (total, num) => total + num\n )\n this.numberOfMarginSpaces = this.totalNumberOfItemsPerPage - 1\n this.heightRatio = this.getHeightSizeRatio()\n this.indexOfMostLeftCard = 0\n this.currCarouselPos = 0\n\n this.state = {\n disablePrev: true,\n disableNext: false,\n draggable: false,\n mouseDownPos: 0,\n disableCarousel: false\n }\n\n this.carouselContainer = React.createRef()\n this.carousel = React.createRef()\n\n this.getHeightSizeRatio = this.getHeightSizeRatio.bind(this)\n this.handleMouseDown = this.handleMouseDown.bind(this)\n this.handleMouseUp = this.handleMouseUp.bind(this)\n this.handleMouseMove = this.handleMouseMove.bind(this)\n this.resetCarousel = this.resetCarousel.bind(this)\n this.renderNavButton = this.renderNavButton.bind(this)\n this.shiftCardsToRight = this.shiftCardsToRight.bind(this)\n this.shiftCardsToLeft = this.shiftCardsToLeft.bind(this)\n this.enableLinks = this.enableLinks.bind(this)\n this.disableLinks = this.disableLinks.bind(this)\n this.handleTransitionEnd = this.handleTransitionEnd.bind(this)\n }\n\n componentDidMount () {\n this.carouselContainer.current.style.paddingLeft = `${\n this.props.leftPadding\n }px`\n\n window.onresize = () => {\n const windowWidth = window.innerWidth - this.props.leftPadding\n const height =\n this.heightRatio *\n (windowWidth - this.numberOfMarginSpaces * this.props.margin) +\n this.props.extraItemHeight\n\n this.totalCarouselWidth = 0\n this.cards = this.carousel.current.querySelectorAll('.CarouselCard')\n this.cards.forEach(card => {\n const cardRatioIdx = card.getAttribute('data-ratio-idx')\n const cardRatio = this.props.sizeRatioOfItems[cardRatioIdx]\n const cardWidth = cardRatio * (height - this.props.extraItemHeight)\n card.style.width = `${cardWidth}px`\n this.totalCarouselWidth += cardWidth + this.props.margin\n })\n this.carousel.current.style.width = `${this.totalCarouselWidth}px`\n\n if (\n this.totalCarouselWidth < this.carouselContainer.current.clientWidth\n ) {\n this.setState({ disableCarousel: true })\n }\n }\n }\n\n handleMouseDown (e) {\n e.preventDefault()\n\n // 2 is mouse event code for right click\n if (e.button !== 2 && !this.state.disableCarousel) {\n this.setState({\n mouseDownPos: e.clientX,\n draggable: true\n })\n }\n }\n\n handleMouseMove (e) {\n e.preventDefault()\n if (this.state.draggable && !this.state.disableCarousel) {\n this.disableLinks()\n const distanceTravelled = e.clientX - this.state.mouseDownPos\n this.carousel.current.style.transform = `translateX(${distanceTravelled +\n this.currCarouselPos}px)`\n this.carousel.current.style.transitionDuration = '0s'\n\n const leftMostCard = this.cards[this.indexOfMostLeftCard]\n if (\n leftMostCard.getBoundingClientRect().left < this.props.leftPadding &&\n this.indexOfMostLeftCard < this.cards.length\n ) {\n this.indexOfMostLeftCard++\n } else if (\n this.indexOfMostLeftCard > 1 &&\n this.cards[this.indexOfMostLeftCard - 1].getBoundingClientRect().left >\n 0\n ) {\n this.indexOfMostLeftCard--\n }\n if (\n this.carousel.current.getBoundingClientRect().left +\n this.carousel.current.clientWidth <\n this.carouselContainer.current.clientWidth\n ) {\n this.setState({\n disableNext: true\n })\n } else {\n this.setState({\n disableNext: false\n })\n }\n }\n }\n\n handleMouseUp (e) {\n e.preventDefault()\n if (this.state.draggable && !this.state.disableCarousel) {\n const carousel = this.carousel.current\n const carouselContainer = this.carouselContainer.current\n const carouselLeftPos = carousel.getBoundingClientRect().left\n const carouselContainerLeft = carouselContainer.getBoundingClientRect()\n .left\n\n this.currCarouselPos += e.clientX - this.state.mouseDownPos\n\n const lastCard = this.cards[this.cards.length - 1]\n const lastCardRightPos =\n lastCard.getBoundingClientRect().left + lastCard.clientWidth\n\n let disablePrev\n let disableNext\n if (carouselLeftPos > carouselContainerLeft) {\n this.currCarouselPos = 0 // Reset Carousel\n this.indexOfMostLeftCard = 0\n this.resetCarousel()\n disableNext = false\n disablePrev = true\n } else if (\n lastCardRightPos < this.carouselContainer.current.clientWidth\n ) {\n const distanceToTravelRight =\n this.carouselContainer.current.clientWidth - lastCardRightPos\n this.currCarouselPos += distanceToTravelRight\n disablePrev = false\n disableNext = true\n this.resetCarousel(this.currCarouselPos)\n\n const carouselAnimationTime = 250\n setTimeout(() => {\n let newIndexOfMostLeftCard\n this.cards.forEach((card, idx) => {\n if (card.getBoundingClientRect().left > 0) {\n if (!newIndexOfMostLeftCard) {\n newIndexOfMostLeftCard = idx\n }\n }\n })\n this.indexOfMostLeftCard = newIndexOfMostLeftCard\n }, carouselAnimationTime)\n }\n\n this.setState({\n draggable: false,\n disablePrev,\n disableNext\n })\n\n setTimeout(this.enableLinks)\n }\n }\n\n disableLinks () {\n this.carousel.current.querySelectorAll('a').forEach(link => {\n link.onclick = e => {\n e.preventDefault()\n }\n })\n }\n\n enableLinks () {\n this.carousel.current.querySelectorAll('a').forEach(link => {\n link.onclick = () => {}\n })\n }\n\n resetCarousel (pos = 0) {\n const carousel = this.carousel.current\n carousel.style.transform = `translateX(${pos}px)`\n carousel.style.transitionDuration = '0.25s'\n }\n\n getHeightSizeRatio () {\n let ratio = 0\n this.props.numberPerItemOnPage.forEach((amountOfItem, idx) => {\n ratio += amountOfItem * this.props.sizeRatioOfItems[idx]\n })\n return 1 / ratio\n }\n\n shiftCarousel () {\n this.carousel.current.style.transform = `translateX(${\n this.currCarouselPos\n }px)`\n this.carousel.current.style.transitionDuration = '0.25s'\n }\n\n shiftCardsToRight () {\n if (!this.state.disableNext) {\n const cardToMove = this.cards[this.indexOfMostLeftCard + 1]\n const distanceToTranslate =\n cardToMove.getBoundingClientRect().left - this.props.leftPadding\n this.currCarouselPos -= distanceToTranslate\n this.setState({ disablePrev: false }, () => {\n this.indexOfMostLeftCard++\n this.shiftCarousel()\n })\n }\n }\n\n shiftCardsToLeft () {\n if (!this.state.disablePrev) {\n const cardToMove = this.cards[this.indexOfMostLeftCard - 1]\n const distanceToMove =\n this.props.leftPadding - cardToMove.getBoundingClientRect().left\n this.currCarouselPos += distanceToMove\n this.indexOfMostLeftCard--\n this.shiftCarousel()\n }\n }\n\n renderNavButton () {\n if (!this.state.disableCarousel) {\n return (\n \n \n {carouselItems}\n
\n {this.renderNavButton()}\n \n )\n }\n}\n\nAloCarousel.defaultProps = {\n leftPadding: 0\n}\n\nAloCarousel.propTypes = {\n leftPadding: PropTypes.number,\n margin: PropTypes.number,\n numberPerItemOnPage: PropTypes.array,\n sizeRatioOfItems: PropTypes.array,\n extraItemHeight: PropTypes.number,\n items: PropTypes.array\n}\n\nexport default AloCarousel\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport './CarouselCard.scss'\n\nconst CarouselCard = props => {\n return (\n {props.children}
\n \n )\n}\n\nCarouselCard.propTypes = {\n children: PropTypes.node,\n ratioIdx: PropTypes.number,\n margin: PropTypes.number\n}\nexport default CarouselCard\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport AccessedItemImage from './AccessedItemImage'\nimport './AccessedItemTile.scss'\n\nconst AccessedItemTile = props => {\n let productAuthors\n if (props.item.type === 'playlist') {\n productAuthors = (\n {props.item.authors.name}\n )\n } else {\n productAuthors = props.item.authors.map((coach, idx) => {\n let coachName = `${coach.firstName} ${coach.lastName}`\n if (\n props.item.authors.length > 1 &&\n idx === props.item.authors.length - 1\n ) {\n coachName = ' & '.concat(coachName)\n }\n if (\n props.item.authors.length > 0 &&\n idx < props.item.authors.length - 2\n ) {\n coachName += ', '\n }\n return (\n \n \n {coachName}\n \n \n )\n })\n }\n\n return (\n \n
\n )\n}\n\nAccessedItemTile.propTypes = {\n item: PropTypes.object\n}\n\nexport default AccessedItemTile\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport Favoritable from '../favoriteButton/Favoritable'\nimport './FavoriteDeleteUndo.scss'\n\nconst FavoriteDeleteUndo = ({ favorite, onAdded }) => {\n return (\n \n
\n \n {props.item.title}\n
\n \n {props.item.type} by{' '}\n {productAuthors}\n
\n \n
\n )\n }}\n \n You've removed {favorite.planEntry.title}\n {\n addToFavorites(onAdded, {\n orderby: favorite.orderby\n })\n }}\n >\n Undo\n \n
\n \n Completed:{' '}\n {moment(new Date(rest?.completedAt)).local().format('MM/DD/YYYY')}\n
\n ) : null}\n \n \n )\n }\n)\n\nClassCard.propTypes = {\n duration: PropTypes.string,\n id: PropTypes.number,\n plan: PropTypes.object,\n title: PropTypes.string.isRequired,\n videoThumbnail: PropTypes.string.isRequired,\n planEntryUrl: PropTypes.string.isRequired\n}\n\nexport default ClassCard\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport Text from 'ui/acro/typography/Text'\n\nconst HeaderText = styled(Text)(() =>\n css({\n fontWeight: 900,\n fontSize: ['1.5rem', '1.5rem', '2.5rem'],\n textTransform: 'uppercase',\n fontFamily: 'Arquitecta',\n lineHeight: '26px',\n letterSpacing: '0.07em'\n })\n)\nexport default HeaderText\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport Text from 'ui/acro/typography/Text'\n\nconst AltHeaderText = styled(Text)(() =>\n css({\n fontWeight: 400,\n fontSize: ['1.5rem', '1.5rem', '2rem'],\n whiteSpace: 'noWrap',\n fontFamily: 'Arquitecta',\n lineHeight: ['28.35px', '37.7px'],\n textTransform: 'uppercase',\n letterSpacing: '0.14rem'\n })\n)\nexport default AltHeaderText\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport Text from 'ui/acro/typography/Text'\n\nconst HeaderCTAText = styled(Text)(() =>\n css({\n display: 'flex',\n alignItems: 'start',\n fontFamily: 'Proxima-Nova',\n fontSize: ['14px', '16px'],\n fontWeight: '700',\n letterSpacing: 'normal',\n lineHeight: '105%',\n textTransform: 'capitalize',\n whiteSpace: 'nowrap',\n '> span': {\n borderBottom: '1px solid #000'\n }\n })\n)\nexport default HeaderCTAText\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport { HR } from 'ui/acro'\n\nconst SectionDivider = styled(HR)(() =>\n css({\n mx: ['16px', '16px', '16px', '0px'],\n mt: ['30px', '40px'],\n mb: ['20px', '40px']\n })\n)\nexport default SectionDivider\n","import styled from 'styled-components'\nimport { variant } from 'styled-system'\nimport { P } from 'ui/acro'\n\nconst CardTitle = styled(P)(\n {\n fontFamily: 'Proxima-Nova',\n fontSize: '1em',\n fontWeight: '700',\n letterSpacing: 'normal',\n lineHeight: '19.2px',\n color: 'black'\n },\n variant({\n variants: {\n primary: {\n letterSpacing: '2.5px',\n fontSize: ['16px', '16px', '24px', '24px'],\n textAlign: 'center',\n lineHeight: '28px',\n fontFamily: 'Arquitecta',\n fontWeight: '600',\n textTransform: 'uppercase'\n }\n }\n })\n)\n\nexport default CardTitle\n","import styled from 'styled-components'\nimport { variant } from 'styled-system'\nimport { P } from 'ui/acro'\n\nconst CardSubtitle = styled(P)(\n {\n fontFamily: 'Proxima-Nova',\n fontSize: '0.875em',\n fontWeight: '400',\n letterSpacing: 'normal',\n lineHeight: '16.1px',\n color: (props) => `${props.theme.colors.black}`,\n textTransform: 'capitalize'\n },\n variant({\n variants: {\n primary: {\n letterSpacing: '1px',\n fontSize: ['12px', '14px', '14px', '16px'],\n color: ' black',\n lineHeight: '22px',\n display: ['none', 'block', 'block', 'block']\n }\n }\n })\n)\nexport default CardSubtitle\n","import React, { forwardRef } from 'react'\nimport PropTypes from 'prop-types'\nimport { Box, Flex, Image, NameList } from 'ui/acro'\nimport TimeCodeBadge from './TimeCodeBadge'\nimport ClassCountBadge from './ClassCountBadge'\nimport { CardSubtitle, CardTitle } from '../styles'\n\n// this card ingests both series and class API data from the my_classes_and_series API and displays them accordingly. it's made specifically for the keep training carousel\nconst KeepTrainingCard = forwardRef(\n (\n {\n carouselItem,\n title,\n id,\n humanDuration,\n plan,\n category,\n subcategory,\n videoThumbnail,\n introVideoThumbnail,\n workoutCount,\n coaches,\n primaryCategory,\n primarySubcategory,\n slug\n },\n ref\n ) => {\n const image = videoThumbnail || introVideoThumbnail\n\n return (\n{mainText}
\n- {this.props.children}
\n
\n )\n}\n\nSortableListMenu.defaultProps = {\n sortableFields: []\n}\n\nSortableListMenu.propTypes = {\n currOrder: PropTypes.string,\n optionTitles: PropTypes.object,\n setOrder: PropTypes.func,\n sortableFields: PropTypes.array,\n sortLocation: PropTypes.string\n}\n\nexport default SortableListMenu\n","import React from 'react'\n\nconst PlaylistLoadingCards = () => {\n const cardArray = new Array(6).fill(null)\n\n return (\n - {sortableOptions}
- \n {cardArray.map((_, idx) => )}\n
\n \n {planEntryRows}\n {loadingRows}\n \n {seeMoreBtn}\n
\n )\n}\n\nPlanEntriesListContent.propTypes = {\n autopaginate: PropTypes.bool,\n entries: PropTypes.array,\n isLoading: PropTypes.bool,\n initialEntryLoad: PropTypes.bool,\n dateAddedField: PropTypes.string,\n editable: PropTypes.bool,\n headers: PropTypes.array,\n onReorder: PropTypes.func,\n onSorted: PropTypes.func,\n orderBy: PropTypes.string,\n hasMore: PropTypes.bool,\n onFetchMoreEntries: PropTypes.func,\n favoritable: PropTypes.bool,\n featurable: PropTypes.bool,\n onPlanEntriesSorted: PropTypes.func,\n sortable: PropTypes.bool,\n onDeleted: PropTypes.func,\n removable: PropTypes.bool,\n locked: PropTypes.bool,\n includeDates: PropTypes.bool,\n initialLoad: PropTypes.bool,\n entryLinkSuffix: PropTypes.string\n}\n\nexport default PlanEntriesListContent\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nclass PlanEntryListHeader extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n order: 'DEFAULT'\n }\n\n this.handleClick = this.handleClick.bind(this)\n }\n\n componentDidUpdate (prevProps) {\n const orderByHasChanged = prevProps.orderBy !== this.props.orderBy\n const headerIsNotCurrentOrder = this.props.orderBy !== this.props.value\n if (\n orderByHasChanged &&\n headerIsNotCurrentOrder &&\n this.state.order !== 'DEFAULT'\n ) {\n this.setState({ order: 'DEFAULT' })\n }\n }\n\n handleClick (e) {\n e.preventDefault()\n e.stopPropagation()\n\n let newOrder\n switch (this.state.order) {\n case 'ASC':\n newOrder = 'DESC'\n break\n case 'DESC':\n newOrder = 'DEFAULT'\n break\n case 'DEFAULT':\n newOrder = 'ASC'\n break\n }\n\n this.setState({ order: newOrder }, () => {\n this.props.onClick(newOrder)\n })\n }\n\n getArrowLabel () {\n switch (this.state.order) {\n case 'ASC':\n return \n case 'DESC':\n return \n }\n }\n\n render () {\n const { label } = this.props\n\n const arrow = this.getArrowLabel()\n\n let headerClass = 'PlanEntryListHeader'\n if (this.state.order !== 'DEFAULT') {\n headerClass += ' PlanEntryListHeader--active'\n }\n\n return (\n \n {label}\n {arrow}\n \n )\n }\n}\n\nPlanEntryListHeader.propTypes = {\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n orderBy: PropTypes.string,\n onClick: PropTypes.func,\n value: PropTypes.string\n}\n\nexport default PlanEntryListHeader\n","import React from 'react'\nimport { connect } from 'react-redux'\nimport { createNewPlaylistEntry } from '../../redux/actions/playlistEntries'\nimport {\n featurePlanEntry,\n unfeaturePlanEntry\n} from '../../redux/actions/planEntries'\nimport { userAuthoredPlaylists } from '../../redux/selectors/playlists'\nimport { currentUser } from '../../redux/selectors/user'\nimport ThreeDotHoverMenu from '../nestedHoverMenu/ThreeDotHoverMenu'\nimport { getPlaylistEntries } from '../../redux/selectors/playlistEntries'\nimport PlanEntryOptionsModal from './PlanEntryOptionsModal'\nimport PropTypes from 'prop-types'\nimport AloModal from '../AloModal'\nimport ShareModalContent from '../shareModal/ShareModalContent'\n\nclass PlanEntryOptions extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n openModal: ''\n }\n\n this.planEntryInPlaylist = this.planEntryInPlaylist.bind(this)\n this.hideModal = this.hideModal.bind(this)\n }\n\n hideModal () {\n this.setState({ openModal: '' })\n }\n\n planEntryInPlaylist (playlist) {\n return this.props.playlistEntries\n .filter({\n playlist: playlist.uuid,\n planEntry: this.props.planEntry.id\n })\n .exists()\n }\n\n generateMenuOptions () {\n let entryMenuOptions = [\n {\n text: 'Share Class',\n handleClick: () => {\n this.setState({ openModal: 'share' })\n }\n }\n ]\n\n if (this.props.currentUser) {\n entryMenuOptions = entryMenuOptions.concat([\n {\n text: 'Add To Playlist',\n children: this.props.playlists.map(playlist => {\n const entryInPlaylist = this.planEntryInPlaylist(playlist)\n return {\n text: playlist.title,\n included: entryInPlaylist,\n handleClick: () => {\n this.props.addToPlaylist(playlist.uuid)\n }\n }\n })\n }\n ])\n }\n\n if (this.props.removable) {\n entryMenuOptions = entryMenuOptions.concat([\n {\n text: 'Remove From Playlist',\n handleClick: this.props.onDelete\n }\n ])\n }\n\n if (this.props.featurable) {\n entryMenuOptions = entryMenuOptions.concat([\n {\n text: this.props.planEntry.featured ? 'Unfeature' : 'Feature',\n handleClick: () => {\n if (this.props.planEntry.featured) {\n this.props.planEntry.unfeature().then(() => {\n this.props.unfeaturePlanEntry()\n })\n } else {\n this.props.planEntry.feature().then(() => {\n this.props.featurePlanEntry()\n })\n }\n }\n }\n ])\n }\n\n return entryMenuOptions\n }\n\n render () {\n const entryMenuOptions = this.generateMenuOptions()\n\n return (\n \n \n {favoriteButtonHeaderSpace}\n \n \n ?\n \n }\n topOffset={-10}\n leftOffset={250}\n width={540}\n >\n The checkmark below indicates whether or not you have finished the\n class\n \n \n\n \n {listHeaders} \n \n
\n \n \n {\n this.props.addToPlaylist(playlist.uuid)\n }}\n planEntryInPlaylist={this.planEntryInPlaylist}\n onDelete={this.props.onDelete}\n />\n
\n )\n }\n}\n\nPlanEntryOptions.propTypes = {\n playlists: PropTypes.array,\n currentUser: PropTypes.object,\n playlistEntries: PropTypes.object,\n addToPlaylist: PropTypes.func,\n featurePlanEntry: PropTypes.func,\n unfeaturePlanEntry: PropTypes.func,\n planEntry: PropTypes.object,\n onDelete: PropTypes.func,\n removable: PropTypes.bool\n}\n\nconst mapStateToProps = state => {\n return {\n playlists: userAuthoredPlaylists(state),\n currentUser: currentUser(state),\n playlistEntries: getPlaylistEntries(state)\n }\n}\n\nconst mapDispatchToProps = (dispatch, props) => {\n return {\n addToPlaylist: uuid => {\n dispatch(createNewPlaylistEntry(uuid, props.planEntry.id))\n },\n featurePlanEntry: () => {\n dispatch(featurePlanEntry(props.planEntry.id))\n },\n unfeaturePlanEntry: () => {\n dispatch(unfeaturePlanEntry(props.planEntry.id))\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(PlanEntryOptions)\n","import React from 'react'\nimport NestedHoverMenu from './NestedHoverMenu'\n\nconst ThreeDotHoverMenu = ({ menuOptions }) => {\n return (\n \n
\n \n {\n e.preventDefault()\n e.stopPropagation()\n this.setState({ openModal: 'options' })\n }}\n />\n
\n\n \n {content ? (\n
\n )\n}\n\nBuilderSection.propTypes = {\n user: PropTypes.object.isRequired,\n builderModelname: PropTypes.string.isRequired,\n data: PropTypes.object\n}\n\nBuilderSection.defaultProps = {\n user: {},\n data: {}\n}\n\nexport default BuilderSection\n","import React, { useEffect, useState } from 'react'\nimport { Box, Flex, HR } from 'ui/bend'\nimport { MyPraticeSummary } from './MyPraticeSummary/MyPraticeSummary'\nimport BuilderSection from '../BuilderSection'\nimport RecommendationWidget from './RecommendationWidget'\nimport camelize from 'camelize'\nimport styled from 'styled-components'\n\nconst MainFlex = styled(Flex)`\n display: flex;\n flex-direction: column;\n\n & > div {\n margin-bottom: 12px;\n &:first-of-type.category-cards {\n margin: 0;\n }\n @media screen and (min-width: 480px) {\n margin-bottom: 24px;\n &:first-of-type.category-cards {\n margin: 12px 0;\n }\n }\n :last-of-type {\n margin: 0;\n }\n }\n`\n\nconst SchemaSectionRenderer = ({ schema, user, location }) => {\n const [schemaData, setSchemaData] = useState({})\n\n useEffect(() => {\n const fetchData = async () => {\n if (typeof schema === 'string') {\n try {\n const data = JSON.parse(schema)\n setSchemaData(camelize(data))\n } catch (err) {\n setSchemaData({})\n }\n } else {\n setSchemaData(schema)\n }\n }\n\n fetchData()\n }, [schema])\n\n return (\n Loading...
\n )}\n\n ) : section?.source === 'dev_build' &&\n section?.type === 'recommended-section' ? (\n
\n 30-Day Snapshot \n \n \n \n {user?.myPracticeSnapshot?.snapshot?.completedClassesCount}\n \n Classes Completed \n \n \n \n {user?.myPracticeSnapshot?.snapshot?.activeDays}\n \n Active Days \n \n \n \n {user?.myPracticeSnapshot?.snapshot?.weekStreak}\n \n Week Streak \n \n \n
\n \n \n \n {title} \n {headerText} \n \n {!isMobile && (\n \n {cta}\n \n )}\n \n {children}\n {isMobile && linkHref && (\n (window.location.href = linkHref)}\n height='24px'\n width='100%'\n mt='24px'\n variant='ouline'\n >\n {cta}\n \n )}\n
\n )\n}\n\nSection.propTypes = {\n headerText: PropTypes.string.isRequired,\n linkId: PropTypes.string,\n linkHref: PropTypes.string,\n cta: PropTypes.string,\n target: PropTypes.string\n}\n\nexport default Section\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nimport { breakpoints as Breakpoints, CarouselContainer } from 'ui/acro'\nimport { useSwiper } from 'hooks'\nimport CarouselNextButton from './CarouselNextButton'\nimport CarouselPrevButton from './CarouselPrevButton'\n\nconst Carousel = ({\n data,\n slug,\n carouselTitle,\n slidesPerView = 3,\n card,\n breakpoints = {},\n location,\n eventName\n}) => {\n const { getSwiperProps, goPrev, goNext, isBeginning, isEnd } = useSwiper()\n\n return (\n \n Hide Completed Classes\n
\n \n )\n}\n","import PlanEntry from '../../models/PlanEntry'\n\nexport const START_LOAD_PLAN_ENTRIES = 'START_LOAD_PLAN_ENTRIES'\nexport const LOAD_PLAN_ENTRIES_SUCCESS = 'LOAD_PLAN_ENTRIES_SUCCESS'\nexport const LOAD_PLAN_ENTRIES_FAIL = 'LOAD_PLAN_ENTRIES_FAIL'\nexport const LAYOUT_CHANGE = 'LAYOUT_CHANGE'\nexport const ADD_FILTER = 'ADD_FILTER'\nexport const REMOVE_FILTER = 'REMOVE_FILTER'\nexport const SET_INITIAL_FILTERS = 'SET_INITIAL_FILTERS'\nexport const CHANGE_ORDER = 'CHANGE_ORDER'\nexport const CLEAR_FILTER = 'CLEAR_FILTER'\nexport const ENTRY_ADDED_TO_PLAYLIST = 'ENTRY_ADDED_TO_PLAYLIST'\nexport const CHANGE_FILTER_URL = 'CHANGE_FILTER_URL'\nexport const FEATURE_PLAN_ENTRY = 'FEATURE_PLAN_ENTRY'\nexport const UNFEATURE_PLAN_ENTRY = 'UNFEATURE_PLAN_ENTRY'\nexport const CLEAR_ALL_FILTERS = 'CLEAR_ALL_FILTERS'\nexport const CLEAR_PLAN_ENTRIES = 'CLEAR_PLAN_ENTRIES'\nexport const DEFAULT_FILTERS = 'DEFAULT_FILTERS'\nexport const ADD_CUSTOM_DURATION_FILTER = 'ADD_CUSTOM_DURATION_FILTER'\n\nexport function changeLayout(layout) {\n return {\n type: LAYOUT_CHANGE,\n layout: layout\n }\n}\n\nexport function featurePlanEntry(planEntryId) {\n return {\n type: FEATURE_PLAN_ENTRY,\n id: planEntryId\n }\n}\n\nexport function startLoadPlanEntries() {\n return {\n type: START_LOAD_PLAN_ENTRIES\n }\n}\n\nexport function unfeaturePlanEntry(planEntryId) {\n return {\n type: UNFEATURE_PLAN_ENTRY,\n id: planEntryId\n }\n}\n\nexport function addFilter(filterSection, filter, options) {\n return {\n type: ADD_FILTER,\n filterSection,\n filter,\n options\n }\n}\n\nexport function addCustomDurationFilter({ min, max }) {\n return {\n type: ADD_CUSTOM_DURATION_FILTER,\n min,\n max\n }\n}\n\nexport function applyDurationFilter({ durationOptions, isFromClassFinderPage }) {\n return (dispatch, getState) => {\n let {\n ui: {\n planEntries: {\n customDuration: { min, max }\n }\n }\n } = getState()\n if (min == null) {\n min = 0\n }\n if (min != null && max != null && max < min) {\n const temp = min\n min = max\n max = temp\n }\n const preDefinedDurations = durationOptions.reduce((acc, duration) => {\n return [`${duration.min}-${duration.max}`, ...acc]\n }, [])\n dispatch(addFilter('custom_duration', { min, max, preDefinedDurations }))\n dispatch(addCustomDurationFilter({ min, max }))\n if (isFromClassFinderPage) {\n dispatch(clearPlanEntries())\n dispatch(loadPlanEntries())\n }\n }\n}\n\nexport function removeFilter(filterSection, filter, filterByField, options) {\n return {\n type: REMOVE_FILTER,\n filterSection,\n filter,\n filterByField,\n options\n }\n}\n\nexport function clearFilter(label) {\n return {\n type: CLEAR_FILTER,\n label\n }\n}\n\nexport function clearAllFilters() {\n return {\n type: CLEAR_ALL_FILTERS\n }\n}\n\nexport function setDefaultFilter(defaultFilter) {\n return {\n type: DEFAULT_FILTERS,\n defaultFilter\n }\n}\n\nexport function changeOrder(order) {\n return {\n type: CHANGE_ORDER,\n order\n }\n}\n\nexport function setInitialFilters(initialFilters) {\n return {\n type: SET_INITIAL_FILTERS,\n initialFilters\n }\n}\n\nexport function clearPlanEntries(params) {\n return {\n type: CLEAR_PLAN_ENTRIES,\n params\n }\n}\n\nexport function loadPlanEntriesSuccess(planEntries, totalPlanEntries) {\n return {\n type: LOAD_PLAN_ENTRIES_SUCCESS,\n planEntries,\n totalPlanEntries\n }\n}\n\nexport function changeFilterUrl(filters) {\n return {\n type: CHANGE_FILTER_URL,\n filters\n }\n}\n\nexport function loadPlanEntries(callback) {\n return (dispatch, getState) => {\n dispatch(startLoadPlanEntries())\n\n const state = getState()\n const planEntriesState = state.ui.planEntries\n let {\n defaultFilter = {},\n filtered,\n order,\n grid: { page }\n } = planEntriesState\n\n const filters = { ...getRequestObject(filtered), ...defaultFilter }\n const requestParams = {\n ...filters,\n order,\n per_page: 24,\n page\n }\n\n PlanEntry.findAll(requestParams)\n .then((res) => res)\n .then((response) => {\n dispatch(loadPlanEntriesSuccess(response.data, response.headers.total))\n dispatch(changeFilterUrl(requestParams))\n if (callback) callback()\n\n // Google Tag Manager\n if (window.dataLayer) {\n const plansLoaded = window.dataLayer.find((elem) => {\n return elem.event === 'plansLoaded'\n })\n\n if (!plansLoaded) {\n let planIds = []\n\n for (let i = 0; i < response.data.length; i++) {\n const entry = response.data[i]\n if (entry.plan && entry.plan.id) {\n planIds.push('plan_' + entry.plan.id)\n }\n if (planIds.length >= 5) break\n }\n\n window.dataLayer.push({\n event: 'plansLoaded',\n planIds: planIds\n })\n }\n }\n })\n }\n}\n\nconst getRequestObject = (filterOptions) => {\n return {\n instructors: extractFilterAttribute(filterOptions.instructors, 'slug'),\n styles: extractCategorySlugs(filterOptions.styles).concat(\n filterOptions?.yoga?.length > 0\n ? extractFilterAttribute(filterOptions?.yoga, 'slug')\n : [],\n filterOptions?.fitness?.length > 0\n ? extractFilterAttribute(filterOptions?.fitness, 'slug')\n : [],\n filterOptions?.mindfulness?.length > 0\n ? extractFilterAttribute(filterOptions?.mindfulness, 'slug')\n : [],\n filterOptions?.wellness?.length > 0\n ? extractFilterAttribute(filterOptions?.wellness, 'slug')\n : [],\n filterOptions?.skills?.length > 0\n ? extractFilterAttribute(filterOptions?.skills, 'slug')\n : []\n ),\n difficulties: filterOptions.difficulties,\n equipments: filterOptions.equipment,\n focus_areas: filterOptions.focus_area,\n excludeCompleted: filterOptions.excludeCompleted,\n intensities: extractFilterAttribute(filterOptions.intensities, 'level'),\n duration: filterOptions.duration\n }\n}\n\nconst extractCategorySlugs = (filteredCategories) => {\n const filtered = []\n for (const category in filteredCategories) {\n const filteredSubcategories =\n filteredCategories[category].filteredSubcategories || []\n if (filteredSubcategories === 'all') {\n filtered.push(category)\n } else {\n filteredSubcategories.forEach((subcategory) => {\n filtered.push(subcategory.slug)\n })\n }\n }\n return filtered\n}\n\nconst extractFilterAttribute = (filteredObject, filterByField) =>\n filteredObject?.map((filter) => {\n if (typeof filter === 'object') {\n return filter[filterByField]\n } else {\n return filter\n }\n })\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from 'react'\nimport PropTypes from 'prop-types'\nimport SortIcon from '../../../assets/codicons/sort'\n\nlet SortableListLabel = props => {\n let renderLabel = option => {\n if (option === 'az') {\n return (\n \n A Z\n \n )\n } else {\n return {props.optionTitles[option]}\n }\n }\n\n let handleClick = e => {\n e.preventDefault()\n props.onClick()\n }\n\n let arrow = props.menuOpen ? (\n \n ) : (\n \n )\n\n return (\n \n \n {renderLabel(props.currentOrder)}\n \n {!props.isMobile ? arrow :- \n {difficulties.map((difficulty, idx) => (\n
- \n
- \n {intensities.map((intensity, idx) => (\n
- \n
\n \n
\n )\n}\n\nDifficultyIntensityFilters.propTypes = {\n difficulty: PropTypes.string,\n intensity: PropTypes.string,\n setDifficultyFilter: PropTypes.func,\n setIntensityFilter: PropTypes.func,\n clearDifficultyFilter: PropTypes.func,\n clearIntensityFilter: PropTypes.func,\n onFilter: PropTypes.func\n}\n\nconst mapStateToProps = (state) => {\n return {\n difficulty: state.ui.products.filters.difficulty,\n intensity: state.ui.products.filters.intensity\n }\n}\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n setDifficultyFilter: (difficulty) => {\n dispatch(setDifficultyFilter(difficulty))\n },\n setIntensityFilter: (intensity) => {\n dispatch(setIntensityFilter(intensity))\n },\n clearDifficultyFilter: () => {\n dispatch(clearDifficultyFilter())\n },\n clearIntensityFilter: () => {\n dispatch(clearIntensityFilter())\n }\n }\n}\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(DifficultyIntensityFilters)\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from 'react'\nimport TrackableContext from './TrackableContext'\nimport PropTypes from 'prop-types'\n\nconst Trackable = ({ url, children, httpMethod, disable }) => {\n return (\n {filterDropdowns}
\n}\n\nFilterDropdownsSet.propTypes = {\n activeDropdown: PropTypes.string,\n filterOptions: PropTypes.object\n}\n\nexport default FilterDropdownsSet\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport ExploreFilterPage from './browseBy/ExploreFilterPage'\nimport ExploreCarouselPage from './carousel/ExploreCarouselPage'\nimport { getStore } from '../../../redux/store'\nimport { Provider } from 'react-redux'\nimport camelize from 'camelize'\nimport './Explore.scss'\n\nclass ExplorePage extends React.Component {\n renderExplorePage() {\n const jsonCategories = JSON.parse(this.props.categories)\n const jsonFeaturedProducts = JSON.parse(this.props.featuredProducts)\n const jsonInstructorOptions = camelize(\n JSON.parse(this.props.instructorList)\n )\n const jsonProps = {\n ...this.props,\n categories: jsonCategories,\n featuredProducts: jsonFeaturedProducts,\n instructorOptions: jsonInstructorOptions,\n equipmentTags: this.props.equipmentTags,\n focusAreaTags: this.props.focusAreaTags,\n userPresent: Boolean(this.props.userPresent)\n }\n\n if (this.props.pageVersion === 'filter') {\n return \n \n
\n )\n }\n}\n\nconst mapStateToProps = state => {\n return {\n products: products(state),\n hasErrored: state.ui.products.hasErrored,\n isLoading: state.ui.products.isLoading,\n isInitialLoad: state.ui.products.isInitialLoad\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n loadProductsPage: (reloadAll, callback) =>\n dispatch(loadProductsPage(reloadAll, callback))\n }\n}\n\nProductsDisplay.propTypes = {\n baseUrl: PropTypes.string,\n category: PropTypes.string,\n difficulty: PropTypes.string,\n loadProductsPage: PropTypes.func,\n group: PropTypes.string,\n isInitialLoad: PropTypes.bool,\n intensity: PropTypes.string,\n isLoading: PropTypes.bool,\n onAfterProductLoad: PropTypes.func,\n order: PropTypes.string,\n layout: PropTypes.string,\n products: PropTypes.array,\n total: PropTypes.number\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ProductsDisplay)\n","import React, { useContext } from 'react'\nimport InfiniteScroll from 'react-infinite-scroller'\nimport { ThemeProvider } from 'styled-components'\nimport classNames from 'classnames'\nimport PropTypes from 'prop-types'\n\nimport { Box, LightTheme } from 'ui/bend'\nimport AloIcon from '../../../../assets/codicons/a.svg'\n\nimport MasonryLayout from '../../masonryLayout/MasonryLayout'\nimport { SeriesCard } from 'components_v1/SchemaSectionRenderer/common/components'\nimport { ExplorePageContext } from 'components_v1/pageLevelComponents/explore/browseBy/ExploreFilterPage'\n\nconst BoxComponent = ({ product, idx }) => {\n const data = useContext(ExplorePageContext)\n\n return (\n \n
\n \n {productTile}\n
\n )\n })\n return (\n {cards}
\n )\n }\n }\n\n cardHeightChange(idx) {\n if (window.innerWidth > 768) {\n let masonryLayout =\n this.productMasonry.getElementsByClassName('masonry-layout')[0]\n if (masonryLayout) {\n let columns = masonryLayout.querySelector('div').childNodes\n columns = Array.from(columns).filter((col) => {\n return col.childElementCount > 0\n })\n\n let rowNumber = Math.floor(idx / columns.length)\n let rowMaxHeight = this.getTallestHeightInRow(columns, rowNumber)\n this.setRowHeights(rowMaxHeight, columns, rowNumber)\n }\n }\n }\n\n getTallestHeightInRow(columns, rowNumber) {\n let rowMaxHeight = 0\n\n columns.forEach((column) => {\n let cards = column.getElementsByClassName('product-card')\n let neighbor = cards[rowNumber]\n if (neighbor) {\n let neighborTitleHeight =\n neighbor.querySelector('.varied-height').clientHeight\n if (neighborTitleHeight > rowMaxHeight) {\n rowMaxHeight = neighborTitleHeight\n }\n }\n })\n\n return rowMaxHeight\n }\n\n setRowHeights(rowMaxHeight, columns, rowNumber) {\n columns.forEach((column) => {\n let cards = column.getElementsByClassName('product-card')\n cards = Array.from(cards)\n let neighbor = cards[rowNumber]\n if (neighbor) {\n let neighborTitleHeight =\n neighbor.querySelector('.varied-height').clientHeight\n let difference = rowMaxHeight - neighborTitleHeight\n let productPush = neighbor.querySelector('.product-details-push')\n productPush.style.height = `${Math.max(0, difference)}px`\n }\n })\n }\n\n renderLayoutGrid() {\n if (!this.props.isInitialLoad) {\n if (this.props.products && this.props.products.length === 0) {\n return (\n \n
\n )\n } else if (this.props.products) {\n let productTiles = this.props.products.map((product, idx) => {\n return (\n \n
\n \n We looked but this search has zero matches\n
\n \n Try using different filter options\n \n\n \n
\n ))\n\n let loadingCardsClassName = classNames(\n 'product-cards',\n 'products-grid',\n 'product-cards-loading',\n {\n list: this.props.layout === 'list'\n }\n )\n return {loadingCards}
\n }\n }\n\n render() {\n return (\n \n {filters}\n
\n )\n}\n\nFilterPillsSection.defaultProps = {\n filterOptions: {}\n}\n\nFilterPillsSection.propTypes = {\n filterOptions: PropTypes.object\n}\n\nexport default FilterPillsSection\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport {\n getCategories,\n getLastSelectedCategory\n} from '../../../../redux/selectors/planCategories'\nimport { getCategoryRelationships } from '../../../../redux/selectors/planCategoryPlanSubcategories'\nimport {\n removeCategoryFilter,\n addSubcategoryFilter,\n removeSubcategoryFilter,\n setDifficultyFilter,\n setIntensityFilter,\n clearDifficultyFilter,\n clearIntensityFilter,\n applyCategoryFilter,\n setProductOrder,\n removeSeriesFilter,\n clearAllSeriesFilters\n} from '../../../../redux/actions/products/filters'\nimport { loadProductsPage } from '../../../../redux/actions/products/products'\nimport { setSelectedCategorySlug } from '../../../../redux/actions/planCategories'\nimport { connect } from 'react-redux'\n\nimport {\n getCategoryObj,\n getSubcategoryObj\n} from '../browseBy/exploreFilterHelpers'\n\n// Filter Components\n// import FilterRowDropdown from '../../../filtersRow/FilterRowDropdown'\n// import FilterRowDropdownItem from '../../../filtersRow/FilterRowDropdownItem'\n\n// import CategoryFilters from './CategoryFilters'\n// import FilterMetaLayout from '../../../filtersRow/FilterMetaLayout'\nimport SelectedFiltersDisplay from '../../../filtersRow/SelectedFiltersDisplay'\nimport ClassFinderNewSortAndClear from '../../classFinder/ClassFinderNewSortAndClear'\n\nclass SeriesFinderNewFilteredList extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n categoryDropdownOpen: false,\n groupDropdownOpen: false,\n activeCategory: '',\n toBeOpenDropdown: '',\n filterModal: false\n }\n\n // this.buildSeriesPageFilterOptions =\n // this.buildSeriesPageFilterOptions.bind(this)\n // this.buildSubcategoryFilterOptions =\n // this.buildSubcategoryFilterOptions.bind(this)\n this.buildFilteredLabels = this.buildFilteredLabels.bind(this)\n this.allSelected = this.allSelected.bind(this)\n // this.subcategoryAlreadyFiltered = this.subcategoryAlreadyFiltered.bind(this)\n this.removeFilter = this.removeFilter.bind(this)\n this.clearAllFilters = this.clearAllFilters.bind(this)\n }\n\n allSelected(category) {\n const subcategories = this.props.filters.categories[category.slug]\n return subcategories === 'all'\n }\n\n // subcategoryAlreadyFiltered(subcategory) {\n // const parentCategory = subcategory.parentCategory\n // const subcategories = this.props.filters.categories[parentCategory] || []\n // return subcategories.includes(subcategory.slug)\n // }\n\n // buildSeriesPageFilterOptions() {\n // let filterObj = {}\n // this.props.categories.forEach((category) => {\n // filterObj[category.title] = {\n // renderDropdownContent: () => {\n // return (\n // \n
\n )\n }\n\n const productTiles = this.props.products.map((product, idx) => (\n {this.props.title}
\n\n \n See All{' '}\n \n
\n \n
\n ))\n\n return (\n \n
\n \n {carouselTitle}\n
\n \n
\n \n
\n \n {productTiles} \n
\n \n {productTiles.slice(0, 4)}\n
\n \n \n \n
\n )\n}\n\nItemTileDescription.propTypes = {\n description: PropTypes.string\n}\n\nexport default ItemTileDescription\n","import React from 'react'\nimport OwlCarousel from 'react-owl-carousel2'\nimport PropTypes from 'prop-types'\nimport owlConfig from '../../owlCarouselConfig'\n\nconst SCROLL_END_DELAY = 500\n\nclass ScrollableCarousel extends React.Component {\n constructor (props) {\n super(props)\n\n this.carousel = React.createRef()\n this.scrollCarousel = React.createRef()\n this.scroll = React.createRef()\n this.scrollBarContainer = React.createRef()\n this.scrollBar = React.createRef()\n\n this.handleScrollMovement = this.handleScrollMovement.bind(this)\n this.handleCarouselChanges = this.handleCarouselChanges.bind(this)\n this.handleOnDrag = this.handleOnDrag.bind(this)\n this.handleOnDragged = this.handleOnDragged.bind(this)\n }\n\n componentDidMount () {\n this.events = {\n onInitialize: this.handleCarouselChanges,\n onResized: this.handleCarouselChanges,\n onChange: this.handleCarouselChanges,\n onDrag: this.handleOnDrag,\n onDragged: this.handleOnDragged\n }\n }\n\n handleCarouselChanges (e) {\n const owl = e.relatedTarget\n const lazy = owl._plugins.lazy\n if (owl.settings) {\n let position\n if (e.property && e.property.name === 'position') {\n position = e.property.value\n } else {\n position = lazy._core.current()\n }\n\n this.updateScrollBar(owl, position)\n\n if (owl._items.length <= owl.settings.items) {\n this.scroll.current.style.display = 'none'\n } else {\n this.scroll.current.style.display = 'block'\n }\n }\n }\n\n handleOnDragged (e) {\n const owl = e.relatedTarget\n if (this.draggingHandler) {\n document.removeEventListener('mousemove', this.draggingHandler)\n document.removeEventListener('touchmove', this.draggingHandler)\n }\n this.updateScrollBar(owl)\n\n clearTimeout(this.hoverRemoveTimeout)\n\n this.hoverRemoveTimeout = setTimeout(\n this.scroll.current.classList.remove('hover'),\n SCROLL_END_DELAY\n )\n }\n\n handleOnDrag (e) {\n const owl = e.relatedTarget\n this.draggingHandler = () => {\n this.dragLazyLoad(\n owl,\n owl.closest(owl._drag.stage.current.x, owl._drag.direction)\n )\n const scrollX =\n owl._drag.stage.current.x * -1 * this.scrollTrackRatio(owl)\n const transform = `translate3d(${scrollX}px, 0px, 0px)`\n this.scrollBar.current.style.transition = 'none'\n this.scrollBar.current.style.transform = transform\n }\n document.addEventListener('mousemove', this.draggingHandler)\n document.addEventListener('touchmove', this.draggingHandler)\n }\n\n updateScrollBar (owl, position = owl.current()) {\n const scrollWidth = `${100 *\n Math.min(owl._items.length, owl.settings.items) /\n owl._items.length}%`\n this.scrollBar.current.style.width = scrollWidth\n this.scrollBar.current.style.transition = `${owl.speed() / 1000}s`\n\n const x =\n (this.scrollBarContainer.current.clientWidth -\n this.scrollBar.current.clientWidth) /\n (owl._items.length - owl.settings.items) *\n position\n\n this.xPos = x\n this.scrollBar.current.style.transform = `translate3d(${x}px, 0px, 0px)`\n }\n\n scrollTrackRatio (owl) {\n const scrollXFirst =\n (this.scrollBarContainer.current.clientWidth -\n this.scrollBar.current.clientWidth) /\n (owl._items.length - owl.settings.items)\n const trackXFirst = owl._widths[0]\n return scrollXFirst / trackXFirst\n }\n\n dragLazyLoad (owl, position) {\n const lazy = owl._plugins.lazy\n for (const i in [position.position + owl.settings.items - 1]) {\n lazy.load(i)\n }\n\n if (owl.settings.stagePadding > 0) {\n lazy.load(position + owl.settings.items)\n }\n }\n\n handleScrollMovement (e) {\n let scrollEndTimeout\n clearTimeout(scrollEndTimeout)\n this.scrollBarContainer.current.style.opacity = '1'\n this.scrollBar.current.style.opacity = '1'\n\n const pointer = e.type === 'touchstart' ? e.originalEvent.touches[0] : e\n const pointerX = pointer.pageX\n\n const start = this.xPos\n let delta = null\n let scrollX = null\n let carouselX = null\n let direction = null\n\n const owl = this.carousel.current.$car\n\n const moveHandler = moveEvent => {\n moveEvent.preventDefault()\n const newPointer =\n moveEvent.type === 'touchmove'\n ? moveEvent.originalEvent.touches[0]\n : moveEvent\n const newPointerX = newPointer.pageX\n delta = pointerX - newPointerX\n scrollX = Math.max(\n Math.min(\n start - delta,\n this.scrollBarContainer.current.clientWidth -\n this.scrollBar.current.clientWidth\n ),\n 0\n )\n carouselX = scrollX / this.scrollTrackRatio(owl) * -1\n this.scrollBar.current.style.transition = 'none'\n this.scrollBar.current.style.transform = `translate3d(${scrollX}px, 0px, 0px)`\n\n owl.$stage.css({\n transform: `translate3d(${carouselX}px, 0px, 0px)`,\n transition: 'none'\n })\n\n direction = delta < 0 ? 'left' : 'right'\n this.dragLazyLoad(owl, owl.closest(carouselX, direction))\n }\n\n window.addEventListener('touchmove', moveHandler)\n window.addEventListener('mousemove', moveHandler)\n\n const handleScrollDragEnd = () => {\n window.removeEventListener('touchmove', moveHandler)\n window.removeEventListener('mousemove', moveHandler)\n\n scrollEndTimeout = setTimeout(() => {\n this.scrollBarContainer.current.style.opacity = '1'\n this.scrollBar.current.style.opacity = '1'\n }, SCROLL_END_DELAY)\n\n owl.speed(owl.settings.dragEndSpeed || owl.settings.smartSpeed)\n\n if (carouselX === 0) {\n owl.current(0)\n } else {\n owl.current(owl.closest(carouselX, direction))\n }\n\n owl.invalidate('position')\n owl.update()\n this.updateScrollBar(owl)\n }\n\n window.addEventListener('touchend', handleScrollDragEnd, { once: true })\n window.addEventListener('mouseup', handleScrollDragEnd, { once: true })\n }\n\n render () {\n const options = { ...owlConfig, ...this.props.options }\n return (\n \n \n {this.props.children}\n \n
\n \n )\n }\n}\n\nScrollableCarousel.defaultProps = {\n overflow: true\n}\n\nScrollableCarousel.propTypes = {\n children: PropTypes.node,\n options: PropTypes.object\n}\n\nexport default ScrollableCarousel\n","import React from 'react'\nimport OwlCarousel from 'react-owl-carousel2'\nimport PropTypes from 'prop-types'\nimport FeaturedProductCard from './FeaturedProductCard'\nimport owlCarouselConfig from '../../owlCarouselConfig'\nclass FeaturedProductsCarousel extends React.Component {\n render () {\n const options = Object.assign({}, owlCarouselConfig, {\n responsive: {\n 0: {\n items: 1\n },\n 550: {\n items: 2,\n slideBy: 2,\n stagePadding: 0\n },\n 768: {\n items: 1,\n slideBy: 1,\n stagePadding: 0\n },\n 1200: {\n items: 1,\n slideBy: 1,\n stagePadding: 0\n },\n 1500: {\n items: 1,\n slideBy: 1,\n stagePadding: 0\n },\n 1600: {\n items: 1,\n slideBy: 1\n }\n }\n })\n\n const featuredProductCards = this.props.featuredProducts.map(\n (product, idx) => \n \n
\n \n
\n \n
\n \n
\n \n
\n {carousel}
\n \n {featuredProductCards[0]}\n
\n \n \n
\n )\n}\n\nFeaturedProductCard.propTypes = {\n product: PropTypes.object\n}\n\nexport default FeaturedProductCard\n","import React from 'react'\nimport VideoListIcon from './VideoListIcon'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { Modal } from 'react-bootstrap'\nimport VideoListContent from './VideosListContent'\n\nclass VideoListMobile extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n active: false\n }\n\n this.closeModal = this.closeModal.bind(this)\n }\n\n closeModal () {\n this.setState({ active: false })\n }\n\n render () {\n const videoListMobileClasses = classNames('video-list-mobile', {\n active: this.state.active,\n shift: this.props.controlsShowing\n })\n\n const videoModalCloseClasses = classNames('close', {\n 'white-background': this.props.type === 'series'\n })\n\n return (\n \n 
\n
\n {bundleTag}\n \n
\n \n \n
\n \n
\n Featured
\n {product.title}
\n {product.coachLabel()}
\n \n {\n this.setState({ active: true })\n }}\n >\n
\n \n \n ×\n \n
\n - \n {props.entries.map((entry, idx) => {\n // Use idx instead of entry.id because some playlists have duplicate entries\n return (\n
- \n \n\n
\n {entry.humanDuration}\n {props.playlistPos === idx ? (\n
\n \n \n \n ) : null}\n\n\n \n\n {props.showPlanTitle ? entry.plan.title : null}\n
\n{entry.title}
\n{getEntryCoachName(entry)}
\n \n )\n })}\n
\n
\n )\n case 'new-form':\n return - \n
- {playlists}
\n
\n \n
\n {page}
\n \n
\n )\n}\n\nEntryAddedConfirmation.propTypes = {\n entry: PropTypes.object,\n playlist: PropTypes.object,\n onConfirmed: PropTypes.func\n}\n\nexport default EntryAddedConfirmation\n","import React from 'react'\nimport NestedHoverMenu from '../nestedHoverMenu/NestedHoverMenu'\nimport PlusIcon from './PlusIcon'\n\nconst NestedMenuPlusIcon = ({ menuOptions, active }) => {\n return (\n \n {props.entry.title}\n
\n has been added to\n
\n {props.playlist.title}\n
\n \n has been added to\n
\n {props.playlist.title}\n
\n \n
\n {renderVideo()}
\n}\n\nExternalVideo.defaultProps = {\n id: 'videoPlayer'\n}\n\nExternalVideo.propTypes = {\n id: PropTypes.string,\n video: PropTypes.object\n}\n\nexport default ExternalVideo\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport TrackableSection, { Trackable } from '../tracking'\nimport snakeCaseKeys from 'snakecase-keys'\n\nclass VideoTracker extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n videoWatchedTillEnd: false\n }\n\n this.handleEnded = this.handleEnded.bind(this)\n this.handleWindowClosed = this.handleWindowClosed.bind(this)\n this.handleOnPause = this.handleOnPause.bind(this)\n }\n\n /**\n * Makes a POST request to the server to track video\n * view information\n * @param {String} eventName\n */\n createVideoTrack(eventKey, eventName) {\n const { updateToTrack } = this.trackingContext\n updateToTrack(eventKey, {\n event: eventName,\n addToAccessed: true,\n currentTime: this.props.videoPlayer.currentTime()\n })\n }\n\n handleEnded() {\n this.setState({ videoWatchedTillEnd: true })\n this.createVideoTrack('ended', 'Ended')\n this.trackingContext.trackManually()\n }\n\n handleWindowClosed() {\n if (this.props.videoHasBeenPlayed && !this.state.videoWatchedTillEnd) {\n this.createVideoTrack('windowClosed', 'Window Closed')\n }\n }\n\n handleOnPause() {\n const updateToTrack = this.trackingContext.updateToTrack\n\n const player = this.props.videoPlayer\n const params = {\n event: 'pause',\n currentTime: player.currentTime()\n }\n updateToTrack('pause', params)\n }\n\n componentDidUpdate() {\n if (this.props.videoPlayer) {\n this.unbindTrackingEvents()\n this.bindTrackingEvents()\n }\n }\n\n componentWillUnmount() {\n if (this.props.videoPlayer) {\n this.unbindTrackingEvents()\n }\n }\n\n bindTrackingEvents() {\n const player = this.props.videoPlayer\n\n player.on('pause', this.handleOnPause)\n player.on('ended', this.handleEnded)\n }\n\n unbindTrackingEvents() {\n const player = this.props.videoPlayer\n\n player.off('pause', this.handleOnPause)\n player.off('ended', this.handleEnded)\n }\n\n render() {\n return (\n \n
\n )\n}\n\nexport default VideosListMenu\n","/**\n * Formats the props object for the videos list component\n * from video player options\n * @return {Object}\n */\nconst extractVideosListProps = options => {\n let playlistObj = {\n animationHandler: options.animationHandler,\n currentlyViewedEntryId: options.planEntryId,\n enable: options.enable,\n planSubscriptionId: options.planSubscriptionId,\n playlistPos: options.playlistPos,\n title: options.listEntriesInformation.title,\n type: options.originType,\n entryListOrigin: options.listEntriesInformation\n }\n if (options.originType === 'playlist') {\n playlistObj = Object.assign({}, playlistObj, {\n playlistUUID: options.uuid,\n showPlanTitle: true\n })\n } else if (options.originType === 'series') {\n let coach = options.listEntriesInformation.coaches[0]\n playlistObj = Object.assign({}, playlistObj, {\n coachName: coach ? `${coach.firstName} ${coach.lastName}` : '',\n background: options.listEntriesInformation.coverPhoto.url\n })\n }\n return playlistObj\n}\n\nexport default extractVideosListProps\n","import React from 'react'\nimport VideoToggle from './VideoToggle'\nimport PropTypes from 'prop-types'\nimport VideoPlayer from '../../videoPlayer/VideoPlayer'\n\nclass VideoPreviewWrapper extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n videoShowing: false\n }\n\n this.handleOnClick = this.handleOnClick.bind(this)\n }\n\n handleOnClick () {\n this.setState(prevState => {\n return {\n videoShowing: !prevState.videoShowing\n }\n })\n }\n\n renderVideo () {\n if (this.state.videoShowing) {\n return (\n \n
\n \n
\n \n
\n )\n }\n }\n\n render () {\n return (\n \n
\n )\n }\n}\n\nVideoPreviewWrapper.defaultProps = {\n durationInTitle: true\n}\n\nVideoPreviewWrapper.propTypes = {\n durationInTitle: PropTypes.bool,\n label: PropTypes.string,\n video: PropTypes.object\n}\n\nexport default VideoPreviewWrapper\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nconst VideoToggle = props => {\n const renderLabel = () => {\n if (props.label) {\n if (typeof props.label === 'string') {\n return {props.label}\n } else {\n return Video Selected:\n }\n }\n }\n\n let videoTitle = props.video.title\n if (props.durationInTitle) {\n videoTitle += props.video.human_duration\n }\n\n return (\n \n {renderLabel()}\n
\n
\n )\n }\n\n const renderDifficultyIcon = (difficulty) => {\n switch (difficulty) {\n case 'introductory':\n return \n {\n let completedPlanEntryTick\n if (planEntry.completed) {\n completedPlanEntryTick = (\n {\n props.mouseEnterAction(card.current, itemToReveal.current)\n }}\n onMouseLeave={props.mouseLeaveAction}\n >\n {\n if (props.showFavoriteButton) {\n return
\n \n )\n}\n\nPlanEntryTileItem.defaultProps = {\n includeInstructorName: true\n}\n\nPlanEntryTileItem.propTypes = {\n hasDescription: PropTypes.bool,\n inListLayout: PropTypes.bool,\n inTileLayout: PropTypes.bool,\n includeInstructorName: PropTypes.bool,\n mouseEnterAction: PropTypes.func,\n mouseLeaveAction: PropTypes.func,\n planEntry: PropTypes.object,\n transitionEnd: PropTypes.func,\n showFavoriteButton: PropTypes.bool,\n updateFeaturedFlagInTree: PropTypes.func\n}\n\nconst PlanEntryTile = (props) => {\n let HoveredPlanEntryTile = withItemTileHover(PlanEntryTileItem)\n return \n \n
\n )\n }\n return completedPlanEntryTick\n }}\n metaDataComp={\n \n
\n }\n />\n\n \n {renderDifficultyIcon(planEntry.plan.difficultyLevel)}\n {planEntry.plan.difficultyLevel}\n \n {planEntry.plan.difficultyLevel\n ? planEntry.plan.difficultyLevel.substring(0, 3)\n : null}\n \n
\n \n {planEntry.humanDuration}\n
\n {accessedItemRows}
\n}\n\nAccessedItemsList.propTypes = {\n items: PropTypes.array\n}\n\nexport default AccessedItemsList\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport AccessedItemImage from './AccessedItemImage'\nimport './AccessedItemsRow.scss'\n\nconst AccessedItemRow = props => {\n let productAuthors\n if (props.item.type === 'playlist') {\n productAuthors = (\n {props.item.authors.name}\n )\n } else {\n productAuthors = props.item.authors.map((coach, idx) => {\n let coachName = `${coach.firstName} ${coach.lastName}`\n if (\n props.item.authors.length > 1 &&\n idx === props.item.authors.length - 1\n ) {\n coachName = ' & '.concat(coachName)\n }\n if (\n props.item.authors.length > 0 &&\n idx < props.item.authors.length - 2\n ) {\n coachName += ', '\n }\n return (\n \n {coachName}\n \n )\n })\n }\n\n const goToItem = () => {\n window.location.href = props.item.link\n }\n\n return (\n \n
\n )\n}\n\nAccessedItemRow.propTypes = {\n item: PropTypes.object\n}\n\nexport default AccessedItemRow\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Modal } from 'react-bootstrap'\n\nimport AloButton from '../../AloButton'\n\nclass CancellationOfferModal extends React.Component {\n render () {\n let body, footer\n if (this.props.eligible) {\n body = (\n \n
\n \n
\n \n
\n \n
\n {props.item.title}
\n \n {props.item.type} \n by{' '}\n {productAuthors}\n
\n {this.props.subcaption}
\nYou are about to cancel your membership.
\n )\n\n footer = (\n\n {this.props.error}\n
\n }\n {footer}\n \n
\n )\n }\n}\n\nCancellationQuestion.propTypes = {\n question: PropTypes.object.isRequired,\n surveyState: PropTypes.object.isRequired,\n detailsStateKey: PropTypes.func.isRequired,\n onReasonChange: PropTypes.func.isRequired,\n onDetailsChange: PropTypes.func.isRequired\n}\n\nexport default CancellationQuestion\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nclass CancellationReason extends React.Component {\n constructor (props) {\n super(props)\n\n this.handleReasonChange = this.handleReasonChange.bind(this)\n this.handleDetailsChange = this.handleDetailsChange.bind(this)\n }\n\n handleReasonChange (e) {\n this.props.onReasonChange(this.props.question, this.props.reason)\n }\n\n handleDetailsChange (e) {\n this.props.onDetailsChange(this.props.question, this.props.reason, e.target.value)\n }\n\n render () {\n return (\n {this.props.question.text}
\n {reasons}\n\n \n\n {this.props.selected && this.props.reason.detailsPrompt &&\n \n }\n
\n )\n }\n}\n\nCancellationReason.propTypes = {\n question: PropTypes.object.isRequired,\n reason: PropTypes.object.isRequired,\n selected: PropTypes.bool.isRequired,\n details: PropTypes.string,\n onReasonChange: PropTypes.func.isRequired,\n onDetailsChange: PropTypes.func.isRequired\n}\n\nexport default CancellationReason\n","import React from 'react'\nimport { connect } from 'react-redux'\nimport {\n loadPlanEntries,\n changeOrder,\n setInitialFilters,\n clearPlanEntries,\n setDefaultFilter\n} from '../../../redux/actions/planEntries'\nimport PropTypes from 'prop-types'\nimport { planEntries } from '../../../redux/selectors/planEntries'\nimport ClassFinderContent from './ClassFinderContent'\nimport {\n convertFilterByFieldToObject,\n createFilteredStylesObj\n} from './classFinderHelperMethods'\nimport { insertPlanCategories } from '../../../redux/actions/planCategories'\n\nclass ClassFinderDataLoader extends React.Component {\n componentDidMount() {\n if (this.props.defaultValue) {\n this.props.setDefaultFilter({\n instructors: this.props.preloadedFilters.instructors || []\n })\n }\n let stylesFilterObj = createFilteredStylesObj(\n this.props.dropdownOptions.styles,\n this.props.preloadedFilters.styles\n )\n let individualStylesObj = {}\n for (const individualFilter in stylesFilterObj) {\n individualStylesObj[individualFilter] =\n stylesFilterObj[individualFilter].filteredSubcategories\n }\n\n const preFilters = {\n duration: this.props.preloadedFilters.duration,\n instructors: convertFilterByFieldToObject(\n this.props.dropdownOptions.instructors || [],\n 'slug',\n this.props.preloadedFilters.instructors\n ),\n difficulties: this.props.preloadedFilters.difficulties,\n intensities: convertFilterByFieldToObject(\n this.props.dropdownOptions.intensities,\n 'level',\n this.props.preloadedFilters.intensities\n ),\n equipment: this.props.preloadedFilters.equipment,\n focus_area: this.props.preloadedFilters.focus_area,\n excludeCompleted: this.props.preloadedFilters.excludeCompleted,\n styles: {},\n ...individualStylesObj\n }\n this.props.insertPlanCategories(this.props.dropdownOptions.styles)\n this.props.setInitialFilters(preFilters)\n this.props.changeOrder(this.props.defaultOrder || 'relevance')\n this.props.clearPlanEntries()\n this.props.loadPlanEntries(() => {\n window.history.replaceState(\n this.props.filteredAttributes,\n null,\n `${this.props.baseUrl}?${this.props.filterUrl}`\n )\n })\n }\n\n render() {\n return (\n \n \n \n
\n ))\n }\n\n return (\n <>\n {window.innerWidth > 1024 ? (\n \n {planEntryTiles} \n }\n }\n }}\n additionalClassNames={['single-class-grid', 'plan-entry-grid']}\n layout={props.layout}\n isLoading={props.isLoading}\n hasMore={\n props.planEntries &&\n props.planEntries.length < props.totalPlanEntries\n }\n onLoadMore={props.loadPlanEntries}\n />\n
\n \n \n )\n}\n\nClassFinderContent.propTypes = {\n autopaginate: PropTypes.bool,\n baseUrl: PropTypes.string,\n clearAllFilters: PropTypes.func,\n currentUser: PropTypes.object,\n includeFilters: PropTypes.bool,\n isInitialLoad: PropTypes.bool,\n isLoading: PropTypes.bool,\n layout: PropTypes.string,\n loadPlanEntries: PropTypes.func,\n page: PropTypes.number,\n preloadedFilters: PropTypes.object,\n planEntries: PropTypes.array,\n totalPlanEntries: PropTypes.number,\n withSubcategories: PropTypes.bool,\n dropdownOptions: PropTypes.object,\n clearPlanEntries: PropTypes.func\n}\n\nconst mapStateToProps = (state) => {\n const planEntriesGridState = getPlanEntryGridState(state)\n\n return {\n layout: planEntriesGridState.layout,\n isInitialLoad: planEntriesGridState.isInitialLoad,\n isLoading: planEntriesGridState.isLoading,\n totalPlanEntries: parseInt(planEntriesGridState.total),\n currentUser: currentUser(state)\n }\n}\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n loadPlanEntries: (reloadAll = false) => {\n dispatch(loadPlanEntries(reloadAll))\n },\n clearAllFilters: () => {\n dispatch(clearAllFilters())\n },\n clearPlanEntries: () => {\n dispatch(clearPlanEntries())\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ClassFinderContent)\n","import React from 'react'\nimport { connect } from 'react-redux'\nimport PropTypes from 'prop-types'\nimport FilterMetaLayout from '../../filtersRow/FilterMetaLayout'\nimport { getPlanEntryGridState } from '../../../redux/selectors/planEntries'\nimport { class_series_finder_filter_event } from 'gtm/pushEvents'\n\n// Redux\nimport {\n loadPlanEntries,\n addFilter,\n removeFilter,\n changeOrder,\n setInitialFilters,\n clearFilter,\n changeLayout,\n clearPlanEntries,\n clearAllFilters\n} from '../../../redux/actions/planEntries'\n\n// Filter Row Components\nimport FilterLabelsRow from '../../filtersRow/FilterLabelsRow'\nimport FilterRowDropdownItem from '../../filtersRow/FilterRowDropdownItem'\nimport FilterRowDropdown from '../../filtersRow/FilterRowDropdown'\nimport { getCategoryRelationships } from '../../../redux/selectors/planCategoryPlanSubcategories'\n\n// Helper Methods\nimport {\n getFilteredItemLabels,\n getDifficultyIcon,\n getIntensityIcon,\n getTotalNumberOfFilters\n} from './classFinderHelperMethods'\nimport ClassFinderMobileFilter from './ClassFinderMobileFilter'\nimport { CompletedClassFilter } from './CompletedClassFilter'\nimport CustomDuration from './CustomDuration'\n\nconst FILTER_BY_FIELDS = {\n instructors: 'slug',\n styles: 'slug',\n intensities: 'level'\n}\n\nclass ClassFinderTopSection extends React.Component {\n constructor(props) {\n super(props)\n\n this.initialDuration = {\n min:\n this.props.preloadedFilters.min ||\n this.props.dropdownOptions.duration.min,\n max: this.props.preloadedFilters.max\n }\n\n this.filterOptions = this.generateFilterOptions()\n\n this.state = {\n activeDropdown: '',\n displayedDurationMinMax: this.initialDuration\n }\n this.applyFilter = this.applyFilter.bind(this)\n this.reorderEntries = this.reorderEntries.bind(this)\n this.openNextDropdown = this.openNextDropdown.bind(this)\n this.generateFilterOptions = this.generateFilterOptions.bind(this)\n this.instructorFilterExcluded = this.instructorFilterExcluded.bind(this)\n this.pushWindowState = this.pushWindowState.bind(this)\n this.removeFilter = this.removeFilter.bind(this)\n this.updateDisplayedDuration = this.updateDisplayedDuration.bind(this)\n this.generateFilterDropdownObj = this.generateFilterDropdownObj.bind(this)\n this.clearAllFilters = this.clearAllFilters.bind(this)\n this.durationOptions = [\n { title: '0-15 minutes', min: 0, max: 15 },\n { title: '15-30 minutes', min: 15, max: 30 },\n { title: '30-60 minutes', min: 30, max: 60 },\n { title: '60+ minutes', min: 60, max: null }\n ]\n // this.getTotalNumberOfFilters = this.getTotalNumberOfFilters.bind(this)\n this.productTop = React.createRef()\n\n this.excludedFilters = this.instructorFilterExcluded()\n ? ['instructors']\n : []\n }\n\n componentDidMount() {\n window.onpopstate = (event) => {\n if (event.state) {\n const previousFilteredState = event.state\n this.props.setInitialFilters(previousFilteredState)\n this.props.loadPlanEntries()\n }\n }\n }\n\n updateDisplayedDuration(displayedDurationMinMax) {\n this.setState({ displayedDurationMinMax })\n }\n\n userHasFiltered() {\n for (const label in this.props.filteredAttributes) {\n let userHasFiltered\n switch (label) {\n case 'duration':\n userHasFiltered =\n this.props.filteredAttributes.duration.min > 0 ||\n !!this.props.filteredAttributes.duration.max\n case 'styles':\n userHasFiltered =\n Object.keys(this.props.filteredAttributes.styles).length > 0\n default:\n userHasFiltered = this.props.filteredAttributes?.[label]?.length > 0\n }\n if (userHasFiltered && !this.isLabelExcluded(label)) return true\n }\n }\n\n isLabelExcluded(label) {\n return this.excludedFilters.includes(label)\n }\n\n pushWindowState() {\n window.history.pushState(\n this.props.filteredAttributes,\n null,\n `${this.props.baseUrl}?${this.props.filterUrl}`\n )\n }\n\n generateFilterOptions() {\n // Object containing all class finder filter information\n return Object.assign(\n {},\n this.generateFilterDropdownObj(\n 'sort',\n null,\n (autoOpen, noSlideAnimation) => {\n 'relevance', 'rank', 'az', 'date'\n const sortOptions = [\n { title: 'Newest', value: 'date' },\n { title: 'Most Relevant', value: 'relevance' },\n { title: 'Most Popular', value: 'rank' },\n { title: 'A to Z', value: 'az' }\n ]\n return (\n \n 1\n ? ''\n : `See More Of ${props.dropdownOptions.instructors[0].user.firstName}'s Classes`\n }\n numInitialShow={NUM_ENTRIES_INIT_VISIBLE_NON_AUTOPAGINATE}\n itemsLength={props.planEntries ? props.planEntries.length : 0}\n totalItems={props.totalPlanEntries}\n renderItemTiles={() => {\n if (!props.isInitialLoad) {\n if (!props.isLoading && props.planEntries.length === 0) {\n return (\n \n
\n )\n } else {\n return \n {\n props.clearAllFilters()\n props.clearPlanEntries()\n props.loadPlanEntries()\n }}\n >\n Try using different filter options\n \n
\n \n We looked but this search has zero matches\n
\n\n
\n \n
\n \n (\n {\n window.location.href = `${\n this.props.baseUrl\n }/filter?categories=${value}`\n }}\n />\n )}\n onSort={order => {\n window.location.href = `${this.props.baseUrl}/filter?order=${order}`\n }}\n />\n
\n )\n }\n}\n\nExploreCarouselPage.propTypes = {\n allProductCount: PropTypes.number,\n categories: PropTypes.array,\n featuredProducts: PropTypes.array,\n setupCategories: PropTypes.func,\n setFeaturedProducts: PropTypes.func,\n baseUrl: PropTypes.string\n}\n\nconst mapStateToProps = state => {\n return {\n featuredProducts: featuredProducts(state)\n }\n}\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n setupCategories: () => {\n dispatch(insertPlanCategories(ownProps.categories, true))\n },\n setFeaturedProducts: () => {\n dispatch(setFeaturedProducts(ownProps.featuredProducts))\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ExploreCarouselPage)\n","const options = {\n nav: true,\n navSpeed: 200,\n dots: false,\n dotsSpeed: 200,\n items: 3,\n slideBy: 3,\n rewind: false,\n responsive: {\n 0: {\n items: 3,\n slideBy: 1,\n stagePadding: 15\n },\n 768: {\n items: 2,\n slideBy: 1,\n stagePadding: 0,\n margin: 50\n },\n 1200: {\n items: 2,\n slideBy: 1,\n stagePadding: 0,\n margin: 50\n },\n 1600: {\n items: 2,\n slideBy: 1,\n stagePadding: 0,\n margin: 50\n }\n }\n}\n\nexport default options\n","import Playlist from '../../models/Playlist'\nimport { loadPlanEntriesSuccess } from '../../redux/actions/planEntries'\n\nconst NUM_PLAYLISTS_PER_FETCH = 5\n\nexport const CLEAR_PLAYLIST_ENTRIES = 'CLEAR_PLAYLIST_ENTRIES'\nexport const START_FETCH_PLAYLISTS = 'START_FETCH_PLAYLISTS'\nexport const FETCH_PLAYLISTS_SUCCESS = 'FETCH_PLAYLISTS_SUCCESS'\nexport const FETCH_PLAYLISTS_ERROR = 'FETCH_PLAYLISTS_ERROR'\nexport const SET_PLAYLIST_ORDER = 'SET_PLAYLIST_ORDER'\nexport const START_CREATE_NEW_PLAYLIST = 'START_CREATE_NEW_PLAYLIST'\nexport const FINISH_CREATE_NEW_PLAYLIST = 'FINISH_CREATE_NEW_PLAYLIST'\nexport const SET_DISPLAYED_PLAYLIST = 'SET_DISPLAYED_PLAYLIST'\nexport const START_FETCH_PLAYLIST_ENTRIES = 'START_FETCH_PLAYLIST_ENTRIES'\nexport const FETCH_PLAYLIST_ENTRIES_SUCCESS = 'FETCH_PLAYLIST_ENTRIES_SUCCESS'\nexport const SET_DISPLAYED_PLAYLIST_ENTRIES_ORDER =\n 'SET_DISPLAYED_PLAYLIST_ENTRIES_ORDER'\nexport const PLAYLIST_FEATURED = 'PLAYLIST_FEATURED'\nexport const PLAYLIST_UNFEATURED = 'PLAYLIST_UNFEATURED'\nexport const PLAYLIST_UPDATED = 'PLAYLIST_UPDATED'\nexport const PLAYLIST_DELETED = 'PLAYLIST_DELETED'\nexport const REORDER_USER_PLAYLISTS = 'REORDER_USER_PLAYLISTS'\n\nexport function startCreateNewPlaylist () {\n return {\n type: START_CREATE_NEW_PLAYLIST\n }\n}\n\nexport function finishCreateNewPlaylist (playlist, firstPlanEntryId) {\n return {\n type: FINISH_CREATE_NEW_PLAYLIST,\n playlist,\n firstPlanEntryId\n }\n}\n\nexport function setDisplayedPlaylist (playlist) {\n return {\n type: SET_DISPLAYED_PLAYLIST,\n playlist\n }\n}\n\nexport function setDisplayedPlaylistEntriesOrder (orderObj) {\n return {\n type: SET_DISPLAYED_PLAYLIST_ENTRIES_ORDER,\n orderObj\n }\n}\n\nexport function createNewPlaylist (\n playlistTitle,\n firstPlanEntryId,\n callback = () => {}\n) {\n return dispatch => {\n dispatch(startCreateNewPlaylist())\n Playlist.createNew(playlistTitle, firstPlanEntryId).then(res => {\n dispatch(finishCreateNewPlaylist(res.data, firstPlanEntryId))\n callback(res.data)\n })\n }\n}\n\nexport function setOrder (order) {\n return {\n type: SET_PLAYLIST_ORDER,\n order\n }\n}\n\nexport function startFetchPlaylists (reloadAll) {\n return {\n type: START_FETCH_PLAYLISTS,\n reloadAll\n }\n}\n\nexport function fetchPlaylistsSuccess (playlists, total, reloadAll) {\n return {\n type: FETCH_PLAYLISTS_SUCCESS,\n playlists,\n total,\n reloadAll\n }\n}\n\nexport function fetchPlaylistsError (error) {\n return {\n type: FETCH_PLAYLISTS_ERROR,\n error\n }\n}\n\nexport function clearPlaylistEntries () {\n return {\n type: CLEAR_PLAYLIST_ENTRIES\n }\n}\n\nexport function startFetchPlaylistEntries () {\n return {\n type: START_FETCH_PLAYLIST_ENTRIES\n }\n}\n\nexport function fetchPlaylistEntriesSuccess () {\n return {\n type: FETCH_PLAYLIST_ENTRIES_SUCCESS\n }\n}\n\nexport function playlistFeatured (uuid) {\n return {\n type: PLAYLIST_FEATURED,\n uuid\n }\n}\n\nexport function playlistUnfeatured (uuid) {\n return {\n type: PLAYLIST_UNFEATURED,\n uuid\n }\n}\n\nexport function playlistUpdated (uuid, params) {\n return {\n type: PLAYLIST_UPDATED,\n uuid,\n params\n }\n}\n\nexport function playlistDeleted (uuid) {\n return {\n type: PLAYLIST_DELETED,\n uuid\n }\n}\n\nexport function reorderUserPlaylists (order) {\n return {\n type: REORDER_USER_PLAYLISTS,\n order\n }\n}\n\nexport function fetchPlaylists (reloadAll, callback = () => {}) {\n return (dispatch, getState) => {\n dispatch(startFetchPlaylists(reloadAll))\n const state = getState()\n const page = state.ui.playlists.page\n Playlist.findAll({\n order: state.ui.playlists.order,\n per_page: NUM_PLAYLISTS_PER_FETCH,\n page\n })\n .then(res => {\n dispatch(fetchPlaylistsSuccess(res.data, res.headers.total, reloadAll))\n callback()\n })\n .catch(e => {\n dispatch(fetchPlaylistsError(e))\n })\n }\n}\n\nexport function fetchPlaylistEntries (playlist) {\n return (dispatch, getState) => {\n const state = getState()\n\n const page = state.ui.playlists.playlistEntriesPage\n\n dispatch(startFetchPlaylistEntries())\n\n let entryParams = {\n per_page: 20,\n page,\n ...state.ui.playlists.entriesOrder\n }\n\n playlist.fetchPlanEntries(entryParams).then(response => {\n dispatch(fetchPlaylistEntriesSuccess())\n dispatch(loadPlanEntriesSuccess(response.data, response.headers.total))\n })\n }\n}\n\nexport function featurePlaylist (playlist) {\n return dispatch => {\n return new Promise(resolve => {\n playlist.feature().then(() => {\n dispatch(playlistFeatured(playlist.uuid))\n resolve()\n })\n })\n }\n}\n\nexport function unfeaturePlaylist (playlist) {\n return dispatch => {\n return new Promise(resolve => {\n playlist.unfeature().then(() => {\n dispatch(playlistUnfeatured(playlist.uuid))\n resolve()\n })\n })\n }\n}\n\nexport function updatePlaylist (playlist, params, callback) {\n return dispatch => {\n playlist.updateBackend(params).then(res => {\n dispatch(playlistUpdated(playlist.uuid, res.data))\n if (callback) callback()\n })\n }\n}\n","import ReactDOM from 'react-dom'\nimport videojs from 'video.js'\nimport React from 'react'\nimport Switch from 'react-bootstrap-switch'\nimport axiosInstance from 'api/axios.config'\n\nconst vjsComponent = videojs.getComponent('Component')\n\nclass Autoplay extends vjsComponent {\n constructor (player, options) {\n super(player, options)\n\n this.autoplayActive = options.autoplay\n this.mountElement = this.mountElement.bind(this)\n this.createAutoplaySwitch = this.createAutoplaySwitch.bind(this)\n\n player.ready(() => {\n this.mountElement()\n })\n\n /* Remove React root when component is destroyed */\n this.on('dispose', () => {\n ReactDOM.unmountComponentAtNode(this.el())\n })\n }\n\n mountElement () {\n ReactDOM.render(this.createAutoplaySwitch(), this.el())\n }\n\n handleAutoplayChange () {\n axiosInstance.post('/preferences/toggle_autoplay').catch(e => {\n console.error(e.message)\n })\n }\n\n createAutoplaySwitch () {\n let autoplayText = Autoplay\n\n return (\n \n
\n \n \n See all styles\n \n
\n \n
\n \n {props.children}\n
\n )\n}\n\nDataPageCover.propTypes = {\n children: PropTypes.node\n}\n\nexport default DataPageCover\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport './ErrorSummary.scss'\n\nconst ErrorSummary = ({ children }) => (\n \n \n
\n )\n }\n}\n\nField.propTypes = {\n as: PropTypes.oneOfType([PropTypes.func, PropTypes.string]).isRequired,\n className: PropTypes.string,\n error: PropTypes.bool,\n htmlFor: PropTypes.string,\n label: PropTypes.string,\n name: PropTypes.string,\n onChange: PropTypes.func,\n placeholder: PropTypes.string,\n style: PropTypes.object,\n autoComplete: PropTypes.string,\n autoFocus: PropTypes.bool,\n disabled: PropTypes.bool,\n type: PropTypes.string,\n value: PropTypes.string\n}\n\nexport default Field\n","import React from 'react'\n\nimport './Link.scss'\n\nconst Link = ({ className, children, ...rest }) => {\n if (className) {\n className = `Link ${className}`\n } else {\n className = 'Link'\n }\n\n return (\n \n {children}\n \n )\n}\n\nexport default Link\n","import React from 'react'\nimport SchemaSectionRenderer from '../../components_v1/SchemaSectionRenderer'\nimport styled from 'styled-components'\nimport { useFetchAPI } from 'hooks'\n\nconst WidgetOuter = styled.div`\n display: flex;\n gap: 32px;\n flex-direction: column;\n padding-top: 0;\n padding-bottom: 0;\n\n .main-flex {\n max-width: 716px;\n margin: 0 4%;\n @media screen and (min-width: 768px) {\n margin: 0;\n }\n\n @media screen and (min-width: 712px) {\n max-width: none;\n }\n }\n`\n\nconst BottomWidget = ({ id, type }) => {\n const [{ data: schema }] = useFetchAPI(\n `/recommendations/page/${type}/${id}/position/bottom`\n )\n\n if (!schema) {\n return null\n }\n\n return (\n {deleteUndo}
\n {listContent}
\n }\n}\n\nFavoritesList.defaultProps = {\n favorites: []\n}\n\nFavoritesList.propTypes = {\n favorites: PropTypes.object,\n fetchFavorites: PropTypes.func,\n loading: PropTypes.bool,\n removeFavorite: PropTypes.func,\n totalFavorites: PropTypes.number,\n clearFavorites: PropTypes.func,\n setFavoritesOrder: PropTypes.func,\n clearFavoritesOrder: PropTypes.func,\n orderBy: PropTypes.string\n}\n\nconst mapStateToProps = state => {\n return {\n favorites: getFavorites(state),\n loading: state.ui.favorites.loading,\n totalFavorites: parseInt(state.ui.favorites.total),\n orderBy: state.ui.favorites.orderInfo.order\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n fetchFavorites: reloadAll => {\n dispatch(fetchFavorites(reloadAll))\n },\n setFavoritesOrder: orderInfo => {\n dispatch(setFavoritesOrder(orderInfo))\n },\n clearFavorites: () => {\n dispatch(clearFavorites())\n },\n removeFavorite: favoriteId => {\n dispatch(favoriteRemoved(favoriteId))\n },\n clearFavoritesOrder: () => {\n dispatch(clearFavoritesOrder())\n }\n }\n}\n\nexport default withRedux(\n withUser(connect(mapStateToProps, mapDispatchToProps)(FavoritesList))\n)\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport axiosInstance from 'api/axios.config'\nimport { axiosPlain } from 'api'\n\nimport AloButton from '../../AloButton'\nimport CancellationQuestion from './CancellationQuestion'\nimport CancellationOfferModal from './CancellationOfferModal'\n\nimport './CancellationSurvey.scss'\n\n\nconst unexpectedError = \"Oops, something went wrong. Please contact support@alomoves.com and we'll get to the bottom of it.\"\n\nclass CancellationSurvey extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n showOfferModal: false,\n eligibleForOffer: false,\n error: null,\n action: null,\n modalMessage: undefined\n }\n this.handleSubmit = this.handleSubmit.bind(this)\n this.handleModalClose = this.handleModalClose.bind(this)\n this.handleModalConfirmCancel = this.handleModalConfirmCancel.bind(this)\n this.handleModalAcceptOffer = this.handleModalAcceptOffer.bind(this)\n this.onReasonChange = this.onReasonChange.bind(this)\n this.onDetailsChange = this.onDetailsChange.bind(this)\n }\n\n componentDidMount() {\n this.checkOffer()\n }\n\n detailsStateKey(questionKey, reasonKey) {\n return 'detailsText' + questionKey + ':' + reasonKey\n }\n\n buttonClicked(action) {\n this.setState({\n error: null,\n action\n })\n }\n\n processError(response) {\n let message\n if (!response || response.status >= 500) {\n message = unexpectedError\n } else {\n message = response.data.error || response.data.message || response.statusText\n }\n\n this.setState({\n error: message,\n action: null\n })\n }\n\n // \n // API calls\n // \n\n checkOffer() {\n // Get eligiblity status for cancellation offer\n axiosInstance\n .get('users/me/membership/stripe/cancellation_offer')\n .then(response => {\n this.setState({\n eligibleForOffer: response.data.eligible\n })\n })\n .catch(error => {\n // Fail silently\n })\n }\n\n acceptOffer() {\n axiosInstance\n .post('users/me/membership/stripe/cancellation_offer', {})\n .then(response => {\n if (response.data.status === 'unprocessable_entity') {\n this.processError(response)\n } else {\n // TODO: remove-candy-check -- hook into context provider refresh; maybe also close the modal?\n this.handleModalClose()\n this.props.closeCallback('offerAccepted')\n // Checking the offer here since they've accepted the offer at this point\n // and if they were to click the cancel button again, they should no longer\n // be eligible for the cancellation offer.\n this.checkOffer()\n }\n })\n .catch(error => {\n this.processError(error.response)\n })\n }\n\n submitSurvey() {\n // Prep form data\n let responses = []\n let reasonKey\n\n this.props.questions.forEach(question => {\n reasonKey = this.state['selectedReason' + question.key]\n\n if (reasonKey) {\n responses.push({\n question: question.key,\n reason: reasonKey,\n details: this.state[this.detailsStateKey(question.key, reasonKey)]\n })\n }\n })\n\n // Submit survey\n if (responses.length > 0) {\n axiosInstance\n .post('cancellation_surveys', {\n responses: responses\n })\n .catch(error => {\n // Fail silently\n })\n }\n }\n\n cancelMembership() {\n axiosPlain\n .delete('users/me/membership/stripe')\n .then((res) => {\n // TODO: remove-candy-check -- hook into context provider refresh; maybe also close the modal?\n this.props.closeCallback('cancelled')\n this.handleModalClose()\n if (res.data?.ga4_event) {\n window.dataLayer.push(res.data.ga4_event)\n }\n })\n .catch((error) => {\n this.processError(error.response)\n })\n }\n // \n // Form handlers\n // \n\n handleSubmit(e) {\n e.preventDefault()\n\n this.setState({\n showOfferModal: true\n })\n }\n\n // \n // Modal handlers\n // \n\n handleModalClose() {\n this.setState({\n showOfferModal: false,\n error: null,\n action: null\n })\n }\n\n handleModalConfirmCancel() {\n this.buttonClicked('cancel')\n this.submitSurvey()\n this.cancelMembership()\n }\n\n handleModalAcceptOffer() {\n this.buttonClicked('accept')\n this.acceptOffer()\n }\n\n // \n // Input handlers (called by CancellationReason)\n // \n\n onReasonChange(question, reason) {\n this.setState({\n ['selectedReason' + question.key]: reason.key\n })\n\n if (reason.modalMessage) {\n this.setState({\n modalMessage: reason.modalMessage\n })\n }\n }\n\n onDetailsChange(question, reason, val) {\n this.setState({\n [this.detailsStateKey(question.key, reason.key)]: val\n })\n }\n\n ///////////////////////////////////////////////////////////\n\n render() {\n return (\n \n
\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n playlists: playlists(state),\n total: parseInt(state.ui.playlists.total),\n loading: state.ui.playlists.loading,\n order: state.ui.playlists.order,\n reloadingAll: state.ui.playlists.reloadingAll\n }\n}\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n fetchPlaylists: (reloadAll, callback) => {\n dispatch(fetchPlaylists(reloadAll, callback))\n },\n setOrder: (order) => {\n dispatch(setOrder(order))\n }\n }\n}\n\nPlaylistGrid.propTypes = {\n defaultOrder: PropTypes.string,\n baseUrl: PropTypes.string,\n fetchPlaylists: PropTypes.func,\n playlists: PropTypes.array,\n total: PropTypes.number,\n order: PropTypes.string,\n setOrder: PropTypes.func,\n loading: PropTypes.bool,\n reloadingAll: PropTypes.bool\n}\n\nexport default withRedux(\n connect(mapStateToProps, mapDispatchToProps)(PlaylistGrid)\n)\n","import React, { useEffect, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport lodashDebounce from 'lodash.debounce'\n\nimport StyledWrapper from './StyledWrapper'\nimport Header from 'components_v2/Header'\nimport { useAuthFeedback } from 'components_v2/AuthProviders'\nimport { ToastContainer } from 'ui/bend'\n\nimport './StyledHeader.scss'\n\n/*\nThis component is used as a shim to replace the old transparent header/nav on pages that have not been re-designed/Reactified yet.\nHowever, sticky positioning isn't compatible with the old layout. Use fixed positioning here instead.\nThis is somewhat convoluted because the alert bar is loaded via an API call after page load.\n\nWe place \n
\n \n Showing {this.props.total || 0} Playlists\n
\n \n {\n this.props.setOrder(order)\n this.props.fetchPlaylists(true, () => {\n window.history.pushState(\n this.props.order,\n null,\n `${this.props.baseUrl}?order=${this.props.order}`\n )\n })\n }}\n />\n
\n \n {\n if (!this.props.reloadingAll) {\n return this.props.playlists.map((playlist) => (\n
\n \n
\n ))\n }\n }}\n />\n {decorator}
\n