@gusto/embedded-react-sdk 0.52.1 → 0.53.0

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/Payroll/ConfirmWireDetails/ConfirmWireDetailsForm/ConfirmWireDetailsForm.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import { useTranslation as F, Trans as A } from "react-i18next";
 import r from "zod";
-import { useForm as _, FormProvider as O } from "react-hook-form";
-import { zodResolver as T } from "@hookform/resolvers/zod";
-import { useIsMutating as E } from "@tanstack/react-query";
+import { useForm as _, FormProvider as T } from "react-hook-form";
+import { zodResolver as E } from "@hookform/resolvers/zod";
+import { useIsMutating as O } from "@tanstack/react-query";
 import { useWireInRequestsSubmitMutation as U, mutationKeyWireInRequestsSubmit as j } from "@gusto/embedded-api/react-query/wireInRequestsSubmit";
 import { useWireInRequestsGetSuspense as B } from "@gusto/embedded-api/react-query/wireInRequestsGet";
 import { usePayrollsListSuspense as G } from "@gusto/embedded-api/react-query/payrollsList";
@@ -11,62 +11,62 @@ import d from "./ConfirmWireDetailsForm.module.scss.js";
 import { Form as H } from "../../../Common/Form/Form.js";
 import { BaseComponent as K } from "../../../Base/Base.js";
 import { useBase as Y } from "../../../Base/useBase.js";
-import { useComponentContext as S } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useComponentDictionary as z, useI18n as g } from "../../../../i18n/I18n.js";
+import { useComponentContext as g } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useComponentDictionary as z, useI18n as N } from "../../../../i18n/I18n.js";
 import { Flex as p, FlexItem as f } from "../../../Common/Flex/Flex.js";
