@gusto/embedded-react-sdk 0.52.2 → 0.54.0

package/dist/components/InformationRequests/InformationRequestForm/InformationRequestForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"InformationRequestForm.js","sources":["../../../../src/components/InformationRequests/InformationRequestForm/InformationRequestForm.tsx"],"sourcesContent":["import DOMPurify from 'dompurify'\nimport { useTranslation } from 'react-i18next'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { z } from 'zod'\nimport { useIsMutating } from '@tanstack/react-query'\nimport { useInformationRequestsGetInformationRequestsSuspense } from '@gusto/embedded-api/react-query/informationRequestsGetInformationRequests'\nimport {\n  useInformationRequestsSubmitMutation,\n  mutationKeyInformationRequestsSubmit,\n} from '@gusto/embedded-api/react-query/informationRequestsSubmit'\nimport type { RequiredQuestions } from '@gusto/embedded-api/models/components/informationrequest'\nimport { ResponseType } from '@gusto/embedded-api/models/components/informationrequest'\nimport { ResponseType as SubmitResponseType } from '@gusto/embedded-api/models/operations/submitinformationrequest'\nimport type { InformationRequestsContextInterface } from '../InformationRequestsComponents'\nimport styles from './InformationRequestForm.module.scss'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { Flex, TextInputField } from '@/components/Common'\nimport { FileInputField } from '@/components/Common/Fields/FileInputField'\nimport { Form } from '@/components/Common/Form'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { informationRequestEvents, type EventType } from '@/shared/constants'\nimport { useFlow } from '@/components/Flow/useFlow'\n\nconst INFORMATION_REQUEST_FORM_ID = 'gusto-sdk-information-request-form'\nconst ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'application/pdf']\nconst dompurifyConfig = {\n  ALLOWED_TAGS: ['a', 'b', 'strong'],\n  ALLOWED_ATTR: ['target', 'href', 'rel'],\n}\n\n/* API does not enforce an upper limit, so set a reasonable character max for a single-line input. */\nconst MAX_TEXT_RESPONSE = 5000\n\nconst InformationRequestFormSchema = z.record(\n  z.string(),\n  z.union([z.string().min(1), z.instanceof(File)]),\n)\n\ntype InformationRequestFormValues = z.infer<typeof InformationRequestFormSchema>\n\n/**\n * Props for {@link InformationRequestForm}.\n *\n * @public\n */\nexport interface InformationRequestFormProps extends BaseComponentInterface<'InformationRequests.InformationRequestForm'> {\n  /** The associated company identifier. */\n  companyId: string\n  /** The identifier of the information request to respond to. */\n  requestId: string\n  /** Event handler invoked when the form is submitted or cancelled. See the events table in {@link InformationRequestForm}. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Dynamic response form for a single information request.\n *\n * Renders supported question types (text and document upload) based on the request's\n * `requiredQuestions` payload and submits responses to the Submit information request\n * endpoint. Use this component directly when you have built your own list or routing\n * surface and need to host the form — typically inside a modal or page you control.\n *\n * Requests with unsupported response types (e.g. `persona`-driven identity verification)\n * display a guidance message instead of the form; in those cases the user must complete\n * the request through your own integration with the underlying provider.\n *\n * Text inputs accept up to 5,000 characters. Document uploads are restricted to JPEG,\n * PNG, or PDF.\n *\n * @remarks\n * Events emitted via `onEvent`:\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `informationRequest/form/done` | Fired when the form is successfully submitted | The `informationRequest` field from the Submit information request response |\n * | `informationRequest/form/cancel` | Fired when the user cancels the form | — |\n *\n * @param props - See {@link InformationRequestFormProps}.\n * @returns The rendered information request response form.\n * @public\n */\nexport function InformationRequestForm(props: InformationRequestFormProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst convertFileToDataUrl = (file: File) => {\n  return new Promise<string>((resolve, reject) => {\n    const reader = new FileReader()\n    reader.onload = () => {\n      resolve(reader.result as string)\n    }\n    reader.onerror = reject\n    reader.readAsDataURL(file)\n  })\n}\n\nconst SUPPORTED_RESPONSE_TYPES: ResponseType[] = [ResponseType.Text, ResponseType.Document]\n\nfunction hasUnsupportedQuestionTypes(questions: RequiredQuestions[]) {\n  return questions.some(question => !SUPPORTED_RESPONSE_TYPES.includes(question.responseType))\n}\n\nfunction hasPersonaQuestionType(questions: RequiredQuestions[]) {\n  return questions.some(question => question.responseType === ResponseType.Persona)\n}\n\nfunction Root({ companyId, requestId, dictionary }: InformationRequestFormProps) {\n  useComponentDictionary('InformationRequests.InformationRequestForm', dictionary)\n  useI18n('InformationRequests.InformationRequestForm')\n  const { t } = useTranslation('InformationRequests.InformationRequestForm')\n  const { Alert, Heading, Text } = useComponentContext()\n  const { onEvent, baseSubmitHandler } = useBase()\n\n  const { data } = useInformationRequestsGetInformationRequestsSuspense({\n    companyUuid: companyId,\n  })\n\n  const informationRequest = data.informationRequests?.find(req => req.uuid === requestId)\n  const requiredQuestions = informationRequest?.requiredQuestions ?? []\n  const isBlockingPayroll = informationRequest?.blockingPayroll ?? false\n  const hasUnsupportedTypes = hasUnsupportedQuestionTypes(requiredQuestions)\n  const hasPersonaType = hasPersonaQuestionType(requiredQuestions)\n\n  const { mutateAsync: submitInformationRequest } = useInformationRequestsSubmitMutation()\n\n  const defaultValues: Record<string, string | File | undefined> = {}\n  const questionUuids: string[] = []\n\n  requiredQuestions.forEach(question => {\n    if (question.responseType === ResponseType.Text) {\n      questionUuids.push(question.questionUuid)\n      defaultValues[question.questionUuid] = ''\n    } else if (question.responseType === ResponseType.Document) {\n      questionUuids.push(question.questionUuid)\n      defaultValues[question.questionUuid] = undefined\n    }\n  })\n\n  const formMethods = useForm<InformationRequestFormValues>({\n    resolver: zodResolver(InformationRequestFormSchema),\n    defaultValues,\n  })\n\n  const onSubmit = async (formData: InformationRequestFormValues) => {\n    await baseSubmitHandler(formData, async () => {\n      const questionResponses = await Promise.all(\n        questionUuids.map(async uuid => {\n          const value = formData[uuid]\n\n          if (typeof value === 'string') {\n            return {\n              questionUuid: uuid,\n              responseType: SubmitResponseType.Text,\n              textResponse: value,\n            }\n          }\n\n          if (value instanceof File) {\n            const fileResponse = await convertFileToDataUrl(value)\n            return {\n              questionUuid: uuid,\n              responseType: SubmitResponseType.Document,\n              fileResponse,\n              fileName: value.name,\n            }\n          }\n\n          return null\n        }),\n      )\n\n      const validResponses = questionResponses.filter(response => response !== null)\n\n      const response = await submitInformationRequest({\n        request: {\n          informationRequestUuid: requestId,\n          requestBody: {\n            requiredQuestions: validResponses,\n          },\n        },\n      })\n\n      onEvent(informationRequestEvents.INFORMATION_REQUEST_FORM_DONE, response.informationRequest)\n    })\n  }\n\n  const renderQuestion = (question: RequiredQuestions) => {\n    const fieldName = question.questionUuid\n    const isDocumentType = question.responseType === ResponseType.Document\n    const isTextType = question.responseType === ResponseType.Text\n\n    return (\n      <div key={fieldName} className={styles.questionCard}>\n        <div className={styles.questionDescription}>\n          <Text size=\"sm\" weight=\"medium\">\n            {isDocumentType ? t('questionTypes.document') : t('questionTypes.answer')}\n          </Text>\n          <Text size=\"sm\" variant=\"supporting\">\n            {/* SECURITY: XSS mitigated via DOMPurify with strict allowlist. Pattern matches TaxInputs.tsx */}\n            <span\n              dangerouslySetInnerHTML={{\n                __html: DOMPurify.sanitize(question.questionText, dompurifyConfig),\n              }}\n            />\n          </Text>\n        </div>\n\n        <hr className={styles.divider} />\n\n        {isTextType && (\n          <div className={styles.textInputWrapper}>\n            <TextInputField\n              name={fieldName}\n              label={t('fields.textAnswer.label')}\n              placeholder={t('fields.textAnswer.placeholder')}\n              maxLength={MAX_TEXT_RESPONSE}\n              isRequired\n              errorMessage={t('validation.required')}\n            />\n          </div>\n        )}\n\n        {isDocumentType && (\n          <div className={styles.fileInputWrapper}>\n            <FileInputField\n              name={fieldName}\n              label={t('fields.fileUpload.label')}\n              accept={ACCEPTED_FILE_TYPES}\n              isRequired\n              errorMessage={t('validation.required')}\n            />\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  const unsupportedPlaceholder = (\n    <div className={styles.questionCard}>\n      <div className={styles.questionDescription}>\n        <Text weight=\"medium\">\n          {t(hasPersonaType ? 'unsupported.persona.title' : 'unsupported.generic.title')}\n        </Text>\n        <Text>\n          {t(\n            hasPersonaType ? 'unsupported.persona.description' : 'unsupported.generic.description',\n          )}\n        </Text>\n      </div>\n\n      <hr className={styles.divider} />\n\n      <div className={styles.contactSupport}>\n        <Text variant=\"supporting\">{t('unsupported.contactSupport')}</Text>\n      </div>\n    </div>\n  )\n\n  return (\n    <div className={styles.root}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h2\">{t('title')}</Heading>\n\n        {isBlockingPayroll && (\n          <Alert status=\"error\" label={t('blockingAlert.title')} disableScrollIntoView>\n            {t('blockingAlert.description')}\n          </Alert>\n        )}\n\n        {hasUnsupportedTypes ? (\n          unsupportedPlaceholder\n        ) : (\n          <FormProvider {...formMethods}>\n            <Form id={INFORMATION_REQUEST_FORM_ID} onSubmit={formMethods.handleSubmit(onSubmit)}>\n              <Flex flexDirection=\"column\" gap={16}>\n                {requiredQuestions.map(renderQuestion)}\n              </Flex>\n            </Form>\n          </FormProvider>\n        )}\n      </Flex>\n    </div>\n  )\n}\n\n/** @internal */\nexport function Footer({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) {\n  useI18n('InformationRequests.InformationRequestForm')\n  const { t } = useTranslation('InformationRequests.InformationRequestForm')\n  const { Button } = useComponentContext()\n  const { companyId, selectedRequestId } = useFlow<InformationRequestsContextInterface>()\n\n  const { data } = useInformationRequestsGetInformationRequestsSuspense({\n    companyUuid: companyId,\n  })\n\n  const informationRequest = data.informationRequests?.find(req => req.uuid === selectedRequestId)\n  const requiredQuestions = informationRequest?.requiredQuestions ?? []\n  const hasUnsupportedTypes = hasUnsupportedQuestionTypes(requiredQuestions)\n\n  const isMutating = useIsMutating({\n    mutationKey: mutationKeyInformationRequestsSubmit(),\n  })\n  const isPending = isMutating > 0\n\n  const handleCancel = () => {\n    onEvent(informationRequestEvents.INFORMATION_REQUEST_FORM_CANCEL)\n  }\n\n  if (hasUnsupportedTypes) {\n    return (\n      <Flex justifyContent=\"flex-end\" gap={12}>\n        <Button variant=\"secondary\" onClick={handleCancel}>\n          {t('cta.close')}\n        </Button>\n      </Flex>\n    )\n  }\n\n  return (\n    <Flex justifyContent=\"flex-end\" gap={12}>\n      <Button variant=\"secondary\" onClick={handleCancel} isDisabled={isPending}>\n        {t('cta.cancel')}\n      </Button>\n      <Button\n        variant=\"primary\"\n        type=\"submit\"\n        form={INFORMATION_REQUEST_FORM_ID}\n        isLoading={isPending}\n      >\n        {t('cta.submit')}\n      </Button>\n    </Flex>\n  )\n}\n"],"names":["INFORMATION_REQUEST_FORM_ID","ACCEPTED_FILE_TYPES","dompurifyConfig","MAX_TEXT_RESPONSE","InformationRequestFormSchema","z","InformationRequestForm","props","jsx","BaseComponent","Root","convertFileToDataUrl","file","resolve","reject","reader","SUPPORTED_RESPONSE_TYPES","ResponseType","hasUnsupportedQuestionTypes","questions","question","hasPersonaQuestionType","companyId","requestId","dictionary","useComponentDictionary","useI18n","t","useTranslation","Alert","Heading","Text","useComponentContext","onEvent","baseSubmitHandler","useBase","data","useInformationRequestsGetInformationRequestsSuspense","informationRequest","req","requiredQuestions","isBlockingPayroll","hasUnsupportedTypes","hasPersonaType","submitInformationRequest","useInformationRequestsSubmitMutation","defaultValues","questionUuids","formMethods","useForm","zodResolver","onSubmit","formData","validResponses","uuid","value","SubmitResponseType","fileResponse","response","informationRequestEvents","renderQuestion","fieldName","isDocumentType","isTextType","jsxs","styles","DOMPurify","TextInputField","FileInputField","unsupportedPlaceholder","Flex","FormProvider","Form"],"mappings":"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"}
+{"version":3,"file":"InformationRequestForm.js","sources":["../../../../src/components/InformationRequests/InformationRequestForm/InformationRequestForm.tsx"],"sourcesContent":["import DOMPurify from 'dompurify'\nimport { useTranslation } from 'react-i18next'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { z } from 'zod'\nimport { useIsMutating } from '@tanstack/react-query'\nimport { useInformationRequestsGetInformationRequestsSuspense } from '@gusto/embedded-api/react-query/informationRequestsGetInformationRequests'\nimport {\n  useInformationRequestsSubmitMutation,\n  mutationKeyInformationRequestsSubmit,\n} from '@gusto/embedded-api/react-query/informationRequestsSubmit'\nimport type { RequiredQuestions } from '@gusto/embedded-api/models/components/informationrequest'\nimport { ResponseType } from '@gusto/embedded-api/models/components/informationrequest'\nimport { ResponseType as SubmitResponseType } from '@gusto/embedded-api/models/operations/submitinformationrequest'\nimport type { InformationRequestsContextInterface } from '../InformationRequestsComponents'\nimport styles from './InformationRequestForm.module.scss'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { Flex, TextInputField } from '@/components/Common'\nimport { FileInputField } from '@/components/Common/Fields/FileInputField'\nimport { Form } from '@/components/Common/Form'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { informationRequestEvents, type EventType } from '@/shared/constants'\nimport { useFlow } from '@/components/Flow/useFlow'\n\nconst INFORMATION_REQUEST_FORM_ID = 'gusto-sdk-information-request-form'\nconst ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'application/pdf']\nconst dompurifyConfig = {\n  ALLOWED_TAGS: ['a', 'b', 'strong'],\n  ALLOWED_ATTR: ['target', 'href', 'rel'],\n}\n\n/* API does not enforce an upper limit, so set a reasonable character max for a single-line input. */\nconst MAX_TEXT_RESPONSE = 5000\n\nconst InformationRequestFormSchema = z.record(\n  z.string(),\n  z.union([z.string().min(1), z.instanceof(File)]),\n)\n\ntype InformationRequestFormValues = z.infer<typeof InformationRequestFormSchema>\n\n/**\n * Props for {@link InformationRequestForm}.\n *\n * @public\n */\nexport interface InformationRequestFormProps extends BaseComponentInterface<'InformationRequests.InformationRequestForm'> {\n  /** The associated company identifier. */\n  companyId: string\n  /** The identifier of the information request to respond to. */\n  requestId: string\n  /** Event handler invoked when the form is submitted or cancelled. See the events table in {@link InformationRequestForm}. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Dynamic response form for a single information request.\n *\n * Renders supported question types (text and document upload) based on the request's\n * `requiredQuestions` payload and submits responses to the Submit information request\n * endpoint. Use this component directly when you have built your own list or routing\n * surface and need to host the form — typically inside a modal or page you control.\n *\n * Requests with unsupported response types (e.g. `persona`-driven identity verification)\n * display a guidance message instead of the form; in those cases the user must complete\n * the request through your own integration with the underlying provider.\n *\n * Text inputs accept up to 5,000 characters. Document uploads are restricted to JPEG,\n * PNG, or PDF.\n *\n * @remarks\n * Events emitted via `onEvent`:\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `informationRequest/form/done` | Fired when the form is successfully submitted | The `informationRequest` field from the Submit information request response |\n * | `informationRequest/form/cancel` | Fired when the user cancels the form | — |\n *\n * @param props - See {@link InformationRequestFormProps}.\n * @returns The rendered information request response form.\n * @public\n */\nexport function InformationRequestForm(props: InformationRequestFormProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst convertFileToDataUrl = (file: File) => {\n  return new Promise<string>((resolve, reject) => {\n    const reader = new FileReader()\n    reader.onload = () => {\n      resolve(reader.result as string)\n    }\n    reader.onerror = reject\n    reader.readAsDataURL(file)\n  })\n}\n\nconst SUPPORTED_RESPONSE_TYPES: ResponseType[] = [ResponseType.Text, ResponseType.Document]\n\nfunction hasUnsupportedQuestionTypes(questions: RequiredQuestions[]) {\n  return questions.some(question => !SUPPORTED_RESPONSE_TYPES.includes(question.responseType))\n}\n\nfunction hasPersonaQuestionType(questions: RequiredQuestions[]) {\n  return questions.some(question => question.responseType === ResponseType.Persona)\n}\n\nfunction Root({ companyId, requestId, dictionary }: InformationRequestFormProps) {\n  useComponentDictionary('InformationRequests.InformationRequestForm', dictionary)\n  useI18n('InformationRequests.InformationRequestForm')\n  const { t } = useTranslation('InformationRequests.InformationRequestForm')\n  const { Alert, Heading, Text } = useComponentContext()\n  const { onEvent, baseSubmitHandler } = useBase()\n\n  const { data } = useInformationRequestsGetInformationRequestsSuspense({\n    companyUuid: companyId,\n  })\n\n  const informationRequest = data.informationRequests?.find(req => req.uuid === requestId)\n  const requiredQuestions = informationRequest?.requiredQuestions ?? []\n  const isBlockingPayroll = informationRequest?.blockingPayroll ?? false\n  const hasUnsupportedTypes = hasUnsupportedQuestionTypes(requiredQuestions)\n  const hasPersonaType = hasPersonaQuestionType(requiredQuestions)\n\n  const { mutateAsync: submitInformationRequest } = useInformationRequestsSubmitMutation()\n\n  const defaultValues: Record<string, string | File | undefined> = {}\n  const questionUuids: string[] = []\n\n  requiredQuestions.forEach(question => {\n    if (question.responseType === ResponseType.Text) {\n      questionUuids.push(question.questionUuid)\n      defaultValues[question.questionUuid] = ''\n    } else if (question.responseType === ResponseType.Document) {\n      questionUuids.push(question.questionUuid)\n      defaultValues[question.questionUuid] = undefined\n    }\n  })\n\n  const formMethods = useForm<InformationRequestFormValues>({\n    resolver: zodResolver(InformationRequestFormSchema),\n    defaultValues,\n  })\n\n  const onSubmit = async (formData: InformationRequestFormValues) => {\n    await baseSubmitHandler(formData, async () => {\n      const questionResponses = await Promise.all(\n        questionUuids.map(async uuid => {\n          const value = formData[uuid]\n\n          if (typeof value === 'string') {\n            return {\n              questionUuid: uuid,\n              responseType: SubmitResponseType.Text,\n              textResponse: value,\n            }\n          }\n\n          if (value instanceof File) {\n            const fileResponse = await convertFileToDataUrl(value)\n            return {\n              questionUuid: uuid,\n              responseType: SubmitResponseType.Document,\n              fileResponse,\n              fileName: value.name,\n            }\n          }\n\n          return null\n        }),\n      )\n\n      const validResponses = questionResponses.filter(response => response !== null)\n\n      const response = await submitInformationRequest({\n        request: {\n          informationRequestUuid: requestId,\n          requestBody: {\n            requiredQuestions: validResponses,\n          },\n        },\n      })\n\n      onEvent(informationRequestEvents.INFORMATION_REQUEST_FORM_DONE, response.informationRequest)\n    })\n  }\n\n  const renderQuestion = (question: RequiredQuestions) => {\n    const fieldName = question.questionUuid\n    const isDocumentType = question.responseType === ResponseType.Document\n    const isTextType = question.responseType === ResponseType.Text\n\n    return (\n      <div key={fieldName} className={styles.questionCard}>\n        <div className={styles.questionDescription}>\n          <Text size=\"sm\" weight=\"medium\">\n            {isDocumentType ? t('questionTypes.document') : t('questionTypes.answer')}\n          </Text>\n          <Text size=\"sm\" variant=\"supporting\">\n            {/* SECURITY: XSS mitigated via DOMPurify with strict allowlist. Pattern matches TaxInputs.tsx */}\n            <span\n              dangerouslySetInnerHTML={{\n                __html: DOMPurify.sanitize(question.questionText, dompurifyConfig),\n              }}\n            />\n          </Text>\n        </div>\n\n        <hr className={styles.divider} />\n\n        {isTextType && (\n          <div className={styles.textInputWrapper}>\n            <TextInputField\n              name={fieldName}\n              label={t('fields.textAnswer.label')}\n              placeholder={t('fields.textAnswer.placeholder')}\n              maxLength={MAX_TEXT_RESPONSE}\n              isRequired\n              errorMessage={t('validation.required')}\n            />\n          </div>\n        )}\n\n        {isDocumentType && (\n          <div className={styles.fileInputWrapper}>\n            <FileInputField\n              name={fieldName}\n              label={t('fields.fileUpload.label')}\n              accept={ACCEPTED_FILE_TYPES}\n              isRequired\n              errorMessage={t('validation.required')}\n            />\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  const unsupportedPlaceholder = (\n    <div className={styles.questionCard}>\n      <div className={styles.questionDescription}>\n        <Text weight=\"medium\">\n          {t(hasPersonaType ? 'unsupported.persona.title' : 'unsupported.generic.title')}\n        </Text>\n        <Text>\n          {t(\n            hasPersonaType ? 'unsupported.persona.description' : 'unsupported.generic.description',\n          )}\n        </Text>\n      </div>\n\n      <hr className={styles.divider} />\n\n      <div className={styles.contactSupport}>\n        <Text variant=\"supporting\">{t('unsupported.contactSupport')}</Text>\n      </div>\n    </div>\n  )\n\n  return (\n    <div className={styles.root}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h2\">{t('title')}</Heading>\n\n        {isBlockingPayroll && (\n          <Alert status=\"error\" label={t('blockingAlert.title')} disableScrollIntoView>\n            {t('blockingAlert.description')}\n          </Alert>\n        )}\n\n        {hasUnsupportedTypes ? (\n          unsupportedPlaceholder\n        ) : (\n          <FormProvider {...formMethods}>\n            <Form id={INFORMATION_REQUEST_FORM_ID} onSubmit={formMethods.handleSubmit(onSubmit)}>\n              <Flex flexDirection=\"column\" gap={16}>\n                {requiredQuestions.map(renderQuestion)}\n              </Flex>\n            </Form>\n          </FormProvider>\n        )}\n      </Flex>\n    </div>\n  )\n}\n\n/** @internal */\nexport function Footer({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) {\n  useI18n('InformationRequests.InformationRequestForm')\n  const { t } = useTranslation('InformationRequests.InformationRequestForm')\n  const { Button } = useComponentContext()\n  const { companyId, selectedRequestId } = useFlow<InformationRequestsContextInterface>()\n\n  const { data } = useInformationRequestsGetInformationRequestsSuspense({\n    companyUuid: companyId,\n  })\n\n  const informationRequest = data.informationRequests?.find(req => req.uuid === selectedRequestId)\n  const requiredQuestions = informationRequest?.requiredQuestions ?? []\n  const hasUnsupportedTypes = hasUnsupportedQuestionTypes(requiredQuestions)\n\n  const isMutating = useIsMutating({\n    mutationKey: mutationKeyInformationRequestsSubmit(),\n  })\n  const isPending = isMutating > 0\n\n  const handleCancel = () => {\n    onEvent(informationRequestEvents.INFORMATION_REQUEST_FORM_CANCEL)\n  }\n\n  if (hasUnsupportedTypes) {\n    return (\n      <Flex justifyContent=\"flex-end\" gap={12}>\n        <Button variant=\"secondary\" onClick={handleCancel}>\n          {t('cta.close')}\n        </Button>\n      </Flex>\n    )\n  }\n\n  return (\n    <Flex justifyContent=\"flex-end\" gap={12}>\n      <Button variant=\"secondary\" onClick={handleCancel} isDisabled={isPending}>\n        {t('cta.cancel')}\n      </Button>\n      <Button\n        variant=\"primary\"\n        type=\"submit\"\n        form={INFORMATION_REQUEST_FORM_ID}\n        isLoading={isPending}\n      >\n        {t('cta.submit')}\n      </Button>\n    </Flex>\n  )\n}\n"],"names":["INFORMATION_REQUEST_FORM_ID","ACCEPTED_FILE_TYPES","dompurifyConfig","MAX_TEXT_RESPONSE","InformationRequestFormSchema","z","InformationRequestForm","props","jsx","BaseComponent","Root","convertFileToDataUrl","file","resolve","reject","reader","SUPPORTED_RESPONSE_TYPES","ResponseType","hasUnsupportedQuestionTypes","questions","question","hasPersonaQuestionType","companyId","requestId","dictionary","useComponentDictionary","useI18n","t","useTranslation","Alert","Heading","Text","useComponentContext","onEvent","baseSubmitHandler","useBase","data","useInformationRequestsGetInformationRequestsSuspense","informationRequest","req","requiredQuestions","isBlockingPayroll","hasUnsupportedTypes","hasPersonaType","submitInformationRequest","useInformationRequestsSubmitMutation","defaultValues","questionUuids","formMethods","useForm","zodResolver","onSubmit","formData","validResponses","uuid","value","SubmitResponseType","fileResponse","response","informationRequestEvents","renderQuestion","fieldName","isDocumentType","isTextType","jsxs","styles","DOMPurify","TextInputField","FileInputField","unsupportedPlaceholder","Flex","FormProvider","Form","Footer","Button","selectedRequestId","useFlow","isPending","useIsMutating","mutationKeyInformationRequestsSubmit","handleCancel"],"mappings":"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"}

