@gusto/embedded-react-sdk 0.55.7 → 0.56.0

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

@@ -1,39 +1,40 @@
 import { jsx as n, jsxs as h } from "react/jsx-runtime";
-import { useTranslation as v } from "react-i18next";
-import { useWireInRequestsListSuspense as M } from "@gusto/embedded-api/react-query/wireInRequestsList";
-import { usePayrollsListSuspense as N } from "@gusto/embedded-api/react-query/payrollsList";
-import { useState as Z, useEffect as _ } from "react";
-import { BaseComponent as j } from "../../../Base/Base.js";
+import { useTranslation as M } from "react-i18next";
+import { useWireInRequestsListSuspense as N } from "@gusto/embedded-api/react-query/wireInRequestsList";
+import { usePayrollsListSuspense as Z } from "@gusto/embedded-api/react-query/payrollsList";
+import { useState as _, useEffect as j } from "react";
+import { BaseComponent as k } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
-import { useComponentContext as k } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useComponentDictionary as E, useI18n as G } from "../../../../i18n/I18n.js";
+import { useComponentContext as E } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useComponentDictionary as G, useI18n as z } from "../../../../i18n/I18n.js";
 import { Flex as g } from "../../../Common/Flex/Flex.js";
-import { useDateFormatter as z } from "../../../../hooks/useDateFormatter.js";
-import H from "../../../../hooks/useNumberFormatter.js";
-function ie(i) {
-  return /* @__PURE__ */ n(j, { ...i, children: /* @__PURE__ */ n(J, { ...i, children: i.children }) });
+import { useDateFormatter as H } from "../../../../hooks/useDateFormatter.js";
+import J from "../../../../hooks/useNumberFormatter.js";
+function se(i) {
+  return /* @__PURE__ */ n(k, { ...i, children: /* @__PURE__ */ n(K, { ...i, children: i.children }) });
 }
-const J = ({
+const K = ({
   wireInId: i,
   companyId: u,
   dictionary: D,
   confirmationAlert: l,
-  onStartWireTransfer: C
+  onStartWireTransfer: C,
+  className: P
 }) => {
-  E("Payroll.ConfirmWireDetailsBanner", D), G("Payroll.ConfirmWireDetailsBanner");
-  const { t: s } = v("Payroll.ConfirmWireDetailsBanner"), { Alert: P, Banner: L, Button: R, UnorderedList: b, Text: c } = k(), q = z(), [w, d] = Z(!1), S = H("currency");
-  _(() => {
+  G("Payroll.ConfirmWireDetailsBanner", D), z("Payroll.ConfirmWireDetailsBanner");
+  const { t: s } = M("Payroll.ConfirmWireDetailsBanner"), { Alert: L, Banner: R, Button: b, UnorderedList: q, Text: c } = E(), w = H(), [S, d] = _(!1), B = J("currency");
+  j(() => {
     l && d(!1);
   }, [l]);
-  const { data: B } = M({
+  const { data: W } = N({
     companyUuid: u
-  }), { data: W } = N({
+  }), { data: x } = Z({
     companyId: u,
     processed: !0
-  }), p = (B.wireInRequestList || []).filter(
+  }), p = (W.wireInRequestList || []).filter(
     (e) => e.status === "awaiting_funds"
-  ), x = i ? p.filter((e) => e.uuid === i) : p, A = W.payrollList || [], r = x.map((e) => {
-    const t = A.find((o) => o.payrollUuid === e.paymentUuid), a = t?.payPeriod ? q.formatPayPeriodRange(t.payPeriod.startDate, t.payPeriod.endDate) : "";
+  ), A = i ? p.filter((e) => e.uuid === i) : p, T = x.payrollList || [], r = A.map((e) => {
+    const t = T.find((o) => o.payrollUuid === e.paymentUuid), a = t?.payPeriod ? w.formatPayPeriodRange(t.payPeriod.startDate, t.payPeriod.endDate) : "";
     return {
       wireInRequest: e,
       payroll: t,
@@ -41,49 +42,49 @@ const J = ({
       paymentType: e.paymentType,
       requestedAmount: e.requestedAmount ?? ""
     };
-  }), f = r.length > 0 && (r.length > 1 || r[0]?.wireInRequest), y = !w && l;
+  }), f = r.length > 0 && (r.length > 1 || r[0]?.wireInRequest), y = !S && l;
   if (!f && !y)
     return null;
-  const T = (e) => {
+  const I = (e) => {
     const t = new Date(e), o = t.toLocaleTimeString("en-US", {
       hour: "numeric",
       minute: t.getMinutes() === 0 ? void 0 : "2-digit",
       hour12: !0,
       timeZone: "America/Los_Angeles",
       timeZoneName: "short"
-    }).replace(/\s?(AM|PM)/i, (F) => F.trim().toLowerCase()), m = t.toLocaleDateString("en-US", {
+    }).replace(/\s?(AM|PM)/i, (v) => v.trim().toLowerCase()), m = t.toLocaleDateString("en-US", {
       month: "long",
       day: "numeric",
       year: "numeric",
       timeZone: "America/Los_Angeles"
     });
     return { time: o, date: m };
-  }, I = () => {
+  }, U = () => {
     const e = r.length === 1, { wireInRequest: t, payrollRange: a } = r[0] || {};
     if (e) {
       if (i && t?.wireInDeadline) {
-        const { time: o, date: m } = T(t.wireInDeadline);
+        const { time: o, date: m } = I(t.wireInDeadline);
         return s("banner.title", { time: o, date: m });
       }
       return s("banner.titleWithPayroll", { payrollRange: a });
     }
     return s("banner.titleMultiple", { count: r.length });
-  }, U = () => {
+  }, F = () => {
     if (r.length > 1)
       return /* @__PURE__ */ n(
-        b,
+        q,
         {
           items: r.map(
             ({ paymentType: e, payrollRange: t, requestedAmount: a }, o) => e === "Payroll" ? /* @__PURE__ */ n(c, { children: s("banner.requestLabelPayroll", { payrollRange: t }) }, o) : /* @__PURE__ */ n(c, { children: s("banner.requestLabelContractorPaymentGroup", {
-              requestedAmount: S(Number(a))
+              requestedAmount: B(Number(a))
             }) }, o)
           )
         }
       );
   };
-  return /* @__PURE__ */ h(g, { flexDirection: "column", gap: 16, children: [
+  return /* @__PURE__ */ h(g, { className: P, flexDirection: "column", gap: 16, children: [
     y && /* @__PURE__ */ n(
-      P,
+      L,
       {
         status: "success",
         label: l.title,
@@ -93,14 +94,14 @@ const J = ({
         children: l.content
       }
     ),
-    f && /* @__PURE__ */ n(L, { status: "warning", title: I(), children: /* @__PURE__ */ h(g, { flexDirection: "column", gap: 16, alignItems: "flex-start", children: [
+    f && /* @__PURE__ */ n(R, { status: "warning", title: U(), children: /* @__PURE__ */ h(g, { flexDirection: "column", gap: 16, alignItems: "flex-start", children: [
       /* @__PURE__ */ n("div", { children: s("banner.description") }),
-      U(),
-      /* @__PURE__ */ n(R, { variant: "secondary", onClick: C, children: s("cta.startWireTransfer") })
+      F(),
+      /* @__PURE__ */ n(b, { variant: "secondary", onClick: C, children: s("cta.startWireTransfer") })
     ] }) })
   ] });
 };
 export {
-  ie as ConfirmWireDetailsBanner
+  se as ConfirmWireDetailsBanner
 };
 //# sourceMappingURL=ConfirmWireDetailsBanner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmWireDetailsBanner.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsBanner/ConfirmWireDetailsBanner.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api/react-query/wireInRequestsList'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport { useState, useEffect } from 'react'\nimport type { ConfirmationAlert } from '../types'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\n\ninterface ConfirmWireDetailsBannerProps extends BaseComponentInterface<'Payroll.ConfirmWireDetailsBanner'> {\n  wireInId?: string\n  companyId: string\n  confirmationAlert?: ConfirmationAlert\n  onStartWireTransfer: () => void\n}\n\n/** @internal */\nexport function ConfirmWireDetailsBanner(props: ConfirmWireDetailsBannerProps) {\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  confirmationAlert,\n  onStartWireTransfer,\n}: ConfirmWireDetailsBannerProps) => {\n  useComponentDictionary('Payroll.ConfirmWireDetailsBanner', dictionary)\n  useI18n('Payroll.ConfirmWireDetailsBanner')\n  const { t } = useTranslation('Payroll.ConfirmWireDetailsBanner')\n  const { Alert, Banner, Button, UnorderedList, Text } = useComponentContext()\n  const dateFormatter = useDateFormatter()\n  const [isConfirmationAlertDismissed, setIsConfirmationAlertDismissed] = useState(false)\n  const currencyFormatter = useNumberFormatter('currency')\n\n  useEffect(() => {\n    if (confirmationAlert) {\n      setIsConfirmationAlertDismissed(false)\n    }\n  }, [confirmationAlert])\n\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    request => request.status === 'awaiting_funds',\n  )\n  const wireInRequests = wireInId\n    ? activeWireInRequests.filter(request => request.uuid === wireInId)\n    : activeWireInRequests\n\n  const payrolls = payrollsData.payrollList || []\n\n  const wireInRequestsWithPayrolls = wireInRequests.map(wireInRequest => {\n    const payroll = payrolls.find(p => p.payrollUuid === wireInRequest.paymentUuid)\n    const payrollRange = payroll?.payPeriod\n      ? dateFormatter.formatPayPeriodRange(payroll.payPeriod.startDate, payroll.payPeriod.endDate)\n      : ''\n    return {\n      wireInRequest,\n      payroll,\n      payrollRange,\n      paymentType: wireInRequest.paymentType,\n      requestedAmount: wireInRequest.requestedAmount ?? '',\n    }\n  })\n\n  const shouldShowBanner =\n    wireInRequestsWithPayrolls.length > 0 &&\n    (wireInRequestsWithPayrolls.length > 1 || wireInRequestsWithPayrolls[0]?.wireInRequest)\n\n  const shouldShowConfirmationAlert = !isConfirmationAlertDismissed && confirmationAlert\n\n  if (!shouldShowBanner && !shouldShowConfirmationAlert) {\n    return null\n  }\n\n  const formatDeadline = (deadline: string) => {\n    const date = new Date(deadline)\n\n    const timeRaw = date.toLocaleTimeString('en-US', {\n      hour: 'numeric',\n      minute: date.getMinutes() === 0 ? undefined : '2-digit',\n      hour12: true,\n      timeZone: 'America/Los_Angeles',\n      timeZoneName: 'short',\n    })\n\n    const time = timeRaw.replace(/\\s?(AM|PM)/i, match => match.trim().toLowerCase())\n\n    const dateString = date.toLocaleDateString('en-US', {\n      month: 'long',\n      day: 'numeric',\n      year: 'numeric',\n      timeZone: 'America/Los_Angeles',\n    })\n\n    return { time, date: dateString }\n  }\n\n  const getBannerTitle = () => {\n    const isSingleWireInRequest = wireInRequestsWithPayrolls.length === 1\n    const { wireInRequest, payrollRange } = wireInRequestsWithPayrolls[0] || {}\n\n    if (isSingleWireInRequest) {\n      if (wireInId && wireInRequest?.wireInDeadline) {\n        const { time, date } = formatDeadline(wireInRequest.wireInDeadline)\n        return t('banner.title', { time, date })\n      }\n      return t('banner.titleWithPayroll', { payrollRange })\n    }\n    return t('banner.titleMultiple', { count: wireInRequestsWithPayrolls.length })\n  }\n\n  const getBannerContent = () => {\n    if (wireInRequestsWithPayrolls.length > 1) {\n      return (\n        <UnorderedList\n          items={wireInRequestsWithPayrolls.map(\n            ({ paymentType, payrollRange, requestedAmount }, index) =>\n              paymentType === 'Payroll' ? (\n                <Text key={index}>{t('banner.requestLabelPayroll', { payrollRange })}</Text>\n              ) : (\n                <Text key={index}>\n                  {t('banner.requestLabelContractorPaymentGroup', {\n                    requestedAmount: currencyFormatter(Number(requestedAmount)),\n                  })}\n                </Text>\n              ),\n          )}\n        />\n      )\n    }\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {shouldShowConfirmationAlert && (\n        <Alert\n          status=\"success\"\n          label={confirmationAlert.title}\n          onDismiss={() => {\n            setIsConfirmationAlertDismissed(true)\n          }}\n        >\n          {confirmationAlert.content}\n        </Alert>\n      )}\n      {shouldShowBanner && (\n        <Banner status=\"warning\" title={getBannerTitle()}>\n          <Flex flexDirection=\"column\" gap={16} alignItems=\"flex-start\">\n            <div>{t('banner.description')}</div>\n            {getBannerContent()}\n            <Button variant=\"secondary\" onClick={onStartWireTransfer}>\n              {t('cta.startWireTransfer')}\n            </Button>\n          </Flex>\n        </Banner>\n      )}\n    </Flex>\n  )\n}\n"],"names":["ConfirmWireDetailsBanner","props","jsx","BaseComponent","Root","wireInId","companyId","dictionary","confirmationAlert","onStartWireTransfer","useComponentDictionary","useI18n","t","useTranslation","Alert","Banner","Button","UnorderedList","Text","useComponentContext","dateFormatter","useDateFormatter","isConfirmationAlertDismissed","setIsConfirmationAlertDismissed","useState","currencyFormatter","useNumberFormatter","useEffect","wireInRequestsData","useWireInRequestsListSuspense","payrollsData","usePayrollsListSuspense","activeWireInRequests","request","wireInRequests","payrolls","wireInRequestsWithPayrolls","wireInRequest","payroll","p","payrollRange","shouldShowBanner","shouldShowConfirmationAlert","formatDeadline","deadline","date","time","match","dateString","getBannerTitle","isSingleWireInRequest","getBannerContent","paymentType","requestedAmount","index","jsxs","Flex"],"mappings":"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"}
+{"version":3,"file":"ConfirmWireDetailsBanner.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsBanner/ConfirmWireDetailsBanner.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api/react-query/wireInRequestsList'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport { useState, useEffect } from 'react'\nimport type { ConfirmationAlert } from '../types'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\n\ninterface ConfirmWireDetailsBannerProps extends BaseComponentInterface<'Payroll.ConfirmWireDetailsBanner'> {\n  wireInId?: string\n  companyId: string\n  confirmationAlert?: ConfirmationAlert\n  onStartWireTransfer: () => void\n}\n\n/** @internal */\nexport function ConfirmWireDetailsBanner(props: ConfirmWireDetailsBannerProps) {\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  confirmationAlert,\n  onStartWireTransfer,\n  className,\n}: ConfirmWireDetailsBannerProps) => {\n  useComponentDictionary('Payroll.ConfirmWireDetailsBanner', dictionary)\n  useI18n('Payroll.ConfirmWireDetailsBanner')\n  const { t } = useTranslation('Payroll.ConfirmWireDetailsBanner')\n  const { Alert, Banner, Button, UnorderedList, Text } = useComponentContext()\n  const dateFormatter = useDateFormatter()\n  const [isConfirmationAlertDismissed, setIsConfirmationAlertDismissed] = useState(false)\n  const currencyFormatter = useNumberFormatter('currency')\n\n  useEffect(() => {\n    if (confirmationAlert) {\n      setIsConfirmationAlertDismissed(false)\n    }\n  }, [confirmationAlert])\n\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    request => request.status === 'awaiting_funds',\n  )\n  const wireInRequests = wireInId\n    ? activeWireInRequests.filter(request => request.uuid === wireInId)\n    : activeWireInRequests\n\n  const payrolls = payrollsData.payrollList || []\n\n  const wireInRequestsWithPayrolls = wireInRequests.map(wireInRequest => {\n    const payroll = payrolls.find(p => p.payrollUuid === wireInRequest.paymentUuid)\n    const payrollRange = payroll?.payPeriod\n      ? dateFormatter.formatPayPeriodRange(payroll.payPeriod.startDate, payroll.payPeriod.endDate)\n      : ''\n    return {\n      wireInRequest,\n      payroll,\n      payrollRange,\n      paymentType: wireInRequest.paymentType,\n      requestedAmount: wireInRequest.requestedAmount ?? '',\n    }\n  })\n\n  const shouldShowBanner =\n    wireInRequestsWithPayrolls.length > 0 &&\n    (wireInRequestsWithPayrolls.length > 1 || wireInRequestsWithPayrolls[0]?.wireInRequest)\n\n  const shouldShowConfirmationAlert = !isConfirmationAlertDismissed && confirmationAlert\n\n  if (!shouldShowBanner && !shouldShowConfirmationAlert) {\n    return null\n  }\n\n  const formatDeadline = (deadline: string) => {\n    const date = new Date(deadline)\n\n    const timeRaw = date.toLocaleTimeString('en-US', {\n      hour: 'numeric',\n      minute: date.getMinutes() === 0 ? undefined : '2-digit',\n      hour12: true,\n      timeZone: 'America/Los_Angeles',\n      timeZoneName: 'short',\n    })\n\n    const time = timeRaw.replace(/\\s?(AM|PM)/i, match => match.trim().toLowerCase())\n\n    const dateString = date.toLocaleDateString('en-US', {\n      month: 'long',\n      day: 'numeric',\n      year: 'numeric',\n      timeZone: 'America/Los_Angeles',\n    })\n\n    return { time, date: dateString }\n  }\n\n  const getBannerTitle = () => {\n    const isSingleWireInRequest = wireInRequestsWithPayrolls.length === 1\n    const { wireInRequest, payrollRange } = wireInRequestsWithPayrolls[0] || {}\n\n    if (isSingleWireInRequest) {\n      if (wireInId && wireInRequest?.wireInDeadline) {\n        const { time, date } = formatDeadline(wireInRequest.wireInDeadline)\n        return t('banner.title', { time, date })\n      }\n      return t('banner.titleWithPayroll', { payrollRange })\n    }\n    return t('banner.titleMultiple', { count: wireInRequestsWithPayrolls.length })\n  }\n\n  const getBannerContent = () => {\n    if (wireInRequestsWithPayrolls.length > 1) {\n      return (\n        <UnorderedList\n          items={wireInRequestsWithPayrolls.map(\n            ({ paymentType, payrollRange, requestedAmount }, index) =>\n              paymentType === 'Payroll' ? (\n                <Text key={index}>{t('banner.requestLabelPayroll', { payrollRange })}</Text>\n              ) : (\n                <Text key={index}>\n                  {t('banner.requestLabelContractorPaymentGroup', {\n                    requestedAmount: currencyFormatter(Number(requestedAmount)),\n                  })}\n                </Text>\n              ),\n          )}\n        />\n      )\n    }\n  }\n\n  return (\n    <Flex className={className} flexDirection=\"column\" gap={16}>\n      {shouldShowConfirmationAlert && (\n        <Alert\n          status=\"success\"\n          label={confirmationAlert.title}\n          onDismiss={() => {\n            setIsConfirmationAlertDismissed(true)\n          }}\n        >\n          {confirmationAlert.content}\n        </Alert>\n      )}\n      {shouldShowBanner && (\n        <Banner status=\"warning\" title={getBannerTitle()}>\n          <Flex flexDirection=\"column\" gap={16} alignItems=\"flex-start\">\n            <div>{t('banner.description')}</div>\n            {getBannerContent()}\n            <Button variant=\"secondary\" onClick={onStartWireTransfer}>\n              {t('cta.startWireTransfer')}\n            </Button>\n          </Flex>\n        </Banner>\n      )}\n    </Flex>\n  )\n}\n"],"names":["ConfirmWireDetailsBanner","props","jsx","BaseComponent","Root","wireInId","companyId","dictionary","confirmationAlert","onStartWireTransfer","className","useComponentDictionary","useI18n","t","useTranslation","Alert","Banner","Button","UnorderedList","Text","useComponentContext","dateFormatter","useDateFormatter","isConfirmationAlertDismissed","setIsConfirmationAlertDismissed","useState","currencyFormatter","useNumberFormatter","useEffect","wireInRequestsData","useWireInRequestsListSuspense","payrollsData","usePayrollsListSuspense","activeWireInRequests","request","wireInRequests","payrolls","wireInRequestsWithPayrolls","wireInRequest","payroll","p","payrollRange","shouldShowBanner","shouldShowConfirmationAlert","formatDeadline","deadline","date","time","match","dateString","getBannerTitle","isSingleWireInRequest","getBannerContent","paymentType","requestedAmount","index","Flex","jsxs"],"mappings":";;;;;;;;;;;;AAoBO,SAASA,GAAyBC,GAAsC;AAC7E,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,MAAMG,IAAO,CAAC;AAAA,EACZ,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,WAAAC;AACF,MAAqC;AACnC,EAAAC,EAAuB,oCAAoCJ,CAAU,GACrEK,EAAQ,kCAAkC;AAC1C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,kCAAkC,GACzD,EAAE,OAAAC,GAAO,QAAAC,GAAQ,QAAAC,GAAQ,eAAAC,GAAe,MAAAC,EAAA,IAASC,EAAA,GACjDC,IAAgBC,EAAA,GAChB,CAACC,GAA8BC,CAA+B,IAAIC,EAAS,EAAK,GAChFC,IAAoBC,EAAmB,UAAU;AAEvD,EAAAC,EAAU,MAAM;AACd,IAAIpB,KACFgB,EAAgC,EAAK;AAAA,EAEzC,GAAG,CAAChB,CAAiB,CAAC;AAEtB,QAAM,EAAE,MAAMqB,EAAA,IAAuBC,EAA8B;AAAA,IACjE,aAAaxB;AAAA,EAAA,CACd,GAEK,EAAE,MAAMyB,EAAA,IAAiBC,EAAwB;AAAA,IACrD,WAAA1B;AAAA,IACA,WAAW;AAAA,EAAA,CACZ,GAEK2B,KAAwBJ,EAAmB,qBAAqB,CAAA,GAAI;AAAA,IACxE,CAAAK,MAAWA,EAAQ,WAAW;AAAA,EAAA,GAE1BC,IAAiB9B,IACnB4B,EAAqB,OAAO,OAAWC,EAAQ,SAAS7B,CAAQ,IAChE4B,GAEEG,IAAWL,EAAa,eAAe,CAAA,GAEvCM,IAA6BF,EAAe,IAAI,CAAAG,MAAiB;AACrE,UAAMC,IAAUH,EAAS,KAAK,OAAKI,EAAE,gBAAgBF,EAAc,WAAW,GACxEG,IAAeF,GAAS,YAC1BlB,EAAc,qBAAqBkB,EAAQ,UAAU,WAAWA,EAAQ,UAAU,OAAO,IACzF;AACJ,WAAO;AAAA,MACL,eAAAD;AAAA,MACA,SAAAC;AAAA,MACA,cAAAE;AAAA,MACA,aAAaH,EAAc;AAAA,MAC3B,iBAAiBA,EAAc,mBAAmB;AAAA,IAAA;AAAA,EAEtD,CAAC,GAEKI,IACJL,EAA2B,SAAS,MACnCA,EAA2B,SAAS,KAAKA,EAA2B,CAAC,GAAG,gBAErEM,IAA8B,CAACpB,KAAgCf;AAErE,MAAI,CAACkC,KAAoB,CAACC;AACxB,WAAO;AAGT,QAAMC,IAAiB,CAACC,MAAqB;AAC3C,UAAMC,IAAO,IAAI,KAAKD,CAAQ,GAUxBE,IARUD,EAAK,mBAAmB,SAAS;AAAA,MAC/C,MAAM;AAAA,MACN,QAAQA,EAAK,WAAA,MAAiB,IAAI,SAAY;AAAA,MAC9C,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,cAAc;AAAA,IAAA,CACf,EAEoB,QAAQ,eAAe,OAASE,EAAM,OAAO,aAAa,GAEzEC,IAAaH,EAAK,mBAAmB,SAAS;AAAA,MAClD,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA,CACX;AAED,WAAO,EAAE,MAAAC,GAAM,MAAME,EAAA;AAAA,EACvB,GAEMC,IAAiB,MAAM;AAC3B,UAAMC,IAAwBd,EAA2B,WAAW,GAC9D,EAAE,eAAAC,GAAe,cAAAG,EAAA,IAAiBJ,EAA2B,CAAC,KAAK,CAAA;AAEzE,QAAIc,GAAuB;AACzB,UAAI9C,KAAYiC,GAAe,gBAAgB;AAC7C,cAAM,EAAE,MAAAS,GAAM,MAAAD,EAAA,IAASF,EAAeN,EAAc,cAAc;AAClE,eAAOzB,EAAE,gBAAgB,EAAE,MAAAkC,GAAM,MAAAD,GAAM;AAAA,MACzC;AACA,aAAOjC,EAAE,2BAA2B,EAAE,cAAA4B,GAAc;AAAA,IACtD;AACA,WAAO5B,EAAE,wBAAwB,EAAE,OAAOwB,EAA2B,QAAQ;AAAA,EAC/E,GAEMe,IAAmB,MAAM;AAC7B,QAAIf,EAA2B,SAAS;AACtC,aACE,gBAAAnC;AAAA,QAACgB;AAAA,QAAA;AAAA,UACC,OAAOmB,EAA2B;AAAA,YAChC,CAAC,EAAE,aAAAgB,GAAa,cAAAZ,GAAc,iBAAAa,KAAmBC,MAC/CF,MAAgB,YACd,gBAAAnD,EAACiB,GAAA,EAAkB,YAAE,8BAA8B,EAAE,cAAAsB,GAAc,EAAA,GAAxDc,CAA0D,IAErE,gBAAArD,EAACiB,GAAA,EACE,UAAAN,EAAE,6CAA6C;AAAA,cAC9C,iBAAiBa,EAAkB,OAAO4B,CAAe,CAAC;AAAA,YAAA,CAC3D,KAHQC,CAIX;AAAA,UAAA;AAAA,QAEN;AAAA,MAAA;AAAA,EAIR;AAEA,2BACGC,GAAA,EAAK,WAAA9C,GAAsB,eAAc,UAAS,KAAK,IACrD,UAAA;AAAA,IAAAiC,KACC,gBAAAzC;AAAA,MAACa;AAAA,MAAA;AAAA,QACC,QAAO;AAAA,QACP,OAAOP,EAAkB;AAAA,QACzB,WAAW,MAAM;AACf,UAAAgB,EAAgC,EAAI;AAAA,QACtC;AAAA,QAEC,UAAAhB,EAAkB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtBkC,KACC,gBAAAxC,EAACc,GAAA,EAAO,QAAO,WAAU,OAAOkC,EAAA,GAC9B,UAAA,gBAAAO,EAACD,KAAK,eAAc,UAAS,KAAK,IAAI,YAAW,cAC/C,UAAA;AAAA,MAAA,gBAAAtD,EAAC,OAAA,EAAK,UAAAW,EAAE,oBAAoB,EAAA,CAAE;AAAA,MAC7BuC,EAAA;AAAA,MACD,gBAAAlD,EAACe,KAAO,SAAQ,aAAY,SAASR,GAClC,UAAAI,EAAE,uBAAuB,EAAA,CAC5B;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -1,48 +1,54 @@
 import { jsx as d } from "react/jsx-runtime";
-import { useEffect as A, useMemo as y, useState as O } from "react";
-import { usePaySchedulesGetUnprocessedTerminationPeriodsSuspense as b } from "@gusto/embedded-api/react-query/paySchedulesGetUnprocessedTerminationPeriods";
-import { usePayrollsCreateOffCycleMutation as g } from "@gusto/embedded-api/react-query/payrollsCreateOffCycle";
-import { OffCycleReason as T } from "@gusto/embedded-api/models/operations/postv1companiescompanyidpayrolls";
+import { useEffect as O, useMemo as y, useState as b } from "react";
+import { usePaySchedulesGetUnprocessedTerminationPeriodsSuspense as g } from "@gusto/embedded-api/react-query/paySchedulesGetUnprocessedTerminationPeriods";
+import { usePayrollsCreateOffCycleMutation as T } from "@gusto/embedded-api/react-query/payrollsCreateOffCycle";
+import { OffCycleReason as K } from "@gusto/embedded-api/models/operations/postv1companiescompanyidpayrolls";
 import { RFCDate as D } from "@gusto/embedded-api/types/rfcdate";
-import { useTranslation as K } from "react-i18next";
-import { DismissalPayPeriodSelectionPresentation as L } from "./DismissalPayPeriodSelectionPresentation.js";
-import { BaseComponent as M } from "../../../Base/Base.js";
-import { useBase as $ } from "../../../Base/useBase.js";
+import { useTranslation as L } from "react-i18next";
+import { DismissalPayPeriodSelectionPresentation as M } from "./DismissalPayPeriodSelectionPresentation.js";
+import { BaseComponent as $ } from "../../../Base/Base.js";
+import { useBase as q } from "../../../Base/useBase.js";
 import { componentEvents as p } from "../../../../shared/constants.js";
 import { SDKInternalError as u } from "../../../../types/sdkError.js";
-import { useComponentDictionary as q, useI18n as x } from "../../../../i18n/I18n.js";
-import { formatPayPeriodRange as N } from "../../../../helpers/dateFormatting.js";
-function oe(t) {
-  return /* @__PURE__ */ d(M, { ...t, children: /* @__PURE__ */ d(Y, { ...t }) });
+import { useComponentDictionary as x, useI18n as N } from "../../../../i18n/I18n.js";
+import { formatPayPeriodRange as Y } from "../../../../helpers/dateFormatting.js";
+function te(t) {
+  return /* @__PURE__ */ d($, { ...t, children: /* @__PURE__ */ d(j, { ...t }) });
 }
 const S = (t) => `${t.startDate}__${t.endDate}`;
-function Y({ companyId: t, employeeId: r, payrollId: n, dictionary: E }) {
-  q("Payroll.Dismissal", E), x("Payroll.Dismissal");
-  const { t: i } = K("Payroll.Dismissal"), { onEvent: l, baseSubmitHandler: C } = $(), { data: f } = b({ companyId: t }), { mutateAsync: w, isPending: U } = g(), v = !!n && !!r;
-  A(() => {
+function j({
+  companyId: t,
+  employeeId: r,
+  payrollId: n,
+  dictionary: E,
+  className: C
+}) {
+  x("Payroll.Dismissal", E), N("Payroll.Dismissal");
+  const { t: i } = L("Payroll.Dismissal"), { onEvent: l, baseSubmitHandler: w } = q(), { data: f } = g({ companyId: t }), { mutateAsync: U, isPending: v } = T(), h = !!n && !!r;
+  O(() => {
     n && r && l(p.DISMISSAL_PAY_PERIOD_SELECTED, { payrollUuid: n });
   }, [n, r, l]);
   const m = y(() => (f.unprocessedTerminationPayPeriods ?? []).filter((o) => !r || o.employeeUuid === r).filter(
     (o) => !!o.startDate && !!o.endDate && !!o.employeeUuid
   ), [f, r]), c = y(() => m.map((e) => {
-    const o = N(e.startDate, e.endDate), a = e.employeeName ? `${o} (${e.employeeName})` : o;
+    const o = Y(e.startDate, e.endDate), a = e.employeeName ? `${o} (${e.employeeName})` : o;
     return {
       value: S(e),
       label: a
     };
-  }), [m]), h = c.length === 1 ? c[0].value : void 0, [s, B] = O(h), R = async () => {
-    await C({ selectedPeriodKey: s }, async () => {
+  }), [m]), B = c.length === 1 ? c[0].value : void 0, [s, R] = b(B), _ = async () => {
+    await w({ selectedPeriodKey: s }, async () => {
       if (s === void 0)
         throw new u(i("errors.noPayPeriodSelected"));
-      const e = m.find((_) => S(_) === s);
+      const e = m.find((A) => S(A) === s);
       if (!e)
         throw new u(i("errors.invalidPayPeriod"));
-      const o = r ?? e.employeeUuid, a = await w({
+      const o = r ?? e.employeeUuid, a = await U({
         request: {
           companyId: t,
           requestBody: {
             offCycle: !0,
-            offCycleReason: T.DismissedEmployee,
+            offCycleReason: K.DismissedEmployee,
             startDate: new D(e.startDate),
             endDate: new D(e.endDate),
             employeeUuids: [o]
@@ -54,18 +60,19 @@ function Y({ companyId: t, employeeId: r, payrollId: n, dictionary: E }) {
       l(p.DISMISSAL_PAY_PERIOD_SELECTED, { payrollUuid: P });
     });
   };
-  return v ? null : /* @__PURE__ */ d(
-    L,
+  return h ? null : /* @__PURE__ */ d(
+    M,
     {
       payPeriodOptions: c,
       selectedPeriodKey: s,
-      onSelectPeriod: B,
-      onSubmit: R,
-      isPending: U
+      onSelectPeriod: R,
+      onSubmit: _,
+      isPending: v,
+      className: C
     }
   );
 }
 export {
-  oe as DismissalPayPeriodSelection
+  te as DismissalPayPeriodSelection
 };
 //# sourceMappingURL=DismissalPayPeriodSelection.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DismissalPayPeriodSelection.js","sources":["../../../../../src/components/Payroll/Dismissal/DismissalPayPeriodSelection/DismissalPayPeriodSelection.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { usePaySchedulesGetUnprocessedTerminationPeriodsSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetUnprocessedTerminationPeriods'\nimport { usePayrollsCreateOffCycleMutation } from '@gusto/embedded-api/react-query/payrollsCreateOffCycle'\nimport type { UnprocessedTerminationPayPeriod } from '@gusto/embedded-api/models/components/unprocessedterminationpayperiod'\nimport { OffCycleReason } from '@gusto/embedded-api/models/operations/postv1companiescompanyidpayrolls'\nimport { RFCDate } from '@gusto/embedded-api/types/rfcdate'\nimport { useTranslation } from 'react-i18next'\nimport { DismissalPayPeriodSelectionPresentation } from './DismissalPayPeriodSelectionPresentation'\nimport { BaseComponent } from '@/components/Base/Base'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { useBase } from '@/components/Base/useBase'\nimport { componentEvents } from '@/shared/constants'\nimport { SDKInternalError } from '@/types/sdkError'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { formatPayPeriodRange } from '@/helpers/dateFormatting'\nimport type { SelectOption } from '@/components/Common/UI/Select/SelectTypes'\n\n/**\n * Props for {@link DismissalPayPeriodSelection}.\n *\n * @public\n */\nexport interface DismissalPayPeriodSelectionProps extends BaseComponentInterface<'Payroll.Dismissal'> {\n  /** Identifier of the company the dismissal payroll belongs to. */\n  companyId: string\n  /** Identifier of the terminated employee. When provided, the available pay periods are filtered to this employee. */\n  employeeId?: string\n  /** Identifier of an existing dismissal payroll. When provided alongside `employeeId`, pay period selection is skipped and the component immediately emits the selection event. */\n  payrollId?: string\n}\n\n/**\n * Pay period selection step for the dismissal payroll workflow.\n *\n * Lists the terminated employee's unprocessed termination pay periods and, on submit, creates an off-cycle payroll with the \"Dismissed employee\" reason for the selected period. When only one pay period is available it is pre-selected. When both `payrollId` and `employeeId` are supplied the step is skipped and the selection event fires immediately with the existing payroll.\n *\n * @remarks\n * Events:\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `dismissal/payPeriod/selected` | Fired after a pay period is selected and the off-cycle payroll has been created, or immediately when `payrollId` is supplied. | `{ payrollUuid: string }` |\n *\n * @param props - See {@link DismissalPayPeriodSelectionProps}.\n * @returns The rendered pay period selection step, or nothing while auto-advancing past selection.\n * @public\n */\nexport function DismissalPayPeriodSelection(props: DismissalPayPeriodSelectionProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props} />\n    </BaseComponent>\n  )\n}\n\ntype RequiredPayPeriod = UnprocessedTerminationPayPeriod &\n  Required<Pick<UnprocessedTerminationPayPeriod, 'startDate' | 'endDate' | 'employeeUuid'>>\n\nconst payPeriodKey = (period: RequiredPayPeriod) => `${period.startDate}__${period.endDate}`\n\nfunction Root({ companyId, employeeId, payrollId, dictionary }: DismissalPayPeriodSelectionProps) {\n  useComponentDictionary('Payroll.Dismissal', dictionary)\n  useI18n('Payroll.Dismissal')\n  const { t } = useTranslation('Payroll.Dismissal')\n  const { onEvent, baseSubmitHandler } = useBase()\n\n  const { data } = usePaySchedulesGetUnprocessedTerminationPeriodsSuspense({ companyId })\n  const { mutateAsync: createOffCyclePayroll, isPending } = usePayrollsCreateOffCycleMutation()\n\n  const shouldAutoAdvance = Boolean(payrollId) && Boolean(employeeId)\n\n  useEffect(() => {\n    if (payrollId && employeeId) {\n      onEvent(componentEvents.DISMISSAL_PAY_PERIOD_SELECTED, { payrollUuid: payrollId })\n    }\n  }, [payrollId, employeeId, onEvent])\n\n  const employeePayPeriods: RequiredPayPeriod[] = useMemo(() => {\n    const allPeriods = data.unprocessedTerminationPayPeriods ?? []\n    return allPeriods\n      .filter(period => !employeeId || period.employeeUuid === employeeId)\n      .filter(\n        (period): period is RequiredPayPeriod =>\n          Boolean(period.startDate) && Boolean(period.endDate) && Boolean(period.employeeUuid),\n      )\n  }, [data, employeeId])\n\n  const payPeriodOptions: SelectOption[] = useMemo(() => {\n    return employeePayPeriods.map(period => {\n      const dateRange = formatPayPeriodRange(period.startDate, period.endDate)\n      const label = period.employeeName ? `${dateRange} (${period.employeeName})` : dateRange\n      return {\n        value: payPeriodKey(period),\n        label,\n      }\n    })\n  }, [employeePayPeriods])\n\n  const initialSelection = payPeriodOptions.length === 1 ? payPeriodOptions[0]!.value : undefined\n  const [selectedPeriodKey, setSelectedPeriodKey] = useState(initialSelection)\n\n  const handleSubmit = async () => {\n    await baseSubmitHandler({ selectedPeriodKey }, async () => {\n      if (selectedPeriodKey === undefined) {\n        throw new SDKInternalError(t('errors.noPayPeriodSelected'))\n      }\n\n      const period = employeePayPeriods.find(p => payPeriodKey(p) === selectedPeriodKey)\n      if (!period) {\n        throw new SDKInternalError(t('errors.invalidPayPeriod'))\n      }\n\n      const resolvedEmployeeId = employeeId ?? period.employeeUuid\n\n      const response = await createOffCyclePayroll({\n        request: {\n          companyId,\n          requestBody: {\n            offCycle: true,\n            offCycleReason: OffCycleReason.DismissedEmployee,\n            startDate: new RFCDate(period.startDate),\n            endDate: new RFCDate(period.endDate),\n            employeeUuids: [resolvedEmployeeId],\n          },\n        },\n      })\n\n      const payrollUuid =\n        response.payrollUnprocessed?.payrollUuid ?? response.payrollUnprocessed?.uuid\n\n      if (!payrollUuid) {\n        throw new SDKInternalError(t('errors.missingPayrollId'))\n      }\n\n      onEvent(componentEvents.DISMISSAL_PAY_PERIOD_SELECTED, { payrollUuid })\n    })\n  }\n\n  if (shouldAutoAdvance) {\n    return null\n  }\n\n  return (\n    <DismissalPayPeriodSelectionPresentation\n      payPeriodOptions={payPeriodOptions}\n      selectedPeriodKey={selectedPeriodKey}\n      onSelectPeriod={setSelectedPeriodKey}\n      onSubmit={handleSubmit}\n      isPending={isPending}\n    />\n  )\n}\n"],"names":["DismissalPayPeriodSelection","props","jsx","BaseComponent","Root","payPeriodKey","period","companyId","employeeId","payrollId","dictionary","useComponentDictionary","useI18n","t","useTranslation","onEvent","baseSubmitHandler","useBase","data","usePaySchedulesGetUnprocessedTerminationPeriodsSuspense","createOffCyclePayroll","isPending","usePayrollsCreateOffCycleMutation","shouldAutoAdvance","useEffect","componentEvents","employeePayPeriods","useMemo","payPeriodOptions","dateRange","formatPayPeriodRange","label","initialSelection","selectedPeriodKey","setSelectedPeriodKey","useState","handleSubmit","SDKInternalError","p","resolvedEmployeeId","response","OffCycleReason","RFCDate","payrollUuid","DismissalPayPeriodSelectionPresentation"],"mappings":"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"}
+{"version":3,"file":"DismissalPayPeriodSelection.js","sources":["../../../../../src/components/Payroll/Dismissal/DismissalPayPeriodSelection/DismissalPayPeriodSelection.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { usePaySchedulesGetUnprocessedTerminationPeriodsSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetUnprocessedTerminationPeriods'\nimport { usePayrollsCreateOffCycleMutation } from '@gusto/embedded-api/react-query/payrollsCreateOffCycle'\nimport type { UnprocessedTerminationPayPeriod } from '@gusto/embedded-api/models/components/unprocessedterminationpayperiod'\nimport { OffCycleReason } from '@gusto/embedded-api/models/operations/postv1companiescompanyidpayrolls'\nimport { RFCDate } from '@gusto/embedded-api/types/rfcdate'\nimport { useTranslation } from 'react-i18next'\nimport { DismissalPayPeriodSelectionPresentation } from './DismissalPayPeriodSelectionPresentation'\nimport { BaseComponent } from '@/components/Base/Base'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { useBase } from '@/components/Base/useBase'\nimport { componentEvents } from '@/shared/constants'\nimport { SDKInternalError } from '@/types/sdkError'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { formatPayPeriodRange } from '@/helpers/dateFormatting'\nimport type { SelectOption } from '@/components/Common/UI/Select/SelectTypes'\n\n/**\n * Props for {@link DismissalPayPeriodSelection}.\n *\n * @public\n */\nexport interface DismissalPayPeriodSelectionProps extends BaseComponentInterface<'Payroll.Dismissal'> {\n  /** Identifier of the company the dismissal payroll belongs to. */\n  companyId: string\n  /** Identifier of the terminated employee. When provided, the available pay periods are filtered to this employee. */\n  employeeId?: string\n  /** Identifier of an existing dismissal payroll. When provided alongside `employeeId`, pay period selection is skipped and the component immediately emits the selection event. */\n  payrollId?: string\n}\n\n/**\n * Pay period selection step for the dismissal payroll workflow.\n *\n * Lists the terminated employee's unprocessed termination pay periods and, on submit, creates an off-cycle payroll with the \"Dismissed employee\" reason for the selected period. When only one pay period is available it is pre-selected. When both `payrollId` and `employeeId` are supplied the step is skipped and the selection event fires immediately with the existing payroll.\n *\n * @remarks\n * Events:\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `dismissal/payPeriod/selected` | Fired after a pay period is selected and the off-cycle payroll has been created, or immediately when `payrollId` is supplied. | `{ payrollUuid: string }` |\n *\n * @param props - See {@link DismissalPayPeriodSelectionProps}.\n * @returns The rendered pay period selection step, or nothing while auto-advancing past selection.\n * @public\n */\nexport function DismissalPayPeriodSelection(props: DismissalPayPeriodSelectionProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props} />\n    </BaseComponent>\n  )\n}\n\ntype RequiredPayPeriod = UnprocessedTerminationPayPeriod &\n  Required<Pick<UnprocessedTerminationPayPeriod, 'startDate' | 'endDate' | 'employeeUuid'>>\n\nconst payPeriodKey = (period: RequiredPayPeriod) => `${period.startDate}__${period.endDate}`\n\nfunction Root({\n  companyId,\n  employeeId,\n  payrollId,\n  dictionary,\n  className,\n}: DismissalPayPeriodSelectionProps) {\n  useComponentDictionary('Payroll.Dismissal', dictionary)\n  useI18n('Payroll.Dismissal')\n  const { t } = useTranslation('Payroll.Dismissal')\n  const { onEvent, baseSubmitHandler } = useBase()\n\n  const { data } = usePaySchedulesGetUnprocessedTerminationPeriodsSuspense({ companyId })\n  const { mutateAsync: createOffCyclePayroll, isPending } = usePayrollsCreateOffCycleMutation()\n\n  const shouldAutoAdvance = Boolean(payrollId) && Boolean(employeeId)\n\n  useEffect(() => {\n    if (payrollId && employeeId) {\n      onEvent(componentEvents.DISMISSAL_PAY_PERIOD_SELECTED, { payrollUuid: payrollId })\n    }\n  }, [payrollId, employeeId, onEvent])\n\n  const employeePayPeriods: RequiredPayPeriod[] = useMemo(() => {\n    const allPeriods = data.unprocessedTerminationPayPeriods ?? []\n    return allPeriods\n      .filter(period => !employeeId || period.employeeUuid === employeeId)\n      .filter(\n        (period): period is RequiredPayPeriod =>\n          Boolean(period.startDate) && Boolean(period.endDate) && Boolean(period.employeeUuid),\n      )\n  }, [data, employeeId])\n\n  const payPeriodOptions: SelectOption[] = useMemo(() => {\n    return employeePayPeriods.map(period => {\n      const dateRange = formatPayPeriodRange(period.startDate, period.endDate)\n      const label = period.employeeName ? `${dateRange} (${period.employeeName})` : dateRange\n      return {\n        value: payPeriodKey(period),\n        label,\n      }\n    })\n  }, [employeePayPeriods])\n\n  const initialSelection = payPeriodOptions.length === 1 ? payPeriodOptions[0]!.value : undefined\n  const [selectedPeriodKey, setSelectedPeriodKey] = useState(initialSelection)\n\n  const handleSubmit = async () => {\n    await baseSubmitHandler({ selectedPeriodKey }, async () => {\n      if (selectedPeriodKey === undefined) {\n        throw new SDKInternalError(t('errors.noPayPeriodSelected'))\n      }\n\n      const period = employeePayPeriods.find(p => payPeriodKey(p) === selectedPeriodKey)\n      if (!period) {\n        throw new SDKInternalError(t('errors.invalidPayPeriod'))\n      }\n\n      const resolvedEmployeeId = employeeId ?? period.employeeUuid\n\n      const response = await createOffCyclePayroll({\n        request: {\n          companyId,\n          requestBody: {\n            offCycle: true,\n            offCycleReason: OffCycleReason.DismissedEmployee,\n            startDate: new RFCDate(period.startDate),\n            endDate: new RFCDate(period.endDate),\n            employeeUuids: [resolvedEmployeeId],\n          },\n        },\n      })\n\n      const payrollUuid =\n        response.payrollUnprocessed?.payrollUuid ?? response.payrollUnprocessed?.uuid\n\n      if (!payrollUuid) {\n        throw new SDKInternalError(t('errors.missingPayrollId'))\n      }\n\n      onEvent(componentEvents.DISMISSAL_PAY_PERIOD_SELECTED, { payrollUuid })\n    })\n  }\n\n  if (shouldAutoAdvance) {\n    return null\n  }\n\n  return (\n    <DismissalPayPeriodSelectionPresentation\n      payPeriodOptions={payPeriodOptions}\n      selectedPeriodKey={selectedPeriodKey}\n      onSelectPeriod={setSelectedPeriodKey}\n      onSubmit={handleSubmit}\n      isPending={isPending}\n      className={className}\n    />\n  )\n}\n"],"names":["DismissalPayPeriodSelection","props","jsx","BaseComponent","Root","payPeriodKey","period","companyId","employeeId","payrollId","dictionary","className","useComponentDictionary","useI18n","t","useTranslation","onEvent","baseSubmitHandler","useBase","data","usePaySchedulesGetUnprocessedTerminationPeriodsSuspense","createOffCyclePayroll","isPending","usePayrollsCreateOffCycleMutation","shouldAutoAdvance","useEffect","componentEvents","employeePayPeriods","useMemo","payPeriodOptions","dateRange","formatPayPeriodRange","label","initialSelection","selectedPeriodKey","setSelectedPeriodKey","useState","handleSubmit","SDKInternalError","p","resolvedEmployeeId","response","OffCycleReason","RFCDate","payrollUuid","DismissalPayPeriodSelectionPresentation"],"mappings":"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"}

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

@@ -1,42 +1,43 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useTranslation as d } from "react-i18next";
+import { useTranslation as f } 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 { useI18n as x } from "../../../../i18n/I18n.js";
-function L({
+import { ActionsLayout as g } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { useComponentContext as x } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as D } from "../../../../i18n/I18n.js";
+function S({
   payPeriodOptions: n,
   selectedPeriodKey: r,
-  onSelectPeriod: s,
-  onSubmit: c,
-  isPending: l
+  onSelectPeriod: c,
+  onSubmit: m,
+  isPending: l,
+  className: a
 }) {
-  x("Payroll.Dismissal");
-  const { t: i } = d("Payroll.Dismissal"), { Heading: a, Text: m, Select: p, Button: u, Alert: h } = g();
-  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: [
+  D("Payroll.Dismissal");
+  const { t: i } = f("Payroll.Dismissal"), { Heading: s, Text: p, Select: u, Button: h, Alert: d } = x();
+  return n.length === 0 ? /* @__PURE__ */ t(o, { className: a, flexDirection: "column", gap: 24, children: [
+    /* @__PURE__ */ e(o, { flexDirection: "column", gap: 4, children: /* @__PURE__ */ e(s, { as: "h2", children: i("pageTitle") }) }),
+    /* @__PURE__ */ e(d, { status: "info", label: i("emptyState") })
+  ] }) : /* @__PURE__ */ t(o, { className: a, flexDirection: "column", gap: 24, children: [
     /* @__PURE__ */ t(o, { flexDirection: "column", gap: 4, children: [
-      /* @__PURE__ */ e(a, { as: "h2", children: i("pageTitle") }),
-      /* @__PURE__ */ e(m, { variant: "supporting", children: i("pageDescription") })
+      /* @__PURE__ */ e(s, { as: "h2", children: i("pageTitle") }),
+      /* @__PURE__ */ e(p, { variant: "supporting", children: i("pageDescription") })
     ] }),
     /* @__PURE__ */ e(
-      p,
+      u,
       {
         label: i("selectLabel"),
         options: n,
         value: r,
-        onChange: s,
+        onChange: c,
         placeholder: i("selectPlaceholder"),
         isRequired: !0
       }
     ),
-    /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(
-      u,
+    /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(
+      h,
       {
         variant: "primary",
-        onClick: c,
+        onClick: m,
         isLoading: l,
         isDisabled: l || r === void 0,
         children: i("continueCta")
@@ -45,6 +46,6 @@ function L({
   ] });
 }
 export {
-  L as DismissalPayPeriodSelectionPresentation
+  S 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  /** CSS class name applied to the root element. */\n  className?: string\n}\n\n/** @internal */\nexport function DismissalPayPeriodSelectionPresentation({\n  payPeriodOptions,\n  selectedPeriodKey,\n  onSelectPeriod,\n  onSubmit,\n  isPending,\n  className,\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 className={className} 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 className={className} 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","className","useI18n","t","useTranslation","Heading","Text","Select","Button","Alert","useComponentContext","Flex","jsx","jsxs","ActionsLayout"],"mappings":";;;;;;AAuBO,SAASA,EAAwC;AAAA,EACtD,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;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,SAFwBd,EAAiB,WAAW,sBAI/Ce,GAAA,EAAK,WAAAV,GAAsB,eAAc,UAAS,KAAK,IACtD,UAAA;AAAA,IAAA,gBAAAW,EAACD,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA,gBAAAC,EAACP,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,sBAKDQ,GAAA,EAAK,WAAAV,GAAsB,eAAc,UAAS,KAAK,IACtD,UAAA;AAAA,IAAA,gBAAAY,EAACF,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAC,EAACP,GAAA,EAAQ,IAAG,MAAM,UAAAF,EAAE,WAAW,GAAE;AAAA,wBAChCG,GAAA,EAAK,SAAQ,cAAc,UAAAH,EAAE,iBAAiB,EAAA,CAAE;AAAA,IAAA,GACnD;AAAA,IAEA,gBAAAS;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,OAAOJ,EAAE,aAAa;AAAA,QACtB,SAASP;AAAA,QACT,OAAOC;AAAA,QACP,UAAUC;AAAA,QACV,aAAaK,EAAE,mBAAmB;AAAA,QAClC,YAAU;AAAA,MAAA;AAAA,IAAA;AAAA,sBAGXW,GAAA,EACC,UAAA,gBAAAF;AAAA,MAACJ;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAST;AAAA,QACT,WAAWC;AAAA,QACX,YAAYA,KAAaH,MAAsB;AAAA,QAE9C,YAAE,aAAa;AAAA,MAAA;AAAA,IAAA,EAClB,CACF;AAAA,EAAA,GACF;AAEJ;"}