\n );\n}\n\n//\n// ModalHeroImage\n// --------------------\n\nexport interface ModalHeroImageProps\n extends React.ComponentPropsWithoutRef<'img'> {\n children: React.ReactNode;\n className?: string;\n}\n\nexport function ModalHeroImage({\n className,\n src,\n alt,\n ...otherProps\n}: ModalHeroImageProps) {\n return (\n \n );\n}\n\n//\n// ModalBody\n// --------------------\n\nexport interface ModalBodyProps extends React.ComponentPropsWithoutRef<'div'> {\n children: React.ReactNode;\n className?: string;\n}\n\nexport function ModalBody({ className, ...otherProps }: ModalBodyProps) {\n return ;\n}\n\n//\n// ModalCloseButton\n// --------------------\n\nexport interface ModalCloseButtonProps\n extends React.ComponentPropsWithoutRef<'button'> {\n className?: string;\n color?: string;\n}\n\nexport function ModalCloseButton({\n className,\n color,\n ...otherProps\n}: ModalCloseButtonProps) {\n return (\n \n );\n}\n\n//\n// Modal\n// --------------------\n\nexport interface ModalProps extends React.ComponentPropsWithoutRef<'div'> {\n className?: string;\n isOpen?: boolean;\n onDismiss?: () => void;\n hasClose?: boolean;\n children: React.ReactNode;\n initialFocusRef?: React.RefObject;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n}\n\nfunction Modal({\n className,\n isOpen = false,\n onDismiss,\n hasClose,\n children,\n initialFocusRef,\n ...otherProps\n}: ModalProps) {\n return (\n \n \n {hasClose && (\n \n )}\n {children}\n \n \n );\n}\n\n// Adding support to use the compound component pattern and have backwards\n// compatibility with the existing pattern. To learn more read,\n// https://www.smashingmagazine.com/2021/08/compound-components-react/\nModal.Overlay = ModalOverlay;\nModal.Content = ModalContent;\nModal.Title = ModalTitle;\nModal.Actions = ModalActions;\nModal.HeroImage = ModalHeroImage;\nModal.Body = ModalBody;\nModal.CloseButton = ModalCloseButton;\n\nexport default Modal;\n","import clsx from 'clsx';\nimport React, { ComponentPropsWithoutRef, forwardRef } from 'react';\n\nimport styles from './styles.module.scss';\nimport { ButtonProps } from './Button';\n\nexport type LinkButtonProps = ButtonProps & ComponentPropsWithoutRef<'a'>;\n\nconst LinkButton = forwardRef(\n ({ href, children, className, variant = 'default', ...otherProps }, ref) => {\n return (\n \n {children}\n \n );\n }\n);\n\nexport default LinkButton;\n","// extracted by mini-css-extract-plugin\nexport default {\"authButton\":\"AccountAuthButton--authButton--yFnD+\",\"placeholder\":\"AccountAuthButton--placeholder--JAgxq\",\"facebookBlue\":\"AccountAuthButton--facebookBlue--eWNdO\"};","import React, { ReactNode } from 'react';\nimport clsx from '@strava/ui/clsx';\nimport Button from '@strava/ui/Button';\nimport styles from './AccountAuthButton.module.scss';\n\nconst AppleLogo = React.lazy(() => import('@strava/icons/LogosAppleSmall'));\nconst FacebookLogo = React.lazy(\n () => import('@strava/icons/LogosFacebookSmall')\n);\nconst GoogleLogo = React.lazy(() => import('@strava/icons/LogosGoogleSmall'));\nconst EmailLogo = React.lazy(\n () => import('@strava/icons/ActionsEmailNormalSmall')\n);\n\nexport type AuthButtonVariantTypes =\n | 'apple'\n | 'email'\n | 'facebook'\n | 'facebook-blue' // ironically corresponds to the lighter version of the icon\n | 'google';\n\ntype AccountAuthButtonProps = {\n children: ReactNode;\n className?: string;\n variant?: AuthButtonVariantTypes;\n onClick?: () => void;\n};\n\nconst AccountAuthButton = ({\n children,\n onClick,\n variant,\n className,\n ...options\n}: AccountAuthButtonProps) => {\n return (\n \n );\n};\n\nexport default AccountAuthButton;\n","// extracted by mini-css-extract-plugin\nexport default {\"orDivider\":\"OrDivider--orDivider--X6SS0\",\"or\":\"OrDivider--or--rdcMJ\",\"light\":\"OrDivider--light--BPhFE\",\"line\":\"OrDivider--line--LX6dD\"};","import React from 'react';\nimport clsx from '@strava/ui/clsx';\n\nimport styles from './OrDivider.module.scss';\nimport { ThemeTypes } from '..';\n\ninterface OrDividerProps {\n text: string;\n theme?: ThemeTypes;\n className?: string;\n}\n\nexport const OrDivider = ({\n text,\n theme = 'dark',\n className\n}: OrDividerProps) => {\n return (\n
\n \n {text}\n \n
\n );\n};\n\nexport default OrDivider;\n","/**\n * Checks if `value` is `null` or `undefined`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is nullish, else `false`.\n * @example\n *\n * _.isNil(null);\n * // => true\n *\n * _.isNil(void 0);\n * // => true\n *\n * _.isNil(NaN);\n * // => false\n */\nfunction isNil(value) {\n return value == null;\n}\n\nexport default isNil;\n","// extracted by mini-css-extract-plugin\nexport default {\"spinner\":\"Spinner--spinner--OPlEZ\",\"graphic\":\"Spinner--graphic--FY9vz\",\"spin\":\"Spinner--spin--AJhwi\"};","import React from 'react';\nimport clsx from '../clsx';\n\nimport styles from './Spinner.module.scss';\n\nexport type SpinnerProps = {\n color?: 'default' | 'white';\n size?: number;\n};\n\nconst Spinner = ({ color = 'default', size = 20 }: SpinnerProps) => (\n \n \n \n);\n\nexport default Spinner;\n","import * as React from \"react\";\nimport PropTypes from \"prop-types\";\nconst SvgActionsCancelCircleHighlightedMedium = React.forwardRef(\n ({ color, size, title, titleId, ...props }, ref) => (\n \n )\n);\nSvgActionsCancelCircleHighlightedMedium.defaultProps = {\n color: \"currentColor\",\n size: 32,\n title: undefined,\n titleId: undefined,\n};\nSvgActionsCancelCircleHighlightedMedium.propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n title: PropTypes.string,\n titleId: PropTypes.string,\n};\nexport default SvgActionsCancelCircleHighlightedMedium;\n","import * as React from \"react\";\nimport PropTypes from \"prop-types\";\nconst SvgActionsCheckCircleOnMedium = React.forwardRef(\n ({ color, size, title, titleId, ...props }, ref) => (\n \n )\n);\nSvgActionsCheckCircleOnMedium.defaultProps = {\n color: \"currentColor\",\n size: 32,\n title: undefined,\n titleId: undefined,\n};\nSvgActionsCheckCircleOnMedium.propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n title: PropTypes.string,\n titleId: PropTypes.string,\n};\nexport default SvgActionsCheckCircleOnMedium;\n","import * as React from \"react\";\nimport PropTypes from \"prop-types\";\nconst SvgNavigationWarningHighlightedMedium = React.forwardRef(\n ({ color, size, title, titleId, ...props }, ref) => (\n \n )\n);\nSvgNavigationWarningHighlightedMedium.defaultProps = {\n color: \"currentColor\",\n size: 32,\n title: undefined,\n titleId: undefined,\n};\nSvgNavigationWarningHighlightedMedium.propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n title: PropTypes.string,\n titleId: PropTypes.string,\n};\nexport default SvgNavigationWarningHighlightedMedium;\n","import * as React from \"react\";\nimport PropTypes from \"prop-types\";\nconst SvgNavigationInformationNormalMedium = React.forwardRef(\n ({ color, size, title, titleId, ...props }, ref) => (\n \n )\n);\nSvgNavigationInformationNormalMedium.defaultProps = {\n color: \"currentColor\",\n size: 32,\n title: undefined,\n titleId: undefined,\n};\nSvgNavigationInformationNormalMedium.propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n title: PropTypes.string,\n titleId: PropTypes.string,\n};\nexport default SvgNavigationInformationNormalMedium;\n","import * as React from \"react\";\nimport PropTypes from \"prop-types\";\nconst SvgActionsCancelNormalSmall = React.forwardRef(\n ({ color, size, title, titleId, ...props }, ref) => (\n \n )\n);\nSvgActionsCancelNormalSmall.defaultProps = {\n color: \"currentColor\",\n size: 24,\n title: undefined,\n titleId: undefined,\n};\nSvgActionsCancelNormalSmall.propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n title: PropTypes.string,\n titleId: PropTypes.string,\n};\nexport default SvgActionsCancelNormalSmall;\n","import { useRef, useEffect } from 'react';\n\n/**\n * Declarative setInterval React hook.\n *\n * `useInterval` uses the same API as setInterval, but the arguments of this hook is \"dynamic\".\n * Set your `callback` function as the first argument and the `delay` as the second argument.\n * When passing `null` or `undefined` to the `delay` arg then it will stop/pause the interval.\n *\n * For implementation details explanation, why to use useInterval hook, and an example see Dan Abramov's blog post\n * 👀: https://overreacted.io/making-setinterval-declarative-with-react-hooks/\n * */\nexport const 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 the interval.\n useEffect(() => {\n // If no delay then pause/stop the interval.\n // Delay of 0 is valid delay.\n if ((!delay && delay !== 0) || delay < 0) {\n return;\n }\n\n const id = setInterval(() => savedCallback.current(), delay);\n // eslint-disable-next-line consistent-return\n return () => clearInterval(id);\n }, [delay]);\n};\n\nexport default useInterval;\n","import React, { forwardRef } from 'react';\n\ntype VisuallyHiddenProps = React.ComponentPropsWithoutRef<'span'>;\n\n// visually hidden styling comes from https://www.a11yproject.com/posts/how-to-hide-content/\nconst VisuallyHidden = forwardRef(\n ({ style, ...props }, ref) => {\n return (\n \n );\n }\n);\n\nexport default VisuallyHidden;\n","// extracted by mini-css-extract-plugin\nexport default {\"alert\":\"Alert--alert--iOdtn\",\"alertInner\":\"Alert--alertInner--Mjc7q\",\"hasError\":\"Alert--hasError--1Ma8H\",\"buttonError\":\"Alert--buttonError--Ff1z0\",\"hasWarning\":\"Alert--hasWarning--geWBH\",\"buttonWarning\":\"Alert--buttonWarning--2sINi\",\"hasSuccess\":\"Alert--hasSuccess--N2CRK\",\"buttonSuccess\":\"Alert--buttonSuccess--AYYRS\",\"hasInfo\":\"Alert--hasInfo--dEbnt\",\"buttonInfo\":\"Alert--buttonInfo--u44ZF\",\"alertContent\":\"Alert--alertContent--cUEzn\",\"alignLeft\":\"Alert--alignLeft--DaObf\",\"alignCenter\":\"Alert--alignCenter--MGnUV\",\"alignRight\":\"Alert--alignRight--YXRfR\",\"indicatorIcon\":\"Alert--indicatorIcon--lO0U4\",\"closeButtonContainer\":\"Alert--closeButtonContainer--KhDOl\",\"button\":\"Alert--button--WGSkY\",\"autoDismissBar\":\"Alert--autoDismissBar--qlBCw\",\"countdown\":\"Alert--countdown--dEv3D\",\"fadeIn\":\"Alert--fadeIn--irfCa\",\"fadeOut\":\"Alert--fadeOut--Eh8MR\",\"enterFadeOut\":\"Alert--enterFadeOut--NGuVy\",\"newKudo\":\"Alert--newKudo--K8pWr\"};","import React, { ComponentPropsWithoutRef, ReactNode, useState } from 'react';\n// import ReachAlert from '@reach/alert';\nimport {\n ActionsCancelCircleHighlightedMedium as ErrorIcon,\n ActionsCheckCircleOnMedium as SuccessIcon,\n NavigationWarningHighlightedMedium as WarningIcon,\n NavigationInformationNormalMedium as InfoIcon,\n ActionsCancelNormalSmall as CancelIcon\n} from '@strava/icons';\nimport { useInterval } from '@strava/react-hooks';\nimport { isTest } from '@strava/utils';\nimport clsx from '../clsx';\nimport VisuallyHidden from '../VisuallyHidden';\nimport styles from './Alert.module.scss';\n\nexport const AlertStatus = {\n ERROR: 'error',\n SUCCESS: 'success',\n WARNING: 'warning',\n INFO: 'info'\n} as const;\n\nexport type AlertStatusType = (typeof AlertStatus)[keyof typeof AlertStatus];\n\nexport type AlertStyleType =\n | 'hasError'\n | 'hasSuccess'\n | 'hasWarning'\n | 'hasInfo';\nexport type AlertButtonStyleType =\n | 'buttonError'\n | 'buttonSuccess'\n | 'buttonWarning'\n | 'buttonInfo';\n\nconst ALERT_DELAY = 8000;\n\nconst getAlertDetails = ({\n type,\n iconSize\n}: {\n type: AlertStatusType;\n iconSize: number;\n}): {\n indicatorIcon: ReactNode;\n messageType: AlertStatusType;\n alertStyle: AlertStyleType;\n buttonStyle: AlertButtonStyleType;\n} =>\n ({\n [AlertStatus.ERROR]: {\n indicatorIcon: (\n \n ),\n messageType: AlertStatus.ERROR,\n alertStyle: 'hasError' as const,\n buttonStyle: 'buttonError' as const\n },\n [AlertStatus.SUCCESS]: {\n indicatorIcon: (\n \n ),\n messageType: AlertStatus.SUCCESS,\n alertStyle: 'hasSuccess' as const,\n buttonStyle: 'buttonSuccess' as const\n },\n [AlertStatus.WARNING]: {\n indicatorIcon: (\n \n ),\n messageType: AlertStatus.WARNING,\n alertStyle: 'hasWarning' as const,\n buttonStyle: 'buttonWarning' as const\n },\n [AlertStatus.INFO]: {\n indicatorIcon: (\n \n ),\n messageType: AlertStatus.INFO,\n alertStyle: 'hasInfo' as const,\n buttonStyle: 'buttonInfo' as const\n }\n }[type]);\n\nconst fadeStyles = {\n enter: isTest() ? '' : 'fadeIn',\n exit: isTest() ? '' : 'fadeOut'\n};\n\nexport interface AlertProps extends ComponentPropsWithoutRef<'div'> {\n children: ReactNode;\n alertType?: AlertStatusType;\n autoDismiss?: boolean;\n autoDismissDelay?: number;\n className?: string;\n contentPosition?: 'left' | 'center' | 'right';\n hideCloseButton?: boolean;\n hideIcon?: boolean;\n iconSize?: number;\n onClose?: () => void;\n}\n\nexport const Alert = ({\n children,\n className,\n alertType = AlertStatus.ERROR,\n autoDismiss = false,\n autoDismissDelay = ALERT_DELAY,\n contentPosition = 'left',\n hideCloseButton = false,\n hideIcon = true,\n iconSize = 32,\n onClose = () => {},\n ...options\n}: AlertProps) => {\n const { indicatorIcon, messageType, alertStyle, buttonStyle } =\n getAlertDetails({ type: alertType, iconSize });\n const [fadeStyle, setFadeStyle] = useState(fadeStyles.enter);\n\n const handleOnClose = async () => {\n setFadeStyle(fadeStyles.exit);\n // eslint-disable-next-line no-unused-expressions\n !isTest() && (await new Promise((resolve) => setTimeout(resolve, 0)));\n onClose();\n };\n\n useInterval(\n () => {\n handleOnClose();\n },\n autoDismiss ? autoDismissDelay : null\n );\n\n return (\n
\n
\n {/* Icon */}\n {!hideIcon && (\n
{indicatorIcon}
\n )}\n\n {/* Content */}\n
\n {messageType}: \n
{children}
\n
\n\n {/* Close Button */}\n {!hideCloseButton && (\n
\n \n
\n )}\n
\n\n {/* Auto Dismiss Progress */}\n {autoDismiss && (\n
\n \n
\n )}\n
\n );\n};\n\nexport default Alert;\n","import { useState, useCallback } from 'react';\n\nexport const useQueue = ({ initialValues = [] }) => {\n const [queue, setState] = useState(initialValues);\n\n /**\n * Enqueue; Adds item to queue.\n */\n const enqueue = useCallback((...items) => {\n setState((current) => [...current, ...items]);\n }, []);\n\n /**\n * Dequeue; Removes first item in queue.\n */\n const dequeue = useCallback(() => {\n // Immutable solution to remove first element in array.\n setState((current) => current.slice(1));\n }, []);\n\n /**\n * Update function to allow for more granular control of updating the queue.\n * The `update` function accepts a callback fn where the first arg is the\n * current queue state that we can then manipulate. See tests for examples.\n * */\n const updateQueue = useCallback(\n (fn) => setState((current) => fn([...current])),\n []\n );\n\n /**\n * Remove all items from queue.\n */\n const clearQueue = useCallback(() => setState(() => []), []);\n\n /**\n * Returns the first item in the queue.\n */\n const peek = useCallback(() => {\n if (queue.length > 0) {\n return queue[0];\n }\n\n return undefined;\n }, [queue]);\n\n return {\n queue,\n length: queue.length,\n enqueue,\n dequeue,\n updateQueue,\n clearQueue,\n peek\n };\n};\n\nexport default useQueue;\n","export const YOUNGEST_AGE_ON_PLATFORM = 13;\n\nexport const YOUNGEST_AGE_FOR_HEALTH_AND_PROMO = 16;\n\nexport const GENDER = Object.freeze({\n man: 'man',\n woman: 'woman',\n preferNotSay: 'prefer_not_say',\n nonBinary: 'nonbinary'\n});\n\nexport const LOCALE = Object.freeze({\n deDE: 'de-DE',\n enUS: 'en-US',\n enGB: 'en-GB',\n esES: 'es-ES',\n es419: 'es-419',\n frFR: 'fr-FR',\n itIT: 'it-IT',\n jaJP: 'ja-JP',\n koKR: 'ko-KR',\n nlNL: 'nl-NL',\n ptBR: 'pt-BR',\n ptPT: 'pt-PT',\n ruRU: 'ru-RU',\n zhCN: 'zh-CN',\n zhTW: 'zh-TW'\n});\n\n// If a language has more than one locale, the first in the list is the default\nexport const LANGUAGE_LOCALES = Object.freeze({\n de: [LOCALE.deDE],\n // en is intentionally omitted here since English is the global default\n es: [LOCALE.esES, LOCALE.es419],\n fr: [LOCALE.frFR],\n it: [LOCALE.itIT],\n ja: [LOCALE.jaJP],\n ko: [LOCALE.koKR],\n nl: [LOCALE.nlNL],\n pt: [LOCALE.ptPT, LOCALE.ptBR],\n ru: [LOCALE.ruRU],\n zh: [LOCALE.zhCN, LOCALE.zhTW]\n});\n\nexport const EXPERIMENT_COHORTS = Object.freeze({\n control: 'control',\n variantA: 'variant-a',\n variantB: 'variant-b'\n});\n\nexport const MOBILE_OS = Object.freeze({\n android: 'android',\n iPhone: 'iphone',\n iPad: 'ipad'\n});\n\nexport const SUPPORTED_BROWSERS = Object.freeze({\n chrome: 'chrome',\n firefox: 'firefox',\n safari: 'safari'\n});\n\n// universal link paths from 'apple-app-site-association' file in active\nexport const APPLE_APP_LINK_PATHS = [\n '/dashboard',\n '/activities/*',\n '/athletes/*',\n '/segments/*',\n '/challenges/*',\n '/videos/*',\n '/routes/*',\n '/premium/*',\n '/settings/*',\n '/shop/*',\n '/athlete/*',\n '/clubs/*',\n '/summit/join',\n '/summit/perks',\n '/oauth/mobile/authorize'\n];\n\nexport const ATHLETES_VISIBILITY = Object.freeze({\n optedOut: 'opted_out' // Strava::Athletes::Visibility::OPTED_OUT\n});\n\nexport default {\n YOUNGEST_AGE_ON_PLATFORM,\n YOUNGEST_AGE_FOR_HEALTH_AND_PROMO,\n GENDER,\n LOCALE,\n EXPERIMENT_COHORTS,\n MOBILE_OS,\n SUPPORTED_BROWSERS,\n APPLE_APP_LINK_PATHS,\n ATHLETES_VISIBILITY\n};\n","import {\n MOBILE_OS,\n SUPPORTED_BROWSERS,\n APPLE_APP_LINK_PATHS\n} from '@strava/constants/src/appConstants';\nimport { isString } from 'lodash-es';\nimport camelCase from 'lodash-es/camelCase';\nimport snakeCase from 'lodash-es/snakeCase';\nimport isObject from 'lodash-es/isObject';\nimport { CamelCasedPropertiesDeep, SnakeCasedPropertiesDeep } from 'type-fest';\n\nexport const generateRandomId = () => Math.random().toString(36).substring(2);\n\n// Capitalizes all the words and replaces some characters in the string to create a nicer looking title.\n// eg. 'man from the boondocks' => 'Man From The Boondocks'\nexport const titleize = (sentence: string) => {\n return sentence\n .split(' ')\n .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n .join(' ');\n};\n\nexport const displayName = (\n { firstName = '', lastName = '' },\n options = { forceAnonymize: false, maxLength: 100 }\n) => {\n const { maxLength, forceAnonymize } = options;\n const fullName = `${firstName} ${lastName}`;\n\n if (forceAnonymize || fullName.length > maxLength) {\n if (firstName.length > maxLength - 3) {\n return `${titleize(firstName.substring(0, maxLength - 4))}... ${lastName\n .charAt(0)\n .toUpperCase()}.`;\n }\n return `${titleize(firstName)} ${lastName.charAt(0).toUpperCase()}.`;\n }\n return fullName.trim();\n};\n\n/**\n * Checks to see if device is mobile\n * @param {string} userAgent - user agent string for the current browser. For next-js apps (SSR),\n * this value can be retrieved from request.headers['user-agent']\n * @returns {boolean} - true if the device is mobile\n */\nexport const isMobile = (userAgent = window?.navigator?.userAgent) => {\n if (isString(userAgent)) {\n // ref - https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#mobile_tablet_or_desktop\n return userAgent.toLowerCase().includes('mobi');\n }\n return false;\n};\n\n/**\n * Determines the OS for mobile devices\n * @param {string} userAgent - user agent string for the current browser. For next-js apps (SSR),\n * this value can be retrieved from request.headers['user-agent']\n * @returns {(string|null)} - one of ['android', 'ipad', 'iphone'] or null for unknown\n */\nexport const getMobileOS = (userAgent = window?.navigator?.userAgent) => {\n if (isString(userAgent)) {\n if (userAgent.includes('Android')) {\n return MOBILE_OS.android;\n }\n if (userAgent.includes('iPad')) {\n return MOBILE_OS.iPad;\n }\n if (userAgent.includes('iPhone')) {\n return MOBILE_OS.iPhone;\n }\n }\n return null;\n};\n\n/**\n * Determines, in a limited fashion, the browser according to the user agent.\n * NOTE: UAs are notoriously difficult to parse. This is meant as a bare-bones, noncomprehensive parser,\n * based on https://www.whatismybrowser.com/guides/the-latest-user-agent/.\n *\n * The order of conditionals is important, bc some Chrome & Firefox UAs include 'Safari', too.\n * Some Edge UAs may be recognized as Chrome for now, since they can include 'Chrome'. We don't\n * officially support Edge (yet?).\n *\n * @param {string} userAgent - user agent string for the current browser. For next-js apps (SSR),\n * this value can be retrieved from request.headers['user-agent']\n * @returns {(string|null)} - one of ['chrome', 'firefox', 'safari'] or null for unknown/unsupported browser\n */\nexport const getBrowser = (userAgent = window?.navigator?.userAgent) => {\n if (isString(userAgent)) {\n if (userAgent.includes('Chrome') || userAgent.includes('CriOS')) {\n return SUPPORTED_BROWSERS.chrome;\n }\n if (userAgent.includes('Firefox') || userAgent.includes('FxiOS'))\n return SUPPORTED_BROWSERS.firefox;\n if (userAgent.includes('Safari')) {\n return SUPPORTED_BROWSERS.safari;\n }\n }\n\n return null;\n};\n\n/**\n * Universal links are determined by the paths described in `apple-app-site-association` in active.\n * @param {string} pathname - window.location.pathname or nextjs equivalent\n * @returns {boolean} - whether the pathname string matches\n */\nexport const isUniversalLinkPage = (pathname: string) => {\n if (isString(pathname)) {\n return APPLE_APP_LINK_PATHS.some((path: string) => {\n const pathWithoutAsterisk = path.replace('/*', '');\n return pathname.startsWith(pathWithoutAsterisk);\n });\n }\n return false;\n};\n\n// eg. given,\n// \"urls\": {\n// \"100\": \"https://photo_url_1\",\n// \"1800\": \"https://photo_url_2\"\n// }\n// returns https://photo_url_2\nexport const getPhotoWithMaxDimension = (\n photoUrlHash: Record\n) => {\n if (!isObject(photoUrlHash)) {\n return '';\n }\n const key = Object.keys(photoUrlHash).reduce((a, b) => (a > b ? a : b));\n return photoUrlHash[key];\n};\n\n/**\n * Immutably merges a payload into an item in an array of objects\n * @param {array} array - An array of objects\n * @param {string|number} id - The unique id of the item in the array to update\n * @param {object} payload - the value to merge into the matched item\n * @param {object} options\n * @param {string} [options.idName=id] - the key of the unique identifier\n * @param {bool} [options.upsert=false] - if true, will insert the payload into the array as a new item if no matching item is found\n * @return {array} - A copy of the original array with the matching item updated\n */\nexport function arrayUpdateItemById(\n array: T[],\n id: string | number,\n payload: Partial,\n { idName, upsert }: { idName?: keyof T; upsert?: boolean } = {}\n): T[] {\n let itemFound = false;\n const property = idName || ('id' as keyof T);\n const mappedArray = array.map((item) => {\n itemFound = itemFound || item[property] === id;\n return item[property] === id ? { ...item, ...payload } : item;\n });\n\n return itemFound || !upsert ? mappedArray : ([...array, payload] as T[]);\n}\n\n/**\n * Immutably removes an item from an array by index\n * @param {array} array\n * @param {number} index - the index of the item to remove\n * @return {array} - A copy of the original array with the matching item removed\n */\nexport function arrayRemoveByIndex(array: T[], index: number): T[] {\n return index === -1\n ? array\n : [...array.slice(0, index), ...array.slice(index + 1)];\n}\n\n/**\n * Immutably removes an item from an array of objects\n * @param {array} array - An array of objects\n * @param {string|number} id - The unique id of the item in the array to remove\n * @param {string} [idName=id] - the key of the unique identifier\n * @return {array} - A copy of the original array with the matching item removed\n */\n\nexport function arrayRemoveItemById(\n array: T[],\n propertyValue: string | number,\n idName = 'id'\n): T[] {\n const index = array.findIndex(\n (item) => item[idName as keyof T] === propertyValue\n );\n return arrayRemoveByIndex(array, index);\n}\n\nexport const capitalizeFirstLetter = (string: string) =>\n `${string.charAt(0).toUpperCase()}${string.slice(1)}`;\n\n/**\n * @description Converts Object keys from string of any case to camelCase.\n * Handles nested objects and arrays.\n * */\nexport function convertKeysToCamel(object: T): CamelCasedPropertiesDeep {\n if (Array.isArray(object)) {\n return (object as unknown[]).map((item) =>\n convertKeysToCamel(item)\n ) as CamelCasedPropertiesDeep;\n }\n\n if (isObject(object)) {\n return Object.keys(object).reduce((o, k) => {\n const key = camelCase(k);\n const value = object[\n k as keyof typeof object\n ] as CamelCasedPropertiesDeep;\n\n if (isObject(value)) {\n return {\n ...o,\n [key]: convertKeysToCamel(value)\n };\n }\n\n if (Array.isArray(value)) {\n return {\n ...o,\n [key]: (value as unknown[]).map((item) => convertKeysToCamel(item))\n };\n }\n\n return {\n ...o,\n [key]: value\n };\n }, {} as CamelCasedPropertiesDeep);\n }\n\n return object as CamelCasedPropertiesDeep;\n}\n\n/**\n * @description Converts Object keys from string of any case to snakeCase.\n * Handles nested objects and arrays.\n * */\nexport function convertKeysToSnake(object: T): SnakeCasedPropertiesDeep {\n if (Array.isArray(object)) {\n return (object as unknown[]).map((item) =>\n convertKeysToSnake(item)\n ) as SnakeCasedPropertiesDeep;\n }\n\n if (isObject(object)) {\n return Object.keys(object).reduce((o, k) => {\n const key = snakeCase(k);\n const value = object[\n k as keyof typeof object\n ] as SnakeCasedPropertiesDeep;\n\n if (isObject(value)) {\n return {\n ...o,\n [key]: convertKeysToSnake(value)\n };\n }\n\n if (Array.isArray(value)) {\n return {\n ...o,\n [key]: (value as unknown[]).map((item) => convertKeysToSnake(item))\n };\n }\n\n return {\n ...o,\n [key]: value\n };\n }, {} as SnakeCasedPropertiesDeep);\n }\n\n return object as SnakeCasedPropertiesDeep;\n}\n\n/**\n * Checks to see if localStorage is available\n *\n * @return {boolean} - true if localStorage can be used\n */\nexport const isLocalStorageAvailable = () => {\n const test = 'test';\n try {\n localStorage.setItem(test, test);\n localStorage.removeItem(test);\n return true;\n } catch (e) {\n return false;\n }\n};\n\n/**\n * Appends querystring params to a URL\n *\n * @param {string} originalUrl - The original URL to append params to\n * @param {object} params - An object of key value parameters to append to URL\n * @return {string} - URL with params appended\n */\nexport const addParamsToURL = (originalUrl: string, params: object) => {\n const url = new URL(originalUrl);\n\n Object.entries(params).forEach(([key, value]) => {\n url.searchParams.append(key, value);\n });\n\n return url.toString();\n};\n\n/**\n * Some of our logged-out pages have a full-screen image background.\n * This util helps with setting the background image on the `` element, and\n * just requires passing in the image to be used.\n * @param {string} background\n */\nexport const setFullScreenBackgroundImage = (background: string) => {\n // apply background image directly to ``\n const body = document.querySelector('body');\n if (body) {\n body.style.setProperty('background-image', `url(${background})`);\n body.style.setProperty('background-size', 'cover');\n body.style.setProperty('background-position', 'center');\n }\n};\n\n/**\n * Uses the host to determine if a page is being loaded in staging or localhost.\n *\n * This util function is helpful for apps that run on nextJS which has node process\n * defined as production in both staging and production.\n *\n * @param host - host name\n * @returns {boolean} - true if app is running in staging or local\n */\nexport const isStagingOrLocal = (host: string) =>\n ['staging', 'localhost'].some((_host) => host.includes(_host));\n\n/**\n * Adds an id property to each object in an array. Uses the object's index as the value for the id\n * @param {array} objects - An array of objects\n * @return {array} - A copy of the original array with id property added to each object\n */\nexport const arrayAddIndexAsId = (objects: Array