package/dist/components/InformationRequests/InformationRequestForm/index.d.ts

@@ -1 +1 @@
-export { InformationRequestForm, type InformationRequestFormProps } from './InformationRequestForm';
+export { InformationRequestForm, Footer, type InformationRequestFormProps, } from './InformationRequestForm';

package/dist/components/InformationRequests/InformationRequestList/InformationRequestList.js

@@ -10,14 +10,13 @@ import { DataView as D } from "../../Common/DataView/DataView.js";
 import { useDataView as k } from "../../Common/DataView/useDataView.js";
 import { FlexItem as E, Flex as u } from "../../Common/Flex/Flex.js";
 import { EmptyData as v } from "../../Common/EmptyData/EmptyData.js";
-import "react";
 import { informationRequestEvents as B } from "../../../shared/constants.js";
-function K(o) {
+function J(o) {
   return /* @__PURE__ */ n(w, { ...o, children: /* @__PURE__ */ n(C, { ...o, children: o.children }) });
 }
 function C({ companyId: o, dictionary: d, onEvent: f }) {
   S("InformationRequests.InformationRequestList", d), T("InformationRequests.InformationRequestList");
-  const { t } = b("InformationRequests.InformationRequestList"), { Heading: y, Text: m, Button: R, Badge: l } = x(), { data: g } = P({
+  const { t } = b("InformationRequests.InformationRequestList"), { Heading: y, Text: l, Button: R, Badge: m } = x(), { data: g } = P({
     companyUuid: o
   }), c = (g.informationRequests ?? []).filter(
     (e) => e.status !== r.Approved
@@ -50,7 +49,7 @@ function C({ companyId: o, dictionary: d, onEvent: f }) {
       {
         key: "type",
         title: t("columns.type"),
-        render: (e) => /* @__PURE__ */ n(E, { flexGrow: 1, children: /* @__PURE__ */ n(m, { weight: "medium", children: h(e.type) }) })
+        render: (e) => /* @__PURE__ */ n(E, { flexGrow: 1, children: /* @__PURE__ */ n(l, { weight: "medium", children: h(e.type) }) })
       },
       {
         key: "status",
@@ -58,8 +57,8 @@ function C({ companyId: o, dictionary: d, onEvent: f }) {
         render: (e) => {
           const s = q(e.status), p = e.blockingPayroll;
           return !s && !p ? null : /* @__PURE__ */ a(u, { gap: 8, alignItems: "center", children: [
-            s && /* @__PURE__ */ n(l, { status: s.badgeStatus, children: s.label }),
-            p && /* @__PURE__ */ n(l, { status: "error", children: t("status.payrollBlocking") })
+            s && /* @__PURE__ */ n(m, { status: s.badgeStatus, children: s.label }),
+            p && /* @__PURE__ */ n(m, { status: "error", children: t("status.payrollBlocking") })
           ] });
         }
       }
@@ -80,12 +79,12 @@ function C({ companyId: o, dictionary: d, onEvent: f }) {
   return /* @__PURE__ */ a(u, { flexDirection: "column", gap: 20, children: [
     /* @__PURE__ */ a(u, { flexDirection: "column", gap: 2, children: [
       /* @__PURE__ */ n(y, { as: "h2", styledAs: "h4", children: t("title") }),
-      c.length > 0 && /* @__PURE__ */ n(m, { children: t("description") })
+      c.length > 0 && /* @__PURE__ */ n(l, { children: t("description") })
     ] }),
     /* @__PURE__ */ n(D, { ...I, label: t("title") })
   ] });
 }
 export {
-  K as InformationRequestList
+  J as InformationRequestList
 };
 //# sourceMappingURL=InformationRequestList.js.map

package/dist/components/InformationRequests/InformationRequestList/InformationRequestList.js.map

@@ -1 +1 @@
-{"version":3,"file":"InformationRequestList.js","sources":["../../../../src/components/InformationRequests/InformationRequestList/InformationRequestList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useInformationRequestsGetInformationRequestsSuspense } from '@gusto/embedded-api/react-query/informationRequestsGetInformationRequests'\nimport type { InformationRequest } from '@gusto/embedded-api/models/components/informationrequest'\nimport {\n  InformationRequestStatus,\n  InformationRequestType,\n} from '@gusto/embedded-api/models/components/informationrequest'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { EmptyData, Flex, FlexItem } from '@/components/Common'\nimport { informationRequestEvents } from '@/shared/constants'\nimport type { BadgeProps } from '@/components/Common/UI/Badge/BadgeTypes'\n\n/**\n * Props for {@link InformationRequestList}.\n *\n * @public\n */\nexport interface InformationRequestListProps extends BaseComponentInterface<'InformationRequests.InformationRequestList'> {\n  /** The associated company identifier. */\n  companyId: string\n  /** Event callback. See the events table on {@link InformationRequestList} for emitted events. */\n  onEvent: BaseComponentInterface['onEvent']\n}\n\n/**\n * Displays the list of outstanding information requests for a company with a \"Respond\" CTA on each open request.\n *\n * @remarks\n * Renders status badges for each request and an extra \"Payroll blocking\" badge when the request is currently blocking payroll. Approved requests are filtered out of the list. Used as the top-level surface of `InformationRequests.InformationRequestsFlow`, but can be rendered directly when you want to host the response form yourself (e.g. in a custom modal or page).\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `informationRequest/respond` | Fired when the user clicks \"Respond\" on an open request | `{ requestId: string }` |\n *\n * @param props - See {@link InformationRequestListProps}.\n * @returns The rendered information request list.\n * @public\n */\nexport function InformationRequestList(props: InformationRequestListProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\ntype StatusMapping = {\n  label: string\n  badgeStatus: BadgeProps['status']\n} | null\n\nfunction Root({ companyId, dictionary, onEvent }: InformationRequestListProps) {\n  useComponentDictionary('InformationRequests.InformationRequestList', dictionary)\n  useI18n('InformationRequests.InformationRequestList')\n  const { t } = useTranslation('InformationRequests.InformationRequestList')\n  const { Heading, Text, Button, Badge } = useComponentContext()\n\n  const { data } = useInformationRequestsGetInformationRequestsSuspense({\n    companyUuid: companyId,\n  })\n\n  const informationRequests = data.informationRequests ?? []\n\n  const visibleRequests = informationRequests.filter(\n    request => request.status !== InformationRequestStatus.Approved,\n  )\n\n  const getTypeLabel = (type: InformationRequest['type']): string => {\n    switch (type) {\n      case InformationRequestType.CompanyOnboarding:\n        return t('types.companyOnboarding')\n      case InformationRequestType.AccountProtection:\n        return t('types.accountProtection')\n      case InformationRequestType.PaymentRequest:\n        return t('types.paymentRequest')\n      case InformationRequestType.PaymentError:\n        return t('types.paymentError')\n      default:\n        return t('types.unknown')\n    }\n  }\n\n  const getStatusMapping = (status: InformationRequest['status']): StatusMapping => {\n    switch (status) {\n      case InformationRequestStatus.PendingResponse:\n        return { label: t('status.incomplete'), badgeStatus: 'info' }\n      case InformationRequestStatus.PendingReview:\n        return { label: t('status.underReview'), badgeStatus: 'warning' }\n      default:\n        return null\n    }\n  }\n\n  const dataViewProps = useDataView({\n    data: visibleRequests,\n    emptyState: () => (\n      <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')} />\n    ),\n    columns: [\n      {\n        key: 'type',\n        title: t('columns.type'),\n        render: request => (\n          <FlexItem flexGrow={1}>\n            <Text weight=\"medium\">{getTypeLabel(request.type)}</Text>\n          </FlexItem>\n        ),\n      },\n      {\n        key: 'status',\n        title: t('columns.status'),\n        render: request => {\n          const statusMapping = getStatusMapping(request.status)\n          const showPayrollBlockingBadge = request.blockingPayroll\n\n          if (!statusMapping && !showPayrollBlockingBadge) {\n            return null\n          }\n\n          return (\n            <Flex gap={8} alignItems=\"center\">\n              {statusMapping && (\n                <Badge status={statusMapping.badgeStatus}>{statusMapping.label}</Badge>\n              )}\n              {showPayrollBlockingBadge && (\n                <Badge status=\"error\">{t('status.payrollBlocking')}</Badge>\n              )}\n            </Flex>\n          )\n        },\n      },\n    ],\n    itemMenu: request => {\n      const isPendingResponse = request.status === InformationRequestStatus.PendingResponse\n      if (!isPendingResponse) {\n        return null\n      }\n      return (\n        <Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(informationRequestEvents.INFORMATION_REQUEST_RESPOND, {\n              requestId: request.uuid,\n            })\n          }}\n        >\n          {t('cta.respond')}\n        </Button>\n      )\n    },\n  })\n\n  return (\n    <Flex flexDirection=\"column\" gap={20}>\n      <Flex flexDirection=\"column\" gap={2}>\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('title')}\n        </Heading>\n        {visibleRequests.length > 0 && <Text>{t('description')}</Text>}\n      </Flex>\n\n      <DataView {...dataViewProps} label={t('title')} />\n    </Flex>\n  )\n}\n"],"names":["InformationRequestList","props","jsx","BaseComponent","Root","companyId","dictionary","onEvent","useComponentDictionary","useI18n","useTranslation","Heading","Text","Button","Badge","useComponentContext","data","useInformationRequestsGetInformationRequestsSuspense","visibleRequests","request","InformationRequestStatus","getTypeLabel","type","InformationRequestType","getStatusMapping","status","dataViewProps","useDataView","EmptyData","FlexItem","statusMapping","showPayrollBlockingBadge","jsxs","Flex","informationRequestEvents","DataView"],"mappings":"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"}
+{"version":3,"file":"InformationRequestList.js","sources":["../../../../src/components/InformationRequests/InformationRequestList/InformationRequestList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useInformationRequestsGetInformationRequestsSuspense } from '@gusto/embedded-api/react-query/informationRequestsGetInformationRequests'\nimport type { InformationRequest } from '@gusto/embedded-api/models/components/informationrequest'\nimport {\n  InformationRequestStatus,\n  InformationRequestType,\n} from '@gusto/embedded-api/models/components/informationrequest'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { EmptyData, Flex, FlexItem } from '@/components/Common'\nimport { informationRequestEvents } from '@/shared/constants'\nimport type { BadgeProps } from '@/components/Common/UI/Badge/BadgeTypes'\n\n/**\n * Props for {@link InformationRequestList}.\n *\n * @public\n */\nexport interface InformationRequestListProps extends BaseComponentInterface<'InformationRequests.InformationRequestList'> {\n  /** The associated company identifier. */\n  companyId: string\n  /** Event callback. See the events table on {@link InformationRequestList} for emitted events. */\n  onEvent: BaseComponentInterface['onEvent']\n}\n\n/**\n * Displays the list of outstanding information requests for a company with a \"Respond\" CTA on each open request.\n *\n * @remarks\n * Renders status badges for each request and an extra \"Payroll blocking\" badge when the request is currently blocking payroll. Approved requests are filtered out of the list. Used as the top-level surface of `InformationRequests.InformationRequestsFlow`, but can be rendered directly when you want to host the response form yourself (e.g. in a custom modal or page).\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `informationRequest/respond` | Fired when the user clicks \"Respond\" on an open request | `{ requestId: string }` |\n *\n * @param props - See {@link InformationRequestListProps}.\n * @returns The rendered information request list.\n * @public\n */\nexport function InformationRequestList(props: InformationRequestListProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\ntype StatusMapping = {\n  label: string\n  badgeStatus: BadgeProps['status']\n} | null\n\nfunction Root({ companyId, dictionary, onEvent }: InformationRequestListProps) {\n  useComponentDictionary('InformationRequests.InformationRequestList', dictionary)\n  useI18n('InformationRequests.InformationRequestList')\n  const { t } = useTranslation('InformationRequests.InformationRequestList')\n  const { Heading, Text, Button, Badge } = useComponentContext()\n\n  const { data } = useInformationRequestsGetInformationRequestsSuspense({\n    companyUuid: companyId,\n  })\n\n  const informationRequests = data.informationRequests ?? []\n\n  const visibleRequests = informationRequests.filter(\n    request => request.status !== InformationRequestStatus.Approved,\n  )\n\n  const getTypeLabel = (type: InformationRequest['type']): string => {\n    switch (type) {\n      case InformationRequestType.CompanyOnboarding:\n        return t('types.companyOnboarding')\n      case InformationRequestType.AccountProtection:\n        return t('types.accountProtection')\n      case InformationRequestType.PaymentRequest:\n        return t('types.paymentRequest')\n      case InformationRequestType.PaymentError:\n        return t('types.paymentError')\n      default:\n        return t('types.unknown')\n    }\n  }\n\n  const getStatusMapping = (status: InformationRequest['status']): StatusMapping => {\n    switch (status) {\n      case InformationRequestStatus.PendingResponse:\n        return { label: t('status.incomplete'), badgeStatus: 'info' }\n      case InformationRequestStatus.PendingReview:\n        return { label: t('status.underReview'), badgeStatus: 'warning' }\n      default:\n        return null\n    }\n  }\n\n  const dataViewProps = useDataView({\n    data: visibleRequests,\n    emptyState: () => (\n      <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')} />\n    ),\n    columns: [\n      {\n        key: 'type',\n        title: t('columns.type'),\n        render: request => (\n          <FlexItem flexGrow={1}>\n            <Text weight=\"medium\">{getTypeLabel(request.type)}</Text>\n          </FlexItem>\n        ),\n      },\n      {\n        key: 'status',\n        title: t('columns.status'),\n        render: request => {\n          const statusMapping = getStatusMapping(request.status)\n          const showPayrollBlockingBadge = request.blockingPayroll\n\n          if (!statusMapping && !showPayrollBlockingBadge) {\n            return null\n          }\n\n          return (\n            <Flex gap={8} alignItems=\"center\">\n              {statusMapping && (\n                <Badge status={statusMapping.badgeStatus}>{statusMapping.label}</Badge>\n              )}\n              {showPayrollBlockingBadge && (\n                <Badge status=\"error\">{t('status.payrollBlocking')}</Badge>\n              )}\n            </Flex>\n          )\n        },\n      },\n    ],\n    itemMenu: request => {\n      const isPendingResponse = request.status === InformationRequestStatus.PendingResponse\n      if (!isPendingResponse) {\n        return null\n      }\n      return (\n        <Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(informationRequestEvents.INFORMATION_REQUEST_RESPOND, {\n              requestId: request.uuid,\n            })\n          }}\n        >\n          {t('cta.respond')}\n        </Button>\n      )\n    },\n  })\n\n  return (\n    <Flex flexDirection=\"column\" gap={20}>\n      <Flex flexDirection=\"column\" gap={2}>\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('title')}\n        </Heading>\n        {visibleRequests.length > 0 && <Text>{t('description')}</Text>}\n      </Flex>\n\n      <DataView {...dataViewProps} label={t('title')} />\n    </Flex>\n  )\n}\n"],"names":["InformationRequestList","props","jsx","BaseComponent","Root","companyId","dictionary","onEvent","useComponentDictionary","useI18n","useTranslation","Heading","Text","Button","Badge","useComponentContext","data","useInformationRequestsGetInformationRequestsSuspense","visibleRequests","request","InformationRequestStatus","getTypeLabel","type","InformationRequestType","getStatusMapping","status","dataViewProps","useDataView","EmptyData","FlexItem","statusMapping","showPayrollBlockingBadge","jsxs","Flex","informationRequestEvents","DataView"],"mappings":"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"}

package/dist/components/InformationRequests/InformationRequests.d.ts

@@ -60,4 +60,4 @@ export interface InformationRequestsFlowProps extends Omit<BaseComponentInterfac
  * }
  * ```
  */
-export declare function InformationRequestsFlow({ companyId, dictionary, withAlert, onEvent, }: InformationRequestsFlowProps): import("react").JSX.Element;
+export declare function InformationRequestsFlow({ companyId, dictionary, withAlert, onEvent, LoaderComponent, }: InformationRequestsFlowProps): import("react").JSX.Element;

package/dist/components/InformationRequests/InformationRequests.js

@@ -1,85 +1,87 @@
-import { jsx as t, jsxs as v } from "react/jsx-runtime";
-import { createMachine as b } from "robot3";
-import { useMachine as L } from "react-robot";
-import { useState as R, useCallback as p, useMemo as Q, Suspense as E } from "react";
-import { useTranslation as U } from "react-i18next";
-import { informationRequestsMachine as k } from "./informationRequestsStateMachine.js";
-import { BaseBoundaries as P } from "../Base/Base.js";
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { createMachine as Q } from "robot3";
+import { useMachine as U } from "react-robot";
+import { useState as E, useCallback as p, useMemo as k, Suspense as I } from "react";
+import { useTranslation as P } from "react-i18next";
+import { informationRequestsMachine as g } from "./informationRequestsStateMachine.js";
+import { BaseBoundaries as j } from "../Base/Base.js";
 import "../Base/useBase.js";
-import { Flex as g } from "../Common/Flex/Flex.js";
-import { useComponentContext as j } from "../../contexts/ComponentAdapter/useComponentContext.js";
-import { FlowContext as B } from "../Flow/useFlow.js";
-import { useComponentDictionary as $, useI18n as w } from "../../i18n/I18n.js";
+import { Flex as B } from "../Common/Flex/Flex.js";
+import { useComponentContext as L } from "../../contexts/ComponentAdapter/useComponentContext.js";
+import { FlowContext as $ } from "../Flow/useFlow.js";
+import { useComponentDictionary as w, useI18n as z } from "../../i18n/I18n.js";
 import { informationRequestEvents as s } from "../../shared/constants.js";
-import { InformationRequestList as z } from "./InformationRequestList/InformationRequestList.js";
-const I = "informationRequestResponded";
-function se({
+import { InformationRequestList as Y } from "./InformationRequestList/InformationRequestList.js";
+const O = "informationRequestResponded";
+function re({
   companyId: r,
-  dictionary: O,
-  withAlert: a = !0,
-  onEvent: M = () => {
-  }
+  dictionary: M,
+  withAlert: m = !0,
+  onEvent: h = () => {
+  },
+  LoaderComponent: i
 }) {
-  $("InformationRequests", O), w("InformationRequests");
-  const { t: m } = U("InformationRequests"), { Modal: h, LoadingSpinner: c, Alert: x, Text: A } = j(), [F, i] = R(!1), [N, f] = R({
+  w("InformationRequests", M), z("InformationRequests");
+  const { t: c } = P("InformationRequests"), { Modal: x, LoadingSpinner: f, Alert: A, Text: F } = L(), [N, l] = E(!1), [T, u] = E({
     nextAlertId: 0,
     alerts: []
-  }), T = p((e) => {
-    f((o) => ({
+  }), _ = p((e) => {
+    u((o) => ({
       ...o,
-      alerts: o.alerts.filter((D) => D.id !== e)
+      alerts: o.alerts.filter((v) => v.id !== e)
     }));
-  }, []), _ = p(() => {
-    f((e) => ({
+  }, []), S = p(() => {
+    u((e) => ({
       nextAlertId: e.nextAlertId + 1,
       alerts: [{ id: e.nextAlertId }, ...e.alerts]
     }));
-  }, []), C = Q(
-    () => b(
+  }, []), q = k(
+    () => Q(
       "list",
-      k,
+      g,
       () => ({
         component: null,
         companyId: r,
-        onEvent: n
+        onEvent: n,
+        LoaderComponent: i
       })
     ),
-    [r]
-  ), [u, S] = L(C);
+    [r, i]
+  ), [d, C] = U(q);
   function n(e, o) {
-    S({ type: e, payload: o }), e === s.INFORMATION_REQUEST_RESPOND && i(!0), (e === s.INFORMATION_REQUEST_FORM_CANCEL || e === s.INFORMATION_REQUEST_FORM_DONE) && i(!1), e === s.INFORMATION_REQUEST_FORM_DONE && a && _(), M(e, o);
+    C({ type: e, payload: o }), e === s.INFORMATION_REQUEST_RESPOND && l(!0), (e === s.INFORMATION_REQUEST_FORM_CANCEL || e === s.INFORMATION_REQUEST_FORM_DONE) && l(!1), e === s.INFORMATION_REQUEST_FORM_DONE && m && S(), h(e, o);
   }
-  const q = () => {
-    i(!1);
-  }, l = u.context.component, d = l?.Footer || void 0;
+  const D = () => {
+    l(!1);
+  }, a = d.context.component, R = a?.Footer || void 0;
   return /* @__PURE__ */ t(
-    B.Provider,
+    $.Provider,
     {
       value: {
-        ...u.context,
+        ...d.context,
         onEvent: n
       },
-      children: /* @__PURE__ */ v(g, { flexDirection: "column", gap: 32, children: [
-        a && N.alerts.map((e) => /* @__PURE__ */ t(
-          x,
+      children: /* @__PURE__ */ b(B, { flexDirection: "column", gap: 32, children: [
+        m && T.alerts.map((e) => /* @__PURE__ */ t(
+          A,
           {
             status: "success",
-            label: m(`alerts.${I}.title`),
+            label: c(`alerts.${O}.title`),
             onDismiss: () => {
-              T(e.id);
+              _(e.id);
             },
-            children: /* @__PURE__ */ t(A, { children: m(`alerts.${I}.description`) })
+            children: /* @__PURE__ */ t(F, { children: c(`alerts.${O}.description`) })
           },
           e.id
         )),
-        /* @__PURE__ */ t(E, { fallback: /* @__PURE__ */ t(c, {}), children: /* @__PURE__ */ t(z, { companyId: r, onEvent: n }) }),
+        /* @__PURE__ */ t(I, { fallback: /* @__PURE__ */ t(f, {}), children: /* @__PURE__ */ t(Y, { companyId: r, onEvent: n }) }),
         /* @__PURE__ */ t(
-          h,
+          x,
           {
-            isOpen: F,
-            onClose: q,
-            footer: d && /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(E, { fallback: /* @__PURE__ */ t(c, { size: "sm" }), children: /* @__PURE__ */ t(d, { onEvent: n }) }) }),
-            children: l && /* @__PURE__ */ t(l, {})
+            isOpen: N,
+            onClose: D,
+            footer: R && /* @__PURE__ */ t(j, { LoaderComponent: i, children: /* @__PURE__ */ t(I, { fallback: /* @__PURE__ */ t(f, { size: "sm" }), children: /* @__PURE__ */ t(R, { onEvent: n }) }) }),
+            children: a && /* @__PURE__ */ t(a, {})
           }
         )
       ] })
@@ -87,6 +89,6 @@ function se({
   );
 }
 export {
-  se as InformationRequestsFlow
+  re as InformationRequestsFlow
 };
 //# sourceMappingURL=InformationRequests.js.map

package/dist/components/InformationRequests/InformationRequests.js.map

@@ -1 +1 @@
-{"version":3,"file":"InformationRequests.js","sources":["../../../src/components/InformationRequests/InformationRequests.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMachine } from 'react-robot'\nimport { Suspense, useCallback, useMemo, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { InformationRequestList } from './InformationRequestList'\nimport { informationRequestsMachine } from './informationRequestsStateMachine'\nimport { type InformationRequestsContextInterface } from './InformationRequestsComponents'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { FlowContext } from '@/components/Flow/useFlow'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { informationRequestEvents, type EventType } from '@/shared/constants'\n\ninterface SubmissionAlert {\n  id: number\n}\n\ninterface SubmissionAlertState {\n  nextAlertId: number\n  alerts: SubmissionAlert[]\n}\n\n/**\n * Props for {@link InformationRequestsFlow}.\n *\n * @public\n */\nexport interface InformationRequestsFlowProps extends Omit<\n  BaseComponentInterface<'InformationRequests'>,\n  'onEvent'\n> {\n  /** The associated company identifier. */\n  companyId: string\n  /**\n   * When `true` (default), the submission success alert is rendered at the top of this component.\n   * Set to `false` when embedding in a parent that renders the alert elsewhere.\n   */\n  withAlert?: boolean\n  /** Callback invoked when the flow or its blocks emit an event. */\n  onEvent?: BaseComponentInterface['onEvent']\n}\n\nconst ALERT_TYPE = 'informationRequestResponded' as const\n\n/**\n * Hub for viewing and responding to outstanding information requests from Gusto.\n *\n * @remarks\n * Renders the list of open and submitted information requests for a company and hosts the response form in a modal.\n * On successful submit, a dismissible success alert appears at the top of the list (when `withAlert` is `true`) and the modal closes.\n *\n * Information requests can also block payroll processing; in that case they are surfaced inline within\n * `Payroll.PayrollBlockerList`, which embeds this flow with `withAlert={false}` so the blocker list owns the alert UX.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `informationRequest/respond` | Fired when the user clicks \"Respond\" on a request and the form modal opens | `{ requestId: string }` |\n * | `informationRequest/form/done` | Fired when an information request is successfully submitted | Response from the Submit information request endpoint |\n * | `informationRequest/form/cancel` | Fired when the user cancels the response form (closes the modal without submitting) | — |\n *\n * Each piece is also exported as a standalone block (see the Blocks\n * table) for composing a custom workflow when this orchestration is the wrong\n * fit. See the\n * {@link https://sdk.gusto.com/docs/guides/integration-guide/composition | Composition guide}\n * for how to recompose these blocks into your own flow.\n *\n * @components\n * - {@link InformationRequestList}\n * - {@link InformationRequestForm}\n *\n * @param props - See {@link InformationRequestsFlowProps}.\n * @returns The information requests flow surface.\n * @public\n *\n * @example\n * ```tsx title=\"App.tsx\"\n * import { InformationRequests } from '@gusto/embedded-react-sdk'\n *\n * function MyApp() {\n *   return (\n *     <InformationRequests.InformationRequestsFlow\n *       companyId=\"a007e1ab-3595-43c2-ab4b-af7a5af2e365\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function InformationRequestsFlow({\n  companyId,\n  dictionary,\n  withAlert = true,\n  onEvent = () => {},\n}: InformationRequestsFlowProps) {\n  useComponentDictionary('InformationRequests', dictionary)\n  useI18n('InformationRequests')\n  const { t } = useTranslation('InformationRequests')\n  const { Modal, LoadingSpinner, Alert, Text } = useComponentContext()\n  const [isModalOpen, setIsModalOpen] = useState(false)\n  const [alertState, setAlertState] = useState<SubmissionAlertState>({\n    nextAlertId: 0,\n    alerts: [],\n  })\n\n  const handleDismissAlert = useCallback((alertId: number) => {\n    setAlertState(prev => ({\n      ...prev,\n      alerts: prev.alerts.filter(alert => alert.id !== alertId),\n    }))\n  }, [])\n\n  const addSubmissionAlert = useCallback(() => {\n    setAlertState(prev => ({\n      nextAlertId: prev.nextAlertId + 1,\n      alerts: [{ id: prev.nextAlertId }, ...prev.alerts],\n    }))\n  }, [])\n\n  const informationRequestsMachineInstance = useMemo(\n    () =>\n      createMachine(\n        'list',\n        informationRequestsMachine,\n        (): InformationRequestsContextInterface => ({\n          component: null,\n          companyId,\n          onEvent: handleEvent,\n        }),\n      ),\n    [companyId],\n  )\n  const [current, send] = useMachine(informationRequestsMachineInstance)\n\n  function handleEvent(type: EventType, data?: unknown) {\n    send({ type, payload: data })\n\n    if (type === informationRequestEvents.INFORMATION_REQUEST_RESPOND) {\n      setIsModalOpen(true)\n    }\n\n    if (\n      type === informationRequestEvents.INFORMATION_REQUEST_FORM_CANCEL ||\n      type === informationRequestEvents.INFORMATION_REQUEST_FORM_DONE\n    ) {\n      setIsModalOpen(false)\n    }\n\n    if (type === informationRequestEvents.INFORMATION_REQUEST_FORM_DONE && withAlert) {\n      addSubmissionAlert()\n    }\n\n    onEvent(type, data)\n  }\n\n  const handleCloseModal = () => {\n    setIsModalOpen(false)\n  }\n\n  const CurrentComponent = current.context.component\n  const Footer = CurrentComponent?.Footer || undefined\n\n  return (\n    <FlowContext.Provider\n      value={{\n        ...current.context,\n        onEvent: handleEvent,\n      }}\n    >\n      <Flex flexDirection=\"column\" gap={32}>\n        {withAlert &&\n          alertState.alerts.map(alert => (\n            <Alert\n              key={alert.id}\n              status=\"success\"\n              label={t(`alerts.${ALERT_TYPE}.title`)}\n              onDismiss={() => {\n                handleDismissAlert(alert.id)\n              }}\n            >\n              <Text>{t(`alerts.${ALERT_TYPE}.description`)}</Text>\n            </Alert>\n          ))}\n\n        <Suspense fallback={<LoadingSpinner />}>\n          <InformationRequestList companyId={companyId} onEvent={handleEvent} />\n        </Suspense>\n        <Modal\n          isOpen={isModalOpen}\n          onClose={handleCloseModal}\n          footer={\n            Footer && (\n              <BaseBoundaries>\n                <Suspense fallback={<LoadingSpinner size=\"sm\" />}>\n                  <Footer onEvent={handleEvent} />\n                </Suspense>\n              </BaseBoundaries>\n            )\n          }\n        >\n          {CurrentComponent && <CurrentComponent />}\n        </Modal>\n      </Flex>\n    </FlowContext.Provider>\n  )\n}\n"],"names":["ALERT_TYPE","InformationRequestsFlow","companyId","dictionary","withAlert","onEvent","useComponentDictionary","useI18n","t","useTranslation","Modal","LoadingSpinner","Alert","Text","useComponentContext","isModalOpen","setIsModalOpen","useState","alertState","setAlertState","handleDismissAlert","useCallback","alertId","prev","alert","addSubmissionAlert","informationRequestsMachineInstance","useMemo","createMachine","informationRequestsMachine","handleEvent","current","send","useMachine","type","data","informationRequestEvents","handleCloseModal","CurrentComponent","Footer","jsx","FlowContext","jsxs","Flex","Suspense","InformationRequestList","BaseBoundaries"],"mappings":"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"}
+{"version":3,"file":"InformationRequests.js","sources":["../../../src/components/InformationRequests/InformationRequests.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMachine } from 'react-robot'\nimport { Suspense, useCallback, useMemo, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { InformationRequestList } from './InformationRequestList'\nimport { informationRequestsMachine } from './informationRequestsStateMachine'\nimport { type InformationRequestsContextInterface } from './InformationRequestsComponents'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { FlowContext } from '@/components/Flow/useFlow'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { informationRequestEvents, type EventType } from '@/shared/constants'\n\ninterface SubmissionAlert {\n  id: number\n}\n\ninterface SubmissionAlertState {\n  nextAlertId: number\n  alerts: SubmissionAlert[]\n}\n\n/**\n * Props for {@link InformationRequestsFlow}.\n *\n * @public\n */\nexport interface InformationRequestsFlowProps extends Omit<\n  BaseComponentInterface<'InformationRequests'>,\n  'onEvent'\n> {\n  /** The associated company identifier. */\n  companyId: string\n  /**\n   * When `true` (default), the submission success alert is rendered at the top of this component.\n   * Set to `false` when embedding in a parent that renders the alert elsewhere.\n   */\n  withAlert?: boolean\n  /** Callback invoked when the flow or its blocks emit an event. */\n  onEvent?: BaseComponentInterface['onEvent']\n}\n\nconst ALERT_TYPE = 'informationRequestResponded' as const\n\n/**\n * Hub for viewing and responding to outstanding information requests from Gusto.\n *\n * @remarks\n * Renders the list of open and submitted information requests for a company and hosts the response form in a modal.\n * On successful submit, a dismissible success alert appears at the top of the list (when `withAlert` is `true`) and the modal closes.\n *\n * Information requests can also block payroll processing; in that case they are surfaced inline within\n * `Payroll.PayrollBlockerList`, which embeds this flow with `withAlert={false}` so the blocker list owns the alert UX.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `informationRequest/respond` | Fired when the user clicks \"Respond\" on a request and the form modal opens | `{ requestId: string }` |\n * | `informationRequest/form/done` | Fired when an information request is successfully submitted | Response from the Submit information request endpoint |\n * | `informationRequest/form/cancel` | Fired when the user cancels the response form (closes the modal without submitting) | — |\n *\n * Each piece is also exported as a standalone block (see the Blocks\n * table) for composing a custom workflow when this orchestration is the wrong\n * fit. See the\n * {@link https://sdk.gusto.com/docs/guides/integration-guide/composition | Composition guide}\n * for how to recompose these blocks into your own flow.\n *\n * @components\n * - {@link InformationRequestList}\n * - {@link InformationRequestForm}\n *\n * @param props - See {@link InformationRequestsFlowProps}.\n * @returns The information requests flow surface.\n * @public\n *\n * @example\n * ```tsx title=\"App.tsx\"\n * import { InformationRequests } from '@gusto/embedded-react-sdk'\n *\n * function MyApp() {\n *   return (\n *     <InformationRequests.InformationRequestsFlow\n *       companyId=\"a007e1ab-3595-43c2-ab4b-af7a5af2e365\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function InformationRequestsFlow({\n  companyId,\n  dictionary,\n  withAlert = true,\n  onEvent = () => {},\n  LoaderComponent,\n}: InformationRequestsFlowProps) {\n  useComponentDictionary('InformationRequests', dictionary)\n  useI18n('InformationRequests')\n  const { t } = useTranslation('InformationRequests')\n  const { Modal, LoadingSpinner, Alert, Text } = useComponentContext()\n  const [isModalOpen, setIsModalOpen] = useState(false)\n  const [alertState, setAlertState] = useState<SubmissionAlertState>({\n    nextAlertId: 0,\n    alerts: [],\n  })\n\n  const handleDismissAlert = useCallback((alertId: number) => {\n    setAlertState(prev => ({\n      ...prev,\n      alerts: prev.alerts.filter(alert => alert.id !== alertId),\n    }))\n  }, [])\n\n  const addSubmissionAlert = useCallback(() => {\n    setAlertState(prev => ({\n      nextAlertId: prev.nextAlertId + 1,\n      alerts: [{ id: prev.nextAlertId }, ...prev.alerts],\n    }))\n  }, [])\n\n  const informationRequestsMachineInstance = useMemo(\n    () =>\n      createMachine(\n        'list',\n        informationRequestsMachine,\n        (): InformationRequestsContextInterface => ({\n          component: null,\n          companyId,\n          onEvent: handleEvent,\n          LoaderComponent,\n        }),\n      ),\n    [companyId, LoaderComponent],\n  )\n  const [current, send] = useMachine(informationRequestsMachineInstance)\n\n  function handleEvent(type: EventType, data?: unknown) {\n    send({ type, payload: data })\n\n    if (type === informationRequestEvents.INFORMATION_REQUEST_RESPOND) {\n      setIsModalOpen(true)\n    }\n\n    if (\n      type === informationRequestEvents.INFORMATION_REQUEST_FORM_CANCEL ||\n      type === informationRequestEvents.INFORMATION_REQUEST_FORM_DONE\n    ) {\n      setIsModalOpen(false)\n    }\n\n    if (type === informationRequestEvents.INFORMATION_REQUEST_FORM_DONE && withAlert) {\n      addSubmissionAlert()\n    }\n\n    onEvent(type, data)\n  }\n\n  const handleCloseModal = () => {\n    setIsModalOpen(false)\n  }\n\n  const CurrentComponent = current.context.component\n  const Footer = CurrentComponent?.Footer || undefined\n\n  return (\n    <FlowContext.Provider\n      value={{\n        ...current.context,\n        onEvent: handleEvent,\n      }}\n    >\n      <Flex flexDirection=\"column\" gap={32}>\n        {withAlert &&\n          alertState.alerts.map(alert => (\n            <Alert\n              key={alert.id}\n              status=\"success\"\n              label={t(`alerts.${ALERT_TYPE}.title`)}\n              onDismiss={() => {\n                handleDismissAlert(alert.id)\n              }}\n            >\n              <Text>{t(`alerts.${ALERT_TYPE}.description`)}</Text>\n            </Alert>\n          ))}\n\n        <Suspense fallback={<LoadingSpinner />}>\n          <InformationRequestList companyId={companyId} onEvent={handleEvent} />\n        </Suspense>\n        <Modal\n          isOpen={isModalOpen}\n          onClose={handleCloseModal}\n          footer={\n            Footer && (\n              <BaseBoundaries LoaderComponent={LoaderComponent}>\n                <Suspense fallback={<LoadingSpinner size=\"sm\" />}>\n                  <Footer onEvent={handleEvent} />\n                </Suspense>\n              </BaseBoundaries>\n            )\n          }\n        >\n          {CurrentComponent && <CurrentComponent />}\n        </Modal>\n      </Flex>\n    </FlowContext.Provider>\n  )\n}\n"],"names":["ALERT_TYPE","InformationRequestsFlow","companyId","dictionary","withAlert","onEvent","LoaderComponent","useComponentDictionary","useI18n","t","useTranslation","Modal","LoadingSpinner","Alert","Text","useComponentContext","isModalOpen","setIsModalOpen","useState","alertState","setAlertState","handleDismissAlert","useCallback","alertId","prev","alert","addSubmissionAlert","informationRequestsMachineInstance","useMemo","createMachine","informationRequestsMachine","handleEvent","current","send","useMachine","type","data","informationRequestEvents","handleCloseModal","CurrentComponent","Footer","jsx","FlowContext","jsxs","Flex","Suspense","InformationRequestList","BaseBoundaries"],"mappings":"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"}

package/dist/components/InformationRequests/InformationRequestsComponents.d.ts

@@ -14,3 +14,6 @@ export interface InformationRequestsContextInterface extends FlowContextInterfac
 }
 /** @internal */
 export declare function InformationRequestFormContextual(): import("react").JSX.Element;
+export declare namespace InformationRequestFormContextual {
+    var Footer: typeof import("./InformationRequestForm").Footer;
+}

package/dist/components/InformationRequests/InformationRequestsComponents.js

@@ -1,19 +1,21 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { useFlow as m } from "../Flow/useFlow.js";
-import { ensureRequired as n } from "../../helpers/ensureRequired.js";
-import { InformationRequestForm as u } from "./InformationRequestForm/InformationRequestForm.js";
-function d() {
-  const { companyId: o, selectedRequestId: e, onEvent: r } = m();
-  return /* @__PURE__ */ t(
-    u,
+import { ensureRequired as u } from "../../helpers/ensureRequired.js";
+import { InformationRequestForm as s, Footer as i } from "./InformationRequestForm/InformationRequestForm.js";
+function f() {
+  const { companyId: o, selectedRequestId: e, onEvent: r, LoaderComponent: t } = m();
+  return /* @__PURE__ */ n(
+    s,
     {
       companyId: o,
-      requestId: n(e),
-      onEvent: r
+      requestId: u(e),
+      onEvent: r,
+      LoaderComponent: t
     }
   );
 }
+f.Footer = i;
 export {
-  d as InformationRequestFormContextual
+  f as InformationRequestFormContextual
 };
 //# sourceMappingURL=InformationRequestsComponents.js.map

package/dist/components/InformationRequests/InformationRequestsComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"InformationRequestsComponents.js","sources":["../../../src/components/InformationRequests/InformationRequestsComponents.tsx"],"sourcesContent":["import { InformationRequestForm } from './InformationRequestForm'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport type { FlowContextInterface } from '@/components/Flow/useFlow'\nimport type { CommonComponentInterface } from '@/components/Base'\nimport type { EventType } from '@/types/Helpers'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n/** @internal */\nexport interface InformationRequestsContextInterface extends FlowContextInterface {\n  companyId: string\n  selectedRequestId?: string\n  component:\n    | (React.ComponentType<CommonComponentInterface> & {\n        Footer?: React.ComponentType<{\n          onEvent: OnEventType<EventType, unknown>\n        }>\n      })\n    | null\n}\n\n/** @internal */\nexport function InformationRequestFormContextual() {\n  const { companyId, selectedRequestId, onEvent } = useFlow<InformationRequestsContextInterface>()\n\n  return (\n    <InformationRequestForm\n      companyId={companyId}\n      requestId={ensureRequired(selectedRequestId)}\n      onEvent={onEvent}\n    />\n  )\n}\n"],"names":["InformationRequestFormContextual","companyId","selectedRequestId","onEvent","useFlow","jsx","InformationRequestForm","ensureRequired"],"mappings":";;;;AAsBO,SAASA,IAAmC;AACjD,QAAM,EAAE,WAAAC,GAAW,mBAAAC,GAAmB,SAAAC,EAAA,IAAYC,EAAA;AAElD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAL;AAAA,MACA,WAAWM,EAAeL,CAAiB;AAAA,MAC3C,SAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"InformationRequestsComponents.js","sources":["../../../src/components/InformationRequests/InformationRequestsComponents.tsx"],"sourcesContent":["import { InformationRequestForm, Footer } from './InformationRequestForm'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport type { FlowContextInterface } from '@/components/Flow/useFlow'\nimport type { CommonComponentInterface } from '@/components/Base'\nimport type { EventType } from '@/types/Helpers'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n/** @internal */\nexport interface InformationRequestsContextInterface extends FlowContextInterface {\n  companyId: string\n  selectedRequestId?: string\n  component:\n    | (React.ComponentType<CommonComponentInterface> & {\n        Footer?: React.ComponentType<{\n          onEvent: OnEventType<EventType, unknown>\n        }>\n      })\n    | null\n}\n\n/** @internal */\nexport function InformationRequestFormContextual() {\n  const { companyId, selectedRequestId, onEvent, LoaderComponent } =\n    useFlow<InformationRequestsContextInterface>()\n\n  return (\n    <InformationRequestForm\n      companyId={companyId}\n      requestId={ensureRequired(selectedRequestId)}\n      onEvent={onEvent}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\nInformationRequestFormContextual.Footer = Footer\n"],"names":["InformationRequestFormContextual","companyId","selectedRequestId","onEvent","LoaderComponent","useFlow","jsx","InformationRequestForm","ensureRequired","Footer"],"mappings":";;;;AAsBO,SAASA,IAAmC;AACjD,QAAM,EAAE,WAAAC,GAAW,mBAAAC,GAAmB,SAAAC,GAAS,iBAAAC,EAAA,IAC7CC,EAAA;AAEF,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAN;AAAA,MACA,WAAWO,EAAeN,CAAiB;AAAA,MAC3C,SAAAC;AAAA,MACA,iBAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;AACAJ,EAAiC,SAASS;"}