\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 )\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, { createContext, useContext } from 'react'\nimport PropTypes from 'prop-types'\n\nconst EmbedContext = createContext(null)\nexport const useEmbedContext = () => useContext(EmbedContext)\n\nconst EmbedProvider = ({ children }) => {\n // Context: Android currently embeds WebViews for the /subscribe flow\n const params = new URLSearchParams(window.location.search)\n const embed = params.get('embed') === 'true'\n\n return {children}\n}\n\nEmbedProvider.propTypes = {\n children: PropTypes.node\n}\n\nexport default EmbedProvider\n","export const SET_MODAL_START = 'SET_MODAL_START'\nexport const SET_MODAL_FINISH = 'SET_MODAL_FINISH'\nexport const CLOSE_MODAL_START = 'CLOSE_MODAL_START'\nexport const CLOSE_MODAL_FINISH = 'CLOSE_MODAL_FINISH'\nexport const CHANGE_TITLE = 'CHANGE_TITLE'\n\nexport const setModalStart = (Modal, options = {}) => ({\n type: SET_MODAL_START,\n Modal,\n options\n})\n\nexport const setModalFinish = () => ({\n type: SET_MODAL_FINISH\n})\n\nexport const closeModalStart = () => ({\n type: CLOSE_MODAL_START\n})\n\nexport const closeModalFinish = () => ({\n type: CLOSE_MODAL_FINISH\n})\n\nexport const changeTitle = (title) => ({\n type: CHANGE_TITLE,\n title\n})\n","import {\n SET_MODAL_START,\n SET_MODAL_FINISH,\n CLOSE_MODAL_START,\n CLOSE_MODAL_FINISH,\n CHANGE_TITLE\n} from './actions'\n\nexport const INITIAL_STATE = {\n ModalChild: null,\n transitionSpeed: 300,\n fullWidth: true,\n onClose: null,\n showClose: true,\n prevFocus: null\n}\n\nconst reducer = (state, action) => {\n switch (action.type) {\n case SET_MODAL_START: {\n return {\n ...state,\n ...action.options,\n closeable: false,\n overlay: true,\n ModalChild: action.Modal\n }\n }\n case SET_MODAL_FINISH: {\n return {\n ...state,\n closeable: true\n }\n }\n case CLOSE_MODAL_START: {\n return {\n ...state,\n overlay: false\n }\n }\n case CLOSE_MODAL_FINISH: {\n return {\n ...INITIAL_STATE,\n prevFocus: null\n }\n }\n case CHANGE_TITLE: {\n return {\n ...state,\n title: action.title\n }\n }\n }\n}\n\nexport default reducer\n","import React, { Fragment, useRef } from 'react'\nimport ReactDOM from 'react-dom'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport { Transition } from 'react-transition-group'\n\n// We have to be explicit about our imports here to prevent circular dependencies.\nimport useOutsideClick from 'hooks/useOutsideClick'\nimport {\n Flex,\n GridItem,\n HR,\n MainContainer,\n CloseButton\n} from 'ui/bend/elements'\nimport { P } from 'ui/bend/typography'\nimport { renderPropComponent } from 'helpers'\n\nconst Overlay = styled(MainContainer)`\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n transition: background ${(props) => props.transitionSpeed}ms ease-in-out;\n z-index: 10001;\n background: ${(props) =>\n props.state === 'entered' ? 'rgba(0, 0, 0, 0.8)' : ''};\n grid-auto-rows: min-content;\n`\n\nconst ModalContainer = styled(GridItem)`\n ${(props) =>\n css({\n // padding: ['16px', '24px'],\n margin: ['', `${props.fullWidth ? '' : '0 auto'}`],\n maxWidth: props.fullWidth ? 'none' : '640px'\n })}\n max-height: calc(100vh - 16px);\n overflow-y: auto;\n flex-direction: column;\n grid-column: main-start / main-end;\n background: ${(props) => props.theme.colors.base};\n transition: transform ${(props) => props.transitionSpeed}ms ease-in-out;\n transform: ${(props) =>\n props.state === 'entered' ? 'translateY(0%)' : 'translateY(-100%)'};\n\n /* \n We need the responsiveVideo prop to appropriately size our videojs player.\n It uses a negative margin trick to maintain aspect ratio, which means that it has 0 effective width.\n Thus, we manually set our width here and also set a max-width to keep the video from overflowing on short screens (e.g. landscape phones )\n max-width is the less of vh or vw plus the calculated aspect ratio, minus 48 to give a bit of breathing room.\n I hate magic numbers too...\n */\n ${(props) =>\n props.responsiveVideo\n ? `\n max-width: calc(100vmin + calc(100vmin * 0.5625) - 48px);\n width: 100%;\n `\n : ''}\n`\nconst StyledClose = styled(CloseButton)`\n position: absolute;\n top: 16px;\n right: 16px;\n z-index: 10;\n`\nexport const ModalBody = styled(GridItem)``\n\nModalBody.defaultProps = {\n paddingLeft: '16px',\n paddingRight: '16px'\n}\n\nconst Modal = ({\n ModalChild,\n closeModal,\n fullWidth,\n overlay,\n responsiveVideo,\n showClose,\n title,\n transitionSpeed\n}) => {\n const ref = useRef()\n useOutsideClick(ref, closeModal, Boolean(ModalChild))\n\n return (\n \n {ModalChild &&\n ReactDOM.createPortal(\n \n {(state) => (\n \n \n {showClose && (\n \n )}\n {title && (\n \n
\n {title}\n
\n \n )}\n {title && }\n\n {renderPropComponent(ModalChild)}\n \n \n )}\n ,\n document.body\n )}\n \n )\n}\n\n// See ModalProvider for props descriptions.\nModal.propTypes = {\n ModalChild: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),\n closeModal: PropTypes.func.isRequired,\n fullWidth: PropTypes.bool,\n overlay: PropTypes.bool,\n responsiveVideo: PropTypes.bool,\n showClose: PropTypes.bool,\n title: PropTypes.string,\n transitionSpeed: PropTypes.number.isRequired\n}\n\nexport default Modal\n","import React, { createContext, useContext, useReducer } from 'react'\n\n// Manually import here to prevent circular dependency w/ useModal() hook.\nimport useBodyScrollLock from 'hooks/useBodyScrollLock'\nimport useKeyboardTrap_Dangerous from 'hooks/useKeyboardTrap_Dangerous'\n\nimport reducer, { INITIAL_STATE } from './reducer'\nimport {\n setModalStart,\n setModalFinish,\n closeModalStart,\n closeModalFinish,\n changeTitle\n} from './actions'\n\nimport ModalComponent, { ModalBody } from './ModalComponent'\n\nconst ModalStore = createContext(null)\nexport const useModalContext = () => useContext(ModalStore)\n\n/**\n * This ModalProvider creates a context for a Modal and exposes all children to an openModal() and closeModal() function.\n * When called, these functions will mount a new Modal to the DOM or dispose of it (open and close accordingly)\n * useModal() can ONLY be used within the context of \n *\n * @param {Node} children\n */\n\nconst ModalProvider = ({ children }) => {\n const [state, dispatch] = useReducer(reducer, INITIAL_STATE)\n const toggleBodyLock = useBodyScrollLock()\n const {\n setKeyboardTrap_Dangerous,\n clearKeyboardTrap_Dangerous\n } = useKeyboardTrap_Dangerous('modal-container') // id for modal-container defined in ModalComponent.js\n\n /**\n * A function to close a modal and clean it up from the DOM.\n */\n const closeModal = () => {\n if (state.closeable) {\n dispatch(closeModalStart())\n // Wait for overlay transition to finish before unmounting Modal and cleaning up.\n setTimeout(() => {\n // If user had a previous focus, reset focus to the element on modal close.\n if (state.prevFocus) {\n state.prevFocus.focus()\n }\n\n // Run onClose callbacks supplied to modal via options\n if (state.onClose) {\n state.onClose()\n }\n toggleBodyLock()\n clearKeyboardTrap_Dangerous()\n dispatch(closeModalFinish())\n }, state.transitionSpeed)\n }\n }\n\n /**\n * A function that creates a new Modal and mounts it to the DOM.\n *\n * @param {Component} Modal - A valid React Component or function which returns a valid React Component\n * @param {Object} options - Options for the modal.\n * @param {boolean} [options.fullWidth=true] - Should the modal take up full width\n * @param {function} [options.onClose] - onClose callback function\n * @param {boolean} [options.responsiveVideo] - Styles the modal to properly hold a responsive videojs video.\n * @param {boolean} [options.showClose=true] - Should the close button be shown or hidden\n * @param {number} [options.transitionSpeed=300] - How fast should transitions take (e.g. hide/show modal and overlay)\n * @param {string} [options.title] - An optional title for the Modal\n */\n\n const openModal = (Modal, options = {}) => {\n // set our defaults here.\n let {\n fullWidth = true,\n onClose = null,\n responsiveVideo = false,\n showClose = true,\n transitionSpeed = 300,\n title = null\n } = options\n\n // Type check the options and set to defaults if invalid types supplied.\n // We can probably refactor this out, but I'm not entirely clear on the best path forward there.\n if (onClose && typeof onClose !== 'function') {\n console.error('onClose must be a function')\n onClose = null\n }\n if (transitionSpeed && typeof transitionSpeed !== 'number') {\n console.error('transitionSpeed must be a number')\n transitionSpeed = 300\n }\n if (showClose && typeof showClose !== 'boolean') {\n console.error('showClose must be a boolean')\n showClose = true\n }\n if (fullWidth && typeof fullWidth !== 'boolean') {\n console.error('fullWidth must be a boolean')\n fullWidth = true\n }\n\n if (responsiveVideo && typeof responsiveVideo !== 'boolean') {\n console.error('responsiveVideo must be a boolean')\n fullWidth = true\n }\n\n // Get user's previous focus so we can return it after they dismiss the modal.\n const prevFocus = document.activeElement\n\n dispatch(\n setModalStart(Modal, {\n onClose,\n fullWidth,\n prevFocus,\n responsiveVideo,\n showClose,\n transitionSpeed,\n title\n })\n )\n\n // Wait for the modal to fully transition in before allowing a close, as well as locking Body scrolling, and setting keyboard trap within modal.\n // This is to prevent accidental closures from fast clicking.\n setTimeout(() => {\n dispatch(setModalFinish())\n toggleBodyLock()\n setKeyboardTrap_Dangerous()\n }, transitionSpeed)\n }\n\n const setTitle = (title) => {\n dispatch(changeTitle(title))\n }\n\n return (\n \n {/* We destructure our state into ModalComponent so we don't get a circular dependency between ModalProvider and ModalComponent */}\n {state.ModalChild && (\n \n )}\n {children}\n \n )\n}\n\nexport default ModalProvider\n","import ModalProvider from './ModalProvider'\nimport { useModalContext } from './ModalProvider'\n\nexport { useModalContext }\nexport default ModalProvider\n","import React, {\n createContext,\n useContext,\n useEffect,\n useRef,\n useState,\n useCallback\n} from 'react'\nimport {\n useMotionValue,\n useSpring,\n useTransform,\n useViewportScroll\n} from 'framer-motion'\nimport useResizeObserver from 'use-resize-observer'\n\nimport useIntersectionObserver from 'hooks/useIntersectionObserver'\nimport usePrefersReducedMotion from 'hooks/usePrefersReducedMotion'\n\nconst ParallaxContext = createContext(null)\nexport const useParallaxContext = () => useContext(ParallaxContext)\n\nconst ParallaxProvider = ({ Wrapper = 'div', children, degrees = 10 }) => {\n const reduceMotion = usePrefersReducedMotion()\n const wrapperRef = useRef()\n const columnRef = useRef()\n const { height } = useResizeObserver({ ref: wrapperRef })\n\n const [{ isIntersecting }, setNode] = useIntersectionObserver()\n const diff = useMotionValue(75)\n const { scrollY } = useViewportScroll()\n const [range, setRange] = useState({\n y: 0,\n x: 0\n })\n\n const setWrapperRef = useCallback(\n (elem) => {\n if (elem) {\n setNode(elem)\n wrapperRef.current = elem\n }\n },\n [setNode, wrapperRef]\n )\n\n /* \n When wrapper is intersecting, listen to scroll and find what percent the top of the banner is from the top of viewport.\n We do this so we can synch the parallax effect with scrolling.\n */\n useEffect(() => {\n if (wrapperRef && wrapperRef.current && scrollY && isIntersecting && diff) {\n if (!reduceMotion) {\n const heightDiff = () => {\n const top = wrapperRef.current.getBoundingClientRect().top\n const viewportHeight = window.innerHeight\n const percent = (top / viewportHeight) * 100\n diff.set(percent)\n }\n\n const unsubscribe = scrollY.onChange((y) => heightDiff(y))\n return () => unsubscribe()\n }\n }\n }, [scrollY, diff, wrapperRef, isIntersecting, reduceMotion])\n\n /* \n These are our trig functions to make sure that the columns x and y motions are relative to their heights.\n\n Y tells us how much room is below (above for reverse) the wrapper. \n This is the amount we want to move the column relative to scrolling.\n\n X is the amount that we need to move the column to compensate for its tilt.\n \n We have a right triangle formed by the tilt (theta) and the offset of Y.\n tan(deg) = x / y --> x = tan(deg) * y\n */\n useEffect(() => {\n if (\n height &&\n wrapperRef.current &&\n columnRef.current\n ) {\n /* \n This gives us the distance needed to travel to get to the end of each column.\n Note that the top half (or bottom for reversed) will just about NEVER be displayed.\n */\n const colHeight = columnRef.current.getBoundingClientRect().height\n const wrapperHeight = wrapperRef.current.getBoundingClientRect().height\n const y = (colHeight - wrapperHeight) / 2\n\n // convert degrees to radians. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan\n const x = Math.tan((degrees * Math.PI) / 180) * y\n\n setRange({\n y,\n x\n })\n }\n }, [degrees, height, wrapperRef, columnRef, setRange])\n\n /*\n We create two transforms for each axis and for each direction.\n Child components use these to determine how they should move.\n */\n\n const yTransform = useTransform(diff, [100, -100], [0, -range.y])\n const y = useSpring(yTransform, { stiffness: 30, mass: 0.3, damping: 7.5 })\n const xTransform = useTransform(diff, [100, -100], [0, range.x])\n const x = useSpring(xTransform, { stiffness: 30, mass: 0.3, damping: 7.5 })\n\n const yReverseTransform = useTransform(diff, [100, -100], [0, range.y])\n const yReverse = useSpring(yReverseTransform, {\n stiffness: 30,\n mass: 0.3,\n damping: 7.5\n })\n const xReverseTransform = useTransform(diff, [100, -100], [0, -range.x])\n const xReverse = useSpring(xReverseTransform, {\n stiffness: 30,\n mass: 0.3,\n damping: 7.5\n })\n\n return (\n \n \n {React.Children.map(children, (elem, index) => {\n if (index === 0) return React.cloneElement(elem, { ref: columnRef })\n return elem\n })}\n \n \n )\n}\n\nexport default ParallaxProvider\n","export const INIT_STATE = 'INIT_STATE'\nexport const SET_PLANS = 'SET_PLANS'\nexport const SET_PROMO_CODE = 'SET_PROMO_CODE'\nexport const SET_SELECTED_PLAN = 'SET_SELECTED_PLAN'\nexport const SET_SUCCESSFUL_SUBMIT = 'SET_SUCCESSFUL_SUBMIT'\n\nexport const initState = (initialState) => ({\n type: INIT_STATE,\n payload: initialState\n})\n\nexport const setPlans = (plans) => ({\n type: SET_PLANS,\n payload: plans\n})\n\nexport const setPromoCode = ({ promoCode, plans }) => ({\n type: SET_PROMO_CODE,\n payload: {\n promoCode,\n plans\n }\n})\n\nexport const setSelectedPlan = (plan) => ({\n type: SET_SELECTED_PLAN,\n payload: plan\n})\n\nexport const setSuccessfulSubmit = (bool) => ({\n type: SET_SUCCESSFUL_SUBMIT,\n payload: bool\n})\n","import * as Yup from 'yup'\nimport { axios } from 'api'\n\nimport {\n setPlans,\n setPromoCode,\n setSelectedPlan,\n setSuccessfulSubmit\n} from '../actions'\n\n// We export findPlan so it can be used in the reducer.\nexport const findPlan = (plans, id) => plans.find((plan) => plan.id == id)\nexport const findMWEPlan = (plans, mweCurrentFrequency) =>\n plans.find((plan) => plan.frequency == mweCurrentFrequency)\n\nconst initializeMembership = async (\n dispatch,\n {\n forUpdate = false,\n successfulSubmit = false,\n getPlansURL = '/membership_plans',\n handlePromoCodeFail = () => {},\n promoCode = '',\n selectedPlanId = 'yearly',\n isMwe = false,\n mweCurrentFrequency = 'yearly'\n }\n) => {\n let plans, defaultPlans, selectedPlan, selectedPlanError, loadError, mweData\n\n const getPlans = async (params) => {\n const res = await axios.get(getPlansURL, { params })\n\n if (res.status === 204) {\n return []\n }\n\n if (res && res.data) {\n return res.data\n }\n }\n\n // Get the default Plans\n try {\n if (isMwe) {\n const res = await getPlans()\n if (res) {\n mweData = res\n defaultPlans = res.plans\n }\n } else {\n const res = await getPlans({ for_update: forUpdate })\n if (res) {\n defaultPlans = res\n }\n }\n } catch (error) {\n if (!error.message) {\n throw Error('There was a problem retrieving default plans')\n } else {\n throw error\n }\n }\n\n // If there is a promoCode passed through, check for the promoCode plans.\n // If there is a promoCode error, we run passed through callback\n if (promoCode) {\n try {\n const promoPlans = await getPlans({\n for_update: forUpdate,\n promo_code: promoCode,\n verify: true\n })\n if (promoPlans) {\n plans = promoPlans\n }\n } catch (error) {\n if (error && error.response && error.response.status === 412) {\n if (typeof handlePromoCodeFail === 'function') {\n handlePromoCodeFail()\n } else {\n throw Error(\n 'Please provide a valid function for handlePromoCodeFail()'\n )\n }\n promoCode = ''\n }\n }\n }\n\n // If the promoCode didn't load any plans, we need to set the default plans now.\n if (!plans) {\n plans = defaultPlans\n }\n\n // Once plans are set, either default or promo, we then retrieve our selectedPlan object.\n // Only run if selectedPlanId is set (pass null to have no plan pre-selected).\n if (isMwe) {\n selectedPlan = findMWEPlan(plans, mweCurrentFrequency)\n } else if (plans && selectedPlanId) {\n selectedPlan = findPlan(plans, selectedPlanId)\n if (promoCode && !selectedPlan.couponApplies) {\n // alert user if there's a discrepency between the promo code and selected plan.\n selectedPlanError = 'This promo code does not apply to the selected plan.'\n }\n }\n\n // Default to the first plan if we can't find the plan that we think should be selected.\n if (!selectedPlan) {\n selectedPlan = plans[0]\n }\n\n // We use state and values so we can easily distinguish between the two versions:\n // state === a promoCode that has been verified and applied\n // values === an ephemeral promoCode container for entering a promoCode within the form.\n return {\n type: 'membership',\n loadError,\n state: {\n defaultPlans,\n plans,\n selectedPlan,\n selectedPlanError,\n promoCode,\n forUpdate,\n successfulSubmit,\n mweData,\n isMwe\n },\n values: {\n selectedPlan: selectedPlan && selectedPlan.id,\n selectedPlanSet: false,\n promoCodeSet: Boolean(promoCode),\n promoCode\n },\n validators: {\n selectedPlan: Yup.string().required(),\n selectedPlanSet: Yup.boolean(),\n promoCodeSet: Yup.boolean(),\n promoCode: Yup.string().when('promoCodeSet', {\n is: true,\n then: Yup.string(),\n otherwise: Yup.string().max(0, 'This promo code cannot be applied.')\n })\n },\n actions: {\n findPlan,\n selectPlan: (plan) => dispatch(setSelectedPlan(plan)),\n refreshPlans: async () => {\n // will refresh the plans available to a user.\n try {\n const plans = await getPlans({ for_update: forUpdate })\n if (plans) {\n dispatch(setPlans(plans))\n return plans\n }\n } catch (e) {\n // There are no plans available for update.\n dispatch(setPlans())\n }\n },\n setPromoCode: async (promoCode) => {\n // Check if a promoCode applies to any plans. If so, set the promoCode and return the plans.\n // If setPromoCode() is given no promoCode, it will fetch default plans and clear any state.membership.promoCode.\n // If there is any error with getting plans, it will clear out promoCode state, reset plans to default, and bubble an error to the action caller.\n try {\n const plans = await getPlans({\n for_update: forUpdate,\n promo_code: promoCode,\n verify: promoCode && true\n })\n\n if (plans) {\n dispatch(setPromoCode({ promoCode, plans }))\n return plans\n }\n } catch (e) {\n // We were unable to apply the promo code (usually because of 412, invalid code).\n // Set state promo code to blank and throw an error.\n dispatch(setPromoCode({ promoCode: '' }))\n throw Error('This promo code cannot be applied.')\n }\n },\n handleSubmit: async ({ state, checkout = false, values }) => {\n try {\n let res\n if (forUpdate) {\n res = await axios.put(`/users/me/membership/stripe`, {\n plan_id: values.selectedPlan,\n checkout,\n cancel_path: window.location.pathname\n })\n } else {\n res = await axios.post(`/users/me/membership/stripe`, {\n coupon_code: state.membership.promoCode,\n plan: values.selectedPlan,\n idempotency_key: state.idempotencyKey,\n checkout,\n cancel_path: window.location.pathname,\n reactivate: values.reactivate || false,\n country: values.country\n })\n }\n if (res) {\n dispatch(setSuccessfulSubmit(true))\n return res\n }\n } catch (error) {\n if (\n error.response &&\n error.response.data &&\n error.response.data.error\n ) {\n let message = error.response.data.error\n if (!message.includes('support@alomoves.com')) {\n message += ' Please contact support@alomoves.com for assistance.'\n }\n throw Error(message)\n } else {\n throw Error(\n 'There was an unknown error processing your request. Please contact support@alomoves.com'\n )\n }\n }\n }\n }\n }\n}\n\nexport default initializeMembership\n","import * as Yup from 'yup'\nimport { axios } from 'api'\n\nconst initializeRedemption = (dispatch, { offer, redemptionCode }) => ({\n type: 'redemption',\n loadError: null,\n state: {\n ...offer\n },\n values: {\n redemptionCode: redemptionCode || '',\n redemptionCodeSet: !!redemptionCode\n },\n validators: {\n redemptionCodeSet: Yup.boolean(),\n redemptionCode: Yup.string().required(\n 'Please enter a valid redemption code'\n )\n },\n actions: {\n checkOfferCode: async ({ values, state }) => {\n try {\n // Ruby expects the params to be in snake_case, so here we are.\n const res = await axios.get(\n `redemption_offers/${\n state.redemption.slug\n }/codes/${values.redemptionCode.trim()}`\n )\n if (res) {\n return res // return res if succesful\n }\n } catch (error) {\n throw {\n field: 'redemptionCode',\n message:\n 'That redemption code does not exist or has already been claimed.'\n }\n }\n }\n }\n})\n\nexport default initializeRedemption\n","import * as Yup from 'yup'\nimport { axios } from 'api'\nimport {\n lowercaseCharacterRegex,\n numberCharacterRegex,\n uppercaseCharacterRegex\n} from 'components_v2/Subscribe/utils'\n\nconst initializeUser = (dispatch, { country }) => {\n return {\n type: 'user',\n loadError: null,\n values: {\n firstName: '',\n lastName: '',\n email: '',\n password: '',\n consent_marketing_email: country == 'US' ? true : false,\n country: country || null\n },\n validators: {\n firstName: Yup.string()\n .required('Please enter your first name')\n .max(50, 'Please use less than 50 characters'),\n lastName: Yup.string()\n .required('Please enter your last name')\n .max(50, 'Please use less than 50 characters'),\n email: Yup.string()\n .email('Please use a valid email address')\n .required('Please enter your email address'),\n password: Yup.string()\n .required('Please enter your password')\n .min(8, 'Password must be at least 8 characters')\n .matches(\n lowercaseCharacterRegex,\n 'Password must include at least 1 lowercase letter'\n )\n .matches(\n uppercaseCharacterRegex,\n 'Password must include at least 1 uppercase letter'\n )\n .matches(\n numberCharacterRegex,\n 'Password must include at least 1 number'\n ),\n consent_marketing_email: Yup.boolean()\n },\n actions: {\n handleSubmit: async ({ values, setErrors }) => {\n try {\n // Ruby expects the params to be in snake_case, so here we are.\n const res = await axios.post('/users', {\n first_name: values.firstName,\n last_name: values.lastName,\n email: values.email,\n password: values.password,\n password_confirmation: values.password,\n consent_marketing_email: values.consent_marketing_email,\n country: values.country,\n offer_slug: values?.offerslug\n })\n if (res.status === 200) {\n return res // return res if succesful\n }\n } catch (err) {\n if (err.response && err.response.data && err.response.data.errors) {\n // we need to use setErrors, as error.response.data.errors can be an array, and we need to map it to fields correctly.\n const errors = err.response.data.errors\n setErrors(errors)\n } else {\n throw Error(\n 'We apologize, but there has been a problem creating your account. Please try again or contact us at support@alomoves.com for assistance.'\n )\n }\n }\n }\n }\n }\n}\n\nexport default initializeUser\n","import { buildYupValidator } from 'helpers'\n\nconst SINGLE_DROPDOWN = 'single_dropdown'\nconst fieldTypes = { SINGLE_DROPDOWN }\n\nconst customFieldsInitializer = (fields) => {\n const res = {\n type: 'customFields',\n loadError: null,\n values: {},\n validators: {},\n state: {\n fieldNames: [],\n fieldTypes\n },\n actions: {}\n }\n\n fields.forEach((field) => {\n if (!field.validationType) {\n throw new Error('Every custom field must include a validator.')\n }\n\n if (!Object.values(fieldTypes).includes(field.inputComponent)) {\n throw new Error(`${field.inputComponent} is not a valid field type.`)\n }\n\n // Add the field's values and default value to our values object for Formik to consume.\n res.values[field.fieldName] = field.defaultValue || ''\n\n // We put the fieldNames in our customFields state so we can dynamically create our PUT object.\n res.state.fieldNames.push(field.fieldName)\n\n const fieldValidator = buildYupValidator({\n validationType: field.validationType,\n validationTypeError: field.validationTypeError,\n validations: field.validations\n })\n\n res.validators = {\n ...res.validators,\n [field.fieldName]: fieldValidator\n }\n })\n\n return res\n}\n\nexport default customFieldsInitializer\n","import membership from './membership'\nimport redemption from './redemption'\nimport user from './user'\nimport customFieldsInitializer from './customFields'\n\nconst initializers = {\n membership,\n redemption,\n user\n}\n\nexport { customFieldsInitializer }\n\nexport default initializers\n","import initializers, { customFieldsInitializer } from './initializers'\nimport { initState } from './actions'\n\nconst initializer = async ({ dispatch, forms, options }) => {\n // This will give us access to the forms used to instantiate the Subscribe Engine, helpful for conditional submissions.\n let initialState = {\n forms\n }\n\n // Provide a top-level error handler that hooks into formik and sorts out errors accordingly.\n let actions = {\n handleError: (error, { setStatus, setFieldError }) => {\n if (error.response && error.response.data && error.response.data.error) {\n setStatus(error.response.data.error)\n } else if (error.field) {\n setFieldError(error.field, error.message)\n } else if (error.message) {\n setStatus(error.message)\n } else {\n setStatus(error)\n }\n }\n }\n\n // We iterate through the forms array and hydrate our values by creating composite objects.\n let initialValues, validators, loadError\n\n try {\n // Iterate through initializer functions to recieve their promises (some have API calls in init -- e.g. payment receives card info)\n const initializerPromises = forms.map((form) => {\n if (form === 'customFields') {\n // If a custom field is provided, we must use the options.customFields.fields array to construct the object.\n // This will allow the API or consumer to construct a novel set of values and validators on the fly.\n // We may want to abstract this even more so that the consumer/API can request multiple rounds of custom fields, but that's a tomorrow problem (sorry future Dev).\n if (\n options.offer &&\n options.offer.customFields &&\n options.offer.customFields.fields\n ) {\n return customFieldsInitializer(options.offer.customFields.fields)\n } else {\n throw new Error(\n 'You must supply a fields for custom fields in the form of options.customFields.fields.'\n )\n }\n } else if (typeof initializers[form] === 'function') {\n return initializers[form](dispatch, { ...options })\n } else {\n return {} // maybe turn into error throw?\n }\n })\n\n // Resolve all of our initializer promises.\n const resolvedInitializers = await Promise.all(initializerPromises)\n\n // Iterate over resolved promises and extract the returned values from each one.\n resolvedInitializers.forEach((res) => {\n if (res.values) initialValues = { ...initialValues, ...res.values }\n if (res.state) initialState = { ...initialState, [res.type]: res.state }\n if (res.validators)\n validators = { ...validators, [res.type]: res.validators }\n if (res.actions) actions = { ...actions, [res.type]: res.actions }\n if (res.loadError) loadError = res.loadError\n })\n\n if (initialState) {\n dispatch(initState(initialState))\n }\n } catch (error) {\n if (error.message) {\n loadError = error.message\n } else {\n loadError = 'Something went wrong with the Subscribe Engine.'\n }\n }\n\n return { actions, initialValues, validators, loadError }\n}\n\nexport default initializer\n","import {\n INIT_STATE,\n SET_PLANS,\n SET_SELECTED_PLAN,\n SET_PROMO_CODE,\n SET_SUCCESSFUL_SUBMIT\n} from './actions'\n\nimport { findPlan } from './initializers/membership'\n\nconst reducer = (state, action) => {\n switch (action.type) {\n case INIT_STATE:\n return { ...state, ...action.payload }\n case SET_PLANS:\n return {\n ...state,\n membership: {\n ...state.membership,\n plans: action.payload\n }\n }\n case SET_PROMO_CODE: {\n let { plans, promoCode } = action.payload\n let selectedPlanError = null\n let selectedPlan = state.membership.selectedPlan\n\n if (promoCode && plans) {\n selectedPlan = findPlan(plans, selectedPlan.id)\n\n if (!selectedPlan.couponApplies) {\n selectedPlan = plans.find((plan) => plan.couponApplies)\n if (!selectedPlan) {\n // There is an error somewhere between the promo-code and the couponApplies property.\n // Gracefully fall back to first plan in array and alert user.\n selectedPlan = plans[0]\n selectedPlanError =\n 'This promo code does not apply to the selected plan.'\n }\n }\n } else {\n // If no promoCode was supplied, set the plans to default.\n plans = state.membership.defaultPlans\n // Sometimes there are no defaultPlans (e.g. for_update returns null), in this case do nothing.\n if (plans)\n selectedPlan = plans.find(\n (plan) => plan.frequency === selectedPlan.frequency\n )\n }\n\n return {\n ...state,\n membership: {\n ...state.membership,\n plans,\n promoCode,\n selectedPlan,\n selectedPlanError\n }\n }\n }\n case SET_SELECTED_PLAN: {\n let selectedPlanError = null\n const selectedPlan = findPlan(state.membership.plans, action.payload)\n if (state.membership.promoCode && !selectedPlan.couponApplies) {\n selectedPlanError =\n 'This promo code does not apply to the selected plan.'\n }\n return {\n ...state,\n membership: {\n ...state.membership,\n selectedPlan,\n selectedPlanError\n }\n }\n }\n case SET_SUCCESSFUL_SUBMIT:\n return {\n ...state,\n membership: {\n ...state.membership,\n successfulSubmit: action.payload\n }\n }\n default:\n return state\n }\n}\n\nexport default reducer\n","import React, { useEffect, useReducer, useState, useContext } from 'react'\nimport PropTypes from 'prop-types'\nimport uuidv4 from 'uuid/v4'\n\nimport { ErrorBoundary } from 'helpers'\n\nimport initializer from './initializer'\nimport reducer from './reducer'\n\nconst idempotencyKey = uuidv4()\n\nconst ALLOWED_FORMS = [\n 'user',\n 'membership',\n 'redemption',\n 'payment',\n 'customFields'\n]\n\nconst initialState = {\n formErrors: null,\n idempotencyKey\n}\n\nexport const Store = React.createContext(null)\nexport const useSubscribeContext = () => useContext(Store)\n\nconst SubscribeProvider = ({ children, forms, ...options }) => {\n if (!Array.isArray(forms)) {\n throw Error('Forms must be provided to Subscribe engine as an array')\n }\n\n // Ensure that the user isn't requesting a form that we do not provide.\n forms.forEach((form) => {\n if (!ALLOWED_FORMS.includes(form)) {\n throw Error(\n `${form} is not a valid form for the Subscribe engine. Please only include one of the following [${ALLOWED_FORMS.join(\n ', '\n )}]`\n )\n }\n })\n\n if (options.idempotencyKey) {\n // the user supplied an idempotency key on initialization. Use that instead of the auto-generated one.\n // This is for multi-page forms where a user maintains a single key across multiple pages. (e.g. /subscribe flow)\n initialState.idempotencyKey = options.idempotencyKey\n }\n\n if (options.offer) {\n // if the user is subscribing through a promotion\n // to differentiate between promotional plans and regular plans\n initialState.isAnOffer = true\n }\n\n const [state, dispatch] = useReducer(reducer, initialState)\n\n // formState holds all of the returns from initializer() as well as a loaded boolean.\n // Children elements only load after formState.loaded is set to true.\n const [formState, setFormState] = useState({ loaded: false })\n\n useEffect(() => {\n // Initializer function sets up the actions, initialValues, and validators that the context children will need to work properly.\n\n const initialize = async () => {\n const { actions, initialValues, validators, loadError } =\n await initializer({ dispatch, forms, options })\n\n setFormState({\n ...formState,\n actions,\n initialValues,\n validators,\n loadError,\n loaded: true\n })\n }\n\n initialize()\n }, [options.country])\n\n return (\n \n {!formState.loadError ? (\n formState.loaded && children\n ) : (\n
\n We apologize, but there was an error loading this form. Please try\n again or contact support@alomoves.com for additional assistance.\n \n \n {formState.loadError}\n
\n )}\n \n )\n}\n\nSubscribeProvider.propTypes = {\n children: PropTypes.node,\n forms: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired\n}\n\nconst SafeSubscribeProvider = (props) => (\n \n \n \n)\n\nexport default SafeSubscribeProvider\n","import { useSubscribeContext } from './SubscribeProvider'\nimport SubscribeProvider from './SubscribeProvider'\n\nexport { useSubscribeContext }\nexport default SubscribeProvider\n","import React, { createContext, useContext, useRef, useCallback } from 'react'\nimport PropTypes from 'prop-types'\nimport { loadStripe } from '@stripe/stripe-js'\n\nexport const StripeCheckoutContext = createContext(null)\nexport const useStripeCheckout = () => useContext(StripeCheckoutContext)\n\n/**\n * The StripeCheckoutProvider is responsible for providing the stripe promise object, that will be used\n * for redirecting to stripe checkout (otherwise known as stripe SCA).\n * https://stripe.com/docs/strong-customer-authentication\n *\n * Note: This is the new StripeCheckoutProvider, as the old StripeCheckoutProvider is used to provide the stripe object\n * for stripe elements (we're currently moving towards everything stripe checkout so this implementation\n * should be used in favor of the old one).\n *\n * Usage:\n * const getStripe = useStripeCheckout()\n * later on in the code, preferably in an event handler...\n * const stripe = await getStripe()\n */\nconst StripeCheckoutProvider = ({ children, stripeApiKey }) => {\n // Using a ref here and wrapping it in a closure\n // since we don't want to re-initialize the stripe call if the\n // provider re-renders for some reason.\n const stripeRef = useRef(null)\n\n const getStripe = useCallback(() => {\n if (stripeRef.current === null) {\n stripeRef.current = loadStripe(stripeApiKey)\n }\n return stripeRef.current\n }, [stripeApiKey])\n\n return (\n \n {children}\n \n )\n}\n\nStripeCheckoutProvider.propTypes = {\n children: PropTypes.node,\n stripeApiKey: PropTypes.string.isRequired\n}\n\nexport default StripeCheckoutProvider\n","export const FINISH_UPLOAD_FAIL = 'FINISH_UPLOAD_FAIL'\nexport const FINISH_UPLOAD_SUCCESS = 'FINISH_UPLOAD_SUCCESS'\nexport const INIT_UPLOAD = 'INIT_UPLOAD'\nexport const UPDATE_PROGRESS = 'UPDATE_PROGRESS'\nexport const UPDATE_ARRAYS = 'UPDATE_ARRAYS'\nexport const UPLOAD_RETRY = 'UPLOAD_RETRY'\nexport const UPDATE_CHUNK_DATA = 'UPDATE_CHUNK_DATA'\n\nexport const updateProgress = (id, loaded, total) => ({\n type: UPDATE_PROGRESS,\n payload: {\n id,\n loaded,\n total\n }\n})\n\nexport const initUpload = (id) => ({\n type: INIT_UPLOAD,\n payload: {\n id\n }\n})\n\nexport const updateArrays = (id, part) => ({\n type: UPDATE_ARRAYS,\n payload: {\n id,\n part\n }\n})\n\nexport const finishUploadFail = (id, error) => ({\n type: FINISH_UPLOAD_FAIL,\n payload: {\n id,\n error\n }\n})\n\nexport const finishUploadSuccess = (id) => ({\n type: FINISH_UPLOAD_SUCCESS,\n payload: {\n id\n }\n})\n\nexport const uploadRetry = (id, error) => ({\n type: UPLOAD_RETRY,\n payload: {\n id,\n error\n }\n})\n\nexport const updateChunkData = (\n id,\n { uploadedParts, remainingParts, resumed, uuid }\n) => ({\n type: UPDATE_CHUNK_DATA,\n payload: {\n id,\n uploadedParts,\n remainingParts,\n resumed,\n uuid\n }\n})\n","import {\n FINISH_UPLOAD_FAIL,\n FINISH_UPLOAD_SUCCESS,\n INIT_UPLOAD,\n UPDATE_ARRAYS,\n UPDATE_PROGRESS,\n UPLOAD_RETRY,\n UPDATE_CHUNK_DATA\n} from './actions'\n\nconst INITIAL_UPLOAD_STATE = {\n error: false,\n uploadStarted: false,\n uploadFinished: false,\n retry: false,\n percentComplete: 0\n}\n\nconst reducer = (state, actions) => {\n switch (actions.type) {\n case FINISH_UPLOAD_FAIL: {\n const { id, error } = actions.payload\n\n return {\n ...state,\n [id]: {\n ...state[id],\n uploadFinished: true,\n error: error,\n retry: false\n }\n }\n }\n\n case FINISH_UPLOAD_SUCCESS: {\n const { id } = actions.payload\n\n return {\n ...state,\n [id]: {\n ...state[id],\n percentCompleted: 100, // We force 100% complete here, as a resumed upload with no remainingParts will already be at 100%.\n uploadFinished: true,\n retry: false\n }\n }\n }\n\n case INIT_UPLOAD: {\n const { id } = actions.payload\n\n return {\n ...state,\n [id]: {\n ...INITIAL_UPLOAD_STATE\n }\n }\n }\n\n case UPDATE_CHUNK_DATA: {\n const {\n id,\n uploadedParts,\n remainingParts,\n resumed,\n uuid\n } = actions.payload\n\n // Copy uploaded and remaining arrays into our state so we can modify them as we iterate.\n const uploadedPartsCopy = [...uploadedParts]\n const remainingPartsCopy = [...remainingParts]\n\n // Get remaining percent for any uploads (resumed or not)\n const length = remainingParts.length + uploadedParts.length\n const percentComplete = resumed ? remainingParts / length : 0\n\n return {\n ...state,\n [id]: {\n ...state[id],\n uploadStarted: true,\n uuid,\n resumed,\n remainingParts: remainingPartsCopy,\n uploadedParts: uploadedPartsCopy,\n length,\n percentComplete\n }\n }\n }\n\n case UPDATE_ARRAYS: {\n const { id, part } = actions.payload\n\n const prevRemainingParts = state[id].remainingParts\n const prevUploadedParts = state[id].uploadedParts\n const remainingParts = prevRemainingParts.filter(\n (existingPart) => existingPart !== part\n )\n const uploadedParts = prevUploadedParts.concat(part)\n\n return {\n ...state,\n [id]: {\n ...state[id],\n remainingParts,\n uploadedParts\n }\n }\n }\n\n case UPDATE_PROGRESS: {\n // Update the percent completed.\n const { id, loaded, total } = actions.payload\n\n let percentComplete = state[id].percentComplete\n // To determine percentComplete, we need to find out how far we are within a given chunk (loaded / total), add that to the total amount we have already completed, then divide by our total length.\n const percent = Math.floor(\n ((state[id].uploadedParts.length + loaded / total) / state[id].length) *\n 100\n )\n\n if (percent !== percentComplete) {\n percentComplete = percent\n }\n\n return {\n ...state,\n [id]: {\n ...state[id],\n percentComplete\n }\n }\n }\n\n case UPLOAD_RETRY: {\n const { error, id } = actions.payload\n\n return {\n ...state,\n [id]: {\n ...state[id],\n retry: true,\n error\n }\n }\n }\n }\n}\n\nexport default reducer\n","import React, { useContext, useReducer } from 'react'\n\nimport { axios } from 'api'\n\nimport reducer from './reducer'\nimport {\n initUpload,\n updateArrays,\n updateProgress,\n finishUploadFail,\n finishUploadSuccess,\n uploadRetry,\n updateChunkData\n} from './actions'\n\nconst UploadActionStore = React.createContext(null)\nexport const useUploadActions = () => useContext(UploadActionStore)\n\nconst UploadStateStore = React.createContext(null)\nexport const useUploadState = () => useContext(UploadStateStore)\n\n/**\n * The UploadProvider is responsible for managing multipart uploads as well as tracking their state locally.\n * It does so by providing two consumer hooks - `useUploadActions` and `useUploadState`\n *\n * `useUploadActions` provides an object of actions available to consumers. In this case, it is only one function - `uploadFile()`\n * `useUploadState` provides a single state object that consumers can destructure and utilize however they wish.\n *\n * The purpose of providing two contexts and consumers is to enable memoization of intermediary layers.\n * It may not realize any gains though, and we can easily convert to a single consumer hook model.\n */\n\nconst UploadProvider = ({ children }) => {\n const [state, dispatch] = useReducer(reducer, {})\n\n const retryTimer = (delay) => {\n // setTimeout is non-blocking and immediately returns, so we can't await it.\n // Rather, we can return a promise that the function needs to await until it is done.\n return new Promise((res) => setTimeout(res, delay))\n }\n\n const checkIconCreated = async (id, retry = 20, delay = 1000) => {\n for (let i = 0; i < retry; i++) {\n try {\n const res = await axios.get(`uploads/${id}/as_icon`)\n if (res.status === 200) return res\n // res.status === 203 means that we're waiting.\n } catch (error) {\n if (error.response.status === 404) {\n throw new Error('There is no icon associated with this id.')\n }\n }\n await retryTimer(delay)\n }\n\n // We timed out.\n throw new Error(\n 'There was an error converting your upload. Response timed out. Please contact engineering.'\n )\n }\n\n /**\n * Gets all the information necessary to split the file and then uploads each piece.\n * @param {string} id - Unique id to identify upload in state.\n * @param {Blob} file - File blob to upload\n * @param {Object} props\n * @param {Array} props.remainingParts - Array of parts to iterate and upload.\n * @param {string} props.uuid - The unique uuid of the upload, as defined by the server.\n */\n const uploadParts = async (id, file, { remainingParts = [], uuid }) => {\n try {\n for (let part of remainingParts) {\n // Get signed URL and indices needed to upload each part.\n const uploadUrl = await axios.put(`uploads/${uuid}/parts/${part}`)\n\n if (uploadUrl && uploadUrl.data) {\n const { url, startIndex, endIndex } = uploadUrl.data\n const chunk = file.slice(startIndex, endIndex)\n\n // Upload sliced chunk to signedUrl\n const chunkUploaded = await axios.put(`${url}`, chunk, {\n baseUrl: '',\n onUploadProgress: ({ loaded, total }) => {\n dispatch(updateProgress(id, loaded, total))\n }\n })\n\n if (chunkUploaded && chunkUploaded.headers.etag) {\n // Once S3 has the chunk, update our server of its success\n const updateServer = await axios.post(\n `uploads/${uuid}/parts/${part}`,\n { etag: chunkUploaded.headers.etag }\n )\n if (updateServer && updateServer.status === 200) {\n // We need to keep our state arrays updated to our percentage completed is correct.\n dispatch(updateArrays(id, part))\n if (updateServer.data.joinStarted) return uuid\n }\n }\n }\n }\n } catch (error) {\n throw error\n }\n }\n\n /**\n *\n * @param {Object} props\n * @param {string} props.id - The key to identify the upload within state.\n * @param {string} props.url - The url for the initial PUT request to initiate/resume an upload.\n * @param {Object} props.body - Any additional information required in the body beyond name and size.\n * @param {Object} props.axiosOptions - Any options to pass through to axios (e.g. { baseUrl })\n * @param {number} props.retry - Number of times to retry. Defaults to 10.\n * @param {number} props.delay - Time in milliseconds for delay. Note, this is increased exponentially. Defaults to 2000\n *\n * @return {string} uuid - the UUID of the upload\n */\n const uploadFile = async ({\n id,\n url,\n file,\n body,\n axiosOptions,\n uploadCallback,\n retry = 10,\n delay = 2000\n }) => {\n // We can refactor this out into a HOC or reusable component if we find ourselves needing retry/delays elsewhere.\n // We initUpload here so we don't reinstantiate the whole thing on every loop.\n // This creates an entry in state with id as the key.\n dispatch(initUpload(id))\n for (let i = 0; i < retry; i++) {\n try {\n const formattedBody = {\n ...body,\n filename: file.name,\n file_size: file.size\n }\n\n const chunks = await axios.put(url, formattedBody, axiosOptions)\n if (chunks) {\n if (chunks.data.resumed && chunks.data.remainingParts === 0) {\n // This was a resumed upload and there are no remaining parts to upload.\n if (uploadCallback && typeof uploadCallback === 'function') {\n await uploadCallback(chunks.data.uuid)\n }\n dispatch(finishUploadSuccess(id))\n return chunks.data.uuid\n }\n\n if (chunks.data.remainingParts.length > 0) {\n dispatch(updateChunkData(id, chunks.data)) // Add upload information to state[id]\n const res = await uploadParts(id, file, chunks.data)\n if (res) {\n if (uploadCallback && typeof uploadCallback === 'function') {\n await uploadCallback(res)\n }\n dispatch(finishUploadSuccess(id))\n return res\n }\n }\n\n throw Error('Resumed upload with no remaining pieces to upload.')\n }\n } catch (error) {\n const isLastAttempt = i + 1 === retry\n if (isLastAttempt) {\n dispatch(\n finishUploadFail(\n id,\n 'We apologize, but there has been an issue uploading this file. Please try again later.'\n )\n )\n throw error\n } else {\n let errorMessage =\n 'We apologize, but there has been a issue uploading this file.'\n\n if (error.response) {\n if (error.response.status === 422) {\n if (error.response.data && error.response.data.error) {\n dispatch(finishUploadFail(id, error.response.data.error + '.'))\n }\n throw error\n }\n\n if (error.response.status === 500) {\n // A server is borked. Abort!\n dispatch(finishUploadFail(id, 'The server could not be reached.'))\n throw error\n }\n if (error.response.status === 404) {\n errorMessage = 'We were unable to reach the upload servers.'\n }\n }\n dispatch(uploadRetry(id, errorMessage))\n await retryTimer(delay * Math.pow(2, Math.min(i, 6))) // exponential delay with a cap.\n }\n }\n }\n }\n\n return (\n \n \n {children}\n \n \n )\n}\n\nexport default UploadProvider\n","import React, { useContext, useEffect, useState } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { axios } from 'api'\n\nexport const Store = React.createContext(null)\nexport const useUserContext = () => useContext(Store)\n\n//\n// Wrap main component (e.g. TempEntry) in UserProvider for access to user in any component\n// User JSON is passed in as a prop from the Rails view instead of being fetched from an API for performance/experience\n//\nexport const UserProvider = ({ loadUser, user, children }) => {\n const [currentUser, setCurrentUser] = useState(user)\n const [loaded, setLoaded] = useState(user || !loadUser) // We only want children to load if there is a user or the user has loaded if requested.\n const [contextData, setContextData] = useState({})\n\n useEffect(() => {\n const fetchUser = async () => {\n try {\n const res = await axios.get('/user/profile')\n if (res) {\n setUser(res.data)\n }\n } catch (e) {\n // fail silently for now, we can institute a retry later.\n // We may also want to apply a redirect here in the future.\n // Though our controllers know user state before rendering pages that depend on it for access.\n } finally {\n setLoaded(true)\n }\n }\n\n if (loadUser) {\n fetchUser()\n }\n }, [loadUser])\n\n const setUser = ({ email, firstName, lastName, username, admin }) => {\n setCurrentUser((state) => ({\n ...state,\n email,\n firstName,\n lastName,\n username,\n admin\n }))\n }\n\n const updateContextData = (key, value) =>\n setContextData((state) => ({ ...state, [key]: value }))\n\n return (\n \n {loaded && children}\n \n )\n}\n\nUserProvider.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 hasSubscriptionAccess: PropTypes.bool\n }),\n children: PropTypes.node\n}\n","/***********************\n * Although is technically a block, I have collocated it with useAlert and useToast, as they are tightly coupled.\n ***********************/\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport styled, { useTheme } from 'styled-components'\n\nimport { ErrorBoundary } from 'helpers'\nimport { CTA, P } from 'ui/bend/typography'\nimport { Flex, GridItem, SVGImage } from 'ui/bend/elements'\nimport { Chevron } from 'ui/bend/animations'\nimport { Check, Warning, X } from 'images/bend'\n\n/**\n * The styling for the Alert's parent container is in ui/bend/blocks/ToastContainer.js This includes background and padding.\n */\n\nconst StyledClose = styled('button')((props) => ({\n cursor: 'pointer',\n width: '24px',\n height: '24px',\n padding: '6px',\n borderRadius: '50%',\n border: 'none',\n backgroundColor: props.theme.colors.grey6\n}))\n\nconst Alert = ({ alert, closeToast, cta, error, message, width }) => {\n const { colors } = useTheme()\n width = width || alert ? ['100%', '476px'] : ['100%', '296px']\n if (cta && cta.text && cta.text.length > 25)\n console.error('CTA text is too long for this alert. It will look horrid.')\n\n return (\n \n {error ? (\n \n ) : (\n \n )}\n \n
\n {message}\n
\n {cta && cta.link && cta.text && (\n \n {cta.text} \n \n )}\n \n {alert && (\n \n \n \n )}\n \n )\n}\n\nconst SafeAlert = (props) => (\n \n \n \n)\n\nSafeAlert.propTypes = {\n alert: PropTypes.bool,\n cta: PropTypes.shape({\n link: PropTypes.string,\n text: PropTypes.string\n }),\n error: PropTypes.bool,\n message: PropTypes.string.isRequired,\n width: PropTypes.string,\n}\n\nexport default SafeAlert\n","import React from 'react'\nimport { toast } from 'react-toastify'\n\nimport Alert from './Alert'\n\nconst useToast = () => {\n const setToast = (body, options) => {\n toast(, {\n autoClose: 5000,\n ...options\n })\n }\n\n return setToast\n}\n\nexport default useToast\n","import React from 'react'\nimport { toast } from 'react-toastify'\n\nimport Alert from './Alert'\n\nconst useAlert = () => {\n const setAlert = (body, options) => {\n toast(, options)\n }\n\n return setAlert\n}\n\nexport default useAlert\n","import { useEffect } from 'react'\n\nconst useBeforeUnload = (confirm = true) => {\n useEffect(() => {\n // Show browser-defined message to confirm leaving page\n const callback = (e) => {\n if (confirm) {\n e.preventDefault()\n e.returnValue = ''\n }\n }\n\n window.addEventListener('beforeunload', callback)\n\n return () => {\n window.removeEventListener('beforeunload', callback)\n }\n }, [confirm])\n}\n\nexport default useBeforeUnload\n","import { useEffect, useState } from 'react'\n\nconst useDebounce = (value, delay) => {\n const [debouncedValue, setDebouncedValue] = useState(value)\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value)\n }, delay)\n\n return () => {\n clearTimeout(handler)\n }\n }, [value])\n\n return debouncedValue\n}\n\nexport default useDebounce\n","export const CLEAR_DATA = 'CLEAR_DATA'\nexport const FETCH_START = 'FETCH_START'\nexport const FETCH_SUCCESS = 'FETCH_SUCCESS'\nexport const FETCH_FAIL = 'FETCH_FAIL'\n","import { CLEAR_DATA, FETCH_START, FETCH_SUCCESS, FETCH_FAIL } from './actions'\n\nexport const dataFetchReducer = (state, action) => {\n switch (action.type) {\n case CLEAR_DATA:\n return {\n ...state,\n data: null\n }\n case FETCH_START:\n return {\n ...state,\n loading: true,\n error: false\n }\n case FETCH_SUCCESS:\n return {\n ...state,\n loading: false,\n error: false,\n data: action.payload\n }\n case FETCH_FAIL:\n return {\n ...state,\n loading: false,\n error: true\n }\n default:\n throw new Error()\n }\n}\n\nexport default dataFetchReducer\n","import { useState, useEffect, useReducer } from 'react'\nimport { axios } from 'api'\n\nimport dataFetchReducer from './reducer'\nimport { CLEAR_DATA, FETCH_START, FETCH_SUCCESS, FETCH_FAIL } from './actions'\n\n/***********************\n/* useFetchAPI() is used to retreive data from an API on page load.\n/* It returns the following object:\n/* {\n/* data: :null || res.data: - the data returned from the API extracted from from res.data\n/* loading: :bool: - whether the API data is still loading\n/* error: :bool: - whether the hook received an error from the API call\n/* }\n/************************\n/* To use this hook:\n/* const [{ data, loading, error }] = useFetchAPI(apiURL)\n/***********************/\n\n// Actions are defined in hook because we would otherwise need to pass dispatch function into them, and it becomes a needlessly complex system.\n\nconst useFetchAPI = (initialUrl, options = {}, axiosOptions) => {\n const { initialData, cacheKeys } = options\n const [url, setUrl] = useState(() => {\n let constructedUrl = initialUrl\n\n if (cacheKeys && cacheKeys.length > 0) {\n // set cache query params based on passed in cacheKeys.\n // We are simply converting the cacheKeys into a single string and appending it. We may want to hash this key in the future to save space.\n constructedUrl += `${\n constructedUrl.includes('?') ? '&' : '?'\n }cacheKey=${cacheKeys.join('')}`\n }\n\n return constructedUrl\n })\n\n const [state, dispatch] = useReducer(dataFetchReducer, {\n loading: true,\n error: false,\n data: initialData\n })\n\n useEffect(() => {\n // didCancel is changed to true on hook cleanup. This prevents us from writing data to a stale store.\n let didCancel = false\n\n if (url) {\n const fetchData = async () => {\n dispatch({ type: FETCH_START })\n\n try {\n const res = await axios(url, axiosOptions)\n\n if (!didCancel) {\n dispatch({\n type: FETCH_SUCCESS,\n payload: res.status === 204 ? null : res.data\n })\n }\n } catch (error) {\n if (!didCancel) {\n dispatch({\n type: FETCH_FAIL\n })\n }\n }\n }\n fetchData()\n } else {\n dispatch({\n type: CLEAR_DATA\n })\n }\n\n return () => {\n // On hook cleanup, set didCancel to true\n didCancel = true\n }\n }, [url])\n\n return [state, setUrl]\n}\n\nexport default useFetchAPI\n","import { useEffect, useRef } from 'react'\n\n/**\n * A mostly copy/paste of Dan Abramov's `useInterval` hook documented on his blog.\n *\n * https://overreacted.io/making-setinterval-declarative-with-react-hooks/\n * */\nconst useInterval = (callback, delay) => {\n const savedCallback = useRef()\n\n // Remember the latest callback.\n useEffect(() => {\n savedCallback.current = callback\n }, [callback])\n\n // Set up interval\n useEffect(() => {\n const tick = () => savedCallback.current()\n\n if (delay !== null) {\n let id = setInterval(tick, delay)\n return () => clearInterval(id)\n }\n }, [delay])\n}\n\nexport default useInterval\n","import { useModalContext } from 'context'\n\n/**\n * A passthrough hook for useModalContext().\n * I created this hook to reduce the cognitive load when using modals (i.e. import { useModal } from 'context' would get confusing )\n * useModal() hook can ONLY be used within a Component that is a child beneath \n *\n * See context/ModalProvider/ModalProvider.js for full documentation of supplied functions.\n * */\nconst useModal = () => {\n return useModalContext()\n}\n\nexport default useModal\n","import { useState, useRef } from 'react'\n\nconst useModal = (closeCallback) => {\n const ref = useRef()\n const [active, setActive] = useState(false)\n const [overlay, setOverlay] = useState(false)\n\n const open = () => {\n // Overlay will not transition until active = true (see ui/acro/blocks/Modal.js)\n setOverlay(true)\n setActive(true)\n }\n\n const close = () => {\n setOverlay(false)\n\n // Wait for overlay transition to finish\n setTimeout(() => {\n setActive(false)\n if (closeCallback) closeCallback()\n }, 150)\n }\n\n return {\n ref,\n // State\n active,\n overlay,\n // Actions\n open,\n close\n }\n}\n\nexport default useModal\n","import { useEffect } from 'react'\nimport { isSafari } from 'helpers'\n\n// This hook will check to see if the userAgent is Safari and if page is loaded from cache. If so, it will reload the page.\n// We need to do this because Safari doesn't reset our state when using the back button (Continue button still shows spinner)\nconst useSafariReset = () => {\n useEffect(() => {\n const resetProcessing = (e) => {\n if (e.persisted && isSafari()) {\n window.location.reload(true)\n }\n }\n\n window.addEventListener('pageshow', resetProcessing, false)\n }, [])\n}\n\nexport default useSafariReset\n","import { useState, useEffect } from 'react'\n\nconst useScript = (url) => {\n const [loaded, setLoaded] = useState(false)\n\n useEffect(() => {\n const script = document.createElement('script')\n\n script.onload = () => setLoaded(true)\n script.src = url\n script.async = true\n\n document.body.appendChild(script)\n\n return () => {\n document.body.removeChild(script)\n }\n }, [url])\n\n return [loaded]\n}\n\nexport default useScript\n","import React, { useEffect } from 'react'\nimport styled from 'styled-components'\nimport smoothscroll from 'smoothscroll-polyfill'\n\n// This accounts for the sticky navbar when scrolling to the anchor\nconst Wrapper = styled('a')({\n position: 'absolute',\n marginTop: (props) => `-${props.theme.componentHeights.navbar.desktop}`\n})\n\nconst useScrollAnchor = (id = 'ScrollAnchor') => {\n useEffect(() => {\n // scrollIntoView polyfill for Safari\n smoothscroll.polyfill()\n }, [])\n\n const scrollToAnchor = (e) => {\n if (e && typeof e.preventDefault === 'function') e.preventDefault()\n if (typeof window !== 'undefined') {\n window.history.pushState(null, null, `#${id}`) // add hash to window.location\n }\n const element = document.getElementById(id)\n if (element)\n element.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n })\n }\n\n const ScrollAnchor = () => \n\n return {\n ScrollAnchor,\n scrollToAnchor\n }\n}\n\nexport default useScrollAnchor\n","import { useEffect } from 'react'\nimport lodashDebounce from 'lodash.debounce'\n\n//\n// This hook will call scrollEndCallback when scrolling reaches the bottom and stops\n// and will call scrollDefaultCallback (if defined) when scrolling stops anywhere else\n//\nconst useScrollEnd = (scrollEndCallback, scrollDefaultCallback) => {\n useEffect(() => {\n const handleOnScroll = (e) => {\n const node = document.documentElement\n const scrollPos = Math.round(node.scrollHeight)\n const bottomPos = Math.round(node.scrollTop + window.innerHeight)\n\n if (scrollPos == bottomPos) {\n typeof scrollEndCallback === 'function' && scrollEndCallback()\n } else {\n typeof scrollDefaultCallback === 'function' && scrollDefaultCallback()\n }\n }\n\n const callback = lodashDebounce(handleOnScroll, 100, { trailing: true })\n window.addEventListener('scroll', callback)\n\n return () => {\n window.removeEventListener('scroll', callback)\n }\n }, [scrollEndCallback, scrollDefaultCallback])\n}\n\nexport default useScrollEnd\n","import { useEffect, useState } from 'react'\n\nimport useDebounce from './useDebounce'\nimport useFetchAPI from './useFetchAPI'\n\nconst SEARCH_URL = '/search/results'\n\nconst useSearchAPI = (props) => {\n const [value, setValue] = useState('')\n const [{ data }, setUrl] = useFetchAPI(null)\n const debouncedValue = useDebounce(value, 250)\n\n const handleBlur = () => {\n setValue('')\n setUrl(null)\n }\n\n const handleChange = (e) => {\n setValue(e.target.value)\n }\n\n const handleSubmit = (e) => {\n e.preventDefault()\n\n // If there is nothing to search for, don't bother.\n if (debouncedValue.length === 0) return\n\n // Reload the page if we are already on the search page\n const reload = window.location.href.indexOf('/search/results') !== -1\n window.location.href = `/search?q=${value}`\n\n if (reload) window.location.reload()\n }\n\n useEffect(() => {\n if (debouncedValue.length < 3) {\n // Setting url to null will clear results by setting data to null (see useFetchAPI() for details)\n setUrl(null)\n } else {\n const querySearch = (value) => {\n setUrl(`${SEARCH_URL}?q=${value}`)\n }\n querySearch(debouncedValue)\n }\n }, [debouncedValue, setUrl])\n\n return {\n value,\n debouncedValue,\n data,\n handleBlur,\n handleChange,\n handleSubmit\n }\n}\n\nexport default useSearchAPI\n","import { useRef, useState } from 'react'\n\nimport 'swiper/swiper.min.css'\n\n/**\n * This is a helper hook to give Swiper components access to navigation elements.\n * The hook will hide pagination dots if there is only 1 page and a paginationClass is supplied.\n *\n * @param {string} paginationClass the custom class name used to target pagination dots. Give to hook starting with a period (e.g. paginationClass = '.custom-swiper-pagination')\n *\n * @typedef {Object} swiperHookReturn\n * @property {function} getSwiperProps a function callback that returns the swiper config for typical use cases. Takes in a configuration object as an argument that will be merged with the rest of the configuration (see `GiftCardCarousel` for example usage).\n * @property {function} goNext go to next slide\n * @property {function} goPrev go to previous slide\n * @property {function} goToSlide go to a given slide, will autowrap if id < || > swiperInstance.length\n * @property {boolean} swiperInitialized whether or not the swiper instance has been properly initialized.\n * @property {number} activeIndex the currently active slide index\n * @property {boolean} isBeginning true if current active slide is first in array\n * @property {boolean} isEnd true if current active slide is last in array\n *\n * @returns {swiperHookReturn}\n */\n\nconst useSwiper = (paginationClass) => {\n const swiperRef = useRef(null)\n\n // We use these state variables to let the Prev/Next arrows know whether there is more to the carousel and, if so, to show themselves.\n // Pass these bool values to the Prev/Next components as a disabled={} prop\n const [isBeginning, setIsBeginning] = useState(true)\n const [isEnd, setIsEnd] = useState(true)\n\n // track our active index.\n // Defaults to 0 so child elements can render properly, but will update if another initial index is set, as it is set by swiperDefaultConfig.on.init\n const [activeIndex, setActiveIndex] = useState(0)\n\n // Tracks if it's initialized or not\n const [swiperInitialized, setInitialized] = useState(false)\n\n // We only show pagination if Swiper has pages that aren't visible\n // In order to have responsive pagination, the Component needs to have watchSlidesVisibility option set to true and the useSwiper() hook needs to be given a pagination class name to observe.\n const responsivePagination = () => {\n if (paginationClass && swiperRef.current.params.watchSlidesVisibility) {\n const pagination = document.getElementsByClassName(\n paginationClass.slice(1)\n )[0]\n if (pagination) {\n // If there is more than 1 visible page, then we do not need pagination hints. Likewise, if all of the slides are visible, then we don't need pagination either.\n // We might need to refactor this so that passed in arguments can trigger these states (we may wish to show pagination bullets on multi-slide layouts), but it works for now.\n if (\n swiperRef.current.slides.length <= 1 ||\n swiperRef.current.pagination.bullets.length === 1\n ) {\n pagination.style.display = 'none'\n } else {\n pagination.style.display = 'flex'\n }\n }\n }\n }\n\n const goToSlide = (id) => {\n // Manually update the activeIndex on the click handler as clicking on slides doesn't trigger on.slideChange event when swiping is disabled (e.g. VP3 > screens)\n if (swiperRef.current) {\n if (id < swiperRef.current.slides.length) {\n swiperRef.current.slideToLoop(id)\n setActiveIndex(id)\n } else {\n swiperRef.current.slideToLoop(0)\n setActiveIndex(0)\n }\n }\n }\n\n const goNext = () => {\n if (swiperRef.current) {\n swiperRef.current.slideNext(300)\n }\n }\n\n const goPrev = () => {\n if (swiperRef.current) {\n swiperRef.current.slidePrev(300)\n }\n }\n\n const getSwiperProps = (config) => {\n const { onSlideChange, ...restConfig } = config\n return {\n onSwiper: (swiper) => {\n if (swiper && swiperRef.current === null) {\n swiperRef.current = swiper\n // Initialize some things\n setIsBeginning(swiperRef.current.isBeginning)\n setIsEnd(swiperRef.current.isEnd)\n responsivePagination()\n setInitialized(true)\n }\n },\n onInit: (swiper) => {\n setActiveIndex(swiper.realIndex)\n },\n onSlideChange: (swiper) => {\n setActiveIndex(swiper.realIndex)\n if (onSlideChange && typeof onSlideChange === 'function')\n onSlideChange(swiper.realIndex)\n },\n onReachBeginning: () => {\n setIsBeginning(true)\n },\n onFromEdge: (swiper) => {\n setIsBeginning(swiper.isBeginning)\n setIsEnd(swiper.isEnd)\n },\n onReachEnd: (swiper) => {\n setIsEnd(swiper.isEnd)\n },\n onResize: () => {\n responsivePagination()\n swiperRef.current.update()\n },\n ...restConfig\n }\n }\n\n return {\n // Setter\n getSwiperProps,\n // Actions\n goNext,\n goPrev,\n goToSlide,\n // State\n swiperInitialized,\n activeIndex,\n isBeginning,\n isEnd\n }\n}\n\nexport default useSwiper\n","import { useEffect } from 'react'\n\n/**\n * We listen to mousedown events and apply a class to the document body that will remove all :focus { outline } elements in CSS.\n * Once a user presses a mousedown event, those focus events return.\n */\nconst useToggleFocus = () => {\n useEffect(() => {\n document.body.addEventListener('mousedown', () => {\n document.body.classList.add('using-mouse')\n })\n\n document.body.addEventListener('keydown', () => {\n document.body.classList.remove('using-mouse')\n })\n\n return () => {\n document.body.removeEventListener('mousedown', () => {\n document.body.classList.add('using-mouse')\n })\n\n document.body.removeEventListener('keydown', () => {\n document.body.classList.remove('using-mouse')\n })\n }\n }, [])\n}\n\nexport default useToggleFocus\n","import { useEffect, useState } from 'react'\nimport lodashDebounce from 'lodash.debounce'\n\nconst useWindowResize = (cb) => {\n const getHeight = () =>\n window.innerHeight ||\n document.documentElement.clientHeight ||\n document.body.clientHeight\n const getWidth = () =>\n window.innerWidth ||\n document.documentElement.clientWidth ||\n document.body.clientWidth\n\n const [height, setHeight] = useState(getHeight())\n const [width, setWidth] = useState(getWidth())\n\n useEffect(() => {\n const setDimensions = () => {\n setHeight(getHeight())\n setWidth(getWidth())\n }\n\n const debouncedCallback = lodashDebounce(setDimensions, 50, {\n trailing: true\n })\n\n window.addEventListener('resize', debouncedCallback)\n\n return () => {\n window.removeEventListener('resize', debouncedCallback)\n }\n }, [])\n\n return { height, width }\n}\n\nexport default useWindowResize\n","import { useState, useEffect } from 'react'\nimport { useField } from 'formik'\nimport useDebounce from './useDebounce'\n\nconst useComboboxSearchWithFormik = (fieldName, getItems) => {\n const [{ value: items }, , { setValue: setItems }] = useField(\n `${fieldName}Items`\n )\n const [loading, setLoading] = useState(false)\n const [{ value, ...field }, { touched, error }, { setValue }] = useField(\n fieldName\n )\n const [inputValue, setInputValue] = useState(value)\n const [requery, setRequery] = useState(true)\n const debouncedInput = useDebounce(inputValue, 250)\n\n const handleSetInputValue = (value, requery) => {\n setInputValue(value)\n setRequery(requery)\n }\n\n useEffect(() => {\n setLoading(inputValue.length > 0)\n }, [inputValue])\n\n useEffect(() => {\n const asyncGetItems = async () => {\n const newItems = await getItems(debouncedInput)\n if (newItems) {\n setItems(newItems)\n }\n }\n\n try {\n if (\n debouncedInput.length > 0 &&\n getItems &&\n typeof getItems === 'function' &&\n requery\n ) {\n /* Because getItems is most likely async (i.e. api call), we need to wrap it in async/await here to call it properly. */\n asyncGetItems()\n }\n } catch (e) {\n // API call threw an error, do something here?\n throw e\n } finally {\n setLoading(false)\n }\n }, [debouncedInput, requery])\n\n return {\n ...field,\n value,\n setValue,\n inputValue,\n setInputValue: handleSetInputValue,\n showError: touched && Boolean(error),\n name: fieldName,\n error,\n items,\n loading\n }\n}\n\nexport default useComboboxSearchWithFormik\n","import { useEffect } from 'react'\n\n// This hook will check to see if the page is loaded from cache. If so, it will reload the page.\nconst useResetPage = () => {\n useEffect(() => {\n const resetProcessing = (e) => {\n if (e.persisted) {\n window.location.reload(true)\n }\n }\n\n window.addEventListener('pageshow', resetProcessing, false)\n }, [])\n}\n\nexport default useResetPage\n","import { useEffect, useState } from 'react'\nimport { getLocation } from 'helpers/getLocation'\n\nconst useGetLocation = () => {\n const [country, setCountry] = useState('')\n\n useEffect(() => {\n if (!country) {\n getLocation().then((res) => {\n setCountry(res)\n })\n }\n }, [])\n\n return country\n}\n\nexport default useGetLocation\n","import useGetLocation from './useGetLocation'\n\nconst useIsUSCountry = () => {\n const country = useGetLocation()\n return country == 'US' ? true : false\n}\nexport default useIsUSCountry\n","import { useState, useEffect } from 'react'\nimport useWindowResize from './useWindowResize'\n\nconst useIsDesktop = () => {\n const [isDesktop, setIsDesktop] = useState(true)\n const { width } = useWindowResize()\n useEffect(() => {\n setIsDesktop(width < 1200 ? false : true)\n }, [width])\n\n return isDesktop\n}\n\nexport default useIsDesktop\n","import React from 'react'\n\n/**\n * Allows us to easily render either a react element or function.\n * Passing in an invalid element (or function that returns an invalid element).\n * Providing an invalid Component will render Default, if provided.\n * @param {function || Node } Component \n * @param {Component} Default \n * \n * @returns {Node} a valid node.\n */\nconst renderPropComponent = (Component, Default = <>) => {\n if (React.isValidElement(Component)) return Component\n \n if (typeof Component === 'function') {\n const fnComponent = \n if (React.isValidElement(fnComponent)) {\n return fnComponent\n }\n }\n\n\n console.warn('You must supply a valid React component or function that returns a valid React component. Rendering Fragment instead.')\n if (React.isValidElement(Default))\n return Default\n}\n\nexport default renderPropComponent\n","import React from 'react'\n\nimport { Caption } from 'ui/acro'\n\nconst NavbarLink = ({ ...rest }) => (\n
\n)\n\nexport default NavbarLink\n","import React, { useContext, useState, useEffect } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { axios } from 'api'\nimport { useUserContext } from 'context'\n\nconst Store = React.createContext(null)\nexport const useNavbarContext = () => useContext(Store)\n\nexport const NavbarStoreProvider = ({ children }) => {\n const { user } = useUserContext()\n const [recentlySaved, setRecentlySaved] = useState([])\n const [notificationCount, setNotificationCount] = useState(0)\n\n // Get notification count for current user\n useEffect(() => {\n const getNotifications = async () => {\n try {\n const res = await axios.get('/notifications/unread_count')\n if (res && res.data) {\n setNotificationCount(res.data.count)\n }\n } catch (e) {\n return\n }\n }\n\n if (user) getNotifications()\n }, [user])\n\n const clearNotifications = async (e) => {\n e.preventDefault()\n\n try {\n await axios.delete('/notifications/unread_count')\n } catch (e) {\n // Fail silently\n } finally {\n window.location.href = '/notifications'\n }\n }\n\n const state = {\n notificationCount,\n recentlySaved\n }\n\n const actions = {\n clearNotifications,\n setRecentlySaved\n }\n\n return {children}\n}\n\nNavbarStoreProvider.propTypes = {\n children: PropTypes.node.isRequired\n}\n","import styled from 'styled-components'\nimport { compose, position, space } from 'styled-system'\nimport { css } from '@styled-system/css'\n\nconst NotificationBadge = styled('div')(\n css({\n display: 'inline-block',\n padding: '6px',\n borderRadius: '50%',\n backgroundColor: 'errorDefault'\n }),\n compose(position, space)\n)\n\nexport default NotificationBadge\n","import React from 'react'\nimport styled from 'styled-components'\n\nimport { ResponsiveSVG } from 'ui/acro'\nimport { AppStoreIcon } from 'images/latest'\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n`\n\nconst DownloadText = styled.div`\n font-family: 'proxima-nova';\n font-size: 0.875rem;\n line-height: 1.125rem;\n letter-spacing: 0.01925rem;\n @media only screen and (max-width: 1200px) {\n font-size: 1rem;\n line-height: 1.5rem;\n letter-spacing: 0.022rem;\n }\n`\n\nconst AppStoreComponent = ({ style }) => (\n \n \n Download the Alo Moves app to take classes offline and practice\n anytime, anywhere.\n \n \n \n \n \n)\n\nexport default AppStoreComponent\n","import React, { Fragment } from 'react'\nimport styled from 'styled-components'\n\nimport { useUserContext } from 'context'\nimport { Caption, Flex, HR, ResponsiveSVG } from 'ui/acro'\n\nimport { useNavbarContext } from '../../../common/data/_store'\nimport AppStoreComponent from '../../../common/AppStoreComponent'\n\nimport NotificationBadge from './NotificationBadge'\nimport { gift_card_interest_event } from 'gtm/pushEvents'\nimport { AloMovesLogo } from 'images/latest'\n\nconst ListItem = styled(Caption)({\n position: 'relative',\n paddingTop: '10px',\n paddingBottom: '10px',\n fontSize: '15px',\n whiteSpace: 'nowrap',\n fontWeight: 900\n})\n\n// Legacy hack alert!\n// If specifying 'color' prop on anchor tags in the nav or footer on legacy pages, it will be overriden by 'color: inherit' (see ThemeWrapper)\n// Using &&& increases specificity by applying the class three times, making it take precedence\nconst GreyListItem = styled(ListItem)`\n &&& {\n color: ${(props) => props.theme.colors.grey4};\n }\n`\n\n// ListItem for name is a so that legacy application.css won't try to style it (renders as h4 by default)\n\nconst ProfileMenu = () => {\n const { user } = useUserContext()\n const { state, actions } = useNavbarContext()\n\n const handleMenuClick = (item) => {\n item?.name?.toLowerCase() === 'gift cards' &&\n gift_card_interest_event(user?.firstName ? 'si_nav' : 'so_nav')\n }\n\n return (\n \n {user.firstName && (\n \n \n {user.firstName}\n \n \n \n )}\n \n My Profile\n \n \n Notifications\n {state.notificationCount > 0 && }\n \n \n Community\n \n \n Settings\n \n\n \n\n \n Shop\n \n \n\n \n gift cards\n \n\n \n\n \n Refer A Friend\n \n \n Get Help\n \n \n sign out\n \n \n {/* */}\n \n {/* */}\n \n )\n}\n\nProfileMenu.propTypes = {}\n\nexport default ProfileMenu\n","import React from 'react'\nimport styled from 'styled-components'\n\nimport { Fade, Flex } from 'ui/acro'\n\nconst MenuContainer = styled(Flex)((props) => ({\n background: `${props.theme.colors.base}`,\n minWidth: '150px',\n justifyContent: 'center',\n flexDirection: 'column',\n alignItems: 'center',\n boxShadow: `0 8px 16px -10px #808080c7`,\n zIndex: 10,\n padding: '20px 30px'\n}))\n\nconst DropdownMenu = ({ isHovered, children, width, ...rest }) => (\n \n \n {children}\n \n \n)\n\nexport default DropdownMenu\n","import React, { useState } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from 'ui/acro'\n\nimport { useNavbarContext } from '../../../common/data/_store'\n\nimport NotificationBadge from './NotificationBadge'\nimport ProfileMenu from './ProfileMenu'\nimport { ProfileIcon } from '../../../../../../Icons'\nimport DropdownMenu from '../../../common/DropdownMenu'\n\nconst Container = styled(Box)((props) => ({\n marginBottom: '-15px',\n paddingBottom: '15px',\n '> svg': {\n stroke: props.theme.colors.white\n }\n}))\n\nconst Profile = ({ color = 'white' }) => {\n const { state } = useNavbarContext()\n const [isHovered, setHovered] = useState(false)\n\n return (\n // TODO: make this accessible via keyboard navigation\n // (Currently only works through mouse navigation)\n
\n {!isDesktop && {classesTypes?.category}}\n \n \n \n Classes\n \n Find the perfect workout or wellness class to match your mood.\n \n \n \n {`All ${classesTypes?.category} Classes`}\n {classesTypes?.subcategories?.map((item) => (\n \n {item.title}\n \n ))}\n \n \n \n \n Series\n \n Follow a guided program to hit your fitness & wellness goals.\n \n \n \n {`All ${seriesTypes?.category} Series`}\n {seriesTypes?.subcategories?.map((item) => (\n \n {item.title}\n \n ))}\n \n \n \n
\n )\n}\n\nexport default TopCategory\n","import React, { useState } from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport css from '@styled-system/css'\nimport { CSSTransition } from 'react-transition-group'\nimport { Flex, Close, componentHeights as heights, Box } from 'ui/acro'\nimport Logo from '../../Logo'\nimport StyledMobileMenu from './common/StyledMobileMenu'\nimport { LeftArrowIcon } from 'components_v2/Icons'\nimport MobileMenuPrimary from './MobileMenuPages/MobileMenuPrimary'\nimport { topCategory } from '../common/data/topCategory'\nimport MyPractice from 'components_v2/Header/Navbar/Menus/common/MyPractice'\nimport TopCategory from '../common/TopCategory'\n\nconst MobileMenuHeightTransition = styled(CSSTransition)(() =>\n css({\n '&.mobile-menu-enter-active': {\n height: '0'\n },\n '&.mobile-menu-enter-done': {\n height: '100%',\n transition: '.3s'\n },\n '&.mobile-menu-exit': {\n height: '100%'\n },\n '&.mobile-menu-exit-active': {\n height: '0',\n transition: '.3s'\n }\n })\n)\nconst FlexTopBar = styled(Flex)`\n ${css({\n alignItems: 'center',\n justifyContent: 'space-between',\n position: 'sticky',\n top: '0',\n background: '#fff',\n zIndex: '10002',\n mb: '16px',\n px: '15px'\n })}\n`\n\nconst MobileMenu = ({ open, onToggle }) => {\n const topCatagories = topCategory.reduce((categories, item) => {\n return [...categories, item.key]\n }, [])\n\n const headerHeight = [heights.navbar.mobile, null, heights.navbar.desktop]\n const [page, setPage] = useState('Home')\n\n const closeMobileMenu = () => {\n onToggle()\n setPage('Home')\n }\n\n const pageSelected = (value) => {\n setPage(value)\n }\n\n const page2 = page === 'my_practice' || topCatagories.includes(page)\n\n return (\n \n \n \n {/* show back arrow on page 2, and on page 1 keep the flex items the same with empty div */}\n {page2 ? (\n setPage('Home')} margin='5px'>\n \n \n ) : (\n \n )}\n \n \n \n \n \n {(() => {\n if (topCatagories.includes(page)) {\n return (\n \n \n \n )\n } else if (page === 'my_practice') {\n return (\n \n \n \n )\n } else {\n return \n }\n })()}\n \n \n )\n}\n\nMobileMenu.propTypes = {\n open: PropTypes.bool.isRequired,\n onToggle: PropTypes.func.isRequired\n}\n\nexport default MobileMenu\n","import React, { useRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport AnimateCollapse from 'react-collapse'\nimport { CloseIcon, MobileSearchIcon, LeftArrowIcon } from 'components_v2/Icons'\n\nimport { useBodyScrollLock, useOutsideClick, useSearchAPI } from 'hooks'\nimport { Box, Flex, Input as UnstyledInput } from 'ui/acro'\nimport { defaultValues as inputStyles } from 'ui/acro/typography/P'\nimport { CSSTransition } from 'react-transition-group'\nimport DrawerResults from './SearchDrawer/DrawerResults'\n\nconst CSSTransitionBox = styled(CSSTransition)(() =>\n css({\n '&.mobile-search-enter-active': {\n height: '0',\n opacity: '0'\n },\n '&.mobile-search-enter-done': {\n height: '100%',\n transition: '.3s',\n opacity: '1'\n },\n '&.mobile-search-exit': {\n height: '100%',\n opacity: '1'\n },\n '&.mobile-search-exit-active': {\n height: '0',\n transition: '.3s',\n opacity: '0'\n }\n })\n)\n\nconst SearchContainer = styled(Flex)((props) =>\n css({\n position: 'absolute',\n top: 0,\n right: 0,\n zIndex: 2,\n width: '100%',\n background: props.theme.colors.base,\n alignItems: 'center',\n boxShadow:\n '0px 1px 4px rgba(0, 0, 0, 0.06), 0px 8px 16px rgba(35, 41, 54, 0.08)'\n })\n)\n\nconst SearchForm = styled('form')(\n css({\n display: 'flex',\n alignItems: 'center',\n padding: ['0 15px', '0 20px'], // Because we render this in legacy templates, we need to override padding set by application.css\n width: '100%'\n })\n)\n\nconst SearchInput = styled(UnstyledInput)(\n css({\n ...inputStyles,\n marginTop: '0px', // Set mt to 0 to override existing styles for inputs.\n border: 'none',\n outline: 'none',\n color: '#000000',\n letterSpacing: '.02em',\n padding: 0,\n width: '100%',\n '&:focus': {\n '::placeholder': {\n color: '#cccccc'\n }\n }\n })\n)\n\nconst CollapseContainer = styled('div')((props) =>\n css({\n '& > .ReactCollapse--collapse': {\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n width: '100%',\n transition: 'height 250ms cubic-bezier(0.4, 0, 0.2, 1)',\n\n '& > .ReactCollapse--content': {\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n maxHeight: '100vh',\n bg: props.theme.colors.base,\n boxShadow: `0 8px 16px -10px #808080c7`\n }\n }\n })\n)\n\nconst IconsContainer = styled(Flex)(\n css({\n alignItems: 'center',\n justifyContent: 'space-between',\n width: '90px',\n '#search-enter-button-mobile': {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: 'black',\n borderRadius: '4px',\n padding: '10px',\n '#mobile-search-icon': {\n margin: 'auto',\n display: 'block'\n }\n }\n })\n)\n\nconst MobileSearch = () => {\n const {\n value,\n debouncedValue,\n data,\n handleBlur,\n handleChange,\n handleSubmit\n } = useSearchAPI()\n\n const searchInput = useRef(null)\n const [showSearchBar, setShowSearchBar] = useState(false)\n\n const toggleBodyLock = useBodyScrollLock()\n\n const openSearch = () => {\n toggleBodyLock()\n setShowSearchBar(true)\n }\n const closeSearch = () => {\n toggleBodyLock()\n handleBlur()\n setShowSearchBar(false)\n }\n const toggleSearch = () => {\n if (showSearchBar === false) {\n openSearch()\n } else {\n closeSearch()\n }\n }\n const clearInput = () => {\n handleBlur()\n searchInput.current.focus()\n }\n\n const outsideClickRef = useRef()\n useOutsideClick(outsideClickRef, toggleSearch, showSearchBar)\n\n return (\n // below ref targets the first child element\n \n <>\n \n \n \n {\n setShowSearchBar(true)\n }}\n onExited={() => {\n setShowSearchBar(false)\n }}\n >\n \n \n \n \n \n \n\n {value ? (\n \n \n \n \n \n \n \n \n ) : (\n \n \n \n )}\n \n \n \n\n \n \n \n \n \n \n \n )\n}\n\nMobileSearch.propTypes = {\n open: PropTypes.bool,\n onToggle: PropTypes.func\n}\n\nexport default MobileSearch\n","import React from 'react'\nimport { useNavbarContext } from '../common/data/_store'\nimport { Responsive, Box } from 'ui/acro'\nimport { HamburgerMenuIcon } from 'components_v2/Icons'\nimport NotificationBadge from '../Desktop/RightContent/Profile/NotificationBadge'\n\nconst MobileMenuContainer = ({ menuIsOpen, toggleMenu }) => {\n const { state } = useNavbarContext()\n\n return (\n \n {/* Mobile/tablet menu */}\n \n \n \n \n {state.notificationCount > 0 && (\n \n )}\n \n \n )\n}\n\nexport default MobileMenuContainer\n","import React from 'react'\nimport styled from 'styled-components'\nimport css from '@styled-system/css'\n\nimport DropdownMenu from 'components_v2/Header/Navbar/Menus/common/DropdownMenu'\nimport MyPractice from 'components_v2/Header/Navbar/Menus/common/MyPractice'\n\nconst MyPracticeDropdown = styled(DropdownMenu)(() =>\n css({\n position: 'absolute',\n width: '100%',\n top: '3.5em',\n left: '0',\n '.menu-container': {\n alignItems: 'unset'\n }\n })\n)\n\nconst MyPracticeDropdownMenu = () => {\n return (\n \n \n \n )\n}\n\nexport default MyPracticeDropdownMenu\n","import React from 'react'\nimport css from '@styled-system/css'\nimport styled from 'styled-components'\n\nimport DropdownMenu from 'components_v2/Header/Navbar/Menus/common/DropdownMenu'\nimport TopCategory from 'components_v2/Header/Navbar/Menus/common/TopCategory'\n\nconst TopCategoryDropdown = styled(DropdownMenu)(() =>\n css({\n position: 'absolute',\n width: '100%',\n top: '3.5em',\n left: '0',\n '.menu-container': {\n alignItems: 'unset'\n }\n })\n)\n\nconst TopCategoryDropdownMenu = ({ hoverCategory }) => {\n return (\n \n \n \n )\n}\n\nexport default TopCategoryDropdownMenu\n","import React, { useState } from 'react'\nimport { useUserContext } from 'context'\nimport styled from 'styled-components'\n\nimport { Flex, ResponsiveSVG } from 'ui/acro'\n\nimport MyPracticeDropdownMenu from './SignedIn/MyPractice/MyPracticeDropdownMenu'\nimport TopCategoryDropdownMenu from './SignedIn/TopCategory/TopCategoryDropdownMenu'\nimport { topCategory } from '../../common/data/topCategory'\n\nimport { YogaMat } from 'images/latest'\n\nconst NavWrapper = styled.div`\n display: flex;\n`\n\nconst NavItemFlex = styled(Flex)`\n /* need to use this css format for psuedo elements */\n align-items: center;\n gap: 5px;\n padding: 5px 0px;\n margin: 0px 10px;\n`\n\nconst NavTitle = styled.nav`\n font-family: Arquitecta;\n font-size: 1rem;\n font-weight: 900;\n letter-spacing: 0.07rem;\n text-transform: uppercase;\n margin: 0;\n position: relative;\n display: flex;\n &:after {\n content: '';\n z-index: 10;\n position: absolute;\n top: 20px;\n height: 3px;\n }\n &:after {\n width: ${(props) => (props.isHovour ? '100%' : '0')};\n transition: width 0.25s ease-in-out;\n background: currentColor;\n }\n`\n\nconst DesktopMiddleNavContent = () => {\n const { user } = useUserContext()\n const [myPracticeHovered, setMyPracticeHovered] = useState(false)\n const [topCategoryHovered, setTopCategoryHovered] = useState('')\n\n return (\n \n {user && (\n \n setMyPracticeHovered(true)}\n onMouseLeave={() => setMyPracticeHovered(false)}\n >\n \n My Practice\n {myPracticeHovered && }\n \n \n )}\n \n {topCategory.map((item) => (\n setTopCategoryHovered(item.key)}\n onMouseLeave={() => setTopCategoryHovered('')}\n >\n \n {item.value}\n \n {topCategoryHovered === item.key && (\n \n )}\n \n ))}\n \n \n )\n}\n\nexport default DesktopMiddleNavContent\n","import React, { useState, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport isWebView from 'is-ua-webview'\nimport { useUserContext } from 'context'\nimport { Flex, Box, componentHeights as heights } from 'ui/acro'\nimport { useBodyScrollLock, useWindowResize } from 'hooks'\nimport RightContent from './Menus/Desktop/RightContent/RightContent'\nimport MobileMenu from './Menus/Mobile/MobileMenu'\nimport MobileSearch from './Menus/Desktop/RightContent/Search/MobileSearch'\nimport MobileMenuContainer from './Menus/Mobile/MobileMenuContainer'\nimport Logo from './Logo'\nimport { NavbarStoreProvider } from './Menus/common/data/_store'\nimport DesktopMiddleNavContent from './Menus/Desktop/MiddleContent/MiddleNavContent'\n\nexport const StickyNavbar = styled(Flex)((props) =>\n css({\n position: 'sticky',\n top: 0,\n zIndex: 1002, // Existing CSS defines many z-indexes as 1000+\n height: [heights.navbar.mobile, null, heights.navbar.desktop],\n background: props.theme.colors.base,\n boxShadow:\n '0px 1px 4px rgba(0, 0, 0, 0.06), 0px 8px 16px rgba(35, 41, 54, 0.08)',\n px: ['11px', null, '20px'],\n transition: 'background 0.25s ease-in-out'\n })\n)\n\nconst LogoContainer = styled(Flex)`\n ${css({\n justifyContent: ['center', 'center', 'center', 'start'],\n zIndex: ['2', '2', '2', '3']\n })}\n`\n\nconst NavBarRightSection = styled.div`\n display: flex;\n gap: 2rem;\n align-items: ${(props) => (props.isLogin ? 'baseline' : 'end')};\n`\n\n// TODO: Conditionally render signed in/out nav based on user status\nconst Navbar = ({ links, auth }) => {\n const { user } = useUserContext()\n const [menuIsOpen, setMenuIsOpen] = useState(false)\n const showLeft = links\n const toggleBodyLock = useBodyScrollLock()\n\n const toggleMenu = () => {\n // This will keep the background from scrolling when a user has the mobile navbar menu open.\n toggleBodyLock()\n\n setMenuIsOpen((state) => !state)\n }\n\n const [size, setSize] = useState()\n const { width } = useWindowResize()\n useEffect(() => {\n setSize(width < 1200 ? 'mobileMenu' : 'desktopMenu')\n }, [width])\n const isDesktop = size === 'desktopMenu'\n\n const ua = navigator.userAgent\n //////////////////////////////////////////////////\n\n return (\n \n {/*\n Legacy pages:\n - id ReactNavbar is for fixed positioning in components_v1/StyledHeader\n - className js-navbar is for querySelector call in HelpPopup\n */}\n \n {/*\n The below is just the container that houses the hamburger menu icon, \n the actual mobile menu is rendered down on line 108 (this needs to be reworked, it's confusing)\n */}\n \n \n \n \n \n {showLeft && isDesktop && }\n \n {!isWebView(ua) && isDesktop && (\n \n )}\n {!isWebView(ua) && !isDesktop && user ? (\n \n \n \n ) : (\n !user &&\n !isDesktop && (\n \n \n \n )\n )}\n \n \n \n )\n}\n\nNavbar.propTypes = {\n links: PropTypes.bool,\n auth: PropTypes.bool\n}\n\nexport default Navbar\n","import Navbar, { StickyNavbar } from './Navbar'\nimport Logo from './Logo'\n\nexport { StickyNavbar, Logo }\n\nexport default Navbar\n","import axios from 'axios'\nimport {\n axiosInstanceConfig,\n interceptRequest,\n interceptResponseSucess,\n interceptResponseError\n} from './config'\n\nconst axiosInstance = axios.create(axiosInstanceConfig)\n\naxiosInstance.interceptors.request.use(interceptRequest)\n\naxiosInstance.interceptors.response.use(\n interceptResponseSucess,\n interceptResponseError\n)\n\nexport default axiosInstance\n","import { useQuery } from 'react-query'\n\nimport axios from './axios.config'\n\nconst getActiveBillboards = async () => {\n const { data } = await axios.get('/billboard/active')\n return data\n}\n\nexport const useGetActiveBillboards = () => {\n return useQuery('activeBillboards', getActiveBillboards)\n}\n","import {\n useQuery,\n useInfiniteQuery,\n useQueryClient,\n useMutation\n} from 'react-query'\nimport axios from './axios.config'\n\nconst transformClassTimes = (cls) => {\n const now = new Date()\n const startTime = new Date(cls.startTime)\n const isDone = now.getTime() >= cls.startTime + cls.durationMs\n const isLive = now.getTime() >= cls.startTime && !isDone\n const isOpen = now.getTime() + cls.leadTimeMs >= cls.startTime && !isDone\n const durationMin = Math.floor(cls.durationMs / 60000)\n\n const day =\n now.toDateString() === startTime.toDateString()\n ? 'Today'\n : startTime.toLocaleDateString(undefined, {\n month: 'short',\n day: '2-digit'\n })\n\n const dayOfWeek =\n now.toDateString() === startTime.toDateString()\n ? 'Today'\n : startTime.toLocaleDateString(undefined, { weekday: 'long' })\n\n const time = startTime.toLocaleTimeString(undefined, {\n hour: 'numeric',\n minute: '2-digit'\n })\n\n const date = startTime.toLocaleDateString(undefined, {\n month: 'long',\n day: '2-digit',\n year: 'numeric'\n })\n\n const remainingTimeMins =\n now.getTime() >= startTime\n ? Math.floor(\n (startTime.getTime() + cls.durationMs - now.getTime()) / 60000\n )\n : durationMin\n\n return {\n ...cls,\n isOpen,\n isLive,\n isDone,\n day,\n dayOfWeek,\n time,\n date,\n remainingTimeMins,\n durationMin\n }\n}\n\nconst getLiveClassesStatic = async (afterId = null) => {\n const res = await axios.get('/live/schedule/static', {\n params: {\n v: 1,\n after_id: Boolean(afterId) ? afterId : null\n }\n })\n /* We need to coerce the data to make sure that date and time info displays correctly wherever these classes are used. */\n const data = res.data.data.reduce((acc, obj) => {\n const cls = transformClassTimes(obj)\n acc.push(cls)\n return acc\n }, [])\n\n return {\n beforeId: afterId - 1,\n afterId: afterId + 1,\n ...res.data,\n data\n }\n}\n\nconst getLiveClassDynamic = async (id) => {\n const res = await axios.get(`/live/class/${id}/dynamic`)\n if (res?.data) {\n return res.data\n }\n}\n\nexport const prefetchLiveClassDynamic = (queryClient, id) => {\n queryClient.prefetchQuery(['liveClassDynamic', id], () =>\n getLiveClassDynamic(id)\n )\n}\n\nconst getLiveClassStatic = async (id) => {\n const res = await axios.get(`/live/class/${id}/static`)\n if (res.data) {\n return transformClassTimes(res.data)\n } else {\n throw Error('Class not found')\n }\n}\n\nexport const updateLiveClassScheduled = async (id, scheduled) => {\n const result = await axios.put(`live/my_schedule`, {\n changes: [{ class_id: id, in_my_schedule: scheduled }]\n })\n return result\n}\n\nexport const useGetNextLiveClass = () => {\n const { data } = useGetLiveClassesStaticInfinite()\n const nextClass = data ? data.pages[0].data[0] : null\n return nextClass ? transformClassTimes(nextClass) : null\n}\n\nexport const useGetLiveClassesStatic = (afterId) => {\n return useQuery('liveClassesStatic', () => getLiveClassesStatic(afterId))\n}\n\nexport const useGetLiveClassesStaticInfinite = () => {\n return useInfiniteQuery(\n ['liveClassesStaticInfinite'],\n async ({ pageParam = 0 }) => {\n const classes = await getLiveClassesStatic(pageParam)\n\n return classes\n },\n {\n getNextPageParam: (lastPage) =>\n lastPage.afterId ? lastPage.afterId : false,\n getPreviousPageParam: (lastPage) =>\n lastPage.beforeId ? lastPage.beforeId : false\n }\n )\n}\n\nexport const useGetLiveClassDynamic = (id) => {\n return useQuery(['liveClassDynamic', id], () => getLiveClassDynamic(id), {\n retry: false\n })\n}\n\nexport const useGetLiveClassStatic = (id) => {\n return useQuery(['liveClassStatic', id], () => getLiveClassStatic(id), {\n retry: false\n })\n}\n\nexport const useUpdateLiveClassDynamic = (id) => {\n const queryClient = useQueryClient()\n const { data } = useGetLiveClassDynamic(id)\n return useMutation(\n () => updateLiveClassScheduled(id, !(data?.inMySchedule || false)),\n {\n onMutate: async () => {\n // Cancel any ongoing queries\n await queryClient.cancelQueries(['liveClassDynamic', id])\n // Get the previous value (in case there's an error and we need to revert back to previous state)\n const previousDynamicClass = queryClient.getQueryData([\n 'liveClassDynamic',\n id\n ])\n // Optimistically update the checkbox\n queryClient.setQueryData(['liveClassDynamic', id], (old) => ({\n ...old,\n scheduled: !old.scheduled\n }))\n return previousDynamicClass\n },\n // Error occurred - revert back to previous state\n onError: (_, _1, previousDynamicClass) =>\n queryClient.setQueryData(\n ['liveClassDynamic', id],\n previousDynamicClass\n ),\n // Success! invalidate the query to re-query the data in the background\n onSuccess: () => queryClient.invalidateQueries(['liveClassDynamic', id])\n }\n )\n}\n","import { useQuery } from 'react-query'\nimport axios from './axios.config'\n\nconst getSupportCategoryList = async () => {\n const res = await axios.get(`/support/`)\n if (res.data) {\n return {\n data: res.data\n }\n } else {\n throw Error('Data not found')\n }\n}\n\nconst getSupportCategoryDocumentList = async (category) => {\n const res = await axios.get(`/support/${category}`)\n if (res.data) {\n return {\n data: res.data\n }\n } else {\n throw Error('Data not found')\n }\n}\n\nconst getSupportDocument = async (category, slug) => {\n const res = await axios.get(`/support/${category}/${slug}`)\n if (res.data) {\n return {\n data: res.data\n }\n } else {\n throw Error('Data not found')\n }\n}\n\nconst searchSupportDocuments = async (input) => {\n const res = await axios.get(`/support/search?q=${input}`)\n if (res.data) {\n return {\n data: res.data\n }\n } else {\n throw Error('Data not found')\n }\n}\n\nexport const useGetSupportCategoryList = () => {\n return useQuery('useGetSupportCategoryList', () => getSupportCategoryList())\n}\n\nexport const useGetSupportCategoryDocumentList = (category) => {\n return useQuery(['useGetSupportCategoryDocumentList', category], () =>\n getSupportCategoryDocumentList(category)\n )\n}\n\nexport const useGetSupportDocument = (category, slug) => {\n return useQuery(['useGetSupportDocument', category, slug], () =>\n getSupportDocument(category, slug)\n )\n}\n\nexport const useSearchSupportDocuments = (query) => {\n const sanitizedQuery = query.replace(/[^A-Za-z0-9 ]/g, '');\n return useQuery(\n ['useSearchSupportDocuments', sanitizedQuery],\n () => searchSupportDocuments(sanitizedQuery),\n {\n // only fetch search terms longer than 2 characters\n enabled: sanitizedQuery.length > 2\n }\n )\n}\n","import axios from './axios.config'\nimport { useQuery } from 'react-query'\n\nconst getMembershipPlans = async () => {\n const { data } = await axios.get('/membership_plans', {\n params: { v: '1' }\n })\n return data\n}\n\nexport const useGetMembershipPlans = () =>\n useQuery('getMembershipPlans', getMembershipPlans)\n","import axios from './axios.config'\n\nexport const getRedemptionOffer = (slug) => {\n return axios.get(`redemption_offers/${slug}?all=true`)\n}\n","const GEOLOCATION_URL =\n process.env.NODE_ENV === 'production'\n ? 'https://geolocation.alo.software'\n : 'https://geolocation.dev.alo.software'\n\nexport const getCountry = async (fallback = true) => {\n try {\n const response = await fetch(GEOLOCATION_URL)\n const country = await response.json()\n const result = country.country_code === 'CA' ? 'CA' : 'US'\n\n return result\n } catch (error) {\n console.error(error)\n if (fallback) {\n return 'US'\n }\n return ''\n }\n}\n\nexport default getCountry\n","import { useEffect, useState } from 'react'\nimport { getCountry } from 'helpers/getCountry'\n\nconst useGetCountry = (fallback = true) => {\n const [country, setCountry] = useState('')\n useEffect(() => {\n if (!country) {\n getCountry(fallback).then((res) => {\n setCountry(res)\n })\n }\n }, [fallback])\n\n return country\n}\n\nexport default useGetCountry\n","import { css } from '@styled-system/css'\nimport {\n CardSubtitle,\n CardTitle\n} from 'components_v2/Home/SignedIn/common/styles'\nimport styledComponents from 'styled-components'\n\nexport const SearchCardTitle = styledComponents(CardTitle)`\n${css({\n fontSize: ['14px', '16px'],\n lineHeight: 'normal',\n pb: '6px'\n})}\n`\nexport const SearchCardSubitle = styledComponents(CardSubtitle)`\n${css({\n fontSize: ['12px', '14px'],\n lineHeight: '16.1px'\n})}`\n","const GEOLOCATION_URL =\n process.env.NODE_ENV === 'production'\n ? 'https://geolocation.alo.software'\n : 'https://geolocation.dev.alo.software'\n\nexport const getLocation = async () => {\n try {\n const response = await fetch(GEOLOCATION_URL)\n const country = await response.json()\n return country.country_code ? country.country_code : null\n } catch (error) {\n console.error(error)\n return null\n }\n}\n\nexport default getLocation\n","import axios from 'axios'\nimport camelize from 'camelize'\nimport {\n axiosInstanceConfig,\n interceptRequest,\n interceptResponseSucess,\n interceptResponseError\n} from './config'\n\nconst transformResponse = (data) => {\n try {\n if (data) {\n data = JSON.parse(data)\n data = camelize(data)\n }\n } catch (e) {\n // Keep unparsable data as is\n }\n return data\n}\n\nconst axiosInstance = axios.create({\n ...axiosInstanceConfig,\n transformResponse\n})\n\naxiosInstance.interceptors.request.use(interceptRequest)\n\naxiosInstance.interceptors.response.use(\n interceptResponseSucess,\n interceptResponseError\n)\n\nexport default axiosInstance\n","import { useState } from 'react'\n\n// TODO Accessibility: we should move any elements used during a toggleLock() to their own Portal so we can add aria-hidden to during a lock.\n\nconst useBodyScrollLock = () => {\n const [locked, setLocked] = useState()\n\n const toggleBodyLock = () => {\n if (!locked) {\n document.body.classList.add('prevent-scroll')\n setLocked(true)\n } else {\n document.body.classList.remove('prevent-scroll')\n setLocked(false)\n }\n }\n\n return toggleBodyLock\n}\n\nexport default useBodyScrollLock\n","import { useState, useEffect } from 'react'\n\n// this represents all of the focusable elements we wish to include.\n// Might be a good refactor to enable users to append this with their own elements as well.\nconst FOCUSABLE_STRING =\n 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex=\"0\"], [contenteditable]'\n\n/**\n * This is a *DANGEROUS* hook, and is thus labelled.\n * It takes the id of a DOM node and supplies two helper functions; a setter and a cleanup.\n * The setter will iterate through the DOM node and its children searching for focusable elements.\n * It will then TRAP THE USER KEYBOARD within those elements until the cleanup function clearKeyboardTrap_Dangerous() is called.\n *\n * ONLY USE THIS HOOK TO IMPROVE ACCESSIBILITY! BE VERY CAREFUL WHEN IMPLEMENTING IT!\n * @param {string} id The id of the element we want to set the Keyboard trap on.\n *\n * @returns {Object} hookReturn The setter and cleanup functions\n * @returns {function} hookReturn.setKeyboardTrap_Dangerous - sets the Keyboard trap. Remember to call clearKeyboardTrap_Dangerous() when finished!\n * @returns {function} hookReturn.clearKeyboardTrap_Dangerous - clears the Keyboard trap.\n */\nconst useKeyboardTrap_Dangerous = (id) => {\n const [tabs, setTabs] = useState(null)\n\n const trapTabKey = (e) => {\n // Check for TAB key press\n if (e.keyCode === 9) {\n // SHIFT + TAB\n if (e.shiftKey) {\n if (document.activeElement === tabs.first) {\n e.preventDefault()\n tabs.last.focus()\n }\n\n // TAB\n } else {\n if (document.activeElement === tabs.last) {\n e.preventDefault()\n tabs.first.focus()\n }\n }\n }\n }\n\n /**\n * Cleans up and removes the Keyboard trap.\n */\n const clearKeyboardTrap_Dangerous = () => {\n setTabs(null)\n }\n\n /**\n * Sets up the Keyboard trap. Remember to call clearKeyboardTrap_Dangerous() when finished.\n */\n const setKeyboardTrap_Dangerous = () => {\n const element = document.getElementById(id)\n if (element) {\n let focusableElements = element.querySelectorAll(FOCUSABLE_STRING)\n // convert NodeList to Array\n focusableElements = Array.prototype.slice.call(focusableElements)\n if (focusableElements.length > 0) {\n const boundaries = {\n first: focusableElements[0],\n last: focusableElements[focusableElements.length - 1]\n }\n\n // Set first item as focused and update state.\n boundaries.first.focus()\n setTabs(boundaries)\n }\n }\n }\n\n /* Add the keyboard trap to 'keydown' event and cleanup as needed */\n useEffect(() => {\n if (tabs) {\n document.addEventListener('keydown', trapTabKey)\n }\n\n return () => {\n if (tabs) {\n document.removeEventListener('keydown', trapTabKey)\n }\n }\n }, [tabs])\n\n return { setKeyboardTrap_Dangerous, clearKeyboardTrap_Dangerous }\n}\n\nexport default useKeyboardTrap_Dangerous\n","import { useEffect } from 'react'\n\n// This hook checks whether a mouseclick occurs within an element that has been opened (modal or dropdown).\n// It also detects whether a user presses escape.\n// It needs a ref to the element (useRef()), a handler callback function (e.g. to close dropdown), and the state of whether the component is open or not.\n// To have useOutsideClick() properly seated in the DOM, you must wrap any element you want to target with
.\n\nconst useOutsideClick = (ref, handler, open) => {\n useEffect(() => {\n const listener = (event) => {\n if (!ref.current || ref.current.contains(event.target)) {\n // if we click inside of the current element or its children, do nothing\n return\n }\n handler()\n }\n\n const escapeListener = (event) => {\n const key = event.key || event.keyCode\n if (key === 'Escape' || key === 'Esc' || key === 27) {\n handler()\n }\n }\n\n if (open) {\n document.addEventListener('keyup', escapeListener)\n document.addEventListener('mousedown', listener)\n document.addEventListener('touchstart', listener)\n } else {\n document.removeEventListener('keyup', escapeListener)\n document.removeEventListener('mousedown', listener)\n document.removeEventListener('touchstart', listener)\n }\n\n return () => {\n document.removeEventListener('keyup', escapeListener)\n document.removeEventListener('mousedown', listener)\n document.removeEventListener('touchstart', listener)\n }\n }, [open, handler])\n}\n\nexport default useOutsideClick\n","import { useEffect, useRef, useState } from 'react'\n\n// Note that if threshold is an array it MUST be defined outside of the consuming component's body.\n// This is because if it is defined inline, it will re-create the array every re-render, triggering a disconnect and reconnect of the observer.\nconst useIntersectionObserver = ({\n root = null,\n rootMargin,\n threshold = 0\n} = {}) => {\n const [entry, setEntry] = useState({})\n const [node, setNode] = useState(null)\n\n const observer = useRef(null)\n\n useEffect(() => {\n if (observer.current) observer.current.disconnect()\n\n observer.current = new window.IntersectionObserver(\n ([entry]) => setEntry(entry),\n {\n root,\n rootMargin,\n threshold\n }\n )\n\n const { current: currentObserver } = observer\n\n if (node) currentObserver.observe(node)\n\n return () => currentObserver.disconnect()\n }, [node, observer, root, rootMargin, threshold])\n\n return [entry, setNode]\n}\n\nexport default useIntersectionObserver\n","// Shamelessly nicked from https://www.joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion/\nimport { useEffect, useState } from 'react'\n\nconst QUERY = '(prefers-reduced-motion: no-preference)'\nconst isRenderingOnServer = typeof window === 'undefined'\n\nconst getInitialState = () => {\n // For our initial server render, we won't know if the user\n // prefers reduced motion, but it doesn't matter. This value\n // will be overwritten on the client, before any animations\n // occur.\n return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches\n}\n\nconst usePrefersReducedMotion = () => {\n const [prefersReducedMotion, setPrefersReducedMotion] = useState(\n getInitialState\n )\n\n useEffect(() => {\n const mediaQueryList = window.matchMedia(QUERY)\n const listener = (event) => {\n setPrefersReducedMotion(!event.matches)\n }\n\n try {\n mediaQueryList.addEventListener('change', listener)\n } catch (e) {\n // try using the deprecated version\n mediaQueryList.addListener(listener)\n }\n\n return () => {\n try {\n mediaQueryList.removeEventListener('change', listener)\n } catch (e) {\n mediaQueryList.removeListener(listener)\n }\n }\n }, [])\n return prefersReducedMotion\n}\n\nexport default usePrefersReducedMotion\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport { P } from 'ui/acro'\n\nconst Title = styled(P)`\n ${css({\n fontFamily: 'Arquitecta',\n fontWeight: '400',\n fontSize: '15px',\n letterSpacing: '0.08em',\n textTransform: 'uppercase',\n color: 'black',\n margin: '0' // overwrite legacy p margin in application.css\n })}\n`\nexport default Title\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport { P } from 'ui/acro'\n\nconst Count = styled(P)`\n ${css({\n fontWeight: '400',\n fontSize: '16px',\n color: '#636363',\n margin: '0', // overwrite legacy p margin in application.css\n lineHeight: '16px'\n })}\n`\nexport default Count\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport { Button } from 'ui/acro'\n\nconst SeeAllButton = styled(Button)`\n ${css({\n width: '100%',\n minWidth: '222px',\n maxWidth: [null, '300px', '300px', '300px'],\n border: '1px solid #A3A3A3',\n fontSize: '15px',\n fontWeight: 500,\n '@media only screen and (min-width: 1024px)': {\n '&:hover': {\n border: '1px solid #F2F2F2',\n backgroundColor: '#F2F2F2',\n color: 'black'\n }\n }\n })}\n`\nexport default SeeAllButton\n","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from \"react\";\nexport default ({\n styles = {},\n ...props\n}) => ;","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { Account } from 'images/latest'\n\nconst AccountIcon = ({ color = 'white' }) => (\n \n)\n\nexport default AccountIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { ChevronRight, ChevronRightBold } from 'images/latest'\n\nconst ChevronRightIcon = ({ color = 'white', isBold = false }) => (\n <>\n {isBold ? (\n \n ) : (\n \n )}\n \n)\n\nexport default ChevronRightIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { ChevronDown } from 'images/latest'\n\nconst ChevronDownIcon = ({ color = 'white' }) => (\n \n)\n\nexport default ChevronDownIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { Dashboard } from 'images/latest'\n\nconst DashboardIcon = () => (\n \n)\n\nexport default DashboardIcon\n","import React from 'react'\nimport { MobileSearch } from 'images/latest'\nimport { ResponsiveSVG } from 'ui/acro'\n\nconst MobileSearchIcon = ({ color, id }) => (\n \n)\n\nexport default MobileSearchIcon\n","import React from 'react'\nimport { DesktopSearch } from 'images/latest'\nimport { ResponsiveSVG } from 'ui/acro'\n\nconst DesktopSearchIcon = ({ color, id }) => (\n \n)\n\nexport default DesktopSearchIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { Fire } from 'images/latest'\n\nconst FireIcon = () => (\n \n)\n\nexport default FireIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { Close } from 'images/latest'\nconst CloseIcon = ({ width = '12px', height = '12px', color, id }) => (\n \n)\nexport default CloseIcon\n","import React from 'react'\nimport styled from 'styled-components'\n\nimport { useUserContext } from 'context'\n\nconst RoundIcon = styled.div`\n width: 1.75rem;\n height: 1.75rem;\n background-color: ${(props) => (props.isHovered ? '#000' : '#e0d7d1')};\n color: ${(props) => (props.isHovered ? '#FFF' : '#000')};\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: Arquitecta;\n font-size: 0.625rem;\n font-weight: 900;\n letter-spacing: 0.04375rem;\n text-transform: uppercase;\n`\n\nconst ProfileIcon = ({ isHovered }) => {\n const { user } = useUserContext()\n const firstNameChar = user?.firstName?.charAt(0) || ''\n const lastNameChar = user?.lastName?.charAt(0) || ''\n const profileText = firstNameChar + lastNameChar\n\n return {profileText}\n}\n\nexport default ProfileIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { Video } from 'images/latest'\n\nconst VideoIcon = () => (\n \n)\n\nexport default VideoIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { Phone } from 'images/latest'\n\nconst PhoneIcon = () => (\n \n)\n\nexport default PhoneIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { Ticket } from 'images/latest'\n\nconst TicketIcon = () => (\n \n)\n\nexport default TicketIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { Gift } from 'images/latest'\n\nconst GiftIcon = () => (\n \n)\n\nexport default GiftIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { Label } from 'images/latest'\n\nconst LabelIcon = () => (\n \n)\n\nexport default LabelIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { FAQBackArrow } from 'images/latest'\n\nconst FAQBackArrowIcon = ({ color = 'black' }) => (\n \n)\n\nexport default FAQBackArrowIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { Twinkle } from 'images/latest'\n\nconst TwinkleIcon = ({ color }) => (\n \n)\n\nexport default TwinkleIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { HamburgerMenu } from 'images/latest'\nconst HamburgerMenuIcon = ({ width = '20px', height = '20px', color, id }) => (\n \n)\n\nexport default HamburgerMenuIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { LeftArrow } from 'images/latest'\n\nconst LeftArrowIcon = ({\n color = 'black',\n width = '16px',\n height = '16px'\n}) => (\n \n)\n\nexport default LeftArrowIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { CommunityBarre } from 'images/latest'\n\nconst CommunityBarreIcon = ({ color = 'black' }) => (\n \n)\n\nexport default CommunityBarreIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { CommunityCycling } from 'images/latest'\n\nconst CommunityCyclingIcon = ({ color = 'black' }) => (\n \n)\n\nexport default CommunityCyclingIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { CommunityGym } from 'images/latest'\n\nconst CommunityGymIcon = ({ color = 'black' }) => (\n \n)\n\nexport default CommunityGymIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { CommunityRunning } from 'images/latest'\n\nconst CommunityRunningIcon = ({ color = 'black' }) => (\n \n)\n\nexport default CommunityRunningIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { CommunitySwimming } from 'images/latest'\n\nconst CommunitySwimmingIcon = ({ color = 'black' }) => (\n \n)\n\nexport default CommunitySwimmingIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { CommunityYoga } from 'images/latest'\n\nconst CommunityYogaIcon = ({ color = 'black' }) => (\n \n)\n\nexport default CommunityYogaIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { CommunityWalking } from 'images/latest'\n\nconst CommunityWalkingIcon = ({ color = 'black' }) => (\n \n)\n\nexport default CommunityWalkingIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { CommunityHiking } from 'images/latest'\n\nconst CommunityHikingIcon = ({ color = 'black' }) => (\n \n)\n\nexport default CommunityHikingIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { CommunityCrossfit } from 'images/latest'\n\nconst CommunityCrossfitIcon = ({ color = 'black' }) => (\n \n)\n\nexport default CommunityCrossfitIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { CommunityOther } from 'images/latest'\n\nconst CommunityOtherIcon = ({ color = 'black' }) => (\n \n)\n\nexport default CommunityOtherIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { CommunityLog } from 'images/latest'\n\nconst CommunityLogIcon = ({\n color = 'black',\n width = '26px',\n height = '26px'\n}) => (\n \n)\n\nexport default CommunityLogIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { HeartLike } from 'images/latest'\n\nconst HeartLikeIcon = ({\n color = '#BFBFBF',\n width = '35px',\n height = '31px'\n}) => (\n \n)\n\nexport default HeartLikeIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { Camera } from 'images/latest'\n\nconst CameraIcon = ({ color = 'black', width = '30px', height = '30px' }) => (\n \n)\n\nexport default CameraIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { StarFilled } from 'images/bend/rating'\n\nconst StarIcon = ({\n color = 'black',\n width = '30px',\n height = '30px'\n}) => (\n \n)\n\nexport default StarIcon\n","import React from 'react'\nimport { TrashLight } from 'images/latest'\nimport { ResponsiveSVG } from 'ui/acro'\n\nconst TrashLightIcon = ({\n color = '#A3A3A3',\n width = '24px',\n height = '24px'\n}) => (\n \n)\n\nexport default TrashLightIcon\n","import React from 'react'\nimport { FlagLight } from 'images/latest'\nimport { ResponsiveSVG } from 'ui/acro'\n\nconst FlagLightIcon = ({\n color = '#A3A3A3',\n width = '24px',\n height = '24px'\n}) => (\n \n)\n\nexport default FlagLightIcon\n","import React from 'react'\nimport { Lotus } from 'images/latest'\nimport { ResponsiveSVG } from 'ui/acro'\n\nconst LotusIcon = ({ color = 'black', width = '97px', height = '61px' }) => (\n \n)\n\nexport default LotusIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { ContentPlaylist } from 'images/latest'\n\nconst ContentPlaylistIcon = ({ color = 'black' }) => (\n \n)\n\nexport default ContentPlaylistIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { ContentSeries } from 'images/latest'\n\nconst ContentSeriesIcon = ({ color = 'black' }) => (\n \n)\n\nexport default ContentSeriesIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { ContentShare } from 'images/latest'\n\nconst ContentShareIcon = ({ color = 'black' }) => (\n \n)\n\nexport default ContentShareIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { Info } from 'images/latest'\n\nconst InfoIcon = ({ color = 'black', width = '16px', height = '16px' }) => (\n \n)\n\nexport default InfoIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { FacebookSVG } from 'images/latest'\n\nconst FacebookIcon = ({ color, width = '24px', height = '24px' }) => (\n \n)\n\nexport default FacebookIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { InstagramSVG } from 'images/latest'\n\nconst InstagramIcon = ({ color, width = '24px', height = '24px' }) => (\n \n)\n\nexport default InstagramIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { TikTokSVG } from 'images/latest'\n\nconst TikTokIcon = ({ color, width = '24px', height = '24px' }) => (\n \n)\n\nexport default TikTokIcon\n","import React from 'react'\nimport { ResponsiveSVG } from 'ui/acro'\nimport { AlomovesSVG } from 'images/latest'\n\nconst AlomovesIcon = ({ color = 'black', width = '30px', height = '30px' }) => (\n \n)\n\nexport default AlomovesIcon\n","window.dataLayer = window.dataLayer || []\n\nexport const unlock_membership_event = (location) => {\n window.dataLayer?.push({\n event: 'unlock_membership_select',\n membership_location: location\n })\n}\n\nexport const payment_membership_chosen = (type, promo_code) => {\n window.dataLayer?.push({\n event: 'payment_membership_chosen',\n sub_plan: type,\n promo_code: promo_code || null\n })\n}\n\nexport const survey_started_event = () => {\n window.dataLayer?.push({\n event: 'new_survey_started'\n })\n}\n\nexport const survey_skipped_event = () => {\n window.dataLayer?.push({\n event: 'new_survey_skipped'\n })\n}\n\nexport const survey_finished_event = () => {\n window.dataLayer?.push({\n event: 'new_survey_finished'\n })\n}\n\nexport const code_redeemed_event = (gtm_event_params, type) => {\n if (window.dataLayer) {\n window.dataLayer.push({\n event: 'code_redeemed',\n type: type,\n promo_code: gtm_event_params.promo_code,\n unique_code: gtm_event_params.unique_code || ''\n })\n }\n}\n\n// method param accepts: [email, facebook, apple]\nexport const sign_up_initiated_event = (method) => {\n window.dataLayer?.push({\n event: 'sign_up_initiated',\n method: method\n })\n}\n\nconst format_filter_values = (type, value, options) => {\n let filterValue\n let filterType\n\n switch (type) {\n case 'instructors':\n filterValue = value.user?.name\n filterType = 'instructor_filtered'\n break\n case 'styles':\n // Temporal solution for GA4 phase one\n // The filter value selected by the user is supposed to be stored in value.slug.\n // However, due to an issue with iOS not sending the value correctly,\n // we are sending the primary category instead.\n filterValue =\n options.root && options.root.slug ? options.root.slug : value.slug\n filterType = 'style_filtered'\n break\n case 'intensities':\n filterValue = value.level\n filterType = 'intensity_filtered'\n break\n case 'difficulties':\n filterValue = value\n filterType = 'difficulty_filtered'\n break\n case 'duration':\n filterValue = `${value.min}-${value.max}`\n filterType = 'duration_filtered'\n break\n case 'focus_area':\n filterValue = value.level\n filterType = 'focus_area_filtered'\n break\n case 'equipment':\n filterValue = value.level\n filterType = 'equipment_filtered'\n break\n case 'yoga':\n case 'fitness':\n case 'mindfulness':\n case 'wellness':\n case 'skills':\n filterValue = value.level\n filterType = 'style_filtered'\n break\n default:\n filterValue = value\n filterType = type\n break\n }\n return {\n formattedValue: filterValue,\n formattedType: filterType\n }\n}\n\nexport const class_series_finder_filter_event = (\n type,\n value,\n options = null\n) => {\n const { formattedType } = format_filter_values(type, value, options)\n\n if (window.dataLayer) {\n window.dataLayer.push({\n event: formattedType,\n filter_value: value\n })\n }\n}\n\nexport const sort_by_event = (location, value) => {\n let filterValue\n\n switch (value) {\n case 'az':\n filterValue = 'a-z'\n break\n case 'date':\n filterValue = 'newest'\n break\n case 'rank':\n filterValue = 'popular'\n break\n case 'relevance':\n filterValue = 'relevant'\n break\n default:\n filterValue = value\n }\n // This event has to trigger with just these two values\n // even if the component calling it is located in other parts of the site.\n if (window.dataLayer && (location === 'classes' || location === 'series')) {\n window.dataLayer.push({\n event: 'sorted_by',\n location: location === 'classes' ? 'class_finder' : 'series_finder',\n filter_value: filterValue\n })\n }\n}\n\nexport const welcome_event_viewed = () => {\n window.dataLayer?.push({\n event: 'Welcome_page_viewed'\n })\n}\n\nexport const welcome_event_tapped = () => {\n window.dataLayer?.push({\n event: 'Welcome_page_tapped'\n })\n}\n\nexport const home_signed_in_billboard_click_event = (title, position) => {\n window.dataLayer?.push({\n event: 'home_signed_in_billboard_click',\n campaign_name: title,\n position: position\n })\n}\n\nexport const gift_card_added_event = () => {\n window.dataLayer.push({\n event: 'gift_card_added'\n })\n}\n\nexport const gift_card_interest_event = (location) => {\n window.dataLayer.push({\n event: 'gift_card_interest',\n location\n })\n}\n\nexport const gift_card_intent_event = () => {\n window.dataLayer.push({\n event: 'gift_card_intent'\n })\n}\n\nexport const casting_initiated_event = (method) => {\n window.dataLayer.push({\n event: 'casting_initiated',\n method\n })\n}\n\nexport const change_practice_tab_event = (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 window.dataLayer.push({\n event: eventMap[tab] || '',\n location: 'my_practice'\n })\n}\n\nexport const storeEventInLocalStorage = (eventData) => {\n let events = []\n try {\n const storage_data =\n JSON.parse(localStorage.getItem('ga4_event_list')) || []\n if (Array.isArray(storage_data)) {\n events = storage_data\n }\n } catch (e) {\n events = []\n }\n localStorage.setItem('ga4_event_list', JSON.stringify([...events, eventData]))\n}\n\nexport const retrieveAndClearEvents = () => {\n let events = []\n try {\n events = JSON.parse(localStorage.getItem('ga4_event_list')) || []\n } catch (e) {\n events = []\n }\n if (events && Array.isArray(events) && events.length > 0) {\n window.dataLayer.push(...events)\n localStorage.removeItem('ga4_event_list')\n }\n}\n","import React from 'react'\n\nclass ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hasError: false,\n errorMessage: null\n };\n }\n\n static getDerivedStateFromError(error) {\n // Update state so the next render will show the fallback UI.\n return {\n hasError: true,\n errorMessage: error.message\n };\n }\n\n componentDidCatch(error, errorInfo) {\n console.log(error)\n console.log(errorInfo)\n }\n\n render() {\n if (this.state.hasError) {\n // You can render any custom fallback UI\n return (\n \n
Something went wrong.
\n {this.state.errorMessage && (
{this.state.errorMessage}
)}\n \n );\n }\n\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary","import * as Yup from 'yup'\n\n/***\n * This function builds a Yup validator object.\n * It allows users to provide a validation type and list of validation methods which will chain together on top of the validation type.\n * NOTE: this will only build a single, top-level validator. It does not currently traverse to construct nested validators for objects or arrays.\n *\n * @type {array}\n *\n * @param {String} validationType -- the type of validation to build upon (e.g. 'string' | 'boolean'). For valid validation types, see https://github.com/jquense/yup\n * @param {String} validationTypeError -- optional string that will be returned as an error if an invalid type is supplied for validation.\n * @param {Object[]} validations -- An array of valid validations used to build validator chain.\n * @param {string} validations[].type -- The method to add to a validator array.\n * @param {any} validations[].params -- Any auxiliary params to feed into the validator method as args. The shape of this is dependent upon what the validations[].type method accepts.\n *\n * @returns {Object} -- Returns a valid Yup validator object - e.g. Yup.string().max(30, 'error message for max').required('String is required')\n */\nconst buildYupValidator = ({ validationType, validations }) => {\n // There is an invalid validationType on this field. Ignore it. We might want to throw here(?)\n if (!Yup[validationType]) return null\n\n let validator = Yup[validationType]()\n\n validations.forEach((validation) => {\n const { type, params } = validation\n\n if (!validator[type]) {\n // this method does not exist on the given validator (e.g. trying to add .min() to a Yup.boolean() call)\n return\n }\n if (type === 'matches') {\n // If we are doing regexp matching, we need to coerce the given string (params[0]) into a Regex object.\n const [regexp, ...rest] = params\n validator = validator[type](new RegExp(regexp), ...rest)\n } else {\n // params is an array that we can spread out into the type, allowing us to pass in error messages, etc.\n validator = validator[type](...params)\n }\n })\n\n return validator\n}\n\nexport default buildYupValidator\n","/**\n * Extract the file extension from a given file name.\n * This does not validate the file type in any way, it simply returns the extension from a string.\n * @param {string} fileName - The name of the file you want to extract the extension from.\n * \n * @return {string} The extension of an associated file name.\n */\nconst getFileExtension = (fileName) => {\n return fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase()\n}\n\nexport default getFileExtension","/**\n * Determines whether input is within range of two given numbers, exclusive of the last number.\n * @param {number} x - The number we want to find within the given range.\n * @param {number} min - The lower bound of the range, inclusive.\n * @param {number} max - The upper bound of the range, exclusive.\n * \n * @returns {boolean} - whether the number is within the range.\n */\n\nconst isInRange = (x, min, max) => {\n return ((x - min) * (x - max) < 0)\n}\n\nexport default isInRange","/**\n * This function detects whether the user is on an iPhone or iPod. This will _not_ detect iPads.\n * Please be aware that iPad 13.0+ does not use iPad in its navigator.platform string.\n * \n * @returns {boolean}\n */\n\nconst isiPhone = () => {\n return [\n 'iPod Simulator',\n 'iPhone Simulator',\n 'iPod',\n 'iPhone'\n ].includes(navigator.platform)\n}\n\nexport default isiPhone","const isSafari = () => {\n const client = navigator.userAgent.toLowerCase()\n return !!client.match(/safari/i) && !!client.match(/WebKit/i) && !client.match(/chrome/i)\n}\n\nexport default isSafari","/**\n * The `utmParams()` helper is used to create an object based upon utms in a location's query params.\n * \n * @returns {object} An object in the shape of { [tag]: param } corresponding to common utms (see `const tags` in body)\n */\n\nconst utmParams = () => {\n const tags = ['source', 'medium', 'campaign', 'term', 'content']\n const params = new URLSearchParams(window.location.search)\n // compile a new object in the form of {tag: param}\n return tags.reduce((res, tag) => ({ ...res, [tag]: params.get(`utm_${tag}`)}), {})\n}\n\nexport default utmParams\n","import React from 'react'\n\nimport { useCookies } from 'react-cookie'\nimport axios from 'axios'\n\nconst useSurveyDataCookie = () => {\n const [, setCookie] = useCookies(['user_starts_survey'])\n\n const FetchSurveyUserData = async (cookie) => {\n try {\n const res = await axios.get('/api/v2/onboarding_recommendations/version')\n const surveyData = await res.data\n const keyToRead = 'v3_survey'\n const surveyUserValue = surveyData[keyToRead]\n\n !surveyUserValue && setCookie(cookie, true)\n } catch (e) {\n console.log(e)\n }\n }\n\n return { FetchSurveyUserData }\n}\n\nexport default useSurveyDataCookie\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 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\nNextButton.defaultProps = {\n top: '40%',\n right: '-25px'\n}\n\nNextButton.propTypes = {\n handleClick: PropTypes.func.isRequired\n}\n\nexport default NextButton\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport ButtonBase from './ButtonBase'\nimport { ResponsiveSVG } from 'ui/acro/elements'\nimport { LeftArrow } from 'images/latest'\n\nconst PrevButton = ({ handleClick, fill = 'primary', ...props }) => (\n \n \n \n)\n\nPrevButton.defaultProps = {\n top: '40%',\n left: '-25px'\n}\n\nPrevButton.propTypes = {\n handleClick: PropTypes.func.isRequired\n}\n\nexport default PrevButton\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\n \n \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 React from 'react'\nimport { AnimationA } from 'images/latest'\nimport { ResponsiveSVG } from 'ui/acro'\n\nconst AnimationAIcon = ({\n color = 'transparent',\n width = '43px',\n height = '44px'\n}) => (\n \n)\n\nexport default AnimationAIcon\n","import React from 'react'\nimport { AnimationL } from 'images/latest'\nimport { ResponsiveSVG } from 'ui/acro'\n\nconst AnimationLIcon = ({\n color = 'transparent',\n width = '10px',\n height = '71px'\n}) => (\n \n)\n\nexport default AnimationLIcon\n","import React from 'react'\nimport { AnimationO } from 'images/latest'\nimport { ResponsiveSVG } from 'ui/acro'\n\nconst AnimationOIcon = ({\n color = 'transparent',\n width = '44px',\n height = '44px'\n}) => (\n \n)\n\nexport default AnimationOIcon\n","import React from 'react'\nimport { AnimationMoves } from 'images/latest'\nimport { ResponsiveSVG } from 'ui/acro'\n\nconst AnimationMovesIcon = ({ color, width = '220px', height = '45px' }) => (\n \n)\n\nexport default AnimationMovesIcon\n"],"sourceRoot":""}