You joined RewardsHub with {identifier}. Please use that to log in.
\n \n);\n\nconst AlreadyRegisteredAndCanLogIn = ({\n authorization,\n}: {\n authorization: OauthAuthorizationTokens;\n}) => {\n const goToAccount = async () => {\n try {\n const {redirect} = await loginWithOauthAccessTokens(authorization);\n\n /**\n * Login unfortunately sends down either a fully qualified url with\n * protocol, or a relative url that may be missing the \"/\" prefix.\n */\n window.location.href = /^http/.test(redirect)\n ? redirect\n : `/${redirect}`.replace('//', '/');\n } catch (error) {\n alert('Something went wrong, please try logging in again.');\n\n window.location.href = '/login';\n }\n };\n\n return (\n \n \n \n \n \n );\n};\n\nconst states = {\n INCOMPLETE_REGISTRATION: 'INCOMPLETE_REGISTRATION',\n REGISTERED_BUT_CANNOT_LOG_IN: 'REGISTERED_BUT_CANNOT_LOG_IN',\n REGISTERED_AND_CAN_LOG_IN: 'REGISTERED_AND_CAN_LOG_IN',\n};\n\nconst stateMap = {\n [states.INCOMPLETE_REGISTRATION]: IncompleteRegistration,\n [states.REGISTERED_BUT_CANNOT_LOG_IN]: AlreadyRegisteredButCannotLogIn,\n [states.REGISTERED_AND_CAN_LOG_IN]: AlreadyRegisteredAndCanLogIn,\n};\n\nexport function LegacyContactVerificationLanding() {\n const {state, data} = usePhpJs(\n ({legacyContactVerification: {state, data = {}}}) => ({\n state,\n data,\n })\n );\n\n const Component = stateMap[state];\n\n return ;\n}\n","import {PgForm} from '@practicegenius/domain/src/hooks/usePgForm';\nimport * as R from 'ramda';\nimport * as Yup from 'yup';\nimport React from 'react';\nimport {dropNilOrEmptyValues} from '@practicegenius/pg-util/src/ObjectUtils';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport {InvariantError} from 'ts-invariant';\nimport Box from '@mui/material/Box';\nimport TextField from '@mui/material/TextField';\nimport {format, isValid, parse} from 'date-fns';\nimport FormControl from '@mui/material/FormControl';\nimport InputLabel from '@mui/material/InputLabel';\nimport Select from '@mui/material/Select';\nimport MenuItem from '@mui/material/MenuItem';\nimport {CommonDateFormats} from '@practicegenius/pg-util/src/DateUtils';\n\n/** Representation of a date's components. For maximum flexibility these are internally represented as strings and */\nexport type MemorableDate = {\n month: string;\n day: string;\n year: string;\n};\n\nconst getMonthsForLocale = (locale = navigator.language) => {\n const format = new Intl.DateTimeFormat(locale, {month: 'long'});\n const months = [];\n for (let month = 0; month < 12; month++) {\n const testDate = new Date(0, month, 1, 0, 0, 0);\n months.push(format.format(testDate));\n }\n return months;\n};\n\nconst localeMonths = getMonthsForLocale();\n\nexport const parseMemorableDateFieldsFromDate = (date: Date): MemorableDate =>\n isValid(date)\n ? {\n month: String(date.getMonth() + 1),\n day: String(date.getDate()),\n year: String(date.getFullYear()),\n }\n : {\n month: '',\n day: '',\n year: '',\n };\n\nexport const parseDateFromMemorableDate = (\n memDate: MemorableDate$Form\n): Date | null => {\n const parseValue = (value: string) => parseInt(value, 10);\n const parsed = R.mapObjIndexed(parseValue, R.omit(['composedDate'], memDate));\n if (Object.values(parsed).some(Number.isNaN)) return null;\n\n // Parse the date with date-fns to avoid strange edge cases with the Date constructor (e.g. 2021-02-31 -> 2021-03-03)\n return parse(\n `${parsed.year}-${parsed.month}-${parsed.day}`,\n 'y-M-d',\n new Date()\n );\n};\n\ntype SubfieldProps = {\n value: string;\n name: string;\n onChange: React.ChangeEventHandler;\n onBlur: React.FocusEventHandler;\n /** Subfield errors are joined together if there are multiple */\n error?: string;\n};\ntype MemorableDateInputProps = {\n /** id used as a prefix for subfield ids */\n fieldId: string;\n fields: Record;\n /** A field-level error will only render if no field level errors are present. It's only expected that this will happen for server errors that can't be validated on the client */\n error?: string;\n /** This is added to the month field to inform the user of the date's context */\n monthFieldPrefix?: string;\n};\n\nconst getFieldError = ({\n error,\n fields,\n}: Pick) => {\n const errors = dropNilOrEmptyValues([\n ...Object.values(fields).map(field => field.error),\n ]).filter(Boolean) as string[];\n const hasFieldErrors = errors.length > 0;\n if (!hasFieldErrors) return error;\n return errors.join(', ');\n};\n\n/**\n * A user-friendly input for memorable dates (such as birthdays or anniversaries).\n * This component implements the best practices for prompting users for memorable dates as outlined by the USWDS\n * @see https://designsystem.digital.gov/patterns/create-a-user-profile/date-of-birth/\n */\nexport const MemorableDateInput: React.FC = ({\n fieldId,\n fields,\n error,\n monthFieldPrefix,\n}) => {\n const fieldError = getFieldError({error, fields});\n return (\n \n \n {/* Month Field */}\n {(() => {\n let labelText = 'Month';\n if (monthFieldPrefix) labelText = `${monthFieldPrefix} ${labelText}`;\n\n return (\n \n {labelText}\n \n // @ts-expect-error this works fine but Select's types are a little weird\n fields.month.onChange(e)\n }\n onBlur={fields.month.onBlur}\n error={Boolean(error || fields.month.error)}\n MenuProps={{\n sx: {\n '& .MuiList-root': {\n maxHeight: '280px',\n },\n },\n }}\n >\n {localeMonths.map((label, idx) => {\n const monthNum = String(idx + 1);\n return (\n \n );\n })}\n \n \n );\n })()}\n\n {/* Day Field */}\n \n\n {/* Year Field */}\n \n \n {fieldError}\n \n );\n};\n\ntype MemorableDateValidationSchemaInput = {\n /**\n * Add additional validation rules to the composed date\n * @default R.identity\n * */\n enhanceDateSchema?: (input: Yup.DateSchema) => Yup.DateSchema;\n};\n\nconst memorableDateSchema = Yup.object().shape({\n month: Yup.number()\n .typeError('Month must be a number')\n .min(1, 'Month must be greater than 0')\n .max(12, 'Month cannot exceed 12')\n .integer('Month must be a whole number')\n .required('Month is required'),\n day: Yup.number()\n .typeError('Day must be a number')\n .min(1, 'Day must be greater than 0')\n .max(31, 'Day cannot exceed 31')\n .integer('Day must be a whole number')\n .required('Day is required'),\n year: Yup.number()\n .typeError('Year must be a number')\n .min(1000, 'Year must be 4 digits')\n .integer('Year must be a whole number')\n .required('Year is required'),\n});\n\nexport const makeMemorableDateValidationSchema = ({\n enhanceDateSchema = R.identity,\n}: MemorableDateValidationSchemaInput) => {\n const baseDateSchema = Yup.date().typeError('Date is invalid');\n\n return memorableDateSchema.shape({\n composedDate: enhanceDateSchema(baseDateSchema),\n });\n};\n\nexport type MemorableDate$Form = MemorableDate & {\n /** Composed Date is set automatically by FormikMemorableDateInput when all other fields are valid */\n composedDate?: Date;\n};\n\nconst getMemorableDateFieldsPropFromFormik = (\n form: PgForm,\n dateFieldName: string\n): MemorableDateInputProps['fields'] => {\n const value = form.values[dateFieldName];\n if (!value || !('day' in value) || !('month' in value) || !('year' in value))\n throw new InvariantError(\n `${dateFieldName} does not have the expected shape in the form data`\n );\n\n const getSubfieldProps = (subfield: keyof MemorableDate) => {\n const fieldName = `${dateFieldName}.${subfield}`;\n const formikFieldProps = form.getFieldProps(fieldName);\n return {\n ...formikFieldProps,\n onChange: (e: React.ChangeEvent) => {\n const {value} = e.target;\n // Select fields have a different signature and need to be handled differently\n if (subfield === 'month') {\n // Select fields can validate on every change because input is constrained\n return form.setFieldValue(fieldName, value, true);\n }\n\n return formikFieldProps.onChange(e);\n },\n };\n };\n\n return {\n month: getSubfieldProps('month'),\n day: getSubfieldProps('day'),\n year: getSubfieldProps('year'),\n };\n};\n\n// Trying to do equality checks on dates will result in a re-render loop, so we'll build our own comparable version\nconst getComparableDate = (date?: Date | null) => {\n try {\n if (!date) return 'undefined';\n if (!isValid(date)) return 'invalid';\n return format(date, CommonDateFormats['01/20/2020']);\n } catch (e) {\n return 'parseError';\n }\n};\n\nconst withoutComposedDate = R.omit(['composedDate']);\n\n/**\n * A user-friendly input for memorable dates that cleanly integrates into an existing formik (such as birthdays or anniversaries).\n * This component implements the best practices for prompting users for memorable dates as outlined by the USWDS\n * @see https://designsystem.digital.gov/patterns/create-a-user-profile/date-of-birth/\n *\n * When the date components are all valid and parse to a valid date, this sets that date in `form[dateFieldName].composedDate` for convenience\n */\nexport function FormikMemorableDateInput<\n TDateFieldName extends string,\n TFormValue extends Record\n>(\n props: Pick & {\n form: PgForm;\n dateFieldName: TDateFieldName;\n }\n) {\n const {form, dateFieldName, monthFieldPrefix} = props;\n const fieldError = R.path([dateFieldName, 'composedDate'], form.errors) as\n | string\n | undefined;\n\n // When form errors change, check if the composed date should be updated\n // This is necessary because the composed date is derived from the subfields values and errors\n // Trying to do this in the subfield update handler will not have the updated error values\n React.useEffect(() => {\n const updateComposedDateField = (nextDate: Date | null) =>\n form.setFieldValue(\n `${dateFieldName}.composedDate`,\n // ?? is needed to coerce null to undefined\n nextDate ?? undefined,\n true\n );\n\n const fieldValues = form.values[dateFieldName] as MemorableDate$Form;\n const touchedFields = withoutComposedDate(\n // @ts-expect-error\n form.touched[dateFieldName]\n ) as Partial>;\n\n const fieldsAreValid = memorableDateSchema.isValidSync(fieldValues);\n const allFieldsAreTouched = R.equals(touchedFields, {\n day: true,\n month: true,\n year: true,\n });\n const nextComposedDate = parseDateFromMemorableDate(fieldValues);\n const composedDateWouldChange =\n getComparableDate(fieldValues.composedDate) !==\n getComparableDate(nextComposedDate);\n\n // Never update the composed date if it hasn't changed\n if (!composedDateWouldChange) return;\n\n // If all fields are touched, then update the composed date regardless of field-level validity\n if (allFieldsAreTouched) {\n updateComposedDateField(nextComposedDate);\n return;\n }\n\n // If the fields are not all touched, only update the composed date if the fields are valid\n if (fieldsAreValid) {\n updateComposedDateField(nextComposedDate);\n }\n }, [form.values[dateFieldName]]);\n\n return (\n \n );\n}\n","import React from 'react';\nimport {usePgMutationForm} from '@practicegenius/domain/src/hooks/usePgForm';\nimport * as Yup from 'yup';\nimport {assertNever} from '@practicegenius/pg-util/src/TypescriptUtils';\nimport {addQueryParams} from '@practicegenius/pg-util/src/UrlUtils';\nimport {\n Button,\n ButtonVariant,\n} from '@practicegenius/pg-ui/src/base/Material/components/Button';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport {styled} from '@mui/material/styles';\nimport {Input} from '@practicegenius/pg-ui/src/base/Material/components/Input';\nimport {objectKeysToCamelCaseDeep} from '@practicegenius/pg-util/src/ObjectUtils';\nimport {UnknownServerData} from '@practicegenius/http-clients-js/src/types';\nimport {SxImg} from '@practicegenius/pg-ui/src/base/Material/components/StyleableBaseComponents';\nimport * as R from 'ramda';\nimport {TemplateLottie} from '@practicegenius/pg-animation/src/Template';\nimport confetti from '@practicegenius/pg-animation/src/lotties/14162-taras-chenenko-success-confetti.json';\nimport {useSnackbar} from 'notistack';\nimport {ValidationException} from '@practicegenius/http-clients-js/src/exceptions';\nimport {useMutation} from '@tanstack/react-query';\nimport {\n FormikMemorableDateInput,\n MemorableDate$Form,\n makeMemorableDateValidationSchema,\n} from '@practicegenius/pg-ui/src/base/Material/components/MemorableDateInput';\nimport {FormikErrors} from 'formik';\nimport {format, subYears} from 'date-fns';\nimport {CommonDateFormats} from '@practicegenius/pg-util/src/DateUtils';\nimport {Link, useHistory} from 'react-router-dom';\nimport {inMobileApp} from '@practicegenius/pg-ui/src/utils/MobileApp';\nimport {usePhpJs} from '../../../utils/php-js';\nimport success from '../../../components/SvgImage/svgs-raw/registrationSuccess.svg';\nimport {TextHr} from '../../../components/TextHr';\nimport {PracticeLogo} from '../../../components/PracticeLogo';\nimport {globalRoutes} from '../../../shared/globalRoutes';\nimport logger from '../../../utils/logger';\nimport {coreApiClient} from '../../../http/httpClientsJs';\nimport {parseCheckInDataFromQueryString} from '../../earn-points/data/checkIn';\nimport {useClearReferrerInSession} from '../../../shared/queries/global';\n\n// TODO this should be considered temporary as an overhaul of all the buttons in sites-dot (at least on the React side) will soon be on the table\n// see https://practicegenius.atlassian.net/browse/PAT-15063\nconst StyledButton = styled(Button)(({theme}) => ({\n height: '56px',\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(3),\n}));\n\nconst NarrowContent = styled(Box)({\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n maxWidth: '320px',\n});\n\nconst FormInputWrapper = styled(NarrowContent)(({theme}) => ({\n gap: theme.spacing(),\n}));\n\nconst EndButtonsWrapper = styled(NarrowContent)(({theme}) => ({\n gap: theme.spacing(3),\n}));\n\ntype CheckInUserData$Form = {\n firstname: string;\n lastname: string;\n birthdate: MemorableDate$Form;\n};\n\nconst serializeCheckInUserData = (userData: CheckInUserData$Form) => ({\n ...userData,\n birthdate: userData.birthdate.composedDate\n ? format(userData.birthdate.composedDate, CommonDateFormats['2020-01-20'])\n : null,\n});\n\n/**\n * This code is intentionally not human readable to limit the ability of a malicious user to parse a user's existence from the response\n * This comment is stripped out of the bundle for production, so it's safe to decode them here:\n * 0: No User Match\n * 1: Single Unregistered User Match\n * 2: Single Registered User Match\n * 3: Multiple User Matches\n *\n * This corresponds with api-core's UnregisteredUserCheckInCode enum, but it is intentionally not represented as a TS enum\n * to avoid leaking the enum values in the bundle\n */\ntype UnregisteredUserCheckInCode = 0 | 1 | 2 | 3;\n\ntype UnregisteredUserCheckInResponse = {\n code: UnregisteredUserCheckInCode;\n registrationToken?: string;\n /** The amount of points potentially awarded by the scan */\n pointsAward: number;\n};\n\nconst parseUnregisteredUserCheckInResponse = (data: UnknownServerData) =>\n objectKeysToCamelCaseDeep(data) as UnregisteredUserCheckInResponse;\n\ntype ActiveScreen =\n | {\n type: 'entry' | 'form';\n }\n | ({\n type: 'result';\n userFirstname: string;\n } & UnregisteredUserCheckInResponse);\n\nconst ScreenHeading: React.FCC = ({children}) => (\n \n {children}\n \n);\n\nconst EntryScreen: React.FC<{\n onConfirmCheckIn: () => void;\n}> = ({onConfirmCheckIn}) => {\n return (\n <>\n \n How would you like to claim your points today?\n \n \n \n Name and Birthdate\n \n or\n \n Log In\n \n \n \n );\n};\n\nconst checkInFormValidationSchema = Yup.object().shape({\n firstname: Yup.string().required('First Name is required'),\n lastname: Yup.string().required('Last Name is required'),\n birthdate: makeMemorableDateValidationSchema({\n enhanceDateSchema: schema =>\n schema\n .min(\n // Disallow dates more than 130 years in the\n subYears(new Date(), 130),\n 'Birthdate is too far in the past'\n )\n .max(\n // disallow dates in the future\n new Date(),\n 'Birthdate cannot be in the future'\n ),\n }),\n});\n\nconst FormScreen: React.FC<{\n onGoBack: () => void;\n onSubmitSuccess: (result: {\n formData: CheckInUserData$Form;\n response: UnregisteredUserCheckInResponse;\n }) => void;\n checkInType: keyof typeof globalRoutes.points.checkin;\n recipeId: number;\n practiceId: number;\n}> = ({onGoBack, onSubmitSuccess, checkInType, recipeId, practiceId}) => {\n const router = useHistory();\n const {enqueueSnackbar} = useSnackbar();\n const checkInMutation = useMutation({\n mutationFn: (userInfo: CheckInUserData$Form) =>\n coreApiClient._unsafe\n .post(`/user/check-in/${checkInType}`, {\n practice_id: practiceId,\n recipe_id: recipeId,\n user_data: serializeCheckInUserData(userInfo),\n })\n .then(response => ({\n formData: userInfo,\n response: parseUnregisteredUserCheckInResponse(response.data),\n })),\n });\n\n const formik = usePgMutationForm({\n formikConfig: {\n initialValues: {\n firstname: '',\n lastname: '',\n birthdate: {\n day: '',\n month: '',\n year: '',\n },\n } as CheckInUserData$Form,\n validationSchema: checkInFormValidationSchema,\n validateOnChange: false,\n onSubmit: form => {\n checkInMutation.mutate(form);\n },\n },\n mutationResult: checkInMutation,\n onSubmitSuccess,\n transformServerErrors: err => {\n return R.applySpec({\n firstname: R.path(['user_data.firstname', 0]),\n lastname: R.path(['user_data.lastname', 0]),\n birthdate: {\n composedDate: R.path(['user_data.birthdate', 0]),\n },\n })(err) as FormikErrors;\n },\n onSubmitError: err => {\n if (err instanceof ValidationException) {\n // If recipe_id is in validation errors, then we must be on an invalid recipe\n if ('recipe_id' in err.errors) router.replace(globalRoutes.login.index);\n } else {\n logger.error(\n 'Got an unexpected error when attempting unauthenticated user check-in',\n err\n );\n const message =\n err instanceof Error ? err.message : 'An error occurred';\n enqueueSnackbar(message, {\n variant: 'error',\n });\n }\n },\n });\n\n return (\n \n Claim with your Name and Birthday\n \n \n\n \n \n \n \n \n Submit\n \n \n Back\n \n \n \n );\n};\n\nconst makeRegistrationLinkWithToken = (token: string) =>\n addQueryParams(globalRoutes.account.register.RegistrationMethods, {\n token,\n });\n\nconst SuccessGraphic = () => {\n const [showAnimation, setShowAnimation] = React.useState(false);\n\n return (\n \n {showAnimation && (\n \n \n \n )}\n setShowAnimation(true)}\n />\n \n );\n};\n\nconst CheckInResultScreen: React.FC> =\n ({userFirstname, pointsAward, registrationToken, code}) => {\n const verified = code !== 3;\n return (\n \n \n <>\n Hi {userFirstname} 👋\n \n {verified\n ? `You scanned the QR code for ${pointsAward} points!`\n : \"We couldn't verify your account\"}\n \n \n {verified\n ? \"If eligible, they'll appear in your account soon. Log in or sign up to see your points.\"\n : `Please contact ${window.phpJs.practice.practice_name} for help.`}\n \n {verified && (\n \n \n \n )}\n \n \n\n \n {(() => {\n const makeButtonText = (text: string) =>\n `${text}${verified ? ' To View Points' : ''}`;\n\n const {primaryButtonProps, secondaryButtonProps} = registrationToken\n ? ({\n primaryButtonProps: {\n href: makeRegistrationLinkWithToken(registrationToken),\n children: makeButtonText('Sign Up'),\n },\n secondaryButtonProps: {\n variant: ButtonVariant.text,\n children: 'Exit and Sign Up Later',\n },\n } as const)\n : ({\n primaryButtonProps: {\n component: Link,\n children: makeButtonText('Log In'),\n to: {\n pathname: globalRoutes.login.index,\n state: {\n showBackButton: true,\n },\n },\n },\n secondaryButtonProps: {\n variant: ButtonVariant.outlined,\n children: 'Done',\n },\n } as const);\n\n return (\n <>\n \n \n \n );\n })()}\n \n \n );\n };\n\nexport const UnauthenticatedCheckIn = () => {\n const {practice_id: practiceId} = usePhpJs(x => x.practice) as {\n practice_id: number;\n practice_name: string;\n };\n\n const checkIn = React.useMemo(\n () => parseCheckInDataFromQueryString(window.location.search),\n []\n );\n\n // Setup initial state\n const [activeScreen, setActiveScreen] = React.useState({\n type: 'entry',\n });\n const clearReferrerInSession = useClearReferrerInSession();\n\n // If checkIn data did not parse or practice id does not correspond to a real practice then redirect to the login form\n if (!checkIn || practiceId <= 0) {\n window.location.href = '/login';\n return null;\n }\n\n return (\n \n \n {\n // While not in the mobile app this logo is rendered by the Kohana layout\n inMobileApp && (\n \n )\n }\n {(() => {\n switch (activeScreen.type) {\n case 'entry':\n return (\n setActiveScreen({type: 'form'})}\n />\n );\n case 'form':\n return (\n setActiveScreen({type: 'entry'})}\n onSubmitSuccess={({formData, response}) => {\n // Usually when a scan lands on this page they will have been redirected to this landing page\n // and the actual check-in page will be there referrer in the session.\n\n // We want to leave this referrer in place if a user is unregistered because this scan\n // does not award them any points.\n\n // However, a single matched user will be awarded points by entering their information.\n // If the entered info matches a user, we want to clear this referrer so that when the user logs in\n // or registers they won't see the points screen again (which would trigger another check-in attempt)\n if (response.code !== 0) {\n clearReferrerInSession.mutate();\n }\n\n return setActiveScreen({\n type: 'result',\n userFirstname: formData.firstname,\n ...response,\n });\n }}\n />\n );\n case 'result':\n return ;\n\n default:\n assertNever(activeScreen);\n }\n })()}\n \n \n );\n};\n","import * as React from 'react';\nimport {\n BrowserRouter as Router,\n Redirect,\n Route,\n Switch,\n Link,\n} from 'react-router-dom';\nimport {Box} from '@mui/material';\nimport {useSecretMobileUtilityMenu} from '@practicegenius/pg-ui/src/hooks/useSecretMobileUtilityMenu';\nimport {postMessageToMobileApp} from '@practicegenius/pg-ui/src/utils/MobileApp';\nimport {inferServiceBrandFromWindow} from '@practicegenius/domain/src/data/serviceBrand';\nimport Login from './screens/Login';\nimport {Home} from './screens/Home';\nimport {ForgotPassword} from './screens/ForgotPassword';\nimport {PasswordEmailSent} from './screens/PasswordEmailSent';\nimport ForgotPasswordReset from './screens/ForgotPasswordReset';\nimport {PasswordResetSuccess} from './screens/PasswordResetSuccess';\nimport {ForgotUsername} from './screens/ForgotUsername';\nimport {UsernameEmailSent} from './screens/UsernameEmailSent';\nimport {routes} from './routes';\nimport {LegacyContactVerificationLanding} from './screens/LegacyContactVerificationLanding';\nimport {UnauthenticatedStandardProvider} from '../../components/StandardProvider';\nimport {UnauthenticatedCheckIn} from './screens/UnauthenticatedCheckIn';\n\n/**\n * The Home app provides most of the UI for the unauthenticated portion of sites dot. The exceptions are:\n * - account registration\n * - promotions\n *\n * There is not a huge appetite to refactor those apps into this one with the idea of a Next.js migration on the horizon.\n */\nexport default function App() {\n const utilityMenu = useSecretMobileUtilityMenu({\n practiceInfo: {\n id: window.phpJs.practice.practice_id,\n hubUrl: window.location.origin,\n practiceFeatures: window.phpJs.practiceFeatures,\n },\n });\n const serviceBrand = inferServiceBrandFromWindow();\n\n // Let the mobile app know that the user is not authenticated\n React.useEffect(() => {\n postMessageToMobileApp({\n type: 'notify_user_authenticated_status',\n payload: {\n authenticated: false,\n },\n });\n }, []);\n\n return (\n \n \n \n \n \n {(\n [\n [\n routes.index,\n () => (\n \n ),\n ],\n [routes.checkin, UnauthenticatedCheckIn],\n [routes.login.index, Login],\n [routes.login.forgotUsername, ForgotUsername],\n [routes.login.forgotUsernameEmailSent, UsernameEmailSent],\n [routes.login.forgotPassword, ForgotPassword],\n [routes.login.forgotPasswordEmailSent, PasswordEmailSent],\n [routes.login.resetPassword, ForgotPasswordReset],\n [routes.login.passwordResetSuccess, PasswordResetSuccess],\n\n // Temporary: A little landing page for legacy contact verification emails.\n [\n routes.login.legacyContactVerification,\n LegacyContactVerificationLanding,\n ],\n ] as [string, React.ComponentType][]\n ).map(([path, Component]) => (\n \n ))}\n \n \n \n {utilityMenu.displayMenu && (\n <>\n theme.spacing(2),\n right: theme => theme.spacing(2),\n width: '60px',\n height: '60px',\n }}\n onClick={utilityMenu.incrementTickCount}\n />\n {utilityMenu.dialog}\n \n )}\n \n );\n}\n","/* eslint-disable @typescript-eslint/no-use-before-define */\nimport './Modal.scss';\nimport cn from 'classnames';\nimport * as React from 'react';\n// @ts-expect-error\nimport ReactModal from 'react-modal';\nimport {styled} from '@mui/material/styles';\nimport {BREAKPOINTS} from '../../constants/layout';\nimport {EscapeX} from './ui';\n\n// See http://reactcommunity.org/react-modal/accessibility/\nReactModal.setAppElement('body');\n\ntype ModalProps = {\n children: React.ReactNode;\n close: () => void;\n} & React.ComponentProps;\n\nconst ResponsiveModal = styled(ReactModal)({\n [`@media (max-width: ${BREAKPOINTS.MEDIUM})`]: {\n width: '100%',\n minHeight: '100%',\n margin: 0,\n borderRadius: 0,\n },\n});\n\nexport function Modal({children, className, noEsc, ...props}: ModalProps) {\n return (\n \n {!noEsc && (\n \n )}\n {children}\n \n );\n}\n","import {styled} from '@mui/material/styles';\nimport {Box} from '@mui/material';\n\nexport const ModalButtons = styled(Box)({\n display: 'flex',\n justifyContent: 'center',\n marginTop: 25,\n\n '& button:first-child': {\n marginRight: 15,\n },\n});\n","import * as React from 'react';\nimport './Modal.scss';\nimport {styled} from '@mui/material/styles';\nimport {TextButton} from '../TextButton';\n\nexport const ModalTitle = styled('h3')({\n lineHeight: '40px',\n margin: 0,\n});\n\nexport const ModalContent = styled('div')({\n marginTop: '20px',\n textAlign: 'center',\n color: '#474747',\n});\n\nconst BlackX = styled(TextButton)({\n color: 'black',\n cursor: 'pointer',\n fontSize: '20px',\n fontWeight: 500,\n});\n\nconst ModalHeaderBar = styled('div')({\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n borderRadius: '7px 7px 0 0',\n backgroundColor: '#f1f2f2',\n fontSize: '20px',\n color: 'var(--template-color-2)',\n\n '& > span': {\n fontSize: '25px',\n },\n});\n\nexport const EscapeX: React.FC<{\n close: () => unknown;\n style?: React.CSSProperties;\n}> = ({close, ...props}) => (\n \n ✕\n \n);\n\nexport const ModalHeader = ({children}: {children: React.ReactNode}) => (\n {children}\n);\n","import React from 'react';\nimport * as R from 'ramda';\nimport {MuiSxProps} from '@practicegenius/pg-ui/src/base/Material/utils/sx-helpers';\nimport {SxImg} from '@practicegenius/pg-ui/src/base/Material/components/StyleableBaseComponents';\nimport {makeGetPracticeLogoUrl} from '@practicegenius/domain/src/data/practice';\nimport {useIsAuthenticated} from './AuthenticationContext';\nimport {useActivePractice} from '../shared/hooks/useActivePractice';\nimport {PG_CORE_URL} from '../constants/env';\nimport {usePhpJs} from '../utils/php-js';\n\ntype Props = {\n sx?: MuiSxProps;\n /** override the default alt text */\n alt?: string;\n};\n\nconst DEFAULT_PRACTICE_ALT_TEXT = 'Practice Logo';\nexport const getPracticeLogoUrl = makeGetPracticeLogoUrl({\n coreServiceUrl: PG_CORE_URL,\n});\n\nconst UnauthenticatedPracticeLogo: React.FC = ({sx, alt}) => {\n // TODO When we introduce Next.js to the project I expect that we'll scope this even farther:\n // UnauthenticatedKohanaPracticeLogo and UnauthenticatedNextPracticeLogo.\n const practiceId = usePhpJs(R.pathOr(0, ['practice', 'practice_id']));\n return (\n \n );\n};\n\nconst AuthenitcatedPracticeLogo: React.FC = ({sx, alt}) => {\n const practice = useActivePractice();\n return (\n \n );\n};\n\n/** Renders a stylable logo for the current practice. If there is no practice, no logo will render */\nexport const PracticeLogo: React.FC = props => {\n const isAuthenticated = useIsAuthenticated();\n\n return isAuthenticated ? (\n \n ) : (\n \n );\n};\n","import {makeNoAuthApiClient} from '@practicegenius/http-clients-js/src/ApiClient';\nimport {PG_CORE_URL} from '../constants/env';\n\nexport const coreApiClient = makeNoAuthApiClient({\n baseURL: PG_CORE_URL,\n});\n","import {SocialAuthIntegration} from '@practicegenius/domain/src/data/integrations';\n\nexport const platformLabels: {\n [k in SocialAuthIntegration]: string;\n} = {\n facebook: 'Facebook',\n google: 'Google',\n apple: 'Apple',\n};\n","import {Practice} from '@practicegenius/domain/src/data/practice';\nimport {useUserProfile} from '../../components/UserProfileProvider';\nimport {useApi} from '../../http/AuthApiProvider';\n\n/**\n * In theory, we should be able to fetch this statically from the subdomain in the host header\n * We don't currently have that ability at hand, so this uses the practice id from the core JWT\n */\n/** Get the Practice info for the currently-logged-in practice */\nexport const useActivePractice = (): Practice => {\n const {practices} = useUserProfile();\n const {decodedToken} = useApi();\n\n const practice = practices.find(p => p.id === decodedToken.practiceId);\n if (!practice)\n throw new Error(\n 'Not able to find an entry for the current practice in the user profile!'\n );\n\n return practice;\n};\n","import * as React from 'react';\nimport qs from 'qs';\n\nexport function queryStringToObject(): any {\n return qs.parse(window.location.search.slice(1));\n}\n\n/**\n * @deprecated Use a hook for this instead\n */\nexport const withQueryParams =\n (parseQueryParams: (a: any) => any) =>\n (\n Inner: React.ComponentType\n ): React.ComponentType> => {\n return props => (\n \n );\n };\n","import * as R from 'ramda';\nimport {CountryCode} from '@practicegenius/countries/src/types';\nimport {\n ApiClient,\n UnknownServerData,\n} from '@practicegenius/http-clients-js/src/types';\nimport {objectKeysToCamelCaseDeep} from '@practicegenius/pg-util/src/ObjectUtils';\nimport {setType} from '@practicegenius/pg-util/src/TypescriptUtils';\nimport {pipe} from '@practicegenius/pg-util/src/FunctionUtils';\nimport {addQueryParams} from '@practicegenius/pg-util/src/UrlUtils';\nimport {parseIsoOrNull} from '@practicegenius/pg-util/src/DateUtils';\nimport {Flavor} from './flavor';\nimport {ServiceBrand} from './serviceBrand';\nimport {MembershipType} from './membershipType';\n\nexport type PracticeType = 'dental' | 'ortho' | 'education';\nexport type PracticeStatus =\n | 'live'\n | 'training'\n | 'postTraining'\n | 'demo'\n | 'disabled'\n | 'deleted';\n\nexport type PracticeFeature =\n | 'login_only'\n | 'user_parent_accounts'\n | 'communication_manager'\n | 'sites_accessible_by_team_member'\n | 'referral_manager'\n | 'promotions'\n | 'contests_beta'\n | 'duplicate_manager'\n | 'analytics_dummy_data'\n | 'global_user_beta'\n | 'home_page_alerts_beta'\n | 'automation_manager'\n | 'automation_manager_beta'\n | 'reviews_automation_beta'\n | 'instagram'\n | 'hubbux_teams_beta'\n | 'sweepstakes_beta'\n | 'registration_invite_beta'\n | 'stock_image_cms_beta'\n | 'reactions_comments_beta'\n | 'recognition_giphy_beta'\n | 'hide_non_admin_redeem_beta'\n | 'add_updated_members_table'\n | 'internal_analytics_beta'\n | 'try_members_app'\n | 'members_app_beta'\n | 'identity_service_beta'\n | 'generic_posts_beta'\n | 'global_staff_beta'\n | 'account_billing_beta';\n\nexport type PracticeSegmentIdentifier =\n | 'dental'\n | 'ortho'\n | 'education'\n | 'medical'\n | 'physical_therapy'\n | 'teams'\n | 'chiropractic'\n | 'optometry';\n\nexport type PracticeSegment = {\n id: number;\n flavor: Flavor;\n identifier: PracticeSegmentIdentifier;\n label: string;\n};\n\ntype LinkedPracticeType = 'business' | 'teams';\ntype LinkedPractice = {\n /** practiceId of the linked practice */\n id: number;\n /** Fully Qualified logo to the URL image */\n logo: string;\n name: string;\n serviceBrand: ServiceBrand;\n membershipType: MembershipType;\n segment: PracticeSegment;\n};\n\nexport type Practice = {\n id: number;\n businessCode: string;\n uri: string;\n hubUrl: string;\n name: string;\n type: PracticeType;\n serviceBrand: ServiceBrand;\n membershipType: MembershipType;\n status: PracticeStatus;\n website: string;\n phone: string;\n email: string;\n timeZone: string;\n appointmentsEnabled: boolean;\n logo: string;\n logoAlternate: string;\n rewardCard: string;\n colors: {\n color1: string;\n color2: string;\n color3: string;\n color4: string;\n color5: string;\n color6: string;\n color7: string;\n color8: string;\n color9: string;\n color10: string;\n color11: string;\n };\n practiceFeatures: PracticeFeature[];\n hasPmsIntegration: boolean;\n segment: PracticeSegment;\n linkedPractices?: Partial>;\n country: CountryCode;\n software: string | null;\n startedAt: Date | null;\n};\n\nexport type PracticeOffice = {\n id: number;\n name: string;\n addressLine1: string;\n addressLine2: string;\n city: string;\n state: string;\n zip: string;\n country: CountryCode;\n};\n\nexport type PracticeLocation = PracticeOffice & {\n geometry: {\n location: {\n lat: number;\n lng: number;\n };\n viewport: {\n south: number;\n west: number;\n north: number;\n east: number;\n };\n };\n};\n\nexport type PracticeReview = {\n id: number;\n reviewUrl: string;\n practiceId: number;\n locationId: number;\n userId: number;\n rating: number;\n message: string;\n featured: boolean;\n status: 'unpublished' | 'published';\n createdAt: Date;\n};\n\nexport const transformPracticeOffices: (\n data: UnknownServerData\n) => PracticeOffice[] = R.pipe(\n R.pipe(R.propOr({}, 'items'), objectKeysToCamelCaseDeep),\n setType()\n);\n\n/** Pull linked practices from response meta and attach it to the main entity */\nconst parseLinkedPractices = (data: UnknownServerData) => {\n const {item, meta} = data;\n const linkedPractices: Practice['linkedPractices'] = {};\n\n if (meta?.teamAccount) linkedPractices.teams = meta.teamAccount;\n if (meta?.businessAccount) linkedPractices.business = meta.businessAccount;\n\n return R.isEmpty(linkedPractices)\n ? item\n : {\n ...item,\n linkedPractices,\n };\n};\n\nexport const transformPractice = pipe(\n R.pick(['item', 'meta']),\n objectKeysToCamelCaseDeep,\n R.evolve({item: {startedAt: parseIsoOrNull}}),\n parseLinkedPractices\n);\n\nexport const fetchRawPractice =\n (coreAuth: ApiClient) =>\n ({practiceId}: {practiceId: number}) =>\n coreAuth._unsafe\n .get(`/practices/${practiceId}`)\n .then(x => x.data as UnknownServerData);\n\n/**\n * Is the practice of the given flavor?\n *\n * @deprecated\n */\nexport const practiceIsFlavor = R.curry(\n (flavor: Flavor, p: Practice) => p.segment.flavor === flavor\n);\n/** Is the practice of the given brand? */\nexport const practiceIsServiceBrand = R.curry(\n (serviceBrand: ServiceBrand, p: Practice) => p.serviceBrand === serviceBrand\n);\n/** Is the practice of the given segment? */\nexport const practiceIsSegment = R.curry(\n (segment: PracticeSegmentIdentifier, p: Practice) =>\n p.segment.identifier === segment\n);\n/** Does the practice have a linkage to another practice of the given type? */\nexport const practiceHasLinkToType = R.curry(\n (type: LinkedPracticeType, p: Practice) => Boolean(p.linkedPractices?.[type])\n);\n\n/** Is the given practice a Teams account? */\nexport const practiceIsHubbuxTeams = (practice: Practice) =>\n practice.membershipType === 'employees';\n\n/** Make a getter for the URL for a given practice's logo */\nexport type PracticeLogoUrlOptions = Partial<{\n width: number;\n pixelDensity: number;\n trimWhiteSpace: boolean;\n}>;\n\nexport const makeGetPracticeLogoUrl =\n (config: {coreServiceUrl: string}) =>\n (practiceId: number, options: PracticeLogoUrlOptions = {}) => {\n const logoBaseUrl = `${config.coreServiceUrl}/practices/${practiceId}/logo`;\n\n if (R.isEmpty(options)) return logoBaseUrl;\n\n const params: Record = {};\n if (options.width) {\n params.w = options.width;\n if (options.pixelDensity) params.w *= options.pixelDensity;\n }\n if (options.trimWhiteSpace) params.trimaway = 'true';\n\n return addQueryParams(\n `${config.coreServiceUrl}/practices/${practiceId}/logo`,\n params\n );\n };\n","import React from 'react';\nimport * as R from 'ramda';\nimport {\n FormikConfig,\n FormikValues,\n FormikErrors,\n useFormik,\n FormikTouched,\n FormikState,\n FieldInputProps,\n FieldMetaProps,\n FieldHelperProps,\n} from 'formik';\nimport {UseMutationResult} from '@tanstack/react-query';\nimport {UnknownServerData} from '@practicegenius/http-clients-js/src/types';\nimport {ValidationException} from '@practicegenius/http-clients-js/src/exceptions';\nimport {voidOp} from '@practicegenius/pg-util/src/TypescriptUtils';\nimport {objectKeysToCamelCaseDeep} from '@practicegenius/pg-util/src/ObjectUtils';\nimport {pipe} from '@practicegenius/pg-util/src/FunctionUtils';\nimport {ZodError} from 'zod';\n\n/** This is a copy-paste of Formik's definition of the return type of `useFormik`\n * It's copy-pasted because it's not a named type in their library, and we really need a\n * direct definition of it so we can do our shenanigans with the generics.\n */\nexport type PgForm = {\n initialValues: Values;\n initialErrors: FormikErrors;\n initialTouched: FormikTouched;\n initialStatus: any;\n handleBlur: {\n (e: React.FocusEvent): void;\n (fieldOrEvent: T): T extends string ? (e: any) => void : void;\n };\n handleChange: {\n (e: React.ChangeEvent): void;\n >(\n field: T_1\n ): T_1 extends React.ChangeEvent\n ? void\n : (e: string | React.ChangeEvent) => void;\n };\n handleReset: (e: any) => void;\n handleSubmit: (e?: React.FormEvent | undefined) => void;\n resetForm: (nextState?: Partial> | undefined) => void;\n setErrors: (errors: FormikErrors) => void;\n setFormikState: (\n stateOrCb:\n | FormikState\n | ((state: FormikState) => FormikState)\n ) => void;\n setFieldTouched: (\n field: string,\n touched?: boolean,\n shouldValidate?: boolean | undefined\n ) => any;\n setFieldValue: (\n field: string,\n value: any,\n shouldValidate?: boolean | undefined\n ) => any;\n setFieldError: (field: string, value: string | undefined) => void;\n setStatus: (status: any) => void;\n setSubmitting: (isSubmitting: boolean) => void;\n setTouched: (\n touched: FormikTouched,\n shouldValidate?: boolean | undefined\n ) => any;\n setValues: (values: Values, shouldValidate?: boolean | undefined) => any;\n submitForm: () => Promise;\n validateForm: (values?: Values) => Promise>;\n validateField: (name: string) => Promise | Promise;\n isValid: boolean;\n dirty: boolean;\n unregisterField: (name: string) => void;\n registerField: (name: string, {validate}: any) => void;\n getFieldProps: (\n nameOrOptions: any\n ) => FieldInputProps & {error: string | undefined};\n getFieldMeta: (name: string) => FieldMetaProps;\n getFieldHelpers: (name: string) => FieldHelperProps;\n validateOnBlur: boolean;\n validateOnChange: boolean;\n validateOnMount: boolean;\n values: Values;\n errors: FormikErrors;\n touched: FormikTouched;\n isSubmitting: boolean;\n isValidating: boolean;\n status?: any;\n submitCount: number;\n};\n\ntype Props = {\n formikConfig: FormikConfig;\n /**\n * The value returned by `useMutation()` from react-query\n */\n mutationResult: UseMutationResult<\n TResultData,\n TResultError,\n TMutationVariables\n >;\n /**\n * Called when the form submission is successful\n */\n onSubmitSuccess?: (\n data: TResultData,\n formik: PgForm,\n mutationResult: UseMutationResult<\n TResultData,\n TResultError,\n TMutationVariables\n >\n ) => void;\n /**\n * Called when the form submission fails. This hook already integrates server-side validation errors\n * with Formik, so this only needs to do form-specific work.\n */\n onSubmitError?: (\n error: TResultError | null,\n formik: PgForm,\n mutationResult: UseMutationResult<\n TResultData,\n TResultError,\n TMutationVariables\n >\n ) => void;\n\n transformServerErrors?: (\n errors: UnknownServerData\n ) => FormikErrors;\n};\n\nexport type PgFormFieldProps = FieldInputProps & {\n error: string | undefined;\n};\n\n/**\n * This hook is effectively a lightweight wrapper around formik\n * It has the exact same signature as the `useFormik`, except for a\n * slightly-enhanced `getFieldProps` helper that includes an error prop.\n * This builds in our desired UX of not showing any field-level errors\n * unless that field has been touched.\n */\nexport function usePgForm(\n config: FormikConfig\n): PgForm {\n const formik = useFormik(config);\n\n // This enhances `formik.getFieldProps` by adding an 'error' prop\n // that is only defined if the field has been touched\n const getFieldProps = (field: keyof TFormValue) => {\n const {error, touched} = formik.getFieldMeta(field as string);\n\n return {\n error: touched ? error : undefined,\n ...formik.getFieldProps(field as string),\n } as PgFormFieldProps;\n };\n\n // We only want to consider errors on fields that have been touched\n const errorsOnTouchedFields = R.pick(\n R.keys(formik.touched),\n formik.errors\n ) as FormikErrors;\n\n // setFieldValue doesn't set fields to Touched\n const setFieldValue: typeof formik.setFieldValue = async (...args) => {\n formik.setFieldValue(...args);\n formik.setFieldTouched(args[0], true, false);\n };\n\n return {\n ...formik,\n getFieldProps,\n errors: errorsOnTouchedFields,\n setFieldValue,\n };\n}\n\n/** Extract field-level validation errors from typical 422 response from api-core */\nexport function parseLaravelValidationErrorsForFormik<\n T = Record\n>(data: UnknownServerData): FormikErrors {\n return pipe>(objectKeysToCamelCaseDeep, R.map(R.head))(data);\n}\n\nexport function parseZodErrorsForFormik>(\n errors: ZodError['errors']\n): FormikErrors {\n return errors.reduce((acc, error) => {\n return R.assocPath(error.path, error.message, acc);\n }, {});\n}\n\n/**\n * Does the bulk of the work to integrate a formik instance and a mutation from react-query\n *\n * This hook is an extension of `usePgForm` that aims to be a more complete solution.\n * It accepts the result of a `useMutation` from react-query and sets up an effect that\n * simplifies getting it to work well with formik.\n */\nexport function usePgMutationForm<\n TFormValue extends FormikValues,\n TResultData,\n TResultError,\n TMutationVariables\n>({\n formikConfig,\n mutationResult,\n onSubmitSuccess = voidOp,\n onSubmitError = voidOp,\n transformServerErrors,\n}: Props<\n TFormValue,\n TResultData,\n TResultError,\n TMutationVariables\n>): PgForm {\n const formik = usePgForm(formikConfig);\n React.useEffect(() => {\n switch (mutationResult.status) {\n case 'success': {\n // Set the internal form status to success, which the discard dialog uses\n // to unblock navigation\n formik.setStatus('success');\n // Defer excuting the success callback to the next tick so the formik status\n // will definitely be updated.\n setTimeout(\n () => onSubmitSuccess(mutationResult.data, formik, mutationResult),\n 0\n );\n return;\n }\n\n case 'error': {\n // Formik requires manually setting this\n formik.setSubmitting(false);\n const {error} = mutationResult;\n\n if (error instanceof ValidationException) {\n formik.setErrors(\n transformServerErrors\n ? transformServerErrors(error.errors)\n : parseLaravelValidationErrorsForFormik(error.errors)\n );\n }\n\n return onSubmitError(error, formik, mutationResult);\n }\n\n default:\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [mutationResult.status, formik.setErrors, formik.setStatus]);\n\n return formik;\n}\n\n/**\n * Wraps around getFieldProps for a simple text input.\n * The yielded value is updated immediately for maximum responsiveness, but the\n * call to the formik onChange is debounced so we don't pay the high cost of\n * full form validation with every input change.\n */\nexport const useDebouncedInputProps = (\n {value, onChange, ...rest}: PgFormFieldProps,\n debounceTimeMs = 250\n): PgFormFieldProps => {\n /** We capture the incoming change events from the input so we can make the debounced call to onChange */\n const [changeEvent, setChangeEvent] =\n React.useState | null>(null);\n\n /** Debounce calls to `props.onChange` for the given debounceTime */\n React.useEffect(() => {\n const handler = setTimeout(() => {\n if (onChange && changeEvent) {\n onChange(changeEvent);\n }\n }, debounceTimeMs);\n\n return () => {\n clearTimeout(handler);\n };\n }, [changeEvent]);\n\n return {\n // Return the value from the last change event if we have it\n value: changeEvent?.target.value ?? value,\n onChange: setChangeEvent,\n ...rest,\n };\n};\n","import React from 'react';\nimport Lottie from 'react-lottie';\n\ntype Props = {\n animationData: unknown;\n height?: number;\n width?: number;\n isClickToPauseDisabled?: boolean;\n options?: Partial['options']>;\n};\n\nexport type ImplementerProps = Omit;\n\nexport const TemplateLottie: React.FC = ({\n options,\n isClickToPauseDisabled = true,\n animationData,\n ...otherProps\n}) => {\n const mergedOptions = {\n rendererSettings: {\n preserveAspectRatio: 'xMidYMid slice',\n },\n autoplay: true,\n loop: false,\n ...options,\n animationData,\n };\n\n return (\n \n );\n};\n","import {styled} from '@mui/material';\n\n/** An unstyled div element that can take the sx prop */\nexport const SxDiv = styled('div')({});\n/** An unstyled span element that can take the sx prop */\nexport const SxSpan = styled('span')({});\n/** An unstyled img element that can take the sx prop */\nexport const SxImg = styled('img')({});\n/** An unstyled 'a' element that can take the sx prop */\nexport const SxAnchor = styled('a')({});\n/** An unstyled section element that can take the sx prop */\nexport const SxSection = styled('section')({});\n","import React from 'react';\nimport {assertNever} from '@practicegenius/pg-util/src/TypescriptUtils';\nimport {\n makeChannelUpdateMessage,\n AppToSitesMessage,\n} from '@practicegenius/domain/src/sites-mobile-app/messages';\nimport {inMobileApp, postMessageToMobileApp} from '../utils/MobileApp';\n\n/** Ask mobile app for debug info */\nexport const useAppDebugInfo = () => {\n const [debugInfo, setDebugInfo] = React.useState(null);\n\n React.useEffect(() => {\n if (!inMobileApp) return;\n\n postMessageToMobileApp(makeChannelUpdateMessage('debug', true));\n postMessageToMobileApp({\n type: 'request_app_debug_info',\n });\n\n const handleMobileAppEvent = async (event: MessageEvent) => {\n if (typeof event.data !== 'string') return;\n\n try {\n // TODO We need a more reliable way to parse events from the mobile app such that new additions to sites-dot don't cause this logic to choke\n const data = JSON.parse(event.data) as AppToSitesMessage;\n\n if (data.channel !== 'debug') return;\n\n switch (data.type) {\n case 'receive_app_debug_info':\n return setDebugInfo(data.payload);\n\n default:\n assertNever(data);\n }\n } catch (e) {\n // This might handle messages from other sources and they might not be JSON, so we need to ignore them\n if (e instanceof SyntaxError) {\n // JSON failed to parse, so it must not be a known message\n return;\n }\n\n // otherwise, the error is unexpected and should be thrown\n throw e;\n }\n };\n\n window.addEventListener('message', handleMobileAppEvent, true);\n return () => {\n window.removeEventListener('message', handleMobileAppEvent, true);\n postMessageToMobileApp(makeChannelUpdateMessage('debug', false));\n };\n }, []);\n\n return debugInfo;\n};\n","import React from 'react';\nimport {PracticeFeature} from '@practicegenius/domain/src/data/practice';\nimport Dialog from '@mui/material/Dialog';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport {useTickerAction} from '@practicegenius/domain/src/hooks/useTickerAction';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport {useAppDebugInfo} from './useAppDebugInfo';\nimport {inMobileApp, postMessageToMobileApp} from '../utils/MobileApp';\n\ntype PracticeInfo = {\n id: number;\n hubUrl: string;\n practiceFeatures: PracticeFeature[];\n};\n\ntype Props = {\n practiceInfo?: PracticeInfo;\n authenticated?: true;\n inNewApp?: true;\n};\n\nconst useSwapAppMenuItem = ({\n practiceInfo: practice,\n inNewApp,\n}: Props): JSX.Element | null => {\n if (!practice || !practice.practiceFeatures.includes('try_members_app'))\n return null;\n\n const itemHref = (() => {\n if (inNewApp) return practice.hubUrl;\n\n const membersHref = practice.hubUrl.replace(\n /^https?:\\/\\/[^.]+/,\n 'https://members'\n );\n const membersUrl = new URL(membersHref);\n membersUrl.searchParams.set('bid', practice.id.toString());\n\n return membersUrl.toString();\n })();\n\n return (\n \n \n Swap to {inNewApp ? 'Old' : 'New'} App\n \n \n );\n};\n\nconst useDebugMenuItem = (): JSX.Element | null => {\n const debugInfo = useAppDebugInfo();\n return !debugInfo?.isDebug ? null : (\n \n {\n postMessageToMobileApp({\n type: 'open_mobile_debug',\n });\n }}\n >\n Debug Menu\n \n \n );\n};\n\n// TODO extract to pg-ui\nexport const useSecretMobileUtilityMenu = (props: Props) => {\n const [dialogOpen, setDialogOpen] = React.useState(false);\n // These are hooks so they can give us a legitimate null value if they shouldn't render.\n // This is important for providing the correct value of `displayUtilityMenu`\n const swapAppMenuItem = useSwapAppMenuItem(props);\n const debugMenuItem = useDebugMenuItem();\n\n // Display the menu if we're in the mobile app and there's at least one item to display\n const displayMenu =\n inMobileApp && [swapAppMenuItem, debugMenuItem].filter(Boolean).length > 0;\n\n const ticker = useTickerAction({\n numTicks: 3,\n onTickCountReached: () => {\n setDialogOpen(true);\n },\n });\n\n const dialog = !displayMenu ? null : (\n setDialogOpen(false)}\n onClick={() => setDialogOpen(false)}\n >\n Mobile App Utilities\n \n {swapAppMenuItem}\n {debugMenuItem}\n \n \n );\n return {\n displayMenu,\n dialog,\n incrementTickCount: () => {\n if (displayMenu) ticker.incrementTickCount();\n },\n };\n};\n","import React from 'react';\n\ntype DebugCallbackProps = {\n /** Number of ticks currently tracked */\n numTicks: number;\n};\ntype DebugCallback = (props: DebugCallbackProps) => void;\n\ntype Props = {\n /** Number of ticks required to trigger the callback */\n numTicks: number;\n /** Callback to trigger */\n onTickCountReached: () => void;\n /**\n * Time in milliseconds to wait for the next tick before resetting the counter\n * @default 2000\n */\n tickCountResetMs?: number;\n /**\n * Whether the hook is enabled\n * @default true\n */\n enabled?: boolean;\n /** Optional debug options */\n debug?: Partial<{\n /** Called every time the effect runs. Not called if the hook is disabled */\n onEffectCalled: DebugCallback;\n /** Called when the tick count is reset */\n onResetTickCount: DebugCallback;\n }>;\n};\n\n/** Fires the given callback when a given number of ticks is reached */\nexport const useTickerAction = ({\n numTicks,\n onTickCountReached,\n tickCountResetMs = 2000,\n enabled = true,\n debug = {},\n}: Props) => {\n const [tickCount, setTickCount] = React.useState(0);\n const tapTimeout = React.useRef(null);\n\n const resetTickCount = () => {\n debug.onResetTickCount?.({numTicks: tickCount});\n setTickCount(0);\n };\n // handle logo screen taps side-effects\n React.useEffect(() => {\n if (!enabled) return;\n const debugProps = {numTicks: tickCount};\n debug.onEffectCalled?.(debugProps);\n if (tapTimeout.current) clearTimeout(tapTimeout.current);\n\n if (tickCount >= numTicks) {\n onTickCountReached();\n setTickCount(0);\n } else if (tickCount > 0) {\n tapTimeout.current = setTimeout(resetTickCount, tickCountResetMs);\n }\n\n // Don't do anything if tickCount is 0\n }, [tickCount]);\n\n return {\n incrementTickCount: () => setTickCount(prev => prev + 1),\n decrementTickCount: () => setTickCount(prev => prev - 1),\n resetTickCount,\n };\n};\n"],"names":["setSessionErrors","errors","state","formState","submitErrors","submitFailed","lastSubmittedValues","values","InitializeInitialErrors","componentDidMount","initialErrors","form","mutators","this","props","Object","keys","length","render","component","formRPToDisableSubmit","pristine","invalid","dirtySinceLastSubmit","submitting","Boolean","Form","children","onSubmit","otherProps","handleSubmit","args","error","formRP","style","margin","noValidate","submitDisabled","combinedErrors","getState","map","name","message","filter","reduce","acc","key","Field","fieldRP","displayError","meta","touched","submitError","fieldRPToError","input","defaultProps","parse","value","parseCheckInDataFromQueryString","queryString","checkin","checkinData","ignoreQueryPrefix","Array","isArray","type","id","parseInt","Number","isNaN","inferServiceBrandFromWindow","window","patientrewardshub","hubbux","culturello","location","hostname","replace","Wrapper","styled","height","flexDirection","alignItems","flex","display","Divider","backgroundColor","Text","TextHr","Title","textAlign","color","Content","SociallyRegisteredModal","isOpen","close","socialAccounts","onLoginError","Modal","platforms","unregisteredAccountMethods","freeze","REWARDS_NUMBER","TEMP_REG_CODE","unregisteredAccountMethodDescriptions","UnregisteredAccountModal","methodUsed","redirectTo","Button","width","WIDE","onClick","data","href","OrphanedAccountModal","Link","DeletedPracticeAccountModal","UnregisteredSocialAccountModal","provider","ServiceBrand","lang","hubProduct","variant","outlined","ELASTIC","titles","account_paused","help","pause_warning","humanizeMinutes","seconds","minutes","Math","floor","humanizeSeconds","messages","nextBlockDuration","availableIn","displaySeconds","timeSeconds","tickSeconds","timeMs","tickMs","timeRemaining","setTimeRemaining","intervalId","setInterval","prevTime","clearInterval","useCountDown","ceil","useCountDownSeconds","UserRateLimitedModal","responseAction","formValues","title","hasOwnProperty","Dialog","open","onClose","DialogTitle","DialogContent","Typography","DialogActions","Box","marginRight","text","to","pathname","routes","login","forgotUsername","forgotPassword","GenericErrorModal","RecaptchaFailedModal","recaptchaOptions","useRecaptchaNet","enterprise","z","enum","useSyncSession","useMutation","mutationKey","mutationFn","_unsafe","post","useRecaptcha","logger","recaptchaSiteKey","actionName","recaptchaRef","mutateAsync","syncSession","supportsRecaptchaRequest","current","Promise","resolve","feature","handleResponse","event","channel","payload","removeEventListener","addEventListener","setTimeout","getRecaptchaData","supportsRecaptcha","then","recaptchaToken","platform","handleMessage","ref","getCaptchaFunction","formId","getWidgetId","action","res","RecaptchaComponent","CatastrophicErrorBoundary","errorNode","errorLogMessage","sitekey","size","makeUseRecaptcha","googleRecaptchaSiteKey","VERIFICATION_RANGE_MS","VerifyHumanPanel","verifyHumanFieldName","honeyPotFieldName","verification","setVerification","Grow","in","sx","mt","justifyContent","px","py","border","borderRadius","borderColor","Checkbox","checked","disabled","fontWeight","theme","palette","success","main","onChange","e","target","timeout","random","label","CircularProgress","ml","position","top","tabIndex","VERIFY_HUMAN_FIELD_NAME","HONEY_POT_FIELD_NAME","Modals","UnregisteredCard","UnregisteredTempRegCode","UnregisteredSocialAccount","RegistrationNotCompleted","OrphanedAccount","DeletedPracticeAccount","SociallyRegistered","UserThrottled","RecaptchaFailed","GenericError","stripLogin","RememberMeWrapper","ForgotLinkWrapper","ForgotLink","InitialErrors","UnregisteredRewardsCardError","Error","ERROR_NAME","UnregisteredTempRegCodeError","UnregisteredSocialAccountError","RegistrationNotFinishedError","OrphanedUserError","SociallyRegisteredError","UserThrottledError","Login","loginWithCredentials","params","showBackButton","csrfToken","csrf_token","recaptchaFailures","setRecaptchaFailures","modal","setModal","socialAccountProps","setSocialAccountProps","accounts","token","setToken","unregisteredSocialProvider","setUnregisteredSocialProvider","userThrottlerProps","setUserThrottlerProps","was_deleted","handleLoginError","err","opts","response","hint","response_action","available_in","next_block_duration","handleLogin","password","remember_me","humanVerification","required","isRobot","isHuman","redirect","tooManyRecaptchaFailures","requiresHumanVerification","initialValues","user","formData","disableSubmit","BaseScreen","hideBackButton","helmetTitle","headerTitle","actionButtons","loading","customHeight","customWidth","bottomMargin","afterButtons","my","bottomText","LinkPractice","LoginSupportFooter","FieldInput","autoComplete","autoFocus","PasswordInput","TransitionGroup","String","includes","loginValue","viaSocial","Inner","sessionErrors","logoMaxWidth","logoImageLimitSx","maxHeight","maxWidth","brandedLogoSrc","brandedGradientBackgroundClassname","baseButtonSx","grey","alignSelf","Home","serviceBrand","buttonProps","grow","mb","minHeight","className","transform","alt","asset","src","fontSize","lineHeight","gap","ButtonBase","register","btns","submit","secondary","FormScreen","submitText","secondaryButtonProps","validate","progress","btnClicked","setBtnClicked","submitButtonProps","secondarySubmit","divider","ProgressBar","credential","index","ResendEmail","resend","INVALID_TOKEN_REASONS","INVALID","EXPIRED","InvalidResetTokenModal","reason","ForgotPassword","history","initialLogin","invalidToken","invalidTokenHint","invalidModal","setInvalidModal","push","forgotPasswordEmailSent","username_or_email","instructions","PasswordEmailSent","SvgImage","ForgotPasswordReset","resetPassword","authorization","password_confirmation","passwordResetSuccess","isInvalidTokenError","CreatePasswordInput","PasswordResetSuccess","getRedirectUrl","ForgotUsername","loginCredential","forgotUsernameEmailSent","email","UsernameEmailSent","states","stateMap","identifier","test","alert","LegacyContactVerificationLanding","legacyContactVerification","Component","localeMonths","locale","navigator","language","Intl","DateTimeFormat","month","months","testDate","Date","format","getMonthsForLocale","MemorableDateInput","fieldId","fields","monthFieldPrefix","fieldError","field","join","getFieldError","labelText","FormControl","fullWidth","InputLabel","Select","labelId","onBlur","MenuProps","idx","monthNum","MenuItem","TextField","placeholder","day","inputProps","inputMode","pattern","maxLength","year","FormHelperText","memorableDateSchema","shape","typeError","min","max","integer","getMemorableDateFieldsPropFromFormik","dateFieldName","getSubfieldProps","subfield","fieldName","formikFieldProps","getFieldProps","setFieldValue","getComparableDate","date","withoutComposedDate","FormikMemorableDateInput","fieldValues","touchedFields","fieldsAreValid","isValidSync","allFieldsAreTouched","nextComposedDate","memDate","parsed","some","parseDateFromMemorableDate","nextDate","composedDate","StyledButton","paddingLeft","spacing","paddingRight","NarrowContent","FormInputWrapper","EndButtonsWrapper","ScreenHeading","EntryScreen","onConfirmCheckIn","contained","globalRoutes","checkInFormValidationSchema","firstname","lastname","birthdate","enhanceDateSchema","baseDateSchema","makeMemorableDateValidationSchema","schema","subYears","onGoBack","onSubmitSuccess","checkInType","recipeId","practiceId","router","enqueueSnackbar","checkInMutation","userInfo","practice_id","recipe_id","user_data","userData","formik","formikConfig","validationSchema","validateOnChange","mutate","mutationResult","transformServerErrors","onSubmitError","Input","isPending","SuccessGraphic","showAnimation","setShowAnimation","left","Template","animationData","onLoad","CheckInResultScreen","userFirstname","pointsAward","registrationToken","code","verified","phpJs","practice","practice_name","justifySelf","makeButtonText","primaryButtonProps","account","RegistrationMethods","UnauthenticatedCheckIn","x","checkIn","search","activeScreen","setActiveScreen","clearReferrerInSession","get","pb","PracticeLogo","xs","sm","App","utilityMenu","useSecretMobileUtilityMenu","practiceInfo","hubUrl","origin","practiceFeatures","authenticated","showErrorMessage","from","exact","path","displayMenu","bottom","right","incrementTickCount","dialog","ResponsiveModal","MEDIUM","noEsc","onRequestClose","closeTimeoutMS","shouldCloseOnOverlayClick","shouldCloseOnEsc","ModalButtons","marginTop","ModalTitle","ModalContent","BlackX","cursor","ModalHeaderBar","EscapeX","ModalHeader","DEFAULT_PRACTICE_ALT_TEXT","getPracticeLogoUrl","coreServiceUrl","UnauthenticatedPracticeLogo","AuthenitcatedPracticeLogo","logo","coreApiClient","baseURL","platformLabels","facebook","google","apple","useActivePractice","practices","decodedToken","find","p","queryStringToObject","slice","withQueryParams","parseQueryParams","item","startedAt","linkedPractices","teamAccount","teams","businessAccount","business","flavor","segment","practiceIsHubbuxTeams","membershipType","makeGetPracticeLogoUrl","config","options","logoBaseUrl","w","pixelDensity","trimWhiteSpace","trimaway","usePgForm","errorsOnTouchedFields","getFieldMeta","setFieldTouched","usePgMutationForm","status","setStatus","setSubmitting","setErrors","useDebouncedInputProps","debounceTimeMs","rest","changeEvent","setChangeEvent","handler","clearTimeout","TemplateLottie","isClickToPauseDisabled","mergedOptions","rendererSettings","preserveAspectRatio","autoplay","loop","SxDiv","SxSpan","SxImg","dialogOpen","setDialogOpen","swapAppMenuItem","inNewApp","itemHref","membersHref","membersUrl","URL","searchParams","set","toString","ListItem","disableGutters","ListItemButton","useSwapAppMenuItem","debugMenuItem","debugInfo","setDebugInfo","handleMobileAppEvent","JSON","SyntaxError","useAppDebugInfo","isDebug","useDebugMenuItem","ticker","numTicks","onTickCountReached","tickCountResetMs","enabled","debug","tickCount","setTickCount","tapTimeout","resetTickCount","onResetTickCount","debugProps","onEffectCalled","prev","decrementTickCount","useTickerAction","List"],"sourceRoot":""}