@gusto/embedded-react-sdk 0.25.0 → 0.27.0

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

@@ -1,38 +1,40 @@
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { useMemo as W } from "react";
+import { useMemo as k } from "react";
 import { useTranslation as v } from "react-i18next";
-import { useWireInRequestsListSuspense as T } from "@gusto/embedded-api/react-query/wireInRequestsList";
-import { usePayrollsListSuspense as x } from "@gusto/embedded-api/react-query/payrollsList";
+import { useWireInRequestsListSuspense as _ } from "@gusto/embedded-api/react-query/wireInRequestsList";
+import { usePayrollsListSuspense as E } from "@gusto/embedded-api/react-query/payrollsList";
 import u from "./WireInstructions.module.scss.js";
-import { BaseComponent as F } from "../../../Base/Base.js";
+import { BaseComponent as O } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
 import { Flex as p } from "../../../Common/Flex/Flex.js";
 import { useComponentContext as g } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useComponentDictionary as _, useI18n as A } from "../../../../i18n/I18n.js";
+import { useComponentDictionary as U, useI18n as L } from "../../../../i18n/I18n.js";
 import { payrollWireEvents as C } from "../../../../shared/constants.js";
 import { useDateFormatter as w } from "../../../../hooks/useDateFormatter.js";
-import E from "../../../../hooks/useNumberFormatter.js";
-import { useFlow as O } from "../../../Flow/useFlow.js";
-function k(n, a) {
-  const { data: i } = T({
+import B from "../../../../hooks/useNumberFormatter.js";
+import { useFlow as Y } from "../../../Flow/useFlow.js";
+function q(n, a) {
+  const { data: o } = _({
     companyUuid: n
-  }), { data: d } = x({
+  }), { data: d } = E({
     companyId: n,
     processed: !0
-  }), l = (i.wireInRequestList || []).filter(
-    (o) => o.status === "awaiting_funds"
-  ), r = l.find((o) => o.uuid === a), t = d.payrollList || [], f = W(
-    () => l.map((o) => {
-      const h = t.find((b) => b.payrollUuid === o.paymentUuid);
+  }), l = (o.wireInRequestList || []).filter(
+    (i) => i.status === "awaiting_funds"
+  ), r = l.find((i) => i.uuid === a), t = d.payrollList || [], f = k(
+    () => l.map((i) => {
+      const h = t.find((b) => b.payrollUuid === i.paymentUuid);
       return {
-        wireInRequest: o,
-        payroll: h
+        wireInRequest: i,
+        payroll: h,
+        paymentType: i.paymentType,
+        requestedAmount: i.requestedAmount ?? ""
       };
     }),
     [l, t]
   );
   return {
-    selectedInstruction: W(() => r ? {
+    selectedInstruction: k(() => r ? {
       id: r.uuid || "",
       trackingCode: r.uniqueTrackingCode || "",
       amount: parseFloat(r.requestedAmount || "0"),
@@ -47,55 +49,62 @@ function k(n, a) {
   };
 }
 function c({ label: n, value: a }) {
-  const { Text: i } = g();
+  const { Text: o } = g();
   return /* @__PURE__ */ m(p, { flexDirection: "column", gap: 8, children: [
-    /* @__PURE__ */ e(i, { className: u.fieldLabel, children: n }),
-    /* @__PURE__ */ e(i, { className: u.fieldValue, children: a })
+    /* @__PURE__ */ e(o, { className: u.fieldLabel, children: n }),
+    /* @__PURE__ */ e(o, { className: u.fieldValue, children: a })
   ] });
 }
-function U(n) {
-  return /* @__PURE__ */ e(F, { ...n, children: /* @__PURE__ */ e(B, { ...n, children: n.children }) });
+function j(n) {
+  return /* @__PURE__ */ e(O, { ...n, children: /* @__PURE__ */ e(G, { ...n, children: n.children }) });
 }
-const B = ({
+const G = ({
   companyId: n,
   wireInId: a,
-  selectedWireInId: i,
+  selectedWireInId: o,
   dictionary: d,
   onEvent: l,
   modalContainerRef: r
 }) => {
-  _("Payroll.WireInstructions", d), A("Payroll.WireInstructions");
-  const { t } = v("Payroll.WireInstructions"), { Select: f, Card: R, Text: o, UnorderedList: h, Heading: b, Alert: L } = g(), P = w(), q = E("currency"), { selectedInstruction: s, activeWireInRequestsWithPayrolls: I } = k(
+  U("Payroll.WireInstructions", d), L("Payroll.WireInstructions");
+  const { t } = v("Payroll.WireInstructions"), { Select: f, Card: A, Text: i, UnorderedList: h, Heading: b, Alert: S } = g(), D = w(), P = B("currency"), { selectedInstruction: s, activeWireInRequestsWithPayrolls: y } = q(
     n,
-    i
-  ), S = !a && I.length > 1, D = (N) => {
+    o
+  ), T = !a && y.length > 1, x = (N) => {
     l(C.PAYROLL_WIRE_INSTRUCTIONS_SELECT, {
       selectedWireInId: N
     });
   };
-  return I.length === 0 || i && !s ? /* @__PURE__ */ e(p, { flexDirection: "column", gap: 24, children: /* @__PURE__ */ e(o, { children: t("messages.noInstructions") }) }) : /* @__PURE__ */ m(p, { flexDirection: "column", gap: 24, children: [
+  return y.length === 0 || o && !s ? /* @__PURE__ */ e(p, { flexDirection: "column", gap: 24, children: /* @__PURE__ */ e(i, { children: t("messages.noInstructions") }) }) : /* @__PURE__ */ m(p, { flexDirection: "column", gap: 24, children: [
     /* @__PURE__ */ m("div", { children: [
       /* @__PURE__ */ e(b, { as: "h2", styledAs: "h3", children: t("title") }),
-      /* @__PURE__ */ e(o, { className: u.subtitle, children: t("subtitle") })
+      /* @__PURE__ */ e(i, { className: u.subtitle, children: t("subtitle") })
     ] }),
-    S && /* @__PURE__ */ e(
+    T && /* @__PURE__ */ e(
       f,
       {
         isRequired: !0,
         portalContainer: r?.current || void 0,
         label: t("selectLabel"),
-        value: i || "",
-        options: I.map(({ wireInRequest: N, payroll: y }) => ({
-          label: y?.payPeriod ? P.formatPayPeriodRange(
-            y.payPeriod.startDate,
-            y.payPeriod.endDate
-          ) : t("selectFallback"),
-          value: N.uuid || ""
-        })),
-        onChange: D
+        value: o || "",
+        options: y.map(
+          ({ wireInRequest: N, payroll: I, paymentType: R, requestedAmount: F }) => {
+            const W = I?.payPeriod ? D.formatPayPeriodRange(
+              I.payPeriod.startDate,
+              I.payPeriod.endDate
+            ) : "";
+            return {
+              label: R === "Payroll" ? W ? t("selectLabelPayroll", { payrollRange: W }) : t("selectFallback") : R === "ContractorPaymentGroup" ? t("selectLabelContractorPaymentGroup", {
+                requestedAmount: P(Number(F))
+              }) : t("selectFallback"),
+              value: N.uuid || ""
+            };
+          }
+        ),
+        onChange: x
       }
     ),
-    /* @__PURE__ */ e(L, { label: t("requirementsTitle"), disableScrollIntoView: !0, children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(S, { label: t("requirementsTitle"), disableScrollIntoView: !0, children: /* @__PURE__ */ e(
       h,
       {
         className: u.requirementsList,
@@ -107,7 +116,7 @@ const B = ({
         ]
       }
     ) }),
-    s && /* @__PURE__ */ e(p, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ m(R, { className: u.requirementsCard, children: [
+    s && /* @__PURE__ */ e(p, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ m(A, { className: u.requirementsCard, children: [
       /* @__PURE__ */ e(
         c,
         {
@@ -120,7 +129,7 @@ const B = ({
         c,
         {
           label: t("fields.amount"),
-          value: q(s.amount)
+          value: P(s.amount)
         }
       ),
       /* @__PURE__ */ e("hr", {}),
@@ -173,16 +182,16 @@ const B = ({
       )
     ] }) })
   ] });
-}, Y = ({ onEvent: n }) => {
-  A("Payroll.WireInstructions");
-  const { t: a } = v("Payroll.WireInstructions"), { Button: i } = g(), { companyId: d, selectedWireInId: l } = O(), { selectedInstruction: r } = k(d, l), t = () => {
+}, M = ({ onEvent: n }) => {
+  L("Payroll.WireInstructions");
+  const { t: a } = v("Payroll.WireInstructions"), { Button: o } = g(), { companyId: d, selectedWireInId: l } = Y(), { selectedInstruction: r } = q(d, l), t = () => {
     n(C.PAYROLL_WIRE_INSTRUCTIONS_DONE, {
       selectedWireInId: l
     });
   };
   return /* @__PURE__ */ m("div", { className: u.footer, children: [
     /* @__PURE__ */ e(
-      i,
+      o,
       {
         variant: "secondary",
         onClick: () => {
@@ -191,12 +200,12 @@ const B = ({
         children: a("cta.close")
       }
     ),
-    /* @__PURE__ */ e(i, { variant: "primary", onClick: t, isDisabled: !r, children: a("cta.confirm") })
+    /* @__PURE__ */ e(o, { variant: "primary", onClick: t, isDisabled: !r, children: a("cta.confirm") })
   ] });
 };
-U.Footer = Y;
+j.Footer = M;
 export {
-  B as Root,
-  U as WireInstructions
+  G as Root,
+  j as WireInstructions
 };
 //# sourceMappingURL=WireInstructions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"WireInstructions.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/WireInstructions/WireInstructions.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api/react-query/wireInRequestsList'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport type { ConfirmWireDetailsContextInterface } from '../ConfirmWireDetailsComponents'\nimport styles from './WireInstructions.module.scss'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useFlow } from '@/components/Flow/useFlow'\n\ninterface WireInstructionsProps extends BaseComponentInterface<'Payroll.WireInstructions'> {\n  companyId: string\n  wireInId?: string\n  selectedWireInId?: string\n  onEvent: OnEventType<EventType, unknown>\n  modalContainerRef?: React.RefObject<HTMLDivElement | null>\n}\n\ninterface WireInstructionFieldProps {\n  label: string\n  value: string\n  onCopy?: () => void\n  copyAriaLabel?: string\n  showCopiedMessage?: boolean\n  copiedMessage?: string\n}\n\nfunction useWireInstructionsState(companyId: string, selectedWireInId?: string) {\n  const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n    companyUuid: companyId,\n  })\n\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processed: true,\n  })\n\n  const activeWireInRequests = (wireInRequestsData.wireInRequestList || []).filter(\n    r => r.status === 'awaiting_funds',\n  )\n\n  const wireInInformation = activeWireInRequests.find(r => r.uuid === selectedWireInId)\n\n  const payrolls = payrollsData.payrollList || []\n\n  const activeWireInRequestsWithPayrolls = useMemo(\n    () =>\n      activeWireInRequests.map(wireInRequest => {\n        const payroll = payrolls.find(p => p.payrollUuid === wireInRequest.paymentUuid)\n        return {\n          wireInRequest,\n          payroll,\n        }\n      }),\n    [activeWireInRequests, payrolls],\n  )\n\n  const selectedInstruction = useMemo(() => {\n    if (!wireInInformation) return null\n\n    const instruction = {\n      id: wireInInformation.uuid || '',\n      trackingCode: wireInInformation.uniqueTrackingCode || '',\n      amount: parseFloat(wireInInformation.requestedAmount || '0'),\n      bankName: wireInInformation.originationBank || '',\n      bankAddress: wireInInformation.originationBankAddress || '',\n      recipientName: wireInInformation.recipientName || '',\n      recipientAddress: wireInInformation.recipientAddress || '',\n      recipientAccountNumber: wireInInformation.recipientAccountNumber || '',\n      recipientRoutingNumber: wireInInformation.recipientRoutingNumber || '',\n    }\n    return instruction\n  }, [wireInInformation])\n\n  return {\n    selectedInstruction,\n    activeWireInRequestsWithPayrolls,\n  }\n}\n\nfunction WireInstructionField({ label, value }: WireInstructionFieldProps) {\n  const { Text } = useComponentContext()\n\n  return (\n    <Flex flexDirection=\"column\" gap={8}>\n      <Text className={styles.fieldLabel}>{label}</Text>\n      <Text className={styles.fieldValue}>{value}</Text>\n    </Flex>\n  )\n}\n\nexport function WireInstructions(props: WireInstructionsProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({\n  companyId,\n  wireInId,\n  selectedWireInId,\n  dictionary,\n  onEvent,\n  modalContainerRef,\n}: WireInstructionsProps) => {\n  useComponentDictionary('Payroll.WireInstructions', dictionary)\n  useI18n('Payroll.WireInstructions')\n  const { t } = useTranslation('Payroll.WireInstructions')\n  const { Select, Card, Text, UnorderedList, Heading, Alert } = useComponentContext()\n  const dateFormatter = useDateFormatter()\n  const formatCurrency = useNumberFormatter('currency')\n\n  const { selectedInstruction, activeWireInRequestsWithPayrolls } = useWireInstructionsState(\n    companyId,\n    selectedWireInId,\n  )\n\n  const shouldShowDropdown = !wireInId && activeWireInRequestsWithPayrolls.length > 1\n\n  const handleWireInSelection = (updatedSelectedWireInId: string) => {\n    onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT, {\n      selectedWireInId: updatedSelectedWireInId,\n    })\n  }\n\n  if (activeWireInRequestsWithPayrolls.length === 0 || (selectedWireInId && !selectedInstruction)) {\n    return (\n      <Flex flexDirection=\"column\" gap={24}>\n        <Text>{t('messages.noInstructions')}</Text>\n      </Flex>\n    )\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <div>\n        <Heading as=\"h2\" styledAs=\"h3\">\n          {t('title')}\n        </Heading>\n        <Text className={styles.subtitle}>{t('subtitle')}</Text>\n      </div>\n\n      {shouldShowDropdown && (\n        <Select\n          isRequired\n          portalContainer={modalContainerRef?.current || undefined}\n          label={t('selectLabel')}\n          value={selectedWireInId || ''}\n          options={activeWireInRequestsWithPayrolls.map(({ wireInRequest, payroll }) => ({\n            label: payroll?.payPeriod\n              ? dateFormatter.formatPayPeriodRange(\n                  payroll.payPeriod.startDate,\n                  payroll.payPeriod.endDate,\n                )\n              : t('selectFallback'),\n            value: wireInRequest.uuid || '',\n          }))}\n          onChange={handleWireInSelection}\n        />\n      )}\n\n      <Alert label={t('requirementsTitle')} disableScrollIntoView>\n        <UnorderedList\n          className={styles.requirementsList}\n          items={[\n            t('requirements.trackingCode'),\n            t('requirements.amountMatch'),\n            t('requirements.usBank'),\n            t('requirements.authorized'),\n          ]}\n        />\n      </Alert>\n\n      {selectedInstruction && (\n        <Flex flexDirection=\"column\" gap={16}>\n          <Card className={styles.requirementsCard}>\n            <WireInstructionField\n              label={t('fields.trackingCode')}\n              value={selectedInstruction.trackingCode}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.amount')}\n              value={formatCurrency(selectedInstruction.amount)}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.bankName')}\n              value={selectedInstruction.bankName}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.bankAddress')}\n              value={selectedInstruction.bankAddress}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.recipientName')}\n              value={selectedInstruction.recipientName}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.recipientAddress')}\n              value={selectedInstruction.recipientAddress}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.accountNumber')}\n              value={selectedInstruction.recipientAccountNumber}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.routingNumber')}\n              value={selectedInstruction.recipientRoutingNumber}\n            />\n          </Card>\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nconst Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {\n  useI18n('Payroll.WireInstructions')\n  const { t } = useTranslation('Payroll.WireInstructions')\n  const { Button } = useComponentContext()\n  const { companyId, selectedWireInId } = useFlow<ConfirmWireDetailsContextInterface>()\n  const { selectedInstruction } = useWireInstructionsState(companyId, selectedWireInId)\n\n  const handleConfirm = () => {\n    onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE, {\n      selectedWireInId,\n    })\n  }\n\n  return (\n    <div className={styles.footer}>\n      <Button\n        variant=\"secondary\"\n        onClick={() => {\n          onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_CANCEL)\n        }}\n      >\n        {t('cta.close')}\n      </Button>\n      <Button variant=\"primary\" onClick={handleConfirm} isDisabled={!selectedInstruction}>\n        {t('cta.confirm')}\n      </Button>\n    </div>\n  )\n}\n\nWireInstructions.Footer = Footer\n"],"names":["useWireInstructionsState","companyId","selectedWireInId","wireInRequestsData","useWireInRequestsListSuspense","payrollsData","usePayrollsListSuspense","activeWireInRequests","r","wireInInformation","payrolls","activeWireInRequestsWithPayrolls","useMemo","wireInRequest","payroll","p","WireInstructionField","label","value","Text","useComponentContext","jsxs","Flex","jsx","styles","WireInstructions","props","BaseComponent","Root","wireInId","dictionary","onEvent","modalContainerRef","useComponentDictionary","useI18n","useTranslation","Select","Card","UnorderedList","Heading","Alert","dateFormatter","useDateFormatter","formatCurrency","useNumberFormatter","selectedInstruction","shouldShowDropdown","handleWireInSelection","updatedSelectedWireInId","payrollWireEvents","Footer","t","Button","useFlow","handleConfirm"],"mappings":"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"}
+{"version":3,"file":"WireInstructions.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/WireInstructions/WireInstructions.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api/react-query/wireInRequestsList'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport type { ConfirmWireDetailsContextInterface } from '../ConfirmWireDetailsComponents'\nimport styles from './WireInstructions.module.scss'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useFlow } from '@/components/Flow/useFlow'\n\ninterface WireInstructionsProps extends BaseComponentInterface<'Payroll.WireInstructions'> {\n  companyId: string\n  wireInId?: string\n  selectedWireInId?: string\n  onEvent: OnEventType<EventType, unknown>\n  modalContainerRef?: React.RefObject<HTMLDivElement | null>\n}\n\ninterface WireInstructionFieldProps {\n  label: string\n  value: string\n  onCopy?: () => void\n  copyAriaLabel?: string\n  showCopiedMessage?: boolean\n  copiedMessage?: string\n}\n\nfunction useWireInstructionsState(companyId: string, selectedWireInId?: string) {\n  const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n    companyUuid: companyId,\n  })\n\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processed: true,\n  })\n\n  const activeWireInRequests = (wireInRequestsData.wireInRequestList || []).filter(\n    r => r.status === 'awaiting_funds',\n  )\n\n  const wireInInformation = activeWireInRequests.find(r => r.uuid === selectedWireInId)\n\n  const payrolls = payrollsData.payrollList || []\n\n  const activeWireInRequestsWithPayrolls = useMemo(\n    () =>\n      activeWireInRequests.map(wireInRequest => {\n        const payroll = payrolls.find(p => p.payrollUuid === wireInRequest.paymentUuid)\n        return {\n          wireInRequest,\n          payroll,\n          paymentType: wireInRequest.paymentType,\n          requestedAmount: wireInRequest.requestedAmount ?? '',\n        }\n      }),\n    [activeWireInRequests, payrolls],\n  )\n\n  const selectedInstruction = useMemo(() => {\n    if (!wireInInformation) return null\n\n    const instruction = {\n      id: wireInInformation.uuid || '',\n      trackingCode: wireInInformation.uniqueTrackingCode || '',\n      amount: parseFloat(wireInInformation.requestedAmount || '0'),\n      bankName: wireInInformation.originationBank || '',\n      bankAddress: wireInInformation.originationBankAddress || '',\n      recipientName: wireInInformation.recipientName || '',\n      recipientAddress: wireInInformation.recipientAddress || '',\n      recipientAccountNumber: wireInInformation.recipientAccountNumber || '',\n      recipientRoutingNumber: wireInInformation.recipientRoutingNumber || '',\n    }\n    return instruction\n  }, [wireInInformation])\n\n  return {\n    selectedInstruction,\n    activeWireInRequestsWithPayrolls,\n  }\n}\n\nfunction WireInstructionField({ label, value }: WireInstructionFieldProps) {\n  const { Text } = useComponentContext()\n\n  return (\n    <Flex flexDirection=\"column\" gap={8}>\n      <Text className={styles.fieldLabel}>{label}</Text>\n      <Text className={styles.fieldValue}>{value}</Text>\n    </Flex>\n  )\n}\n\nexport function WireInstructions(props: WireInstructionsProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({\n  companyId,\n  wireInId,\n  selectedWireInId,\n  dictionary,\n  onEvent,\n  modalContainerRef,\n}: WireInstructionsProps) => {\n  useComponentDictionary('Payroll.WireInstructions', dictionary)\n  useI18n('Payroll.WireInstructions')\n  const { t } = useTranslation('Payroll.WireInstructions')\n  const { Select, Card, Text, UnorderedList, Heading, Alert } = useComponentContext()\n  const dateFormatter = useDateFormatter()\n  const formatCurrency = useNumberFormatter('currency')\n\n  const { selectedInstruction, activeWireInRequestsWithPayrolls } = useWireInstructionsState(\n    companyId,\n    selectedWireInId,\n  )\n\n  const shouldShowDropdown = !wireInId && activeWireInRequestsWithPayrolls.length > 1\n\n  const handleWireInSelection = (updatedSelectedWireInId: string) => {\n    onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT, {\n      selectedWireInId: updatedSelectedWireInId,\n    })\n  }\n\n  if (activeWireInRequestsWithPayrolls.length === 0 || (selectedWireInId && !selectedInstruction)) {\n    return (\n      <Flex flexDirection=\"column\" gap={24}>\n        <Text>{t('messages.noInstructions')}</Text>\n      </Flex>\n    )\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <div>\n        <Heading as=\"h2\" styledAs=\"h3\">\n          {t('title')}\n        </Heading>\n        <Text className={styles.subtitle}>{t('subtitle')}</Text>\n      </div>\n\n      {shouldShowDropdown && (\n        <Select\n          isRequired\n          portalContainer={modalContainerRef?.current || undefined}\n          label={t('selectLabel')}\n          value={selectedWireInId || ''}\n          options={activeWireInRequestsWithPayrolls.map(\n            ({ wireInRequest, payroll, paymentType, requestedAmount }) => {\n              const payrollRange = payroll?.payPeriod\n                ? dateFormatter.formatPayPeriodRange(\n                    payroll.payPeriod.startDate,\n                    payroll.payPeriod.endDate,\n                  )\n                : ''\n\n              return {\n                label:\n                  paymentType === 'Payroll'\n                    ? payrollRange\n                      ? t('selectLabelPayroll', { payrollRange })\n                      : t('selectFallback')\n                    : paymentType === 'ContractorPaymentGroup'\n                      ? t('selectLabelContractorPaymentGroup', {\n                          requestedAmount: formatCurrency(Number(requestedAmount)),\n                        })\n                      : t('selectFallback'),\n                value: wireInRequest.uuid || '',\n              }\n            },\n          )}\n          onChange={handleWireInSelection}\n        />\n      )}\n      <Alert label={t('requirementsTitle')} disableScrollIntoView>\n        <UnorderedList\n          className={styles.requirementsList}\n          items={[\n            t('requirements.trackingCode'),\n            t('requirements.amountMatch'),\n            t('requirements.usBank'),\n            t('requirements.authorized'),\n          ]}\n        />\n      </Alert>\n      {selectedInstruction && (\n        <Flex flexDirection=\"column\" gap={16}>\n          <Card className={styles.requirementsCard}>\n            <WireInstructionField\n              label={t('fields.trackingCode')}\n              value={selectedInstruction.trackingCode}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.amount')}\n              value={formatCurrency(selectedInstruction.amount)}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.bankName')}\n              value={selectedInstruction.bankName}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.bankAddress')}\n              value={selectedInstruction.bankAddress}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.recipientName')}\n              value={selectedInstruction.recipientName}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.recipientAddress')}\n              value={selectedInstruction.recipientAddress}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.accountNumber')}\n              value={selectedInstruction.recipientAccountNumber}\n            />\n\n            <hr />\n\n            <WireInstructionField\n              label={t('fields.routingNumber')}\n              value={selectedInstruction.recipientRoutingNumber}\n            />\n          </Card>\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nconst Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {\n  useI18n('Payroll.WireInstructions')\n  const { t } = useTranslation('Payroll.WireInstructions')\n  const { Button } = useComponentContext()\n  const { companyId, selectedWireInId } = useFlow<ConfirmWireDetailsContextInterface>()\n  const { selectedInstruction } = useWireInstructionsState(companyId, selectedWireInId)\n\n  const handleConfirm = () => {\n    onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE, {\n      selectedWireInId,\n    })\n  }\n\n  return (\n    <div className={styles.footer}>\n      <Button\n        variant=\"secondary\"\n        onClick={() => {\n          onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_CANCEL)\n        }}\n      >\n        {t('cta.close')}\n      </Button>\n      <Button variant=\"primary\" onClick={handleConfirm} isDisabled={!selectedInstruction}>\n        {t('cta.confirm')}\n      </Button>\n    </div>\n  )\n}\n\nWireInstructions.Footer = Footer\n"],"names":["useWireInstructionsState","companyId","selectedWireInId","wireInRequestsData","useWireInRequestsListSuspense","payrollsData","usePayrollsListSuspense","activeWireInRequests","r","wireInInformation","payrolls","activeWireInRequestsWithPayrolls","useMemo","wireInRequest","payroll","p","WireInstructionField","label","value","Text","useComponentContext","jsxs","Flex","jsx","styles","WireInstructions","props","BaseComponent","Root","wireInId","dictionary","onEvent","modalContainerRef","useComponentDictionary","useI18n","useTranslation","Select","Card","UnorderedList","Heading","Alert","dateFormatter","useDateFormatter","formatCurrency","useNumberFormatter","selectedInstruction","shouldShowDropdown","handleWireInSelection","updatedSelectedWireInId","payrollWireEvents","paymentType","requestedAmount","payrollRange","Footer","t","Button","useFlow","handleConfirm"],"mappings":"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"}

package/dist/components/Payroll/ConfirmWireDetails/WireInstructions/WireInstructions.module.scss.js

@@ -1,18 +1,18 @@
-const e = "_subtitle_xw5zx_5", t = "_fieldLabel_xw5zx_10", s = "_fieldValue_xw5zx_17", r = "_requirementsCard_xw5zx_23", i = "_requirementsList_xw5zx_45", _ = "_footer_xw5zx_65", l = {
+const e = "_subtitle_jbusm_5", s = "_fieldLabel_jbusm_10", t = "_fieldValue_jbusm_17", r = "_requirementsCard_jbusm_23", u = "_requirementsList_jbusm_45", i = "_footer_jbusm_65", _ = {
   subtitle: e,
-  fieldLabel: t,
-  fieldValue: s,
+  fieldLabel: s,
+  fieldValue: t,
   requirementsCard: r,
-  requirementsList: i,
-  footer: _
+  requirementsList: u,
+  footer: i
 };
 export {
-  l as default,
-  t as fieldLabel,
-  s as fieldValue,
-  _ as footer,
+  _ as default,
+  s as fieldLabel,
+  t as fieldValue,
+  i as footer,
   r as requirementsCard,
-  i as requirementsList,
+  u as requirementsList,
   e as subtitle
 };
 //# sourceMappingURL=WireInstructions.module.scss.js.map

package/dist/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.d.ts

@@ -0,0 +1,2 @@
+import { OffCycleReasonSelectionProps } from './types';
+export declare function OffCycleReasonSelection(props: OffCycleReasonSelectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,33 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { OffCycleReasonSelectionPresentation as c } from "./OffCycleReasonSelectionPresentation.js";
+import { OFF_CYCLE_REASON_DEFAULTS as f } from "./types.js";
+import { BaseComponent as m } from "../../Base/Base.js";
+import { useBase as i } from "../../Base/useBase.js";
+import { useComponentDictionary as C, useI18n as R } from "../../../i18n/I18n.js";
+import { componentEvents as p } from "../../../shared/constants.js";
+function g(e) {
+  return /* @__PURE__ */ n(m, { ...e, children: /* @__PURE__ */ n(u, { ...e }) });
+}
+function u({ dictionary: e }) {
+  C("Payroll.OffCycleReasonSelection", e), R("Payroll.OffCycleReasonSelection");
+  const { onEvent: t } = i(), [r, s] = l(null);
+  return /* @__PURE__ */ n(
+    c,
+    {
+      selectedReason: r,
+      onReasonChange: (o) => {
+        s(o);
+        const a = f[o];
+        t(p.OFF_CYCLE_SELECT_REASON, {
+          reason: o,
+          defaults: a
+        });
+      }
+    }
+  );
+}
+export {
+  g as OffCycleReasonSelection
+};
+//# sourceMappingURL=OffCycleReasonSelection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OffCycleReasonSelection.js","sources":["../../../../src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { OffCycleReasonSelectionPresentation } from './OffCycleReasonSelectionPresentation'\nimport {\n  OFF_CYCLE_REASON_DEFAULTS,\n  type OffCycleReason,\n  type OffCycleReasonSelectionProps,\n} from './types'\nimport { BaseComponent } from '@/components/Base/Base'\nimport { useBase } from '@/components/Base/useBase'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\n\nexport function OffCycleReasonSelection(props: OffCycleReasonSelectionProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props} />\n    </BaseComponent>\n  )\n}\n\nfunction Root({ dictionary }: OffCycleReasonSelectionProps) {\n  useComponentDictionary('Payroll.OffCycleReasonSelection', dictionary)\n  useI18n('Payroll.OffCycleReasonSelection')\n\n  const { onEvent } = useBase()\n  const [selectedReason, setSelectedReason] = useState<OffCycleReason | null>(null)\n\n  const handleReasonChange = (reason: OffCycleReason) => {\n    setSelectedReason(reason)\n    const defaults = OFF_CYCLE_REASON_DEFAULTS[reason]\n    onEvent(componentEvents.OFF_CYCLE_SELECT_REASON, {\n      reason,\n      defaults,\n    })\n  }\n\n  return (\n    <OffCycleReasonSelectionPresentation\n      selectedReason={selectedReason}\n      onReasonChange={handleReasonChange}\n    />\n  )\n}\n"],"names":["OffCycleReasonSelection","props","jsx","BaseComponent","Root","dictionary","useComponentDictionary","useI18n","onEvent","useBase","selectedReason","setSelectedReason","useState","OffCycleReasonSelectionPresentation","reason","defaults","OFF_CYCLE_REASON_DEFAULTS","componentEvents"],"mappings":";;;;;;;;AAYO,SAASA,EAAwBC,GAAqC;AAC3E,SACE,gBAAAC,EAACC,KAAe,GAAGF,GACjB,4BAACG,GAAA,EAAM,GAAGH,GAAO,EAAA,CACnB;AAEJ;AAEA,SAASG,EAAK,EAAE,YAAAC,KAA4C;AAC1D,EAAAC,EAAuB,mCAAmCD,CAAU,GACpEE,EAAQ,iCAAiC;AAEzC,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GACd,CAACC,GAAgBC,CAAiB,IAAIC,EAAgC,IAAI;AAWhF,SACE,gBAAAV;AAAA,IAACW;AAAA,IAAA;AAAA,MACC,gBAAAH;AAAA,MACA,gBAZuB,CAACI,MAA2B;AACrD,QAAAH,EAAkBG,CAAM;AACxB,cAAMC,IAAWC,EAA0BF,CAAM;AACjD,QAAAN,EAAQS,EAAgB,yBAAyB;AAAA,UAC/C,QAAAH;AAAA,UACA,UAAAC;AAAA,QAAA,CACD;AAAA,MACH;AAAA,IAKoB;AAAA,EAAA;AAGtB;"}

package/dist/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelectionPresentation.d.ts

@@ -0,0 +1,7 @@
+import { OffCycleReason } from './types';
+interface OffCycleReasonSelectionPresentationProps {
+    selectedReason: OffCycleReason | null;
+    onReasonChange: (reason: OffCycleReason) => void;
+}
+export declare function OffCycleReasonSelectionPresentation({ selectedReason, onReasonChange, }: OffCycleReasonSelectionPresentationProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+import { useTranslation as a } from "react-i18next";
+import { useComponentContext as p } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+function d({
+  selectedReason: e,
+  onReasonChange: n
+}) {
+  const { t: o } = a("Payroll.OffCycleReasonSelection"), { RadioGroup: t } = p(), i = c(
+    () => [
+      {
+        value: "correction",
+        label: o("options.correction.label"),
+        description: o("options.correction.description")
+      },
+      {
+        value: "bonus",
+        label: o("options.bonus.label"),
+        description: o("options.bonus.description")
+      }
+    ],
+    [o]
+  ), r = (s) => {
+    n(s);
+  };
+  return /* @__PURE__ */ l(
+    t,
+    {
+      label: o("title"),
+      options: i,
+      value: e ?? void 0,
+      onChange: r
+    }
+  );
+}
+export {
+  d as OffCycleReasonSelectionPresentation
+};
+//# sourceMappingURL=OffCycleReasonSelectionPresentation.js.map

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

@@ -0,0 +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 { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ninterface OffCycleReasonSelectionPresentationProps {\n  selectedReason: OffCycleReason | null\n  onReasonChange: (reason: OffCycleReason) => void\n}\n\nexport function OffCycleReasonSelectionPresentation({\n  selectedReason,\n  onReasonChange,\n}: OffCycleReasonSelectionPresentationProps) {\n  const { t } = useTranslation('Payroll.OffCycleReasonSelection')\n  const { RadioGroup } = useComponentContext()\n\n  const options = useMemo(\n    () => [\n      {\n        value: 'correction' as const,\n        label: t('options.correction.label'),\n        description: t('options.correction.description'),\n      },\n      {\n        value: 'bonus' as const,\n        label: t('options.bonus.label'),\n        description: t('options.bonus.description'),\n      },\n    ],\n    [t],\n  )\n\n  const handleChange = (value: string) => {\n    onReasonChange(value as OffCycleReason)\n  }\n\n  return (\n    <RadioGroup\n      label={t('title')}\n      options={options}\n      value={selectedReason ?? undefined}\n      onChange={handleChange}\n    />\n  )\n}\n"],"names":["OffCycleReasonSelectionPresentation","selectedReason","onReasonChange","t","useTranslation","RadioGroup","useComponentContext","options","useMemo","handleChange","value","jsx"],"mappings":";;;;AAUO,SAASA,EAAoC;AAAA,EAClD,gBAAAC;AAAA,EACA,gBAAAC;AACF,GAA6C;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,iCAAiC,GACxD,EAAE,YAAAC,EAAA,IAAeC,EAAA,GAEjBC,IAAUC;AAAA,IACd,MAAM;AAAA,MACJ;AAAA,QACE,OAAO;AAAA,QACP,OAAOL,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,GAGEM,IAAe,CAACC,MAAkB;AACtC,IAAAR,EAAeQ,CAAuB;AAAA,EACxC;AAEA,SACE,gBAAAC;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,OAAOF,EAAE,OAAO;AAAA,MAChB,SAAAI;AAAA,MACA,OAAON,KAAkB;AAAA,MACzB,UAAUQ;AAAA,IAAA;AAAA,EAAA;AAGhB;"}

package/dist/components/Payroll/OffCycleReasonSelection/index.d.ts

@@ -0,0 +1,5 @@
+import "./types/i18next.d.ts"
+export { OffCycleReasonSelection } from './OffCycleReasonSelection';
+export { OffCycleReasonSelectionPresentation } from './OffCycleReasonSelectionPresentation';
+export type { OffCycleReason, OffCycleReasonDefaults, OffCycleReasonSelectionProps, SelectReasonPayload, WithholdingType, } from './types';
+export { OFF_CYCLE_REASON_DEFAULTS } from './types';

package/dist/components/Payroll/OffCycleReasonSelection/types.d.ts

@@ -0,0 +1,15 @@
+import { BaseComponentInterface } from '../../Base/Base';
+export type OffCycleReason = 'bonus' | 'correction';
+export type WithholdingType = 'supplemental' | 'regular';
+export interface OffCycleReasonDefaults {
+    skipDeductions: boolean;
+    withholdingType: WithholdingType;
+}
+export declare const OFF_CYCLE_REASON_DEFAULTS: Record<OffCycleReason, OffCycleReasonDefaults>;
+export interface SelectReasonPayload {
+    reason: OffCycleReason;
+    defaults: OffCycleReasonDefaults;
+}
+export interface OffCycleReasonSelectionProps extends BaseComponentInterface<'Payroll.OffCycleReasonSelection'> {
+    companyId: string;
+}

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

@@ -0,0 +1,14 @@
+const e = {
+  bonus: {
+    skipDeductions: !0,
+    withholdingType: "supplemental"
+  },
+  correction: {
+    skipDeductions: !1,
+    withholdingType: "regular"
+  }
+};
+export {
+  e as OFF_CYCLE_REASON_DEFAULTS
+};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../src/components/Payroll/OffCycleReasonSelection/types.ts"],"sourcesContent":["import type { BaseComponentInterface } from '@/components/Base/Base'\n\nexport type OffCycleReason = 'bonus' | 'correction'\n\nexport type WithholdingType = 'supplemental' | 'regular'\n\nexport interface OffCycleReasonDefaults {\n  skipDeductions: boolean\n  withholdingType: WithholdingType\n}\n\nexport const OFF_CYCLE_REASON_DEFAULTS: Record<OffCycleReason, OffCycleReasonDefaults> = {\n  bonus: {\n    skipDeductions: true,\n    withholdingType: 'supplemental',\n  },\n  correction: {\n    skipDeductions: false,\n    withholdingType: 'regular',\n  },\n}\n\nexport interface SelectReasonPayload {\n  reason: OffCycleReason\n  defaults: OffCycleReasonDefaults\n}\n\nexport interface OffCycleReasonSelectionProps extends BaseComponentInterface<'Payroll.OffCycleReasonSelection'> {\n  companyId: string\n}\n"],"names":["OFF_CYCLE_REASON_DEFAULTS"],"mappings":"AAWO,MAAMA,IAA4E;AAAA,EACvF,OAAO;AAAA,IACL,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,EAAA;AAAA,EAEnB,YAAY;AAAA,IACV,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,EAAA;AAErB;"}

package/dist/components/Payroll/PayPeriodDateForm/PayPeriodDateForm.d.ts

@@ -0,0 +1,2 @@
+import { PayPeriodDateFormProps } from './PayPeriodDateFormTypes';
+export declare function PayPeriodDateForm(props: PayPeriodDateFormProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,35 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { useFormContext as y } from "react-hook-form";
+import { PayPeriodDateFormPresentation as u } from "./PayPeriodDateFormPresentation.js";
+import { BaseComponent as C } from "../../Base/Base.js";
+import { useBase as D } from "../../Base/useBase.js";
+import { useComponentDictionary as P, useI18n as f } from "../../../i18n/I18n.js";
+import { componentEvents as O } from "../../../shared/constants.js";
+function T(t) {
+  return /* @__PURE__ */ o(C, { ...t, children: /* @__PURE__ */ o(S, { ...t, children: t.children }) });
+}
+function S({ onEvent: t, dictionary: n, initialValues: r }) {
+  P("Payroll.PayPeriodDateForm", n), f("Payroll.PayPeriodDateForm");
+  const { baseSubmitHandler: i } = D(), { handleSubmit: m } = y(), [s, a] = h(r?.isCheckOnly ?? !1), c = async (e) => {
+    await i(e, () => (t(O.RUN_PAYROLL_DATES_CONFIGURED, {
+      isCheckOnly: e.isCheckOnly,
+      startDate: e.startDate?.toISOString().split("T")[0],
+      endDate: e.endDate?.toISOString().split("T")[0],
+      checkDate: e.checkDate?.toISOString().split("T")[0]
+    }), Promise.resolve()));
+  }, l = (e) => {
+    a(e);
+  };
+  return /* @__PURE__ */ o("form", { onSubmit: m(c), children: /* @__PURE__ */ o(
+    u,
+    {
+      isCheckOnly: s,
+      onCheckOnlyChange: l
+    }
+  ) });
+}
+export {
+  T as PayPeriodDateForm
+};
+//# sourceMappingURL=PayPeriodDateForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayPeriodDateForm.js","sources":["../../../../src/components/Payroll/PayPeriodDateForm/PayPeriodDateForm.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { PayPeriodDateFormPresentation } from './PayPeriodDateFormPresentation'\nimport { type PayPeriodDateFormData, type PayPeriodDateFormProps } from './PayPeriodDateFormTypes'\nimport { BaseComponent, useBase } from '@/components/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\n\nexport function PayPeriodDateForm(props: PayPeriodDateFormProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nfunction Root({ onEvent, dictionary, initialValues }: PayPeriodDateFormProps) {\n  useComponentDictionary('Payroll.PayPeriodDateForm', dictionary)\n  useI18n('Payroll.PayPeriodDateForm')\n  const { baseSubmitHandler } = useBase()\n\n  const { handleSubmit } = useFormContext<PayPeriodDateFormData>()\n\n  const [isCheckOnly, setIsCheckOnly] = useState(initialValues?.isCheckOnly ?? false)\n\n  const onSubmit = async (data: PayPeriodDateFormData) => {\n    await baseSubmitHandler(data, () => {\n      onEvent(componentEvents.RUN_PAYROLL_DATES_CONFIGURED, {\n        isCheckOnly: data.isCheckOnly,\n        startDate: data.startDate?.toISOString().split('T')[0],\n        endDate: data.endDate?.toISOString().split('T')[0],\n        checkDate: data.checkDate?.toISOString().split('T')[0],\n      })\n      return Promise.resolve()\n    })\n  }\n\n  const handleCheckOnlyChange = (checked: boolean) => {\n    setIsCheckOnly(checked)\n  }\n\n  return (\n    <form onSubmit={handleSubmit(onSubmit)}>\n      <PayPeriodDateFormPresentation\n        isCheckOnly={isCheckOnly}\n        onCheckOnlyChange={handleCheckOnlyChange}\n      />\n    </form>\n  )\n}\n"],"names":["PayPeriodDateForm","props","jsx","BaseComponent","Root","onEvent","dictionary","initialValues","useComponentDictionary","useI18n","baseSubmitHandler","useBase","handleSubmit","useFormContext","isCheckOnly","setIsCheckOnly","useState","onSubmit","data","componentEvents","handleCheckOnlyChange","checked","PayPeriodDateFormPresentation"],"mappings":";;;;;;;;AAQO,SAASA,EAAkBC,GAA+B;AAC/D,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,SAASG,EAAK,EAAE,SAAAC,GAAS,YAAAC,GAAY,eAAAC,KAAyC;AAC5E,EAAAC,EAAuB,6BAA6BF,CAAU,GAC9DG,EAAQ,2BAA2B;AACnC,QAAM,EAAE,mBAAAC,EAAA,IAAsBC,EAAA,GAExB,EAAE,cAAAC,EAAA,IAAiBC,EAAA,GAEnB,CAACC,GAAaC,CAAc,IAAIC,EAAST,GAAe,eAAe,EAAK,GAE5EU,IAAW,OAAOC,MAAgC;AACtD,UAAMR,EAAkBQ,GAAM,OAC5Bb,EAAQc,EAAgB,8BAA8B;AAAA,MACpD,aAAaD,EAAK;AAAA,MAClB,WAAWA,EAAK,WAAW,YAAA,EAAc,MAAM,GAAG,EAAE,CAAC;AAAA,MACrD,SAASA,EAAK,SAAS,YAAA,EAAc,MAAM,GAAG,EAAE,CAAC;AAAA,MACjD,WAAWA,EAAK,WAAW,YAAA,EAAc,MAAM,GAAG,EAAE,CAAC;AAAA,IAAA,CACtD,GACM,QAAQ,QAAA,EAChB;AAAA,EACH,GAEME,IAAwB,CAACC,MAAqB;AAClD,IAAAN,EAAeM,CAAO;AAAA,EACxB;AAEA,SACE,gBAAAnB,EAAC,QAAA,EAAK,UAAUU,EAAaK,CAAQ,GACnC,UAAA,gBAAAf;AAAA,IAACoB;AAAA,IAAA;AAAA,MACC,aAAAR;AAAA,MACA,mBAAmBM;AAAA,IAAA;AAAA,EAAA,GAEvB;AAEJ;"}

package/dist/components/Payroll/PayPeriodDateForm/PayPeriodDateFormPresentation.d.ts

@@ -0,0 +1,2 @@
+import { PayPeriodDateFormPresentationProps } from './PayPeriodDateFormTypes';
+export declare function PayPeriodDateFormPresentation({ isCheckOnly, onCheckOnlyChange, isPending, }: Omit<PayPeriodDateFormPresentationProps, 'payrollType' | 'minCheckDate'>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,65 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useFormContext as D, useWatch as b } from "react-hook-form";
+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,
+  onCheckOnlyChange: l,
+  isPending: c
+}) {
+  const { Heading: d, Text: m, Button: p } = 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));
+  };
+  return /* @__PURE__ */ i("div", { className: a.root, children: [
+    /* @__PURE__ */ i("div", { className: a.sectionHeader, children: [
+      /* @__PURE__ */ t(d, { as: "h2", children: e("pageTitle") }),
+      /* @__PURE__ */ t(m, { variant: "supporting", children: e("description") })
+    ] }),
+    /* @__PURE__ */ i("div", { className: a.formSection, children: [
+      !o && /* @__PURE__ */ i("div", { className: a.dateFields, children: [
+        /* @__PURE__ */ t(r, { name: "startDate", label: e("startDateLabel"), isRequired: !0 }),
+        /* @__PURE__ */ t(
+          r,
+          {
+            name: "endDate",
+            label: e("endDateLabel"),
+            isRequired: !0,
+            isDisabled: !h
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: a.checkDateField, children: /* @__PURE__ */ t(
+        r,
+        {
+          name: "checkDate",
+          label: e("checkDateLabel"),
+          description: o ? void 0 : e("checkDateDescription"),
+          isRequired: !0
+        }
+      ) }),
+      /* @__PURE__ */ t(
+        k,
+        {
+          name: "isCheckOnly",
+          label: e("checkOnlyLabel"),
+          description: e("checkOnlyDescription"),
+          onChange: u
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { className: a.actions, children: /* @__PURE__ */ t(p, { type: "submit", isDisabled: c, children: e("continueButton") }) })
+  ] });
+}
+export {
+  j as PayPeriodDateFormPresentation
+};
+//# sourceMappingURL=PayPeriodDateFormPresentation.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,18 @@
+const t = "_root_h0at5_1", e = "_sectionHeader_h0at5_7", o = "_formSection_h0at5_13", c = "_dateFields_h0at5_19", a = "_checkDateField_h0at5_28", s = "_actions_h0at5_32", _ = {
+  root: t,
+  sectionHeader: e,
+  formSection: o,
+  dateFields: c,
+  checkDateField: a,
+  actions: s
+};
+export {
+  s as actions,
+  a as checkDateField,
+  c as dateFields,
+  _ as default,
+  o as formSection,
+  t as root,
+  e as sectionHeader
+};
+//# sourceMappingURL=PayPeriodDateFormPresentation.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayPeriodDateFormPresentation.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}