@gusto/embedded-react-sdk 0.28.0 → 0.29.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 { 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']\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\ninterface InformationRequestFormProps extends BaseComponentInterface<'InformationRequests.InformationRequestForm'> {\n  companyId: string\n  requestId: string\n  onEvent: OnEventType<EventType, unknown>\n}\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(\n    question => question.responseType && !SUPPORTED_RESPONSE_TYPES.includes(question.responseType),\n  )\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.informationRequestList?.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.questionUuid || !question.responseType) return\n\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    if (!question.questionUuid || !question.responseType) return null\n\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 weight=\"medium\">\n            {isDocumentType ? t('questionTypes.document') : t('questionTypes.answer')}\n          </Text>\n          <Text>{question.questionText}</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              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\nconst 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.informationRequestList?.find(\n    req => req.uuid === selectedRequestId,\n  )\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\nInformationRequestForm.Footer = Footer\n"],"names":["INFORMATION_REQUEST_FORM_ID","ACCEPTED_FILE_TYPES","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","TextInputField","FileInputField","unsupportedPlaceholder","Flex","FormProvider","Form","Footer","Button","selectedRequestId","useFlow","isPending","useIsMutating","mutationKeyInformationRequestsSubmit","handleCancel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAMA,IAA8B,sCAC9BC,KAAsB,CAAC,cAAc,aAAa,iBAAiB,GAEnEC,KAA+BC,EAAE;AAAA,EACrCA,EAAE,OAAA;AAAA,EACFA,EAAE,MAAM,CAACA,EAAE,OAAA,EAAS,IAAI,CAAC,GAAGA,EAAE,WAAW,IAAI,CAAC,CAAC;AACjD;AAUO,SAASC,GAAuBC,GAAoC;AACzE,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,MAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,MAAMI,KAAuB,CAACC,MACrB,IAAI,QAAgB,CAACC,GAASC,MAAW;AAC9C,QAAMC,IAAS,IAAI,WAAA;AACnB,EAAAA,EAAO,SAAS,MAAM;AACpB,IAAAF,EAAQE,EAAO,MAAgB;AAAA,EACjC,GACAA,EAAO,UAAUD,GACjBC,EAAO,cAAcH,CAAI;AAC3B,CAAC,GAGGI,KAA2C,CAACC,EAAa,MAAMA,EAAa,QAAQ;AAE1F,SAASC,EAA4BC,GAAgC;AACnE,SAAOA,EAAU;AAAA,IACf,OAAYC,EAAS,gBAAgB,CAACJ,GAAyB,SAASI,EAAS,YAAY;AAAA,EAAA;AAEjG;AAEA,SAASC,GAAuBF,GAAgC;AAC9D,SAAOA,EAAU,KAAK,CAAAC,MAAYA,EAAS,iBAAiBH,EAAa,OAAO;AAClF;AAEA,SAASP,GAAK,EAAE,WAAAY,GAAW,WAAAC,GAAW,YAAAC,KAA2C;AAC/E,EAAAC,GAAuB,8CAA8CD,CAAU,GAC/EE,EAAQ,4CAA4C;AACpD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,4CAA4C,GACnE,EAAE,OAAAC,GAAO,SAAAC,GAAS,MAAAC,EAAA,IAASC,EAAA,GAC3B,EAAE,SAAAC,GAAS,mBAAAC,EAAA,IAAsBC,EAAA,GAEjC,EAAE,MAAAC,EAAA,IAASC,EAAqD;AAAA,IACpE,aAAaf;AAAA,EAAA,CACd,GAEKgB,IAAqBF,EAAK,wBAAwB,KAAK,CAAAG,MAAOA,EAAI,SAAShB,CAAS,GACpFiB,IAAoBF,GAAoB,qBAAqB,CAAA,GAC7DG,IAAoBH,GAAoB,mBAAmB,IAC3DI,IAAsBxB,EAA4BsB,CAAiB,GACnEG,IAAiBtB,GAAuBmB,CAAiB,GAEzD,EAAE,aAAaI,EAAA,IAA6BC,EAAA,GAE5CC,IAA2D,CAAA,GAC3DC,IAA0B,CAAA;AAEhC,EAAAP,EAAkB,QAAQ,CAAApB,MAAY;AACpC,IAAI,CAACA,EAAS,gBAAgB,CAACA,EAAS,iBAEpCA,EAAS,iBAAiBH,EAAa,QACzC8B,EAAc,KAAK3B,EAAS,YAAY,GACxC0B,EAAc1B,EAAS,YAAY,IAAI,MAC9BA,EAAS,iBAAiBH,EAAa,aAChD8B,EAAc,KAAK3B,EAAS,YAAY,GACxC0B,EAAc1B,EAAS,YAAY,IAAI;AAAA,EAE3C,CAAC;AAED,QAAM4B,IAAcC,EAAsC;AAAA,IACxD,UAAUC,EAAY9C,EAA4B;AAAA,IAClD,eAAA0C;AAAA,EAAA,CACD,GAEKK,IAAW,OAAOC,MAA2C;AACjE,UAAMlB,EAAkBkB,GAAU,YAAY;AA2B5C,YAAMC,KA1BoB,MAAM,QAAQ;AAAA,QACtCN,EAAc,IAAI,OAAMO,MAAQ;AAC9B,gBAAMC,IAAQH,EAASE,CAAI;AAE3B,cAAI,OAAOC,KAAU;AACnB,mBAAO;AAAA,cACL,cAAcD;AAAA,cACd,cAAcE,EAAmB;AAAA,cACjC,cAAcD;AAAA,YAAA;AAIlB,cAAIA,aAAiB,MAAM;AACzB,kBAAME,IAAe,MAAM9C,GAAqB4C,CAAK;AACrD,mBAAO;AAAA,cACL,cAAcD;AAAA,cACd,cAAcE,EAAmB;AAAA,cACjC,cAAAC;AAAA,cACA,UAAUF,EAAM;AAAA,YAAA;AAAA,UAEpB;AAEA,iBAAO;AAAA,QACT,CAAC;AAAA,MAAA,GAGsC,OAAO,CAAAG,MAAYA,MAAa,IAAI,GAEvEA,IAAW,MAAMd,EAAyB;AAAA,QAC9C,SAAS;AAAA,UACP,wBAAwBrB;AAAA,UACxB,aAAa;AAAA,YACX,mBAAmB8B;AAAA,UAAA;AAAA,QACrB;AAAA,MACF,CACD;AAED,MAAApB,EAAQ0B,EAAyB,+BAA+BD,EAAS,kBAAkB;AAAA,IAC7F,CAAC;AAAA,EACH,GAEME,IAAiB,CAACxC,MAAgC;AACtD,QAAI,CAACA,EAAS,gBAAgB,CAACA,EAAS,aAAc,QAAO;AAE7D,UAAMyC,IAAYzC,EAAS,cACrB0C,IAAiB1C,EAAS,iBAAiBH,EAAa,UACxD8C,IAAa3C,EAAS,iBAAiBH,EAAa;AAE1D,WACE,gBAAA+C,EAAC,OAAA,EAAoB,WAAWC,EAAO,cACrC,UAAA;AAAA,MAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,qBACrB,UAAA;AAAA,QAAA,gBAAAzD,EAACuB,GAAA,EAAK,QAAO,UACV,UAAiBJ,EAAjBmC,IAAmB,2BAA8B,sBAAN,EAA4B,CAC1E;AAAA,QACA,gBAAAtD,EAACuB,GAAA,EAAM,UAAAX,EAAS,aAAA,CAAa;AAAA,MAAA,GAC/B;AAAA,MAEA,gBAAAZ,EAAC,MAAA,EAAG,WAAWyD,EAAO,QAAA,CAAS;AAAA,MAE9BF,KACC,gBAAAvD,EAAC,OAAA,EAAI,WAAWyD,EAAO,kBACrB,UAAA,gBAAAzD;AAAA,QAAC0D;AAAA,QAAA;AAAA,UACC,MAAML;AAAA,UACN,OAAOlC,EAAE,yBAAyB;AAAA,UAClC,aAAaA,EAAE,+BAA+B;AAAA,UAC9C,YAAU;AAAA,UACV,cAAcA,EAAE,qBAAqB;AAAA,QAAA;AAAA,MAAA,GAEzC;AAAA,MAGDmC,KACC,gBAAAtD,EAAC,OAAA,EAAI,WAAWyD,EAAO,kBACrB,UAAA,gBAAAzD;AAAA,QAAC2D;AAAA,QAAA;AAAA,UACC,MAAMN;AAAA,UACN,OAAOlC,EAAE,yBAAyB;AAAA,UAClC,QAAQxB;AAAA,UACR,YAAU;AAAA,UACV,cAAcwB,EAAE,qBAAqB;AAAA,QAAA;AAAA,MAAA,EACvC,CACF;AAAA,IAAA,EAAA,GA/BMkC,CAiCV;AAAA,EAEJ,GAEMO,IACJ,gBAAAJ,EAAC,OAAA,EAAI,WAAWC,EAAO,cACrB,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,qBACrB,UAAA;AAAA,MAAA,gBAAAzD,EAACuB,KAAK,QAAO,UACV,YAAEY,IAAiB,8BAA8B,2BAA2B,GAC/E;AAAA,wBACCZ,GAAA,EACE,UAAAJ;AAAA,QACCgB,IAAiB,oCAAoC;AAAA,MAAA,EACvD,CACF;AAAA,IAAA,GACF;AAAA,IAEA,gBAAAnC,EAAC,MAAA,EAAG,WAAWyD,EAAO,QAAA,CAAS;AAAA,IAE/B,gBAAAzD,EAAC,OAAA,EAAI,WAAWyD,EAAO,gBACrB,UAAA,gBAAAzD,EAACuB,GAAA,EAAK,SAAQ,cAAc,UAAAJ,EAAE,4BAA4B,EAAA,CAAE,EAAA,CAC9D;AAAA,EAAA,GACF;AAGF,SACE,gBAAAnB,EAAC,OAAA,EAAI,WAAWyD,EAAO,MACrB,4BAACI,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAA7D,EAACsB,GAAA,EAAQ,IAAG,MAAM,UAAAH,EAAE,OAAO,GAAE;AAAA,IAE5Bc,KACC,gBAAAjC,EAACqB,GAAA,EAAM,QAAO,SAAQ,OAAOF,EAAE,qBAAqB,GAAG,uBAAqB,IACzE,UAAAA,EAAE,2BAA2B,GAChC;AAAA,IAGDe,IACC0B,IAEA,gBAAA5D,EAAC8D,GAAA,EAAc,GAAGtB,GAChB,UAAA,gBAAAxC,EAAC+D,GAAA,EAAK,IAAIrE,GAA6B,UAAU8C,EAAY,aAAaG,CAAQ,GAChF,UAAA,gBAAA3C,EAAC6D,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA7B,EAAkB,IAAIoB,CAAc,EAAA,CACvC,EAAA,CACF,EAAA,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;AAEA,MAAMY,KAAS,CAAC,EAAE,SAAAvC,QAA4D;AAC5E,EAAAP,EAAQ,4CAA4C;AACpD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,4CAA4C,GACnE,EAAE,QAAA6C,EAAA,IAAWzC,EAAA,GACb,EAAE,WAAAV,GAAW,mBAAAoD,EAAA,IAAsBC,GAAA,GAEnC,EAAE,MAAAvC,EAAA,IAASC,EAAqD;AAAA,IACpE,aAAaf;AAAA,EAAA,CACd,GAKKkB,IAHqBJ,EAAK,wBAAwB;AAAA,IACtD,CAAAG,MAAOA,EAAI,SAASmC;AAAA,EAAA,GAEwB,qBAAqB,CAAA,GAC7DhC,IAAsBxB,EAA4BsB,CAAiB,GAKnEoC,IAHaC,EAAc;AAAA,IAC/B,aAAaC,EAAA;AAAA,EAAqC,CACnD,IAC8B,GAEzBC,IAAe,MAAM;AACzB,IAAA9C,EAAQ0B,EAAyB,+BAA+B;AAAA,EAClE;AAEA,SAAIjB,IAEA,gBAAAlC,EAAC6D,GAAA,EAAK,gBAAe,YAAW,KAAK,IACnC,UAAA,gBAAA7D,EAACiE,GAAA,EAAO,SAAQ,aAAY,SAASM,GAClC,UAAApD,EAAE,WAAW,GAChB,GACF,IAKF,gBAAAqC,EAACK,GAAA,EAAK,gBAAe,YAAW,KAAK,IACnC,UAAA;AAAA,IAAA,gBAAA7D,EAACiE,GAAA,EAAO,SAAQ,aAAY,SAASM,GAAc,YAAYH,GAC5D,UAAAjD,EAAE,YAAY,EAAA,CACjB;AAAA,IACA,gBAAAnB;AAAA,MAACiE;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,MAAMvE;AAAA,QACN,WAAW0E;AAAA,QAEV,YAAE,YAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EACjB,GACF;AAEJ;AAEAtE,GAAuB,SAASkE;"}
+{"version":3,"file":"InformationRequestForm.js","sources":["../../../../src/components/InformationRequests/InformationRequestForm/InformationRequestForm.tsx"],"sourcesContent":["import { 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']\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\ninterface InformationRequestFormProps extends BaseComponentInterface<'InformationRequests.InformationRequestForm'> {\n  companyId: string\n  requestId: string\n  onEvent: OnEventType<EventType, unknown>\n}\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(\n    question => question.responseType && !SUPPORTED_RESPONSE_TYPES.includes(question.responseType),\n  )\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.informationRequestList?.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.questionUuid || !question.responseType) return\n\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    if (!question.questionUuid || !question.responseType) return null\n\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 weight=\"medium\">\n            {isDocumentType ? t('questionTypes.document') : t('questionTypes.answer')}\n          </Text>\n          <Text>{question.questionText}</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              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\nconst 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.informationRequestList?.find(\n    req => req.uuid === selectedRequestId,\n  )\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\nInformationRequestForm.Footer = Footer\n"],"names":["INFORMATION_REQUEST_FORM_ID","ACCEPTED_FILE_TYPES","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","TextInputField","FileInputField","unsupportedPlaceholder","Flex","FormProvider","Form","Footer","Button","selectedRequestId","useFlow","isPending","useIsMutating","mutationKeyInformationRequestsSubmit","handleCancel"],"mappings":"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"}

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

@@ -10,9 +10,9 @@ import { DataView as k } from "../../Common/DataView/DataView.js";
 import { useDataView as v } from "../../Common/DataView/useDataView.js";
 import { FlexItem as E, Flex as u } from "../../Common/Flex/Flex.js";
 import "classnames";
-import { informationRequestEvents as C } from "../../../shared/constants.js";
-import { EmptyData as L } from "../../Common/EmptyData/EmptyData.js";
+import { EmptyData as C } from "../../Common/EmptyData/EmptyData.js";
 import "react";
+import { informationRequestEvents as L } from "../../../shared/constants.js";
 function X(r) {
   return /* @__PURE__ */ n(x, { ...r, children: /* @__PURE__ */ n(A, { ...r, children: r.children }) });
 }
@@ -52,7 +52,7 @@ function A({
     }
   }, b = v({
     data: p,
-    emptyState: () => /* @__PURE__ */ n(L, { title: t("emptyTableTitle"), description: t("emptyTableDescription") }),
+    emptyState: () => /* @__PURE__ */ n(C, { title: t("emptyTableTitle"), description: t("emptyTableDescription") }),
     columns: [
       {
         key: "type",
@@ -76,7 +76,7 @@ function A({
       {
         variant: "secondary",
         onClick: () => {
-          y(C.INFORMATION_REQUEST_RESPOND, {
+          y(L.INFORMATION_REQUEST_RESPOND, {
             requestId: e.uuid
           });
         },

package/dist/components/InformationRequests/InformationRequests.js

@@ -8,10 +8,10 @@ import { BaseBoundaries as j } from "../Base/Base.js";
 import "../Base/useBase.js";
 import { Flex as k } from "../Common/Flex/Flex.js";
 import "classnames";
-import { informationRequestEvents as s } from "../../shared/constants.js";
 import { useComponentContext as B } 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 Y } from "./InformationRequestList/InformationRequestList.js";
 const E = "informationRequestResponded";
 function ie({

package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsForm/ConfirmWireDetailsForm.js

@@ -16,12 +16,12 @@ import { useComponentDictionary as z, useI18n as g } from "../../../../i18n/I18n
 import { Flex as p, FlexItem as f } from "../../../Common/Flex/Flex.js";
 import { payrollWireEvents as N } from "../../../../shared/constants.js";
 import "classnames";
-import { TextInputField as V } from "../../../Common/Fields/TextInputField/TextInputField.js";
-import { DatePickerField as J } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
-import { NumberInputField as Q } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
 import "react";
-import { TextAreaField as X } from "../../../Common/Fields/TextAreaField/TextAreaField.js";
-import { useDateFormatter as Z } from "../../../../hooks/useDateFormatter.js";
+import { TextAreaField as V } from "../../../Common/Fields/TextAreaField/TextAreaField.js";
+import { useDateFormatter as J } from "../../../../hooks/useDateFormatter.js";
+import { NumberInputField as Q } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
+import { TextInputField as X } from "../../../Common/Fields/TextInputField/TextInputField.js";
+import { DatePickerField as Z } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
 const $ = r.object({
   amountSent: r.number().positive(),
   dateSent: r.date(),
@@ -43,7 +43,7 @@ const oe = ({
   modalContainerRef: y
 }) => {
   z("Payroll.ConfirmWireDetailsForm", i), g("Payroll.ConfirmWireDetailsForm");
-  const { onEvent: a, baseSubmitHandler: I } = Y(), { t } = F("Payroll.ConfirmWireDetailsForm"), { Heading: v, Text: b } = S(), R = Z(), { data: P } = U({
+  const { onEvent: a, baseSubmitHandler: I } = Y(), { t } = F("Payroll.ConfirmWireDetailsForm"), { Heading: v, Text: b } = S(), R = J(), { data: P } = U({
     wireInRequestUuid: o
   }), W = P.wireInRequest, { data: q } = G({
     companyId: n,
@@ -95,7 +95,7 @@ const oe = ({
             }
           ),
           /* @__PURE__ */ e(
-            J,
+            Z,
             {
               name: "dateSent",
               label: t("dateLabel"),
@@ -105,7 +105,7 @@ const oe = ({
             }
           ),
           /* @__PURE__ */ e(
-            V,
+            X,
             {
               name: "bankName",
               label: t("bankNameLabel"),
@@ -115,7 +115,7 @@ const oe = ({
               errorMessage: t("validations.bankName")
             }
           ),
-          /* @__PURE__ */ e(X, { name: "additionalNotes", label: t("notesLabel"), rows: 3 })
+          /* @__PURE__ */ e(V, { name: "additionalNotes", label: t("notesLabel"), rows: 3 })
         ] })
       }
     ) })

package/dist/components/Payroll/PayPeriodDateForm/PayPeriodDateFormPresentation.js

@@ -4,20 +4,19 @@ import { useTranslation as f } from "react-i18next";
 import a from "./PayPeriodDateFormPresentation.module.scss.js";
 import { useI18n as y } from "../../../i18n/I18n.js";
 import { useComponentContext as P } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import "../../../shared/constants.js";
 import "classnames";
-import { DatePickerField as r } from "../../Common/Fields/DatePickerField/DatePickerField.js";
 import "react";
 import { CheckboxField as k } from "../../Common/Fields/CheckboxField/CheckboxField.js";
-function j({
-  isCheckOnly: o,
+import { DatePickerField as r } from "../../Common/Fields/DatePickerField/DatePickerField.js";
+function T({
+  isCheckOnly: n,
   onCheckOnlyChange: l,
   isPending: c
 }) {
-  const { Heading: d, Text: m, Button: p } = P();
+  const { Heading: d, Text: m, Button: h } = P();
   y("Payroll.PayPeriodDateForm");
-  const { t: e } = f("Payroll.PayPeriodDateForm"), { setValue: n } = D(), h = b({ name: "startDate" }), u = (s) => {
-    l(s), s && (n("startDate", null), n("endDate", null));
+  const { t: e } = f("Payroll.PayPeriodDateForm"), { setValue: o } = D(), p = b({ name: "startDate" }), u = (s) => {
+    l(s), s && (o("startDate", null), o("endDate", null));
   };
   return /* @__PURE__ */ i("div", { className: a.root, children: [
     /* @__PURE__ */ i("div", { className: a.sectionHeader, children: [
@@ -25,7 +24,7 @@ function j({
       /* @__PURE__ */ t(m, { variant: "supporting", children: e("description") })
     ] }),
     /* @__PURE__ */ i("div", { className: a.formSection, children: [
-      !o && /* @__PURE__ */ i("div", { className: a.dateFields, children: [
+      !n && /* @__PURE__ */ i("div", { className: a.dateFields, children: [
         /* @__PURE__ */ t(r, { name: "startDate", label: e("startDateLabel"), isRequired: !0 }),
         /* @__PURE__ */ t(
           r,
@@ -33,7 +32,7 @@ function j({
             name: "endDate",
             label: e("endDateLabel"),
             isRequired: !0,
-            isDisabled: !h
+            isDisabled: !p
           }
         )
       ] }),
@@ -42,7 +41,7 @@ function j({
         {
           name: "checkDate",
           label: e("checkDateLabel"),
-          description: o ? void 0 : e("checkDateDescription"),
+          description: n ? void 0 : e("checkDateDescription"),
           isRequired: !0
         }
       ) }),
@@ -56,10 +55,10 @@ function j({
         }
       )
     ] }),
-    /* @__PURE__ */ t("div", { className: a.actions, children: /* @__PURE__ */ t(p, { type: "submit", isDisabled: c, children: e("continueButton") }) })
+    /* @__PURE__ */ t("div", { className: a.actions, children: /* @__PURE__ */ t(h, { type: "submit", isDisabled: c, children: e("continueButton") }) })
   ] });
 }
 export {
-  j as PayPeriodDateFormPresentation
+  T as PayPeriodDateFormPresentation
 };
 //# sourceMappingURL=PayPeriodDateFormPresentation.js.map

package/dist/components/Payroll/PayPeriodDateForm/PayPeriodDateFormPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayPeriodDateFormPresentation.js","sources":["../../../../src/components/Payroll/PayPeriodDateForm/PayPeriodDateFormPresentation.tsx"],"sourcesContent":["import { useFormContext, useWatch } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport styles from './PayPeriodDateFormPresentation.module.scss'\nimport type {\n  PayPeriodDateFormData,\n  PayPeriodDateFormPresentationProps,\n} from './PayPeriodDateFormTypes'\nimport { useI18n } from '@/i18n'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { CheckboxField, DatePickerField } from '@/components/Common'\n\nexport function PayPeriodDateFormPresentation({\n  isCheckOnly,\n  onCheckOnlyChange,\n  isPending,\n}: Omit<PayPeriodDateFormPresentationProps, 'payrollType' | 'minCheckDate'>) {\n  const { Heading, Text, Button } = useComponentContext()\n  useI18n('Payroll.PayPeriodDateForm')\n  const { t } = useTranslation('Payroll.PayPeriodDateForm')\n  const { setValue } = useFormContext<PayPeriodDateFormData>()\n\n  const startDate = useWatch<PayPeriodDateFormData, 'startDate'>({ name: 'startDate' })\n\n  const handleCheckOnlyChange = (checked: boolean) => {\n    onCheckOnlyChange(checked)\n    if (checked) {\n      setValue('startDate', null)\n      setValue('endDate', null)\n    }\n  }\n\n  return (\n    <div className={styles.root}>\n      <div className={styles.sectionHeader}>\n        <Heading as=\"h2\">{t('pageTitle')}</Heading>\n        <Text variant=\"supporting\">{t('description')}</Text>\n      </div>\n\n      <div className={styles.formSection}>\n        {!isCheckOnly && (\n          <div className={styles.dateFields}>\n            <DatePickerField name=\"startDate\" label={t('startDateLabel')} isRequired />\n            <DatePickerField\n              name=\"endDate\"\n              label={t('endDateLabel')}\n              isRequired\n              isDisabled={!startDate}\n            />\n          </div>\n        )}\n\n        <div className={styles.checkDateField}>\n          <DatePickerField\n            name=\"checkDate\"\n            label={t('checkDateLabel')}\n            description={isCheckOnly ? undefined : t('checkDateDescription')}\n            isRequired\n          />\n        </div>\n\n        <CheckboxField\n          name=\"isCheckOnly\"\n          label={t('checkOnlyLabel')}\n          description={t('checkOnlyDescription')}\n          onChange={handleCheckOnlyChange}\n        />\n      </div>\n\n      <div className={styles.actions}>\n        <Button type=\"submit\" isDisabled={isPending}>\n          {t('continueButton')}\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"names":["PayPeriodDateFormPresentation","isCheckOnly","onCheckOnlyChange","isPending","Heading","Text","Button","useComponentContext","useI18n","t","useTranslation","setValue","useFormContext","startDate","useWatch","handleCheckOnlyChange","checked","jsxs","styles","jsx","DatePickerField","CheckboxField"],"mappings":";;;;;;;;;;;AAWO,SAASA,EAA8B;AAAA,EAC5C,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AACF,GAA6E;AAC3E,QAAM,EAAE,SAAAC,GAAS,MAAAC,GAAM,QAAAC,EAAA,IAAWC,EAAA;AAClC,EAAAC,EAAQ,2BAA2B;AACnC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,2BAA2B,GAClD,EAAE,UAAAC,EAAA,IAAaC,EAAA,GAEfC,IAAYC,EAA6C,EAAE,MAAM,aAAa,GAE9EC,IAAwB,CAACC,MAAqB;AAClD,IAAAd,EAAkBc,CAAO,GACrBA,MACFL,EAAS,aAAa,IAAI,GAC1BA,EAAS,WAAW,IAAI;AAAA,EAE5B;AAEA,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,MACrB,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,eACrB,UAAA;AAAA,MAAA,gBAAAC,EAACf,GAAA,EAAQ,IAAG,MAAM,UAAAK,EAAE,WAAW,GAAE;AAAA,wBAChCJ,GAAA,EAAK,SAAQ,cAAc,UAAAI,EAAE,aAAa,EAAA,CAAE;AAAA,IAAA,GAC/C;AAAA,IAEA,gBAAAQ,EAAC,OAAA,EAAI,WAAWC,EAAO,aACpB,UAAA;AAAA,MAAA,CAACjB,KACA,gBAAAgB,EAAC,OAAA,EAAI,WAAWC,EAAO,YACrB,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAgB,MAAK,aAAY,OAAOX,EAAE,gBAAgB,GAAG,YAAU,IAAC;AAAA,QACzE,gBAAAU;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAOX,EAAE,cAAc;AAAA,YACvB,YAAU;AAAA,YACV,YAAY,CAACI;AAAA,UAAA;AAAA,QAAA;AAAA,MACf,GACF;AAAA,MAGF,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,gBACrB,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOX,EAAE,gBAAgB;AAAA,UACzB,aAAaR,IAAc,SAAYQ,EAAE,sBAAsB;AAAA,UAC/D,YAAU;AAAA,QAAA;AAAA,MAAA,GAEd;AAAA,MAEA,gBAAAU;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOZ,EAAE,gBAAgB;AAAA,UACzB,aAAaA,EAAE,sBAAsB;AAAA,UACrC,UAAUM;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,GACF;AAAA,IAEA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,SACrB,UAAA,gBAAAC,EAACb,GAAA,EAAO,MAAK,UAAS,YAAYH,GAC/B,UAAAM,EAAE,gBAAgB,GACrB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"PayPeriodDateFormPresentation.js","sources":["../../../../src/components/Payroll/PayPeriodDateForm/PayPeriodDateFormPresentation.tsx"],"sourcesContent":["import { useFormContext, useWatch } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport styles from './PayPeriodDateFormPresentation.module.scss'\nimport type {\n  PayPeriodDateFormData,\n  PayPeriodDateFormPresentationProps,\n} from './PayPeriodDateFormTypes'\nimport { useI18n } from '@/i18n'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { CheckboxField, DatePickerField } from '@/components/Common'\n\nexport function PayPeriodDateFormPresentation({\n  isCheckOnly,\n  onCheckOnlyChange,\n  isPending,\n}: Omit<PayPeriodDateFormPresentationProps, 'payrollType' | 'minCheckDate'>) {\n  const { Heading, Text, Button } = useComponentContext()\n  useI18n('Payroll.PayPeriodDateForm')\n  const { t } = useTranslation('Payroll.PayPeriodDateForm')\n  const { setValue } = useFormContext<PayPeriodDateFormData>()\n\n  const startDate = useWatch<PayPeriodDateFormData, 'startDate'>({ name: 'startDate' })\n\n  const handleCheckOnlyChange = (checked: boolean) => {\n    onCheckOnlyChange(checked)\n    if (checked) {\n      setValue('startDate', null)\n      setValue('endDate', null)\n    }\n  }\n\n  return (\n    <div className={styles.root}>\n      <div className={styles.sectionHeader}>\n        <Heading as=\"h2\">{t('pageTitle')}</Heading>\n        <Text variant=\"supporting\">{t('description')}</Text>\n      </div>\n\n      <div className={styles.formSection}>\n        {!isCheckOnly && (\n          <div className={styles.dateFields}>\n            <DatePickerField name=\"startDate\" label={t('startDateLabel')} isRequired />\n            <DatePickerField\n              name=\"endDate\"\n              label={t('endDateLabel')}\n              isRequired\n              isDisabled={!startDate}\n            />\n          </div>\n        )}\n\n        <div className={styles.checkDateField}>\n          <DatePickerField\n            name=\"checkDate\"\n            label={t('checkDateLabel')}\n            description={isCheckOnly ? undefined : t('checkDateDescription')}\n            isRequired\n          />\n        </div>\n\n        <CheckboxField\n          name=\"isCheckOnly\"\n          label={t('checkOnlyLabel')}\n          description={t('checkOnlyDescription')}\n          onChange={handleCheckOnlyChange}\n        />\n      </div>\n\n      <div className={styles.actions}>\n        <Button type=\"submit\" isDisabled={isPending}>\n          {t('continueButton')}\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"names":["PayPeriodDateFormPresentation","isCheckOnly","onCheckOnlyChange","isPending","Heading","Text","Button","useComponentContext","useI18n","t","useTranslation","setValue","useFormContext","startDate","useWatch","handleCheckOnlyChange","checked","jsxs","styles","jsx","DatePickerField","CheckboxField"],"mappings":";;;;;;;;;;AAWO,SAASA,EAA8B;AAAA,EAC5C,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AACF,GAA6E;AAC3E,QAAM,EAAE,SAAAC,GAAS,MAAAC,GAAM,QAAAC,EAAA,IAAWC,EAAA;AAClC,EAAAC,EAAQ,2BAA2B;AACnC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,2BAA2B,GAClD,EAAE,UAAAC,EAAA,IAAaC,EAAA,GAEfC,IAAYC,EAA6C,EAAE,MAAM,aAAa,GAE9EC,IAAwB,CAACC,MAAqB;AAClD,IAAAd,EAAkBc,CAAO,GACrBA,MACFL,EAAS,aAAa,IAAI,GAC1BA,EAAS,WAAW,IAAI;AAAA,EAE5B;AAEA,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,MACrB,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,eACrB,UAAA;AAAA,MAAA,gBAAAC,EAACf,GAAA,EAAQ,IAAG,MAAM,UAAAK,EAAE,WAAW,GAAE;AAAA,wBAChCJ,GAAA,EAAK,SAAQ,cAAc,UAAAI,EAAE,aAAa,EAAA,CAAE;AAAA,IAAA,GAC/C;AAAA,IAEA,gBAAAQ,EAAC,OAAA,EAAI,WAAWC,EAAO,aACpB,UAAA;AAAA,MAAA,CAACjB,KACA,gBAAAgB,EAAC,OAAA,EAAI,WAAWC,EAAO,YACrB,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAgB,MAAK,aAAY,OAAOX,EAAE,gBAAgB,GAAG,YAAU,IAAC;AAAA,QACzE,gBAAAU;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAOX,EAAE,cAAc;AAAA,YACvB,YAAU;AAAA,YACV,YAAY,CAACI;AAAA,UAAA;AAAA,QAAA;AAAA,MACf,GACF;AAAA,MAGF,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,gBACrB,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOX,EAAE,gBAAgB;AAAA,UACzB,aAAaR,IAAc,SAAYQ,EAAE,sBAAsB;AAAA,UAC/D,YAAU;AAAA,QAAA;AAAA,MAAA,GAEd;AAAA,MAEA,gBAAAU;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOZ,EAAE,gBAAgB;AAAA,UACzB,aAAaA,EAAE,sBAAsB;AAAA,UACrC,UAAUM;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,GACF;AAAA,IAEA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,SACrB,UAAA,gBAAAC,EAACb,GAAA,EAAO,MAAK,UAAS,YAAYH,GAC/B,UAAAM,EAAE,gBAAgB,GACrB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.js

@@ -4,10 +4,9 @@ import { getBlockerTranslationKeys as P } from "../payrollHelpers.js";
 import { useComponentContext as v } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { Flex as m } from "../../../Common/Flex/Flex.js";
 import "classnames";
-import "../../../../shared/constants.js";
 import "react";
 import { useI18n as D } from "../../../../i18n/I18n.js";
-function M({
+function H({
   blockers: o,
   onMultipleViewClick: i,
   multipleViewLabel: f,
@@ -50,6 +49,6 @@ function M({
   );
 }
 export {
-  M as PayrollBlockerAlerts
+  H as PayrollBlockerAlerts
 };
 //# sourceMappingURL=PayrollBlockerAlerts.js.map

package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollBlockerAlerts.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { type ApiPayrollBlocker, getBlockerTranslationKeys } from '../payrollHelpers'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex } from '@/components/Common'\nimport { useI18n } from '@/i18n'\n\ninterface PayrollBlockerAlertsProps {\n  blockers: ApiPayrollBlocker[]\n  className?: string\n  onMultipleViewClick?: () => void\n  multipleViewLabel?: string\n}\n\n/**\n * PayrollBlockerAlerts - Alert-style component for inline blocker display\n * Shows single blocker as alert, or multiple blockers as summary with \"Review\" button\n * Returns null for empty blocker arrays\n */\nexport function PayrollBlockerAlerts({\n  blockers,\n  onMultipleViewClick,\n  multipleViewLabel,\n  className,\n}: PayrollBlockerAlertsProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Alert, Button, Text, UnorderedList } = useComponentContext()\n\n  // Return null for empty blockers array\n  if (blockers.length === 0) {\n    return null\n  }\n\n  const hasMultipleBlockers = blockers.length > 1\n\n  const enrichedBlockers = blockers.map(blocker => {\n    const translationKeys = getBlockerTranslationKeys(blocker.key)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: t('defaultBlockerDescription'),\n    })\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n    const helpText = t(translationKeys.helpTextKey, { defaultValue: t('defaultBlockerHelp') })\n\n    return {\n      ...blocker,\n      title,\n      description,\n      helpText,\n    }\n  })\n\n  const singleBlocker = enrichedBlockers[0]\n\n  if (!hasMultipleBlockers && singleBlocker) {\n    return (\n      <Alert status=\"error\" label={singleBlocker.title} className={className}>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Text>{singleBlocker.description}</Text>\n          {singleBlocker.helpText && singleBlocker.helpText !== singleBlocker.description && (\n            <Text variant=\"supporting\" size=\"sm\">\n              {singleBlocker.helpText}\n            </Text>\n          )}\n        </Flex>\n      </Alert>\n    )\n  }\n\n  const listItems = enrichedBlockers.map(blocker => blocker.title)\n  const defaultMultipleLabel = multipleViewLabel || t('viewAllBlockers')\n\n  return (\n    <Alert\n      status=\"error\"\n      label={t('multipleIssuesTitle', { count: blockers.length })}\n      className={className}\n    >\n      <Flex flexDirection=\"column\" gap={16}>\n        <UnorderedList items={listItems} />\n        {onMultipleViewClick && (\n          <div>\n            <Button variant=\"secondary\" onClick={onMultipleViewClick} title={defaultMultipleLabel}>\n              {defaultMultipleLabel}\n            </Button>\n          </div>\n        )}\n      </Flex>\n    </Alert>\n  )\n}\n"],"names":["PayrollBlockerAlerts","blockers","onMultipleViewClick","multipleViewLabel","className","useI18n","t","useTranslation","Alert","Button","Text","UnorderedList","useComponentContext","hasMultipleBlockers","enrichedBlockers","blocker","translationKeys","getBlockerTranslationKeys","title","description","helpText","singleBlocker","jsx","jsxs","Flex","listItems","defaultMultipleLabel"],"mappings":";;;;;;;;;AAkBO,SAASA,EAAqB;AAAA,EACnC,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AACF,GAA8B;AAC5B,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,eAAAC,EAAA,IAAkBC,EAAA;AAG/C,MAAIX,EAAS,WAAW;AACtB,WAAO;AAGT,QAAMY,IAAsBZ,EAAS,SAAS,GAExCa,IAAmBb,EAAS,IAAI,CAAAc,MAAW;AAC/C,UAAMC,IAAkBC,EAA0BF,EAAQ,GAAG,GAEvDG,IAAQZ,EAAEU,EAAgB,UAAU;AAAA,MACxC,cAAcV,EAAE,2BAA2B;AAAA,IAAA,CAC5C,GACKa,IAAcb,EAAEU,EAAgB,gBAAgB;AAAA,MACpD,cAAcD,EAAQ,WAAWT,EAAE,2BAA2B;AAAA,IAAA,CAC/D,GACKc,IAAWd,EAAEU,EAAgB,aAAa,EAAE,cAAcV,EAAE,oBAAoB,GAAG;AAEzF,WAAO;AAAA,MACL,GAAGS;AAAA,MACH,OAAAG;AAAA,MACA,aAAAC;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,EAEJ,CAAC,GAEKC,IAAgBP,EAAiB,CAAC;AAExC,MAAI,CAACD,KAAuBQ;AAC1B,WACE,gBAAAC,EAACd,GAAA,EAAM,QAAO,SAAQ,OAAOa,EAAc,OAAO,WAAAjB,GAChD,UAAA,gBAAAmB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAF,EAACZ,GAAA,EAAM,YAAc,YAAA,CAAY;AAAA,MAChCW,EAAc,YAAYA,EAAc,aAAaA,EAAc,eAClE,gBAAAC,EAACZ,GAAA,EAAK,SAAQ,cAAa,MAAK,MAC7B,YAAc,SAAA,CACjB;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAIJ,QAAMe,IAAYX,EAAiB,IAAI,CAAAC,MAAWA,EAAQ,KAAK,GACzDW,IAAuBvB,KAAqBG,EAAE,iBAAiB;AAErE,SACE,gBAAAgB;AAAA,IAACd;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAOF,EAAE,uBAAuB,EAAE,OAAOL,EAAS,QAAQ;AAAA,MAC1D,WAAAG;AAAA,MAEA,UAAA,gBAAAmB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAF,EAACX,GAAA,EAAc,OAAOc,EAAA,CAAW;AAAA,QAChCvB,KACC,gBAAAoB,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACb,GAAA,EAAO,SAAQ,aAAY,SAASP,GAAqB,OAAOwB,GAC9D,UAAAA,EAAA,CACH,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"PayrollBlockerAlerts.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { type ApiPayrollBlocker, getBlockerTranslationKeys } from '../payrollHelpers'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex } from '@/components/Common'\nimport { useI18n } from '@/i18n'\n\ninterface PayrollBlockerAlertsProps {\n  blockers: ApiPayrollBlocker[]\n  className?: string\n  onMultipleViewClick?: () => void\n  multipleViewLabel?: string\n}\n\n/**\n * PayrollBlockerAlerts - Alert-style component for inline blocker display\n * Shows single blocker as alert, or multiple blockers as summary with \"Review\" button\n * Returns null for empty blocker arrays\n */\nexport function PayrollBlockerAlerts({\n  blockers,\n  onMultipleViewClick,\n  multipleViewLabel,\n  className,\n}: PayrollBlockerAlertsProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Alert, Button, Text, UnorderedList } = useComponentContext()\n\n  // Return null for empty blockers array\n  if (blockers.length === 0) {\n    return null\n  }\n\n  const hasMultipleBlockers = blockers.length > 1\n\n  const enrichedBlockers = blockers.map(blocker => {\n    const translationKeys = getBlockerTranslationKeys(blocker.key)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: t('defaultBlockerDescription'),\n    })\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n    const helpText = t(translationKeys.helpTextKey, { defaultValue: t('defaultBlockerHelp') })\n\n    return {\n      ...blocker,\n      title,\n      description,\n      helpText,\n    }\n  })\n\n  const singleBlocker = enrichedBlockers[0]\n\n  if (!hasMultipleBlockers && singleBlocker) {\n    return (\n      <Alert status=\"error\" label={singleBlocker.title} className={className}>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Text>{singleBlocker.description}</Text>\n          {singleBlocker.helpText && singleBlocker.helpText !== singleBlocker.description && (\n            <Text variant=\"supporting\" size=\"sm\">\n              {singleBlocker.helpText}\n            </Text>\n          )}\n        </Flex>\n      </Alert>\n    )\n  }\n\n  const listItems = enrichedBlockers.map(blocker => blocker.title)\n  const defaultMultipleLabel = multipleViewLabel || t('viewAllBlockers')\n\n  return (\n    <Alert\n      status=\"error\"\n      label={t('multipleIssuesTitle', { count: blockers.length })}\n      className={className}\n    >\n      <Flex flexDirection=\"column\" gap={16}>\n        <UnorderedList items={listItems} />\n        {onMultipleViewClick && (\n          <div>\n            <Button variant=\"secondary\" onClick={onMultipleViewClick} title={defaultMultipleLabel}>\n              {defaultMultipleLabel}\n            </Button>\n          </div>\n        )}\n      </Flex>\n    </Alert>\n  )\n}\n"],"names":["PayrollBlockerAlerts","blockers","onMultipleViewClick","multipleViewLabel","className","useI18n","t","useTranslation","Alert","Button","Text","UnorderedList","useComponentContext","hasMultipleBlockers","enrichedBlockers","blocker","translationKeys","getBlockerTranslationKeys","title","description","helpText","singleBlocker","jsx","jsxs","Flex","listItems","defaultMultipleLabel"],"mappings":";;;;;;;;AAkBO,SAASA,EAAqB;AAAA,EACnC,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AACF,GAA8B;AAC5B,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,eAAAC,EAAA,IAAkBC,EAAA;AAG/C,MAAIX,EAAS,WAAW;AACtB,WAAO;AAGT,QAAMY,IAAsBZ,EAAS,SAAS,GAExCa,IAAmBb,EAAS,IAAI,CAAAc,MAAW;AAC/C,UAAMC,IAAkBC,EAA0BF,EAAQ,GAAG,GAEvDG,IAAQZ,EAAEU,EAAgB,UAAU;AAAA,MACxC,cAAcV,EAAE,2BAA2B;AAAA,IAAA,CAC5C,GACKa,IAAcb,EAAEU,EAAgB,gBAAgB;AAAA,MACpD,cAAcD,EAAQ,WAAWT,EAAE,2BAA2B;AAAA,IAAA,CAC/D,GACKc,IAAWd,EAAEU,EAAgB,aAAa,EAAE,cAAcV,EAAE,oBAAoB,GAAG;AAEzF,WAAO;AAAA,MACL,GAAGS;AAAA,MACH,OAAAG;AAAA,MACA,aAAAC;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,EAEJ,CAAC,GAEKC,IAAgBP,EAAiB,CAAC;AAExC,MAAI,CAACD,KAAuBQ;AAC1B,WACE,gBAAAC,EAACd,GAAA,EAAM,QAAO,SAAQ,OAAOa,EAAc,OAAO,WAAAjB,GAChD,UAAA,gBAAAmB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAF,EAACZ,GAAA,EAAM,YAAc,YAAA,CAAY;AAAA,MAChCW,EAAc,YAAYA,EAAc,aAAaA,EAAc,eAClE,gBAAAC,EAACZ,GAAA,EAAK,SAAQ,cAAa,MAAK,MAC7B,YAAc,SAAA,CACjB;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAIJ,QAAMe,IAAYX,EAAiB,IAAI,CAAAC,MAAWA,EAAQ,KAAK,GACzDW,IAAuBvB,KAAqBG,EAAE,iBAAiB;AAErE,SACE,gBAAAgB;AAAA,IAACd;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAOF,EAAE,uBAAuB,EAAE,OAAOL,EAAS,QAAQ;AAAA,MAC1D,WAAAG;AAAA,MAEA,UAAA,gBAAAmB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAF,EAACX,GAAA,EAAc,OAAOc,EAAA,CAAW;AAAA,QAChCvB,KACC,gBAAAoB,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACb,GAAA,EAAO,SAAQ,aAAY,SAASP,GAAqB,OAAOwB,GAC9D,UAAAA,EAAA,CACH,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerList.js

@@ -10,19 +10,19 @@ import { getBlockerTranslationKeys as G } from "../payrollHelpers.js";
 import B from "./PayrollBlockerList.module.scss.js";
 import { useComponentContext as M } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { FlexItem as j, Flex as a } from "../../../Common/Flex/Flex.js";
-import { recoveryCasesEvents as $, informationRequestEvents as H } from "../../../../shared/constants.js";
-import { DataView as Q } from "../../../Common/DataView/DataView.js";
-import { useDataView as Y } from "../../../Common/DataView/useDataView.js";
-import { useComponentDictionary as z, useI18n as J } from "../../../../i18n/I18n.js";
-import { RecoveryCases as W } from "../../RecoveryCases/RecoveryCases.js";
-import { BaseComponent as X } from "../../../Base/Base.js";
+import { DataView as $ } from "../../../Common/DataView/DataView.js";
+import { useDataView as H } from "../../../Common/DataView/useDataView.js";
+import { useComponentDictionary as Q, useI18n as Y } from "../../../../i18n/I18n.js";
+import { RecoveryCases as z } from "../../RecoveryCases/RecoveryCases.js";
+import { BaseComponent as J } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
+import { recoveryCasesEvents as W, informationRequestEvents as X } from "../../../../shared/constants.js";
 import { InformationRequestsFlow as Z } from "../../../InformationRequests/InformationRequests.js";
 function be(s) {
-  return /* @__PURE__ */ o(X, { ...s, children: /* @__PURE__ */ o(ee, { ...s, children: s.children }) });
+  return /* @__PURE__ */ o(J, { ...s, children: /* @__PURE__ */ o(ee, { ...s, children: s.children }) });
 }
 function ee({ className: s, companyId: n, dictionary: g, onEvent: u }) {
-  z("Payroll.PayrollBlocker", g), J("Payroll.PayrollBlocker");
+  Q("Payroll.PayrollBlocker", g), Y("Payroll.PayrollBlocker");
   const { t: r } = N("Payroll.PayrollBlocker"), { Button: v, Text: i, Heading: b, Alert: D } = M(), [x, f] = _({
     id: 0,
     alerts: []
@@ -38,7 +38,7 @@ function ee({ className: s, companyId: n, dictionary: g, onEvent: u }) {
     }));
   }, []), p = d(
     (e, t) => {
-      e === $.RECOVERY_CASE_RESUBMIT_DONE && c("recoveryCaseResubmitted"), e === H.INFORMATION_REQUEST_FORM_DONE && c("informationRequestResponded"), u(e, t);
+      e === W.RECOVERY_CASE_RESUBMIT_DONE && c("recoveryCaseResubmitted"), e === X.INFORMATION_REQUEST_FORM_DONE && c("informationRequestResponded"), u(e, t);
     },
     [u, c]
   ), { data: A } = O({
@@ -62,7 +62,7 @@ function ee({ className: s, companyId: n, dictionary: g, onEvent: u }) {
     (e) => e.status !== "recovered"
   ), k = w.some(
     (e) => e.blockingPayroll && e.status !== K.Approved
-  ), L = Y({
+  ), L = H({
     data: y,
     columns: [
       {
@@ -96,9 +96,9 @@ function ee({ className: s, companyId: n, dictionary: g, onEvent: u }) {
     )),
     C && /* @__PURE__ */ m(a, { flexDirection: "column", gap: 20, children: [
       /* @__PURE__ */ o(b, { as: "h2", styledAs: "h4", children: r("blockersListTitle") }),
-      /* @__PURE__ */ o(Q, { ...L, label: r("blockersListTitle") })
+      /* @__PURE__ */ o($, { ...L, label: r("blockersListTitle") })
     ] }),
-    h && /* @__PURE__ */ o(W, { companyId: n, onEvent: p }),
+    h && /* @__PURE__ */ o(z, { companyId: n, onEvent: p }),
     k && /* @__PURE__ */ o(
       Z,
       {

package/dist/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.js

@@ -7,6 +7,7 @@ import Q from "./PayrollConfigurationPresentation.module.scss.js";
 import { useI18n as Y } from "../../../i18n/I18n.js";
 import { Flex as u, FlexItem as g } from "../../Common/Flex/Flex.js";
 import { Grid as Z } from "../../Common/Grid/Grid.js";
+import "classnames";
 import { HamburgerMenu as $ } from "../../Common/HamburgerMenu/HamburgerMenu.js";
 import { useComponentContext as ee } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import te from "../../../assets/icons/pencil.svg.js";
@@ -17,7 +18,7 @@ import { useDateFormatter as ie } from "../../../hooks/useDateFormatter.js";
 import { useContainerBreakpoints as le } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
 import { PayrollLoading as ae } from "../../Common/PayrollLoading/PayrollLoading.js";
 import { DataView as se } from "../../Common/DataView/DataView.js";
-const me = (i, p) => i?.startDate && i.endDate ? p.formatPayPeriod(i.startDate, i.endDate) : { startDate: "", endDate: "" }, Re = ({
+const me = (i, p) => i?.startDate && i.endDate ? p.formatPayPeriod(i.startDate, i.endDate) : { startDate: "", endDate: "" }, Fe = ({
   employeeCompensations: i,
   employeeDetails: p,
   payPeriod: h,
@@ -198,6 +199,6 @@ const me = (i, p) => i?.startDate && i.endDate ? p.formatPayPeriod(i.startDate,
   ] }) });
 };
 export {
-  Re as PayrollConfigurationPresentation
+  Fe as PayrollConfigurationPresentation
 };
 //# sourceMappingURL=PayrollConfigurationPresentation.js.map

package/dist/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useRef } from 'react'\nimport type { EmployeeCompensations } from '@gusto/embedded-api/models/components/payroll'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype'\nimport type { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject'\nimport { Trans, useTranslation } from 'react-i18next'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getOvertimeHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'\nimport styles from './PayrollConfigurationPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { DataView, Flex, FlexItem, Grid, PayrollLoading } from '@/components/Common'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport XCircle from '@/assets/icons/x-circle.svg?react'\nimport PlusCircle from '@/assets/icons/plus-circle.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\ninterface PayrollConfigurationPresentationProps {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod?: PayrollPayPeriodType\n  paySchedule?: PayScheduleObject\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n  onToggleExclude: (employeeCompensation: PayrollEmployeeCompensationsType) => void\n  onViewBlockers: () => void\n  isOffCycle?: boolean\n  alerts?: ReactNode\n  payrollAlert?: {\n    label: string\n    content?: ReactNode\n    variant: 'info' | 'warning'\n  }\n  isPending?: boolean\n  isCalculating?: boolean\n  payrollBlockers?: ApiPayrollBlocker[]\n  pagination?: PaginationControlProps\n  withReimbursements?: boolean\n  isCalculateDisabled?: boolean\n}\n\nconst getPayrollConfigurationTitle = (\n  payPeriod: PayrollPayPeriodType | undefined,\n  dateFormatter: ReturnType<typeof useDateFormatter>,\n) => {\n  if (payPeriod?.startDate && payPeriod.endDate) {\n    return dateFormatter.formatPayPeriod(payPeriod.startDate, payPeriod.endDate)\n  }\n  return { startDate: '', endDate: '' }\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employeeCompensations,\n  employeeDetails,\n  payPeriod,\n  paySchedule,\n  onEdit,\n  onToggleExclude,\n  onCalculatePayroll,\n  onViewBlockers,\n  isOffCycle = false,\n  alerts,\n  payrollAlert,\n  isPending,\n  isCalculating,\n  payrollBlockers = [],\n  pagination,\n  withReimbursements = true,\n  isCalculateDisabled = false,\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge, Alert } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const dateFormatter = useDateFormatter()\n  const formatEmployeePayRate = useFormatEmployeePayRate()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const isDesktop = breakpoints.includes('small')\n\n  const employeeMap = new Map(employeeDetails.map(employee => [employee.uuid, employee]))\n\n  const getEmployeeName = (employeeUuid: string) => {\n    const employee = employeeMap.get(employeeUuid)\n    return employee\n      ? firstLastName({ first_name: employee.firstName, last_name: employee.lastName })\n      : null\n  }\n\n  return (\n    <div ref={containerRef} className={styles.container}>\n      <Flex flexDirection=\"column\" gap={32}>\n        <Flex\n          flexDirection={isDesktop ? 'row' : 'column'}\n          justifyContent={isDesktop ? 'space-between' : 'normal'}\n          alignItems={isDesktop ? 'center' : 'stretch'}\n          gap={isDesktop ? 0 : 16}\n        >\n          <FlexItem>\n            <Heading as=\"h1\">{t('pageTitle')}</Heading>\n            <Text variant=\"supporting\">\n              <Trans\n                i18nKey=\"description\"\n                t={t}\n                components={{ dateWrapper: <Text weight=\"bold\" as=\"span\" /> }}\n                values={getPayrollConfigurationTitle(payPeriod, dateFormatter)}\n              />\n            </Text>\n          </FlexItem>\n          <FlexItem flexGrow={isDesktop ? 0 : 0}>\n            {isDesktop ? (\n              <Button\n                title={t('calculatePayrollTitle')}\n                onClick={onCalculatePayroll}\n                isDisabled={isCalculateDisabled || isPending || isCalculating}\n              >\n                {isCalculating ? t('calculatingPayroll') : t('calculatePayroll')}\n              </Button>\n            ) : (\n              <Flex flexDirection=\"column\" justifyContent=\"normal\" alignItems=\"stretch\" gap={12}>\n                <Button\n                  title={t('calculatePayrollTitle')}\n                  onClick={onCalculatePayroll}\n                  isDisabled={isCalculateDisabled || isPending || isCalculating}\n                >\n                  {isCalculating ? t('calculatingPayroll') : t('calculatePayroll')}\n                </Button>\n              </Flex>\n            )}\n          </FlexItem>\n        </Flex>\n\n        {(alerts || payrollAlert) && (\n          <Grid gap={16} gridTemplateColumns=\"1fr\">\n            {payrollAlert && (\n              <Alert label={payrollAlert.label} status={payrollAlert.variant}>\n                {payrollAlert.content}\n              </Alert>\n            )}\n            {alerts}\n          </Grid>\n        )}\n\n        {isPending ? (\n          <PayrollLoading\n            title={isCalculating ? t('calculatingTitle') : t('loadingTitle')}\n            description={isCalculating ? t('calculatingDescription') : t('loadingDescription')}\n          />\n        ) : (\n          <>\n            {payrollBlockers.length > 0 && (\n              <PayrollBlockerAlerts\n                blockers={payrollBlockers}\n                onMultipleViewClick={onViewBlockers}\n              />\n            )}\n            <Flex flexDirection=\"column\" gap={20}>\n              <FlexItem>\n                <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n                <Text variant=\"supporting\">{t('hoursAndEarningsDescription')}</Text>\n              </FlexItem>\n\n              <DataView\n                label={t('employeeCompensationsTitle')}\n                columns={[\n                  {\n                    title: t('tableColumns.employees'),\n                    render: (item: EmployeeCompensations) => {\n                      const employee = employeeMap.get(item.employeeUuid || '')\n                      const payRateDisplay = formatEmployeePayRate(employee)\n                      return (\n                        <Flex flexDirection=\"column\" gap={0}>\n                          {getEmployeeName(item.employeeUuid || '')}\n                          {payRateDisplay && (\n                            <Text size=\"xs\" variant=\"supporting\">\n                              {payRateDisplay}\n                            </Text>\n                          )}\n                          {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                        </Flex>\n                      )\n                    },\n                  },\n                  {\n                    title: t('tableColumns.hours'),\n                    render: (item: EmployeeCompensations) => {\n                      const hours = getRegularHours(item)\n                      const overtimeHours = getOvertimeHours(item)\n                      return formatHoursDisplay(hours + overtimeHours)\n                    },\n                  },\n                  {\n                    title: t('tableColumns.timeOff'),\n                    render: (item: EmployeeCompensations) => {\n                      const ptoHours = getTotalPtoHours(item)\n                      return formatHoursDisplay(ptoHours)\n                    },\n                  },\n                  {\n                    title: t('tableColumns.additionalEarnings'),\n                    render: (item: EmployeeCompensations) => {\n                      const earnings = getAdditionalEarnings(item)\n                      return formatNumberAsCurrency(earnings)\n                    },\n                  },\n                  ...(withReimbursements\n                    ? [\n                        {\n                          title: t('tableColumns.reimbursements'),\n                          render: (item: EmployeeCompensations) => {\n                            const reimbursements = getReimbursements(item)\n                            return formatNumberAsCurrency(reimbursements)\n                          },\n                        },\n                      ]\n                    : []),\n                  {\n                    title: t('tableColumns.totalPay'),\n                    render: (item: PayrollEmployeeCompensationsType) => {\n                      const employee = employeeMap.get(item.employeeUuid || '')\n                      const calculatedGrossPay = employee\n                        ? calculateGrossPay(\n                            item,\n                            employee,\n                            payPeriod?.startDate,\n                            paySchedule,\n                            isOffCycle,\n                          )\n                        : 0\n                      return formatNumberAsCurrency(calculatedGrossPay)\n                    },\n                  },\n                ]}\n                data={employeeCompensations}\n                itemMenu={(item: EmployeeCompensations) => (\n                  <HamburgerMenu\n                    items={[\n                      {\n                        label: t('editMenu.edit'),\n                        icon: <PencilSvg aria-hidden />,\n                        onClick: () => {\n                          const employee = employeeMap.get(item.employeeUuid || '')\n                          if (employee) {\n                            onEdit(employee)\n                          }\n                        },\n                      },\n                      {\n                        label: t(item.excluded ? 'editMenu.unskip' : 'editMenu.skip'),\n                        icon: item.excluded ? <PlusCircle aria-hidden /> : <XCircle aria-hidden />,\n                        onClick: () => {\n                          const employee = employeeMap.get(item.employeeUuid || '')\n                          if (employee) {\n                            onToggleExclude(item)\n                          }\n                        },\n                      },\n                    ]}\n                    triggerLabel={t('editMenu.edit')}\n                  />\n                )}\n                pagination={pagination}\n              />\n            </Flex>\n          </>\n        )}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","dateFormatter","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onEdit","onToggleExclude","onCalculatePayroll","onViewBlockers","isOffCycle","alerts","payrollAlert","isPending","isCalculating","payrollBlockers","pagination","withReimbursements","isCalculateDisabled","Button","Heading","Text","Badge","Alert","useComponentContext","useI18n","useTranslation","useDateFormatter","formatEmployeePayRate","useFormatEmployeePayRate","containerRef","useRef","isDesktop","useContainerBreakpoints","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsx","styles","jsxs","Flex","FlexItem","Trans","Grid","PayrollLoading","Fragment","PayrollBlockerAlerts","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","HamburgerMenu","PencilSvg","PlusCircle","XCircle"],"mappings":"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"}
+{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useRef } from 'react'\nimport type { EmployeeCompensations } from '@gusto/embedded-api/models/components/payroll'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype'\nimport type { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject'\nimport { Trans, useTranslation } from 'react-i18next'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getOvertimeHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'\nimport styles from './PayrollConfigurationPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { DataView, Flex, FlexItem, Grid, PayrollLoading } from '@/components/Common'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport XCircle from '@/assets/icons/x-circle.svg?react'\nimport PlusCircle from '@/assets/icons/plus-circle.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\ninterface PayrollConfigurationPresentationProps {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod?: PayrollPayPeriodType\n  paySchedule?: PayScheduleObject\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n  onToggleExclude: (employeeCompensation: PayrollEmployeeCompensationsType) => void\n  onViewBlockers: () => void\n  isOffCycle?: boolean\n  alerts?: ReactNode\n  payrollAlert?: {\n    label: string\n    content?: ReactNode\n    variant: 'info' | 'warning'\n  }\n  isPending?: boolean\n  isCalculating?: boolean\n  payrollBlockers?: ApiPayrollBlocker[]\n  pagination?: PaginationControlProps\n  withReimbursements?: boolean\n  isCalculateDisabled?: boolean\n}\n\nconst getPayrollConfigurationTitle = (\n  payPeriod: PayrollPayPeriodType | undefined,\n  dateFormatter: ReturnType<typeof useDateFormatter>,\n) => {\n  if (payPeriod?.startDate && payPeriod.endDate) {\n    return dateFormatter.formatPayPeriod(payPeriod.startDate, payPeriod.endDate)\n  }\n  return { startDate: '', endDate: '' }\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employeeCompensations,\n  employeeDetails,\n  payPeriod,\n  paySchedule,\n  onEdit,\n  onToggleExclude,\n  onCalculatePayroll,\n  onViewBlockers,\n  isOffCycle = false,\n  alerts,\n  payrollAlert,\n  isPending,\n  isCalculating,\n  payrollBlockers = [],\n  pagination,\n  withReimbursements = true,\n  isCalculateDisabled = false,\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge, Alert } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const dateFormatter = useDateFormatter()\n  const formatEmployeePayRate = useFormatEmployeePayRate()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const isDesktop = breakpoints.includes('small')\n\n  const employeeMap = new Map(employeeDetails.map(employee => [employee.uuid, employee]))\n\n  const getEmployeeName = (employeeUuid: string) => {\n    const employee = employeeMap.get(employeeUuid)\n    return employee\n      ? firstLastName({ first_name: employee.firstName, last_name: employee.lastName })\n      : null\n  }\n\n  return (\n    <div ref={containerRef} className={styles.container}>\n      <Flex flexDirection=\"column\" gap={32}>\n        <Flex\n          flexDirection={isDesktop ? 'row' : 'column'}\n          justifyContent={isDesktop ? 'space-between' : 'normal'}\n          alignItems={isDesktop ? 'center' : 'stretch'}\n          gap={isDesktop ? 0 : 16}\n        >\n          <FlexItem>\n            <Heading as=\"h1\">{t('pageTitle')}</Heading>\n            <Text variant=\"supporting\">\n              <Trans\n                i18nKey=\"description\"\n                t={t}\n                components={{ dateWrapper: <Text weight=\"bold\" as=\"span\" /> }}\n                values={getPayrollConfigurationTitle(payPeriod, dateFormatter)}\n              />\n            </Text>\n          </FlexItem>\n          <FlexItem flexGrow={isDesktop ? 0 : 0}>\n            {isDesktop ? (\n              <Button\n                title={t('calculatePayrollTitle')}\n                onClick={onCalculatePayroll}\n                isDisabled={isCalculateDisabled || isPending || isCalculating}\n              >\n                {isCalculating ? t('calculatingPayroll') : t('calculatePayroll')}\n              </Button>\n            ) : (\n              <Flex flexDirection=\"column\" justifyContent=\"normal\" alignItems=\"stretch\" gap={12}>\n                <Button\n                  title={t('calculatePayrollTitle')}\n                  onClick={onCalculatePayroll}\n                  isDisabled={isCalculateDisabled || isPending || isCalculating}\n                >\n                  {isCalculating ? t('calculatingPayroll') : t('calculatePayroll')}\n                </Button>\n              </Flex>\n            )}\n          </FlexItem>\n        </Flex>\n\n        {(alerts || payrollAlert) && (\n          <Grid gap={16} gridTemplateColumns=\"1fr\">\n            {payrollAlert && (\n              <Alert label={payrollAlert.label} status={payrollAlert.variant}>\n                {payrollAlert.content}\n              </Alert>\n            )}\n            {alerts}\n          </Grid>\n        )}\n\n        {isPending ? (\n          <PayrollLoading\n            title={isCalculating ? t('calculatingTitle') : t('loadingTitle')}\n            description={isCalculating ? t('calculatingDescription') : t('loadingDescription')}\n          />\n        ) : (\n          <>\n            {payrollBlockers.length > 0 && (\n              <PayrollBlockerAlerts\n                blockers={payrollBlockers}\n                onMultipleViewClick={onViewBlockers}\n              />\n            )}\n            <Flex flexDirection=\"column\" gap={20}>\n              <FlexItem>\n                <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n                <Text variant=\"supporting\">{t('hoursAndEarningsDescription')}</Text>\n              </FlexItem>\n\n              <DataView\n                label={t('employeeCompensationsTitle')}\n                columns={[\n                  {\n                    title: t('tableColumns.employees'),\n                    render: (item: EmployeeCompensations) => {\n                      const employee = employeeMap.get(item.employeeUuid || '')\n                      const payRateDisplay = formatEmployeePayRate(employee)\n                      return (\n                        <Flex flexDirection=\"column\" gap={0}>\n                          {getEmployeeName(item.employeeUuid || '')}\n                          {payRateDisplay && (\n                            <Text size=\"xs\" variant=\"supporting\">\n                              {payRateDisplay}\n                            </Text>\n                          )}\n                          {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                        </Flex>\n                      )\n                    },\n                  },\n                  {\n                    title: t('tableColumns.hours'),\n                    render: (item: EmployeeCompensations) => {\n                      const hours = getRegularHours(item)\n                      const overtimeHours = getOvertimeHours(item)\n                      return formatHoursDisplay(hours + overtimeHours)\n                    },\n                  },\n                  {\n                    title: t('tableColumns.timeOff'),\n                    render: (item: EmployeeCompensations) => {\n                      const ptoHours = getTotalPtoHours(item)\n                      return formatHoursDisplay(ptoHours)\n                    },\n                  },\n                  {\n                    title: t('tableColumns.additionalEarnings'),\n                    render: (item: EmployeeCompensations) => {\n                      const earnings = getAdditionalEarnings(item)\n                      return formatNumberAsCurrency(earnings)\n                    },\n                  },\n                  ...(withReimbursements\n                    ? [\n                        {\n                          title: t('tableColumns.reimbursements'),\n                          render: (item: EmployeeCompensations) => {\n                            const reimbursements = getReimbursements(item)\n                            return formatNumberAsCurrency(reimbursements)\n                          },\n                        },\n                      ]\n                    : []),\n                  {\n                    title: t('tableColumns.totalPay'),\n                    render: (item: PayrollEmployeeCompensationsType) => {\n                      const employee = employeeMap.get(item.employeeUuid || '')\n                      const calculatedGrossPay = employee\n                        ? calculateGrossPay(\n                            item,\n                            employee,\n                            payPeriod?.startDate,\n                            paySchedule,\n                            isOffCycle,\n                          )\n                        : 0\n                      return formatNumberAsCurrency(calculatedGrossPay)\n                    },\n                  },\n                ]}\n                data={employeeCompensations}\n                itemMenu={(item: EmployeeCompensations) => (\n                  <HamburgerMenu\n                    items={[\n                      {\n                        label: t('editMenu.edit'),\n                        icon: <PencilSvg aria-hidden />,\n                        onClick: () => {\n                          const employee = employeeMap.get(item.employeeUuid || '')\n                          if (employee) {\n                            onEdit(employee)\n                          }\n                        },\n                      },\n                      {\n                        label: t(item.excluded ? 'editMenu.unskip' : 'editMenu.skip'),\n                        icon: item.excluded ? <PlusCircle aria-hidden /> : <XCircle aria-hidden />,\n                        onClick: () => {\n                          const employee = employeeMap.get(item.employeeUuid || '')\n                          if (employee) {\n                            onToggleExclude(item)\n                          }\n                        },\n                      },\n                    ]}\n                    triggerLabel={t('editMenu.edit')}\n                  />\n                )}\n                pagination={pagination}\n              />\n            </Flex>\n          </>\n        )}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","dateFormatter","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onEdit","onToggleExclude","onCalculatePayroll","onViewBlockers","isOffCycle","alerts","payrollAlert","isPending","isCalculating","payrollBlockers","pagination","withReimbursements","isCalculateDisabled","Button","Heading","Text","Badge","Alert","useComponentContext","useI18n","useTranslation","useDateFormatter","formatEmployeePayRate","useFormatEmployeePayRate","containerRef","useRef","isDesktop","useContainerBreakpoints","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsx","styles","jsxs","Flex","FlexItem","Trans","Grid","PayrollLoading","Fragment","PayrollBlockerAlerts","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","HamburgerMenu","PencilSvg","PlusCircle","XCircle"],"mappings":"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"}