\n \n \n {JSON.stringify(goals(), null, 2)}
\n \n {JSON.stringify(getMeta(), null, 2)}
\n \n {hasMore() ? 'true' : 'false'}
\n\n \n \n \n );\n};\n\nexport default PaginationDemoPage;\n","// external\nimport { Box, Divider, Paper, useTheme } from '@mui/material';\nimport { useNavigate, useParams } from 'react-router-dom';\n\n// internal\nimport { getSubDomain } from '@guider-global/front-end-utils';\nimport {\n useSanityBaseLanguage,\n useSanityOrganizationPrograms,\n} from '@guider-global/sanity-hooks';\nimport { EProgramVariation } from '@guider-global/shared-types';\nimport { LoadingButton } from '@mui/lab';\nimport { PageCard } from 'components';\nimport { ProgramManageGuideDescription } from 'components/ProgramManageGuideDescription';\nimport { ProgramManageGuideTitle } from 'components/ProgramManageGuideTitle';\nimport {\n useCustomFields,\n useMemberships,\n useMobileMediaQuery,\n useSkills,\n useTrackEvent,\n} from 'hooks';\nimport {\n renderFields,\n renderSkills,\n} from 'pages/ProgramRegistrationPage/utils';\nimport React, { useEffect } from 'react';\nimport { Control, SubmitHandler, useForm } from 'react-hook-form';\nimport { useAppDispatch, useAppSelector } from 'store/hooks';\nimport { hideNavbar } from 'store/slices/appSlice';\nimport {\n IGroupGuideForm,\n selectGroupGuideForm,\n setGroupsGuideForm,\n} from 'store/slices/formsSlice';\n\nexport const GuideGroupCreatePage: React.FC = () => {\n const navigate = useNavigate();\n const dispatch = useAppDispatch();\n const { getBaseLanguage } = useSanityBaseLanguage({});\n const baseLanguage = getBaseLanguage();\n\n const { isLoadingMemberships, memberships } = useMemberships({});\n\n const { isLoadingSkills } = useSkills({ waitForAuthentication: true });\n\n const { isLoadingCustomFields } = useCustomFields({});\n\n const { programSlug = '' } = useParams<{\n programSlug: string;\n }>();\n\n const groupGuideForm = useAppSelector((state) =>\n selectGroupGuideForm(state, programSlug),\n );\n\n const programMemberships = memberships().filter(\n (membership) => membership.programSlug === programSlug,\n );\n\n const guideMembership = programMemberships.find(\n (membership) => membership.role === 'guide',\n );\n\n useEffect(() => {\n if (guideMembership) {\n navigate(`/programs/${programSlug}/manage/guide`);\n }\n }, [guideMembership, navigate, programSlug]);\n\n const {\n handleSubmit,\n control,\n formState: { errors, isValid },\n } = useForm({\n mode: 'onChange',\n defaultValues: groupGuideForm,\n });\n\n const typedControl = control as unknown as Control;\n\n const organizationSlug = getSubDomain();\n\n useTrackEvent({\n track: {\n eventKey: 'program-guide-registration-viewed',\n eventParams: {\n organization: { organizationSlug },\n program: {\n organizationSlug,\n programSlug,\n },\n },\n },\n });\n\n useEffect(() => {\n dispatch(hideNavbar(true));\n }, [dispatch]);\n\n const theme = useTheme();\n const isMobile = useMobileMediaQuery();\n\n const { getProgram } = useSanityOrganizationPrograms({});\n const program = getProgram(programSlug);\n\n useEffect(() => {\n if (!program) {\n navigate('./../');\n }\n }, [navigate, program]);\n\n if (!program) {\n return <>>;\n }\n\n const pageName = 'GuideGroupCreatePage';\n\n const programRegistration = program.registration;\n const registrationQuestions = programRegistration?.registration_questions;\n\n const isGroupProgram =\n program.program_details?.program_variation === EProgramVariation.Group;\n const programType = program.program_details?.program_type;\n\n const programVariations = programType?.program_type_text?.variations;\n\n const groupCopy = programVariations?.group;\n\n const skillsConfig = program.registration?.skills;\n const isSkillsEnabled = skillsConfig?.enable_skills_question;\n\n const onSubmit: SubmitHandler