\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 (\n \n Change Payment Method\n \n )\n}\n\nexport default SubmitButton\n","import PaymentMethods from './PaymentMethods'\n\nexport default PaymentMethods\n","import React from 'react'\n\nimport { Flex, P } from 'ui/bend'\nimport SubmitButton from './SubmitButton'\nimport { useActiveMembershipContext } from '../../../ActiveMembershipStore'\n\nconst PaymentMethods = () => {\n const { paymentMethods } = useActiveMembershipContext()\n return (\n \n {paymentMethods && paymentMethods.length > 0 ? (\n <>\n Your current payment method
\n {paymentMethods[0].cardName}
\n {paymentMethods.length > 1 && (\n <>\n Other 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 )}\n \n )\n}\n\nexport default PaymentMethods\n","import React, { Suspense, useEffect, useState } from 'react'\nimport camelize from 'camelize'\n\nimport { useActiveMembershipContext } from '../../ActiveMembershipStore'\nimport { useSubscribeContext } from 'context'\nimport { useAlert } from 'hooks'\nimport { Spinner } from 'ui/bend'\n\nconst CancellationSurvey = React.lazy(() =>\n import(\n /* webpackChunkName: 'cancellation-survey' */ 'components_v1/membership/cancellationSurvey/CancellationSurvey'\n )\n)\n\nconst CancelMembership = (props) => {\n const [surveyQuestions, setSurveyQuestions] = useState([])\n const { actions } = useSubscribeContext()\n const { refreshMembershipInfo } = useActiveMembershipContext()\n const setAlert = useAlert()\n\n useEffect(() => {\n const url =\n 'https://alomoves.s3.amazonaws.com/manual_uploads/shared/surveys/cancellation/cancellation_survey_questions_v3.json'\n\n const getSurveyQuestions = async () => {\n // We use fetch here because the URL is stored as a json blob on s3.\n fetch(url)\n .then((res) => res.json())\n .then((res) => setSurveyQuestions(camelize(res)))\n }\n\n getSurveyQuestions()\n }, [])\n\n const handleClose = (condition) => {\n switch (condition) {\n case 'offerAccepted': {\n setAlert({\n message: 'We have added additional time to your account!'\n })\n break\n }\n case 'cancelled': {\n setAlert({\n message: 'We have cancelled your account.'\n })\n break\n }\n default: {\n break\n }\n }\n actions.membership.refreshPlans()\n refreshMembershipInfo()\n }\n\n // TODO: remove-candy-check -- Refactor CancellationSurvey into V2 and split business and display logic.\n return (\n \n {plan && (\n \n Your payment schedule \n {plan.description && (\n \n )}\n\n \n \n {!isFlexUser && (\n \n \n \n \n \n \n )}\n \n )\n}\n\nexport default RenewStripe\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { useTheme } from 'styled-components'\n\nimport { Button, Flex, H5, P } from 'ui/bend'\n\nconst getSourceProps = (source) => {\n switch (source) {\n case 'ios': {\n return {\n text: 'iTunes',\n cta: 'Apple',\n href: 'https://support.apple.com/en-us/HT202039'\n }\n }\n default: {\n return {\n text: 'N/A',\n cta: 'N/A',\n href: 'https://alomoves.com'\n }\n }\n }\n}\n\nconst RenewNonStripe = ({ source }) => {\n const { colors } = useTheme()\n\n const { cta, href, text } = getSourceProps(source)\n\n return (\n \n \n Your Membership is maintained through {text}\n \n Please go there to manage your account.
\n \n Manage {cta} Subscriptions\n \n \n )\n}\n\nRenewNonStripe.propTypes = {\n source: PropTypes.string.isRequired\n}\n\nexport default RenewNonStripe\n","import Renewing from './Renewing'\n\nexport default Renewing\n","import React, { Fragment } from 'react'\n\nimport RenewStripe from './RenewStripe'\nimport RenewNonStripe from './RenewNonStripe'\nimport { useActiveMembershipContext } from '../../ActiveMembershipStore'\n\nconst Renewing = ({ stripeApiKey }) => {\n const {\n membershipInfo: { subscriptionSource }\n } = useActiveMembershipContext()\n\n const RenderRenewingBySource = () => {\n switch (subscriptionSource) {\n // If payment is flexsubscriptionSource will be 'stripe'\n case 'stripe': {\n return {RenderRenewingBySource()} \n}\n\nexport default Renewing\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport { P } from 'ui/bend'\nimport { useActiveMembershipContext } from '../ActiveMembershipStore'\nimport { humanReadableDate, humanReadableTime } from './formatTimes'\n\nconst Unlimited = () => {\n const {\n membershipInfo: { subscriptionEndTime }\n } = useActiveMembershipContext()\n\n const date = new Date(subscriptionEndTime)\n return (\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 {membershipInfo &&\n renderSubscriptionComponents(membershipInfo.subscriptionState)}\n \n )\n}\n\nexport default SubscriptionStates\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport ActiveMembershipProvider from './ActiveMembershipStore'\nimport SubscriptionStates from './SubscriptionStates'\n\nconst ActiveMembership = ({ handleError }) => {\n return (\n \n \n )\n}\n\nActiveMembership.propTypes = {\n handleError: PropTypes.func.isRequired\n}\n\nexport default ActiveMembership\n","import React, { Fragment, useEffect, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport { useTheme } from 'styled-components'\n\nimport { axios } from 'api'\nimport { Button, Flex, P } from 'ui/bend'\n\nconst InactiveMembership = ({ handleError }) => {\n const [status, setStatus] = useState()\n // We need to manually set the color of buttons acting as anchor tags in legacy components, due to style sheets overriding one another.\n const { colors } = useTheme()\n\n useEffect(() => {\n const fetchMembershipStatus = async () => {\n try {\n const res = await axios.get('/users/me/membership/latest')\n if (res) {\n setStatus(res.data.status)\n }\n } catch (error) {\n handleError(error)\n }\n }\n\n fetchMembershipStatus()\n }, [])\n\n const handleTemporaryAccess = async () => {\n try {\n const res = await axios.post('/users/me/membership/should_have_access')\n if (res) {\n window.location.href = '/'\n }\n } catch (error) {\n handleError(error)\n }\n }\n\n return (\n \n {status && status === 'unknown' ? (\n \n \n We are having a problem accessing your account details. Please click\n below to gain access.\n
\n Gain Temporary Access \n \n ) : (\n \n \n You do not have an active Alo Moves Membership.\n
\n \n Sign Up\n \n \n )}\n \n )\n}\n\nInactiveMembership.propTypes = {\n handleError: PropTypes.func.isRequired\n}\n\nexport default InactiveMembership\n","import React, { useState } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { StripeCheckoutProvider, useUserContext } from 'context'\nimport { Feedback } from 'ui/bend'\n\nimport ActiveMembership from './ActiveMembership'\nimport InactiveMembership from './InactiveMembership'\n\nconst EditMembership = ({ stripeApiKey }) => {\n const [error, setError] = useState()\n const { user } = useUserContext()\n\n const handleError = (error) => {\n if (error.message) {\n setError(error.message)\n } else {\n setError(\n 'We apologize, but there has been an error. Please contact support@alomoves.com for additional assistance.'\n )\n }\n }\n\n return (\n \n {user.hasSubscriptionAccess ? (\n {error} }\n \n )\n}\n\nEditMembership.propTypes = {\n stripeApiKey: PropTypes.string.isRequired\n}\n\nexport default EditMembership\n","import EditMembership from './EditMembership'\nexport default EditMembership\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport StyledWrapper from './StyledWrapper'\nimport EditMembership from 'components_v2/Membership/Edit'\n\nconst EditMembershipWrapper = ({ user, ...rest }) => {\n return (\n \n \n )\n}\n\nEditMembershipWrapper.propTypes = {\n user: PropTypes.object\n}\n\nexport default EditMembershipWrapper\n","import { Field } from 'formik'\nimport styled from 'styled-components'\nimport { P, Button as Submit } from 'ui/bend'\nimport React from 'react'\n\nexport const Main = styled.div`\n max-width: 1200px;\n margin: 0 auto;\n padding: 30px;\n background-color: #f4f7fb;\n border-radius: 12px;\n\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n button {\n outline: none;\n }\n .flex-box {\n display: flex;\n justify-content: space-between;\n align-items: center;\n .left {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n button {\n border-radius: 6px !important;\n }\n }\n\n .btn {\n border-radius: 4px !important;\n }\n .section-item {\n background-color: #f4f7fb;\n padding: 12px;\n border-radius: 12px;\n }\n .remove-button-col {\n display: flex;\n align-self: center;\n padding-top: 0.5rem;\n }\n .submit-box {\n margin-top: 24px;\n }\n .section {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n .align-items-center {\n display: grid;\n gap: 16px;\n margin: 8px 0;\n grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));\n label {\n margin-bottom: 5px;\n }\n &.title-row {\n margin-bottom: 16px;\n }\n }\n .remove-item {\n button {\n width: fit-content;\n margin-top: 12px;\n }\n }\n .section {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n }\n .section-title-row {\n margin-bottom: 16px;\n }\n .section-item-actions {\n display: flex;\n gap: 16px;\n align-items: center;\n flex-wrap: wrap;\n\n .up,\n .down {\n padding: 6px;\n border: none;\n color: white;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n outline: none;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .up svg {\n transform: rotate(90deg);\n }\n .down svg {\n transform: rotate(270deg);\n }\n .move-field {\n select {\n padding: 4px;\n }\n }\n }\n`\n\nconst DragButton = styled.button`\n cursor: move;\n padding: 8px;\n background: white;\n border: 1px solid rgba(0, 0, 0, 0.2) !important;\n outline: none;\n height: 35px;\n width: 35px;\n`\n\nexport const DragButtonComponent = (props) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n)\n\nexport const SectionWrapper = styled.div`\n background-color: #fff;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n margin-bottom: 20px;\n padding: 25px;\n min-height: 100px;\n`\n\nexport const SectionHeader = styled.h4`\n color: #333;\n font-size: 16px;\n margin-bottom: 15px;\n font-weight: 600;\n`\n\nexport const FieldWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`\n\nexport const Input = styled(Field)`\n padding: 8px;\n font-size: 14px;\n border: 1px solid #ccc;\n border-radius: 8px;\n transition: border 0.2s ease;\n\n &:focus {\n border-color: #007bff;\n outline: none;\n }\n`\n\nexport const Select = styled.select`\n padding: 8px;\n font-size: 14px;\n border: 1px solid #ccc;\n border-radius: 8px;\n transition: border 0.2s ease;\n\n &:focus {\n border-color: #007bff;\n outline: none;\n }\n`\n\nexport const Label = styled.label`\n font-size: 14px;\n color: #555;\n margin-bottom: 8px;\n font-weight: 500;\n`\n\nexport const AddButton = styled.button`\n padding: 12px 20px;\n color: #fff;\n border: none;\n cursor: pointer;\n transition: background-color 0.2s ease;\n outline: none;\n`\n\nexport const RemoveButton = styled(AddButton)`\n &.section,\n &.collapse-button {\n width: 30px;\n height: 30px;\n background-color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 6px;\n background: rgba(0, 0, 0, 0.1);\n &:hover {\n background: rgba(0, 0, 0, 0.2);\n }\n &.closed svg {\n transform: rotate(180deg);\n transition: transform 0.25s ease-in-out;\n }\n &.opened svg {\n transform: rotate(270deg);\n transition: transform 0.25s ease-in-out;\n }\n }\n &.section {\n padding: 6px;\n }\n &.section-delete {\n width: 35px;\n height: 35px;\n display: flex;\n align-items: center;\n }\n`\n\nexport const SubmitButton = styled(Submit)`\n background-color: #28a745;\n border: none;\n padding: 12px 20px;\n font-size: 16px;\n font-weight: bold;\n cursor: pointer;\n\n &:hover {\n background-color: #218838;\n }\n\n &:focus {\n outline: none;\n }\n`\n\nexport const SuccessMessage = styled(P)`\n color: #28a745;\n font-weight: 600;\n margin-top: 15px;\n`\nexport const ErrorMessage = styled(P)`\n color: #c82333;\n font-weight: 500;\n margin-top: 15px;\n`\n","import React from 'react'\nimport { FieldWrapper, Label, Select, Input, RemoveButton } from './Components'\nimport { LeftArrowIcon } from 'components_v2/Icons'\n\nconst SectionItem = ({\n itemIndex,\n item,\n setFieldValue,\n getClassListbyPlan,\n seriesItems,\n itemList,\n bonusItems,\n sectionIndex,\n remove,\n moveSectionIndex,\n errors,\n length\n}) => {\n return (\n \n
\n
\n Type \n {\n const { value } = e.target\n setFieldValue(\n `sections[${sectionIndex}].items[${itemIndex}].type`,\n value\n )\n if (value !== 'class_from_another_series') {\n setFieldValue(\n `sections[${sectionIndex}].items[${itemIndex}].series`,\n ''\n )\n }\n setFieldValue(\n `sections[${sectionIndex}].items[${itemIndex}].id`,\n ''\n )\n }}\n >\n Class \n \n Class from another series\n \n {bonusItems.length > 0 && Bonus }\n \n \n {item.type === 'class_from_another_series' && (\n
\n Series \n {\n const { value } = e.target\n setFieldValue(\n `sections[${sectionIndex}].items[${itemIndex}].series`,\n value\n )\n setFieldValue(\n `sections[${sectionIndex}].items[${itemIndex}].id`,\n ''\n )\n getClassListbyPlan(value)\n }}\n >\n \n Select a Series\n \n {seriesItems.map((series) => (\n \n {series.title}\n \n ))}\n \n \n )}\n
\n \n {item.type === 'bonus'\n ? 'Bonus Item'\n : item.type === 'series'\n ? 'Series'\n : 'Class'}\n \n {\n const { value } = e.target\n setFieldValue(\n `sections[${sectionIndex}].items[${itemIndex}].id`,\n value\n )\n }}\n disabled={\n (item.type === 'class_from_another_series' && !item.series) ||\n !(itemList.length > 0)\n }\n >\n \n Select a{' '}\n {item.type === 'bonus'\n ? 'Bonus Item'\n : item.type === 'series'\n ? 'Series'\n : 'Class'}\n \n {itemList.map((option) => (\n \n {option.title}\n \n ))}\n \n {errors?.sections?.[sectionIndex]?.items?.[itemIndex]?.id && (\n \n Item is required\n {item.type === 'class_from_another_series' &&\n !item.series &&\n ` (Pick a series to enable)`}\n
\n )}\n \n
\n
\n \n Tag \n \n\n \n Description \n \n
\n
\n remove(itemIndex)}\n >\n Remove Item\n \n {length && length > 1 && (\n <>\n {\n e.preventDefault()\n moveSectionIndex(itemIndex, itemIndex - 1)\n }}\n >\n Move Up {\n e.preventDefault()\n moveSectionIndex(itemIndex, itemIndex + 1)\n }}\n >\n Move Down \n Move to \n {\n const { value } = e.target\n moveSectionIndex(itemIndex, value)\n }}\n value={itemIndex}\n >\n {Array.from({ length }, (_, index) => (\n \n {index + 1}\n \n ))}\n \n \n \n )}\n
\n
\n \n Submit\n \n\n {errorMessage ? (\n Error in {errorMessage} ! \n ) : (\n showSuccess && (\n Successfully saved updates! \n )\n )}\n
\n )\n}\n\nexport default SubmitButtonComponent\n","import React from 'react'\nimport { FieldWrapper, Input, Label } from './Components'\n\nconst SectionTitleRow = ({ sectionIndex, touched, errors }) => {\n return (\n \n
\n Title \n \n {errors.sections[sectionIndex].title}\n
\n )}\n \n
\n \n Description\n \n \n {errors.sections[sectionIndex].description}\n
\n )}\n \n
\n \n {({ values, setFieldValue, errors, touched }) => (\n \n )}\n \n \n )\n}\n\nexport default ContentStructure\n","import React, { Suspense } from 'react'\nimport { Flex, Loading, Spinner } from 'ui/bend'\n\nimport StyledAdminWrapper from './StyledAdminWrapper'\nimport ContentStructure from 'components_v2/Admin/ContentStructure/ContentStructure'\n\nconst SeriesStructure = ({\n bonusItems = [],\n classes = [],\n seriesItems = []\n}) => {\n const error = ''\n return (\n \n \n {error} }\n >\n \n \n \n \n )\n}\n\nexport default SeriesStructure\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => \n
\n {({ animateIn }) => {\n return (\n \n
{\n setNewPlayListModal(false)\n if (item.uuid) {\n addToPlaylist(item.uuid)\n }\n }}\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 if (!this.state.active && this.props.onHover) this.props.offHover()\n }}\n ref={this.popupContent}\n >\n {this.props.children}\n \n \n )\n }\n}\n\nHelpPopup.defaultProps = {\n onHover: () => {},\n offHover: () => {}\n}\n\nHelpPopup.propTypes = {\n children: PropTypes.node,\n offHover: PropTypes.func,\n leftOffset: PropTypes.number,\n onHover: PropTypes.func,\n topOffset: PropTypes.number,\n trigger: PropTypes.node,\n width: PropTypes.number\n}\n\nexport default HelpPopup\n","import Product from '../../../models/Product'\n\nimport { getProductRequestObj, buildFilterUrl } from '../../selectors/products'\nimport { setFilterUrl } from './filters'\n\nexport const START_LOAD_PRODUCTS = 'START_LOAD_PRODUCTS'\nexport const FETCH_PRODUCTS_SUCCESS = 'FETCH_PRODUCTS_SUCCESS'\nexport const FETCH_PRODUCTS_FAIL = 'FETCH_PRODUCTS_FAIL'\n\nexport function productRequestError (hasErrored) {\n return {\n type: FETCH_PRODUCTS_FAIL,\n hasErrored: hasErrored\n }\n}\n\nexport function startLoadProducts (reloadAll) {\n return {\n type: START_LOAD_PRODUCTS,\n reloadAll\n }\n}\n\nexport function productsFetchedSuccess (products, total, reloadAll) {\n return {\n type: FETCH_PRODUCTS_SUCCESS,\n products,\n total,\n reloadAll\n }\n}\n\nexport function loadProductsPage (reloadAll = true, callback = () => {}) {\n return (dispatch, getState) => {\n dispatch(startLoadProducts(reloadAll))\n\n const store = getState()\n // const filterParams = getProductRequestObj(store.ui.products.filters)\n const filterParams = { ...getProductRequestObj(store.ui.products.filters), ...store.ui.products.defaultFilter }\n const newUrl = buildFilterUrl(store.ui.products.filters)\n\n Product.findAll(filterParams)\n .then(response => {\n return response\n })\n .then(response => {\n dispatch(\n productsFetchedSuccess(\n response.data,\n response.headers.total,\n reloadAll\n )\n )\n dispatch(setFilterUrl(newUrl))\n callback()\n\n // Google Tag Manager\n if (window.dataLayer) {\n let planIds = []\n\n for (let i = 0; i < response.data.length; i++) {\n const product = response.data[i]\n if (product.actableType === 'Plan') {\n planIds.push('plan_' + product.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","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","import React from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport './SelectedFiltersDisplay.scss'\n\nconst SelectedFiltersDisplay = props => {\n let filteredItems = []\n\n for (const filter in props.filteredItemLabels) {\n if (!props.excludedFilters.includes(filter)) {\n const filteredLabels = props.filteredItemLabels[filter]\n const filteredLabelsList = filteredLabels?.map((label, idx) => {\n return (\n {\n props.onLabelClick(filter, label.meta, label.options)\n }}\n >\n {label.text} \n \n )\n })\n if (filteredLabelsList?.length > 0) {\n filteredItems.push(filteredLabelsList)\n }\n }\n }\n\n const SelectedFiltersDisplayClass = classNames(\n ['SelectedFiltersDisplay'].concat(props.additionalClassNames),\n {\n 'SelectedFiltersDisplay--selected': filteredItems.length > 0\n }\n )\n\n return (\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","var map = {\n\t\"./AloButton\": 109,\n\t\"./AloButton.js\": 109,\n\t\"./AloButton.scss\": 960,\n\t\"./AloModal\": 108,\n\t\"./AloModal.js\": 108,\n\t\"./AloModal.scss\": 954,\n\t\"./BuilderSection\": 314,\n\t\"./BuilderSection/\": 314,\n\t\"./BuilderSection/BuilderSection\": 487,\n\t\"./BuilderSection/BuilderSection.js\": 487,\n\t\"./BuilderSection/index\": 314,\n\t\"./BuilderSection/index.js\": 314,\n\t\"./DataPageCover\": 731,\n\t\"./DataPageCover.js\": 731,\n\t\"./DataPageCover.scss\": 1110,\n\t\"./EmptyState\": 333,\n\t\"./EmptyState.js\": 333,\n\t\"./ErrorSummary\": 732,\n\t\"./ErrorSummary.js\": 732,\n\t\"./ErrorSummary.scss\": 1111,\n\t\"./FadeInFullscreen\": 277,\n\t\"./FadeInFullscreen.js\": 277,\n\t\"./FadeInFullscreen.scss\": 959,\n\t\"./Field\": 733,\n\t\"./Field.js\": 733,\n\t\"./Field.scss\": 1733,\n\t\"./GreyPageHeader\": 293,\n\t\"./GreyPageHeader.js\": 293,\n\t\"./GreyPageHeader.scss\": 1097,\n\t\"./HorizontalScroll\": 1112,\n\t\"./HorizontalScroll.js\": 1112,\n\t\"./Link\": 734,\n\t\"./Link.js\": 734,\n\t\"./Link.scss\": 1113,\n\t\"./PrivateContent\": 385,\n\t\"./PrivateContent.js\": 385,\n\t\"./PrivateContent.scss\": 971,\n\t\"./SchemaSectionRenderer\": 315,\n\t\"./SchemaSectionRenderer/\": 315,\n\t\"./SchemaSectionRenderer/MyPraticeSummary/MyPraticeCards\": 490,\n\t\"./SchemaSectionRenderer/MyPraticeSummary/MyPraticeCards.js\": 490,\n\t\"./SchemaSectionRenderer/MyPraticeSummary/MyPraticeSummary\": 489,\n\t\"./SchemaSectionRenderer/MyPraticeSummary/MyPraticeSummary.js\": 489,\n\t\"./SchemaSectionRenderer/RecommendationWidget\": 316,\n\t\"./SchemaSectionRenderer/RecommendationWidget/\": 316,\n\t\"./SchemaSectionRenderer/RecommendationWidget/index\": 316,\n\t\"./SchemaSectionRenderer/RecommendationWidget/index.js\": 316,\n\t\"./SchemaSectionRenderer/SchemaSectionRenderer\": 488,\n\t\"./SchemaSectionRenderer/SchemaSectionRenderer.js\": 488,\n\t\"./SchemaSectionRenderer/common/components\": 142,\n\t\"./SchemaSectionRenderer/common/components/\": 142,\n\t\"./SchemaSectionRenderer/common/components/Carousel/ButtonBase\": 317,\n\t\"./SchemaSectionRenderer/common/components/Carousel/ButtonBase.js\": 317,\n\t\"./SchemaSectionRenderer/common/components/Carousel/Carousel\": 335,\n\t\"./SchemaSectionRenderer/common/components/Carousel/Carousel.js\": 335,\n\t\"./SchemaSectionRenderer/common/components/Carousel/CarouselNextButton\": 492,\n\t\"./SchemaSectionRenderer/common/components/Carousel/CarouselNextButton.js\": 492,\n\t\"./SchemaSectionRenderer/common/components/Carousel/CarouselPrevButton\": 493,\n\t\"./SchemaSectionRenderer/common/components/Carousel/CarouselPrevButton.js\": 493,\n\t\"./SchemaSectionRenderer/common/components/ClassCard\": 441,\n\t\"./SchemaSectionRenderer/common/components/ClassCard.js\": 441,\n\t\"./SchemaSectionRenderer/common/components/ClassCountBadge\": 234,\n\t\"./SchemaSectionRenderer/common/components/ClassCountBadge.js\": 234,\n\t\"./SchemaSectionRenderer/common/components/FadeBox\": 452,\n\t\"./SchemaSectionRenderer/common/components/FadeBox.js\": 452,\n\t\"./SchemaSectionRenderer/common/components/KeepTrainingCard\": 448,\n\t\"./SchemaSectionRenderer/common/components/KeepTrainingCard.js\": 448,\n\t\"./SchemaSectionRenderer/common/components/Notification\": 451,\n\t\"./SchemaSectionRenderer/common/components/Notification.js\": 451,\n\t\"./SchemaSectionRenderer/common/components/Section/Section\": 491,\n\t\"./SchemaSectionRenderer/common/components/Section/Section.js\": 491,\n\t\"./SchemaSectionRenderer/common/components/SectionHeaders/AltSectionHeader\": 1114,\n\t\"./SchemaSectionRenderer/common/components/SectionHeaders/AltSectionHeader.js\": 1114,\n\t\"./SchemaSectionRenderer/common/components/SectionHeaders/SectionHeader\": 1115,\n\t\"./SchemaSectionRenderer/common/components/SectionHeaders/SectionHeader.js\": 1115,\n\t\"./SchemaSectionRenderer/common/components/SeriesCard\": 449,\n\t\"./SchemaSectionRenderer/common/components/SeriesCard.js\": 449,\n\t\"./SchemaSectionRenderer/common/components/TimeCodeBadge\": 193,\n\t\"./SchemaSectionRenderer/common/components/TimeCodeBadge.js\": 193,\n\t\"./SchemaSectionRenderer/common/components/ZenCard\": 450,\n\t\"./SchemaSectionRenderer/common/components/ZenCard.js\": 450,\n\t\"./SchemaSectionRenderer/common/components/index\": 142,\n\t\"./SchemaSectionRenderer/common/components/index.js\": 142,\n\t\"./SchemaSectionRenderer/common/styles\": 88,\n\t\"./SchemaSectionRenderer/common/styles/\": 88,\n\t\"./SchemaSectionRenderer/common/styles/AltHeaderText\": 443,\n\t\"./SchemaSectionRenderer/common/styles/AltHeaderText.js\": 443,\n\t\"./SchemaSectionRenderer/common/styles/CardSubtitle\": 447,\n\t\"./SchemaSectionRenderer/common/styles/CardSubtitle.js\": 447,\n\t\"./SchemaSectionRenderer/common/styles/CardTitle\": 446,\n\t\"./SchemaSectionRenderer/common/styles/CardTitle.js\": 446,\n\t\"./SchemaSectionRenderer/common/styles/HeaderCTAText\": 444,\n\t\"./SchemaSectionRenderer/common/styles/HeaderCTAText.js\": 444,\n\t\"./SchemaSectionRenderer/common/styles/HeaderText\": 442,\n\t\"./SchemaSectionRenderer/common/styles/HeaderText.js\": 442,\n\t\"./SchemaSectionRenderer/common/styles/SectionDivider\": 445,\n\t\"./SchemaSectionRenderer/common/styles/SectionDivider.js\": 445,\n\t\"./SchemaSectionRenderer/common/styles/index\": 88,\n\t\"./SchemaSectionRenderer/common/styles/index.js\": 88,\n\t\"./SchemaSectionRenderer/index\": 315,\n\t\"./SchemaSectionRenderer/index.js\": 315,\n\t\"./SchemaSectionRenderer/series\": 545,\n\t\"./SchemaSectionRenderer/series/\": 545,\n\t\"./SchemaSectionRenderer/series/BonusItem\": 608,\n\t\"./SchemaSectionRenderer/series/BonusItem.js\": 608,\n\t\"./SchemaSectionRenderer/series/CommonStyles\": 433,\n\t\"./SchemaSectionRenderer/series/CommonStyles.js\": 433,\n\t\"./SchemaSectionRenderer/series/ItemCards\": 607,\n\t\"./SchemaSectionRenderer/series/ItemCards.js\": 607,\n\t\"./SchemaSectionRenderer/series/badge\": 359,\n\t\"./SchemaSectionRenderer/series/badge.js\": 359,\n\t\"./SchemaSectionRenderer/series/index\": 545,\n\t\"./SchemaSectionRenderer/series/index.js\": 545,\n\t\"./SchemaSectionRenderer/series/play-list-menu\": 1189,\n\t\"./SchemaSectionRenderer/series/play-list-menu.js\": 1189,\n\t\"./accessedItems/AccessedItemImage\": 358,\n\t\"./accessedItems/AccessedItemImage.js\": 358,\n\t\"./accessedItems/AccessedItemTile\": 424,\n\t\"./accessedItems/AccessedItemTile.js\": 424,\n\t\"./accessedItems/AccessedItemTile.scss\": 1102,\n\t\"./accessedItems/AccessedItemsCarousel\": 604,\n\t\"./accessedItems/AccessedItemsCarousel.js\": 604,\n\t\"./accessedItems/AccessedItemsList\": 605,\n\t\"./accessedItems/AccessedItemsList.js\": 605,\n\t\"./accessedItems/AccessedItemsRow\": 725,\n\t\"./accessedItems/AccessedItemsRow.scss\": 725,\n\t\"./accessedItems/AcessedItemRow\": 606,\n\t\"./accessedItems/AcessedItemRow.js\": 606,\n\t\"./admin/videos/VideoPreviewWrapper\": 601,\n\t\"./admin/videos/VideoPreviewWrapper.js\": 601,\n\t\"./admin/videos/VideoToggle\": 602,\n\t\"./admin/videos/VideoToggle.js\": 602,\n\t\"./aloButton/TrackableButton\": 1116,\n\t\"./aloButton/TrackableButton.js\": 1116,\n\t\"./aloCarousel/AloCarousel\": 422,\n\t\"./aloCarousel/AloCarousel.js\": 422,\n\t\"./aloCarousel/AloCarousel.scss\": 1101,\n\t\"./aloCarousel/CarouselCard\": 423,\n\t\"./aloCarousel/CarouselCard.js\": 423,\n\t\"./aloCarousel/CarouselCard.scss\": 1100,\n\t\"./aloCheckbox/AloCheckbox\": 349,\n\t\"./aloCheckbox/AloCheckbox.js\": 349,\n\t\"./aloCheckbox/AloCheckbox.scss\": 1092,\n\t\"./aloDropdown/AloDropdown\": 474,\n\t\"./aloDropdown/AloDropdown.js\": 474,\n\t\"./bottomWidget/BottomWidget\": 735,\n\t\"./bottomWidget/BottomWidget.js\": 735,\n\t\"./bottomWidget/BottomWidgetTempEntry\": 1117,\n\t\"./bottomWidget/BottomWidgetTempEntry.js\": 1117,\n\t\"./cappedTextArea/CappedTextArea\": 485,\n\t\"./cappedTextArea/CappedTextArea.js\": 485,\n\t\"./elementHeightAnimator/ElementHeightAnimator\": 378,\n\t\"./elementHeightAnimator/ElementHeightAnimator.js\": 378,\n\t\"./elementHeightAnimator/ElementHeightAnimator.scss\": 1734,\n\t\"./elementSlider/ElementSlider\": 1118,\n\t\"./elementSlider/ElementSlider.js\": 1118,\n\t\"./favoriteButton/Favoritable\": 256,\n\t\"./favoriteButton/Favoritable.js\": 256,\n\t\"./favoriteButton/FavoritePlusButton\": 356,\n\t\"./favoriteButton/FavoritePlusButton.js\": 356,\n\t\"./favoriteButton/NestedMenuPlusIcon\": 595,\n\t\"./favoriteButton/NestedMenuPlusIcon.js\": 595,\n\t\"./favoriteButton/PlusIcon\": 287,\n\t\"./favoriteButton/PlusIcon.js\": 287,\n\t\"./favoriteButton/PlusIcon.scss\": 962,\n\t\"./favoritesList/FavoriteDeleteUndo\": 425,\n\t\"./favoritesList/FavoriteDeleteUndo.js\": 425,\n\t\"./favoritesList/FavoriteDeleteUndo.scss\": 1119,\n\t\"./favoritesList/FavoritesList\": 736,\n\t\"./favoritesList/FavoritesList.js\": 736,\n\t\"./favoritesList/FavoritesList.scss\": 1120,\n\t\"./featuredProducts/FeaturedProductCard\": 590,\n\t\"./featuredProducts/FeaturedProductCard.js\": 590,\n\t\"./featuredProducts/FeaturedProductsCarousel\": 589,\n\t\"./featuredProducts/FeaturedProductsCarousel.js\": 589,\n\t\"./filterList/FilterList\": 387,\n\t\"./filterList/FilterList.js\": 387,\n\t\"./filterList/FilterList.scss\": 980,\n\t\"./filterList/FilterListItem\": 388,\n\t\"./filterList/FilterListItem.js\": 388,\n\t\"./filterList/FilterListItem.scss\": 979,\n\t\"./filterPills/FilterPill\": 418,\n\t\"./filterPills/FilterPill.js\": 418,\n\t\"./filterPills/FilterPill.scss\": 1096,\n\t\"./filterPills/FilterPillsSection\": 581,\n\t\"./filterPills/FilterPillsSection.js\": 581,\n\t\"./filterUniButton\": 342,\n\t\"./filterUniButton/\": 342,\n\t\"./filterUniButton/FilterUniButton\": 416,\n\t\"./filterUniButton/FilterUniButton.js\": 416,\n\t\"./filterUniButton/FilterUniButton.scss\": 1095,\n\t\"./filterUniButton/FilterUniButtonModal\": 417,\n\t\"./filterUniButton/FilterUniButtonModal.js\": 417,\n\t\"./filterUniButton/FilterUniButtonModal.scss\": 1094,\n\t\"./filterUniButton/index\": 342,\n\t\"./filterUniButton/index.js\": 342,\n\t\"./filtersRow\": 546,\n\t\"./filtersRow/\": 546,\n\t\"./filtersRow/FilterDropdownSet\": 411,\n\t\"./filtersRow/FilterDropdownSet.scss\": 411,\n\t\"./filtersRow/FilterLabelsRow\": 147,\n\t\"./filtersRow/FilterLabelsRow.js\": 147,\n\t\"./filtersRow/FilterLabelsRow.scss\": 953,\n\t\"./filtersRow/FilterMetaLayout\": 224,\n\t\"./filtersRow/FilterMetaLayout.js\": 224,\n\t\"./filtersRow/FilterMetaLayout.scss\": 955,\n\t\"./filtersRow/FilterModal\": 276,\n\t\"./filtersRow/FilterModal.js\": 276,\n\t\"./filtersRow/FilterModal.scss\": 956,\n\t\"./filtersRow/FilterRangeSlider\": 222,\n\t\"./filtersRow/FilterRangeSlider.js\": 222,\n\t\"./filtersRow/FilterRangeSlider.scss\": 981,\n\t\"./filtersRow/FilterRowDropdown\": 102,\n\t\"./filtersRow/FilterRowDropdown.js\": 102,\n\t\"./filtersRow/FilterRowDropdown.scss\": 950,\n\t\"./filtersRow/FilterRowDropdownItem\": 91,\n\t\"./filtersRow/FilterRowDropdownItem.js\": 91,\n\t\"./filtersRow/FilterRowDropdownItem.scss\": 951,\n\t\"./filtersRow/FilterRowDropdownSet\": 547,\n\t\"./filtersRow/FilterRowDropdownSet.js\": 547,\n\t\"./filtersRow/FilterRowItem\": 275,\n\t\"./filtersRow/FilterRowItem.js\": 275,\n\t\"./filtersRow/FilterRowItem.scss\": 952,\n\t\"./filtersRow/FilterSidebarLayout\": 279,\n\t\"./filtersRow/FilterSidebarLayout.js\": 279,\n\t\"./filtersRow/FilterSidebarLayout.scss\": 982,\n\t\"./filtersRow/FilterSquares\": 252,\n\t\"./filtersRow/FilterSquares.js\": 252,\n\t\"./filtersRow/FilterSquares.scss\": 983,\n\t\"./filtersRow/SelectedFiltersDisplay\": 166,\n\t\"./filtersRow/SelectedFiltersDisplay.js\": 166,\n\t\"./filtersRow/SelectedFiltersDisplay.scss\": 958,\n\t\"./filtersRow/SliderDropdown\": 289,\n\t\"./filtersRow/SliderDropdown.js\": 289,\n\t\"./filtersRow/SliderDropdown.scss\": 1735,\n\t\"./filtersRow/index\": 546,\n\t\"./filtersRow/index.js\": 546,\n\t\"./helpPopup/HelpPopup\": 148,\n\t\"./helpPopup/HelpPopup.js\": 148,\n\t\"./helpPopup/HelpPopup.scss\": 1736,\n\t\"./itemBrowsers/BrowseOptions\": 1121,\n\t\"./itemBrowsers/BrowseOptions.js\": 1121,\n\t\"./itemTile/ItemTileCover\": 363,\n\t\"./itemTile/ItemTileCover.js\": 363,\n\t\"./itemTile/ItemTileDescription\": 587,\n\t\"./itemTile/ItemTileDescription.js\": 587,\n\t\"./itemTile/ItemTileGrid\": 360,\n\t\"./itemTile/ItemTileGrid.js\": 360,\n\t\"./itemTile/ItemTileInformation\": 362,\n\t\"./itemTile/ItemTileInformation.js\": 362,\n\t\"./itemTile/withItemTileHover\": 352,\n\t\"./itemTile/withItemTileHover.js\": 352,\n\t\"./layoutSelector/LayoutSelector\": 339,\n\t\"./layoutSelector/LayoutSelector.js\": 339,\n\t\"./masonryLayout/MasonryLayout\": 718,\n\t\"./masonryLayout/MasonryLayout.js\": 718,\n\t\"./membership/cancellationSurvey/CancellationOfferModal\": 609,\n\t\"./membership/cancellationSurvey/CancellationOfferModal.js\": 609,\n\t\"./membership/cancellationSurvey/CancellationQuestion\": 610,\n\t\"./membership/cancellationSurvey/CancellationQuestion.js\": 610,\n\t\"./membership/cancellationSurvey/CancellationReason\": 611,\n\t\"./membership/cancellationSurvey/CancellationReason.js\": 611,\n\t\"./membership/cancellationSurvey/CancellationSurvey\": 737,\n\t\"./membership/cancellationSurvey/CancellationSurvey.js\": 737,\n\t\"./membership/cancellationSurvey/CancellationSurvey.scss\": 1122,\n\t\"./mixins\": 1123,\n\t\"./mixins.scss\": 1123,\n\t\"./nestedHoverMenu/NestedHoverMenu\": 223,\n\t\"./nestedHoverMenu/NestedHoverMenu.js\": 223,\n\t\"./nestedHoverMenu/NestedHoverMenu.scss\": 961,\n\t\"./nestedHoverMenu/NestedHoverMenuItem\": 255,\n\t\"./nestedHoverMenu/NestedHoverMenuItem.js\": 255,\n\t\"./nestedHoverMenu/NestedHoverMenuItem.scss\": 1737,\n\t\"./nestedHoverMenu/ThreeDotHoverMenu\": 481,\n\t\"./nestedHoverMenu/ThreeDotHoverMenu.js\": 481,\n\t\"./owlCarousel/ScrollableCarousel\": 588,\n\t\"./owlCarousel/ScrollableCarousel.js\": 588,\n\t\"./owlCarousel/scrollableCarousel.css\": 1124,\n\t\"./owlCarousel/scrollableCarousel.css.scss\": 1124,\n\t\"./pageLevelComponents/classFinder/ClassFinder\": 612,\n\t\"./pageLevelComponents/classFinder/ClassFinder.js\": 612,\n\t\"./pageLevelComponents/classFinder/ClassFinderContent\": 614,\n\t\"./pageLevelComponents/classFinder/ClassFinderContent.js\": 614,\n\t\"./pageLevelComponents/classFinder/ClassFinderDataLoader\": 613,\n\t\"./pageLevelComponents/classFinder/ClassFinderDataLoader.js\": 613,\n\t\"./pageLevelComponents/classFinder/ClassFinderMobileFilter\": 389,\n\t\"./pageLevelComponents/classFinder/ClassFinderMobileFilter.js\": 389,\n\t\"./pageLevelComponents/classFinder/ClassFinderNewFilteredList\": 616,\n\t\"./pageLevelComponents/classFinder/ClassFinderNewFilteredList.js\": 616,\n\t\"./pageLevelComponents/classFinder/ClassFinderNewSortAndClear\": 350,\n\t\"./pageLevelComponents/classFinder/ClassFinderNewSortAndClear.js\": 350,\n\t\"./pageLevelComponents/classFinder/ClassFinderTopSection\": 615,\n\t\"./pageLevelComponents/classFinder/ClassFinderTopSection.js\": 615,\n\t\"./pageLevelComponents/classFinder/CompletedClassFilter\": 494,\n\t\"./pageLevelComponents/classFinder/CompletedClassFilter.js\": 494,\n\t\"./pageLevelComponents/classFinder/CustomDuration\": 496,\n\t\"./pageLevelComponents/classFinder/CustomDuration.js\": 496,\n\t\"./pageLevelComponents/classFinder/classFinder\": 738,\n\t\"./pageLevelComponents/classFinder/classFinder.scss\": 738,\n\t\"./pageLevelComponents/classFinder/classFinderDropdownInfo\": 412,\n\t\"./pageLevelComponents/classFinder/classFinderDropdownInfo.js\": 412,\n\t\"./pageLevelComponents/classFinder/classFinderHelperMethods\": 110,\n\t\"./pageLevelComponents/classFinder/classFinderHelperMethods.js\": 110,\n\t\"./pageLevelComponents/explore/Explore\": 721,\n\t\"./pageLevelComponents/explore/Explore.scss\": 721,\n\t\"./pageLevelComponents/explore/ExploreHeaders\": 264,\n\t\"./pageLevelComponents/explore/ExploreHeaders.js\": 264,\n\t\"./pageLevelComponents/explore/ExplorePage\": 343,\n\t\"./pageLevelComponents/explore/ExplorePage.js\": 343,\n\t\"./pageLevelComponents/explore/browseBy/ExploreFilterPage\": 292,\n\t\"./pageLevelComponents/explore/browseBy/ExploreFilterPage.js\": 292,\n\t\"./pageLevelComponents/explore/browseBy/ExploreFilterPage.scss\": 1074,\n\t\"./pageLevelComponents/explore/browseBy/ExploreFilterWrapper\": 622,\n\t\"./pageLevelComponents/explore/browseBy/ExploreFilterWrapper.js\": 622,\n\t\"./pageLevelComponents/explore/browseBy/exploreFilterHelpers\": 188,\n\t\"./pageLevelComponents/explore/browseBy/exploreFilterHelpers.js\": 188,\n\t\"./pageLevelComponents/explore/carousel/ExploreCarouselPage\": 623,\n\t\"./pageLevelComponents/explore/carousel/ExploreCarouselPage.js\": 623,\n\t\"./pageLevelComponents/explore/carousel/ExploreCarousels\": 420,\n\t\"./pageLevelComponents/explore/carousel/ExploreCarousels.js\": 420,\n\t\"./pageLevelComponents/explore/carousel/ExploreCarousels.scss\": 1099,\n\t\"./pageLevelComponents/explore/exploreNav/CategoryBanner\": 419,\n\t\"./pageLevelComponents/explore/exploreNav/CategoryBanner.js\": 419,\n\t\"./pageLevelComponents/explore/exploreNav/CategoryBanner.scss\": 1098,\n\t\"./pageLevelComponents/explore/exploreNav/CategoryFilters\": 415,\n\t\"./pageLevelComponents/explore/exploreNav/CategoryFilters.js\": 415,\n\t\"./pageLevelComponents/explore/exploreNav/ExploreNav\": 578,\n\t\"./pageLevelComponents/explore/exploreNav/ExploreNav.js\": 578,\n\t\"./pageLevelComponents/explore/exploreNav/SeriesFinderNewFilteredList\": 583,\n\t\"./pageLevelComponents/explore/exploreNav/SeriesFinderNewFilteredList.js\": 583,\n\t\"./pageLevelComponents/instructor/InstructorPage\": 1125,\n\t\"./pageLevelComponents/instructor/InstructorPage.js\": 1125,\n\t\"./pageLevelComponents/playlists/Show\": 1126,\n\t\"./pageLevelComponents/playlists/Show.js\": 1126,\n\t\"./pageLevelComponents/playlists/ShowPageContent\": 617,\n\t\"./pageLevelComponents/playlists/ShowPageContent.js\": 617,\n\t\"./photoSelector/PhotoSelector\": 280,\n\t\"./photoSelector/PhotoSelector.js\": 280,\n\t\"./photoSelector/PhotoSelector.scss\": 974,\n\t\"./photoSelector/PhotoUploader\": 278,\n\t\"./photoSelector/PhotoUploader.js\": 278,\n\t\"./photoSelector/PhotoUploader.scss\": 972,\n\t\"./planEntry/PlanEntryListHeader\": 355,\n\t\"./planEntry/PlanEntryListHeader.js\": 355,\n\t\"./planEntry/PlanEntryTile\": 603,\n\t\"./planEntry/PlanEntryTile.js\": 603,\n\t\"./planEntryList/PlanEntriesList\": 290,\n\t\"./planEntryList/PlanEntriesList.js\": 290,\n\t\"./planEntryList/PlanEntriesList.scss\": 965,\n\t\"./planEntryList/PlanEntriesListContent\": 478,\n\t\"./planEntryList/PlanEntriesListContent.js\": 478,\n\t\"./planEntryList/PlanEntriesListRows\": 382,\n\t\"./planEntryList/PlanEntriesListRows.js\": 382,\n\t\"./planEntryList/PlanEntriesListRows.scss\": 970,\n\t\"./planEntryList/PlanEntryListHeader\": 479,\n\t\"./planEntryList/PlanEntryListHeader.js\": 479,\n\t\"./planEntryList/PlanEntryListLoading\": 381,\n\t\"./planEntryList/PlanEntryListLoading.js\": 381,\n\t\"./planEntryList/PlanEntryListLoading.scss\": 966,\n\t\"./planEntryList/PlanEntryListRow\": 383,\n\t\"./planEntryList/PlanEntryListRow.js\": 383,\n\t\"./planEntryList/PlanEntryListRow.scss\": 969,\n\t\"./planEntryList/PlanEntryOptions\": 480,\n\t\"./planEntryList/PlanEntryOptions.js\": 480,\n\t\"./planEntryList/PlanEntryOptionsModal\": 384,\n\t\"./planEntryList/PlanEntryOptionsModal.js\": 384,\n\t\"./planEntryList/PlanEntryOptionsModal.scss\": 967,\n\t\"./playlist/PlayListMenus\": 486,\n\t\"./playlist/PlayListMenus.js\": 486,\n\t\"./playlist/PlaylistDisplay\": 288,\n\t\"./playlist/PlaylistDisplay.js\": 288,\n\t\"./playlist/PlaylistDisplay.scss\": 978,\n\t\"./playlist/PlaylistEdit\": 334,\n\t\"./playlist/PlaylistEdit.js\": 334,\n\t\"./playlist/PlaylistEdit.scss\": 976,\n\t\"./playlist/PlaylistGrid\": 739,\n\t\"./playlist/PlaylistGrid.js\": 739,\n\t\"./playlist/PlaylistGrid.scss\": 1127,\n\t\"./playlist/PlaylistHeader\": 386,\n\t\"./playlist/PlaylistHeader.js\": 386,\n\t\"./playlist/PlaylistHeader.scss\": 977,\n\t\"./playlist/PlaylistLoadingCards\": 477,\n\t\"./playlist/PlaylistLoadingCards.js\": 477,\n\t\"./playlist/PlaylistRow\": 380,\n\t\"./playlist/PlaylistRow.js\": 380,\n\t\"./playlist/PlaylistRow.scss\": 963,\n\t\"./playlist/PlaylistSelector\": 221,\n\t\"./playlist/PlaylistSelector.js\": 221,\n\t\"./playlist/PlaylistSelector.scss\": 964,\n\t\"./playlist/PlaylistTile\": 294,\n\t\"./playlist/PlaylistTile.js\": 294,\n\t\"./playlist/PlaylistTile.scss\": 1103,\n\t\"./playlist/UserPlaylists\": 379,\n\t\"./playlist/UserPlaylists.js\": 379,\n\t\"./playlist/UserPlaylists.scss\": 1738,\n\t\"./playlist/modals/AddToPlaylistModal\": 593,\n\t\"./playlist/modals/AddToPlaylistModal.js\": 593,\n\t\"./playlist/modals/CreateNewPlaylistModal\": 254,\n\t\"./playlist/modals/CreateNewPlaylistModal.js\": 254,\n\t\"./playlist/modals/DuplicateEntryPrompt\": 332,\n\t\"./playlist/modals/DuplicateEntryPrompt.js\": 332,\n\t\"./playlist/modals/EditPlaylistModal\": 390,\n\t\"./playlist/modals/EditPlaylistModal.js\": 390,\n\t\"./playlist/modals/EditPlaylistModal.scss\": 1739,\n\t\"./playlist/modals/EntryAddedConfirmation\": 594,\n\t\"./playlist/modals/EntryAddedConfirmation.js\": 594,\n\t\"./playlist/modals/NewPlaylistForm\": 331,\n\t\"./playlist/modals/NewPlaylistForm.js\": 331,\n\t\"./playlist/modals/PlaylistEntryOptionsModal\": 1128,\n\t\"./playlist/modals/PlaylistEntryOptionsModal.js\": 1128,\n\t\"./playlist/modals/ReportPlaylistModal\": 484,\n\t\"./playlist/modals/ReportPlaylistModal.js\": 484,\n\t\"./playlist/modals/ShareError\": 483,\n\t\"./playlist/modals/ShareError.js\": 483,\n\t\"./productsComponents/productCarousel/ProductCarousel\": 584,\n\t\"./productsComponents/productCarousel/ProductCarousel.js\": 584,\n\t\"./productsComponents/productCarousel/productCarousel.css\": 720,\n\t\"./productsComponents/productCarousel/productCarousel.css.scss\": 720,\n\t\"./productsComponents/productFilters/DifficultyIntensityFilters\": 532,\n\t\"./productsComponents/productFilters/DifficultyIntensityFilters.js\": 532,\n\t\"./productsComponents/productFilters/DifficultyIntensityFilters.scss\": 1093,\n\t\"./productsComponents/productFilters/ProductCheckBox\": 1129,\n\t\"./productsComponents/productFilters/ProductCheckBox.js\": 1129,\n\t\"./productsComponents/productFilters/ProductCheckbox\": 1130,\n\t\"./productsComponents/productFilters/ProductCheckbox.scss\": 1130,\n\t\"./productsComponents/productMasonry/ProductMasonry\": 553,\n\t\"./productsComponents/productMasonry/ProductMasonry.js\": 553,\n\t\"./productsComponents/productTile/HoverableProductTile\": 585,\n\t\"./productsComponents/productTile/HoverableProductTile.js\": 585,\n\t\"./productsComponents/productTile/ProductTile\": 586,\n\t\"./productsComponents/productTile/ProductTile.js\": 586,\n\t\"./productsComponents/productsDisplay/ProductDisplay\": 1131,\n\t\"./productsComponents/productsDisplay/ProductDisplay.scss\": 1131,\n\t\"./productsComponents/productsDisplay/ProductsDisplay\": 552,\n\t\"./productsComponents/productsDisplay/ProductsDisplay.js\": 552,\n\t\"./readMore\": 548,\n\t\"./readMore/\": 548,\n\t\"./readMore/index\": 548,\n\t\"./readMore/index.js\": 548,\n\t\"./reduxContainer\": 139,\n\t\"./reduxContainer/\": 139,\n\t\"./reduxContainer/ReduxContainer\": 336,\n\t\"./reduxContainer/ReduxContainer.js\": 336,\n\t\"./reduxContainer/UserLoadWrapper\": 337,\n\t\"./reduxContainer/UserLoadWrapper.js\": 337,\n\t\"./reduxContainer/index\": 139,\n\t\"./reduxContainer/index.js\": 139,\n\t\"./reduxContainer/withRedux\": 465,\n\t\"./reduxContainer/withRedux.js\": 465,\n\t\"./reduxContainer/withUser\": 466,\n\t\"./reduxContainer/withUser.js\": 466,\n\t\"./shareModal/ShareModalContent\": 215,\n\t\"./shareModal/ShareModalContent.js\": 215,\n\t\"./shareModal/ShareModalContent.scss\": 968,\n\t\"./simpleFormatter/SimpleFormatter\": 351,\n\t\"./simpleFormatter/SimpleFormatter.js\": 351,\n\t\"./sortableList/SortableList\": 180,\n\t\"./sortableList/SortableList.js\": 180,\n\t\"./sortableList/SortableList.scss\": 957,\n\t\"./sortableList/SortableListLabel\": 495,\n\t\"./sortableList/SortableListLabel.js\": 495,\n\t\"./sortableList/SortableListMenu\": 476,\n\t\"./sortableList/SortableListMenu.js\": 476,\n\t\"./tracking\": 170,\n\t\"./tracking/\": 170,\n\t\"./tracking/Trackable\": 539,\n\t\"./tracking/Trackable.js\": 539,\n\t\"./tracking/TrackableContext\": 357,\n\t\"./tracking/TrackableContext.js\": 357,\n\t\"./tracking/TrackableSection\": 598,\n\t\"./tracking/TrackableSection.js\": 598,\n\t\"./tracking/index\": 170,\n\t\"./tracking/index.js\": 170,\n\t\"./v2Wrappers/Admin/BatchedFlowControl\": 1132,\n\t\"./v2Wrappers/Admin/BatchedFlowControl.js\": 1132,\n\t\"./v2Wrappers/Admin/RedemptionOffers\": 1133,\n\t\"./v2Wrappers/Admin/RedemptionOffers.js\": 1133,\n\t\"./v2Wrappers/Admin/SeriesStructure\": 1188,\n\t\"./v2Wrappers/Admin/SeriesStructure.js\": 1188,\n\t\"./v2Wrappers/Admin/StyledAdminWrapper\": 114,\n\t\"./v2Wrappers/Admin/StyledAdminWrapper.js\": 114,\n\t\"./v2Wrappers/Admin/StyledBillboardShow\": 1137,\n\t\"./v2Wrappers/Admin/StyledBillboardShow.js\": 1137,\n\t\"./v2Wrappers/Admin/StyledLiveInstructor\": 1138,\n\t\"./v2Wrappers/Admin/StyledLiveInstructor.js\": 1138,\n\t\"./v2Wrappers/Admin/StyledLiveShow\": 1139,\n\t\"./v2Wrappers/Admin/StyledLiveShow.js\": 1139,\n\t\"./v2Wrappers/Admin/StyledMusic\": 1140,\n\t\"./v2Wrappers/Admin/StyledMusic.js\": 1140,\n\t\"./v2Wrappers/Admin/StyledUrlShortener\": 1141,\n\t\"./v2Wrappers/Admin/StyledUrlShortener.js\": 1141,\n\t\"./v2Wrappers/Admin/StyledUtmBuilder\": 1142,\n\t\"./v2Wrappers/Admin/StyledUtmBuilder.js\": 1142,\n\t\"./v2Wrappers/EditMembership\": 1186,\n\t\"./v2Wrappers/EditMembership.js\": 1186,\n\t\"./v2Wrappers/StyledAuthProviders\": 1143,\n\t\"./v2Wrappers/StyledAuthProviders.js\": 1143,\n\t\"./v2Wrappers/StyledFooter\": 1144,\n\t\"./v2Wrappers/StyledFooter.js\": 1144,\n\t\"./v2Wrappers/StyledHeader\": 741,\n\t\"./v2Wrappers/StyledHeader.js\": 741,\n\t\"./v2Wrappers/StyledHeader.scss\": 1147,\n\t\"./v2Wrappers/StyledVideoPlayer\": 1148,\n\t\"./v2Wrappers/StyledVideoPlayer.js\": 1148,\n\t\"./v2Wrappers/StyledWrapper\": 261,\n\t\"./v2Wrappers/StyledWrapper.js\": 261,\n\t\"./v2Wrappers/ThemeWrapper\": 171,\n\t\"./v2Wrappers/ThemeWrapper.js\": 171,\n\t\"./videoPlayer/ExternalVideo\": 596,\n\t\"./videoPlayer/ExternalVideo.js\": 596,\n\t\"./videoPlayer/VideoListIcon\": 364,\n\t\"./videoPlayer/VideoListIcon.js\": 364,\n\t\"./videoPlayer/VideoListMobile\": 591,\n\t\"./videoPlayer/VideoListMobile.js\": 591,\n\t\"./videoPlayer/VideoPlayer\": 353,\n\t\"./videoPlayer/VideoPlayer.js\": 353,\n\t\"./videoPlayer/VideoTracker\": 597,\n\t\"./videoPlayer/VideoTracker.js\": 597,\n\t\"./videoPlayer/VideosList\": 592,\n\t\"./videoPlayer/VideosList.js\": 592,\n\t\"./videoPlayer/VideosListContent\": 354,\n\t\"./videoPlayer/VideosListContent.js\": 354,\n\t\"./videoPlayer/VideosListMenu\": 599,\n\t\"./videoPlayer/VideosListMenu.js\": 599,\n\t\"./videoPlayer/componentSetup\": 228,\n\t\"./videoPlayer/componentSetup/\": 228,\n\t\"./videoPlayer/componentSetup/formatTime\": 541,\n\t\"./videoPlayer/componentSetup/formatTime.js\": 541,\n\t\"./videoPlayer/componentSetup/index\": 228,\n\t\"./videoPlayer/componentSetup/index.js\": 228,\n\t\"./videoPlayer/componentSetup/navButtons\": 542,\n\t\"./videoPlayer/componentSetup/navButtons.js\": 542,\n\t\"./videoPlayer/componentSetup/progressBar\": 540,\n\t\"./videoPlayer/componentSetup/progressBar.js\": 540,\n\t\"./videoPlayer/componentSetup/videoList\": 543,\n\t\"./videoPlayer/componentSetup/videoList.js\": 543,\n\t\"./videoPlayer/helperFunctions/extractVideosListProps\": 600,\n\t\"./videoPlayer/helperFunctions/extractVideosListProps.js\": 600,\n\t\"./videoPlayer/videoComponents/Autoplay\": 722,\n\t\"./videoPlayer/videoComponents/Autoplay.js\": 722,\n\t\"./videoPlayer/videoComponents/NextVid\": 744,\n\t\"./videoPlayer/videoComponents/NextVid.js\": 744,\n\t\"./videoPlayer/videoComponents/PlayButton\": 723,\n\t\"./videoPlayer/videoComponents/PlayButton.js\": 723,\n\t\"./videoPlayer/videoComponents/PreviousVid\": 745,\n\t\"./videoPlayer/videoComponents/PreviousVid.js\": 745,\n\t\"./videoPlayer/videoComponents/SeekerButtons\": 743,\n\t\"./videoPlayer/videoComponents/SeekerButtons.js\": 743,\n\t\"./videoPlayer/videoComponents/VideoList\": 724,\n\t\"./videoPlayer/videoComponents/VideoList.js\": 724,\n\t\"./withFadeInEffect\": 1149,\n\t\"./withFadeInEffect.js\": 1149\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 = 1665;","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","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
\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","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}) => \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 {this.props.shareCaption}\n
\n \n \n {this.state.copied ? 'Successfully copied url' : null}\n
\n {\n this.setState({ copied: true })\n }}\n >\n Copy Link \n \n\n \n Done\n \n \n \n {this.props.loading ? (\n
\n ) : (\n
\n Select \n \n )}\n
{\n this.setState({ modalOpen: true })\n }}\n >\n {this.isMobile() ? (\n <>\n {\n this.setState({ modalOpen: false })\n if (uuid) this.props.onPlaylistAdded(uuid)\n }}\n />\n \n )\n }\n}\n\nPlaylistSelector.defaultProps = {\n isMarked: () => {\n return false\n },\n isActive: () => {\n return false\n },\n playlists: []\n}\n\nPlaylistSelector.propTypes = {\n isMarked: PropTypes.func,\n onSelect: PropTypes.func,\n playlists: PropTypes.array,\n loading: PropTypes.bool,\n isActive: PropTypes.func,\n onPlaylistAdded: PropTypes.func,\n onReordered: PropTypes.func,\n sortable: PropTypes.bool\n}\n\nexport default PlaylistSelector\n","import React from 'react'\nimport InputRange from 'react-input-range'\nimport '../../../../node_modules/react-input-range/src/scss/index'\nimport PropTypes from 'prop-types'\nimport './FilterRangeSlider.scss'\n\nclass FilterRangeSlider extends React.Component {\n constructor (props) {\n super(props)\n\n this.sliderMax = props.allowOverMax\n ? props.rangeMax + props.step\n : props.rangeMax\n\n this.renderRangeLabel = this.renderRangeLabel.bind(this)\n }\n\n renderRangeLabel ({ min, max }) {\n if (min === this.props.rangeMin && max === this.sliderMax) {\n return 'All Durations'\n } else {\n if (max > this.props.rangeMax) {\n max = `${this.props.rangeMax}+`\n }\n return `${min} - ${max}`\n }\n }\n\n render () {\n let sliderValues = {\n min: this.props.values.min || this.props.rangeMin,\n max: this.props.values.max || this.sliderMax\n }\n\n return (\n \n {\n this.props.onChange(minMax)\n }}\n onChangeComplete={minMax => {\n let min = minMax.min\n let max = minMax.max > this.props.rangeMax ? null : minMax.max\n this.props.onSlideEnd({\n min,\n max\n })\n }}\n formatLabel={val => {\n let rangeValue = val\n if (rangeValue > this.props.rangeMax) {\n rangeValue = `${this.props.rangeMax}+`\n }\n return (\n \n {rangeValue} \n Mins \n \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'\nimport PropTypes from 'prop-types'\nimport NestedHoverMenuItem from './NestedHoverMenuItem'\nimport './NestedHoverMenu.scss'\nclass NestedHoverMenu extends React.Component {\n constructor (props) {\n super(props)\n\n this.nestedMenu = React.createRef()\n this.hoverMenuClashRight = this.hoverMenuClashRight.bind(this)\n this.animateIn = this.animateIn.bind(this)\n this.animateOut = this.animateOut.bind(this)\n\n this.state = {\n isActive: false\n }\n }\n\n componentDidMount () {\n if (this.hoverMenuClashRight()) {\n this.nestedMenu.current.parentElement.classList.add('menu-clash-right')\n }\n }\n\n animateIn () {\n this.setState({ isActive: true })\n }\n\n animateOut () {\n this.setState({ isActive: false })\n }\n\n hoverMenuClashRight () {\n const hoverMenuWidth = this.nestedMenu.current.clientWidth\n const hoverMenuRightOffset =\n window.innerWidth - this.nestedMenu.current.getBoundingClientRect().left\n return hoverMenuWidth > hoverMenuRightOffset\n }\n\n buildNestedMenu (options) {\n const menuOptions = options.map((option, idx) => {\n let itemSubMenu\n if (option.children && option.children.length > 0) {\n itemSubMenu = this.buildNestedMenu(option.children)\n }\n return (\n \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 {this.props.totalfiltersSelected > 0\n ? `Filters Selected(${this.props.totalfiltersSelected})`\n : `Filters`}\n
\n\n {/*
{this.setState({ isMobileFilterOpen: false })}}\n >\n ×\n */}\n
{\n this.setState({ isMobileFilterOpen: false })\n if (\n this.props.customDuration.min == null &&\n this.props.customDuration.max == null\n ) {\n return null\n }\n this.props.addCustomDuration({\n durationOptions: this.props.durationOptions\n })\n }}\n >\n View Results\n \n \n ) : (\n this.setState({ isMobileFilterOpen: false })}\n onClear={(label) => {\n this.props.onModalClear(label)\n }}\n />\n )\n mobileFilter = (\n \n \n
this.setState({ isMobileFilterOpen: true })}\n >\n {this.props?.totalfiltersSelected > 0\n ? `Filters(${this.props.totalfiltersSelected})`\n : 'Filters'}\n \n )\n }\n\n let bottomContent\n if (this.props.filteredLabels) {\n bottomContent = (\n \n {/* commenting this as part of MVS-644 class finder redesign\n
*/}\n
\n
\n
\n
\n
\n {this.props.renderTopRow()}\n
\n
\n
\n {mobileFilter}\n
\n
\n {layoutSelector}\n
\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 {/* {layoutSelector} */}\n
\n
\n {coachName}\n \n )\n } else {\n return {coachName} \n }\n })\n }\n }\n}\n\nProduct.modelName = 'Product'\nProduct.apiPath = '/products'\n\nexport default Product\n","import { createSelector } from 'reselect'\nimport { createSelector as ormCreateSelector } from 'redux-orm'\nimport orm from '../../models/models'\n\nexport const getCategoryRelationships = createSelector(\n state => state.orm,\n state => state.orm.PlanCategoryPlanSubcategories.items,\n ormCreateSelector(orm, session => {\n return session.PlanCategoryPlanSubcategories.all()\n })\n)\n\nexport const subcategoriesExist = createSelector(\n state => state.orm,\n ormCreateSelector(\n orm,\n session => session.PlanCategoryPlanSubcategories.count() > 0\n )\n)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport './FilterSquares.scss'\n\n/**\n * filterOptions prop takes in an array of objects with the following fields.\n * label: Label to be displayed in square\n * onSelect: Function to execute\n */\nconst FilterSquares = ({\n filterOptions,\n onSelect,\n numSquaresPerRow,\n rectangleVersion\n}) => {\n let filterSquaresClass = 'FilterSquares'\n if (rectangleVersion) filterSquaresClass += ' FilterSquares--rectangle'\n\n return (\n \n {filterOptions.map((option, idx) => (\n
\n {\n e.stopPropagation()\n onSelect({ option: option.obj || option.label })\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}) => props.onHide()}\n >\n Create New Playlist \n props.onHide()}\n onAdded={props.onHide}\n planEntryId={props.planEntryId}\n />\n \n )\n}\n\nCreateNewPlaylistModal.propTypes = {\n active: PropTypes.bool,\n onHide: PropTypes.func,\n planEntryId: PropTypes.number\n}\n\nexport default CreateNewPlaylistModal\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 let hoverableIcon\n if (this.props.subMenu) {\n hoverableIcon = \n {this.props.subMenu}\n \n )\n }\n\n return (\n {\n this.setState({ animating: false })\n }}\n onClick={e => {\n e.preventDefault()\n e.stopPropagation()\n this.props.handleClick()\n }}\n ref={this.hoverMenuItem}\n >\n \n
\n {this.props.label}\n {processingIcon}\n
\n {hoverableIcon}\n {hoverContainer}\n
\n \n {children}\n \n \n )\n}\n\nStyledWrapper.propTypes = {\n user: PropTypes.object,\n children: PropTypes.node.isRequired\n}\n\nexport default StyledWrapper\n","export const pageTitle = 'Series'\nexport const pageCaption = 'Follow a guided program to hit your fitness & wellness goals.'\n","import React from 'react'\nimport classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport './FilterRowItem.scss'\n\nconst FilterRowItem = (props) => {\n let baseClass = ['dropdown', 'section-nav-dropdown', 'FilterRowItem']\n if (props.customClass) {\n baseClass = baseClass.concat(props.customClass)\n }\n\n const filterRowItemClass = classNames(baseClass, {\n 'FilterRowItem--open': props.active,\n 'FilterRowItem--has-dropdown': props.hasDropdown\n })\n\n const itemLabel = props.displayedLabel ? props.displayedLabel : props.label\n const getDropDownOptions = () => {\n const dropdownClass = classNames(\n 'FilterDropdownSet',\n {\n 'FilterDropdownSet--open': !!props.active\n },\n {\n 'FilterDropdownSet--closed': !props.active\n },\n {\n 'FilterDropdownSet--scroll': props.value === 'instructors'\n }\n )\n return (\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.customizeLabelDisplay(itemLabel)}\n
\n \n {\n props.onClear(label)\n }}\n >\n Clear{' '}\n {Array.isArray(filteredAttributes)\n ? `(${filteredAttributes.length})`\n : ''}\n \n )\n }\n\n const shownLabel = optionInfo.displayedLabel\n ? optionInfo.displayedLabel\n : label\n\n menus.push(\n \n
\n {shownLabel}\n {clearLabel}\n
\n {optionInfo.renderDropdownContent(true, true)}\n
\n \n
\n
Filter Results \n
\n ×\n
\n
\n
{menus}
\n
\n )\n}\n\nFilterModal.propTypes = {\n active: PropTypes.bool,\n filtered: PropTypes.object,\n filterOptions: PropTypes.object,\n onClear: PropTypes.func,\n onHide: PropTypes.func\n}\n\nexport default FilterModal\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport './FadeInFullscreen.scss'\nimport {\n disableBodyScroll,\n enableBodyScroll,\n clearAllBodyScrollLocks\n} from 'body-scroll-lock' // This is because setting body overflow to hidden still allows users to scroll on iOS devices\n\nclass FadeInFullscreen extends React.Component {\n constructor (props) {\n super(props)\n\n this.fadeInElem = React.createRef()\n }\n\n componentDidUpdate (prevProps) {\n if (this.props.isOpen !== prevProps.isOpen) {\n if (this.props.isOpen) {\n disableBodyScroll(this.fadeInElem.current)\n } else {\n enableBodyScroll(this.fadeInElem.current)\n }\n }\n }\n\n componentDidMount () {\n this.body = document.querySelector('body')\n this.body.appendChild(this.fadeInElem.current)\n }\n\n componentWillUnmount () {\n clearAllBodyScrollLocks()\n }\n\n render () {\n return (\n \n
\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 \n {\n this.props.onHide()\n }}\n >\n Cancel\n \n {\n this.changeDisplay('CONFIRM')\n }}\n >\n Preview Photo\n \n \n \n )\n }\n break\n case 'CONFIRM':\n return (\n {\n const fd = new window.FormData()\n fd.append('image', this.state.croppedBlob)\n return fd\n }}\n onLoad={(_, request) => {\n this.setState({ uploading: false })\n const response = JSON.parse(request.response)\n const tempUrl = response.image_url\n this.props.onHide()\n this.props.onUploaded(tempUrl)\n }}\n progressRenderer={progress => {\n if (this.state.uploading) {\n return (\n \n \n \n )\n }\n }}\n formRenderer={onSubmit => {\n if (!this.state.uploading) {\n return (\n \n )\n }\n }}\n />\n )\n case 'PROCESSING':\n return (\n \n Processing Photo
\n \n )\n case 'SELECT':\n return (\n \n \n \n {\n this.setState(\n {\n remoteCoverPhotoUrl: updatedImageUrl\n },\n () => {\n this.props.onHide()\n this.props.onUploaded(updatedImageUrl)\n }\n )\n }}\n />\n \n \n \n {this.props.removingImage ? 'Removing...' : 'Remove photo'}\n \n \n Close\n \n \n \n )\n }\n }\n\n render () {\n let className = classNames('PhotoUploader', {\n 'PhotoUploader--main': this.state.display === 'SELECT',\n 'PhotoUploader--confirm': this.state.display === 'CONFIRM',\n 'PhotoUploader--editor': this.state.display === 'EDIT',\n 'PhotoUploader--processing': this.state.display === 'PROCESSING',\n 'PhotoUploader--uploading': this.state.uploading\n })\n\n return (\n {\n e.stopPropagation()\n }}\n className={className}\n >\n \n {this.props.modifiying ? 'Update' : 'Upload'} {this.props.photoType}{' '}\n {this.state.display === 'EDIT' ? ': Move & Scale' : null}\n {this.state.display === 'CONFIRM'\n ? ': This is how it will look '\n : null}\n photo\n \n {this.getDisplayedView()}\n \n )\n }\n}\n\nPhotoUploader.propTypes = {\n show: PropTypes.bool,\n file: PropTypes.object,\n onHide: PropTypes.func,\n currentImageUrl: PropTypes.string,\n onUploaded: PropTypes.func,\n photoType: PropTypes.string,\n modifiying: PropTypes.bool,\n onDelete: PropTypes.func,\n removingImage: PropTypes.bool\n}\n\nexport default PhotoUploader\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport './FilterSidebarLayout.scss'\n\nclass FilterSidebarLayout extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n shownFilterIdx: 0\n }\n }\n\n render () {\n const { filterOptions, onSelect } = this.props\n\n const shownFilter = filterOptions[this.state.shownFilterIdx]\n\n return (\n \n
\n
\n {filterOptions.map((filter, idx) => (\n {\n this.setState({ shownFilterIdx: idx })\n }}\n className={`${\n filter.label === shownFilter.label ? 'active' : ''\n }`}\n >\n {filter.label}\n \n ))}\n \n
\n
\n
\n {\n onSelect({ parent: shownFilter.value, child: 'all' })\n }}\n className={`${shownFilter.isAllSelected ? 'active' : ''}`}\n >\n All\n \n {shownFilter.subFilters.map((subFilter, idx) => {\n return (\n {\n onSelect({\n parent: shownFilter.value,\n child: subFilter.value\n })\n }}\n >\n {subFilter.label}\n \n )\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 {({ getRootProps, getInputProps }) => {\n let photoSelectorClass = 'PhotoSelector'\n if (this.props.minimal) {\n photoSelectorClass += ' PhotoSelector--minimal'\n }\n if (this.props.transparent) {\n photoSelectorClass += ' PhotoSelector--transparent'\n }\n\n let notMinimalSection\n if (!this.props.minimal) {\n notMinimalSection = (\n \n
\n \n {this.state.loading\n ? 'Processing...'\n : 'Select a photo from your computer'}\n \n
\n
\n \n {this.state.loading\n ? 'Processing...'\n : 'Select from device'}\n \n
\n
\n \n {this.state.loading\n ? 'Processing...'\n : 'Select a photo from your device'}\n \n
\n
\n \n
\n
\n {notMinimalSection}\n {error}\n {hint}\n
{\n this.setState({ showUploader: false })\n }}\n />\n \n )\n }}\n \n )\n }\n}\n\nPhotoSelector.propTypes = {\n modifying: PropTypes.bool,\n photoType: PropTypes.string,\n attachedObj: PropTypes.object,\n onUploaded: PropTypes.func,\n transparent: PropTypes.bool,\n minimal: PropTypes.bool\n}\n\nexport default PhotoSelector\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 e.preventDefault()\n e.stopPropagation()\n if (onClick) onClick()\n }}\n onMouseEnter={() => {\n this.setState({ hovered: true })\n if (onMouseEnter) onMouseEnter()\n }}\n onMouseLeave={() => {\n this.setState({ hovered: false })\n if (onMouseLeave) onMouseLeave()\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 if (field === 'coach') return\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 this.props.fetchPlaylistEntries(this.props.playlist)\n }}\n includeDates={includePlaylistAddedDates}\n entryLinkSuffix={`?type=playlist&uuid=${playlist.uuid}`}\n />\n )\n }\n }\n\n render () {\n const {\n playlistPlanEntries,\n playlist,\n signedIn,\n userIsAuthor,\n userIsAdmin,\n onDuplicated,\n userLoaded\n } = this.props\n\n let className = 'PlaylistDisplay'\n if (this.state.deleting) className += ' PlaylistDisplay--deleting'\n\n let playlistDisplayClass = 'PlaylistDisplay__header'\n if (!userLoaded) playlistDisplayClass += ' PlaylistDisplay--loading'\n\n return (\n \n
\n {this.renderPlaylistContent()}\n
{\n return (\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}) => \n \n
\n
{props.title} \n
{props.caption}
\n
\n
\n \n \n \n \n \n )\n}\n\nexport default RecommendationWidget\n","import styled from 'styled-components'\nimport { layout, position } from 'styled-system'\n\nconst ButtonBase = styled('button')`\n ${position}\n ${layout}\n position: absolute;\n width: 44px;\n height: 44px;\n padding: 10px;\n background: ${(props) => props.theme.colors.base};\n border: 1px solid ${(props) => props.theme.colors.base};\n border-radius: 50%;\n opacity: 1;\n visibility: visible;\n transform: translateY(-50%);\n transition: all 0.25s ease-in-out;\n z-index: 1;\n box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.06),\n 0px 8px 16px rgba(35, 41, 54, 0.08);\n\n &:disabled {\n opacity: 0;\n visibility: hidden;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n border: 1px solid ${(props) => props.theme.colors.primary};\n }\n`\n\nexport default ButtonBase\n","import BaseModel from './BaseModel'\nimport {\n LOAD_PLAN_ENTRIES_SUCCESS,\n FEATURE_PLAN_ENTRY,\n UNFEATURE_PLAN_ENTRY,\n CLEAR_PLAN_ENTRIES\n} from '../redux/actions/planEntries'\nimport Favorite from './Favorite'\nimport { fk } from 'redux-orm'\nimport axiosInstance from 'api/axios.config'\n\nclass PlanEntry extends BaseModel {\n static reducer (action, PlanEntry, session) {\n switch (action.type) {\n case CLEAR_PLAN_ENTRIES:\n PlanEntry.filter(action.params).delete()\n break\n case LOAD_PLAN_ENTRIES_SUCCESS:\n action.planEntries.forEach(planEntry => {\n const entry = session.PlanEntry.create({\n ...planEntry,\n favorites: [planEntry.favorite],\n planProduct: planEntry.plan.id\n })\n\n if (entry.playlistIds) {\n let alreadyIncludedIds = []\n entry.playlistIds.forEach(playlistId => {\n if (\n !alreadyIncludedIds.includes(playlistId) &&\n !session.PlaylistEntries.filter({\n playlist: playlistId,\n planEntry: entry.id,\n orderBy: entry.playlistOrderby\n }).exists()\n ) {\n session.PlaylistEntries.create({\n playlist: playlistId,\n planEntry: entry.id,\n orderBy: entry.playlistOrderby,\n createdAt: entry.dateAddedToPlaylist\n })\n alreadyIncludedIds.push(playlistId)\n }\n })\n }\n session.Product.create(planEntry.plan)\n\n const favorite = planEntry.favorite\n if (favorite) {\n const {\n id,\n orderby,\n createdAt,\n planEntryId: planEntry\n } = favorite\n\n session.Favorite.upsert({\n id,\n orderby,\n createdAt,\n planEntry\n })\n }\n })\n\n break\n case FEATURE_PLAN_ENTRY:\n PlanEntry.withId(action.id).featured = true\n break\n case UNFEATURE_PLAN_ENTRY:\n PlanEntry.withId(action.id).featured = false\n break\n }\n return undefined\n }\n\n addToFavorites (params = {}) {\n return Favorite.createNewFavorite(this.id, params)\n }\n\n entryInPlaylist (playlistUUID) {\n return this.playlistIds.includes(playlistUUID)\n }\n\n buildEntryUrl (originInfo) {\n let url = `/series/${this.plan.slug}/workouts/${this.id}`\n\n if (originInfo) {\n url += `?type=${originInfo.type}`\n\n if (originInfo.type === 'playlist') {\n url += `&uuid=${originInfo.playlistUUID}`\n }\n }\n\n return url\n }\n\n feature () {\n return axiosInstance.post(`plan_entries/${this.id}/featured_plan_entries`)\n }\n\n unfeature () {\n return axiosInstance.delete(`plan_entries/${this.id}/featured_plan_entries`)\n }\n}\n\nPlanEntry.modelName = 'PlanEntry'\nPlanEntry.apiPath = '/plan_entries'\nPlanEntry.fields = {\n planProduct: fk('Product', 'planEntries')\n}\n\nexport default PlanEntry\n","import { createSelector } from 'reselect'\nimport { createSelector as ormCreateSelector } from 'redux-orm'\nimport orm from '../../models/models'\n\n// TO DO//\n// Find a better way to do this. We currently use playlistEntryItems to get\n// around memoization\nexport const playlistEntryItems = state =>\n state.orm.playlistEntries ? state.orm.playlistEntries.items : {}\n\nexport const getPlaylistEntry = (state, id) => {\n const selector = createSelector(\n state => state.orm,\n ormCreateSelector(orm, session => {\n return session.PlaylistEntries.withId(id)\n })\n )\n\n return selector(state)\n}\n\nexport const getPlaylistEntries = (state, uuid) => {\n const selector = createSelector(\n state => state.orm,\n playlistEntryItems,\n ormCreateSelector(orm, session => {\n if (uuid) {\n return session.PlaylistEntries.all()\n .filter(entry => entry.playlist === uuid)\n .orderBy('orderBy')\n } else {\n return session.PlaylistEntries.all()\n }\n })\n )\n return selector(state)\n}\n","import { connect } from 'react-redux'\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport moment from 'moment'\nimport { createNewPlaylist } from '../../../redux/actions/playlists'\nimport AloButton from '../../AloButton'\nimport { Modal } from 'react-bootstrap'\n\nclass NewPlaylistForm extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n playlistName: `New Playlist ${moment().format('L')}`\n }\n\n this.handleOnChange = this.handleOnChange.bind(this)\n }\n\n handleOnChange (e) {\n this.setState({ playlistName: e.target.value })\n }\n\n render () {\n return (\n \n \n
Name \n
\n
\n \n Cancel\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 )\n }\n}\n\nNewPlaylistForm.propTypes = {\n onAdded: PropTypes.func,\n onCancel: PropTypes.func,\n creatingPlaylist: PropTypes.bool,\n createNewPlaylist: PropTypes.func,\n planEntryId: PropTypes.number\n}\n\nconst mapStateToProps = state => {\n return {\n creatingPlaylist: state.ui.playlists.creatingPlaylist\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n createNewPlaylist: (playlistName, planEntryId, callback) => {\n dispatch(createNewPlaylist(playlistName, planEntryId, callback))\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(NewPlaylistForm)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Modal } from 'react-bootstrap'\n\nconst DuplicateEntryPrompt = props => {\n return (\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 Cancel\n \n \n Add\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\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 \n \n )\n }\n\n renderView() {\n if (!this.props.signedIn) {\n return (\n {\n unlock_membership_event('playlist')\n }}\n >\n Start Practicing\n \n )\n } else {\n let button\n if (!this.props.userIsAuthor) {\n if (this.props.playlist.following) {\n button = (\n \n Saved To My Playlists\n \n )\n } else {\n button = (\n \n Add To My Playlists\n \n )\n }\n }\n return (\n \n {button}\n {this.renderOptions()}\n \n )\n }\n }\n\n render() {\n return {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 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 \n {data &&\n data.map((item, index) => (\n \n )\n}\n\nCarousel.propTypes = {\n layout: PropTypes.string,\n carouselTitle: PropTypes.string,\n slug: PropTypes.string,\n card: PropTypes.object\n}\n\nexport default Carousel\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 {props.children} \n}\n\nReduxContainer.propTypes = {\n children: PropTypes.node\n}\nexport default ReduxContainer\n","import React from 'react'\nimport { connect } from 'react-redux'\nimport { fetchCurrentUser } from '../../redux/actions/users'\nimport PropTypes from 'prop-types'\n\nclass UserLoadWrapper extends React.Component {\n componentDidMount () {\n this.props.getUsers()\n }\n\n render () {\n return {this.props.children} \n }\n}\n\nUserLoadWrapper.propTypes = {\n children: PropTypes.node,\n getUsers: PropTypes.func\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n getUsers: () => {\n dispatch(fetchCurrentUser())\n }\n }\n}\n\nexport default connect(null, mapDispatchToProps)(UserLoadWrapper)\n","import {\n START_FETCHING_FAVORITES,\n FINISH_FETCHING_FAVORITES,\n SET_FAVORITES_ORDER,\n CLEAR_FAVORITES,\n CLEAR_FAVORITES_ORDER\n} from '../../actions/favorite'\n\nlet defaultState = {\n loading: false,\n total: 0,\n page: 1,\n orderInfo: {}\n}\n\nconst favorites = (state = defaultState, action) => {\n switch (action.type) {\n case START_FETCHING_FAVORITES:\n return {\n ...state,\n loading: true\n }\n case FINISH_FETCHING_FAVORITES:\n return {\n ...state,\n loading: false,\n total: action.total,\n page: state.page + 1\n }\n case CLEAR_FAVORITES_ORDER:\n return {\n ...state,\n orderInfo: {}\n }\n case SET_FAVORITES_ORDER:\n return {\n ...state,\n orderInfo: action.orderInfo\n }\n case CLEAR_FAVORITES:\n return {\n ...state,\n page: 1\n }\n }\n return state\n}\n\nexport default favorites\n","import { SET_SELECTED_CATEGORY_SLUG } from '../../actions/planCategories'\n\nlet planCategories = (state = {}, action) => {\n switch (action.type) {\n case SET_SELECTED_CATEGORY_SLUG:\n return Object.assign({}, state, {\n selectedCategorySlug: action.slug\n })\n default:\n return state\n }\n}\n\nexport default planCategories\n","import {\n START_LOAD_PLAN_ENTRIES,\n LOAD_PLAN_ENTRIES_SUCCESS,\n LAYOUT_CHANGE,\n ADD_FILTER,\n REMOVE_FILTER,\n CHANGE_ORDER,\n SET_INITIAL_FILTERS,\n CLEAR_FILTER,\n CHANGE_FILTER_URL,\n CLEAR_ALL_FILTERS,\n CLEAR_PLAN_ENTRIES,\n DEFAULT_FILTERS,\n ADD_CUSTOM_DURATION_FILTER\n} from '../../actions/planEntries'\n\nconst defaultState = {\n grid: {\n isLoading: true,\n page: 1,\n layout: 'tile'\n },\n customDuration: {\n min: null,\n max: null\n },\n filtered: {\n instructors: [],\n styles: {},\n difficulties: [],\n intensities: [],\n focus_area: [],\n equipment: [],\n excludeCompleted: false,\n duration: []\n }\n}\n\nlet planEntries = (state = defaultState, action) => {\n let newGridState\n switch (action.type) {\n case CLEAR_PLAN_ENTRIES:\n newGridState = state.grid\n newGridState.page = 1\n newGridState.isInitialLoad = true\n return Object.assign({}, state, {\n grid: newGridState\n })\n case START_LOAD_PLAN_ENTRIES:\n return Object.assign({}, state, {\n grid: {\n ...state.grid,\n isLoading: true\n }\n })\n case LAYOUT_CHANGE:\n return Object.assign({}, state, {\n grid: {\n ...state.grid,\n layout: action.layout\n }\n })\n case DEFAULT_FILTERS:\n return { ...state, defaultFilter: action.defaultFilter }\n case CLEAR_ALL_FILTERS:\n return Object.assign({}, state, {\n filtered: {\n instructors: [],\n styles: [],\n yoga: [],\n fitness: [],\n mindfulness: [],\n wellness: [],\n skills: [],\n difficulties: [],\n intensities: [],\n excludeCompleted: false,\n focus_area: [],\n equipment: [],\n duration: []\n }\n })\n case CLEAR_FILTER:\n if (action.label === 'duration') {\n return Object.assign({}, state, {\n filtered: {\n ...state.filtered,\n duration: []\n }\n })\n } else {\n return Object.assign({}, state, {\n filtered: {\n ...state.filtered,\n [action.label]: []\n }\n })\n }\n\n case CHANGE_ORDER:\n return Object.assign({}, state, {\n order: action.order\n })\n case SET_INITIAL_FILTERS:\n return Object.assign({}, state, {\n filtered: action.initialFilters\n })\n\n case ADD_CUSTOM_DURATION_FILTER:\n return Object.assign({}, state, {\n customDuration: {\n min: parseInt(action.min) || 0,\n max: parseInt(action.max) || null\n }\n })\n case ADD_FILTER:\n switch (action.filterSection) {\n case 'duration':\n case 'custom_duration':\n let currentDurationFilters = state.filtered['duration'] || []\n if (action.filterSection === 'custom_duration') {\n currentDurationFilters = currentDurationFilters.reduce(\n (acc, duration) => {\n if (action.filter.preDefinedDurations.includes(duration)) {\n return [duration, ...acc]\n } else {\n return [...acc]\n }\n },\n []\n )\n }\n const time = `${action.filter.min}-${action.filter.max}`\n if (!currentDurationFilters?.includes(time)) {\n currentDurationFilters = [...currentDurationFilters,time ]\n }\n return Object.assign({}, state, {\n filtered: {\n ...state.filtered,\n ['duration']: currentDurationFilters\n }\n })\n case 'styles':\n const {\n filter,\n options: { isRoot, root }\n } = action\n const categoryFilters = state.filtered.styles\n\n let filteredSubcategories\n if (isRoot) {\n filteredSubcategories = 'all'\n } else {\n filteredSubcategories =\n !categoryFilters[root.slug] ||\n categoryFilters[root.slug].filteredSubcategories === 'all'\n ? []\n : categoryFilters[root.slug].filteredSubcategories\n\n filteredSubcategories.push(filter)\n }\n return Object.assign({}, state, {\n filtered: {\n ...state.filtered,\n styles: {\n ...categoryFilters,\n [root.slug]: {\n ...root,\n filteredSubcategories\n }\n }\n }\n })\n case 'yoga':\n case 'fitness':\n case 'mindfulness':\n case 'wellness':\n case 'skills':\n let currentCategoryFilters =\n state.filtered[action.filterSection] || []\n if (\n action.filter.slug === action.filterSection ||\n (action.filter.slug !== action.filterSection &&\n currentCategoryFilters.some(\n (item) => item.slug === action.filterSection\n ))\n ) {\n currentCategoryFilters = []\n }\n currentCategoryFilters = [...currentCategoryFilters,action.filter]\n return Object.assign({}, state, {\n filtered: {\n ...state.filtered,\n [`${action.filterSection}`]: currentCategoryFilters\n }\n })\n case 'excludeCompleted':\n return Object.assign({}, state, {\n filtered: {\n ...state.filtered,\n excludeCompleted: true\n }\n })\n default:\n let currentFilters = state.filtered[action.filterSection] || []\n let updatedFilters = [...currentFilters, action.filter]\n return Object.assign({}, state, {\n filtered: {\n ...state.filtered,\n [`${action.filterSection}`]: updatedFilters\n }\n })\n }\n\n case REMOVE_FILTER:\n switch (action.filterSection) {\n case 'duration':\n let currentDurationFilters =\n state.filtered[action.filterSection] || []\n const updatedDuration = currentDurationFilters.filter(\n (duration) => duration !== action.filter\n )\n return Object.assign({}, state, {\n filtered: {\n ...state.filtered,\n [`${action.filterSection}`]: updatedDuration\n }\n })\n case 'styles':\n const {\n filter,\n options: { isRoot, rootSlug }\n } = action\n let categoryFilters = state.filtered.styles\n\n if (isRoot) {\n delete categoryFilters[filter]\n } else {\n const filteredSubcategories = categoryFilters[\n rootSlug\n ].filteredSubcategories.filter(\n (subcategory) => subcategory.slug !== filter\n )\n if (filteredSubcategories.length === 0) {\n delete categoryFilters[rootSlug]\n } else {\n categoryFilters[rootSlug].filteredSubcategories =\n filteredSubcategories\n }\n }\n\n return Object.assign({}, state, {\n filtered: {\n ...state.filtered,\n styles: {\n ...categoryFilters\n }\n }\n })\n case 'excludeCompleted':\n return Object.assign({}, state, {\n filtered: {\n ...state.filtered,\n excludeCompleted: false\n }\n })\n default:\n const newFilters = state.filtered[action.filterSection].filter(\n (item) => {\n if (typeof item === 'object') {\n return item[action.filterByField] !== action.filter\n } else {\n return item !== action.filter\n }\n }\n )\n return Object.assign({}, state, {\n filtered: {\n ...state.filtered,\n [`${action.filterSection}`]: newFilters\n }\n })\n }\n case LOAD_PLAN_ENTRIES_SUCCESS:\n return Object.assign({}, state, {\n grid: {\n ...state.grid,\n isLoading: false,\n isInitialLoad: false,\n total: action.totalPlanEntries,\n page: state.grid.page + 1\n }\n })\n case CHANGE_FILTER_URL:\n let newUrl = ''\n const filters = action.filters\n for (const filterSection in filters) {\n const filteredAttributes = filters[filterSection]\n if (filterSection === 'min' && filters.min) {\n newUrl += `min=${filters.min}&`\n } else if (filterSection === 'max' && filters.max) {\n newUrl += `max=${filters.max}&`\n } else if (filterSection === 'order') {\n newUrl += `${filterSection}=${filteredAttributes}&`\n } else if (filterSection === 'excludeCompleted' && filteredAttributes) {\n newUrl += `${filterSection}=${filteredAttributes}&`\n } else if (filteredAttributes && filteredAttributes.length > 0) {\n newUrl += `${filterSection}=${filteredAttributes.join()}&`\n }\n }\n return Object.assign({}, state, {\n filterUrl: newUrl\n })\n default:\n return state\n }\n}\n\nexport default planEntries\n","import {\n START_CREATE_NEW_PLAYLIST,\n FINISH_CREATE_NEW_PLAYLIST,\n SET_PLAYLIST_ORDER,\n START_FETCH_PLAYLISTS,\n FETCH_PLAYLISTS_SUCCESS,\n SET_DISPLAYED_PLAYLIST,\n START_FETCH_PLAYLIST_ENTRIES,\n FETCH_PLAYLIST_ENTRIES_SUCCESS,\n SET_DISPLAYED_PLAYLIST_ENTRIES_ORDER,\n CLEAR_PLAYLIST_ENTRIES\n} from '../../actions/playlists'\n\nconst defaultState = {\n order: '',\n page: 1,\n playlistEntriesPage: 1,\n creatingPlaylist: false,\n loadingEntries: true\n}\n\nlet playlists = (state = defaultState, action) => {\n switch (action.type) {\n case START_CREATE_NEW_PLAYLIST:\n return {\n ...state,\n creatingPlaylist: true\n }\n case FINISH_CREATE_NEW_PLAYLIST:\n return {\n ...state,\n creatingPlaylist: false\n }\n case SET_PLAYLIST_ORDER:\n return {\n ...state,\n order: action.order\n }\n case START_FETCH_PLAYLISTS:\n const page = action.reloadAll ? 1 : state.page + 1\n\n return {\n ...state,\n loading: true,\n reloadingAll: action.reloadAll,\n page\n }\n case FETCH_PLAYLISTS_SUCCESS:\n return Object.assign({}, state, {\n loading: false,\n total: action.total,\n reloadingAll: false\n })\n case SET_DISPLAYED_PLAYLIST:\n return {\n ...state,\n displayedPlaylistUUID: action.playlist.uuid\n }\n case START_FETCH_PLAYLIST_ENTRIES:\n return Object.assign({}, state, {\n loadingEntries: true\n })\n case CLEAR_PLAYLIST_ENTRIES:\n return Object.assign({}, state, {\n initialPlaylistEntryLoad: true,\n playlistEntriesPage: 1\n })\n case FETCH_PLAYLIST_ENTRIES_SUCCESS:\n const playlistEntriesPage = state.playlistEntriesPage + 1\n return Object.assign({}, state, {\n loadingEntries: false,\n playlistEntriesPage,\n initialPlaylistEntryLoad: false\n })\n case SET_DISPLAYED_PLAYLIST_ENTRIES_ORDER:\n return {\n ...state,\n entriesOrder: action.orderObj\n }\n default:\n return state\n }\n}\n\nexport default playlists\n","import {\n START_LOAD_PRODUCTS,\n FETCH_PRODUCTS_FAIL,\n FETCH_PRODUCTS_SUCCESS\n} from '../../actions/products/products'\n\nimport {\n ADD_CATEGORY_OPTION,\n ADD_SUBCATEGORY_FILTER,\n REMOVE_CATEGORY_FILTER,\n REMOVE_SUBCATEGORY_FILTER,\n APPLY_SERIES_FILTER,\n REMOVE_SERIES_FILTER,\n SET_DIFFICULTY_FILTER,\n SET_INTENSITY_FILTER,\n CLEAR_DIFFICULTY_FILTER,\n CLEAR_INTENSITY_FILTER,\n SET_PRODUCT_ORDER,\n SET_FILTER_URL,\n APPLY_CATEGORY_FILTER,\n REPLACE_PRODUCT_FILTERS,\n CLEAR_ALL_SERIES_FILTERS,\n DEFAULT_SERIES_FILTERS\n} from '../../actions/products/filters'\n\nconst defaultState = {\n isInitialLoad: true,\n isLoading: true,\n filterUrl: '',\n filters: {\n categories: {},\n instructors: [],\n equipment: [],\n focus_area: [],\n difficulties: [],\n intensities: [],\n page: 1\n }\n}\n\nlet products = (state = defaultState, action) => {\n let categories\n let subcategories\n let seriesFilter\n\n switch (action.type) {\n case START_LOAD_PRODUCTS:\n const page = action.reloadAll ? 1 : state.filters.page + 1\n return Object.assign({}, state, {\n isLoading: true,\n isInitialLoad: action.reloadAll,\n filters: {\n ...state.filters,\n page\n }\n })\n case REPLACE_PRODUCT_FILTERS:\n return Object.assign({}, state, {\n filters: action.filters\n })\n case SET_FILTER_URL:\n return Object.assign({}, state, {\n filterUrl: action.url\n })\n case FETCH_PRODUCTS_FAIL:\n return Object.assign({}, state, {\n hasErrored: action.hasErrored\n })\n case FETCH_PRODUCTS_SUCCESS:\n return {\n ...state,\n isLoading: false,\n isInitialLoad: false,\n total: action.total\n }\n case APPLY_CATEGORY_FILTER:\n categories = state.filters.categories\n categories[action.category] = 'all'\n return Object.assign({}, state, {\n filters: {\n ...state.filters,\n categories\n }\n })\n case APPLY_SERIES_FILTER:\n seriesFilter = state.filters[action?.parentCategory]\n const isContain = seriesFilter?.some((item) => {\n if (typeof item === 'string') {\n return item === action?.filter\n } else {\n return item.slug === action?.filter?.slug\n }\n })\n if (!isContain) {\n seriesFilter.push(action.filter)\n }\n return Object.assign({}, state, {\n filters: {\n ...state.filters,\n [action?.parentCategory]: seriesFilter\n }\n })\n case REMOVE_SERIES_FILTER:\n seriesFilter = state.filters[action?.parentCategory]\n const updatedSlug = seriesFilter?.filter((item) => {\n if (typeof item === 'string') {\n return item !== action.filter\n } else {\n return item.slug !== action.filter\n }\n })\n return Object.assign({}, state, {\n filters: {\n ...state.filters,\n [action?.parentCategory]: updatedSlug\n }\n })\n case ADD_CATEGORY_OPTION:\n categories = state.filters.categories\n if (action.filter) {\n categories[action.filter] = []\n }\n return Object.assign({}, state, {\n filters: {\n ...state.filters,\n categories\n }\n })\n case ADD_SUBCATEGORY_FILTER:\n categories = state.filters.categories\n subcategories = categories[action.parentCategory]\n if (subcategories === 'all') {\n subcategories = []\n }\n subcategories.push(action.filter.slug)\n categories[action.parentCategory] = subcategories\n return Object.assign({}, state, {\n filters: {\n ...state.filters,\n categories\n }\n })\n case REMOVE_CATEGORY_FILTER:\n categories = state.filters.categories\n categories[action.filterSlug] = []\n return Object.assign({}, state, {\n filters: {\n ...state.filters,\n categories\n }\n })\n case REMOVE_SUBCATEGORY_FILTER:\n categories = state.filters.categories\n subcategories = categories[action.parentCategory]\n subcategories = subcategories.filter(\n (subcategory) => subcategory !== action.filterSlug\n )\n if (!action.clearParent && subcategories.length === 0) {\n categories[action.parentCategory] = 'all'\n } else {\n categories[action.parentCategory] = subcategories\n }\n\n return Object.assign({}, state, {\n filters: {\n ...state.filters,\n categories\n }\n })\n // case SET_DIFFICULTY_FILTER:\n // return Object.assign({}, state, {\n // filters: {\n // ...state.filters,\n // difficulty: action.difficulty\n // }\n // })\n // case SET_INTENSITY_FILTER:\n // return Object.assign({}, state, {\n // filters: {\n // ...state.filters,\n // intensity: action.intensity\n // }\n // })\n // case CLEAR_DIFFICULTY_FILTER:\n // return Object.assign({}, state, {\n // filters: {\n // ...state.filters,\n // difficulty: null\n // }\n // })\n // case CLEAR_INTENSITY_FILTER:\n // return Object.assign({}, state, {\n // filters: {\n // ...state.filters,\n // intensity: null\n // }\n // })\n case SET_PRODUCT_ORDER:\n return Object.assign({}, state, {\n filters: {\n ...state.filters,\n order: action.order\n }\n })\n case CLEAR_ALL_SERIES_FILTERS:\n return Object.assign({}, state, {\n filters: {\n categories: {\n yoga: [],\n fitness: [],\n mindfulness: [],\n wellness: [],\n skills: []\n },\n instructors: [],\n equipment: [],\n focus_area: [],\n difficulties: [],\n intensities: [],\n order: state.filters.order,\n page: 1\n }\n })\n case DEFAULT_SERIES_FILTERS:\n return { ...state, defaultFilter: action.defaultFilter }\n default:\n return state\n }\n}\n\nexport default products\n","import { createStore, applyMiddleware, compose } from 'redux'\nimport rootReducer from './reducers'\nimport thunk from 'redux-thunk'\n\nlet store\n\nexport function getStore () {\n const composeEnhancers =\n window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose\n\n const enhancer = composeEnhancers(applyMiddleware(thunk))\n\n if (!store) {\n store = createStore(rootReducer, enhancer)\n }\n\n return store\n}\n","import { USER_FETCHED, USER_LOADED } from '../actions/users'\n\nconst defaultState = {\n loaded: false\n}\n\nlet users = (state = defaultState, action) => {\n switch (action.type) {\n case USER_FETCHED:\n return Object.assign({}, state, {\n currentUserUsername: action.user.username\n })\n case USER_LOADED:\n return Object.assign({}, state, {\n loaded: true\n })\n default:\n break\n }\n return state\n}\n\nexport default users\n","import * as uiReducers from './uiReducers'\nimport { combineReducers } from 'redux'\nimport { orm } from '../../models/models'\nimport users from './users'\nimport { createReducer } from 'redux-orm'\n\nlet rootReducer = combineReducers({\n orm: createReducer(orm),\n ui: combineReducers(uiReducers),\n users\n})\n\nexport default rootReducer\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => \n \n this.selectLayout('list')}\n >\n this.selectLayout('tile')}\n >\n \n \n )\n }\n}\n\nLayoutSelector.propTypes = {\n onSelect: PropTypes.func,\n layout: PropTypes.string\n}\n\nexport default LayoutSelector\n","export const screenXS = 768\n","import PlaylistFollower from '../../models/PlaylistFollower'\n\nexport const PLAYLIST_FOLLOWED = 'PLAYLIST_FOLLOWED'\nexport const PLAYLIST_UNFOLLOWED = 'PLAYLIST_UNFOLLOWED'\n\nexport function playlistFollowed (uuid) {\n return {\n type: PLAYLIST_FOLLOWED,\n uuid\n }\n}\n\nexport function playlistUnfollowed (uuid) {\n return {\n type: PLAYLIST_UNFOLLOWED,\n uuid\n }\n}\n\nexport function followPlaylist (playlist) {\n return dispatch => {\n return new Promise(resolve => {\n PlaylistFollower.create(playlist.uuid).then(() => {\n dispatch(playlistFollowed(playlist.uuid))\n resolve()\n })\n })\n }\n}\n\nexport function unfollowPlaylist (playlist) {\n return dispatch => {\n return new Promise(resolve => {\n PlaylistFollower.destroy(playlist.uuid).then(() => {\n dispatch(playlistUnfollowed(playlist.uuid))\n resolve()\n })\n })\n }\n}\n","import FilterUniButton from './FilterUniButton'\n\nexport default FilterUniButton\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 = this.props?.featuredProducts ? JSON.parse(this.props?.featuredProducts)\n : '';\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 {this.renderExplorePage()} \n }\n}\n\nExplorePage.propTypes = {\n allProductCount: PropTypes.number,\n baseUrl: PropTypes.string,\n categories: PropTypes.string,\n difficulty: PropTypes.string,\n intensity: PropTypes.string,\n prefilteredCategories: PropTypes.string,\n defaultOrder: PropTypes.string,\n pageVersion: PropTypes.string,\n featuredProducts: PropTypes.string,\n equipmentTags: PropTypes.object,\n focusAreaTags: PropTypes.object,\n instructorList: PropTypes.object\n}\n\nexport default ExplorePage\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport './AloCheckbox.scss'\n\nlet AloCheckbox = props => {\n return (\n \n
\n props.handleChange(props.value)}\n />\n
\n {props.icon}\n {props.label || props.value}\n \n
\n \n \n {numberOfActiveFilters >= 0\n ? `Filters (${numberOfActiveFilters})`\n : 'Filters'}\n \n onClearAll()}>\n Clear All\n \n \n \n \n {typeof totalProducts === 'number' && !Number.isNaN(totalProducts)\n ? totalProducts\n : 0}\n {` ${contentLabel}`}\n \n \n \n \n \n )\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nlet SimpleFormat = props => {\n let paragraphs = props.text.split('\\n')\n\n let formattedText = paragraphs.map((paragraph, idx) => {\n return {paragraph.replace(/
/g, '
\n })\n\n return {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 newSource.res\n } \n {videoElem}\n \n )\n } else {\n renderedContent = videoElem\n }\n }\n return renderedContent\n }\n\n enablePlaylistControls () {\n return this.props.originType && this.props.userLoggedIn\n }\n\n isExternalVideo () {\n return (\n this.props.useExternal && this.props.video && this.props.video.external\n )\n }\n\n videoIsUpdating () {\n return (\n this.props.video &&\n (this.props.video.process_status === 'started' ||\n this.props.video.process_status === 'uploaded')\n )\n }\n\n attachPlayerEvents (player) {\n player.on('play', () => {\n this.setState({ playing: true, userInactive: false })\n })\n\n player.on('pause', () => {\n this.setState({ playing: false, userInactive: false })\n })\n\n player.on('firstplay', () => {\n this.setState({ hasStarted: true })\n })\n\n player.on('userinactive', () => {\n this.setState({ userInactive: true })\n })\n\n player.on('useractive', () => {\n this.setState({ userInactive: false })\n })\n\n player.on('seeking', () => {\n !this.state.seeking && this.setState({ seeking: true })\n })\n\n player.on('seeked', () => {\n this.setState({ seeking: false })\n })\n\n // Google Tag Manager\n // Binding to timeupdate event in VideoTracker was not working\n if (this.props.trackVideo && window.dataLayer) {\n player.on('timeupdate', () => {\n if (!this.gtmVideoStarted && player.currentTime() >= 10) {\n this.gtmVideoStarted = true\n\n window.dataLayer.push({\n event: 'videoStarted',\n productId: `plan_${this.props.planId}`\n })\n }\n })\n }\n }\n\n render () {\n let videoListMobile\n if (this.enablePlaylistControls()) {\n const controlsShowing =\n this.state.hasStarted &&\n (!this.state.playing || !this.state.userInactive)\n\n const videoListMobileProps = {\n ...this.videoListProps(),\n controlsShowing,\n playing: this.state.playing\n }\n\n videoListMobile = \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\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 {secondImage}\n
\n
\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
{this.props.type} \n
\n
{this.props.title} \n {this.props.coachName} \n \n
\n {this.props.entryListOrigin.entries.length} Classes\n \n {this.renderFavoritesButton()}\n
\n {({ toggleFavorite, isFavorited }) => {\n let menuOptions = [\n {\n text: 'Add To Playlist',\n children: [\n {\n text: 'New Playlist',\n underlined: true,\n handleClick: () => {\n this.setState({ newPlaylistModalOpen: true })\n }\n }\n ].concat(\n this.props.userPlaylists.map(playlist => {\n return {\n text: playlist.title,\n included: this.props.playlistEntries\n .filter({\n playlist: playlist.uuid,\n planEntry: this.props.planEntry.id\n })\n .exists(),\n handleClick: () => {\n this.props.createNewPlaylistEntry(\n playlist.uuid,\n this.props.planEntry.getId()\n )\n }\n }\n })\n )\n },\n {\n text: isFavorited ? 'Remove From My Practice' : 'Save To Classes',\n handleClick: toggleFavorite\n }\n ]\n\n if (this.props.currentUser && this.props.currentUser.admin) {\n menuOptions = menuOptions.concat([\n {\n text: this.props.entryIsFeatured ? 'Unfeature' : 'Feature',\n handleClick: () => {\n let action\n if (this.props.planEntry.featured) {\n this.props.planEntry.unfeature()\n action = 'unfeature'\n } else {\n this.props.planEntry.feature()\n action = 'feature'\n }\n this.props.updateFeaturedFlagInTree(action)\n }\n }\n ])\n }\n\n return (\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\nFavoritePlusButton.propTypes = {\n active: PropTypes.bool,\n createNewPlaylistEntry: PropTypes.func,\n handleClick: PropTypes.func,\n planEntry: PropTypes.object,\n playlistEntries: PropTypes.object,\n userPlaylists: PropTypes.array,\n currentUser: PropTypes.object,\n updateFeaturedFlagInTree: PropTypes.func,\n entryIsFeatured: PropTypes.bool\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n userPlaylists: userAuthoredPlaylists(state),\n playlistEntries: getPlaylistEntries(state),\n currentUser: currentUser(state),\n entryIsFeatured: isPlanEntryFeatured(state, ownProps.planEntry.id)\n }\n}\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n createNewPlaylistEntry: (playlistUUID, planEntryId) => {\n dispatch(createNewPlaylistEntry(playlistUUID, planEntryId))\n },\n updateFeaturedFlagInTree: action => {\n if (action === 'feature') {\n dispatch(featurePlanEntry(ownProps.planEntry.id))\n } else {\n dispatch(unfeaturePlanEntry(ownProps.planEntry.id))\n }\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(FavoritePlusButton)\n","import React from 'react'\n\nconst trackableContext = React.createContext()\nexport default trackableContext\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport IntroductoryIcon from '../../../assets/codicons/introductory'\nimport BeginnerIcon from '../../../assets/codicons/beginner'\nimport ModerateIcon from '../../../assets/codicons/moderate'\nimport IntermediateIcon from '../../../assets/codicons/intermediate'\nimport AdvancedIcon from '../../../assets/codicons/advanced'\nimport PlayIcon from '../../../assets/codicons/play-80'\n\nconst AccessedItemImage = (props) => {\n const renderPlaylistImage = () => {\n let image\n if (props.item.coverPhoto) {\n image = {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 {difficultyIcon()}\n {props.item.meta.difficulty} \n
\n
\n {props.item.meta.humanDuration}\n
\n
\n
\n {playIcon}\n {planEntryMeta}\n
\n
{renderPlaylistImage()}
\n
{renderImage()} \n}\n\nAccessedItemImage.defaultProps = {\n includeMetaInfo: true\n}\n\nAccessedItemImage.propTypes = {\n includeMetaInfo: PropTypes.bool,\n item: PropTypes.object\n}\n\nexport default AccessedItemImage\n","import React from 'react'\nimport css from '@styled-system/css'\nimport styled from 'styled-components'\n\nimport { Box } from 'ui/bend'\n\nconst Container = styled(Box)(() =>\n css({\n backgroundColor: '#f2f2f2',\n width: 'fit-content',\n padding: '4px',\n marginBottom: '4px',\n color: '#000',\n fontSize: '12px',\n fontWeight: '500',\n lineHeight: '14px',\n letterSpacing: '0.96px',\n textTransform: 'uppercase'\n })\n)\n\nexport const Badge = ({ children }) => {\n return {children} \n}\n","import React from 'react'\nimport classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport InfiniteScroll from 'react-infinite-scroller'\nimport styled from 'styled-components'\n\nconst ItemTileGridStyles = styled.section`\n ${props => props.gridStyles};\n\n .products-grid.non-auto:not(.paginated)\n .product:nth-of-type(n + ${props => props.numToInitialHide}) {\n display: none;\n }\n`\nclass ItemTileGrid extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n paginated: false\n }\n\n this.setNumberOfTilesPerRow = this.setNumberOfTilesPerRow.bind(this)\n }\n\n setNumberOfTilesPerRow () {\n let styles = ''\n\n for (const screenWidth in this.props.tilesPerRow) {\n const numCards = this.props.tilesPerRow[screenWidth]\n\n const style = `\n @media(min-width: ${screenWidth}px) {\n .product {\n width: ${100.0 / numCards}%\n }\n }\\n`\n styles = styles.concat(style)\n }\n\n return styles\n }\n\n render () {\n let baseClassNames = ['products-container', 'products-grid']\n if (this.props.additionalClassNames) {\n baseClassNames = baseClassNames.concat(this.props.additionalClassNames)\n }\n\n const itemGridClassName = classNames(baseClassNames, {\n 'product-cards-loading': this.props.isLoading,\n 'compact-xs tile-view': this.props.layout === 'tile',\n 'list-view': this.props.layout === 'list',\n 'non-auto': !this.props.autopaginate,\n paginated: this.state.paginated\n })\n\n let loadingCards\n\n if (this.props.isLoading) {\n loadingCards = new Array(12).fill(null).map((card, idx) => (\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 if (this.props.autopaginate) loadMoreTiles()\n }}\n threshold={this.props.scrollThreshold}\n >\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}) => \n \n {numeral(this.props.memberCount).format('0[.]0a')}\n \n {this.props.memberCount} \n \n )\n if (this.props.product['bestSeller?']) {\n return (\n \n
\n {\n this.setState({ flameHovered: true })\n }}\n offHover={() => {\n this.setState({ flameHovered: false })\n }}\n >\n
\n
\n
\n
\n {numeral(this.props.memberCount).format('0[.]0a')}\n \n
{this.props.memberCount} \n
\n
{this.renderDifficultyIcon()}
\n
{this.props.difficultyLevel}
\n
{mobileProductDifficulty}
\n
\n
\n \n
\n \n
\n
\n
{\n if (this.props.onTitleHeightChange) {\n this.titleHeightChanged(contentDim)\n }\n }}\n >\n {({ measureRef }) => (\n \n
\n
\n
\n {favoriteButton}\n
\n
\n {this.props.parentLabel}\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 \n {this.renderWorkoutCount()}\n {this.renderDifficultyLabel()}\n {this.renderBestSeller()}\n
\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 let completedIcon\n if (props.completedIcon) {\n completedIcon = props.completedIcon()\n }\n\n return (\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}) => \n {props.type}
\n \n \n )\n}\n\nVideoListIcon.propTypes = {\n type: PropTypes.string\n}\n\nexport default VideoListIcon\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => \n {this.props.children}\n \n )\n }\n}\n\nElementHeightAnimator.defaultProps = {\n onAfterClose: () => {},\n onAfterOpen: () => {}\n}\n\nElementHeightAnimator.propTypes = {\n children: PropTypes.node,\n open: PropTypes.bool,\n onAfterClose: PropTypes.func,\n onAfterOpen: PropTypes.func,\n sliderClass: PropTypes.string\n}\n\nexport default ElementHeightAnimator\n","import React from 'react'\nimport PlaylistSelector from './PlaylistSelector'\nimport EmptyState from '../EmptyState'\nimport PlaylistDisplay from './PlaylistDisplay'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\nimport { withRedux, withUser } from '../reduxContainer'\nimport {\n userFollowedPlaylists,\n getDisplayedPlaylist\n} from '../../redux/selectors/playlists'\nimport {\n setDisplayedPlaylist,\n playlistDeleted,\n finishCreateNewPlaylist,\n clearPlaylistEntries,\n reorderUserPlaylists\n} from '../../redux/actions/playlists'\nimport { currentUser } from '../../redux/selectors/user'\n\nclass UserPlaylists extends React.Component {\n constructor (props) {\n super(props)\n\n this.selectPlaylist = this.selectPlaylist.bind(this)\n this.removePlaylist = this.removePlaylist.bind(this)\n this.handleOnPlaylistAdded = this.handleOnPlaylistAdded.bind(this)\n this.setDisplayedPlaylistFromUUID = this.setDisplayedPlaylistFromUUID.bind(\n this\n )\n this.handleOnPlaylistDuplicated = this.handleOnPlaylistDuplicated.bind(this)\n\n // We use this.state.uuid to hold the current Playlist UUID that we should be rendering.\n // It is updated whenever the current implementation makes changes to the displayed playlist (e.g. selectPlaylist()).\n // This WOULD BE the ideal situation (have component maintain internal state), however, the component currently leverages Redux for this... for reasons(?)\n\n this.state = {\n uuid: this.props.uuid\n }\n\n window.onpopstate = e => {\n const uuid = e.state.uuid\n this.setDisplayedPlaylistFromUUID(uuid)\n }\n }\n\n // componentDidMount () {\n // if (this.props.displayedPlaylist) {\n // const playlist = this.props.displayedPlaylist\n // window.history.replaceState(\n // { uuid: playlist.uuid, active: this.props.playlistTab },\n // null,\n // `/user/playlists/${playlist.uuid}`\n // )\n // }\n // }\n\n componentDidUpdate () {\n const playlists = this.props.playlists\n if (!this.props.displayedPlaylist && playlists.length > 0) {\n const playlist = this.props.uuid\n ? playlists.filter(playlist => playlist.uuid === this.props.uuid)[0]\n : playlists[0]\n this.switchPlaylists(playlist)\n\n // window.history.replaceState(\n // { uuid: playlist.uuid, active: this.props.playlistTab },\n // null,\n // `/user/playlists/${playlist.uuid}`\n // )\n }\n }\n\n handleOnPlaylistDuplicated (playlist) {\n this.props.clearPlaylistEntries()\n this.props.addDuplicatedPlaylist(playlist)\n\n this.switchPlaylist(this.props.playlists[0])\n //this.pushWindowState(playlist)\n }\n\n // pushWindowState (playlist) {\n // window.history.pushState(\n // { uuid: playlist.uuid, active: this.props.playlistTab },\n // null,\n // `/user/playlists/${playlist.uuid}`\n // )\n // }\n\n setDisplayedPlaylistFromUUID (uuid) {\n const playlist = this.props.playlists.filter(\n playlist => playlist.uuid === uuid\n )[0]\n\n this.switchPlaylists(playlist)\n }\n\n handleOnPlaylistAdded (playlist) {\n this.setDisplayedPlaylistFromUUID(playlist.uuid)\n //this.pushWindowState(playlist)\n }\n\n selectPlaylist (playlist) {\n //const onMobile = window.innerWidth < 768\n\n // if (onMobile) {\n // window.location.href = `/playlists/${playlist.uuid}`\n // } else {\n if (playlist.uuid !== this.state.uuid) {\n this.setState({ uuid: playlist.uuid })\n this.switchPlaylists(playlist)\n }\n //}\n }\n\n removePlaylist (uuid) {\n this.props.playlistDeleted(uuid)\n if (this.props.playlists.length > 0) {\n this.switchPlaylists(this.props.playlists[0])\n }\n }\n\n switchPlaylists (playlist) {\n this.props.clearPlaylistEntries()\n this.props.setDisplayedPlaylist(playlist)\n }\n\n render () {\n const {\n playlists,\n displayedPlaylist,\n currentUser,\n userLoaded,\n reorderUserPlaylists\n } = this.props\n\n let playlistDisplay\n \n if (currentUser) {\n // If current user is already loaded\n if (playlists.length === 0) {\n playlistDisplay = (\n \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
{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 props.onSelect(playlist)\n }}\n >\n {playlistImage}\n \n
{playlist.title}
\n
\n {playlistAuthor}\n \n {`${playlist.entryCount} ${pluralize(\n 'Class',\n playlist.entryCount\n )}`}\n \n \n
{\n onDeleted(entry.id)\n }}\n includeDates={includeDates}\n entryLinkSuffix={entryLinkSuffix}\n />\n ))\n\n const planEntryRows = (\n {\n onSortEnd(items, evt)\n }}\n options={{\n animation: 150,\n disabled: !sortable\n }}\n >\n {planEntryItems}\n \n )\n\n return {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 {({ toggleFavorite, isFavorited }) => (\n {\n this.toggleFavorite = toggleFavorite\n this.fadeRowOut()\n }}\n />\n }\n width={211}\n topOffset={-10}\n leftOffset={10}\n >\n {isFavorited ? 'Remove from' : 'Add to'} my practice\n \n )}\n \n \n )\n }\n\n let dateAddedLabel\n if (includeDates) {\n dateAddedLabel = (\n \n {this.formatDateAddedLabel(dateAdded)}\n \n )\n }\n\n let className = this.planEntryClassName\n if (this.state.fadeOut) className += ' PlanEntryListRow--faded'\n\n return (\n \n \n {handle} \n {favoriteButton}\n \n {locked ? {planEntry.title} \n \n {plan.title} \n \n \n {planEntry?.plan?.coaches.map((coach, idx) => {\n let coachName = `${coach.firstName} ${coach.lastName}`\n const length = planEntry?.plan?.coaches?.length\n if (length > 1 && idx === length - 1) {\n coachName = ' & '.concat(coachName)\n }\n if (length > 0 && idx < length - 2) {\n coachName += ', '\n }\n if (coach.coachInfo) {\n return (\n \n {coachName}\n \n )\n } else {\n return {coachName} \n }\n })}\n \n \n {planEntry.humanDuration}\n \n\n {dateAddedLabel}\n\n {\n e.preventDefault()\n e.stopPropagation()\n }}\n >\n \n
\n )\n case 'DUPLICATE':\n return (\n {\n this.changeDisplay('PLAYLIST')\n }}\n onConfirm={() => {\n this.addToPlaylist(this.state.duplicatePlaylist)\n }}\n playlist={this.state.duplicatePlaylist}\n entry={this.props.planEntry}\n />\n )\n default:\n return (\n \n )\n }\n }\n\n render () {\n const view = this.getDisplayedView()\n\n return (\n \n {view}\n \n )\n }\n}\n\nPlanEntryOptionsModal.propTypes = {\n show: PropTypes.bool,\n onHide: PropTypes.func,\n playlists: PropTypes.array,\n onPlaylistSelect: PropTypes.func,\n planEntry: PropTypes.object,\n planEntryInPlaylist: PropTypes.func\n}\n\nexport default PlanEntryOptionsModal\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport './PrivateContent.scss'\nimport LockIcon from '../../assets/codicons/lock'\n\nconst PrivateContent = ({ caption, grey }) => {\n let descriptionClass = 'PrivateContent__description'\n if (grey) descriptionClass += ' PrivateContent__description--grey'\n return (\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
\n
\n
\n
\n\n {playlist.htmlDescriptionAllowed ? (\n
\n ) : (\n
\n {playlist.description}\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 this.markThatUserHasChangedFilters()\n this.props.onReset()\n }}\n >\n Reset Filters\n \n )\n }\n\n filterListContent = (\n {\n node.addEventListener('transitionend', e => {\n const hidden = node.style.opacity === 0\n if (e.propertyName === 'opacity' && hidden) {\n this.setState({ shouldDisplayFullscreenFilters: true })\n }\n })\n }}\n >\n {state => {\n const contentClassName = `FilterList__content FilterList__content--${state}`\n\n return (\n \n
\n {this.props.filterListOptions.map((option, idx) => (\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 {resetButton}\n
{\n node.addEventListener('transitionend', e => {\n const isHidden = node.style.opacity === 0\n if (isHidden && e.preventDefault === 'opacity') {\n this.setState({ shouldDisplayFullscreenFilters: false })\n }\n })\n }}\n >\n {state => {\n return (\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
{\n this.props.onHide(this.state.userHasChangedFilters)\n }}\n >\n ×\n \n )\n }\n}\n\nFilterList.propTypes = {\n isOpen: PropTypes.bool,\n onHide: PropTypes.func.isRequired,\n filterListOptions: PropTypes.array.isRequired,\n filteredLabels: PropTypes.object\n}\n\nexport default FilterList\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport './FilterListItem.scss'\n\nconst FilterListItem = ({\n onSelect,\n filteredLabels,\n label,\n content,\n isExpanded,\n isFullscreen,\n onFilterSelected\n}) => {\n let itemContent\n if (isExpanded && content) {\n itemContent = (\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\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 rest.addFilter('duration', newDurationMinMax)\n touchList()\n }}\n />\n )\n }\n }\n\n let instructorFilter\n if (!rest.noInstructors) {\n instructorFilter = {\n label: 'instructors',\n isFullscreen: true,\n filteredLabels: filteredLabels.instructors.map(\n (instructor) => instructor.text\n ),\n content: (touchList) => {\n return (\n \n {\n rest.clearInstructorFilter()\n touchList()\n }}\n active={this.noInstructorsFiltered()}\n />\n {filterOptions.instructors.map((option, idx) => {\n const alreadyFiltered = this.instructorAlreadyFiltered(option)\n return (\n {\n if (alreadyFiltered) {\n rest.removeFilter(\n 'instructors',\n option.slug,\n filterByFields.instructors\n )\n } else {\n rest.addFilter('instructors', option)\n }\n touchList()\n }}\n />\n )\n })}\n \n )\n }\n }\n }\n\n const styleFilter = {\n label: 'styles',\n isFullscreen: true,\n filteredLabels: filteredLabels.styles.map((label) => label.text),\n content: (touchList) => {\n if (this.props.withSubcategories) {\n return (\n {\n const root = {\n title: rootCategory ? rootCategory.title : subcategory.title,\n slug: rootCategory ? rootCategory.slug : subcategory.slug\n }\n const rootCategorySelected = subcategory === 'all'\n\n const categoryToToggle = rootCategorySelected\n ? rootCategory\n : subcategory\n\n if (\n this.categoryAlreadyFiltered(root, {\n isRoot: rootCategorySelected,\n subcategory: categoryToToggle\n })\n ) {\n rest.removeFilter('styles', categoryToToggle.slug, 'slug', {\n rootSlug: root.slug,\n isRoot: rootCategorySelected\n })\n } else {\n rest.addFilter('styles', categoryToToggle, {\n root: rootCategory,\n isRoot: rootCategorySelected\n })\n }\n touchList()\n }}\n />\n )\n } else {\n // Temporary so that page will still work even when no subcategories have been listed. This needs to be taken out\n // when all subcategories have gone live.\n return (\n \n {filterOptions.styles.map((option, idx) => {\n const alreadyFiltered = this.categoryAlreadyFiltered(option, {\n isRoot: true,\n subcategory: option\n })\n return (\n {\n if (alreadyFiltered) {\n rest.removeFilter(\n 'styles',\n option.slug,\n filterByFields.styles,\n {\n isRoot: true,\n root: option\n }\n )\n } else {\n rest.addFilter('styles', option, {\n isRoot: true,\n root: option\n })\n }\n touchList()\n }}\n />\n )\n })}\n \n )\n }\n }\n }\n\n const intensityFilter = {\n label: 'intensity',\n filteredLabels: filteredLabels.intensities.map(\n (intensity) => intensity.text\n ),\n content: (touchList) => {\n return (\n {\n if (this.intensityAlreadyFiltered(intensity.level)) {\n rest.removeFilter(\n 'intensities',\n intensity.level,\n filterByFields.intensities\n )\n } else {\n rest.addFilter('intensities', intensity)\n }\n touchList()\n }}\n filterOptions={filterOptions.intensities.map((intensity) => ({\n label: intensity.level,\n obj: intensity,\n active: this.intensityAlreadyFiltered(intensity.level)\n }))}\n />\n )\n }\n }\n\n const difficultyFilter = {\n label: 'difficulty',\n filteredLabels: filteredLabels.difficulties.map(\n (difficulty) => difficulty.text\n ),\n content: (touchList) => {\n return (\n {\n if (this.difficultyAlreadyFiltered(difficulty)) {\n rest.removeFilter('difficulties', difficulty)\n } else {\n rest.addFilter('difficulties', difficulty)\n }\n touchList()\n }}\n filterOptions={filterOptions.difficulties.map((difficulty) => ({\n label: difficulty,\n active: this.difficultyAlreadyFiltered(difficulty)\n }))}\n />\n )\n }\n }\n\n let filterListOptions = instructorFilter ? [instructorFilter] : []\n\n filterListOptions = [\n ...filterListOptions,\n durationFilter,\n difficultyFilter,\n intensityFilter,\n styleFilter\n ]\n\n const filterListProps = {\n ...rest,\n filterListOptions,\n filteredLabels,\n onReset: rest.clearAllFilters\n }\n return \n
\n {this.displayPlaylistImage()}\n
{\n this.setState({ openPhotoUploader: true })\n }}\n >\n \n
{\n this.setState({ openPhotoUploader: false })\n }}\n onUploaded={remoteCoverPhotoUrl => {\n this.setState({ remoteCoverPhotoUrl })\n }}\n onDelete={this.deleteCoverPhoto}\n photoType='cover'\n removingImage={this.state.removingImage}\n />\n \n )\n } else {\n let backgroundImage\n if (playlist.firstEntry) {\n backgroundImage = playlist.firstEntry.videoThumbnail\n }\n return (\n \n
\n
\n
{\n this.setState({ remoteCoverPhotoUrl })\n }}\n />\n \n
\n Edit playlist details \n \n \n
Name \n
\n\n
Description \n
\n\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 On}\n off={Off }\n size='xs'\n offstyle='danger'\n value={this.state.private}\n />\n \n\n
Update Image \n
\n {this.renderImageUploader()}\n
\n
\n\n \n \n Cancel\n \n {\n this.setState({ submitting: true })\n this.props.onPlaylistUpdate(this.state, () => {\n this.setState({ submitting: false })\n this.props.onHide()\n })\n }}\n >\n Done\n \n \n \n )\n }\n}\n\nEditPlaylistModal.propTypes = {\n onHide: PropTypes.func,\n playlist: PropTypes.object,\n show: PropTypes.bool,\n onPlaylistUpdate: PropTypes.func\n}\n\nexport default EditPlaylistModal\n","import BaseModel from './BaseModel'\nimport axiosInstance from 'api/axios.config'\nimport {\n PLAYLIST_FOLLOWED,\n PLAYLIST_UNFOLLOWED\n} from '../redux/actions/playlistFollowers.js'\n\nclass PlaylistFollower extends BaseModel {\n static reducer (action, _, session) {\n const playlist = session.Playlist.withId(action.uuid)\n switch (action.type) {\n case PLAYLIST_FOLLOWED:\n playlist.update({\n following: true\n })\n break\n case PLAYLIST_UNFOLLOWED:\n playlist.update({\n following: false\n })\n break\n }\n }\n\n static create (uuid) {\n return axiosInstance.post(`/playlists/${uuid}/followers`)\n }\n\n static destroy (uuid) {\n return axiosInstance.delete(`/playlists/${uuid}/followers`)\n }\n}\n\nPlaylistFollower.modelName = 'PlaylistFollower'\n\nexport default PlaylistFollower\n","export const difficultyFilterOptions = [\n 'introductory',\n 'beginner',\n 'moderate',\n 'intermediate',\n 'advanced'\n]\n\nexport const intensityFilterOptions = [\n {\n level: 1,\n caption:\n 'Ideal for those looking for a slower-paced, chill, or more restorative style of class. You’ll leave feeling calm, relaxed, and at ease.'\n },\n {\n level: 2,\n caption:\n 'Great for those who want to move at a slow to moderate pace. Classes within this level vary from feel-good flows to entry-level strength training. You’ll feel comfortably challenged and explore a more dynamic range of movement.'\n },\n {\n level: 3,\n caption:\n 'This is the best option for those looking to amp up the sweat factor. You’ll get your heart rate up, test your endurance, and challenge your limits with faster-paced movement and exercises.'\n },\n {\n level: 4,\n caption:\n 'These classes are designed to test your limits to the max. You’ll move at a fast pace to push yourself to your peak, increase your heart rate, and accelerate your breathing. Prepare to discover untapped levels of strength and endurance.'\n }\n]\n","import { createSelector } from 'reselect'\nimport { createSelector as ormCreateSelector } from 'redux-orm'\nimport orm from '../../models/models'\n\nexport const products = createSelector(\n (state) => state.orm,\n ormCreateSelector(orm, (session) => {\n console.log(\"sessionsession= \", orm)\n return session.Product.all().toModelArray()\n })\n)\n\nexport const getProductRequestObj = (filters) => {\n let categories = []\n const filteredCategories = filters.categories\n for (const category in filters.categories) {\n const subcategories = filteredCategories[category]\n if (subcategories === 'all') {\n categories.push(category)\n } else {\n categories = categories.concat(subcategories)\n }\n }\n\n const order = filters.order\n const difficulties = filters.difficulties\n const intensities = filters.intensities\n const instructors = filters.instructors?.map((item) => item.slug)\n const focus_areas = filters['focus_area']?.map((item) => item)\n const equipments = filters.equipment?.map((item) => item)\n const page = filters.page\n\n return {\n categories,\n order,\n difficulties,\n intensities,\n page,\n instructors,\n focus_areas,\n equipments,\n per_page: 24\n }\n}\n\nexport const buildFilterUrl = (filterParams) => {\n let url = []\n let categoryFilters = ''\n let idx = 0\n\n for (const category in filterParams.categories) {\n const subcategories = filterParams.categories[category]\n if ((subcategories === 'all' || subcategories.length > 0) && idx > 0) {\n categoryFilters += ','\n }\n if (subcategories === 'all') {\n categoryFilters += category\n idx++\n } else if (subcategories.length > 0) {\n categoryFilters += subcategories.join()\n idx++\n }\n }\n\n \n if (categoryFilters.length > 0) {\n url.push(`categories=${categoryFilters}`)\n }\n\n if (filterParams.difficulties.length > 0) {\n url.push(`difficulties=${filterParams.difficulties.map((item) => item)}`)\n }\n\n if (filterParams.intensities.length > 0) {\n url.push(`intensities=${filterParams.intensities.map((item) => item)}`)\n }\n\n if (filterParams.instructors.length) {\n url.push(\n `instructors=${filterParams.instructors?.map((item) => item.slug)}`\n )\n }\n\n if (filterParams['focus_area'].length) {\n url.push(`focus_area=${filterParams['focus_area']?.map((item) => item)}`)\n }\n\n if (filterParams.equipment.length) {\n url.push(`equipment=${filterParams.equipment?.map((item) => item)}`)\n }\n\n if (filterParams.order) {\n url.push(`order=${filterParams.order}`)\n }\n\n return url.join('&')\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport FilterLabelsRow from '../../../filtersRow/FilterLabelsRow'\nimport FilterUniButton from '../../../filterUniButton'\nimport FilterPillsSection from '../../../filterPills/FilterPillsSection'\n\nconst CategoryFilters = props => {\n let filterPillsSection\n\n if (\n props.presentedCategory &&\n props.presentedCategory.planSubcategories.count() > 0\n ) {\n filterPillsSection = (\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}\n\nCategoryFilters.propTypes = {\n activeCategory: PropTypes.string,\n categories: PropTypes.array,\n presentedCategory: PropTypes.object,\n filterOptions: PropTypes.object,\n subcategoryFilterOptions: PropTypes.object,\n uniButtonSelect: PropTypes.func\n}\n\nexport default CategoryFilters\n","import React from 'react'\nimport classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport FilterUniButtonModal from './FilterUniButtonModal'\nimport './FilterUniButton.scss'\n\nclass FilterUniButton extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n modalOpen: false\n }\n }\n\n render () {\n const uniButtonClass = classNames('FilterUniButton', {\n 'FilterUniButton--active': !!this.props.currentlySelectedOption\n })\n\n let options = this.props.options\n let currentlySelectedOption\n let allOption\n\n if (this.props.includeAllOption) {\n allOption = {\n label: `All ${this.props.filterContext}`,\n filterValue: 'all'\n }\n options = [allOption].concat(options)\n\n currentlySelectedOption = this.props.currentlySelectedOption\n ? this.props.currentlySelectedOption\n : 'all'\n }\n\n return (\n \n
{\n this.setState({ modalOpen: true })\n }}\n >\n {this.props.currentlySelectedOption\n ? this.props.currentlySelectedOption\n : `All ${this.props.filterContext}`}\n {\n this.props.onSelect(option.filterValue || option.label)\n }}\n onHide={() => {\n this.setState({ modalOpen: false })\n }}\n />\n \n )\n }\n}\n\nFilterUniButton.defaultProps = {\n includeAllOption: true\n}\n\nFilterUniButton.propTypes = {\n afterFilter: PropTypes.func,\n currentlySelectedOption: PropTypes.string,\n onSelect: PropTypes.func,\n filterContext: PropTypes.string,\n includeAllOption: PropTypes.bool,\n options: PropTypes.array\n}\n\nexport default FilterUniButton\n","import React from 'react'\nimport AloModal from '../AloModal'\nimport { Modal } from 'react-bootstrap'\nimport PropTypes from 'prop-types'\nimport './FilterUniButtonModal.scss'\n\nconst FilterUniButtonModal = ({\n options,\n currentlySelectedOption,\n onSelect,\n ...rest\n}) => {\n return (\n \n \n {options.map((option, idx) => {\n let modalItemClass = 'FilterUniButtonModal__item'\n if (\n currentlySelectedOption === (option.filterValue || option.label)\n ) {\n modalItemClass += ' FilterUniButtonModal__item--active'\n }\n return (\n {\n onSelect(option)\n rest.onHide()\n }}\n >\n {option.label}\n \n )\n })}\n \n \n )\n}\n\nFilterUniButtonModal.propTypes = {\n options: PropTypes.array,\n currentlySelectedOption: PropTypes.string,\n onSelect: PropTypes.func,\n onHide: PropTypes.func\n}\n\nexport default FilterUniButtonModal\n","import React from 'react'\nimport classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport './FilterPill.scss'\n\nconst FilterPill = props => {\n const pillClass = classNames('FilterPill', {\n 'FilterPill--active': props.active\n })\n\n return (\n {\n props.handleClick(props.filterValue || props.label)\n }}\n >\n {props.label}\n \n )\n}\n\nFilterPill.propTypes = {\n active: PropTypes.bool,\n label: PropTypes.string,\n filterValue: PropTypes.string,\n handleClick: PropTypes.func\n}\n\nexport default FilterPill\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport './CategoryBanner.scss'\n\nconst CategoryBanner = props => {\n let image = {}\n if (props.category.bannerPhoto) {\n image.backgroundImage = `url(${props.category.bannerPhoto.url})`\n }\n\n return (\n \n
\n
\n
\n
{props.category.title} \n
\n {props.category.description}\n
\n
\n
\n
\n {props.categories\n .slice(0, NUM_CATEGORY_CAROUSELS_TO_SHOW)\n .map((category, index) => (\n
\n ))}\n
\n \n )\n }\n }\n\n handleTransitionEnd () {\n const lastCard = this.cards[this.cards.length - 1]\n const lastCardRightPos =\n lastCard.getBoundingClientRect().left + lastCard.clientWidth\n\n const disableNext =\n lastCardRightPos <\n this.carouselContainer.current.clientWidth + this.props.leftPadding\n const disablePrev = this.indexOfMostLeftCard === 0\n\n this.setState({\n disableNext,\n disablePrev\n })\n }\n\n render () {\n let carouselItems = this.props.items.map((item, idx) => (\n \n {item.element}\n \n ))\n return (\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 \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
\n {props.item.type} by{' '}\n {productAuthors} \n
\n
\n
\n {({ addToFavorites }) => {\n return (\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 )\n}\n\nFavoriteDeleteUndo.propTypes = {\n favorite: PropTypes.object,\n onAdded: PropTypes.func\n}\n\nexport default FavoriteDeleteUndo\n","import css from '@styled-system/css'\nimport styled from 'styled-components'\nimport { H6, P } from 'ui/bend'\n\nexport const H6Title = styled(H6)(() =>\n css({\n color: '#000',\n fontSize: '16px',\n fontWeight: '700',\n textTransform: 'capitalize'\n })\n)\n\nexport const Desc = styled(P)(() =>\n css({\n color: '#000',\n fontSize: '14px',\n lineHeight: '18px',\n letterSpacing: '0.308px'\n })\n)\n","import camelize from 'camelize'\n\nclass AloObject {\n constructor (rawObject) {\n rawObject = camelize(rawObject)\n\n Object.keys(rawObject).forEach(key => {\n this[key] = rawObject[key]\n })\n }\n}\n\nexport default AloObject\n","import AloObject from './AloObject'\nimport PlanEntry from './PlanEntry'\nimport Product from './Product'\nimport Playlist from './Playlist'\n\n/**\n * Defines a class for a parent of a plan entry list. An example\n * would be a series or playlist as their models contains a list\n * of plan entries.\n */\nclass EntriesList extends AloObject {\n constructor (entriesObj) {\n super(entriesObj)\n this.buildPlanEntryList(entriesObj)\n }\n\n buildPlanEntryList (entriesObj) {\n this.entries = entriesObj.entries.map(entry => {\n return new PlanEntry(entry)\n })\n }\n\n buildEntryUrlFromPlaylist (entry) {\n if (entry) {\n return entry.buildEntryUrl({\n type: this.type,\n playlistUUID: this.uuid\n })\n }\n }\n\n entryAtIdx (entryIdx) {\n return this.entries[entryIdx]\n }\n\n getNextEntry (entryIdx) {\n if (entryIdx < this.listLength() - 1) {\n return this.entryAtIdx(entryIdx + 1)\n }\n return this.entryAtIdx(entryIdx)\n }\n\n getNextEntryUrl (entryIdx) {\n let nextEntry = this.getNextEntry(entryIdx)\n return this.buildEntryUrlFromPlaylist(nextEntry)\n }\n\n getPrevEntry (entryIdx) {\n if (this.entryAtIdx > 0) {\n return this.entryAtIdx(entryIdx - 1)\n }\n return this.entryAtIdx(entryIdx)\n }\n\n getPrevEntryUrl (entryIdx) {\n let prevEntry = this.getPrevEntry(entryIdx)\n return this.buildEntryUrlFromPlaylist(prevEntry)\n }\n\n listLength () {\n return this.entries.length\n }\n\n toggleFavorites () {\n let underlyingType\n switch (this.type) {\n case 'playlist':\n underlyingType = new Playlist(this)\n break\n case 'series':\n underlyingType = new Product(this)\n }\n return underlyingType.toggleFavorites()\n }\n}\n\nexport default EntriesList\n","import React, { forwardRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { axios } from 'api'\n\nimport { Box, Flex, Image, NameList, P, ResponsiveSVG } from 'ui/acro'\nimport { CardSubtitle, CardTitle } from '../styles'\nimport heartSVG from '../../../../../assets/images/heart.svg'\nimport heartFilledSVG from '../../../../../assets/images/heartFilled.svg'\n\nimport TimeCodeBadge from './TimeCodeBadge'\nimport { storeEventInLocalStorage } from 'gtm/pushEvents'\nimport { LightTheme } from 'ui/bend'\nimport moment from 'moment'\nimport { AlomovesIconSVG } from 'images/latest'\n\nconst HeartIconBox = styled(Box)`\n svg {\n path {\n &.heart-icon {\n fill: #3b3b3b99;\n }\n }\n }\n`\nconst Main = styled(Flex)`\n .no-image {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #f2f2f2;\n aspect-ratio: 16/9;\n }\n`\n\nconst getLocalDate = (d) => {\n let date = new Date(d)\n if (moment(date).isValid()) {\n return moment(date).local().format('MM/DD/YYYY')\n }\n\n date = String(d).replace(/-/g, '/')\n if (moment(date).isValid()) {\n return moment(date).local().format('MM/DD/YYYY')\n }\n\n return String(d)\n}\n\n// this version of the class card is used on the Most Popular and New Classes HP carousels\nconst ClassCard = forwardRef(\n (\n {\n carouselItem,\n humanDuration,\n id,\n plan,\n videoThumbnail,\n title,\n planEntryUrl,\n favoriteCallback,\n eventName,\n position,\n location,\n isFevIcon = true,\n difficultyLevel,\n className = '',\n ...rest\n },\n ref\n ) => {\n let image\n //const [isFavoritesAvailable, setIsFavoritesAvailable] = useState(rest.favorites?.length)\n const [favoritesId, setFavoritesId] = useState(rest?.favorites?.[0]?.id)\n const singleClass = Boolean(plan?.singleClass)\n //let favoritesId = rest?.favorites?.[0]?.id\n\n // console.log('isFavoritesAvailable= ', rest.favorites)\n if (typeof videoThumbnail !== 'undefined') {\n image = videoThumbnail\n }\n\n const addClass = (id) => {\n setFavoritesId(id)\n return axios\n .post('/favorites', { plan_entry_id: id })\n .then((res) => {\n if (res.status === 200) {\n setFavoritesId(res?.data?.id || null)\n favoriteCallback?.()\n } else {\n setFavoritesId(null)\n }\n })\n .catch((error) => {\n setFavoritesId(null)\n console.error(error)\n })\n }\n\n const removeClass = (id) => {\n setFavoritesId(null)\n return axios\n .delete(`/favorites/${id}`)\n .then((res) => {\n if (res.status === 200) {\n setFavoritesId(null)\n favoriteCallback?.()\n } else {\n setFavoritesId(id)\n }\n })\n .catch((error) => {\n console.error(error)\n setFavoritesId(id)\n })\n }\n\n const pushEvent = (e) => {\n if (!eventName) {\n return\n }\n const coachNames = plan.coaches\n ?.map((item) => `${item.firstName} ${item.lastName}`)\n .join(', ')\n\n const event_data = {\n event: eventName,\n position,\n instructor: coachNames,\n class: title,\n ...(location && { location })\n }\n\n storeEventInLocalStorage(event_data)\n }\n\n const difficulty = difficultyLevel || plan?.difficultyLevel\n\n return (\n \n {isFevIcon && (\n {\n e.stopPropagation()\n e.preventDefault()\n !favoritesId ? addClass(id) : removeClass(favoritesId)\n }}\n backgroundColor={'#FFFFFF99'}\n >\n \n \n {humanDuration}\n \n \n ) : (\n \n \n )}\n {title && (\n \n {title}\n \n )}\n {plan.coaches && (\n \n \n )}\n \n {plan.primaryCategory?.title && plan.primaryCategory.title}\n {plan.subcategory?.title && ` / ${plan.subcategory.title}`}\n {difficulty && ` • ${difficulty}`}\n \n \n {!singleClass && (\n <>\n Series:{' '}\n \n {plan?.title}\n \n \n )}\n {rest?.completedAt ? (\n \n Completed: {getLocalDate(rest?.completedAt)}\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'\nimport { css } from '@styled-system/css'\n\nconst CardTitle = styled(P)((props) =>\n css({\n fontFamily: props.theme.fonts.Proxima,\n fontSize: ['14px', '14px', '16px'],\n fontWeight: '700',\n letterSpacing: '0.352px',\n lineHeight: ['18px', '18px', '24px'],\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 \n {image && (\n \n \n {humanDuration}\n \n ) : (\n \n {workoutCount} classes\n \n )}\n \n )}\n {title && (\n \n {title}\n \n )}\n {plan ? (\n \n \n ) : (\n \n \n )}\n {category ? (\n \n {category.title && category.title}\n {subcategory && subcategory.title && ` / ${subcategory.title}`}\n \n ) : (\n \n {primaryCategory && primaryCategory.title}\n {primarySubcategory && ` / ${primarySubcategory.title}`}\n \n )}\n \n )\n }\n)\n\nKeepTrainingCard.propTypes = {\n carouselItem: PropTypes.bool,\n title: PropTypes.string,\n id: PropTypes.number,\n planEntryUrl: PropTypes.string,\n humanDuration: PropTypes.any,\n plan: PropTypes.object,\n category: PropTypes.object,\n subcategory: PropTypes.object,\n videoThumbnail: PropTypes.string,\n introVideoThumbnail: PropTypes.string,\n workoutCount: PropTypes.number,\n coaches: PropTypes.array,\n primaryCategory: PropTypes.object,\n primarySubcategory: PropTypes.object,\n slug: PropTypes.string\n}\n\nexport default KeepTrainingCard\n","import React, { forwardRef, useState } from 'react'\nimport styled from 'styled-components'\nimport PropTypes from 'prop-types'\nimport { axios } from 'api'\n\nimport { Box, Flex, Image, NameList, ResponsiveSVG } from 'ui/acro'\nimport ClassCountBadge from './ClassCountBadge'\nimport { CardSubtitle, CardTitle } from '../styles'\n\nimport heartSVG from '../../../../../assets/images/heart.svg'\nimport heartFilledSVG from '../../../../../assets/images/heartFilled.svg'\nimport { storeEventInLocalStorage } from 'gtm/pushEvents'\nimport { AlomovesIconSVG } from 'images/latest'\n\nconst HeartIconBox = styled(Box)`\n svg {\n path {\n &.heart-icon {\n fill: #3b3b3b99;\n }\n }\n }\n`\n\nconst Main = styled(Flex)`\n .no-image {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #f2f2f2;\n aspect-ratio: 16/9;\n }\n`\n\nconst ProductCard = forwardRef(\n (\n {\n carouselItem,\n id,\n classCount,\n workoutCount,\n instructors,\n primaryCategory,\n primarySubcategory,\n thumbnails,\n title,\n slug,\n url,\n introVideoThumbnail,\n thumbnailImage,\n coaches,\n alignBox,\n variantTitle,\n variantSubtitle,\n favoriteCallback,\n subcategory,\n coverPhoto,\n position,\n eventName,\n location,\n difficultyLevel,\n isFevIcon = true,\n ...rest\n },\n ref\n ) => {\n const FinalclassCount = classCount || workoutCount\n const finalSubcategory = primarySubcategory || subcategory\n const isBundle = String(rest?.actableType).toLowerCase() === 'bundle'\n const seriesUrl =\n url || (isBundle ? `/bundles/${slug}` : `/series/${slug}/workouts`)\n const [favoritesId, setFavoritesId] = useState(\n rest?.planSubscriptions?.[0]?.id\n )\n\n const image =\n coverPhoto?.url ||\n (thumbnails && (thumbnails.medium || thumbnails.default)) ||\n (introVideoThumbnail && introVideoThumbnail) ||\n (thumbnailImage === null ? '' : thumbnailImage)\n\n const removeSeries = (id) => {\n setFavoritesId(null)\n axios\n .delete(`/plan_subscriptions/${id}`)\n .then((res) => {\n if (res.status === 200) {\n setFavoritesId(null)\n favoriteCallback?.()\n } else {\n setFavoritesId(id)\n }\n })\n .catch((error) => {\n console.error(error)\n setFavoritesId(id)\n })\n }\n\n const addSeries = (id) => {\n setFavoritesId(id)\n axios\n .post(`/plan_subscriptions`, { plan_id: id })\n .then((res) => {\n if (res.status === 200) {\n setFavoritesId(res?.data?.id || null)\n favoriteCallback?.()\n } else {\n setFavoritesId(null)\n }\n })\n .catch((error) => {\n console.error(error)\n setFavoritesId(null)\n })\n }\n\n const pushEvent = (e) => {\n if (!eventName) {\n return\n }\n const coachNames = coaches\n ?.map((item) => `${item.firstName} ${item.lastName}`)\n .join(', ')\n\n const event_data = {\n event: eventName,\n position,\n instructor: coachNames,\n series: title,\n ...(location && { location })\n }\n storeEventInLocalStorage(event_data)\n }\n\n return (\n \n {primaryCategory && isFevIcon && (\n {\n e.stopPropagation()\n e.preventDefault()\n !favoritesId ? addSeries(id) : removeSeries(favoritesId)\n }}\n backgroundColor={'#FFFFFF99'}\n >\n \n {`${FinalclassCount} Class${\n FinalclassCount <= 1 ? '' : 'es'\n }`}\n )}\n \n ) : (\n \n \n )}\n {title && (\n \n {title}\n \n )}\n {instructors && (\n \n \n )}\n {coaches && (\n \n \n )}\n\n \n {primaryCategory && (primaryCategory.name || primaryCategory.title)}\n {finalSubcategory &&\n (finalSubcategory.name\n ? ` / ${finalSubcategory.name}`\n : ` / ${finalSubcategory.title}`)}\n {difficultyLevel && ` • ${difficultyLevel}`}\n \n \n )\n }\n)\n\nProductCard.propTypes = {\n duration: PropTypes.string,\n instructors: PropTypes.array,\n id: PropTypes.string,\n primaryCategory: PropTypes.object,\n primarySubcategory: PropTypes.object,\n title: PropTypes.string.isRequired,\n thumbnails: PropTypes.object,\n coverPhoto: PropTypes.array,\n coaches: PropTypes.array,\n alignBox: PropTypes.string,\n variantSubtitle: PropTypes.string,\n variantTitle: PropTypes.string,\n rest: PropTypes.object\n}\n\nexport default ProductCard\n","import React, { forwardRef } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { Box, Flex, Image, NameList } from 'ui/acro'\nimport TimeCodeBadge from './TimeCodeBadge'\nimport styled from 'styled-components'\nimport { CardSubtitle, CardTitle } from '../styles'\n\nconst CircleImage = styled(Image)({\n height: '100%',\n objectFit: 'cover',\n borderRadius: '50%',\n top: '0',\n left: '0'\n})\n\nconst ZenCard = forwardRef(\n (\n { carouselItem, humanDuration, videoThumbnail, title, planEntryUrl, plan },\n ref\n ) => {\n // Our text is styled as='div' because this card is rendering in the Signed In Navbar, which loads application.css. This causes weird spacing for h4 and p elements.\n const sizeArray = ['120px', '170px', '180px', '214px']\n return (\n \n {videoThumbnail && (\n \n \n \n {humanDuration}\n \n \n \n )}\n \n {title && (\n \n {title}\n \n )}\n {plan.coaches && (\n \n \n )}\n \n \n )\n }\n)\n\nZenCard.propTypes = {\n duration: PropTypes.string,\n instructors: PropTypes.array,\n primaryCategory: PropTypes.object,\n primarySubcategory: PropTypes.object,\n title: PropTypes.string.isRequired\n}\n\nexport default ZenCard\n","import React, { useState, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport { Flex } from 'ui/acro'\nimport { Box, P, SVGImage } from 'ui/bend'\nimport { TwinkleIcon } from 'components_v2/Icons'\nimport CloseIcon from 'ui/acro/blocks/ContentModal/CloseIcon'\nimport { CSSTransition } from 'react-transition-group'\nimport { useWindowResize } from 'hooks'\nimport { useCookies } from 'react-cookie'\nimport { MASVG, BellIcon } from 'images/latest'\n\nconst getNotificationIcon = (id = '') => {\n switch (id) {\n case 'Notify':\n return setIsClosed(true)}\n >\n \n \n {getNotificationIcon(id)}\n \n {mainText}
\n \n {ctaText}\n \n \n {\n closeNotification()\n onLearnMoreClick()\n }}\n background='#3b3b3b'\n borderRadius='50%'\n display='block'\n padding='5px 6.5px'\n height='24px'\n textdecoration='none'\n >\n \n \n \n )\n}\n\nNotification.propTypes = {\n id: PropTypes.string,\n mainText: PropTypes.string.isRequired,\n ctaText: PropTypes.string.isRequired,\n ctaLink: PropTypes.string.isRequired\n}\n\nexport default Notification\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport Fade from 'ui/chandra/animations/Fade'\n\nconst FadeBox = styled(Fade)(() =>\n css({\n // accommodate for navbar when using section ID as a jump/anchor link\n // pt: ['3.5em', '3.5em', '5.9em'],\n // mt: ['-3.5em', '-3.5em', '-5.9em']\n })\n)\nexport default FadeBox\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => \n \n )\n }\n\n return ReduxContainer\n}\n\nexport default withRedux\n","import React from 'react'\nimport { connect } from 'react-redux'\nimport { fetchCurrentUser } from '../../redux/actions/users'\nimport { currentUser } from '../../redux/selectors/user'\nimport PropTypes from 'prop-types'\n\nconst withUser = WrappedComp => {\n class UserComp extends React.Component {\n componentDidMount () {\n this.props.fetchCurrentUser()\n }\n\n render () {\n return \n {this.props.title}\n {arrow}\n \n )\n\n let baseClass = ['dropdown']\n if (this.props.additionalClasses) {\n baseClass = baseClass.concat(this.props.additionalClasses)\n }\n\n let dropdownClass = classNames(baseClass, {\n [`open ${this.props.additionalOpenClass}`]: this.props.open\n })\n\n let dropdownArrowButton\n if (this.props.includeArrowButton) {\n dropdownArrowButton = (\n {title} \n )\n }\n\n return (\n \n {\n this.dropdown = node\n }}\n >\n {dropdownArrowButton}\n \n \n \n )\n }\n}\n\nAloDropdown.defaultProps = {\n includeArrowButton: true\n}\n\nAloDropdown.propTypes = {\n additionalOpenClass: PropTypes.string,\n additionalClasses: PropTypes.array,\n autoScroll: PropTypes.bool,\n children: PropTypes.node,\n dropdownStyles: PropTypes.string,\n id: PropTypes.string,\n includeArrowButton: PropTypes.bool,\n onToggle: PropTypes.func,\n open: PropTypes.bool,\n title: PropTypes.string\n}\n\nexport default AloDropdown\n","import React from 'react'\nimport classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport { sort_by_event } from 'gtm/pushEvents'\n\nlet SortableListMenu = (props) => {\n let renderLabel = (option) => {\n if (option === 'az') {\n return (\n \n A \n )\n } else {\n return {props.optionTitles[option]} \n }\n }\n\n let sortableOptions = props.sortableFields.map((option, index) => {\n let sortableListItemClass = classNames('SortableList__listLabel', {\n selected: option === props.currOrder\n })\n\n return (\n \n {\n e.preventDefault()\n sort_by_event(props.sortLocation, option)\n props.setOrder(option)\n }}\n >\n {renderLabel(option)}\n \n \n )\n })\n\n return (\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 \n {cardArray.map((_, idx) => \n )\n}\n\nexport default PlaylistLoadingCards\n","import React from 'react'\nimport PlanEntryListLoading from './PlanEntryListLoading'\nimport PlanEntryListHeader from './PlanEntryListHeader'\nimport InfiniteScroll from 'react-infinite-scroll-component'\nimport HelpPopup from '../helpPopup/HelpPopup'\nimport PropTypes from 'prop-types'\nimport PlanEntriesListRows from './PlanEntriesListRows'\n\nconst PlanEntriesListContent = ({\n autopaginate,\n entries,\n isLoading,\n favoritable,\n featurable,\n headers,\n onReorder,\n orderBy,\n hasMore,\n onFetchMoreEntries,\n onPlanEntriesSorted,\n sortable,\n onDeleted,\n removable,\n locked,\n includeDates,\n initialLoad,\n entryLinkSuffix\n}) => {\n const listHeaders = headers.map((header, idx) => (\n \n {\n onReorder(order, header.value)\n }}\n />\n \n ))\n\n let loadingRows\n if (isLoading) {\n loadingRows = new Array(20)\n .fill(null)\n .map((_, idx) => \n See More\n \n )\n }\n\n return (\n \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 {planEntryRows}\n {loadingRows}\n \n {seeMoreBtn}\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
\n
\n
{\n e.preventDefault()\n e.stopPropagation()\n this.setState({ openModal: 'options' })\n }}\n />\n \n\n
\n {\n this.props.addToPlaylist(playlist.uuid)\n }}\n planEntryInPlaylist={this.planEntryInPlaylist}\n onDelete={this.props.onDelete}\n />\n \n {({ animateIn }) => {\n return
\n }}\n \n )\n}\n\nexport default ThreeDotHoverMenu\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => \n \n You’ve set this playlist to Private. To share, turn off Private under\n the playlist settings.\n \n \n \n Ok\n \n \n \n )\n}\n\nShareError.propTypes = {\n onHide: PropTypes.func\n}\n\nexport default ShareError\n","import React from 'react'\nimport { Modal } from 'react-bootstrap'\nimport AloModal from '../../AloModal'\nimport PropTypes from 'prop-types'\n\nconst ReportPlaylistModal = ({ playlist, show, onHide }) => {\n return (\n \n Report Playlist \n \n Are you sure you want to report this playlist for offensive or\n inappropriate content?\n \n \n \n Cancel\n \n {\n playlist.report().then(() => {\n onHide()\n })\n }}\n >\n Report\n \n \n \n )\n}\n\nReportPlaylistModal.propTypes = {\n playlist: PropTypes.object,\n show: PropTypes.bool,\n onHide: PropTypes.func\n}\n\nexport default ReportPlaylistModal\n","import React from 'react'\nimport TextareaAutosize from 'react-autosize-textarea'\nimport PropTypes from 'prop-types'\n\nclass CappedTextArea extends React.Component {\n constructor (props) {\n super(props)\n\n this.handleOnChange = this.handleOnChange.bind(this)\n }\n\n handleOnChange (e) {\n if (e.target.value.length <= 500) {\n this.props.onChange(e)\n }\n }\n\n render () {\n const characterCount = this.props.value ? this.props.value.length : 0\n\n return (\n \n \n {characterCount} / {this.props.limit} \n \n \n )\n }\n}\n\nCappedTextArea.propTypes = {\n limit: PropTypes.number,\n value: PropTypes.string,\n onChange: PropTypes.func\n}\n\nexport default CappedTextArea\n","import React from 'react'\nimport styled from 'styled-components'\n\nconst MenuContainer = styled.div`\n display: flex;\n align-items: center;\n gap: 16px;\n`\n\nconst MenuItem = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n`\n\nconst IconButton = styled.button`\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n border: none;\n background: transparent;\n cursor: pointer;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.05);\n }\n\n svg {\n width: 24px;\n height: 24px;\n }\n`\n\nconst Label = styled.span`\n font-family: \"Proxima-Nova\";\n font-size: 14px;\n letter-spacing: 0.308px;\n}\n`\n\nexport const PlaylistMenus = ({ menuOptions }) => {\n return (\n \n {menuOptions.map((item, index) => {\n const IconComponent = item.icon\n return (\n \n item.handleClick()}>\n \n {item.text} \n \n )\n })}\n \n )\n}\n","import React, { useEffect, useState } from 'react'\nimport { Builder, BuilderComponent, builder } from '@builder.io/react'\nimport PropTypes from 'prop-types'\nimport { useFetchAPI } from 'hooks'\nimport '@builder.io/widgets'\n\n// Determine the API key based on the URL\nconst builderPublicApiKey =\n window.location.hostname === 'www.alomoves.com'\n ? '7ae91e2100c441348821b5902d6e5194'\n : '61e2402350ce4c0cbc02c5526b936de4'\n\n// Init builder.io with the appropriate key\nbuilder.init(builderPublicApiKey)\n\nconst BuilderSection = ({ user, eventName, builderModelname, data: config }) => {\n \n const url = config.fetchDataFrom\n const [{ data }] = url\n ? useFetchAPI(url?.replace('/api/v2', ''))\n : [{ data: { ...config } }]\n \n const [content, setContent] = useState(null)\n\n useEffect(() => {\n const userAttributes = user.urlPath ? { urlPath: user.urlPath } : {}\n\n builder\n .get(builderModelname, { userAttributes })\n .toPromise()\n .then((fetchedContent) => setContent(fetchedContent))\n .catch((error) => console.error('Error fetching Builder data:', error))\n }, [builderModelname, user])\n\n const transformData = (data) => {\n if (\n builderModelname === 'category-pill-listing' &&\n Array.isArray(data)\n ) {\n return data.map((item) => ({\n buttonTitle: item.categoryName,\n buttonLink: `/class-finder?styles=${item.categorySlug}&order=date`\n }))\n }\n return data\n }\n\n return (\n \n {content ? (\n
\n ) : (\n
Loading...
\n )}\n
\n {schemaData?.sections?.map((section, index) => (\n \n {section?.source === 'builder' ? (\n \n )\n}\n\nexport default SchemaSectionRenderer\n","import React from 'react'\nimport styled from 'styled-components'\nimport css from '@styled-system/css'\n\nimport { Flex, H4, P, HR } from 'ui/bend'\n\nimport { useUserContext } from 'context'\nimport { MyPraticeCards } from './MyPraticeCards'\nimport { storeEventInLocalStorage } from 'gtm/pushEvents'\n\nconst HeaderSection = styled(Flex)(() =>\n css({\n justifyContent: 'space-between'\n })\n)\n\nconst NameHeader = styled(H4)(() =>\n css({\n letterSpacing: '-0.72px',\n fontWeight: '400'\n })\n)\n\nconst PreferenceLink = styled(P)(() =>\n css({\n letterSpacing: '0.352px',\n textDecorationLine: 'underline',\n textDecorationSkipInk: 'none',\n textUnderlinePosition: 'from-font'\n })\n)\n\nconst SummarySection = styled(Flex)(() =>\n css({\n gap: '32px',\n alignItems: 'center',\n justifyContent: 'center',\n '@media all and (max-width: 640px)': {\n gap: '16px',\n }\n })\n)\n\nconst Summary = styled(Flex)(() =>\n css({\n flexDirection: 'column',\n alignItems: 'center',\n width: '161px',\n '@media all and (max-width: 640px)': {\n width: '110px'\n }\n })\n)\n\nconst SnapshotText = styled(P)(() =>\n css({\n textAlign: 'center',\n fontSize: '12px',\n textTransform: 'uppercase',\n marginBottom: '8px'\n })\n)\n\nconst SummaryNumber = styled(P)(() =>\n css({\n fontSize: '32px',\n lineHeight: '130%'\n })\n)\n\nconst SummaryText = styled(P)(() =>\n css({\n fontSize: '15px',\n lineHeight: '12px',\n '@media all and (max-width: 640px)': {\n fontSize: '11px'\n }\n })\n)\n\nexport const MyPraticeSummary = () => {\n const { user, contextData } = useUserContext()\n\n const myPreferencesClick = () =>\n storeEventInLocalStorage({\n event: 'my_preferences_click',\n first_time: !contextData?.user_answered_survey,\n location: 'homepage'\n })\n\n return (\n <>\n \n \n Hello, {user.firstName} \n \n My Preferences\n \n \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}\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'\nimport styled from 'styled-components'\nimport css from '@styled-system/css'\n\nimport { Flex, P, Image, Grid } from 'ui/bend'\n\nimport { ResponsiveSVG } from 'ui/acro'\nimport { AlomovesIconSVG } from 'images/latest'\nimport { useUserContext } from 'context'\nimport { storeEventInLocalStorage } from 'gtm/pushEvents'\n\nexport const CardCTAText = styled(P)(() =>\n css({\n fontSize: '18px',\n letterSpacing: '0.9px',\n textTransform: 'uppercase',\n marginTop: '7px',\n fontWeight: '500',\n lineHeight: '24px'\n })\n)\n\nconst ItemContainer = styled(Flex)`\n width: 100%;\n max-width: 100%;\n padding-top: 56.25%;\n`\n\nconst CardSummarySection = styled(Grid)`\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n\n p {\n font-size: 16px;\n }\n a {\n flex: 1 0 40%;\n }\n @media screen and (min-width: 764px) {\n gap: 20px;\n p {\n font-size: 18px;\n }\n a {\n flex: 1 0 20%;\n }\n }\n\n .no-thumbnail {\n position: absolute;\n margin-top: -56.25%;\n width: fit-content;\n height: 70%;\n }\n`\n\nconst MyPraticeCard = ({ data, keyName }) => {\n const textObject = {\n completedClasses: 'Completed',\n playlists: 'My Playlists',\n savedClasses: 'Saved Classes',\n savedSeries: 'Saved Series'\n }\n\n const linkObject = {\n completedClasses: 'completed',\n playlists: 'playlists',\n savedClasses: 'classes',\n savedSeries: 'series'\n }\n\n const count = data?.[keyName]?.count\n const lastThumbnail = data?.[keyName]?.lastThumbnail\n\n const handleClick = (tab) => {\n const eventMap = {\n series: 'saved_series_click',\n classes: 'saved_classes_click',\n completed: 'completed_classes_click',\n playlists: 'my_playlists_click'\n }\n\n storeEventInLocalStorage({ event: eventMap[tab], location: 'homepage' })\n }\n\n const thumbnailPresent = count > 0 && !!lastThumbnail\n\n return (\n {\n handleClick(linkObject?.[keyName]?.toLowerCase())\n }}\n className={keyName}\n >\n \n {!thumbnailPresent && (\n {`${textObject[keyName]} (${count})`} \n \n )\n}\n\nexport const MyPraticeCards = () => {\n const { user } = useUserContext()\n return (\n \n \n )\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { css } from '@styled-system/css'\n\nimport { Box, Flex, P } from 'ui/acro'\n\nimport { Blockquote, Text, Caption, Button } from 'ui/bend'\nimport { useWindowResize } from 'hooks'\n\nconst HeaderText = styled(Blockquote)(() =>\n css({\n fontSize: '24px',\n fontWeight: '950',\n lineHeight: '135%',\n letterSpacing: '1.68px',\n textTransform: 'uppercase',\n textAlign: 'left'\n })\n)\n\nconst HeaderCTAText = styled(Text)(() =>\n css({\n fontFamily: 'Proxima-Nova',\n fontSize: '14px',\n letterSpacing: '0.308px',\n textDecorationLine: 'underline',\n textUnderlinePosition: 'from-font'\n })\n)\n\nconst CTAText = styled(Caption)(() =>\n css({\n fontSize: '12px',\n lineHeight: '135%',\n textTransform: 'uppercase'\n })\n)\n\nconst Section = ({\n headerText,\n linkId,\n linkHref,\n cta,\n target,\n title,\n children\n}) => {\n const { width } = useWindowResize()\n const isMobile = width <= 480\n return (\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'\n\nimport ButtonBase from './ButtonBase'\nimport { ResponsiveSVG } from 'ui/acro/elements'\nimport { RightArrow } from 'images/latest'\n\nconst NextButton = ({ handleClick, fill = 'primary', ...props }) => (\n \n \n \n {\n if (!checked) {\n applyFilter('excludeCompleted', !checked)\n } else {\n removeFilter('excludeCompleted', checked)\n }\n setChecked(!checked)\n }}\n />\n \n Hide Completed Classes\n
\n \n )\n}\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => \n A \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 {renderLabel(props.currentOrder)}\n \n {!props.isMobile ? arrow : \n )\n}\n\nSortableListLabel.propTypes = {\n currentOrder: PropTypes.string,\n onClick: PropTypes.func,\n optionTitles: PropTypes.object,\n menuOpen: PropTypes.bool,\n isMobile: PropTypes.bool\n}\n\nexport default SortableListLabel\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => \n \n Apply\n \n \n )\n}\n\nconst mapStateToProps = (state) => {\n return {\n duration: state.ui.planEntries.filtered.duration,\n customDuration: state.ui.planEntries.customDuration,\n filterUrl: state.ui.planEntries.filterUrl\n }\n}\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n applyDuration: ({ durationOptions, isFromClassFinderPage }) => {\n dispatch(applyDurationFilter({ durationOptions, isFromClassFinderPage }))\n },\n addCustomDuration: ({ min, max }) => {\n dispatch(addCustomDurationFilter({ min, max }))\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(CustomDuration)\n","export const SET_FEATURED_PRODUCTS = 'SET_FEATURED_PRODUCTS'\n\nexport function setFeaturedProducts (featuredProducts) {\n return {\n type: SET_FEATURED_PRODUCTS,\n featuredProducts\n }\n}\n","import React from 'react'\nimport HelpPopup from '../../helpPopup/HelpPopup'\nimport AloCheckbox from '../../aloCheckbox/AloCheckbox'\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 IntensityOneIcon from '../../../../assets/codicons/intensity-1.svg'\nimport IntensityTwoIcon from '../../../../assets/codicons/intensity-2.svg'\nimport IntensityThreeIcon from '../../../../assets/codicons/intensity-3.svg'\nimport IntensityFourIcon from '../../../../assets/codicons/intensity-4.svg'\n\nimport {\n setDifficultyFilter,\n setIntensityFilter,\n clearDifficultyFilter,\n clearIntensityFilter\n} from '../../../redux/actions/products/filters'\n\nimport './DifficultyIntensityFilters.scss'\n\nimport PropTypes from 'prop-types'\n\nimport { connect } from 'react-redux'\n\nconst DifficultyIntensityFilters = (props) => {\n const difficulties = [\n 'introductory',\n 'beginner',\n 'moderate',\n 'intermediate',\n 'advanced'\n ]\n const intensities = ['1', '2', '3', '4']\n\n const clearFilter = (deletedFilter) => {\n if (deletedFilter === 'intensity') {\n props.clearIntensityFilter()\n } else if (deletedFilter === 'difficulty') {\n props.clearDifficultyFilter()\n }\n props.onFilter()\n }\n\n const changeDifficultyFilter = (value) => {\n props.setDifficultyFilter(value)\n props.onFilter()\n }\n\n const changeIntensityFilter = (value) => {\n props.setIntensityFilter(value)\n props.onFilter()\n }\n\n const getDifficultyIcon = (difficulty) => {\n switch (difficulty) {\n case 'introductory':\n return \n {difficulties.map((difficulty, idx) => (\n \n \n ))}\n \n )\n\n let intensityFilters = (\n \n {intensities.map((intensity, idx) => (\n \n \n ))}\n \n )\n\n let clearIntensity = props.intensity ? (\n {\n clearFilter('intensity')\n }}\n >\n Clear\n \n ) : null\n\n let clearDifficulty = props.difficulty ? (\n {\n clearFilter('difficulty')\n }}\n >\n Clear\n \n ) : null\n\n return (\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}) => \n {({ update, get, trackManually }) => {\n return children({\n trackManually,\n getCurrTrackedVal: trackingKey => get(trackingKey),\n updateToTrack: (key, params) => {\n if (!disable) {\n update(key, {\n ...params,\n url,\n method: httpMethod\n })\n }\n }\n })\n }}\n \n )\n}\n\nTrackable.defaultProps = {\n httpMethod: 'post'\n}\n\nTrackable.propTypes = {\n name: PropTypes.string,\n children: PropTypes.func,\n url: PropTypes.string,\n httpMethod: PropTypes.string,\n disable: PropTypes.bool\n}\n\nexport default Trackable\n","const initProgressBarAnimation = player => {\n const controlBar = player.getChild('controlBar')\n const progressControlComp = controlBar.getChild('progressControl')\n const seekBarComp = progressControlComp.getChild('seekBar')\n const currentTimeComp = controlBar.getChild('currentTimeDisplay')\n\n const loadedBar = progressControlComp.$('.vjs-slider-bar')\n const sliderBar = progressControlComp.$('.vjs-slider')\n\n let mouseInfo = {\n mouseDown: false\n }\n\n sliderBar.addEventListener('mousedown', e => {\n handleMouseDown(e)\n })\n\n document.querySelector('body').addEventListener('mousemove', e => {\n updatePlayerTimeUI(e)\n })\n\n const handleMouseDown = e => {\n mouseInfo.mouseDown = true\n updatePlayerTimeUI(e)\n if (!progressControlComp.hasClass('active')) {\n progressControlComp.addClass('active')\n }\n }\n\n const updatePlayerTimeUI = e => {\n if (mouseInfo.mouseDown) {\n const playerTime = player.currentTime()\n seekBarComp.update(playerTime, seekBarComp.getPercent())\n progressControlComp.handleMouseMove(e)\n currentTimeComp.updateContent()\n }\n }\n\n document.querySelector('body').addEventListener('mouseup', () => {\n mouseInfo.mouseDown = false\n progressControlComp.removeClass('active')\n })\n\n const addModifierCircleToSliderBar = loadedBar => {\n const progressBall = document.createElement('div')\n progressBall.classList.add('vjs-progress-ball')\n loadedBar.appendChild(progressBall)\n }\n\n addModifierCircleToSliderBar(loadedBar)\n}\n\nexport default initProgressBarAnimation\n","function formatTime (videojs) {\n videojs.setFormatTime(seconds => {\n seconds = seconds < 0 ? 0 : seconds\n let s = Math.floor(seconds % 60)\n let m = Math.floor((seconds / 60) % 60)\n let h = Math.floor(seconds / 3600)\n\n // handle invalid times\n if (isNaN(seconds) || seconds === Infinity) {\n // '-' is false for all relational operators (e.g. <, >=) so this setting\n // will add the minimum number of fields specified by the guide\n h = m = s = '-'\n }\n\n // Check if we need to show hours\n h = h > 0 ? h + ':' : ''\n\n // If hours are showing, we may need to add a leading zero.\n // Always show at least one digit of minutes.\n m = (h && m < 10 ? '0' + m : m) + ':'\n\n // Check if leading zero is need for seconds\n s = s < 10 ? '0' + s : s\n\n return h + m + s\n })\n}\n\nexport default formatTime\n","import '../videoComponents/NextVid'\nimport '../videoComponents/PreviousVid'\nimport videojs from 'video.js'\n\n/**\n * Sets up next and previous video buttons on video player\n * @param {Player} player\n * @param {Object} options\n */\nconst setupPlaylistNavButtons = (player, options) => {\n const firstEntry = () => {\n return options.playlistPos === 0\n }\n\n const lastEntry = () => {\n return options.playlistPos === options.listEntriesInformation.listLength()\n }\n\n if (options.enable) {\n if (!firstEntry()) {\n const PrevButton = videojs.getComponent('PreviousVid')\n let prevBtn = new PrevButton(player, {\n url: options.listEntriesInformation.getPrevEntryUrl(options.playlistPos)\n })\n prevBtn.contentEl().classList = 'vjs-prev-btn vjs-control'\n player.getChild('controlBar').addChild(prevBtn)\n }\n if (!lastEntry()) {\n const NextButton = videojs.getComponent('NextVid')\n let nextBtn = new NextButton(player, {\n url: options.listEntriesInformation.getNextEntryUrl(options.playlistPos)\n })\n nextBtn.contentEl().classList = 'vjs-next-btn vjs-control'\n player.getChild('controlBar').addChild(nextBtn)\n }\n }\n}\n\nexport default setupPlaylistNavButtons\n","import videojs from 'video.js'\n\n/**\n * Sets up video list that appears on hover icon\n * @param {Player} player\n * @param {Object} options\n */\nconst setupVideoList = (player, options) => {\n if (options.enable) {\n const VideoList = videojs.getComponent('VideoList')\n let videoList = new VideoList(player, options)\n const videoListEl = videoList.contentEl()\n videoListEl.classList = 'vjs-playlist-list vjs-control'\n options.animationHandler(videoListEl)\n player.getChild('controlBar').addChild(videoList)\n }\n}\n\nexport default setupVideoList\n","import React from 'react'\nimport { ThemeProvider } from 'styled-components'\nimport css from '@styled-system/css'\nimport styled from 'styled-components'\n\nimport { H3, Tag, LightTheme, P, Box, HR } from 'ui/bend'\nimport { breakpoints } from 'ui/acro'\n\nimport Carousel from '../common/components/Carousel/Carousel'\nimport { useFetchAPI } from 'hooks'\nimport { ItemCards } from './ItemCards'\n\nconst Main = styled(Box)`\n .no-tag {\n padding-top: 26px;\n }\n .no-item-tags .card-item {\n padding-top: 0;\n }\n`\n\nconst H3Title = styled(H3)(() =>\n css({\n color: '#000',\n textAlign: 'center',\n fontFamily: 'Arquitecta',\n fontSize: '32px',\n fontWeight: '950',\n letterSpacing: '2.24px',\n textTransform: 'uppercase'\n })\n)\n\nconst ItemTitle = styled(Tag)`\n font-size: 18px;\n font-weight: 950;\n line-height: 24px;\n letter-spacing: 1.44px;\n`\n\nconst ItemDesc = styled(P)`\n color: #000;\n line-height: 24px;\n letter-spacing: 0.352px;\n`\n\nconst WidgetOuter = styled.div`\n flex-direction: column;\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n margin-bottom: 16px !important;\n\n p {\n margin: 0;\n }\n .carousels {\n margin-top: 12px;\n }\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 SeriesStructureSchemaRender = ({ planId }) => {\n const [{ data: schema }] = useFetchAPI(`/plan_entries?plan_id=${planId}`)\n\n if (!schema) {\n return null\n }\n\n const [slidesOffsetBefore, slidesOffsetAfter] = [0, 0]\n\n return (\n \n \n \n Classes \n {schema.sections.map((section, index) => {\n const hasItemTag = section?.items?.some((obj) =>\n Boolean(obj.itemTag)\n )\n return (\n \n
{section.title} \n
{section.description} \n
\n
\n {index != schema.sections.length - 1 && (\n
\n )}\n
\n \n \n )\n}\n\nexport default SeriesStructureSchemaRender\n","import FilterDropdownSet from './FilterDropdownSet'\nimport FilterLabelsRow from './FilterLabelsRow'\nimport FilterMetaLayout from './FilterLabelsRow'\nimport FilterModal from './FilterModal'\nimport FilterRangeSlider from './FilterRangeSlider'\nimport FilterRowDropdown from './FilterRowDropdown'\nimport FilterRowDropdownItem from './FilterRowDropdownItem'\nimport FilterRowDropdownSet from './FilterRowDropdownSet'\nimport FilterRowItem from './FilterRowItem'\nimport FilterSidebarLayout from './FilterSidebarLayout'\nimport FilterSquares from './FilterSquares'\nimport SelectedFiltersDisplay from './SelectedFiltersDisplay'\nimport SliderDropdown from './SliderDropdown'\n\nexport {\n FilterDropdownSet,\n FilterLabelsRow,\n FilterMetaLayout,\n FilterModal,\n FilterRangeSlider,\n FilterRowDropdown,\n FilterRowDropdownItem,\n FilterRowDropdownSet,\n FilterRowItem,\n FilterSidebarLayout,\n FilterSquares,\n SelectedFiltersDisplay,\n SliderDropdown\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport './FilterDropdownSet.scss'\n\nconst FilterDropdownsSet = props => {\n let filterDropdowns = []\n let dropdownIdx = 0\n for (let label in props.filterOptions) {\n const optionInfo = props.filterOptions[label]\n filterDropdowns.push(\n \n {optionInfo.renderDropdownContent()}\n \n )\n dropdownIdx++\n }\n\n const dropdownClass = classNames('FilterDropdownSet', {\n 'FilterDropdownSet--open': !!props.activeDropdown\n })\n\n return {filterDropdowns}
\n}\n\nFilterDropdownsSet.propTypes = {\n activeDropdown: PropTypes.string,\n filterOptions: PropTypes.object\n}\n\nexport default FilterDropdownsSet\n","import React from 'react'\nimport ProductMasonry from '../productMasonry/ProductMasonry'\nimport DifficultyIntensityFilters from '../productFilters/DifficultyIntensityFilters'\n\nimport { loadProductsPage } from '../../../redux/actions/products/products'\nimport { products } from '../../../redux/selectors/products'\n\nimport { connect } from 'react-redux'\nimport PropTypes from 'prop-types'\n\nclass ProductsDisplay extends React.Component {\n hasMoreProducts () {\n return this.props.products && this.props.products.length < this.props.total\n }\n\n paginate () {\n if (!this.props.isLoading && this.hasMoreProducts()) {\n this.props.loadProductsPage(false)\n }\n }\n\n render () {\n return (\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 styled, { 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
\n )\n}\n\nconst MainProductMasory = styled.div`\n .series-card-container {\n display: flex;\n flex-wrap: wrap;\n .card-container {\n width: 100%;\n margin-bottom: 40px;\n @media screen and (min-width: 640px) {\n width: 50%;\n }\n @media screen and (min-width: 992px) {\n width: 33.3%;\n }\n \n }\n \n @media (min-width: 768px) and (max-width: 1024px) {\n width: calc(90% + 50px);\n margin: 0 auto;\n }\n @media screen and (min-width: 1025px) {\n width: 100%;\n margin: 0;\n }\n }\n`\n\nclass ProductMasonry extends React.Component {\n componentDidUpdate() {\n let masonryLayout =\n this.productMasonry.getElementsByClassName('masonry-layout')[0]\n if (masonryLayout) {\n let columns = masonryLayout.querySelector('div').childNodes\n\n // Assume first column has the most number of cards\n let numRows = columns[0].childElementCount\n for (var i = 0; i < numRows; i++) {\n let rowMaxHeight = this.getTallestHeightInRow(columns, i)\n this.setRowHeights(rowMaxHeight, columns, i)\n }\n }\n }\n\n renderLayout(productTiles) {\n if (this.props.layout === 'list') {\n return {productTiles}
\n } else {\n let cards = productTiles.map((productTile, idx) => {\n return (\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 } else if (this.props.products) {\n let productTiles = this.props.products.map((product, idx) => {\n return (\n \n \n )\n })\n return (\n this.props.onPaginate()}\n >\n {this.renderLayout(productTiles)}\n \n )\n }\n }\n }\n\n renderLoadingCards() {\n if (this.props.loading || this.props.isInitialLoad) {\n let loadingCards = new Array(12).fill(null).map((card, idx) => (\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 this.productMasonry = node\n }}\n >\n {this.renderLayoutGrid()}\n {this.renderLoadingCards()}\n \n )\n }\n}\n\nProductMasonry.propTypes = {\n hasMore: PropTypes.func,\n layout: PropTypes.string,\n loading: PropTypes.bool,\n isInitialLoad: PropTypes.bool,\n products: PropTypes.array,\n onPaginate: PropTypes.func\n}\n\nexport default ProductMasonry\n ","export const ADD_CATEGORY_OPTION = 'ADD_CATEGORY_OPTION'\nexport const ADD_SUBCATEGORY_FILTER = 'ADD_SUBCATEGORY_FILTER'\nexport const APPLY_SERIES_FILTER = 'APPLY_SERIES_FILTER'\nexport const REMOVE_CATEGORY_FILTER = 'REMOVE_CATEGORY_FILTER'\nexport const REMOVE_SUBCATEGORY_FILTER = 'REMOVE_SUBCATEGORY_FILTER'\nexport const REMOVE_SERIES_FILTER = 'REMOVE_SERIES_FILTER'\n\nexport const SET_DIFFICULTY_FILTER = 'SET_DIFFICULTY_FILTER'\nexport const SET_INTENSITY_FILTER = 'SET_INTENSITY_FILTER'\nexport const CLEAR_DIFFICULTY_FILTER = 'CLEAR_DIFFICULTY_FILTER'\nexport const CLEAR_INTENSITY_FILTER = 'CLEAR_INTENSITY_FILTER'\n\nexport const SET_FILTER_URL = 'SET_FILTER_URL'\nexport const APPLY_CATEGORY_FILTER = 'APPLY_CATEGORY_FILTER'\nexport const SET_PRODUCT_ORDER = 'SET_PRODUCT_ORDER'\nexport const REPLACE_PRODUCT_FILTERS = 'REPLACE_PRODUCT_FILTERS'\nexport const CLEAR_ALL_SERIES_FILTERS = 'CLEAR_ALL_SERIES_FILTERS'\nexport const DEFAULT_SERIES_FILTERS = 'DEFAULT_SERIES_FILTERS'\n\nexport const applyCategoryFilter = category => ({\n type: APPLY_CATEGORY_FILTER,\n category\n})\n\nexport function setFilterUrl (url) {\n return {\n type: SET_FILTER_URL,\n url\n }\n}\n\nexport function replaceProductFilters (filters) {\n return {\n type: REPLACE_PRODUCT_FILTERS,\n filters\n }\n}\n\nexport const addCategoryOption = filter => ({\n type: ADD_CATEGORY_OPTION,\n filter\n})\n\nexport const addSubcategoryFilter = (parentCategory, filter) => ({\n type: ADD_SUBCATEGORY_FILTER,\n parentCategory,\n filter\n})\n\nexport const addSeriesFilter = (parentCategory, filter) => ({\n type: APPLY_SERIES_FILTER,\n parentCategory,\n filter\n})\n\nexport const removeSeriesFilter = (parentCategory, filter) => ({\n type: REMOVE_SERIES_FILTER,\n parentCategory,\n filter\n})\n\nexport const removeCategoryFilter = filterSlug => ({\n type: REMOVE_CATEGORY_FILTER,\n filterSlug\n})\n\nexport const removeSubcategoryFilter = (\n parentCategory,\n filterSlug,\n clearParent\n) => ({\n type: REMOVE_SUBCATEGORY_FILTER,\n parentCategory,\n filterSlug,\n clearParent\n})\n\nexport const setDifficultyFilter = difficulty => ({\n type: SET_DIFFICULTY_FILTER,\n difficulty\n})\n\nexport const clearDifficultyFilter = () => ({\n type: CLEAR_DIFFICULTY_FILTER\n})\n\nexport const setIntensityFilter = intensity => ({\n type: SET_INTENSITY_FILTER,\n intensity\n})\n\nexport const clearIntensityFilter = () => ({\n type: CLEAR_INTENSITY_FILTER\n})\n\nexport const setProductOrder = order => ({\n type: SET_PRODUCT_ORDER,\n order\n})\n\nexport const clearAllSeriesFilters = () => ({\n type: CLEAR_ALL_SERIES_FILTERS\n})\n\nexport function setDefaultFilter(defaultFilter) {\n return {\n type: DEFAULT_SERIES_FILTERS,\n defaultFilter\n }\n}\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 addSeriesFilter,\n removeSeriesFilter,\n removeSubcategoryFilter,\n setDifficultyFilter,\n setIntensityFilter,\n clearDifficultyFilter,\n clearIntensityFilter,\n applyCategoryFilter,\n setProductOrder,\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\nimport {\n getDifficultyIcon,\n getIntensityIcon,\n getTotalNumberOfFilters\n} from '../../classFinder/classFinderHelperMethods'\n\n// Filter Components\nimport FilterRowDropdown from '../../../filtersRow/FilterRowDropdown'\nimport FilterRowDropdownItem from '../../../filtersRow/FilterRowDropdownItem'\n\nimport CategoryFilters from './CategoryFilters'\nimport FilterMetaLayout from '../../../filtersRow/FilterMetaLayout'\nimport FilterLabelsRow from '../../../filtersRow/FilterLabelsRow'\n\nimport { class_series_finder_filter_event } from 'gtm/pushEvents'\n\nclass ExploreNav extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n categoryDropdownOpen: false,\n groupDropdownOpen: false,\n activeCategory: '',\n toBeOpenDropdown: '',\n instructorDropDown: false,\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.getTotalNumberOfFilters = this.getTotalNumberOfFilters.bind(this)\n this.clearAllFilters = this.clearAllFilters.bind(this)\n this.areMoreThanOneInstructorAvailable = this.areMoreThanOneInstructorAvailable.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 categoriesAlreadyFiltered(category, item) {\n const categories = this.props.filters[category] || []\n return categories.some((list) => {\n if (typeof list === 'string') {\n return list === item\n } else {\n return list.slug === item.slug\n }\n })\n //return categories.includes(item.slug)\n }\n\n buildSeriesPageFilterOptions() {\n let filterObj = {}\n\n ;(filterObj['sort'] = {\n renderDropdownContent: () => {\n return (\n {\n if (this.state.toBeOpenDropdown) {\n const activeCategory = this.state.toBeOpenDropdown\n this.setState({\n activeCategory,\n toBeOpenDropdown: ''\n })\n }\n }}\n renderDropdownItemTemplate={({ option }) => {\n return (\n {\n this.props.setProductOrder(option.value)\n this.props.loadProductPage(\n true,\n this.props.onAfterProductLoad\n )\n }}\n isSort={true}\n />\n )\n }}\n />\n )\n },\n onClickFilterDropdown: (value) => {\n if (\n this.state.activeCategory !== '' &&\n this.state.activeCategory !== value\n ) {\n this.setState({\n toBeOpenDropdown: value,\n activeCategory: ''\n })\n } else {\n const activeValue = this.state.activeCategory === value ? '' : value\n this.setState({ activeCategory: activeValue })\n }\n },\n filterValue: 'sort',\n displayedLabel: 'Sort By'\n }),\n this.props.categories.forEach((category) => {\n filterObj[category.title] = {\n renderDropdownContent: () => {\n return (\n ({\n parentCategory: category.slug,\n ...subcategory\n }))}\n onCheckAll={() => {\n if (this.allSelected(category)) {\n this.props.setLastSelectedCategory()\n this.props.removeCategoryFilter(category.slug)\n } else {\n this.props.applyCategoryFilter(category.slug)\n this.props.setLastSelectedCategory(category.slug)\n }\n this.props.loadProductPage(\n true,\n this.props.onAfterProductLoad\n )\n }}\n allOptionsSelected={this.allSelected(category)}\n filterName={category.title}\n onAfterClose={() => {\n if (this.state.toBeOpenDropdown) {\n const activeCategory = this.state.toBeOpenDropdown\n this.setState({\n activeCategory,\n toBeOpenDropdown: ''\n })\n }\n }}\n renderDropdownItemTemplate={({ option }) => {\n return (\n {\n if (this.subcategoryAlreadyFiltered(option)) {\n this.props.removeSubcategoryFilter(\n category.slug,\n option.slug\n )\n } else {\n this.props.addSubcategoryFilter(category.slug, option)\n }\n this.props.setLastSelectedCategory(category.slug)\n this.props.loadProductPage(\n true,\n this.props.onAfterProductLoad\n )\n }}\n />\n )\n }}\n />\n )\n },\n onClickFilterDropdown: (categorySlug) => {\n if (category.planSubcategories.count() > 0) {\n if (\n this.state.activeCategory !== '' &&\n this.state.activeCategory !== categorySlug\n ) {\n this.setState({\n toBeOpenDropdown: categorySlug,\n activeCategory: ''\n })\n } else {\n const activeValue =\n this.state.activeCategory === categorySlug ? '' : categorySlug\n this.setState({ activeCategory: activeValue })\n }\n } else {\n if (this.allSelected(category)) {\n this.props.removeCategoryFilter(categorySlug)\n } else {\n this.props.applyCategoryFilter(categorySlug)\n }\n this.props.setLastSelectedCategory(categorySlug)\n this.props.loadProductPage(true, this.props.onAfterProductLoad)\n }\n },\n hasDropdown: category.planSubcategories.count() > 0,\n filterValue: category.slug\n }\n })\n\n filterObj['focus_area'] = {\n renderDropdownContent: () => {\n return (\n {\n if (this.state.toBeOpenDropdown) {\n const activeCategory = this.state.toBeOpenDropdown\n this.setState({\n activeCategory,\n toBeOpenDropdown: ''\n })\n }\n }}\n renderDropdownItemTemplate={({ option }) => {\n return (\n {\n if (this.categoriesAlreadyFiltered('focus_area', option)) {\n this.props.removeSeriesFilter('focus_area', option)\n } else {\n this.props.addSeriesFilter('focus_area', option)\n }\n this.props.setLastSelectedCategory('focus_area')\n this.props.loadProductPage(\n true,\n this.props.onAfterProductLoad\n )\n }}\n />\n )\n }}\n />\n )\n },\n onClickFilterDropdown: (value) => {\n if (\n this.state.activeCategory !== '' &&\n this.state.activeCategory !== value\n ) {\n this.setState({\n toBeOpenDropdown: value,\n activeCategory: ''\n })\n } else {\n const activeValue = this.state.activeCategory === value ? '' : value\n this.setState({ activeCategory: activeValue })\n }\n },\n filterValue: 'focus_area',\n displayedLabel: 'Focus Area'\n }\n\n filterObj['equipment'] = {\n renderDropdownContent: () => {\n return (\n {\n if (this.state.toBeOpenDropdown) {\n const activeCategory = this.state.toBeOpenDropdown\n this.setState({\n activeCategory,\n toBeOpenDropdown: ''\n })\n }\n }}\n renderDropdownItemTemplate={({ option }) => {\n return (\n {\n if (this.categoriesAlreadyFiltered('equipment', option)) {\n this.props.removeSeriesFilter('equipment', option)\n } else {\n this.props.addSeriesFilter('equipment', option)\n }\n this.props.setLastSelectedCategory('equipment')\n this.props.loadProductPage(\n true,\n this.props.onAfterProductLoad\n )\n }}\n />\n )\n }}\n />\n )\n },\n onClickFilterDropdown: (value) => {\n if (\n this.state.activeCategory !== '' &&\n this.state.activeCategory !== value\n ) {\n this.setState({\n toBeOpenDropdown: value,\n activeCategory: ''\n })\n } else {\n const activeValue = this.state.activeCategory === value ? '' : value\n this.setState({ activeCategory: activeValue })\n }\n },\n filterValue: 'equipment'\n }\n\n filterObj['difficulties'] = {\n renderDropdownContent: () => {\n return (\n {\n if (this.state.toBeOpenDropdown) {\n const activeCategory = this.state.toBeOpenDropdown\n this.setState({\n activeCategory,\n toBeOpenDropdown: ''\n })\n }\n }}\n renderDropdownItemTemplate={({ option }) => {\n const filteredDifficulties = this.props.filters.difficulties\n return (\n {\n if (\n this.categoriesAlreadyFiltered('difficulties', option)\n ) {\n this.props.removeSeriesFilter('difficulties', option)\n } else {\n this.props.addSeriesFilter('difficulties', option)\n }\n this.props.setLastSelectedCategory('difficulties')\n this.props.loadProductPage(\n true,\n this.props.onAfterProductLoad\n )\n }}\n renderDecorator={() => getDifficultyIcon(option)}\n />\n )\n }}\n />\n )\n },\n onClickFilterDropdown: (value) => {\n if (\n this.state.activeCategory !== '' &&\n this.state.activeCategory !== value\n ) {\n this.setState({\n toBeOpenDropdown: value,\n activeCategory: ''\n })\n } else {\n const activeValue = this.state.activeCategory === value ? '' : value\n this.setState({ activeCategory: activeValue })\n }\n },\n\n filterValue: 'difficulties',\n displayedLabel: 'Difficulty'\n }\n filterObj['intensities'] = {\n renderDropdownContent: () => {\n return (\n {\n if (this.state.toBeOpenDropdown) {\n const activeCategory = this.state.toBeOpenDropdown\n this.setState({\n activeCategory,\n toBeOpenDropdown: ''\n })\n }\n }}\n renderDropdownItemTemplate={({ option }) => {\n const filteredIntensities = this.props.filters.intensities\n return (\n {\n if (this.categoriesAlreadyFiltered('intensities', option)) {\n this.props.removeSeriesFilter('intensities', option)\n } else {\n this.props.addSeriesFilter('intensities', option)\n }\n this.props.setLastSelectedCategory('intensities')\n this.props.loadProductPage(\n true,\n this.props.onAfterProductLoad\n )\n }}\n renderDecorator={() => getIntensityIcon(option)}\n />\n )\n }}\n />\n )\n },\n onClickFilterDropdown: (value) => {\n if (\n this.state.activeCategory !== '' &&\n this.state.activeCategory !== value\n ) {\n this.setState({\n toBeOpenDropdown: value,\n activeCategory: ''\n })\n } else {\n const activeValue = this.state.activeCategory === value ? '' : value\n this.setState({ activeCategory: activeValue })\n }\n },\n\n filterValue: 'intensities',\n displayedLabel: 'Intensity'\n }\n if (this.areMoreThanOneInstructorAvailable()) {\n filterObj['instructors'] = {\n renderDropdownContent: () => {\n return (\n {\n if (this.state.toBeOpenDropdown) {\n const activeCategory = this.state.toBeOpenDropdown\n this.setState({\n activeCategory,\n toBeOpenDropdown: ''\n })\n }\n }}\n renderDropdownItemTemplate={({ option }) => {\n const user = option.user\n return (\n {\n if (this.categoriesAlreadyFiltered('instructors', option)) {\n this.props.removeSeriesFilter('instructors', option.slug)\n } else {\n this.props.addSeriesFilter('instructors', option)\n }\n this.props.setLastSelectedCategory('instructors')\n this.props.loadProductPage(\n true,\n this.props.onAfterProductLoad\n )\n }}\n />\n )\n }}\n />\n )\n },\n onClickFilterDropdown: (value) => {\n if (\n this.state.activeCategory !== '' &&\n this.state.activeCategory !== value\n ) {\n this.setState({\n toBeOpenDropdown: value,\n activeCategory: ''\n })\n } else {\n const activeValue = this.state.activeCategory === value ? '' : value\n this.setState({ activeCategory: activeValue })\n }\n },\n filterValue: 'instructors'\n }\n \n }\n \n\n return filterObj\n }\n\n buildFilteredLabels() {\n let filteredItems = {}\n const filteredCategories = this.props.filters.categories\n\n for (const categorySlug in filteredCategories) {\n const subcategorySlugs = filteredCategories[categorySlug]\n const category = getCategoryObj(this.props.categories, categorySlug)\n if (this.allSelected(category)) {\n let text = category.title\n const categorySubcategories = category.subcategories || []\n if (categorySubcategories.length > 0) {\n text = `All ${text}`\n }\n filteredItems[category.slug] = [\n {\n text,\n meta: category.slug\n }\n ]\n } else {\n filteredItems[categorySlug] = subcategorySlugs?.map(\n (subcategorySlug) => {\n const subcategory = getSubcategoryObj(\n category.subcategories,\n subcategorySlug\n )\n let text = ''\n const numberOfParentCategories = this.props.categoryRelationships\n .filter((categorySubcategory) => {\n const subcategorySlug =\n categorySubcategory.toPlanSubcategoryId.split('_')[1]\n const subcategoryToCompareSlug = subcategory.slug.split('_')[1]\n return subcategorySlug === subcategoryToCompareSlug\n })\n .count()\n if (numberOfParentCategories > 1) {\n text = `${category.title}:`\n }\n return {\n text: text + subcategory.title,\n meta: subcategory.slug\n }\n }\n )\n }\n if (this.props.filters.instructors) {\n const instructorFilter = this.props.filters.instructors.map((item) => {\n return {\n text: `${item?.user?.firstName} ${item?.user?.lastName}`,\n meta: item.slug\n }\n })\n filteredItems['instructors'] = instructorFilter\n }\n if (this.props.filters['focus_area']) {\n const focusAreaFilter = this.props.filters['focus_area'].map((item) => {\n return {\n text: item,\n meta: item\n }\n })\n filteredItems['focus_area'] = focusAreaFilter\n }\n if (this.props.filters.equipment) {\n const equipmentFilter = this.props.filters.equipment.map((item) => {\n return {\n text: item,\n meta: item\n }\n })\n filteredItems['equipment'] = equipmentFilter\n }\n\n if (this.props.filters.difficulties) {\n const difficlutyFilter = this.props.filters.difficulties.map((item) => {\n return {\n text: `${item}`,\n meta: item\n }\n })\n filteredItems['difficulties'] = difficlutyFilter\n }\n if (this.props.filters.intensities) {\n const intensityFilter = this.props.filters.intensities.map((item) => {\n return {\n text: `Level ${item}`,\n meta: item\n }\n })\n filteredItems['intensities'] = intensityFilter\n }\n }\n\n return filteredItems\n }\n\n userHasFiltered() {\n return !!this.props.filters.difficulty || !!this.props.filters.intensity\n }\n\n // getTotalNumberOfFilters(filteredLabels) {\n // let activeFilters = []\n // for (const filter in filteredLabels) {\n // // if (filteredLabels && !this.excludedFilters.includes(filter)) {\n // const filteredItem = filteredLabels[filter]\n // filteredItem?.map((label, idx) => {\n // activeFilters.push(label)\n // })\n // // }\n // }\n // return activeFilters.length\n // }\n\n clearAllFilters() {\n this.props.clearAllSeriesFilters()\n this.props.loadProductPage(true, this.props.onAfterProductLoad)\n }\n\n areMoreThanOneInstructorAvailable() {\n return this.props?.instructorOptions?.length > 1\n }\n\n render() {\n const filterOptions = this.buildSeriesPageFilterOptions()\n // const subcategoryFilterOptions = this.buildSubcategoryFilterOptions()\n const filteredLabels = this.buildFilteredLabels()\n // const difficultyIntensityOptions = this.buildDifficultyIntensityOptions()\n const totalfiltersSelected = getTotalNumberOfFilters(filteredLabels)\n\n return (\n {\n // if (label === 'difficulty') {\n // this.props.clearDifficultyFilter()\n // } else if (label === 'intensity') {\n // this.props.clearIntensityFilter()\n // }\n // this.props.loadProductPage(true, this.props.onAfterProductLoad)\n // }}\n onFixed={() => {\n this.setState({ activeCategory: '' })\n }}\n onLayoutSelect={this.props.selectLayout}\n layout={this.props.layout}\n modalFilterOptions={filterOptions}\n userHasFiltered={this.userHasFiltered()}\n totalProducts={this.props.totalProducts}\n order={this.props.order}\n sortableFields={['rank', 'az', 'date']}\n contentLabel='Series'\n onSort={(order) => {\n this.props.setProductOrder(order)\n this.props.loadProductPage(true, this.props.onAfterProductLoad)\n }}\n renderTopRow={() => (\n {\n option.onClickPill(filterValue)\n }}\n active={option.active}\n key={idx}\n />\n )\n filters.push(filterPill)\n idx++\n }\n\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 // parentCategory: category.slug,\n // ...subcategory\n // }))}\n // onCheckAll={() => {\n // if (this.allSelected(category)) {\n // this.props.setLastSelectedCategory()\n // this.props.removeCategoryFilter(category.slug)\n // } else {\n // this.props.applyCategoryFilter(category.slug)\n // this.props.setLastSelectedCategory(category.slug)\n // }\n // this.props.loadProductPage(true, this.props.onAfterProductLoad)\n // }}\n // allOptionsSelected={this.allSelected(category)}\n // filterName={category.title}\n // onAfterClose={() => {\n // if (this.state.toBeOpenDropdown) {\n // const activeCategory = this.state.toBeOpenDropdown\n // this.setState({\n // activeCategory,\n // toBeOpenDropdown: ''\n // })\n // }\n // }}\n // renderDropdownItemTemplate={({ option }) => {\n // return (\n // {\n // if (this.subcategoryAlreadyFiltered(option)) {\n // this.props.removeSubcategoryFilter(\n // category.slug,\n // option.slug\n // )\n // } else {\n // this.props.addSubcategoryFilter(category.slug, option)\n // }\n // this.props.setLastSelectedCategory(category.slug)\n // this.props.loadProductPage(\n // true,\n // this.props.onAfterProductLoad\n // )\n // }}\n // />\n // )\n // }}\n // />\n // )\n // },\n // onClickFilterDropdown: (categorySlug) => {\n // if (category.planSubcategories.count() > 0) {\n // if (\n // this.state.activeCategory !== '' &&\n // this.state.activeCategory !== categorySlug\n // ) {\n // this.setState({\n // toBeOpenDropdown: categorySlug,\n // activeCategory: ''\n // })\n // } else {\n // const activeValue =\n // this.state.activeCategory === categorySlug ? '' : categorySlug\n // this.setState({ activeCategory: activeValue })\n // }\n // } else {\n // if (this.allSelected(category)) {\n // this.props.removeCategoryFilter(categorySlug)\n // } else {\n // this.props.applyCategoryFilter(categorySlug)\n // }\n // this.props.setLastSelectedCategory(categorySlug)\n // this.props.loadProductPage(true, this.props.onAfterProductLoad)\n // }\n // },\n // hasDropdown: category.planSubcategories.count() > 0,\n // filterValue: category.slug\n // }\n // })\n // filterObj['difficulty'] = {\n // renderDropdownContent: () => {\n // return (\n // {\n // if (this.state.toBeOpenDropdown) {\n // const activeCategory = this.state.toBeOpenDropdown\n // this.setState({\n // activeCategory,\n // toBeOpenDropdown: ''\n // })\n // }\n // }}\n // renderDropdownItemTemplate={({ option }) => {\n // const filteredDifficulties = [this.props.filters.difficulty]\n // return (\n // {\n // if (filteredDifficulties.includes(option)) {\n // this.props.clearDifficultyFilter()\n // } else {\n // this.props.setDifficultyFilter(option)\n // }\n // this.props.setLastSelectedCategory('difficulty')\n // this.props.loadProductPage(\n // true,\n // this.props.onAfterProductLoad\n // )\n // }}\n // />\n // )\n // }}\n // />\n // )\n // },\n // onClickFilterDropdown: (value) => {\n // if (\n // this.state.activeCategory !== '' &&\n // this.state.activeCategory !== value\n // ) {\n // this.setState({\n // toBeOpenDropdown: value,\n // activeCategory: ''\n // })\n // } else {\n // const activeValue = this.state.activeCategory === value ? '' : value\n // this.setState({ activeCategory: activeValue })\n // }\n // },\n\n // filterValue: 'difficulty'\n // }\n // filterObj['intensity'] = {\n // renderDropdownContent: () => {\n // return (\n // {\n // if (this.state.toBeOpenDropdown) {\n // const activeCategory = this.state.toBeOpenDropdown\n // this.setState({\n // activeCategory,\n // toBeOpenDropdown: ''\n // })\n // }\n // }}\n // renderDropdownItemTemplate={({ option }) => {\n // const filteredIntensities = [this.props.filters.intensity]\n // return (\n // {\n // if (filteredIntensities.includes(option)) {\n // this.props.clearIntensityFilter()\n // } else {\n // this.props.setIntensityFilter(option)\n // }\n // this.props.setLastSelectedCategory('intensity')\n // this.props.loadProductPage(\n // true,\n // this.props.onAfterProductLoad\n // )\n // }}\n // />\n // )\n // }}\n // />\n // )\n // },\n // onClickFilterDropdown: (value) => {\n // if (\n // this.state.activeCategory !== '' &&\n // this.state.activeCategory !== value\n // ) {\n // this.setState({\n // toBeOpenDropdown: value,\n // activeCategory: ''\n // })\n // } else {\n // const activeValue = this.state.activeCategory === value ? '' : value\n // this.setState({ activeCategory: activeValue })\n // }\n // },\n\n // filterValue: 'intensity'\n // }\n // // filterObj ={...filterObj, ...this.buildDifficultyIntensityOptions()}\n // return filterObj\n // }\n\n // buildSubcategoryFilterOptions() {\n // let filterObj = {}\n // if (this.props.presentedCategory) {\n // this.props.presentedCategory.planSubcategories\n // .toRefArray()\n // .forEach((subcategory) => {\n // const subcategoryObj = {\n // parentCategory: this.props.presentedCategory.slug,\n // slug: subcategory.slug\n // }\n\n // filterObj[subcategory.title] = {\n // label: subcategory.title,\n // filterValue: subcategory.slug,\n // onClickPill: () => {\n // if (this.subcategoryAlreadyFiltered(subcategoryObj)) {\n // this.props.removeSubcategoryFilter(\n // subcategoryObj.parentCategory,\n // subcategoryObj.slug,\n // false\n // )\n // } else {\n // this.props.addSubcategoryFilter(\n // subcategoryObj.parentCategory,\n // subcategory\n // )\n // }\n // this.props.loadProductPage(true, this.props.onAfterProductLoad)\n // },\n // active: this.subcategoryAlreadyFiltered(subcategoryObj)\n // }\n // })\n // }\n\n // return filterObj\n // }\n\n // buildDifficultyIntensityOptions() {\n // return {\n // difficulty: {\n // renderDropdownContent: (dropdownIdx) => (\n // {\n // const filteredDifficulties = [this.props.filters.difficulty]\n // return (\n // {\n // if (filteredDifficulties.includes(option)) {\n // this.props.clearDifficultyFilter()\n // } else {\n // this.props.setDifficultyFilter(option)\n // }\n // this.props.loadProductPage(\n // true,\n // this.props.onAfterProductLoad\n // )\n // }}\n // />\n // )\n // }}\n // />\n // )\n // },\n // intensity: {\n // renderDropdownContent: (dropdownIdx) => (\n // {\n // const filteredIntensities = [this.props.filters.intensity]\n // return (\n // {\n // if (filteredIntensities.includes(option)) {\n // this.props.clearIntensityFilter()\n // } else {\n // this.props.setIntensityFilter(option)\n // }\n // this.props.loadProductPage(\n // true,\n // this.props.onAfterProductLoad\n // )\n // }}\n // />\n // )\n // }}\n // />\n // )\n // }\n // }\n // }\n\n buildFilteredLabels() {\n let filteredItems = {}\n const filteredCategories = this.props.filters.categories\n\n for (const categorySlug in filteredCategories) {\n const subcategorySlugs = filteredCategories[categorySlug]\n const category = getCategoryObj(this.props.categories, categorySlug)\n if (category && this.allSelected(category)) {\n let text = category.title\n const categorySubcategories = category.subcategories || []\n if (categorySubcategories.length > 0) {\n text = `All ${text}`\n }\n filteredItems[category.slug] = [\n {\n text,\n meta: category.slug\n }\n ]\n } else {\n filteredItems[categorySlug] = subcategorySlugs.map(\n (subcategorySlug) => {\n const subcategory = getSubcategoryObj(\n category.subcategories,\n subcategorySlug\n )\n let text = ''\n const numberOfParentCategories = this.props.categoryRelationships\n .filter((categorySubcategory) => {\n const subcategorySlug =\n categorySubcategory.toPlanSubcategoryId.split('_')[1]\n const subcategoryToCompareSlug = subcategory.slug.split('_')[1]\n return subcategorySlug === subcategoryToCompareSlug\n })\n .count()\n if (numberOfParentCategories > 1) {\n text = `${category.title}:`\n }\n return {\n text: text + subcategory.title,\n meta: subcategory.slug\n }\n }\n )\n }\n }\n if (this.props.filters.difficulties) {\n const difficlutyFilter = this.props.filters.difficulties.map((item) => {\n return {\n text: `${item}`,\n meta: item\n }\n })\n filteredItems['difficulties'] = difficlutyFilter\n }\n if (this.props.filters.intensities) {\n const intensityFilter = this.props.filters.intensities.map((item) => {\n return {\n text: `Level ${item}`,\n meta: item\n }\n })\n filteredItems['intensities'] = intensityFilter\n }\n\n if (this.props.filters.instructors) {\n const instructorFilter = this.props.filters.instructors.map((item) => {\n return {\n text: `${item?.user?.firstName} ${item?.user?.lastName}`,\n meta: item.slug\n }\n })\n filteredItems['instructors'] = instructorFilter\n }\n if (this.props.filters['focus_area']) {\n const focusAreaFilter = this.props.filters['focus_area'].map((item) => {\n return {\n text: item,\n meta: item\n }\n })\n filteredItems['focus_area'] = focusAreaFilter\n }\n if (this.props.filters.equipment) {\n const equipmentFilter = this.props.filters.equipment.map((item) => {\n return {\n text: item,\n meta: item\n }\n })\n filteredItems['equipment'] = equipmentFilter\n }\n\n return filteredItems\n }\n\n // userHasFiltered() {\n // return !!this.props.filters.difficulty || !!this.props.filters.intensity\n // }\n\n removeFilter(parentCategorySlug, slug) {\n if (\n [\n 'instructors',\n 'equipment',\n 'focus_area',\n 'difficulties',\n 'intensities'\n ].includes(parentCategorySlug)\n ) {\n this.props.removeSeriesFilter(parentCategorySlug, slug)\n } else {\n const isACategory = Object.keys(this.props.filters.categories).includes(\n slug\n )\n\n if (isACategory) {\n this.props.removeCategoryFilter(slug)\n } else {\n this.props.removeSubcategoryFilter(parentCategorySlug, slug)\n }\n }\n\n this.props.loadProductPage(true, this.props.onAfterProductLoad)\n }\n\n clearAllFilters() {\n this.props.clearAllSeriesFilters()\n this.props.loadProductPage(true, this.props.onAfterProductLoad)\n }\n\n render() {\n // const filterOptions = this.buildSeriesPageFilterOptions()\n // const subcategoryFilterOptions = this.buildSubcategoryFilterOptions()\n const filteredLabels = this.buildFilteredLabels()\n\n // const difficultyIntensityOptions = this.buildDifficultyIntensityOptions()\n\n return (\n <>\n {\n this.props.setProductOrder(order)\n this.props.loadProductPage(true, this.props.onAfterProductLoad)\n }}\n contentLabel='Series'\n />\n \n )\n }\n}\n\nSeriesFinderNewFilteredList.propTypes = {\n addSubcategoryFilter: PropTypes.func,\n categoryRelationships: PropTypes.object,\n clearDifficultyFilter: PropTypes.func,\n setDifficultyFilter: PropTypes.func,\n setIntensityFilter: PropTypes.func,\n clearIntensityFilter: PropTypes.func,\n removeCategoryFilter: PropTypes.func,\n removeSubcategoryFilter: PropTypes.func,\n categories: PropTypes.array,\n setLastSelectedCategory: PropTypes.func,\n filters: PropTypes.object,\n presentedCategory: PropTypes.object,\n group: PropTypes.string,\n layout: PropTypes.string,\n onSort: PropTypes.func,\n order: PropTypes.string,\n applyCategoryFilter: PropTypes.func,\n selectLayout: PropTypes.func,\n totalProducts: PropTypes.number,\n loadProductPage: PropTypes.func,\n onAfterProductLoad: PropTypes.func,\n setProductOrder: PropTypes.func\n}\n\nconst mapStateToProps = (state) => {\n return {\n categories: getCategories(state),\n categoryRelationships: getCategoryRelationships(state),\n presentedCategory: getLastSelectedCategory(state)\n }\n}\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n setLastSelectedCategory: (newCategorySlug) => {\n dispatch(setSelectedCategorySlug(newCategorySlug))\n },\n addSubcategoryFilter: (parentCategory, filter) => {\n dispatch(addSubcategoryFilter(parentCategory, filter))\n },\n removeCategoryFilter: (filterSlug) => {\n dispatch(removeCategoryFilter(filterSlug))\n },\n removeSubcategoryFilter: (\n parentCategory,\n filterSlug,\n clearParent = true\n ) => {\n dispatch(removeSubcategoryFilter(parentCategory, filterSlug, clearParent))\n },\n setDifficultyFilter: (difficulty) => {\n dispatch(setDifficultyFilter(difficulty))\n },\n clearDifficultyFilter: () => {\n dispatch(clearDifficultyFilter())\n },\n setIntensityFilter: (intensity) => {\n dispatch(setIntensityFilter(intensity))\n },\n clearIntensityFilter: () => {\n dispatch(clearIntensityFilter())\n },\n loadProductPage: (reloadAll, callback) => {\n dispatch(loadProductsPage(reloadAll, callback))\n },\n applyCategoryFilter: (category) => {\n dispatch(applyCategoryFilter(category))\n },\n setProductOrder: (order) => {\n dispatch(setProductOrder(order))\n },\n removeSeriesFilter: (parentCategory, filter) => {\n dispatch(removeSeriesFilter(parentCategory, filter))\n },\n clearAllSeriesFilters: () => {\n dispatch(clearAllSeriesFilters())\n }\n }\n}\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(SeriesFinderNewFilteredList)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport HoverableProductTile from '../productTile/HoverableProductTile'\nimport ScrollableCarousel from '../../owlCarousel/ScrollableCarousel'\nimport './productCarousel.css.scss'\n\nclass ProductCarousel extends React.Component {\n render () {\n let carouselTitle\n if (this.props.title) {\n carouselTitle = (\n \n
{this.props.title} \n
\n
\n
\n ))\n\n return (\n \n \n
\n {carouselTitle}\n
\n
\n
\n {productTiles} \n
\n
\n
\n
\n
\n {productTiles.slice(0, 4)}\n
\n \n )\n }\n}\n\nProductCarousel.propTypes = {\n products: PropTypes.array,\n link: PropTypes.string,\n title: PropTypes.string\n}\n\nexport default ProductCarousel\n","import React from 'react'\nimport ProductTile from './ProductTile'\nimport withItemTileHover from '../../itemTile/withItemTileHover'\n\nconst HoveredProductTile = props => {\n let HoveredProductTile = withItemTileHover(ProductTile, true, 44)\n return {\n this.props.mouseEnterAction(this.card.current)\n }}\n onMouseLeave={this.props.mouseLeaveAction}\n ref={this.card}\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 {featuredProductCards}\n \n )\n }\n\n return (\n \n \n \n {featuredProductCards[0]}\n
\n \n )\n }\n}\n\nFeaturedProductsCarousel.propTypes = {\n featuredProducts: PropTypes.array\n}\n\nexport default FeaturedProductsCarousel\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nconst FeaturedProductCard = props => {\n const product = props.product\n let bundleTag\n\n return (\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 this.setState({ active: true })\n }}\n >\n {\n this.setState({ active: false })\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 ) : null}\n
\n
\n {props.showPlanTitle ? entry.plan.title : null}\n \n {entry.title} \n {getEntryCoachName(entry)} \n \n \n \n )\n })}\n \n )\n}\n\nVideosList.propTypes = {\n entries: PropTypes.array,\n playlistPos: PropTypes.number,\n playlistUUID: PropTypes.string,\n showPlanTitle: PropTypes.bool,\n type: PropTypes.string\n}\n\nexport default VideosList\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Modal } from 'react-bootstrap'\nimport NestedHoverMenuItem from '../../nestedHoverMenu/NestedHoverMenuItem'\nimport NewPlaylistForm from './NewPlaylistForm'\nimport EntryAddedConfirmation from './EntryAddedConfirmation'\nimport DuplicateEntryPrompt from './DuplicateEntryPrompt'\nimport { connect } from 'react-redux'\nimport { userAuthoredPlaylists } from '../../../redux/selectors/playlists'\nclass AddToPlaylistModal extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n view: 'list'\n }\n\n this.entryInPlaylist = this.entryInPlaylist.bind(this)\n }\n\n entryInPlaylist (playlist) {\n return this.props.playlistEntries\n .filter({\n playlist: playlist.uuid,\n planEntry: this.props.planEntry.id\n })\n .exists()\n }\n\n getDisplayedView (playlists) {\n switch (this.state.view) {\n case 'list':\n return (\n \n
\n {\n this.setState({ view: 'new-form' })\n }}\n />\n \n
\n
{\n this.props.onAdd(this.playlist)\n this.setState({ view: 'confirmation' })\n }}\n />\n )\n case 'confirmation':\n return (\n {\n this.playlist = playlist\n if (this.entryInPlaylist(playlist)) {\n this.setState({ view: 'duplicate' })\n } else {\n this.props.onAdd(playlist)\n this.setState({ view: 'confirmation' })\n }\n }}\n key={idx}\n />\n ))\n\n let page = this.getDisplayedView(playlists)\n\n return (\n \n \n \n )\n }\n}\n\nAddToPlaylistModal.propTypes = {\n show: PropTypes.bool,\n playlists: PropTypes.array,\n planEntry: PropTypes.object,\n playlistEntries: PropTypes.object,\n onHide: PropTypes.func,\n onAdd: PropTypes.func\n}\n\nconst mapStateToProps = state => {\n return {\n playlists: userAuthoredPlaylists(state)\n }\n}\n\nconst mapDispatchToProps = (dispatch, props) => {\n return {\n addEntryToPlaylist: () => {}\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AddToPlaylistModal)\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nconst EntryAddedConfirmation = props => {\n return (\n \n
\n {props.entry.title}\n
\n has been added to\n
\n
{props.playlist.title} \n
\n \n Done\n \n
\n
\n
\n {({ animateIn }) => \n )\n}\n\nexport default NestedMenuPlusIcon\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nconst ExternalVideo = props => {\n const video = props.video\n const renderVideo = () => {\n if (video.facebook) {\n return (\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 {(context) => {\n if (!this.eventsBinded && this.props.videoPlayer) {\n if (!this.trackingContext) {\n this.trackingContext = context\n }\n\n this.eventsBinded = true\n this.bindTrackingEvents()\n }\n\n return this.props.children\n }}\n \n \n )\n }\n}\n\nVideoTracker.propTypes = {\n children: PropTypes.node,\n videoInfo: PropTypes.object,\n videoPlayer: PropTypes.object,\n videoHasBeenPlayed: PropTypes.bool\n}\n\nexport default VideoTracker\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport TrackableContext from './TrackableContext'\nimport axios from 'axios'\nimport snakeCaseKeys from 'snakecase-keys'\n\nclass TrackableSection extends React.Component {\n constructor (props) {\n super(props)\n\n this.requests = {}\n this.trackOnUnload = true\n\n this.updateTrackingObject = this.updateTrackingObject.bind(this)\n this.getTrackedVal = this.getTrackedVal.bind(this)\n this.sendTrackedInfo = this.sendTrackedInfo.bind(this)\n this.handleBeforeUnload = this.handleBeforeUnload.bind(this)\n }\n\n componentDidMount () {\n if (!this.props.disable) {\n window.addEventListener('beforeunload', this.handleBeforeUnload)\n }\n }\n\n componentWillUnmount () {\n if (!this.props.disable) {\n window.removeEventListener('beforeunload', this.handleBeforeUnload)\n }\n }\n\n handleBeforeUnload () {\n if (this.props.onBeforeUnload) {\n this.props.onBeforeUnload(this.updateTrackingObject)\n }\n\n this.sendTrackedInfo()\n }\n\n sendTrackedInfo () {\n let requests = []\n for (const key in this.requests) {\n if (!this.props.disabledEvents.includes(key)) {\n requests = requests.concat(this.getTrackedVal(key))\n delete this.requests[key]\n }\n }\n\n if (requests.length > 0) {\n const requestObj = {\n ops: requests,\n sequential: true\n }\n axios.post('/batch', snakeCaseKeys(requestObj))\n }\n }\n\n updateTrackingObject (name, params) {\n const currentTrackedInfo = this.getTrackedVal(name)\n\n const url = params.url || this.props.defaultUrl\n const method = params.method || this.props.defaultMethod\n\n const requestObj = {\n params: {\n ...this.props.globalParams,\n ...params\n },\n url: `${this.props.urlPrefix}${url}`,\n method\n }\n const updatedParams = currentTrackedInfo\n ? [...currentTrackedInfo, requestObj]\n : [requestObj]\n\n this.requests[name] = updatedParams\n }\n\n getTrackedVal (key) {\n return this.requests[key]\n }\n\n render () {\n return (\n \n {this.props.children}\n \n )\n }\n}\n\nTrackableSection.defaultProps = {\n urlPrefix: '/',\n defaultMethod: 'post'\n}\n\nTrackableSection.propTypes = {\n children: PropTypes.node,\n urlPrefix: PropTypes.string,\n onBeforeUnload: PropTypes.func,\n defaultUrl: PropTypes.string,\n defaultMethod: PropTypes.string,\n globalParams: PropTypes.object,\n disable: PropTypes.bool,\n disabledEvents: PropTypes.array\n}\n\nexport default TrackableSection\n","import React from 'react'\nimport VideosListContent from './VideosListContent'\nimport VideosListIcon from './VideoListIcon'\n\nconst VideosListMenu = props => {\n return (\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 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 {videoTitle}\n \n
\n )\n}\n\nVideoToggle.propTypes = {\n durationInTitle: PropTypes.bool,\n handleClick: PropTypes.func,\n label: PropTypes.string,\n video: PropTypes.object\n}\n\nexport default VideoToggle\n","import React from 'react'\nimport ItemTileCover from '../itemTile/ItemTileCover'\nimport ItemTileInformation from '../itemTile/ItemTileInformation'\nimport withItemTileHover from '../itemTile/withItemTileHover'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport SimpleFormat from '../simpleFormatter/SimpleFormatter'\nimport FavoritePlusButton from '../favoriteButton/FavoritePlusButton'\nimport IntroductoryIcon from '../../../assets/codicons/introductory'\nimport BeginnerIcon from '../../../assets/codicons/beginner'\nimport ModerateIcon from '../../../assets/codicons/moderate'\nimport IntermediateIcon from '../../../assets/codicons/intermediate'\nimport AdvancedIcon from '../../../assets/codicons/advanced'\n\nconst PlanEntryTileItem = (props) => {\n const planEntry = props.planEntry\n\n let title = planEntry.classFinderTitle\n ? planEntry.classFinderTitle\n : planEntry.title\n\n const planEntryTileClasses = classNames(\n 'product-card',\n 'product-tile',\n 'single-class-container',\n {\n 'has-description': props.hasDescription,\n list: props.inListLayout,\n tile: props.inTileLayout\n }\n )\n\n let card = React.createRef()\n let itemToReveal = React.createRef()\n\n let tileDescription\n if (props.hasDescription && props.inListLayout) {\n tileDescription = (\n \n
\n )\n }\n\n const renderDifficultyIcon = (difficulty) => {\n switch (difficulty) {\n case 'introductory':\n return \n Part Of\n {planEntry.plan.title} \n \n )\n }\n\n return (\n \n
{\n let completedPlanEntryTick\n if (planEntry.completed) {\n completedPlanEntryTick = (\n \n
\n )\n }\n return completedPlanEntryTick\n }}\n metaDataComp={\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
{\n props.mouseEnterAction(card.current, itemToReveal.current)\n }}\n onMouseLeave={props.mouseLeaveAction}\n >\n {\n if (props.showFavoriteButton) {\n return {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
{props.item.title}
\n
\n {props.item.type} \n by{' '}\n {productAuthors} \n
\n
\n
\n
\n {(() => {\n if (cardDetails.itemType === 'class') {\n return (\n <>\n {cardDetails?.itemTag && {cardDetails?.itemTag} }\n \n {cardData?.itemTag && {cardData?.itemTag} }\n {image ? (\n \n
\n )}\n {cardData.item.title} \n {cardData.description} \n \n Download \n \n )\n}\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 {this.props.subcaption}
\n \n )\n\n footer = (\n \n \n Cancel Membership\n \n\n \n I Want To Stay\n \n \n )\n } else {\n body = (\n You are about to cancel your membership.
\n )\n\n footer = (\n \n Cancel Membership\n \n )\n }\n\n return (\n \n \n \n {this.props.eligible ? 'Before You Go...' : 'Cancel Membership'}\n \n \n\n \n {body}\n \n\n \n {this.props.error &&\n \n {this.props.error}\n
\n }\n {footer}\n \n \n )\n }\n}\n\nCancellationOfferModal.defaultProps = {\n message: 'Could one free month on us change your mind?'\n}\n\nCancellationOfferModal.propTypes = {\n eligible: PropTypes.bool,\n message: PropTypes.string,\n subcaption: PropTypes.string,\n show: PropTypes.bool,\n onHide: PropTypes.func.isRequired,\n onConfirmCancel: PropTypes.func.isRequired,\n onAcceptOffer: PropTypes.func.isRequired,\n error: PropTypes.string,\n action: PropTypes.string\n}\n\nexport default CancellationOfferModal\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport { shuffleArray } from 'utils'\n\nimport CancellationReason from './CancellationReason'\n\nclass CancellationQuestion extends React.Component {\n constructor (props) {\n super(props)\n\n this.reasons = this.formatReasons()\n }\n\n formatReasons () {\n // If 'Other' option is specified: remove it, shuffle array, then append 'Other' to end\n let reasons = this.props.question.reasons.slice(0) // Copy reasons array\n let other\n\n if (reasons[0].key === 0) {\n other = reasons.shift()\n }\n\n reasons = shuffleArray(reasons)\n\n if (other) reasons.push(other)\n\n return reasons\n }\n\n render () {\n const reasons = this.reasons.map(reason => (\n \n
{this.props.question.text} \n {reasons}\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 \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 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 \n )\n }\n}\n\nexport default ClassFinder\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\nconst mapStateToProps = (state) => {\n return {\n planEntries: planEntries(state),\n filteredAttributes: state.ui.planEntries.filtered,\n filterUrl: state.ui.planEntries.filterUrl\n }\n}\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n loadPlanEntries: (callback) => {\n dispatch(loadPlanEntries(callback))\n },\n setInitialFilters: (filters) => {\n dispatch(setInitialFilters(filters))\n },\n changeOrder: (order) => {\n dispatch(changeOrder(order))\n },\n insertPlanCategories: (categories) => {\n dispatch(insertPlanCategories(categories))\n },\n clearPlanEntries: () => {\n dispatch(clearPlanEntries())\n },\n setDefaultFilter: (value) => {\n dispatch(setDefaultFilter(value))\n }\n }\n}\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(ClassFinderDataLoader)\n\nClassFinderDataLoader.defaultProps = {\n defaultOrder: 'relevance'\n}\n\nClassFinderDataLoader.propTypes = {\n autopaginate: PropTypes.bool,\n baseUrl: PropTypes.string,\n categoryFilterOptions: PropTypes.array,\n setInitialFilters: PropTypes.func,\n changeOrder: PropTypes.func,\n defaultOrder: PropTypes.string,\n preloadedFilters: PropTypes.object,\n instructorFilterOptions: PropTypes.array,\n includeFilters: PropTypes.bool,\n planEntries: PropTypes.array,\n loadPlanEntries: PropTypes.func,\n filteredAttributes: PropTypes.object,\n filterUrl: PropTypes.string,\n insertPlanCategories: PropTypes.func,\n withSubcategories: PropTypes.bool,\n dropdownOptions: PropTypes.object,\n clearPlanEntries: PropTypes.func\n}\n","import React from 'react'\nimport { connect } from 'react-redux'\nimport PropTypes from 'prop-types'\nimport ItemTileGrid from '../../itemTile/ItemTileGrid'\nimport {\n loadPlanEntries,\n clearAllFilters,\n clearPlanEntries\n} from '../../../redux/actions/planEntries'\nimport ClassFinderTopSection from './ClassFinderTopSection'\nimport AloIcon from '../../../../assets/codicons/a'\nimport { getPlanEntryGridState } from '../../../redux/selectors/planEntries'\nimport { currentUser } from '../../../redux/selectors/user'\nimport ClassFinderNewFilteredList from './ClassFinderNewFilteredList'\nimport { Box } from 'ui/bend'\nimport { ClassCard } from 'components_v1/SchemaSectionRenderer/common/components'\n\nconst NUM_ENTRIES_INIT_VISIBLE_NON_AUTOPAGINATE = 6\n\nconst ClassFinderContent = (props) => {\n let planEntryTiles\n if (props.planEntries) {\n planEntryTiles = props.planEntries.map((entry) => (\n \n \n \n
\n ))\n }\n\n return (\n <>\n {window.innerWidth > 1024 ? (\n \n
\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 We looked but this search has zero matches\n \n
{\n props.clearAllFilters()\n props.clearPlanEntries()\n props.loadPlanEntries()\n }}\n >\n Try using different filter options\n \n \n )\n } else {\n return
{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 return (\n {\n this.reorderEntries(option.value)\n }}\n isSort={true}\n />\n )\n }}\n />\n )\n }\n ),\n ...this.props.dropdownOptions.styles.map((style) => {\n return this.generateFilterDropdownObj(\n style.slug,\n FILTER_BY_FIELDS.styles, //slug\n (autoOpen, noSlideAnimation) => {\n const allFilter = {\n title: `All ${style.title} classes`,\n slug: style.slug\n }\n return (\n firstLevelChild.slug === style.slug\n )[0].subcategories\n )}\n onAfterClose={this.openNextDropdown}\n renderDropdownItemTemplate={({ option, header, parent }) => {\n const filteredCategory = this.props.filteredAttributes[\n style.slug\n ]?.map((item) => item.slug)\n\n return (\n {\n if (filteredCategory?.includes(option.slug)) {\n this.removeFilter(style.slug, option.slug)\n } else {\n this.applyFilter(style.slug, option)\n }\n }}\n />\n )\n }}\n />\n )\n },\n style.title\n )\n }),\n this.generateFilterDropdownObj(\n 'duration',\n null,\n (autoOpen, noSlideAnimation) => {\n return (\n (\n {\n if (isActive) {\n this.removeFilter(\n 'duration',\n `${option.min}-${option.max}`\n )\n } else {\n this.applyFilter('duration', option)\n }\n }}\n />\n )\n }}\n />\n )\n }\n ),\n this.generateFilterDropdownObj(\n 'focus_area',\n null,\n (autoOpen, noSlideAnimation) => (\n {\n const filteredFocusArea = this.props.filteredAttributes.focus_area\n return (\n {\n if (filteredFocusArea?.includes(option)) {\n this.removeFilter('focus_area', option)\n } else {\n this.applyFilter('focus_area', option)\n }\n }}\n />\n )\n }}\n parentLabel='focus_area'\n />\n ),\n 'Focus Area'\n ),\n this.generateFilterDropdownObj(\n 'equipment',\n null,\n (autoOpen, noSlideAnimation) => (\n {\n const filteredEquipments = this.props.filteredAttributes.equipment\n return (\n {\n if (filteredEquipments?.includes(option)) {\n this.removeFilter('equipment', option)\n } else {\n this.applyFilter('equipment', option)\n }\n }}\n />\n )\n }}\n parentLabel='Equipment'\n />\n ),\n 'Equipment'\n ),\n\n this.generateFilterDropdownObj(\n 'difficulties',\n null,\n (autoOpen, noSlideAnimation) => (\n {\n const filteredDifficulties =\n this.props.filteredAttributes.difficulties\n return (\n {\n if (filteredDifficulties.includes(option)) {\n this.removeFilter('difficulties', option)\n } else {\n this.applyFilter('difficulties', option)\n }\n }}\n renderDecorator={() => getDifficultyIcon(option)}\n />\n )\n }}\n parentLabel='Difficulty'\n filterDesc='Difficulty refers to the level of skill and technique called for.'\n />\n ),\n 'Difficulty'\n ),\n this.generateFilterDropdownObj(\n 'intensities',\n FILTER_BY_FIELDS.intensities,\n (autoOpen, noSlideAnimation) => (\n {\n const filteredIntensities =\n this.props.filteredAttributes.intensities.map(\n (intensity) => intensity.level\n )\n return (\n {\n if (filteredIntensities.includes(option.level)) {\n this.removeFilter('intensities', option.level)\n } else {\n this.applyFilter('intensities', option)\n }\n }}\n renderDecorator={() => getIntensityIcon(option.level)}\n filterName={'Intensity'}\n />\n )\n }}\n parentLabel='Intensity'\n filterDesc='Intensity refers to the amount of exertion required.'\n />\n ),\n 'Intensity'\n ),\n\n this.generateFilterDropdownObj(\n 'instructors',\n FILTER_BY_FIELDS.instructors,\n (autoOpen, noSlideAnimation) => {\n const allInstructorsOption = {\n text: 'All Instructors'\n }\n return (\n {\n const user = option.user\n const filteredInstuctorSlugs =\n this.props.filteredAttributes.instructors.map(\n (instructor) => instructor.slug\n )\n\n if (user) {\n return (\n {\n if (filteredInstuctorSlugs.includes(option.slug)) {\n this.removeFilter('instructors', option.slug)\n } else {\n this.applyFilter('instructors', option)\n }\n }}\n />\n )\n } else {\n // All instructors selected\n return (\n {\n class_series_finder_filter_event(\n 'instructors',\n 'all instructors'\n )\n this.props.clearFilter('instructors')\n this.props.loadPlanEntries(this.pushWindowState)\n }}\n />\n )\n }\n }}\n />\n )\n }\n )\n )\n }\n\n openNextDropdown() {\n if (this.state.toBeOpenDropdown) {\n const activeDropdown = this.state.toBeOpenDropdown\n this.setState({\n activeDropdown,\n toBeOpenDropdown: ''\n })\n }\n }\n\n /**\n * Generates an object for the Filter components\n * @param {Name of filter section. This will be used as the display label if none is given} label\n * @param {Field to filter by} filterByField\n * @param {Function returning the component that will be displayed in the dropdown} renderDropdownContent\n * @param {Additional CSS classes to pass to dropdown element} additionalDropdownClasses\n * @param {Array of 'filterByFields' representing what the user has already filtered} filtered\n * @param {Label displayed in view} displayedLabel\n */\n generateFilterDropdownObj(\n label,\n filterByField,\n renderDropdownContent,\n displayedLabel,\n additionalDropdownClasses\n ) {\n if (\n label !== 'instructors' ||\n (label === 'instructors' && !this.instructorFilterExcluded())\n ) {\n return {\n [`${label}`]: {\n displayedLabel,\n additionalDropdownClasses,\n renderDropdownContent,\n filterByField,\n onClickFilterDropdown: (value) => {\n if (\n this.state.activeDropdown !== '' &&\n this.state.activeDropdown !== value\n ) {\n this.setState({\n toBeOpenDropdown: value,\n activeDropdown: ''\n })\n } else {\n const activeValue =\n this.state.activeDropdown === value ? '' : value\n this.setState({ activeDropdown: activeValue })\n }\n }\n }\n }\n }\n }\n\n applyFilter(filterSection, filter, options) {\n const maxRange = filter.max || this.props.dropdownOptions.duration.max\n const excludeFilterEvent =\n filterSection === 'duration' &&\n filter?.min === this.props.dropdownOptions.duration.min &&\n maxRange === this.props.dropdownOptions.duration.max\n const durationFilter = {\n min: filter.min,\n max: maxRange\n }\n let filterValue = ''\n\n if (this.props.filteredAttributes) {\n switch (filterSection) {\n case 'instructors':\n filterValue = filter?.user?.name\n break\n case 'styles':\n filterValue = filter?.slug\n break\n case 'intensities':\n filterValue = String(filter?.level)\n break\n case 'duration':\n filterValue = `${durationFilter.min}-${durationFilter.max}`\n break\n case 'difficulties':\n filterValue = filter\n break\n case 'yoga':\n case 'fitness':\n case 'mindfulness':\n case 'wellness':\n case 'skills':\n filterValue = filter?.slug\n break\n default:\n filterValue = filter\n break\n }\n }\n\n !excludeFilterEvent &&\n class_series_finder_filter_event(filterSection, filterValue, options)\n this.props.addFilter(filterSection, filter, options)\n this.props.loadPlanEntries(this.pushWindowState)\n }\n\n removeFilter(filterSection, filter, options) {\n const filterOptions = this.filterOptions\n if (filterSection === 'duration') {\n this.setState({\n displayedDurationMinMax: {\n min: this.props.dropdownOptions.duration.min\n }\n })\n }\n const filterByField = filterOptions?.[filterSection]?.filterByField\n this.props.removeFilter(filterSection, filter, filterByField, options)\n this.props.loadPlanEntries(this.pushWindowState)\n }\n\n clearAllFilters() {\n this.props.clearAllFilters()\n this.props.loadPlanEntries(this.pushWindowState)\n }\n\n reorderEntries(order) {\n this.props.changeOrder(order)\n this.props.loadPlanEntries(this.pushWindowState)\n }\n\n instructorFilterExcluded() {\n return this.props.dropdownOptions.instructors.length < 2\n }\n\n render() {\n const filteredLabels = getFilteredItemLabels({\n filteredAttributes: this.props.filteredAttributes,\n duration: {\n min: this.props.dropdownOptions.duration.min,\n max: this.props.dropdownOptions.duration.max\n },\n excludedFilters: this.excludedFilters || [],\n categoryRelationships: this.props.categoryRelationships\n })\n const totalfiltersSelected = getTotalNumberOfFilters(filteredLabels)\n return (\n (\n <>\n {this.props.userPresent && (\n {\n exitFullscreen()\n if (userHasChangedFilter) {\n this.props.loadPlanEntries(this.pushWindowState)\n }\n }}\n withSubcategories={this.props.withSubcategories}\n filteredLabels={filteredLabels}\n filterOptions={this.props.dropdownOptions}\n noInstructors={this.instructorFilterExcluded()}\n filterByFields={FILTER_BY_FIELDS}\n onSelectedFilterLabelClick={this.removeFilter}\n onClearAll={this.clearAllFilters}\n totalfiltersSelected={totalfiltersSelected}\n />\n )\n }}\n onClearAll={this.clearAllFilters}\n totalfiltersSelected={totalfiltersSelected}\n />\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n const planEntryGridState = getPlanEntryGridState(state)\n return {\n filteredAttributes: state.ui.planEntries.filtered,\n filterUrl: state.ui.planEntries.filterUrl,\n total: parseInt(planEntryGridState.total),\n order: state.ui.planEntries.order,\n categoryRelationships: getCategoryRelationships(state),\n layout: planEntryGridState.layout\n }\n}\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n loadPlanEntries: (callback) => {\n dispatch(clearPlanEntries())\n dispatch(loadPlanEntries(callback))\n },\n addFilter: (filterSection, filters, options) => {\n dispatch(addFilter(filterSection, filters, options))\n },\n removeFilter: (filterSection, filterField, filterByField, options) => {\n dispatch(removeFilter(filterSection, filterField, filterByField, options))\n },\n changeOrder: (order) => {\n dispatch(changeOrder(order))\n },\n setInitialFilters: (filters) => {\n dispatch(setInitialFilters(filters))\n },\n selectLayout: (layout) => {\n dispatch(changeLayout(layout))\n },\n clearFilter: (label) => {\n dispatch(clearFilter(label))\n },\n clearAllFilters: () => {\n dispatch(clearAllFilters())\n }\n }\n}\n\nClassFinderTopSection.propTypes = {\n baseUrl: PropTypes.string,\n clearInstructorFilter: PropTypes.func,\n changeOrder: PropTypes.func,\n addFilter: PropTypes.func,\n filterUrl: PropTypes.string,\n removeFilter: PropTypes.func,\n loadPlanEntries: PropTypes.func,\n order: PropTypes.string,\n filteredAttributes: PropTypes.object,\n preloadedFilters: PropTypes.object,\n includeFilters: PropTypes.bool,\n setInitialFilters: PropTypes.func,\n total: PropTypes.number,\n clearFilter: PropTypes.func,\n selectLayout: PropTypes.func,\n withSubcategories: PropTypes.bool,\n dropdownOptions: PropTypes.object,\n layout: PropTypes.string\n}\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(ClassFinderTopSection)\n","import React from 'react'\nimport { connect } from 'react-redux'\nimport PropTypes from 'prop-types'\n// import HelpPopup from '../../helpPopup/HelpPopup'\n// import MediaQuery from 'react-responsive'\nimport { getPlanEntryGridState } from '../../../redux/selectors/planEntries'\n// import { 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 SliderDropdown from '../../filtersRow/SliderDropdown'\nimport { getCategoryRelationships } from '../../../redux/selectors/planCategoryPlanSubcategories'\nimport SelectedFiltersDisplay from '../../filtersRow/SelectedFiltersDisplay'\nimport ClassFinderNewSortAndClear from './ClassFinderNewSortAndClear'\n\n// Helper Methods\nimport {\n getFilteredItemLabels,\n isCategoryAlreadyFiltered\n} from './classFinderHelperMethods'\nimport ClassFinderMobileFilter from './ClassFinderMobileFilter'\n\nconst FILTER_BY_FIELDS = {\n instructors: 'slug',\n styles: 'slug',\n intensities: 'level'\n}\n\nclass ClassFinderNewFilteredList 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\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.props.dropdownOptions.styles.map((style)=> {\n // return this.generateFilterDropdownObj(\n // style.slug,\n // FILTER_BY_FIELDS.styles, //slug\n // (autoOpen, noSlideAnimation) => {\n // const allFilter = {\n // title: `All ${style.title} classes`,\n // slug: style.slug\n // }\n // return (\n // firstLevelChild.slug === style.slug)[0].subcategories)}\n // onAfterClose={this.openNextDropdown}\n // renderDropdownItemTemplate={({ option, header, parent }) => {\n // const filteredCategory = this.props.filteredAttributes[style.slug]?.map(item => item.slug)\n\n // return (\n // {\n // if (filteredCategory?.includes(option.slug)) {\n // this.removeFilter(style.slug, option.slug)\n // } else {\n // this.applyFilter(style.slug, option)\n // }\n // }}\n // />\n // )\n // }}\n // />\n // )},\n // style.title\n\n // )\n // }),\n // this.generateFilterDropdownObj(\n // 'duration',\n // null,\n // (autoOpen, noSlideAnimation) => {\n // const 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 // return (\n // {\n // const filteredDuration = this.props.filteredAttributes.duration\n // const filteredMinValue = Number(filteredDuration.min);\n // const filteredMaxValue = filteredDuration.max? Number(filteredDuration.max): filteredDuration.max;\n // return (\n // {\n // if (filteredMinValue === option.min && filteredMaxValue === option.max) {\n // this.removeFilter('duration', option)\n // } else {\n // this.applyFilter('duration', option)\n // }\n // }}\n // />\n // )\n // }}\n // />\n // )},\n // ),\n // this.generateFilterDropdownObj(\n // 'instructors',\n // FILTER_BY_FIELDS.instructors,\n // (autoOpen, noSlideAnimation) => {\n // const allInstructorsOption = {\n // text: 'All Instructors'\n // }\n // return (\n // {\n // const user = option.user\n // const filteredInstuctorSlugs =\n // this.props.filteredAttributes.instructors.map(\n // (instructor) => instructor.slug\n // )\n\n // if (user) {\n // return (\n // {\n // if (filteredInstuctorSlugs.includes(option.slug)) {\n // this.removeFilter('instructors', option.slug)\n // } else {\n // this.applyFilter('instructors', option)\n // }\n // }}\n // />\n // )\n // } else {\n // // All instructors selected\n // return (\n // {\n // class_series_finder_filter_event(\n // 'instructors',\n // 'all instructors'\n // )\n // this.props.clearFilter('instructors')\n // this.props.loadPlanEntries(this.pushWindowState)\n // }}\n // />\n // )\n // }\n // }}\n // />\n // )\n // }\n // ),\n // this.generateFilterDropdownObj(\n // 'styles',\n // FILTER_BY_FIELDS.styles, //slug\n // (autoOpen, noSlideAnimation) => (\n // {\n // const root = {\n // title: parent ? parent.title : option.title,\n // slug: parent ? parent.slug : option.slug\n // }\n // const isRoot = !this.props.withSubcategories || !parent\n // const alreadyFiltered = isCategoryAlreadyFiltered(\n // this.props.filteredAttributes.styles,\n // root,\n // isRoot,\n // option\n // )\n // return (\n // {\n // if (alreadyFiltered) {\n // this.removeFilter('styles', option.slug, {\n // rootSlug: root.slug,\n // isRoot\n // })\n // } else {\n // this.applyFilter('styles', option, {\n // root,\n // isRoot\n // })\n // }\n // }}\n // />\n // )\n // }}\n // />\n // )\n // ),\n\n // this.generateFilterDropdownObj(\n // 'difficulties',\n // null,\n // (autoOpen, noSlideAnimation) => (\n // {\n // const filteredDifficulties =\n // this.props.filteredAttributes.difficulties\n // return (\n // {\n // if (filteredDifficulties.includes(option)) {\n // this.removeFilter('difficulties', option)\n // } else {\n // this.applyFilter('difficulties', option)\n // }\n // }}\n // />\n // )\n // }}\n // parentLabel='Difficulty'\n // />\n // ),\n // 'Difficulty'\n // ),\n // this.generateFilterDropdownObj(\n // 'intensities',\n // FILTER_BY_FIELDS.intensities,\n // (autoOpen, noSlideAnimation) => (\n // {\n // const filteredIntensities =\n // this.props.filteredAttributes.intensities.map(\n // (intensity) => intensity.level\n // )\n // return (\n // {\n // if (filteredIntensities.includes(option.level)) {\n // this.removeFilter('intensities', option.level)\n // } else {\n // this.applyFilter('intensities', option)\n // }\n // }}\n // renderDecorator={() => (\n // \n // \n // ?\n // \n // }\n // >\n // {option.caption}\n // \n // \n // )}\n // />\n // )\n // }}\n // parentLabel='Intensity'\n // />\n // ),\n // 'Intensity'\n // )\n // )\n // }\n\n // openNextDropdown() {\n // if (this.state.toBeOpenDropdown) {\n // const activeDropdown = this.state.toBeOpenDropdown\n // this.setState({\n // activeDropdown,\n // toBeOpenDropdown: ''\n // })\n // }\n // }\n\n /**\n * Generates an object for the Filter components\n * @param {Name of filter section. This will be used as the display label if none is given} label\n * @param {Field to filter by} filterByField\n * @param {Function returning the component that will be displayed in the dropdown} renderDropdownContent\n * @param {Additional CSS classes to pass to dropdown element} additionalDropdownClasses\n * @param {Array of 'filterByFields' representing what the user has already filtered} filtered\n * @param {Label displayed in view} displayedLabel\n */\n // generateFilterDropdownObj(\n // label,\n // filterByField,\n // renderDropdownContent,\n // displayedLabel,\n // additionalDropdownClasses\n // ) {\n // if (\n // label !== 'instructors' ||\n // (label === 'instructors' && !this.instructorFilterExcluded())\n // ) {\n // return {\n // [`${label}`]: {\n // displayedLabel,\n // additionalDropdownClasses,\n // renderDropdownContent,\n // filterByField,\n // onClickFilterDropdown: (value) => {\n // if (\n // this.state.activeDropdown !== '' &&\n // this.state.activeDropdown !== value\n // ) {\n // this.setState({\n // toBeOpenDropdown: value,\n // activeDropdown: ''\n // })\n // } else {\n // const activeValue =\n // this.state.activeDropdown === value ? '' : value\n // this.setState({ activeDropdown: activeValue })\n // }\n // }\n // }\n // }\n // }\n // }\n\n // applyFilter(filterSection, filter, options) {\n // const maxRange = filter.max || this.props.dropdownOptions.duration.max\n // const excludeFilterEvent =\n // filterSection === 'duration' &&\n // filter?.min === this.props.dropdownOptions.duration.min &&\n // maxRange === this.props.dropdownOptions.duration.max\n // const durationFilter = {\n // min: filter.min,\n // max: maxRange\n // }\n // let filterValue = ''\n\n // if (this.props.filteredAttributes) {\n // switch (filterSection) {\n // case 'instructors':\n // filterValue = filter?.user?.name\n // break\n // case 'styles':\n // filterValue = filter?.slug\n // break\n // case 'intensities':\n // filterValue = String(filter?.level)\n // break\n // case 'duration':\n // filterValue = `${durationFilter.min}-${durationFilter.max}`\n // break\n // case 'difficulties':\n // filterValue = filter\n // break\n // case 'yoga': //add other categories also here\n // filterValue = filter?.slug\n // break\n // default:\n // filterValue = filter\n // break\n // }\n // }\n // !excludeFilterEvent &&\n // class_series_finder_filter_event(filterSection, filterValue, options)\n // this.props.addFilter(filterSection, filter, options)\n // this.props.loadPlanEntries(this.pushWindowState)\n // }\n\n removeFilter(filterSection, filter, options) {\n const filterOptions = {\n yoga: { filterByField: 'slug' },\n fitness: { filterByField: 'slug' },\n mindfulness: { filterByField: 'slug' },\n wellness: { filterByField: 'slug' },\n skills: { filterByField: 'slug' },\n duration: { filterByField: null },\n difficulties: { filterByField: null },\n focus_area: { filterByField: null },\n equipment: { filterByField: null },\n intensities: { filterByField: 'level' },\n instructors: { filterByField: 'slug' }\n }\n if (filterSection === 'duration') {\n this.setState({\n displayedDurationMinMax: {\n min: this.props.dropdownOptions.duration.min\n }\n })\n }\n const filterByField = filterOptions[filterSection].filterByField\n this.props.removeFilter(filterSection, filter, filterByField, options)\n this.props.loadPlanEntries(this.pushWindowState)\n }\n\n clearAllFilters() {\n this.props.clearAllFilters()\n this.props.loadPlanEntries(this.pushWindowState)\n }\n\n reorderEntries(order) {\n this.props.changeOrder(order)\n this.props.loadPlanEntries(this.pushWindowState)\n }\n\n instructorFilterExcluded() {\n return this.props.dropdownOptions.instructors.length < 2\n }\n\n render() {\n const filteredLabels = getFilteredItemLabels({\n filteredAttributes: this.props.filteredAttributes,\n excludedFilters: this.excludedFilters || [],\n categoryRelationships: this.props.categoryRelationships\n })\n return (\n <>\n \n {this.props.displayedPlaylist ? (\n {\n window.location.href = `${window.location.origin}/my/playlists`\n }}\n onDuplicated={() => {\n window.location.href = `${window.location.origin}/my/playlists`\n }}\n includePlaylistAddedDates\n />\n ) : null}\n \n )\n }\n}\n\nShowPageContent.propTypes = {\n displayedPlaylist: PropTypes.object,\n setDisplayedPlaylist: PropTypes.func,\n signedIn: PropTypes.bool,\n userIsAdmin: PropTypes.bool,\n userIsAuthor: PropTypes.bool\n}\n\nconst mapStateToProps = state => {\n return {\n displayedPlaylist: getDisplayedPlaylist(state)\n }\n}\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n setDisplayedPlaylist: () => {\n dispatch(setDisplayedPlaylist(ownProps.playlist))\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ShowPageContent)\n","import { createSelector } from 'reselect'\nimport { createSelector as ormCreateSelector } from 'redux-orm'\nimport orm from '../../models/models'\n\nexport const getSubcategories = createSelector(\n state => state.orm,\n ormCreateSelector(orm, session => {\n return session.PlanSubcategory.all().toModelArray()\n })\n)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\nimport {\n insertPlanCategories,\n setSelectedCategorySlug\n} from '../../../../redux/actions/planCategories'\nimport {\n setProductOrder,\n addCategoryOption,\n addSubcategoryFilter,\n replaceProductFilters,\n applyCategoryFilter,\n // setDifficultyFilter,\n // setIntensityFilter,\n addSeriesFilter,\n setDefaultFilter\n} from '../../../../redux/actions/products/filters'\nimport { loadProductsPage } from '../../../../redux/actions/products/products'\nimport { getSubcategories } from '../../../../redux/selectors/planSubcategories'\nimport {\n getCategories,\n getLastSelectedCategory\n} from '../../../../redux/selectors/planCategories'\n\nimport ProductsDisplay from '../../../productsComponents/productsDisplay/ProductsDisplay'\nimport ExploreNav from '../exploreNav/ExploreNav'\nimport GreyPageHeader from '../../../GreyPageHeader'\nimport CategoryBanner from '../exploreNav/CategoryBanner'\nimport { pageTitle, pageCaption } from '../ExploreHeaders'\nimport { getCategoryObj, getSubcategoryObj } from './exploreFilterHelpers'\nimport SeriesFinderNewFilteredList from '../exploreNav/SeriesFinderNewFilteredList'\n\nclass ExploreFilterWrapper extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n layout: window.localStorage.getItem('layout'),\n mobile: window.innerWidth < 768\n }\n\n this.pushWindowState = this.pushWindowState.bind(this)\n this.initializePage = this.initializePage.bind(this)\n\n props.insertPlanCategoriesToTree()\n props.setSelectedCategorySlug()\n this.initializePage()\n }\n\n componentDidMount() {\n \n window.onresize = () => {\n const windowWidth = window.innerWidth\n if (windowWidth < 768 && !this.state.mobile) {\n this.setState({ mobile: true })\n } else if (windowWidth >= 768 && this.state.mobile) {\n this.setState({ mobile: false })\n }\n }\n\n window.onpopstate = (e) => {\n if (e.state) {\n const filters = e.state\n this.props.replaceProductFilters(filters)\n this.props.loadProductPage()\n }\n }\n }\n\n initializePage() {\n if (this.props.defaultValue) {\n this.props.setDefaultFilter({\n instructors: this.props.filteredInstructors || []\n })\n }\n this.props.setProductOrder(this.props.defaultOrder)\n\n this.props.categoryOptions.forEach((category) => {\n this.props.addCategoryOption(category.slug)\n })\n\n if (!this.props.defaultValue) {\n const params = new URLSearchParams(window.location.search)\n params.forEach((value, key) => {\n if (\n ['focus_area', 'equipment', 'difficulties', 'intensities'].includes(key)\n ) {\n const FilterArray = value.split(',')\n FilterArray.forEach((category) => {\n this.props.addSeriesFilter(key, category)\n })\n } else if (key === 'instructors') {\n const FilterArray = value.split(',')\n FilterArray.forEach((category) => {\n const instructor = this.props.instructorOptions?.find(\n (item) => item.slug === category\n )\n this.props.addSeriesFilter('instructors', instructor)\n })\n } else if (key === 'categories') {\n const categoryArray = value.split(',')\n categoryArray.forEach((category) => {\n const slugInfo = category.split('_')\n const isASubcategory = slugInfo.length > 1\n\n const slug = isASubcategory ? slugInfo[1] : slugInfo[0]\n\n if (isASubcategory) {\n const parentSlug = slugInfo[0]\n const parentCategoryObj = getCategoryObj(\n this.props.categoryOptions,\n parentSlug\n )\n const subcategory = getSubcategoryObj(\n parentCategoryObj.subcategories,\n category\n )\n const title = subcategory.title\n this.props.addSubcategoryFilter(parentSlug, {\n slug: category,\n title\n })\n } else {\n this.props.applyCategoryFilter(slug)\n }\n })\n }\n })\n }\n\n \n\n // this.props.setDifficultyFilter(this.props.difficulty)\n // this.props.setIntensityFilter(this.props.intensity)\n\n this.props.loadProductPage(true, () => {\n window.history.replaceState(\n this.props.filters,\n null,\n this.props.defaultValue ? `${this.props.baseUrl}?${this.props.filterUrl}`\n : `${this.props.baseUrl}/filter?${this.props.filterUrl}`\n )\n })\n }\n\n renderPageBanner() {\n const lastFilteredCategory = this.props.lastSelectedCategory\n\n if (lastFilteredCategory && this.state.mobile) {\n return \n {this.renderPageBanner()}\n {window.innerWidth > 1024 ? (\n \n )\n }\n}\n\nExploreFilterWrapper.propTypes = {\n baseUrl: PropTypes.string,\n defaultOrder: PropTypes.string,\n categoryOptions: PropTypes.array\n}\n\nconst mapStateToProps = (state) => ({\n categories: getCategories(state),\n filterUrl: state.ui.products.filterUrl,\n filters: state.ui.products.filters,\n total: parseInt(state.ui.products.total),\n subcategoryOptions: getSubcategories(state),\n lastSelectedCategory: getLastSelectedCategory(state)\n})\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n addCategoryOption: (slug) => {\n dispatch(addCategoryOption(slug))\n },\n addSubcategoryFilter: (parentCategory, subcategory) => {\n dispatch(addSubcategoryFilter(parentCategory, subcategory))\n },\n insertPlanCategoriesToTree: () => {\n dispatch(insertPlanCategories(ownProps.categoryOptions))\n },\n setSelectedCategorySlug: () => {\n dispatch(setSelectedCategorySlug(ownProps.prefilteredCategories[0]))\n },\n setProductOrder: (order) => {\n dispatch(setProductOrder(order))\n },\n loadProductPage: (reloadAll, callback) => {\n dispatch(loadProductsPage(reloadAll, callback))\n },\n replaceProductFilters: (newFilters) => {\n dispatch(replaceProductFilters(newFilters))\n },\n applyCategoryFilter: (category) => {\n dispatch(applyCategoryFilter(category))\n },\n addSeriesFilter: (parentCategory, filter) => {\n dispatch(addSeriesFilter(parentCategory, filter))\n },\n setDefaultFilter: (value) => {\n dispatch(setDefaultFilter(value))\n }\n // setDifficultyFilter: (difficulty) => {\n // dispatch(setDifficultyFilter(difficulty))\n // },\n // setIntensityFilter: (intensity) => {\n // dispatch(setIntensityFilter(intensity))\n // }\n }\n}\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(ExploreFilterWrapper)\n","import { createSelector } from 'reselect'\nimport { createSelector as ormCreateSelector } from 'redux-orm'\nimport orm from '../../models/models'\n\nexport const featuredProducts = createSelector(\n state => state.orm,\n ormCreateSelector(orm, session => {\n return session.FeaturedProduct.all().toModelArray()\n })\n)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport ExploreCarousels from './ExploreCarousels'\nimport { connect } from 'react-redux'\nimport { insertPlanCategories } from '../../../../redux/actions/planCategories'\nimport { setFeaturedProducts } from '../../../../redux/actions/featuredProduct'\nimport { featuredProducts } from '../../../../redux/selectors/featuredProducts'\nimport FeaturedProductsCarousel from '../../../featuredProducts/FeaturedProductsCarousel'\nimport CategoryFilters from '../exploreNav/CategoryFilters'\nimport FilterMetaLayout from '../../../filtersRow/FilterMetaLayout'\nimport GreyPageHeader from '../../../GreyPageHeader'\nimport { pageTitle, pageCaption } from '../ExploreHeaders'\n\nimport './ExploreCarousels.scss'\n\nclass ExploreCarouselPage extends React.Component {\n constructor (props) {\n super(props)\n\n props.setupCategories()\n props.setFeaturedProducts()\n\n this.buildSeriesPageFilterOptions = this.buildSeriesPageFilterOptions.bind(\n this\n )\n\n this.state = {\n loaded: false\n }\n }\n\n componentDidMount () {\n window.onload = () => {\n this.setState({ loaded: true })\n }\n }\n\n buildSeriesPageFilterOptions () {\n let filterObj = {}\n this.props.categories.forEach(category => {\n filterObj[category.title] = {\n onClickFilterDropdown: value => {\n window.location.href = `${\n this.props.baseUrl\n }/filter?categories=${value}`\n },\n hasDropdown: false,\n filterValue: category.slug\n }\n })\n return filterObj\n }\n\n render () {\n const filterOptions = this.buildSeriesPageFilterOptions()\n\n return (\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 {this.props.children}\n \n )\n }\n}\n\nMasonryLayout.propTypes = {\n children: PropTypes.node\n}\n\nexport default MasonryLayout\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 {autoplayText}\n \n
\n \n )\n }\n}\n\nvjsComponent.registerComponent('Autoplay', Autoplay)\n\nexport default Autoplay\n","import ReactDOM from 'react-dom'\nimport videojs from 'video.js'\nimport React from 'react'\nimport PlayIcon from '../../../../assets/codicons/play-80'\n\nconst vjsComponent = videojs.getComponent('Component')\n\nclass PlayButton extends vjsComponent {\n constructor(player, options) {\n super(player, options)\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.createPlayButton(), this.el())\n }\n\n createPlayButton() {\n return (\n \n \n )\n }\n}\n\nvjsComponent.registerComponent('PlayButton', PlayButton)\n\nexport default PlayButton\n","import videojs from 'video.js'\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport VideoListMenu from '../VideosListMenu'\n\nconst vjsComponent = videojs.getComponent('Component')\n\nclass VideoList extends vjsComponent {\n constructor (player, options) {\n super(player, options)\n\n this.options = options\n\n player.ready(() => {\n this.mountElement()\n })\n }\n\n mountElement () {\n ReactDOM.render(\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 0)\n ? 'block'\n : 'none'\n }}\n >\n \n \n \n)\n\nErrorSummary.propTypes = {\n children: PropTypes.any\n}\n\nexport default ErrorSummary\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nclass Field extends React.Component {\n constructor (props) {\n super(props)\n\n const floatLabel = !(this.props.value && this.props.value.length > 0)\n this.state = {\n isEmpty: floatLabel,\n labelFloated: !floatLabel\n }\n\n this.handleBlur = this.handleBlur.bind(this)\n this.handleChange = this.handleChange.bind(this)\n this.handleFocus = this.handleFocus.bind(this)\n }\n\n handleBlur () {\n this.setState({ labelFloated: !this.state.isEmpty })\n }\n\n handleChange (event) {\n if (event.elementType) {\n // Stripe Elements\n this.setState({ isEmpty: event.empty })\n } else {\n this.setState({ isEmpty: !(event.target && event.target.value) })\n }\n\n if (this.props.onChange) this.props.onChange(event)\n }\n\n handleFocus () {\n this.setState({ labelFloated: true })\n }\n\n render () {\n const {\n as: Component,\n label,\n error,\n htmlFor,\n className: classNameProp,\n onChange,\n ...rest\n } = this.props\n\n let className = 'Field'\n className += this.props.disabled ? ' Field--disabled' : ''\n className += this.state.labelFloated ? ' Field--labelFloated' : ''\n className += error ? ' Field--error' : ''\n className += classNameProp ? ' ' + classNameProp : ''\n\n return (\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 \n \n )\n}\n\nexport default BottomWidget\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { withRedux, withUser } from '../reduxContainer'\nimport { connect } from 'react-redux'\nimport PlanEntriesList from '../planEntryList/PlanEntriesList'\nimport { getFavorites } from '../../redux/selectors/favorite'\nimport {\n fetchFavorites,\n setFavoritesOrder,\n clearFavorites,\n favoriteRemoved,\n clearFavoritesOrder\n} from '../../redux/actions/favorite'\nimport FavoriteDeleteUndo from './FavoriteDeleteUndo'\nimport './FavoritesList.scss'\nimport EmptyState from '../EmptyState'\n\nconst FAVORITE_UNDO_FADE_OUT_TIME = 10000\n\nclass FavoritesList extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n deletedFavorite: null\n }\n\n this.fetchMoreFavorites = this.fetchMoreFavorites.bind(this)\n this.unfavorite = this.unfavorite.bind(this)\n this.hideUndoBar = this.hideUndoBar.bind(this)\n this.reorderFavorites = this.reorderFavorites.bind(this)\n }\n\n componentDidMount () {\n this.props.fetchFavorites()\n }\n\n hideUndoBar () {\n this.setState({ deletedFavorite: null })\n }\n\n fetchMoreFavorites () {\n this.props.fetchFavorites()\n }\n\n unfavorite (favoriteId) {\n const deletedFavorite = this.props.favorites\n .filter(favorite => favorite.id === favoriteId)\n .first()\n this.props.removeFavorite(favoriteId)\n this.setState({ deletedFavorite })\n\n setTimeout(() => {\n this.setState({ deletedFavorite: null })\n }, FAVORITE_UNDO_FADE_OUT_TIME)\n }\n\n generateEntriesArray () {\n return this.props.favorites.toModelArray().map(favorite => ({\n obj: favorite.planEntry,\n id: favorite.id,\n createdAt: favorite.createdAt\n }))\n }\n\n reorderFavorites (direction, field) {\n if (direction === 'DEFAULT') {\n this.props.clearFavoritesOrder()\n } else {\n this.props.setFavoritesOrder({ direction, order: field })\n }\n\n this.props.clearFavorites()\n this.props.fetchFavorites()\n }\n\n render () {\n const entries = this.generateEntriesArray()\n\n let favoritesUndoClass = 'FavoritesList__undo'\n let deleteUndo\n if (this.state.deletedFavorite) {\n favoritesUndoClass += ' FavoritesList__undo--active'\n deleteUndo = (\n \n {deleteUndo}
\n \n )\n }\n\n return {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 }\n}\n\nCancellationSurvey.propTypes = {\n questions: PropTypes.array.isRequired,\n closeCallback: PropTypes.func.isRequired\n}\n\nexport default CancellationSurvey\n","import React from 'react'\nimport { connect } from 'react-redux'\nimport { fetchPlaylists, setOrder } from '../../redux/actions/playlists'\nimport { withRedux } from '../reduxContainer'\nimport PropTypes from 'prop-types'\nimport { playlists } from '../../redux/selectors/playlists'\nimport ItemTileGrid from '../itemTile/ItemTileGrid'\nimport PlaylistTile from '../playlist/PlaylistTile'\nimport SortableList from '../sortableList/SortableList'\nimport './PlaylistGrid.scss'\n\nclass PlaylistGrid extends React.Component {\n componentDidMount() {\n if (this.props.defaultOrder) {\n this.props.setOrder(this.props.defaultOrder)\n }\n this.props.fetchPlaylists(true)\n\n window.onpopstate = (e) => {\n const order = e.state\n this.props.setOrder(order)\n this.props.fetchPlaylists(true)\n }\n }\n\n render() {\n return (\n \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
{\n if (!this.props.reloadingAll) {\n return this.props.playlists.map((playlist) => (\n \n ))\n }\n }}\n />\n \n
\n \n \n )\n}\n\nStyledHeader.propTypes = {\n user: PropTypes.shape({\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n email: PropTypes.string.isRequired,\n username: PropTypes.string.isRequired\n })\n}\n\nexport default StyledHeader\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => 1 5 1 5 \n \n {({ updateToTrack }) => {\n return (\n \n {\n this.seek('rewind', (_, infoToTrack) => {\n updateToTrack('seek', infoToTrack)\n })\n }}\n >\n {\n this.seek('forward', (_, infoToTrack) => {\n updateToTrack('seek', infoToTrack)\n })\n }}\n >\n \n )\n }}\n \n \n )\n }\n}\n\nvjsComponent.registerComponent('SeekerButtons', SeekerButtons)\n\nexport default SeekerButtons\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => \n \n )\n }\n}\n\nvjsComponent.registerComponent('NextVid', NextVid)\n\nexport default NextVid\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => \n \n )\n }\n}\n\nvjsComponent.registerComponent('PreviousVid', PreviousVid)\n\nexport default PreviousVid\n","import BaseModel from './BaseModel'\nimport { INSERT_PLAN_CATEGORIES } from '../redux/actions/planCategories'\nimport { many } from 'redux-orm'\nimport camelize from 'camelize'\n\nclass PlanCategory extends BaseModel {\n static reducer (action, PlanCategory, session) {\n switch (action.type) {\n case INSERT_PLAN_CATEGORIES:\n action.categories.forEach(category => {\n const camelizedCategoryObj = camelize(category)\n const planCategory = PlanCategory.create(camelizedCategoryObj)\n planCategory.planSubcategories.clear()\n const subcategories = category.subcategories || []\n subcategories.forEach(subcategory => {\n planCategory.planSubcategories.add(subcategory.slug)\n })\n\n if (action.includeFeaturedProducts) {\n const featuredProducts = camelizedCategoryObj.featuredProducts\n planCategory.products.clear()\n featuredProducts.forEach(product => {\n planCategory.products.add(product.id)\n session.Product.upsert(camelize(product))\n })\n }\n })\n break\n }\n }\n}\n\nPlanCategory.modelName = 'PlanCategory'\nPlanCategory.fields = {\n planSubcategories: many('PlanSubcategory', 'parentCategories'),\n products: many('Product', 'planCategory')\n}\nPlanCategory.options = {\n idAttribute: 'slug'\n}\n\nexport default PlanCategory\n","import BaseModel from './BaseModel'\nimport { INSERT_PLAN_CATEGORIES } from '../redux/actions/planCategories'\nimport camelize from 'camelize'\n\nclass PlanSubcategory extends BaseModel {\n static reducer (action, PlanSubcategory) {\n switch (action.type) {\n case INSERT_PLAN_CATEGORIES:\n action.categories.forEach(category => {\n const subcategories = category.subcategories || []\n subcategories.forEach(subcategory => {\n PlanSubcategory.upsert(camelize(subcategory))\n })\n })\n break\n }\n }\n}\n\nPlanSubcategory.modelName = 'PlanSubcategory'\n\nPlanSubcategory.options = {\n idAttribute: 'slug'\n}\n\nexport default PlanSubcategory\n","import Product from './Product'\nimport { fk } from 'redux-orm'\nimport { SET_FEATURED_PRODUCTS } from '../redux/actions/featuredProduct'\nimport camelize from 'camelize'\n\nclass FeaturedProduct extends Product {\n static reducer (action, FeaturedProduct) {\n switch (action.type) {\n case SET_FEATURED_PRODUCTS:\n const featuredProducts = action.featuredProducts\n featuredProducts.forEach(product => {\n FeaturedProduct.create(camelize(product))\n })\n break\n }\n }\n}\n\nFeaturedProduct.modelName = 'FeaturedProduct'\nFeaturedProduct.fields = {\n product: fk('Product', 'featuredProduct')\n}\n\nexport default FeaturedProduct\n","import { ORM } from 'redux-orm'\nimport Playlist from './Playlist'\nimport Product from './Product'\nimport PlanEntry from './PlanEntry'\nimport PlanCategory from './PlanCategory'\nimport PlanSubcategory from './PlanSubcategory'\nimport FeaturedProduct from './FeaturedProduct'\nimport User from './User'\nimport PlaylistFollower from './PlaylistFollower'\nimport PlaylistEntries from './PlaylistEntries'\nimport Favorite from './Favorite'\n\nexport const orm = new ORM()\norm.register(\n Favorite,\n Product,\n PlanEntry,\n Playlist,\n PlaylistEntries,\n PlaylistFollower,\n PlanCategory,\n PlanSubcategory,\n FeaturedProduct,\n User\n)\n\nexport default orm\n","import HeaderText from './HeaderText'\nimport AltHeaderText from './AltHeaderText'\nimport HeaderCTAText from './HeaderCTAText'\nimport SectionDivider from './SectionDivider'\nimport CardTitle from './CardTitle'\nimport CardSubtitle from './CardSubtitle'\n\nexport {\n HeaderText,\n AltHeaderText,\n HeaderCTAText,\n SectionDivider,\n CardTitle,\n CardSubtitle\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport './FilterRowDropdownItem.scss'\n\nconst FilterRowDropdownItem = props => {\n const itemClassName = classNames(\n ['FilterRowDropdownItem', ...props.itemClassName],\n {\n 'FilterRowDropdownItem--active': props.active,\n 'FilterRowDropdownItem--header': props.isHeader,\n 'FilterRowDropdownItem--sort--inactive':props.isSort && !props.active,\n 'FilterRowDropdownItem--sort--active':props.isSort && props.active\n\n }\n )\n\n let decorator\n if (props.renderDecorator) {\n decorator = props.renderDecorator()\n }\n\n let linkStyles = props.linkStyles\n if (props.active) {\n linkStyles = {\n ...linkStyles,\n color: props.activeLinkColor\n }\n }\n\n return (\n {\n e.preventDefault()\n props.handleItemClick()\n }}>\n \n {props.label}\n \n {decorator}
\n \n )\n}\n\nFilterRowDropdownItem.defaultProps = {\n itemClassName: [],\n linkStyles: {},\n activeLinkColor: '#000000'\n}\n\nFilterRowDropdownItem.propTypes = {\n active: PropTypes.bool,\n label: PropTypes.string,\n itemClassName: PropTypes.array,\n linkClassName: PropTypes.string,\n handleItemClick: PropTypes.func,\n renderDecorator: PropTypes.func,\n isHeader: PropTypes.bool,\n linkStyles: PropTypes.object,\n itemStyles: PropTypes.object,\n filterName: PropTypes.string\n}\n\nexport default FilterRowDropdownItem\n","module.exports = (function() { var promise = null; var JQ='undefined'!=typeof jQuery; var dfd = JQ && jQuery.Deferred(); var resolve = JQ && dfd.resolve; var reject = JQ && dfd.reject; if(document.getElementById('1920c37b897207b9b09cd41e88401ba0')) { if(JQ){ resolve(); }else{ promise = new Promise(function(resolve, reject) { resolve(); }); } } var fun=function(resolve, reject){ var script = document.createElement('script'); script.src = 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1'; script.id = '1920c37b897207b9b09cd41e88401ba0'; script.async = false; (document.head || document.body).appendChild(script); script.onload = function() { typeof resolve=='function' && resolve(); }; script.onerror = function() { typeof reject=='function' && reject(); }; }; if(JQ){ fun(resolve, reject); }else{ promise = new Promise(function(resolve, reject) { fun(resolve, reject); }); } return JQ ? dfd.promise() : Promise.all([promise]); })();"],"sourceRoot":""} })
\n \n 
\n )\n } else {\n let videoElem = (\n 
\n 
\n 
\n 
\n )\n }\n return 
\n {playIcon}\n {planEntryMeta}\n 
\n 
\n \n {entry.humanDuration}\n {props.playlistPos === idx ? (\n