-import { payrollWireEvents as I } from "../../../../shared/constants.js";
-import "react";
+import { payrollWireEvents as S } from "../../../../shared/constants.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 { DatePickerField as X } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
-import { TextInputField as Z } from "../../../Common/Fields/TextInputField/TextInputField.js";
-const $ = r.object({
+import { formatDateToStringDate as Q } from "../../../../helpers/dateFormatting.js";
+import { NumberInputField as X } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
+import { DatePickerField as Z } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
+import { TextInputField as $ } from "../../../Common/Fields/TextInputField/TextInputField.js";
+const ee = r.object({
   amountSent: r.number().positive(),
   dateSent: r.date(),
   bankName: r.string().min(1),
   additionalNotes: r.string().optional()
-}), N = "confirm-wire-details-form", ee = (o) => ({
+}), C = "confirm-wire-details-form", te = (o) => ({
   amountSent: String(o.amountSent),
-  dateSent: o.dateSent.toISOString().split("T")[0] || "",
+  dateSent: Q(o.dateSent) ?? "",
   bankName: o.bankName,
   additionalNotes: o.additionalNotes || void 0
 });
-function te(o) {
-  return /* @__PURE__ */ e(K, { ...o, children: /* @__PURE__ */ e(oe, { ...o, children: o.children }) });
+function oe(o) {
+  return /* @__PURE__ */ e(K, { ...o, children: /* @__PURE__ */ e(re, { ...o, children: o.children }) });
 }
-const oe = ({
+const re = ({
   wireInId: o,
   companyId: n,
   dictionary: i,
   modalContainerRef: y
 }) => {
-  z("Payroll.ConfirmWireDetailsForm", i), g("Payroll.ConfirmWireDetailsForm");
-  const { onEvent: a, baseSubmitHandler: C } = Y(), { t } = F("Payroll.ConfirmWireDetailsForm"), { Heading: v, Text: b } = S(), R = J(), { data: P } = B({
+  z("Payroll.ConfirmWireDetailsForm", i), N("Payroll.ConfirmWireDetailsForm");
+  const { onEvent: a, baseSubmitHandler: I } = Y(), { t } = F("Payroll.ConfirmWireDetailsForm"), { Heading: v, Text: b } = g(), R = J(), { data: P } = B({
     wireInRequestUuid: o
   }), q = P.wireInRequest, { data: W } = G({
     companyId: n,
     processed: !0
   }), l = W.payrollList?.find(
     (u) => u.payrollUuid === q?.paymentUuid
-  ), s = l?.payPeriod, c = s?.startDate && s.endDate ? R.formatPayPeriodRange(s.startDate, s.endDate) : void 0, h = l ? R.formatShortWithYear(l.checkDate) : void 0, D = _({
-    resolver: T($),
+  ), s = l?.payPeriod, c = s?.startDate && s.endDate ? R.formatPayPeriodRange(s.startDate, s.endDate) : void 0, D = l ? R.formatShortWithYear(l.checkDate) : void 0, h = _({
+    resolver: E(ee),
     defaultValues: {
       bankName: ""
     }
   }), { mutateAsync: k } = U(), x = async (u) => {
-    await C(u, async (w) => {
-      const L = ee(w), M = await k({
+    await I(u, async (w) => {
+      const L = te(w), M = await k({
         request: {
           wireInRequestUuid: o,
           wireInRequestUpdateRequestBody: L
         }
       });
-      a(I.PAYROLL_WIRE_FORM_DONE, {
+      a(S.PAYROLL_WIRE_FORM_DONE, {
         wireInRequest: M.wireInRequest,
         confirmationAlert: {
           title: c ? t("confirmationAlert.title", { payrollRange: c }) : t("confirmationAlert.emptyTitle"),
-          content: h ? /* @__PURE__ */ e(b, { children: t("confirmationAlert.content", { checkDate: h }) }) : void 0
+          content: D ? /* @__PURE__ */ e(b, { children: t("confirmationAlert.content", { checkDate: D }) }) : void 0
         }
       });
     });
@@ -76,15 +76,15 @@ const oe = ({
       /* @__PURE__ */ e(v, { as: "h2", children: /* @__PURE__ */ e(A, { i18nKey: "title", t, values: { payrollRange: c } }) }),
       /* @__PURE__ */ e(b, { children: t("description") })
     ] }),
-    /* @__PURE__ */ e(O, { ...D, children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(T, { ...h, children: /* @__PURE__ */ e(
       H,
       {
-        id: N,
-        onSubmit: D.handleSubmit(x),
+        id: C,
+        onSubmit: h.handleSubmit(x),
         className: d.form,
         children: /* @__PURE__ */ m(p, { flexDirection: "column", gap: 20, children: [
           /* @__PURE__ */ e(
-            Q,
+            X,
             {
               name: "amountSent",
               label: t("amountLabel"),
@@ -94,7 +94,7 @@ const oe = ({
             }
           ),
           /* @__PURE__ */ e(
-            X,
+            Z,
             {
               name: "dateSent",
               label: t("dateLabel"),
@@ -104,7 +104,7 @@ const oe = ({
             }
           ),
           /* @__PURE__ */ e(
-            Z,
+            $,
             {
               name: "bankName",
               label: t("bankNameLabel"),
@@ -119,9 +119,9 @@ const oe = ({
       }
     ) })
   ] });
-}, re = ({ onEvent: o }) => {
-  g("Payroll.ConfirmWireDetailsForm");
-  const { t: n } = F("Payroll.ConfirmWireDetailsForm"), { Button: i } = S(), a = E({
+}, ne = ({ onEvent: o }) => {
+  N("Payroll.ConfirmWireDetailsForm");
+  const { t: n } = F("Payroll.ConfirmWireDetailsForm"), { Button: i } = g(), a = O({
     mutationKey: j()
   }) > 0;
   return /* @__PURE__ */ m(p, { gap: 12, justifyContent: "space-evenly", children: [
@@ -130,7 +130,7 @@ const oe = ({
       {
         variant: "secondary",
         onClick: () => {
-          o(I.PAYROLL_WIRE_FORM_CANCEL);
+          o(S.PAYROLL_WIRE_FORM_CANCEL);
         },
         isDisabled: a,
         className: d.button,
@@ -142,7 +142,7 @@ const oe = ({
       {
         variant: "primary",
         type: "submit",
-        form: N,
+        form: C,
         isLoading: a,
         className: d.button,
         children: n("submitCta")
@@ -150,8 +150,8 @@ const oe = ({
     ) })
   ] });
 };
-te.Footer = re;
+oe.Footer = ne;
 export {
-  te as ConfirmWireDetailsForm
+  oe as ConfirmWireDetailsForm
 };
 //# sourceMappingURL=ConfirmWireDetailsForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmWireDetailsForm.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsForm/ConfirmWireDetailsForm.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport z from 'zod'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useIsMutating } from '@tanstack/react-query'\nimport {\n  useWireInRequestsSubmitMutation,\n  mutationKeyWireInRequestsSubmit,\n} from '@gusto/embedded-api/react-query/wireInRequestsSubmit'\nimport { useWireInRequestsGetSuspense } from '@gusto/embedded-api/react-query/wireInRequestsGet'\nimport type { PutWireInRequestsWireInRequestUuidRequest } from '@gusto/embedded-api/models/operations/putwireinrequestswireinrequestuuid'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport styles from './ConfirmWireDetailsForm.module.scss'\nimport { Form as HtmlForm } from '@/components/Common/Form'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { Flex, FlexItem } from '@/components/Common/Flex/Flex'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\nimport { DatePickerField, NumberInputField, TextInputField } from '@/components/Common'\nimport { TextAreaField } from '@/components/Common/Fields/TextAreaField'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\n\ninterface ConfirmWireDetailsFormProps extends BaseComponentInterface<'Payroll.ConfirmWireDetailsForm'> {\n  wireInId: string\n  companyId: string\n  modalContainerRef?: React.RefObject<HTMLDivElement | null>\n}\n\nconst ConfirmWireDetailsFormSchema = z.object({\n  amountSent: z.number().positive(),\n  dateSent: z.date(),\n  bankName: z.string().min(1),\n  additionalNotes: z.string().optional(),\n})\n\ntype ConfirmWireDetailsFormValues = z.infer<typeof ConfirmWireDetailsFormSchema>\n\nconst CONFIRM_WIRE_FORM_ID = 'confirm-wire-details-form'\n\nconst transformFormDataToPayload = (\n  data: ConfirmWireDetailsFormValues,\n): PutWireInRequestsWireInRequestUuidRequest['wireInRequestUpdateRequestBody'] => {\n  return {\n    amountSent: String(data.amountSent),\n    dateSent: data.dateSent.toISOString().split('T')[0] || '',\n    bankName: data.bankName,\n    additionalNotes: data.additionalNotes || undefined,\n  }\n}\n\n/** @internal */\nexport function ConfirmWireDetailsForm(props: ConfirmWireDetailsFormProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({\n  wireInId,\n  companyId,\n  dictionary,\n  modalContainerRef,\n}: ConfirmWireDetailsFormProps) => {\n  useComponentDictionary('Payroll.ConfirmWireDetailsForm', dictionary)\n  useI18n('Payroll.ConfirmWireDetailsForm')\n  const { onEvent, baseSubmitHandler } = useBase()\n  const { t } = useTranslation('Payroll.ConfirmWireDetailsForm')\n  const { Heading, Text } = useComponentContext()\n  const dateFormatter = useDateFormatter()\n  const { data } = useWireInRequestsGetSuspense({\n    wireInRequestUuid: wireInId,\n  })\n  const wireInRequest = data.wireInRequest\n\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processed: true,\n  })\n\n  const payrollData = payrollsData.payrollList?.find(\n    payroll => payroll.payrollUuid === wireInRequest?.paymentUuid,\n  )\n  const payPeriod = payrollData?.payPeriod\n  const payPeriodRange =\n    payPeriod?.startDate && payPeriod.endDate\n      ? dateFormatter.formatPayPeriodRange(payPeriod.startDate, payPeriod.endDate)\n      : undefined\n\n  const checkDate = payrollData\n    ? dateFormatter.formatShortWithYear(payrollData.checkDate)\n    : undefined\n\n  const formHandlers = useForm<ConfirmWireDetailsFormValues>({\n    resolver: zodResolver(ConfirmWireDetailsFormSchema),\n    defaultValues: {\n      bankName: '',\n    },\n  })\n\n  const { mutateAsync: submitWireInRequest } = useWireInRequestsSubmitMutation()\n\n  const onSubmit = async (data: ConfirmWireDetailsFormValues) => {\n    await baseSubmitHandler(data, async innerData => {\n      const payload = transformFormDataToPayload(innerData)\n      const response = await submitWireInRequest({\n        request: {\n          wireInRequestUuid: wireInId,\n          wireInRequestUpdateRequestBody: payload,\n        },\n      })\n      onEvent(payrollWireEvents.PAYROLL_WIRE_FORM_DONE, {\n        wireInRequest: response.wireInRequest,\n        confirmationAlert: {\n          title: payPeriodRange\n            ? t('confirmationAlert.title', { payrollRange: payPeriodRange })\n            : t('confirmationAlert.emptyTitle'),\n          content: checkDate ? (\n            <Text>{t('confirmationAlert.content', { checkDate })}</Text>\n          ) : undefined,\n        },\n      })\n    })\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <FlexItem>\n        <Heading as=\"h2\">\n          <Trans i18nKey=\"title\" t={t} values={{ payrollRange: payPeriodRange }} />\n        </Heading>\n        <Text>{t('description')}</Text>\n      </FlexItem>\n\n      <FormProvider {...formHandlers}>\n        <HtmlForm\n          id={CONFIRM_WIRE_FORM_ID}\n          onSubmit={formHandlers.handleSubmit(onSubmit)}\n          className={styles.form}\n        >\n          <Flex flexDirection=\"column\" gap={20}>\n            <NumberInputField\n              name=\"amountSent\"\n              label={t('amountLabel')}\n              isRequired\n              format=\"currency\"\n              errorMessage={t('validations.amount')}\n            />\n            <DatePickerField\n              name=\"dateSent\"\n              label={t('dateLabel')}\n              isRequired\n              errorMessage={t('validations.date')}\n              portalContainer={modalContainerRef?.current || undefined}\n            />\n            <TextInputField\n              name=\"bankName\"\n              label={t('bankNameLabel')}\n              isRequired\n              description={t('bankNameDescription')}\n              placeholder={t('bankNamePlaceholder')}\n              errorMessage={t('validations.bankName')}\n            />\n            <TextAreaField name=\"additionalNotes\" label={t('notesLabel')} rows={3} />\n          </Flex>\n        </HtmlForm>\n      </FormProvider>\n    </Flex>\n  )\n}\n\nconst Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {\n  useI18n('Payroll.ConfirmWireDetailsForm')\n  const { t } = useTranslation('Payroll.ConfirmWireDetailsForm')\n  const { Button } = useComponentContext()\n  const isMutating = useIsMutating({\n    mutationKey: mutationKeyWireInRequestsSubmit(),\n  })\n  const isPending = isMutating > 0\n\n  return (\n    <Flex gap={12} justifyContent=\"space-evenly\">\n      <FlexItem flexGrow={1}>\n        <Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL)\n          }}\n          isDisabled={isPending}\n          className={styles.button}\n        >\n          {t('cancelCta')}\n        </Button>\n      </FlexItem>\n      <FlexItem flexGrow={1}>\n        <Button\n          variant=\"primary\"\n          type=\"submit\"\n          form={CONFIRM_WIRE_FORM_ID}\n          isLoading={isPending}\n          className={styles.button}\n        >\n          {t('submitCta')}\n        </Button>\n      </FlexItem>\n    </Flex>\n  )\n}\nConfirmWireDetailsForm.Footer = Footer\n"],"names":["ConfirmWireDetailsFormSchema","z","CONFIRM_WIRE_FORM_ID","transformFormDataToPayload","data","ConfirmWireDetailsForm","props","jsx","BaseComponent","Root","wireInId","companyId","dictionary","modalContainerRef","useComponentDictionary","useI18n","onEvent","baseSubmitHandler","useBase","useTranslation","Heading","Text","useComponentContext","dateFormatter","useDateFormatter","useWireInRequestsGetSuspense","wireInRequest","payrollsData","usePayrollsListSuspense","payrollData","payroll","payPeriod","payPeriodRange","checkDate","formHandlers","useForm","zodResolver","submitWireInRequest","useWireInRequestsSubmitMutation","onSubmit","innerData","payload","response","payrollWireEvents","jsxs","Flex","FlexItem","Trans","FormProvider","HtmlForm","styles","NumberInputField","DatePickerField","TextInputField","TextAreaField","Footer","t","Button","isPending","useIsMutating","mutationKeyWireInRequestsSubmit"],"mappings":"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"}
+{"version":3,"file":"ConfirmWireDetailsForm.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsForm/ConfirmWireDetailsForm.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport z from 'zod'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useIsMutating } from '@tanstack/react-query'\nimport {\n  useWireInRequestsSubmitMutation,\n  mutationKeyWireInRequestsSubmit,\n} from '@gusto/embedded-api/react-query/wireInRequestsSubmit'\nimport { useWireInRequestsGetSuspense } from '@gusto/embedded-api/react-query/wireInRequestsGet'\nimport type { PutWireInRequestsWireInRequestUuidRequest } from '@gusto/embedded-api/models/operations/putwireinrequestswireinrequestuuid'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport styles from './ConfirmWireDetailsForm.module.scss'\nimport { Form as HtmlForm } from '@/components/Common/Form'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { Flex, FlexItem } from '@/components/Common/Flex/Flex'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\nimport { DatePickerField, NumberInputField, TextInputField } from '@/components/Common'\nimport { TextAreaField } from '@/components/Common/Fields/TextAreaField'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\n\ninterface ConfirmWireDetailsFormProps extends BaseComponentInterface<'Payroll.ConfirmWireDetailsForm'> {\n  wireInId: string\n  companyId: string\n  modalContainerRef?: React.RefObject<HTMLDivElement | null>\n}\n\nconst ConfirmWireDetailsFormSchema = z.object({\n  amountSent: z.number().positive(),\n  dateSent: z.date(),\n  bankName: z.string().min(1),\n  additionalNotes: z.string().optional(),\n})\n\ntype ConfirmWireDetailsFormValues = z.infer<typeof ConfirmWireDetailsFormSchema>\n\nconst CONFIRM_WIRE_FORM_ID = 'confirm-wire-details-form'\n\nconst transformFormDataToPayload = (\n  data: ConfirmWireDetailsFormValues,\n): PutWireInRequestsWireInRequestUuidRequest['wireInRequestUpdateRequestBody'] => {\n  return {\n    amountSent: String(data.amountSent),\n    dateSent: formatDateToStringDate(data.dateSent) ?? '',\n    bankName: data.bankName,\n    additionalNotes: data.additionalNotes || undefined,\n  }\n}\n\n/** @internal */\nexport function ConfirmWireDetailsForm(props: ConfirmWireDetailsFormProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({\n  wireInId,\n  companyId,\n  dictionary,\n  modalContainerRef,\n}: ConfirmWireDetailsFormProps) => {\n  useComponentDictionary('Payroll.ConfirmWireDetailsForm', dictionary)\n  useI18n('Payroll.ConfirmWireDetailsForm')\n  const { onEvent, baseSubmitHandler } = useBase()\n  const { t } = useTranslation('Payroll.ConfirmWireDetailsForm')\n  const { Heading, Text } = useComponentContext()\n  const dateFormatter = useDateFormatter()\n  const { data } = useWireInRequestsGetSuspense({\n    wireInRequestUuid: wireInId,\n  })\n  const wireInRequest = data.wireInRequest\n\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processed: true,\n  })\n\n  const payrollData = payrollsData.payrollList?.find(\n    payroll => payroll.payrollUuid === wireInRequest?.paymentUuid,\n  )\n  const payPeriod = payrollData?.payPeriod\n  const payPeriodRange =\n    payPeriod?.startDate && payPeriod.endDate\n      ? dateFormatter.formatPayPeriodRange(payPeriod.startDate, payPeriod.endDate)\n      : undefined\n\n  const checkDate = payrollData\n    ? dateFormatter.formatShortWithYear(payrollData.checkDate)\n    : undefined\n\n  const formHandlers = useForm<ConfirmWireDetailsFormValues>({\n    resolver: zodResolver(ConfirmWireDetailsFormSchema),\n    defaultValues: {\n      bankName: '',\n    },\n  })\n\n  const { mutateAsync: submitWireInRequest } = useWireInRequestsSubmitMutation()\n\n  const onSubmit = async (data: ConfirmWireDetailsFormValues) => {\n    await baseSubmitHandler(data, async innerData => {\n      const payload = transformFormDataToPayload(innerData)\n      const response = await submitWireInRequest({\n        request: {\n          wireInRequestUuid: wireInId,\n          wireInRequestUpdateRequestBody: payload,\n        },\n      })\n      onEvent(payrollWireEvents.PAYROLL_WIRE_FORM_DONE, {\n        wireInRequest: response.wireInRequest,\n        confirmationAlert: {\n          title: payPeriodRange\n            ? t('confirmationAlert.title', { payrollRange: payPeriodRange })\n            : t('confirmationAlert.emptyTitle'),\n          content: checkDate ? (\n            <Text>{t('confirmationAlert.content', { checkDate })}</Text>\n          ) : undefined,\n        },\n      })\n    })\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <FlexItem>\n        <Heading as=\"h2\">\n          <Trans i18nKey=\"title\" t={t} values={{ payrollRange: payPeriodRange }} />\n        </Heading>\n        <Text>{t('description')}</Text>\n      </FlexItem>\n\n      <FormProvider {...formHandlers}>\n        <HtmlForm\n          id={CONFIRM_WIRE_FORM_ID}\n          onSubmit={formHandlers.handleSubmit(onSubmit)}\n          className={styles.form}\n        >\n          <Flex flexDirection=\"column\" gap={20}>\n            <NumberInputField\n              name=\"amountSent\"\n              label={t('amountLabel')}\n              isRequired\n              format=\"currency\"\n              errorMessage={t('validations.amount')}\n            />\n            <DatePickerField\n              name=\"dateSent\"\n              label={t('dateLabel')}\n              isRequired\n              errorMessage={t('validations.date')}\n              portalContainer={modalContainerRef?.current || undefined}\n            />\n            <TextInputField\n              name=\"bankName\"\n              label={t('bankNameLabel')}\n              isRequired\n              description={t('bankNameDescription')}\n              placeholder={t('bankNamePlaceholder')}\n              errorMessage={t('validations.bankName')}\n            />\n            <TextAreaField name=\"additionalNotes\" label={t('notesLabel')} rows={3} />\n          </Flex>\n        </HtmlForm>\n      </FormProvider>\n    </Flex>\n  )\n}\n\nconst Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {\n  useI18n('Payroll.ConfirmWireDetailsForm')\n  const { t } = useTranslation('Payroll.ConfirmWireDetailsForm')\n  const { Button } = useComponentContext()\n  const isMutating = useIsMutating({\n    mutationKey: mutationKeyWireInRequestsSubmit(),\n  })\n  const isPending = isMutating > 0\n\n  return (\n    <Flex gap={12} justifyContent=\"space-evenly\">\n      <FlexItem flexGrow={1}>\n        <Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL)\n          }}\n          isDisabled={isPending}\n          className={styles.button}\n        >\n          {t('cancelCta')}\n        </Button>\n      </FlexItem>\n      <FlexItem flexGrow={1}>\n        <Button\n          variant=\"primary\"\n          type=\"submit\"\n          form={CONFIRM_WIRE_FORM_ID}\n          isLoading={isPending}\n          className={styles.button}\n        >\n          {t('submitCta')}\n        </Button>\n      </FlexItem>\n    </Flex>\n  )\n}\nConfirmWireDetailsForm.Footer = Footer\n"],"names":["ConfirmWireDetailsFormSchema","z","CONFIRM_WIRE_FORM_ID","transformFormDataToPayload","data","formatDateToStringDate","ConfirmWireDetailsForm","props","jsx","BaseComponent","Root","wireInId","companyId","dictionary","modalContainerRef","useComponentDictionary","useI18n","onEvent","baseSubmitHandler","useBase","useTranslation","Heading","Text","useComponentContext","dateFormatter","useDateFormatter","useWireInRequestsGetSuspense","wireInRequest","payrollsData","usePayrollsListSuspense","payrollData","payroll","payPeriod","payPeriodRange","checkDate","formHandlers","useForm","zodResolver","submitWireInRequest","useWireInRequestsSubmitMutation","onSubmit","innerData","payload","response","payrollWireEvents","jsxs","Flex","FlexItem","Trans","FormProvider","HtmlForm","styles","NumberInputField","DatePickerField","TextInputField","TextAreaField","Footer","t","Button","isPending","useIsMutating","mutationKeyWireInRequestsSubmit"],"mappings":"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"}

package/dist/components/Payroll/Dismissal/DismissalPayPeriodSelection/DismissalPayPeriodSelectionPresentation.js

@@ -3,18 +3,17 @@ import { useTranslation as d } from "react-i18next";
 import { Flex as o } from "../../../Common/Flex/Flex.js";
 import { ActionsLayout as f } from "../../../Common/ActionsLayout/ActionsLayout.js";
 import { useComponentContext as g } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import "react";
 import { useI18n as x } from "../../../../i18n/I18n.js";
-function S({
-  payPeriodOptions: r,
-  selectedPeriodKey: n,
+function L({
+  payPeriodOptions: n,
+  selectedPeriodKey: r,
   onSelectPeriod: s,
   onSubmit: c,
   isPending: l
 }) {
   x("Payroll.Dismissal");
   const { t: i } = d("Payroll.Dismissal"), { Heading: a, Text: m, Select: p, Button: u, Alert: h } = g();
-  return r.length === 0 ? /* @__PURE__ */ t(o, { flexDirection: "column", gap: 24, children: [
+  return n.length === 0 ? /* @__PURE__ */ t(o, { flexDirection: "column", gap: 24, children: [
     /* @__PURE__ */ e(o, { flexDirection: "column", gap: 4, children: /* @__PURE__ */ e(a, { as: "h2", children: i("pageTitle") }) }),
     /* @__PURE__ */ e(h, { status: "info", label: i("emptyState") })
   ] }) : /* @__PURE__ */ t(o, { flexDirection: "column", gap: 24, children: [
@@ -26,8 +25,8 @@ function S({
       p,
       {
         label: i("selectLabel"),
-        options: r,
-        value: n,
+        options: n,
+        value: r,
         onChange: s,
         placeholder: i("selectPlaceholder"),
         isRequired: !0
@@ -39,13 +38,13 @@ function S({
         variant: "primary",
         onClick: c,
         isLoading: l,
-        isDisabled: l || n === void 0,
+        isDisabled: l || r === void 0,
         children: i("continueCta")
       }
     ) })
   ] });
 }
 export {
-  S as DismissalPayPeriodSelectionPresentation
+  L as DismissalPayPeriodSelectionPresentation
 };
 //# sourceMappingURL=DismissalPayPeriodSelectionPresentation.js.map

package/dist/components/Payroll/Dismissal/DismissalPayPeriodSelection/DismissalPayPeriodSelectionPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"DismissalPayPeriodSelectionPresentation.js","sources":["../../../../../src/components/Payroll/Dismissal/DismissalPayPeriodSelection/DismissalPayPeriodSelectionPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { Flex, ActionsLayout } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport type { SelectOption } from '@/components/Common/UI/Select/SelectTypes'\n\n/** @internal */\nexport interface DismissalPayPeriodSelectionPresentationProps {\n  /** Pay period options to display in the select. */\n  payPeriodOptions: SelectOption[]\n  /** Key of the currently selected pay period option, or undefined when none is selected. */\n  selectedPeriodKey: string | undefined\n  /** Called when the user selects a pay period from the options. */\n  onSelectPeriod: (value: string) => void\n  /** Called when the user clicks the continue button. */\n  onSubmit: () => void\n  /** Whether the submit action is in flight. */\n  isPending: boolean\n}\n\n/** @internal */\nexport function DismissalPayPeriodSelectionPresentation({\n  payPeriodOptions,\n  selectedPeriodKey,\n  onSelectPeriod,\n  onSubmit,\n  isPending,\n}: DismissalPayPeriodSelectionPresentationProps) {\n  useI18n('Payroll.Dismissal')\n  const { t } = useTranslation('Payroll.Dismissal')\n  const { Heading, Text, Select, Button, Alert } = useComponentContext()\n\n  const hasNoPayPeriods = payPeriodOptions.length === 0\n\n  if (hasNoPayPeriods) {\n    return (\n      <Flex flexDirection=\"column\" gap={24}>\n        <Flex flexDirection=\"column\" gap={4}>\n          <Heading as=\"h2\">{t('pageTitle')}</Heading>\n        </Flex>\n        <Alert status=\"info\" label={t('emptyState')} />\n      </Flex>\n    )\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <Flex flexDirection=\"column\" gap={4}>\n        <Heading as=\"h2\">{t('pageTitle')}</Heading>\n        <Text variant=\"supporting\">{t('pageDescription')}</Text>\n      </Flex>\n\n      <Select\n        label={t('selectLabel')}\n        options={payPeriodOptions}\n        value={selectedPeriodKey}\n        onChange={onSelectPeriod}\n        placeholder={t('selectPlaceholder')}\n        isRequired\n      />\n\n      <ActionsLayout>\n        <Button\n          variant=\"primary\"\n          onClick={onSubmit}\n          isLoading={isPending}\n          isDisabled={isPending || selectedPeriodKey === undefined}\n        >\n          {t('continueCta')}\n        </Button>\n      </ActionsLayout>\n    </Flex>\n  )\n}\n"],"names":["DismissalPayPeriodSelectionPresentation","payPeriodOptions","selectedPeriodKey","onSelectPeriod","onSubmit","isPending","useI18n","t","useTranslation","Heading","Text","Select","Button","Alert","useComponentContext","jsxs","Flex","jsx","ActionsLayout"],"mappings":";;;;;;;AAqBO,SAASA,EAAwC;AAAA,EACtD,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAiD;AAC/C,EAAAC,EAAQ,mBAAmB;AAC3B,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,mBAAmB,GAC1C,EAAE,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,QAAAC,GAAQ,OAAAC,EAAA,IAAUC,EAAA;AAIjD,SAFwBb,EAAiB,WAAW,IAIhD,gBAAAc,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAC,EAACD,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA,gBAAAC,EAACR,GAAA,EAAQ,IAAG,MAAM,UAAAF,EAAE,WAAW,EAAA,CAAE,GACnC;AAAA,sBACCM,GAAA,EAAM,QAAO,QAAO,OAAON,EAAE,YAAY,EAAA,CAAG;AAAA,EAAA,GAC/C,IAKF,gBAAAQ,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAC,EAACR,GAAA,EAAQ,IAAG,MAAM,UAAAF,EAAE,WAAW,GAAE;AAAA,wBAChCG,GAAA,EAAK,SAAQ,cAAc,UAAAH,EAAE,iBAAiB,EAAA,CAAE;AAAA,IAAA,GACnD;AAAA,IAEA,gBAAAU;AAAA,MAACN;AAAA,MAAA;AAAA,QACC,OAAOJ,EAAE,aAAa;AAAA,QACtB,SAASN;AAAA,QACT,OAAOC;AAAA,QACP,UAAUC;AAAA,QACV,aAAaI,EAAE,mBAAmB;AAAA,QAClC,YAAU;AAAA,MAAA;AAAA,IAAA;AAAA,sBAGXW,GAAA,EACC,UAAA,gBAAAD;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAASR;AAAA,QACT,WAAWC;AAAA,QACX,YAAYA,KAAaH,MAAsB;AAAA,QAE9C,YAAE,aAAa;AAAA,MAAA;AAAA,IAAA,EAClB,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"DismissalPayPeriodSelectionPresentation.js","sources":["../../../../../src/components/Payroll/Dismissal/DismissalPayPeriodSelection/DismissalPayPeriodSelectionPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { Flex, ActionsLayout } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport type { SelectOption } from '@/components/Common/UI/Select/SelectTypes'\n\n/** @internal */\nexport interface DismissalPayPeriodSelectionPresentationProps {\n  /** Pay period options to display in the select. */\n  payPeriodOptions: SelectOption[]\n  /** Key of the currently selected pay period option, or undefined when none is selected. */\n  selectedPeriodKey: string | undefined\n  /** Called when the user selects a pay period from the options. */\n  onSelectPeriod: (value: string) => void\n  /** Called when the user clicks the continue button. */\n  onSubmit: () => void\n  /** Whether the submit action is in flight. */\n  isPending: boolean\n}\n\n/** @internal */\nexport function DismissalPayPeriodSelectionPresentation({\n  payPeriodOptions,\n  selectedPeriodKey,\n  onSelectPeriod,\n  onSubmit,\n  isPending,\n}: DismissalPayPeriodSelectionPresentationProps) {\n  useI18n('Payroll.Dismissal')\n  const { t } = useTranslation('Payroll.Dismissal')\n  const { Heading, Text, Select, Button, Alert } = useComponentContext()\n\n  const hasNoPayPeriods = payPeriodOptions.length === 0\n\n  if (hasNoPayPeriods) {\n    return (\n      <Flex flexDirection=\"column\" gap={24}>\n        <Flex flexDirection=\"column\" gap={4}>\n          <Heading as=\"h2\">{t('pageTitle')}</Heading>\n        </Flex>\n        <Alert status=\"info\" label={t('emptyState')} />\n      </Flex>\n    )\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <Flex flexDirection=\"column\" gap={4}>\n        <Heading as=\"h2\">{t('pageTitle')}</Heading>\n        <Text variant=\"supporting\">{t('pageDescription')}</Text>\n      </Flex>\n\n      <Select\n        label={t('selectLabel')}\n        options={payPeriodOptions}\n        value={selectedPeriodKey}\n        onChange={onSelectPeriod}\n        placeholder={t('selectPlaceholder')}\n        isRequired\n      />\n\n      <ActionsLayout>\n        <Button\n          variant=\"primary\"\n          onClick={onSubmit}\n          isLoading={isPending}\n          isDisabled={isPending || selectedPeriodKey === undefined}\n        >\n          {t('continueCta')}\n        </Button>\n      </ActionsLayout>\n    </Flex>\n  )\n}\n"],"names":["DismissalPayPeriodSelectionPresentation","payPeriodOptions","selectedPeriodKey","onSelectPeriod","onSubmit","isPending","useI18n","t","useTranslation","Heading","Text","Select","Button","Alert","useComponentContext","jsxs","Flex","jsx","ActionsLayout"],"mappings":";;;;;;AAqBO,SAASA,EAAwC;AAAA,EACtD,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAiD;AAC/C,EAAAC,EAAQ,mBAAmB;AAC3B,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,mBAAmB,GAC1C,EAAE,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,QAAAC,GAAQ,OAAAC,EAAA,IAAUC,EAAA;AAIjD,SAFwBb,EAAiB,WAAW,IAIhD,gBAAAc,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAC,EAACD,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA,gBAAAC,EAACR,GAAA,EAAQ,IAAG,MAAM,UAAAF,EAAE,WAAW,EAAA,CAAE,GACnC;AAAA,sBACCM,GAAA,EAAM,QAAO,QAAO,OAAON,EAAE,YAAY,EAAA,CAAG;AAAA,EAAA,GAC/C,IAKF,gBAAAQ,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAC,EAACR,GAAA,EAAQ,IAAG,MAAM,UAAAF,EAAE,WAAW,GAAE;AAAA,wBAChCG,GAAA,EAAK,SAAQ,cAAc,UAAAH,EAAE,iBAAiB,EAAA,CAAE;AAAA,IAAA,GACnD;AAAA,IAEA,gBAAAU;AAAA,MAACN;AAAA,MAAA;AAAA,QACC,OAAOJ,EAAE,aAAa;AAAA,QACtB,SAASN;AAAA,QACT,OAAOC;AAAA,QACP,UAAUC;AAAA,QACV,aAAaI,EAAE,mBAAmB;AAAA,QAClC,YAAU;AAAA,MAAA;AAAA,IAAA;AAAA,sBAGXW,GAAA,EACC,UAAA,gBAAAD;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAASR;AAAA,QACT,WAAWC;AAAA,QACX,YAAYA,KAAaH,MAAsB;AAAA,QAE9C,YAAE,aAAa;AAAA,MAAA;AAAA,IAAA,EAClB,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/Payroll/GrossUpModal/GrossUpModal.js

@@ -7,26 +7,25 @@ import { zodResolver as z } from "@hookform/resolvers/zod";
 import a from "./GrossUpModal.module.scss.js";
 import { Flex as B } from "../../Common/Flex/Flex.js";
 import { ActionsLayout as D } from "../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as H } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import "react-error-boundary";
 import "@tanstack/react-query";
-import { useBase as L } from "../../Base/useBase.js";
+import { useBase as H } from "../../Base/useBase.js";
 import "@gusto/embedded-api/models/errors/apierror";
 import "@gusto/embedded-api/models/errors/gustoembeddederror";
 import "@gusto/embedded-api/models/errors/sdkvalidationerror";
 import "@gusto/embedded-api/models/errors/unprocessableentityerror";
 import "@gusto/embedded-api/models/errors/httpclienterrors";
-import { formatNumberAsCurrency as V } from "../../../helpers/formattedStrings.js";
+import { formatNumberAsCurrency as L } from "../../../helpers/formattedStrings.js";
 import "../../../shared/constants.js";
-import "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
+import { useComponentContext as V } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as E } from "../../../i18n/I18n.js";
 import { NumberInputField as T } from "../../Common/Fields/NumberInputField/NumberInputField.js";
 const q = P.object({
   netPay: P.number().positive()
 });
-function fe({ isOpen: n, onCalculateGrossUp: w, onApply: A, onCancel: d }) {
+function pe({ isOpen: n, onCalculateGrossUp: w, onApply: A, onCancel: d }) {
   E("Payroll.GrossUpModal");
-  const { t: r } = k("Payroll.GrossUpModal"), { Modal: M, Heading: u, Text: p, Button: i, Alert: f } = H(), { baseSubmitHandler: y } = L(), N = R(null), [l, c] = o(null), [h, m] = o(null), [g, b] = o(!1), [x, v] = o(!1), s = U({
+  const { t: r } = k("Payroll.GrossUpModal"), { Modal: M, Heading: u, Text: p, Button: i, Alert: f } = V(), { baseSubmitHandler: y } = H(), N = R(null), [l, c] = o(null), [h, m] = o(null), [g, b] = o(!1), [x, v] = o(!1), s = U({
     resolver: z(q),
     defaultValues: { netPay: 0 }
   });
@@ -103,7 +102,7 @@ function fe({ isOpen: n, onCalculateGrossUp: w, onApply: A, onCancel: d }) {
           ] }),
           l && /* @__PURE__ */ e(I, { children: /* @__PURE__ */ t("div", { className: a.result, children: [
             /* @__PURE__ */ e(p, { size: "sm", variant: "supporting", weight: "semibold", children: r("grossPayResult") }),
-            /* @__PURE__ */ e(u, { as: "h3", children: V(parseFloat(l)) })
+            /* @__PURE__ */ e(u, { as: "h3", children: L(parseFloat(l)) })
           ] }) })
         ] })
       ] })
@@ -111,6 +110,6 @@ function fe({ isOpen: n, onCalculateGrossUp: w, onApply: A, onCancel: d }) {
   );
 }
 export {
-  fe as GrossUpModal
+  pe as GrossUpModal
 };
 //# sourceMappingURL=GrossUpModal.js.map

package/dist/components/Payroll/GrossUpModal/GrossUpModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"GrossUpModal.js","sources":["../../../../src/components/Payroll/GrossUpModal/GrossUpModal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport type { GrossUpModalProps } from './GrossUpModalTypes'\nimport styles from './GrossUpModal.module.scss'\nimport { ActionsLayout, Flex, NumberInputField } from '@/components/Common'\nimport { useBase } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\n\nconst GrossUpFormSchema = z.object({\n  netPay: z.number().positive(),\n})\n\ntype GrossUpFormValues = z.infer<typeof GrossUpFormSchema>\n\n/** @internal */\nexport function GrossUpModal({ isOpen, onCalculateGrossUp, onApply, onCancel }: GrossUpModalProps) {\n  useI18n('Payroll.GrossUpModal')\n  const { t } = useTranslation('Payroll.GrossUpModal')\n  const { Modal, Heading, Text, Button, Alert } = useComponentContext()\n  const { baseSubmitHandler } = useBase()\n  const modalContainerRef = useRef<HTMLDivElement>(null)\n\n  const [calculatedGrossUp, setCalculatedGrossUp] = useState<string | null>(null)\n  const [errorMessage, setErrorMessage] = useState<string | null>(null)\n  const [isCalculating, setIsCalculating] = useState(false)\n  const [isApplying, setIsApplying] = useState(false)\n\n  const formHandlers = useForm<GrossUpFormValues>({\n    resolver: zodResolver(GrossUpFormSchema),\n    defaultValues: { netPay: 0 },\n  })\n\n  useEffect(() => {\n    if (!isOpen) {\n      formHandlers.reset({ netPay: 0 })\n      setCalculatedGrossUp(null)\n      setErrorMessage(null)\n    }\n  }, [isOpen, formHandlers.reset])\n\n  const handleCalculate = async (data: GrossUpFormValues) => {\n    setErrorMessage(null)\n    setCalculatedGrossUp(null)\n    setIsCalculating(true)\n\n    await baseSubmitHandler(null, async () => {\n      try {\n        const result = await onCalculateGrossUp(data.netPay)\n\n        if (result) {\n          setCalculatedGrossUp(result)\n        } else {\n          setErrorMessage(t('errorMessage'))\n        }\n      } finally {\n        setIsCalculating(false)\n      }\n    })\n  }\n\n  const handleApply = async () => {\n    if (calculatedGrossUp) {\n      setIsApplying(true)\n      await baseSubmitHandler(null, async () => {\n        try {\n          await onApply(calculatedGrossUp)\n        } finally {\n          setIsApplying(false)\n        }\n      })\n    }\n  }\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onCancel}\n      containerRef={modalContainerRef}\n      footer={\n        <ActionsLayout>\n          <Button\n            variant=\"primary\"\n            isDisabled={!calculatedGrossUp}\n            onClick={handleApply}\n            isLoading={isApplying}\n          >\n            {t('applyCta')}\n          </Button>\n          <Button variant=\"secondary\" onClick={onCancel}>\n            {t('cancelCta')}\n          </Button>\n        </ActionsLayout>\n      }\n    >\n      <FormProvider {...formHandlers}>\n        <div className={styles.header}>\n          <Heading as=\"h2\" styledAs=\"h3\">\n            {t('title')}\n          </Heading>\n          <Text variant=\"supporting\" as=\"p\">\n            {t('description')}\n          </Text>\n        </div>\n\n        <div className={styles.content}>\n          {errorMessage && (\n            <div className={styles.alert}>\n              <Alert label={errorMessage} status=\"error\" disableScrollIntoView />\n            </div>\n          )}\n\n          <div className={styles.alert}>\n            <Alert label={t('warning')} status=\"warning\" disableScrollIntoView />\n          </div>\n\n          <Flex flexDirection=\"row\" gap={8}>\n            <NumberInputField\n              name=\"netPay\"\n              label={t('netPayLabel')}\n              format=\"currency\"\n              errorMessage={t('validations.netPay')}\n              min={0}\n              isRequired\n            />\n            <Button\n              variant=\"secondary\"\n              className={styles.calculateButton}\n              isDisabled={isCalculating}\n              onClick={formHandlers.handleSubmit(handleCalculate)}\n            >\n              {isCalculating ? t('calculatingCta') : t('calculateCta')}\n            </Button>\n          </Flex>\n\n          {calculatedGrossUp && (\n            <>\n              <div className={styles.result}>\n                <Text size=\"sm\" variant=\"supporting\" weight=\"semibold\">\n                  {t('grossPayResult')}\n                </Text>\n                <Heading as=\"h3\">{formatNumberAsCurrency(parseFloat(calculatedGrossUp))}</Heading>\n              </div>\n            </>\n          )}\n        </div>\n      </FormProvider>\n    </Modal>\n  )\n}\n"],"names":["GrossUpFormSchema","z","GrossUpModal","isOpen","onCalculateGrossUp","onApply","onCancel","useI18n","t","useTranslation","Modal","Heading","Text","Button","Alert","useComponentContext","baseSubmitHandler","useBase","modalContainerRef","useRef","calculatedGrossUp","setCalculatedGrossUp","useState","errorMessage","setErrorMessage","isCalculating","setIsCalculating","isApplying","setIsApplying","formHandlers","useForm","zodResolver","useEffect","handleCalculate","data","result","jsx","ActionsLayout","jsxs","FormProvider","styles","Flex","NumberInputField","Fragment"],"mappings":"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"}
+{"version":3,"file":"GrossUpModal.js","sources":["../../../../src/components/Payroll/GrossUpModal/GrossUpModal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport type { GrossUpModalProps } from './GrossUpModalTypes'\nimport styles from './GrossUpModal.module.scss'\nimport { ActionsLayout, Flex, NumberInputField } from '@/components/Common'\nimport { useBase } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\n\nconst GrossUpFormSchema = z.object({\n  netPay: z.number().positive(),\n})\n\ntype GrossUpFormValues = z.infer<typeof GrossUpFormSchema>\n\n/** @internal */\nexport function GrossUpModal({ isOpen, onCalculateGrossUp, onApply, onCancel }: GrossUpModalProps) {\n  useI18n('Payroll.GrossUpModal')\n  const { t } = useTranslation('Payroll.GrossUpModal')\n  const { Modal, Heading, Text, Button, Alert } = useComponentContext()\n  const { baseSubmitHandler } = useBase()\n  const modalContainerRef = useRef<HTMLDivElement>(null)\n\n  const [calculatedGrossUp, setCalculatedGrossUp] = useState<string | null>(null)\n  const [errorMessage, setErrorMessage] = useState<string | null>(null)\n  const [isCalculating, setIsCalculating] = useState(false)\n  const [isApplying, setIsApplying] = useState(false)\n\n  const formHandlers = useForm<GrossUpFormValues>({\n    resolver: zodResolver(GrossUpFormSchema),\n    defaultValues: { netPay: 0 },\n  })\n\n  useEffect(() => {\n    if (!isOpen) {\n      formHandlers.reset({ netPay: 0 })\n      setCalculatedGrossUp(null)\n      setErrorMessage(null)\n    }\n  }, [isOpen, formHandlers.reset])\n\n  const handleCalculate = async (data: GrossUpFormValues) => {\n    setErrorMessage(null)\n    setCalculatedGrossUp(null)\n    setIsCalculating(true)\n\n    await baseSubmitHandler(null, async () => {\n      try {\n        const result = await onCalculateGrossUp(data.netPay)\n\n        if (result) {\n          setCalculatedGrossUp(result)\n        } else {\n          setErrorMessage(t('errorMessage'))\n        }\n      } finally {\n        setIsCalculating(false)\n      }\n    })\n  }\n\n  const handleApply = async () => {\n    if (calculatedGrossUp) {\n      setIsApplying(true)\n      await baseSubmitHandler(null, async () => {\n        try {\n          await onApply(calculatedGrossUp)\n        } finally {\n          setIsApplying(false)\n        }\n      })\n    }\n  }\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onCancel}\n      containerRef={modalContainerRef}\n      footer={\n        <ActionsLayout>\n          <Button\n            variant=\"primary\"\n            isDisabled={!calculatedGrossUp}\n            onClick={handleApply}\n            isLoading={isApplying}\n          >\n            {t('applyCta')}\n          </Button>\n          <Button variant=\"secondary\" onClick={onCancel}>\n            {t('cancelCta')}\n          </Button>\n        </ActionsLayout>\n      }\n    >\n      <FormProvider {...formHandlers}>\n        <div className={styles.header}>\n          <Heading as=\"h2\" styledAs=\"h3\">\n            {t('title')}\n          </Heading>\n          <Text variant=\"supporting\" as=\"p\">\n            {t('description')}\n          </Text>\n        </div>\n\n        <div className={styles.content}>\n          {errorMessage && (\n            <div className={styles.alert}>\n              <Alert label={errorMessage} status=\"error\" disableScrollIntoView />\n            </div>\n          )}\n\n          <div className={styles.alert}>\n            <Alert label={t('warning')} status=\"warning\" disableScrollIntoView />\n          </div>\n\n          <Flex flexDirection=\"row\" gap={8}>\n            <NumberInputField\n              name=\"netPay\"\n              label={t('netPayLabel')}\n              format=\"currency\"\n              errorMessage={t('validations.netPay')}\n              min={0}\n              isRequired\n            />\n            <Button\n              variant=\"secondary\"\n              className={styles.calculateButton}\n              isDisabled={isCalculating}\n              onClick={formHandlers.handleSubmit(handleCalculate)}\n            >\n              {isCalculating ? t('calculatingCta') : t('calculateCta')}\n            </Button>\n          </Flex>\n\n          {calculatedGrossUp && (\n            <>\n              <div className={styles.result}>\n                <Text size=\"sm\" variant=\"supporting\" weight=\"semibold\">\n                  {t('grossPayResult')}\n                </Text>\n                <Heading as=\"h3\">{formatNumberAsCurrency(parseFloat(calculatedGrossUp))}</Heading>\n              </div>\n            </>\n          )}\n        </div>\n      </FormProvider>\n    </Modal>\n  )\n}\n"],"names":["GrossUpFormSchema","z","GrossUpModal","isOpen","onCalculateGrossUp","onApply","onCancel","useI18n","t","useTranslation","Modal","Heading","Text","Button","Alert","useComponentContext","baseSubmitHandler","useBase","modalContainerRef","useRef","calculatedGrossUp","setCalculatedGrossUp","useState","errorMessage","setErrorMessage","isCalculating","setIsCalculating","isApplying","setIsApplying","formHandlers","useForm","zodResolver","useEffect","handleCalculate","data","result","jsx","ActionsLayout","jsxs","FormProvider","styles","Flex","NumberInputField","Fragment"],"mappings":"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"}

package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.js

@@ -1,21 +1,19 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
 import { useTranslation as l } from "react-i18next";
-import a from "./OffCyclePayPeriodDateFormPresentation.module.scss.js";
+import r from "./OffCyclePayPeriodDateFormPresentation.module.scss.js";
 import { useI18n as o } from "../../../i18n/I18n.js";
-import "../../../contexts/ComponentAdapter/useComponentContext.js";
-import "react";
 import { CheckboxField as c } from "../../Common/Fields/CheckboxField/CheckboxField.js";
 import { DatePickerField as t } from "../../Common/Fields/DatePickerField/DatePickerField.js";
-function h() {
+function D() {
   o("Payroll.OffCyclePayPeriodDateForm");
   const { t: e } = l("Payroll.OffCyclePayPeriodDateForm");
-  return /* @__PURE__ */ i("div", { className: a.root, children: [
-    /* @__PURE__ */ i("div", { className: a.dateFields, children: [
-      /* @__PURE__ */ r(t, { name: "startDate", label: e("startDateLabel"), isRequired: !0 }),
-      /* @__PURE__ */ r(t, { name: "endDate", label: e("endDateLabel"), isRequired: !0 })
+  return /* @__PURE__ */ i("div", { className: r.root, children: [
+    /* @__PURE__ */ i("div", { className: r.dateFields, children: [
+      /* @__PURE__ */ a(t, { name: "startDate", label: e("startDateLabel"), isRequired: !0 }),
+      /* @__PURE__ */ a(t, { name: "endDate", label: e("endDateLabel"), isRequired: !0 })
     ] }),
-    /* @__PURE__ */ r("div", { className: a.checkDateField, children: /* @__PURE__ */ r(t, { name: "checkDate", label: e("checkDateLabel"), isRequired: !0 }) }),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ a("div", { className: r.checkDateField, children: /* @__PURE__ */ a(t, { name: "checkDate", label: e("checkDateLabel"), isRequired: !0 }) }),
+    /* @__PURE__ */ a(
       c,
       {
         name: "isCheckOnly",
@@ -26,6 +24,6 @@ function h() {
   ] });
 }
 export {
-  h as OffCyclePayPeriodDateFormPresentation
+  D as OffCyclePayPeriodDateFormPresentation
 };
 //# sourceMappingURL=OffCyclePayPeriodDateFormPresentation.js.map

package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"OffCyclePayPeriodDateFormPresentation.js","sources":["../../../../src/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport styles from './OffCyclePayPeriodDateFormPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { CheckboxField, DatePickerField } from '@/components/Common'\n\n/** @internal */\nexport function OffCyclePayPeriodDateFormPresentation() {\n  useI18n('Payroll.OffCyclePayPeriodDateForm')\n  const { t } = useTranslation('Payroll.OffCyclePayPeriodDateForm')\n\n  return (\n    <div className={styles.root}>\n      <div className={styles.dateFields}>\n        <DatePickerField name=\"startDate\" label={t('startDateLabel')} isRequired />\n        <DatePickerField name=\"endDate\" label={t('endDateLabel')} isRequired />\n      </div>\n\n      <div className={styles.checkDateField}>\n        <DatePickerField name=\"checkDate\" label={t('checkDateLabel')} isRequired />\n      </div>\n\n      <CheckboxField\n        name=\"isCheckOnly\"\n        label={t('checkOnlyLabel')}\n        description={t('checkOnlyDescription')}\n      />\n    </div>\n  )\n}\n"],"names":["OffCyclePayPeriodDateFormPresentation","useI18n","t","useTranslation","jsxs","styles","jsx","DatePickerField","CheckboxField"],"mappings":";;;;;;;;AAMO,SAASA,IAAwC;AACtD,EAAAC,EAAQ,mCAAmC;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,mCAAmC;AAEhE,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,MACrB,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,YACrB,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAgB,MAAK,aAAY,OAAOL,EAAE,gBAAgB,GAAG,YAAU,IAAC;AAAA,MACzE,gBAAAI,EAACC,KAAgB,MAAK,WAAU,OAAOL,EAAE,cAAc,GAAG,YAAU,GAAA,CAAC;AAAA,IAAA,GACvE;AAAA,IAEA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,gBACrB,UAAA,gBAAAC,EAACC,GAAA,EAAgB,MAAK,aAAY,OAAOL,EAAE,gBAAgB,GAAG,YAAU,IAAC,GAC3E;AAAA,IAEA,gBAAAI;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAON,EAAE,gBAAgB;AAAA,QACzB,aAAaA,EAAE,sBAAsB;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,GACF;AAEJ;"}
+{"version":3,"file":"OffCyclePayPeriodDateFormPresentation.js","sources":["../../../../src/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport styles from './OffCyclePayPeriodDateFormPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { CheckboxField, DatePickerField } from '@/components/Common'\n\n/** @internal */\nexport function OffCyclePayPeriodDateFormPresentation() {\n  useI18n('Payroll.OffCyclePayPeriodDateForm')\n  const { t } = useTranslation('Payroll.OffCyclePayPeriodDateForm')\n\n  return (\n    <div className={styles.root}>\n      <div className={styles.dateFields}>\n        <DatePickerField name=\"startDate\" label={t('startDateLabel')} isRequired />\n        <DatePickerField name=\"endDate\" label={t('endDateLabel')} isRequired />\n      </div>\n\n      <div className={styles.checkDateField}>\n        <DatePickerField name=\"checkDate\" label={t('checkDateLabel')} isRequired />\n      </div>\n\n      <CheckboxField\n        name=\"isCheckOnly\"\n        label={t('checkOnlyLabel')}\n        description={t('checkOnlyDescription')}\n      />\n    </div>\n  )\n}\n"],"names":["OffCyclePayPeriodDateFormPresentation","useI18n","t","useTranslation","jsxs","styles","jsx","DatePickerField","CheckboxField"],"mappings":";;;;;;AAMO,SAASA,IAAwC;AACtD,EAAAC,EAAQ,mCAAmC;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,mCAAmC;AAEhE,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,MACrB,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,YACrB,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAgB,MAAK,aAAY,OAAOL,EAAE,gBAAgB,GAAG,YAAU,IAAC;AAAA,MACzE,gBAAAI,EAACC,KAAgB,MAAK,WAAU,OAAOL,EAAE,cAAc,GAAG,YAAU,GAAA,CAAC;AAAA,IAAA,GACvE;AAAA,IAEA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,gBACrB,UAAA,gBAAAC,EAACC,GAAA,EAAgB,MAAK,aAAY,OAAOL,EAAE,gBAAgB,GAAG,YAAU,IAAC,GAC3E;AAAA,IAEA,gBAAAI;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAON,EAAE,gBAAgB;AAAA,QACzB,aAAaA,EAAE,sBAAsB;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,GACF;AAEJ;"}

package/dist/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelectionPresentation.js

@@ -1,7 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
 import { useMemo as r } from "react";
 import { useTranslation as s } from "react-i18next";
-import "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { RadioGroupField as l } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
 function f({
   name: e,

package/dist/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelectionPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"OffCycleReasonSelectionPresentation.js","sources":["../../../../src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelectionPresentation.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { OffCycleReason } from './types'\nimport { RadioGroupField } from '@/components/Common'\n\ninterface OffCycleReasonSelectionPresentationProps {\n  name: string\n  onChange?: (value: OffCycleReason) => void\n}\n\n/** @internal */\nexport function OffCycleReasonSelectionPresentation({\n  name,\n  onChange,\n}: OffCycleReasonSelectionPresentationProps) {\n  const { t } = useTranslation('Payroll.OffCycleReasonSelection')\n\n  const options = useMemo(\n    () => [\n      {\n        value: 'correction' as OffCycleReason,\n        label: t('options.correction.label'),\n        description: t('options.correction.description'),\n      },\n      {\n        value: 'bonus' as OffCycleReason,\n        label: t('options.bonus.label'),\n        description: t('options.bonus.description'),\n      },\n    ],\n    [t],\n  )\n\n  return (\n    <RadioGroupField<OffCycleReason>\n      name={name}\n      label={t('title')}\n      options={options}\n      isRequired\n      onChange={onChange}\n    />\n  )\n}\n"],"names":["OffCycleReasonSelectionPresentation","name","onChange","t","useTranslation","options","useMemo","jsx","RadioGroupField"],"mappings":";;;;;AAWO,SAASA,EAAoC;AAAA,EAClD,MAAAC;AAAA,EACA,UAAAC;AACF,GAA6C;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,iCAAiC,GAExDC,IAAUC;AAAA,IACd,MAAM;AAAA,MACJ;AAAA,QACE,OAAO;AAAA,QACP,OAAOH,EAAE,0BAA0B;AAAA,QACnC,aAAaA,EAAE,gCAAgC;AAAA,MAAA;AAAA,MAEjD;AAAA,QACE,OAAO;AAAA,QACP,OAAOA,EAAE,qBAAqB;AAAA,QAC9B,aAAaA,EAAE,2BAA2B;AAAA,MAAA;AAAA,IAC5C;AAAA,IAEF,CAACA,CAAC;AAAA,EAAA;AAGJ,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,OAAOE,EAAE,OAAO;AAAA,MAChB,SAAAE;AAAA,MACA,YAAU;AAAA,MACV,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"OffCycleReasonSelectionPresentation.js","sources":["../../../../src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelectionPresentation.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { OffCycleReason } from './types'\nimport { RadioGroupField } from '@/components/Common'\n\ninterface OffCycleReasonSelectionPresentationProps {\n  name: string\n  onChange?: (value: OffCycleReason) => void\n}\n\n/** @internal */\nexport function OffCycleReasonSelectionPresentation({\n  name,\n  onChange,\n}: OffCycleReasonSelectionPresentationProps) {\n  const { t } = useTranslation('Payroll.OffCycleReasonSelection')\n\n  const options = useMemo(\n    () => [\n      {\n        value: 'correction' as OffCycleReason,\n        label: t('options.correction.label'),\n        description: t('options.correction.description'),\n      },\n      {\n        value: 'bonus' as OffCycleReason,\n        label: t('options.bonus.label'),\n        description: t('options.bonus.description'),\n      },\n    ],\n    [t],\n  )\n\n  return (\n    <RadioGroupField<OffCycleReason>\n      name={name}\n      label={t('title')}\n      options={options}\n      isRequired\n      onChange={onChange}\n    />\n  )\n}\n"],"names":["OffCycleReasonSelectionPresentation","name","onChange","t","useTranslation","options","useMemo","jsx","RadioGroupField"],"mappings":";;;;AAWO,SAASA,EAAoC;AAAA,EAClD,MAAAC;AAAA,EACA,UAAAC;AACF,GAA6C;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,iCAAiC,GAExDC,IAAUC;AAAA,IACd,MAAM;AAAA,MACJ;AAAA,QACE,OAAO;AAAA,QACP,OAAOH,EAAE,0BAA0B;AAAA,QACnC,aAAaA,EAAE,gCAAgC;AAAA,MAAA;AAAA,MAEjD;AAAA,QACE,OAAO;AAAA,QACP,OAAOA,EAAE,qBAAqB;AAAA,QAC9B,aAAaA,EAAE,2BAA2B;AAAA,MAAA;AAAA,IAC5C;AAAA,IAEF,CAACA,CAAC;AAAA,EAAA;AAGJ,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,OAAOE,EAAE,OAAO;AAAA,MAChB,SAAAE;AAAA,MACA,YAAU;AAAA,MACV,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -3,16 +3,15 @@ import { useTranslation as A } from "react-i18next";
 import { hasActionableBlockers as K, getBlockerTranslationKeys as P, isActionableBlocker as D } from "../payrollHelpers.js";
 import { useComponentContext as C } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { Flex as B } from "../../../Common/Flex/Flex.js";
-import "react";
 import { useI18n as I } from "../../../../i18n/I18n.js";
-function M({
+function H({
   blockers: o,
   onViewBlockersClick: i,
   viewBlockersLabel: y,
   className: a
 }) {
   I("Payroll.PayrollBlocker");
-  const { t } = A("Payroll.PayrollBlocker"), { Alert: p, Button: d, Text: u, UnorderedList: x } = C();
+  const { t } = A("Payroll.PayrollBlocker"), { Alert: d, Button: p, Text: u, UnorderedList: x } = C();
   if (o.length === 0)
     return null;
   const s = o.length > 1, h = !!i && (s || K(o)), m = o.map((r) => {
@@ -29,26 +28,26 @@ function M({
     };
   }), n = y || t(s ? "viewAllBlockers" : "viewBlocker"), l = m[0];
   if (!s && l)
-    return /* @__PURE__ */ e(p, { status: "error", label: l.title, className: a, children: /* @__PURE__ */ f(B, { flexDirection: "column", gap: 8, children: [
+    return /* @__PURE__ */ e(d, { status: "error", label: l.title, className: a, children: /* @__PURE__ */ f(B, { flexDirection: "column", gap: 8, children: [
       /* @__PURE__ */ e(u, { children: l.description }),
       l.helpText && l.helpText !== l.description && /* @__PURE__ */ e(u, { variant: "supporting", size: "sm", children: l.helpText }),
-      h && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(d, { variant: "secondary", onClick: i, title: n, children: n }) })
+      h && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(p, { variant: "secondary", onClick: i, title: n, children: n }) })
     ] }) });
   const g = m.map((r) => r.title);
   return /* @__PURE__ */ e(
-    p,
+    d,
     {
       status: "error",
       label: t("multipleIssuesTitle", { count: o.length }),
       className: a,
       children: /* @__PURE__ */ f(B, { flexDirection: "column", gap: 16, children: [
         /* @__PURE__ */ e(x, { items: g }),
-        h && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(d, { variant: "secondary", onClick: i, title: n, children: n }) })
+        h && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(p, { variant: "secondary", onClick: i, title: n, children: n }) })
       ] })
     }
   );
 }
 export {
-  M as PayrollBlockerAlerts
+  H as PayrollBlockerAlerts
 };
 //# sourceMappingURL=PayrollBlockerAlerts.js.map