@gusto/embedded-react-sdk 0.13.4 → 0.14.1

package/dist/components/Payroll/PayrollLanding/payrollLandingStateMachine.js

@@ -0,0 +1,93 @@
+import { state as p, transition as t, reduce as r, guard as n } from "robot3";
+import { PayrollLandingReceiptsContextual as i, PayrollLandingOverviewContextual as s, PayrollLandingTabsContextual as v } from "./PayrollLandingFlowComponents.js";
+import { componentEvents as a } from "../../../shared/constants.js";
+const l = (e) => (o) => ({
+  ...o,
+  ...e
+}), u = {
+  tabs: p(
+    t(
+      a.RUN_PAYROLL_RECEIPT_VIEWED,
+      "receipt",
+      r(
+        (e, o) => ({
+          ...e,
+          component: i,
+          payrollId: o.payload.payrollId,
+          previousState: "tabs",
+          selectedTab: "payroll-history"
+          // Receipt viewed from payroll history tab
+        })
+      )
+    ),
+    t(
+      a.RUN_PAYROLL_SUMMARY_VIEWED,
+      "overview",
+      r(
+        (e, o) => ({
+          ...e,
+          component: s,
+          payrollId: o.payload.payrollId,
+          previousState: "tabs",
+          selectedTab: "payroll-history"
+          // Summary viewed from payroll history tab
+        })
+      )
+    )
+  ),
+  overview: p(
+    t(
+      a.RUN_PAYROLL_BACK,
+      "tabs",
+      r(
+        l({
+          component: v,
+          payrollId: void 0,
+          previousState: void 0
+          // Preserve selectedTab when going back to tabs
+        })
+      )
+    ),
+    t(
+      a.RUN_PAYROLL_RECEIPT_GET,
+      "receipt",
+      r(
+        (e, o) => ({
+          ...e,
+          component: i,
+          payrollId: o.payload.payrollId,
+          previousState: "overview"
+        })
+      )
+    )
+  ),
+  receipt: p(
+    t(
+      a.RUN_PAYROLL_BACK,
+      "overview",
+      r(
+        l({
+          component: s,
+          previousState: "tabs"
+        })
+      ),
+      n((e) => e.previousState === "overview")
+    ),
+    t(
+      a.RUN_PAYROLL_BACK,
+      "tabs",
+      r(
+        l({
+          component: v,
+          payrollId: void 0,
+          previousState: void 0
+        })
+      ),
+      n((e) => e.previousState === "tabs")
+    )
+  )
+};
+export {
+  u as payrollLandingMachine
+};
+//# sourceMappingURL=payrollLandingStateMachine.js.map

package/dist/components/Payroll/PayrollLanding/payrollLandingStateMachine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payrollLandingStateMachine.js","sources":["../../../../src/components/Payroll/PayrollLanding/payrollLandingStateMachine.ts"],"sourcesContent":["import { transition, reduce, state, guard } from 'robot3'\nimport {\n  PayrollLandingTabsContextual,\n  PayrollLandingReceiptsContextual,\n  PayrollLandingOverviewContextual,\n  type PayrollLandingFlowContextInterface,\n} from './PayrollLandingFlowComponents'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\n\ntype EventPayloads = {\n  [componentEvents.RUN_PAYROLL_RECEIPT_VIEWED]: {\n    payrollId: string\n  }\n  [componentEvents.RUN_PAYROLL_SUMMARY_VIEWED]: {\n    payrollId: string\n  }\n  [componentEvents.RUN_PAYROLL_RECEIPT_GET]: {\n    payrollId: string\n  }\n}\n\nconst createReducer = (props: Partial<PayrollLandingFlowContextInterface>) => {\n  return (ctx: PayrollLandingFlowContextInterface): PayrollLandingFlowContextInterface => ({\n    ...ctx,\n    ...props,\n  })\n}\n\nexport const payrollLandingMachine = {\n  tabs: state<MachineTransition>(\n    transition(\n      componentEvents.RUN_PAYROLL_RECEIPT_VIEWED,\n      'receipt',\n      reduce(\n        (\n          ctx: PayrollLandingFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.RUN_PAYROLL_RECEIPT_VIEWED>,\n        ): PayrollLandingFlowContextInterface => ({\n          ...ctx,\n          component: PayrollLandingReceiptsContextual,\n          payrollId: ev.payload.payrollId,\n          previousState: 'tabs',\n          selectedTab: 'payroll-history', // Receipt viewed from payroll history tab\n        }),\n      ),\n    ),\n    transition(\n      componentEvents.RUN_PAYROLL_SUMMARY_VIEWED,\n      'overview',\n      reduce(\n        (\n          ctx: PayrollLandingFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.RUN_PAYROLL_SUMMARY_VIEWED>,\n        ): PayrollLandingFlowContextInterface => ({\n          ...ctx,\n          component: PayrollLandingOverviewContextual,\n          payrollId: ev.payload.payrollId,\n          previousState: 'tabs',\n          selectedTab: 'payroll-history', // Summary viewed from payroll history tab\n        }),\n      ),\n    ),\n  ),\n  overview: state<MachineTransition>(\n    transition(\n      componentEvents.RUN_PAYROLL_BACK,\n      'tabs',\n      reduce(\n        createReducer({\n          component: PayrollLandingTabsContextual,\n          payrollId: undefined,\n          previousState: undefined,\n          // Preserve selectedTab when going back to tabs\n        }),\n      ),\n    ),\n    transition(\n      componentEvents.RUN_PAYROLL_RECEIPT_GET,\n      'receipt',\n      reduce(\n        (\n          ctx: PayrollLandingFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.RUN_PAYROLL_RECEIPT_GET>,\n        ): PayrollLandingFlowContextInterface => {\n          return {\n            ...ctx,\n            component: PayrollLandingReceiptsContextual,\n            payrollId: ev.payload.payrollId,\n            previousState: 'overview',\n          }\n        },\n      ),\n    ),\n  ),\n  receipt: state<MachineTransition>(\n    transition(\n      componentEvents.RUN_PAYROLL_BACK,\n      'overview',\n      reduce(\n        createReducer({\n          component: PayrollLandingOverviewContextual,\n          previousState: 'tabs',\n        }),\n      ),\n      guard((ctx: PayrollLandingFlowContextInterface) => {\n        return ctx.previousState === 'overview'\n      }),\n    ),\n    transition(\n      componentEvents.RUN_PAYROLL_BACK,\n      'tabs',\n      reduce(\n        createReducer({\n          component: PayrollLandingTabsContextual,\n          payrollId: undefined,\n          previousState: undefined,\n        }),\n      ),\n      guard((ctx: PayrollLandingFlowContextInterface) => {\n        return ctx.previousState === 'tabs'\n      }),\n    ),\n  ),\n}\n"],"names":["createReducer","props","ctx","payrollLandingMachine","state","transition","componentEvents","reduce","ev","PayrollLandingReceiptsContextual","PayrollLandingOverviewContextual","PayrollLandingTabsContextual","guard"],"mappings":";;;AAsBA,MAAMA,IAAgB,CAACC,MACd,CAACC,OAAiF;AAAA,EACvF,GAAGA;AAAA,EACH,GAAGD;AAAA,IAIME,IAAwB;AAAA,EACnC,MAAMC;AAAA,IACJC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CACEL,GACAM,OACwC;AAAA,UACxC,GAAGN;AAAA,UACH,WAAWO;AAAA,UACX,WAAWD,EAAG,QAAQ;AAAA,UACtB,eAAe;AAAA,UACf,aAAa;AAAA;AAAA,QAAA;AAAA,MACf;AAAA,IACF;AAAA,IAEFH;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CACEL,GACAM,OACwC;AAAA,UACxC,GAAGN;AAAA,UACH,WAAWQ;AAAA,UACX,WAAWF,EAAG,QAAQ;AAAA,UACtB,eAAe;AAAA,UACf,aAAa;AAAA;AAAA,QAAA;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAAA,EAEF,UAAUJ;AAAA,IACRC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACEP,EAAc;AAAA,UACZ,WAAWW;AAAA,UACX,WAAW;AAAA,UACX,eAAe;AAAA;AAAA,QAAA,CAEhB;AAAA,MAAA;AAAA,IACH;AAAA,IAEFN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CACEL,GACAM,OAEO;AAAA,UACL,GAAGN;AAAA,UACH,WAAWO;AAAA,UACX,WAAWD,EAAG,QAAQ;AAAA,UACtB,eAAe;AAAA,QAAA;AAAA,MAEnB;AAAA,IACF;AAAA,EACF;AAAA,EAEF,SAASJ;AAAA,IACPC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACEP,EAAc;AAAA,UACZ,WAAWU;AAAA,UACX,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,MAEHE,EAAM,CAACV,MACEA,EAAI,kBAAkB,UAC9B;AAAA,IAAA;AAAA,IAEHG;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACEP,EAAc;AAAA,UACZ,WAAWW;AAAA,UACX,WAAW;AAAA,UACX,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,MAEHC,EAAM,CAACV,MACEA,EAAI,kBAAkB,MAC9B;AAAA,IAAA;AAAA,EACH;AAEJ;"}

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

@@ -2,5 +2,5 @@ import { BaseComponentInterface } from '../../Base';
 interface PayrollListBlockProps extends BaseComponentInterface {
     companyId: string;
 }
-export declare const PayrollList: ({ companyId, onEvent }: PayrollListBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare function PayrollList(props: PayrollListBlockProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Payroll/PayrollList/PayrollList.js

@@ -1,34 +1,75 @@
-import { jsx as t } from "react/jsx-runtime";
-import { usePayrollsListSuspense as n } from "@gusto/embedded-api/react-query/payrollsList";
-import { usePaySchedulesGetAllSuspense as m } from "@gusto/embedded-api/react-query/paySchedulesGetAll";
-import { ProcessingStatuses as c } from "@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls";
-import { getPayrollType as y } from "../helpers.js";
-import { PayrollListPresentation as u } from "./PayrollListPresentation.js";
-import { BaseComponent as P } from "../../Base/Base.js";
-import "../../Base/useBase.js";
-import { componentEvents as L } from "../../../shared/constants.js";
-const S = (o) => ({
+import { jsx as a } from "react/jsx-runtime";
+import { useState as n } from "react";
+import { usePayrollsListSuspense as B } from "@gusto/embedded-api/react-query/payrollsList";
+import { usePaySchedulesGetAllSuspense as g } from "@gusto/embedded-api/react-query/paySchedulesGetAll";
+import { usePayrollsSkipMutation as U } from "@gusto/embedded-api/react-query/payrollsSkip";
+import { usePayrollsGetBlockersSuspense as _ } from "@gusto/embedded-api/react-query/payrollsGetBlockers";
+import { PayrollType as w } from "@gusto/embedded-api/models/operations/postcompaniespayrollskipcompanyuuid";
+import { ProcessingStatuses as E } from "@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls";
+import { getPayrollType as O } from "../helpers.js";
+import { PayrollListPresentation as T } from "./PayrollListPresentation.js";
+import { BaseComponent as b } from "../../Base/Base.js";
+import { useBase as Y } from "../../Base/useBase.js";
+import { componentEvents as r } from "../../../shared/constants.js";
+const C = (o) => ({
   ...o,
-  payrollType: y(o)
-}), x = ({ companyId: o, onEvent: s }) => {
-  const { data: r } = n({
+  payrollType: O(o)
+});
+function X(o) {
+  return /* @__PURE__ */ a(b, { ...o, children: /* @__PURE__ */ a(V, { ...o }) });
+}
+const V = ({ companyId: o, onEvent: e }) => {
+  const { baseSubmitHandler: c } = Y(), [y, l] = n(!1), [u, i] = n(null), { data: m } = B({
     companyId: o,
-    processingStatuses: [c.Unprocessed]
-  }), e = r.payrollList, { data: l } = m({
+    processingStatuses: [E.Unprocessed]
+  }), p = m.payrollList, { data: P } = g({
     companyId: o
-  }), a = l.payScheduleList, p = ({ payrollId: i }) => {
-    s(L.RUN_PAYROLL_SELECTED, { payrollId: i });
+  }), S = P.payScheduleList, { data: d } = _({
+    companyUuid: o
+  }), L = (d.payrollBlockerList ?? []).map((s) => ({
+    key: s.key ?? "unknown",
+    message: s.message
+  })), { mutateAsync: f } = U(), k = ({ payrollId: s }) => {
+    e(r.RUN_PAYROLL_SELECTED, { payrollId: s });
+  }, R = ({ payrollId: s }) => {
+    e(r.REVIEW_PAYROLL, { payrollId: s });
+  }, h = () => {
+    e(r.RUN_PAYROLL_BLOCKERS_VIEW_ALL);
+  }, A = async ({ payrollId: s }) => {
+    const t = p.find((D) => D.payrollUuid === s);
+    t?.payPeriod && (i(s), await c({}, async () => {
+      await f({
+        request: {
+          companyUuid: o,
+          requestBody: {
+            payrollType: w.Regular,
+            startDate: t.payPeriod?.startDate,
+            endDate: t.payPeriod?.endDate,
+            payScheduleUuid: t.payPeriod?.payScheduleUuid ?? void 0
+          }
+        }
+      }), l(!0), e(r.PAYROLL_SKIPPED, { payrollId: s });
+    }), i(null));
   };
-  return /* @__PURE__ */ t(P, { onEvent: s, children: /* @__PURE__ */ t(
-    u,
+  return /* @__PURE__ */ a(
+    T,
     {
-      payrolls: e.map(S),
-      paySchedules: a,
-      onRunPayroll: p
+      payrolls: p.map(C),
+      paySchedules: S,
+      onRunPayroll: k,
+      onSubmitPayroll: R,
+      onSkipPayroll: A,
+      onViewBlockers: h,
+      showSkipSuccessAlert: y,
+      onDismissSkipSuccessAlert: () => {
+        l(!1);
+      },
+      skippingPayrollId: u,
+      blockers: L
     }
-  ) });
+  );
 };
 export {
-  x as PayrollList
+  X as PayrollList
 };
 //# sourceMappingURL=PayrollList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollList.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollList.tsx"],"sourcesContent":["import { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'\nimport { ProcessingStatuses } from '@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls'\nimport type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport { getPayrollType } from '../helpers'\nimport { PayrollListPresentation } from './PayrollListPresentation'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { BaseComponent } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\n\nconst createPayrollProjection = (p: Payroll) => ({\n  ...p,\n  payrollType: getPayrollType(p),\n})\n\ninterface PayrollListBlockProps extends BaseComponentInterface {\n  companyId: string\n}\n\nexport const PayrollList = ({ companyId, onEvent }: PayrollListBlockProps) => {\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processingStatuses: [ProcessingStatuses.Unprocessed],\n  })\n  const payrollList = payrollsData.payrollList!\n  const { data: paySchedulesData } = usePaySchedulesGetAllSuspense({\n    companyId,\n  })\n  const paySchedulesList = paySchedulesData.payScheduleList!\n\n  const onRunPayroll = ({ payrollId }: { payrollId: string }) => {\n    onEvent(componentEvents.RUN_PAYROLL_SELECTED, { payrollId })\n  }\n  return (\n    <BaseComponent onEvent={onEvent}>\n      <PayrollListPresentation\n        payrolls={payrollList.map(createPayrollProjection)}\n        paySchedules={paySchedulesList}\n        onRunPayroll={onRunPayroll}\n      />\n    </BaseComponent>\n  )\n}\n"],"names":["createPayrollProjection","p","getPayrollType","PayrollList","companyId","onEvent","payrollsData","usePayrollsListSuspense","ProcessingStatuses","payrollList","paySchedulesData","usePaySchedulesGetAllSuspense","paySchedulesList","onRunPayroll","payrollId","componentEvents","jsx","BaseComponent","PayrollListPresentation"],"mappings":";;;;;;;;;AAUA,MAAMA,IAA0B,CAACC,OAAgB;AAAA,EAC/C,GAAGA;AAAA,EACH,aAAaC,EAAeD,CAAC;AAC/B,IAMaE,IAAc,CAAC,EAAE,WAAAC,GAAW,SAAAC,QAAqC;AAC5E,QAAM,EAAE,MAAMC,EAAA,IAAiBC,EAAwB;AAAA,IACrD,WAAAH;AAAA,IACA,oBAAoB,CAACI,EAAmB,WAAW;AAAA,EAAA,CACpD,GACKC,IAAcH,EAAa,aAC3B,EAAE,MAAMI,EAAA,IAAqBC,EAA8B;AAAA,IAC/D,WAAAP;AAAA,EAAA,CACD,GACKQ,IAAmBF,EAAiB,iBAEpCG,IAAe,CAAC,EAAE,WAAAC,QAAuC;AAC7D,IAAAT,EAAQU,EAAgB,sBAAsB,EAAE,WAAAD,EAAA,CAAW;AAAA,EAC7D;AACA,SACE,gBAAAE,EAACC,KAAc,SAAAZ,GACb,UAAA,gBAAAW;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAUT,EAAY,IAAIT,CAAuB;AAAA,MACjD,cAAcY;AAAA,MACd,cAAAC;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"PayrollList.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollList.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'\nimport { usePayrollsSkipMutation } from '@gusto/embedded-api/react-query/payrollsSkip'\nimport { usePayrollsGetBlockersSuspense } from '@gusto/embedded-api/react-query/payrollsGetBlockers'\nimport { PayrollType } from '@gusto/embedded-api/models/operations/postcompaniespayrollskipcompanyuuid'\nimport { ProcessingStatuses } from '@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls'\nimport type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport { getPayrollType } from '../helpers'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollListPresentation } from './PayrollListPresentation'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { BaseComponent, useBase } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\n\nconst createPayrollProjection = (p: Payroll) => ({\n  ...p,\n  payrollType: getPayrollType(p),\n})\n\ninterface PayrollListBlockProps extends BaseComponentInterface {\n  companyId: string\n}\n\nexport function PayrollList(props: PayrollListBlockProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props} />\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ companyId, onEvent }: PayrollListBlockProps) => {\n  const { baseSubmitHandler } = useBase()\n  const [showSkipSuccessAlert, setShowSkipSuccessAlert] = useState(false)\n  const [skippingPayrollId, setSkippingPayrollId] = useState<string | null>(null)\n\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processingStatuses: [ProcessingStatuses.Unprocessed],\n  })\n  const payrollList = payrollsData.payrollList!\n  const { data: paySchedulesData } = usePaySchedulesGetAllSuspense({\n    companyId,\n  })\n  const paySchedulesList = paySchedulesData.payScheduleList!\n\n  const { data: blockersData } = usePayrollsGetBlockersSuspense({\n    companyUuid: companyId,\n  })\n\n  const payrollBlockerList = blockersData.payrollBlockerList ?? []\n\n  const blockers: ApiPayrollBlocker[] = payrollBlockerList.map(blocker => ({\n    key: blocker.key ?? 'unknown',\n    message: blocker.message,\n  }))\n\n  const { mutateAsync: skipPayroll } = usePayrollsSkipMutation()\n\n  const onRunPayroll = ({ payrollId }: { payrollId: string }) => {\n    onEvent(componentEvents.RUN_PAYROLL_SELECTED, { payrollId })\n  }\n  const onSubmitPayroll = ({ payrollId }: { payrollId: string }) => {\n    onEvent(componentEvents.REVIEW_PAYROLL, { payrollId })\n  }\n  const onViewBlockers = () => {\n    onEvent(componentEvents.RUN_PAYROLL_BLOCKERS_VIEW_ALL)\n  }\n  const onSkipPayroll = async ({ payrollId }: { payrollId: string }) => {\n    const payroll = payrollList.find(payroll => payroll.payrollUuid === payrollId)\n\n    if (payroll?.payPeriod) {\n      setSkippingPayrollId(payrollId)\n      await baseSubmitHandler({}, async () => {\n        await skipPayroll({\n          request: {\n            companyUuid: companyId,\n            requestBody: {\n              payrollType: PayrollType.Regular,\n              startDate: payroll.payPeriod?.startDate,\n              endDate: payroll.payPeriod?.endDate,\n              payScheduleUuid: payroll.payPeriod?.payScheduleUuid ?? undefined,\n            },\n          },\n        })\n\n        setShowSkipSuccessAlert(true)\n        onEvent(componentEvents.PAYROLL_SKIPPED, { payrollId })\n      })\n      setSkippingPayrollId(null)\n    }\n  }\n  return (\n    <PayrollListPresentation\n      payrolls={payrollList.map(createPayrollProjection)}\n      paySchedules={paySchedulesList}\n      onRunPayroll={onRunPayroll}\n      onSubmitPayroll={onSubmitPayroll}\n      onSkipPayroll={onSkipPayroll}\n      onViewBlockers={onViewBlockers}\n      showSkipSuccessAlert={showSkipSuccessAlert}\n      onDismissSkipSuccessAlert={() => {\n        setShowSkipSuccessAlert(false)\n      }}\n      skippingPayrollId={skippingPayrollId}\n      blockers={blockers}\n    />\n  )\n}\n"],"names":["createPayrollProjection","p","getPayrollType","PayrollList","props","jsx","BaseComponent","Root","companyId","onEvent","baseSubmitHandler","useBase","showSkipSuccessAlert","setShowSkipSuccessAlert","useState","skippingPayrollId","setSkippingPayrollId","payrollsData","usePayrollsListSuspense","ProcessingStatuses","payrollList","paySchedulesData","usePaySchedulesGetAllSuspense","paySchedulesList","blockersData","usePayrollsGetBlockersSuspense","blockers","blocker","skipPayroll","usePayrollsSkipMutation","onRunPayroll","payrollId","componentEvents","onSubmitPayroll","onViewBlockers","onSkipPayroll","payroll","PayrollType","PayrollListPresentation"],"mappings":";;;;;;;;;;;;;AAeA,MAAMA,IAA0B,CAACC,OAAgB;AAAA,EAC/C,GAAGA;AAAA,EACH,aAAaC,EAAeD,CAAC;AAC/B;AAMO,SAASE,EAAYC,GAA8B;AACxD,SACE,gBAAAC,EAACC,KAAe,GAAGF,GACjB,4BAACG,GAAA,EAAM,GAAGH,GAAO,EAAA,CACnB;AAEJ;AAEA,MAAMG,IAAO,CAAC,EAAE,WAAAC,GAAW,SAAAC,QAAqC;AAC9D,QAAM,EAAE,mBAAAC,EAAA,IAAsBC,EAAA,GACxB,CAACC,GAAsBC,CAAuB,IAAIC,EAAS,EAAK,GAChE,CAACC,GAAmBC,CAAoB,IAAIF,EAAwB,IAAI,GAExE,EAAE,MAAMG,EAAA,IAAiBC,EAAwB;AAAA,IACrD,WAAAV;AAAA,IACA,oBAAoB,CAACW,EAAmB,WAAW;AAAA,EAAA,CACpD,GACKC,IAAcH,EAAa,aAC3B,EAAE,MAAMI,EAAA,IAAqBC,EAA8B;AAAA,IAC/D,WAAAd;AAAA,EAAA,CACD,GACKe,IAAmBF,EAAiB,iBAEpC,EAAE,MAAMG,EAAA,IAAiBC,EAA+B;AAAA,IAC5D,aAAajB;AAAA,EAAA,CACd,GAIKkB,KAFqBF,EAAa,sBAAsB,CAAA,GAEL,IAAI,CAAAG,OAAY;AAAA,IACvE,KAAKA,EAAQ,OAAO;AAAA,IACpB,SAASA,EAAQ;AAAA,EAAA,EACjB,GAEI,EAAE,aAAaC,EAAA,IAAgBC,EAAA,GAE/BC,IAAe,CAAC,EAAE,WAAAC,QAAuC;AAC7D,IAAAtB,EAAQuB,EAAgB,sBAAsB,EAAE,WAAAD,EAAA,CAAW;AAAA,EAC7D,GACME,IAAkB,CAAC,EAAE,WAAAF,QAAuC;AAChE,IAAAtB,EAAQuB,EAAgB,gBAAgB,EAAE,WAAAD,EAAA,CAAW;AAAA,EACvD,GACMG,IAAiB,MAAM;AAC3B,IAAAzB,EAAQuB,EAAgB,6BAA6B;AAAA,EACvD,GACMG,IAAgB,OAAO,EAAE,WAAAJ,QAAuC;AACpE,UAAMK,IAAUhB,EAAY,KAAK,CAAAgB,MAAWA,EAAQ,gBAAgBL,CAAS;AAE7E,IAAIK,GAAS,cACXpB,EAAqBe,CAAS,GAC9B,MAAMrB,EAAkB,CAAA,GAAI,YAAY;AACtC,YAAMkB,EAAY;AAAA,QAChB,SAAS;AAAA,UACP,aAAapB;AAAA,UACb,aAAa;AAAA,YACX,aAAa6B,EAAY;AAAA,YACzB,WAAWD,EAAQ,WAAW;AAAA,YAC9B,SAASA,EAAQ,WAAW;AAAA,YAC5B,iBAAiBA,EAAQ,WAAW,mBAAmB;AAAA,UAAA;AAAA,QACzD;AAAA,MACF,CACD,GAEDvB,EAAwB,EAAI,GAC5BJ,EAAQuB,EAAgB,iBAAiB,EAAE,WAAAD,EAAA,CAAW;AAAA,IACxD,CAAC,GACDf,EAAqB,IAAI;AAAA,EAE7B;AACA,SACE,gBAAAX;AAAA,IAACiC;AAAA,IAAA;AAAA,MACC,UAAUlB,EAAY,IAAIpB,CAAuB;AAAA,MACjD,cAAcuB;AAAA,MACd,cAAAO;AAAA,MACA,iBAAAG;AAAA,MACA,eAAAE;AAAA,MACA,gBAAAD;AAAA,MACA,sBAAAtB;AAAA,MACA,2BAA2B,MAAM;AAC/B,QAAAC,EAAwB,EAAK;AAAA,MAC/B;AAAA,MACA,mBAAAE;AAAA,MACA,UAAAW;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Payroll/PayrollList/PayrollListPresentation.d.ts

@@ -1,5 +1,6 @@
 import { Payroll } from '@gusto/embedded-api/models/components/payroll';
 import { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist';
+import { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers';
 import { PayrollType } from './types';
 interface PresentationPayroll extends Payroll {
     payrollType: PayrollType;
@@ -8,8 +9,19 @@ interface PayrollListPresentationProps {
     onRunPayroll: ({ payrollId }: {
         payrollId: NonNullable<Payroll['payrollUuid']>;
     }) => void;
+    onSubmitPayroll: ({ payrollId }: {
+        payrollId: NonNullable<Payroll['payrollUuid']>;
+    }) => void;
+    onSkipPayroll: ({ payrollId }: {
+        payrollId: NonNullable<Payroll['payrollUuid']>;
+    }) => void;
+    onViewBlockers?: () => void;
     payrolls: PresentationPayroll[];
     paySchedules: PayScheduleList[];
+    showSkipSuccessAlert: boolean;
+    onDismissSkipSuccessAlert: () => void;
+    skippingPayrollId: string | null;
+    blockers: ApiPayrollBlocker[];
 }
-export declare const PayrollListPresentation: ({ onRunPayroll, payrolls, paySchedules, }: PayrollListPresentationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayrollListPresentation: ({ onRunPayroll, onSubmitPayroll, onSkipPayroll, onViewBlockers, payrolls, paySchedules, showSkipSuccessAlert, onDismissSkipSuccessAlert, skippingPayrollId, blockers, }: PayrollListPresentationProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Payroll/PayrollList/PayrollListPresentation.js

@@ -1,63 +1,110 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { useTranslation as D } from "react-i18next";
-import { Flex as l } from "../../Common/Flex/Flex.js";
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
+import { useState as j } from "react";
+import { useTranslation as N } from "react-i18next";
+import { PayrollBlockerAlerts as $ } from "../PayrollBlocker/components/PayrollBlockerAlerts.js";
+import D from "./PayrollListPresentation.module.scss.js";
+import { Flex as d } from "../../Common/Flex/Flex.js";
 import "classnames";
-import "../../../shared/constants.js";
-import { useComponentContext as g } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as L } from "../../../i18n/I18n.js";
-import { parseDateStringToLocal as s } from "../../../helpers/dateFormatting.js";
-import { useLocale as b } from "../../../contexts/LocaleProvider/useLocale.js";
-import { DataView as x } from "../../Common/DataView/DataView.js";
-const B = ({
-  onRunPayroll: m,
-  payrolls: d,
-  paySchedules: c
+import { useComponentContext as V } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as E } from "../../../i18n/I18n.js";
+import { parseDateStringToLocal as u } from "../../../helpers/dateFormatting.js";
+import { useLocale as F } from "../../../contexts/LocaleProvider/useLocale.js";
+import { HamburgerMenu as q } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import { DataView as z } from "../../Common/DataView/DataView.js";
+const le = ({
+  onRunPayroll: P,
+  onSubmitPayroll: b,
+  onSkipPayroll: k,
+  onViewBlockers: L,
+  payrolls: S,
+  paySchedules: p,
+  showSkipSuccessAlert: C,
+  onDismissSkipSuccessAlert: x,
+  skippingPayrollId: I,
+  blockers: H
 }) => {
-  const { Badge: u, Button: h, Heading: p, Text: n } = g();
-  L("Payroll.PayrollList");
-  const { t } = D("Payroll.PayrollList"), { locale: a } = b();
-  return /* @__PURE__ */ i(l, { flexDirection: "column", gap: 16, children: [
-    /* @__PURE__ */ r(
-      l,
+  const { Badge: v, Button: y, Dialog: w, Heading: A, Text: i, Alert: O } = V();
+  E("Payroll.PayrollList");
+  const { t } = N("Payroll.PayrollList"), { locale: n } = F(), [s, f] = j({
+    isOpen: !1,
+    payrollId: null,
+    payPeriod: null
+  }), B = (e, o) => {
+    f({
+      isOpen: !0,
+      payrollId: e,
+      payPeriod: o
+    });
+  }, h = () => {
+    f({
+      isOpen: !1,
+      payrollId: null,
+      payPeriod: null
+    });
+  }, T = () => {
+    s.payrollId && (k({ payrollId: s.payrollId }), h());
+  }, g = (e, o) => {
+    const a = e ? u(e)?.toLocaleDateString(n, {
+      month: "short",
+      day: "numeric"
+    }) : null, r = o ? u(o)?.toLocaleDateString(n, {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    }) : null;
+    return {
+      startDate: a,
+      endDate: r,
+      fullPeriod: a && r ? `${a} – ${r}` : ""
+    };
+  };
+  return /* @__PURE__ */ c(d, { flexDirection: "column", gap: 16, children: [
+    C && /* @__PURE__ */ l("div", { className: D.alertContainer, children: /* @__PURE__ */ l(
+      O,
+      {
+        status: "info",
+        label: t("skipSuccessAlert"),
+        onDismiss: x
+      }
+    ) }),
+    /* @__PURE__ */ l($, { blockers: H, onMultipleViewClick: L }),
+    /* @__PURE__ */ l(
+      d,
       {
         flexDirection: { base: "column", medium: "row" },
         justifyContent: "space-between",
         alignItems: "flex-start",
         gap: { base: 12, medium: 24 },
-        children: /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(p, { as: "h2", children: t("title") }) })
+        children: /* @__PURE__ */ l(d, { children: /* @__PURE__ */ l(A, { as: "h2", children: t("title") }) })
       }
     ),
-    /* @__PURE__ */ r(
-      x,
+    /* @__PURE__ */ l(
+      z,
       {
         columns: [
           {
             render: ({ payPeriod: e }) => {
-              const y = e?.startDate ? s(e.startDate)?.toLocaleDateString(a, {
-                month: "short",
-                day: "numeric"
-              }) : null, f = e?.endDate ? s(e.endDate)?.toLocaleDateString(a, {
-                month: "short",
-                day: "numeric",
-                year: "numeric"
-              }) : null;
-              return /* @__PURE__ */ i(l, { flexDirection: "column", gap: 0, children: [
-                /* @__PURE__ */ i(n, { children: [
-                  y,
+              const { startDate: o, endDate: a } = g(
+                e?.startDate,
+                e?.endDate
+              );
+              return /* @__PURE__ */ c(d, { flexDirection: "column", gap: 0, children: [
+                /* @__PURE__ */ c(i, { children: [
+                  o,
                   " - ",
-                  f
+                  a
                 ] }),
-                /* @__PURE__ */ r(n, { variant: "supporting", children: c.find((o) => o.uuid === e?.payScheduleUuid)?.name || c.find((o) => o.uuid === e?.payScheduleUuid)?.customName })
+                /* @__PURE__ */ l(i, { variant: "supporting", children: p.find((r) => r.uuid === e?.payScheduleUuid)?.name || p.find((r) => r.uuid === e?.payScheduleUuid)?.customName })
               ] });
             },
             title: t("tableHeaders.0")
           },
           {
-            render: ({ payrollType: e }) => /* @__PURE__ */ r(n, { children: t(`type.${e}`) }),
+            render: ({ payrollType: e }) => /* @__PURE__ */ l(i, { children: t(`type.${e}`) }),
             title: t("tableHeaders.1")
           },
           {
-            render: ({ checkDate: e }) => /* @__PURE__ */ r(n, { children: e ? s(e)?.toLocaleDateString(a, {
+            render: ({ checkDate: e }) => /* @__PURE__ */ l(i, { children: e ? u(e)?.toLocaleDateString(n, {
               weekday: "short",
               month: "short",
               day: "numeric",
@@ -67,7 +114,7 @@ const B = ({
           },
           {
             title: t("tableHeaders.3"),
-            render: ({ payrollDeadline: e }) => /* @__PURE__ */ r(n, { children: e?.toLocaleDateString(a, {
+            render: ({ payrollDeadline: e }) => /* @__PURE__ */ l(i, { children: e?.toLocaleDateString(n, {
               weekday: "short",
               month: "short",
               day: "numeric",
@@ -76,27 +123,77 @@ const B = ({
           },
           {
             title: t("tableHeaders.4"),
-            render: ({ processed: e }) => /* @__PURE__ */ r(u, { children: t(e ? "status.processed" : "status.unprocessed") })
+            render: ({ processed: e }) => /* @__PURE__ */ l(v, { children: t(e ? "status.processed" : "status.unprocessed") })
           }
         ],
-        data: d,
+        data: S,
         label: t("payrollsListLabel"),
-        itemMenu: ({ payrollUuid: e }) => /* @__PURE__ */ r(
-          h,
-          {
-            onClick: () => {
-              m({ payrollId: e });
-            },
-            title: t("runPayrollTitle"),
-            variant: "secondary",
-            children: t("runPayrollTitle")
-          }
-        )
+        itemMenu: ({ payrollUuid: e, calculatedAt: o, processed: a, payPeriod: r }) => {
+          if (a)
+            return null;
+          const m = I === e, { fullPeriod: M } = g(
+            r?.startDate,
+            r?.endDate
+          );
+          return /* @__PURE__ */ c("div", { className: D.actionsContainer, children: [
+            o ? /* @__PURE__ */ l(
+              y,
+              {
+                isLoading: m,
+                onClick: () => {
+                  b({ payrollId: e });
+                },
+                title: t("submitPayrollCta"),
+                variant: "secondary",
+                children: t("submitPayrollCta")
+              }
+            ) : /* @__PURE__ */ l(
+              y,
+              {
+                isLoading: m,
+                onClick: () => {
+                  P({ payrollId: e });
+                },
+                title: t("runPayrollTitle"),
+                variant: "secondary",
+                children: t("runPayrollTitle")
+              }
+            ),
+            /* @__PURE__ */ l(
+              q,
+              {
+                isLoading: m,
+                menuLabel: t("payrollMenuLabel"),
+                items: [
+                  {
+                    label: t("skipPayrollCta"),
+                    onClick: () => {
+                      B(e, M);
+                    }
+                  }
+                ]
+              }
+            )
+          ] });
+        }
+      }
+    ),
+    /* @__PURE__ */ l(
+      w,
+      {
+        isOpen: s.isOpen,
+        onClose: h,
+        onPrimaryActionClick: T,
+        isDestructive: !0,
+        title: t("skipPayrollDialog.title", { payPeriod: s.payPeriod }),
+        primaryActionLabel: t("skipPayrollDialog.confirmButton"),
+        closeActionLabel: t("skipPayrollDialog.cancelButton"),
+        children: t("skipPayrollDialog.body")
       }
     )
   ] });
 };
 export {
-  B as PayrollListPresentation
+  le as PayrollListPresentation
 };
 //# sourceMappingURL=PayrollListPresentation.js.map

package/dist/components/Payroll/PayrollList/PayrollListPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollListPresentation.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollListPresentation.tsx"],"sourcesContent":["import type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport type { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist'\nimport { useTranslation } from 'react-i18next'\nimport type { PayrollType } from './types'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { parseDateStringToLocal } from '@/helpers/dateFormatting'\nimport { useLocale } from '@/contexts/LocaleProvider'\n\ninterface PresentationPayroll extends Payroll {\n  payrollType: PayrollType\n}\n\ninterface PayrollListPresentationProps {\n  onRunPayroll: ({ payrollId }: { payrollId: NonNullable<Payroll['payrollUuid']> }) => void\n  payrolls: PresentationPayroll[]\n  paySchedules: PayScheduleList[]\n}\n\nexport const PayrollListPresentation = ({\n  onRunPayroll,\n  payrolls,\n  paySchedules,\n}: PayrollListPresentationProps) => {\n  const { Badge, Button, Heading, Text } = useComponentContext()\n  useI18n('Payroll.PayrollList')\n  const { t } = useTranslation('Payroll.PayrollList')\n  const { locale } = useLocale()\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      <Flex\n        flexDirection={{ base: 'column', medium: 'row' }}\n        justifyContent=\"space-between\"\n        alignItems=\"flex-start\"\n        gap={{ base: 12, medium: 24 }}\n      >\n        <Flex>\n          <Heading as=\"h2\">{t('title')}</Heading>\n        </Flex>\n      </Flex>\n\n      <DataView\n        columns={[\n          {\n            render: ({ payPeriod }) => {\n              const startDate = payPeriod?.startDate\n                ? parseDateStringToLocal(payPeriod.startDate)?.toLocaleDateString(locale, {\n                    month: 'short',\n                    day: 'numeric',\n                  })\n                : null\n\n              const endDate = payPeriod?.endDate\n                ? parseDateStringToLocal(payPeriod.endDate)?.toLocaleDateString(locale, {\n                    month: 'short',\n                    day: 'numeric',\n                    year: 'numeric',\n                  })\n                : null\n\n              return (\n                <Flex flexDirection=\"column\" gap={0}>\n                  <Text>\n                    {startDate} - {endDate}\n                  </Text>\n                  <Text variant=\"supporting\">\n                    {paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                      ?.name ||\n                      paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                        ?.customName}\n                  </Text>\n                </Flex>\n              )\n            },\n            title: t('tableHeaders.0'),\n          },\n          {\n            render: ({ payrollType }) => <Text>{t(`type.${payrollType}`)}</Text>,\n            title: t('tableHeaders.1'),\n          },\n          {\n            render: ({ checkDate }) => (\n              <Text>\n                {checkDate\n                  ? parseDateStringToLocal(checkDate)?.toLocaleDateString(locale, {\n                      weekday: 'short',\n                      month: 'short',\n                      day: 'numeric',\n                      year: 'numeric',\n                    })\n                  : null}\n              </Text>\n            ),\n            title: t('tableHeaders.2'),\n          },\n          {\n            title: t('tableHeaders.3'),\n            render: ({ payrollDeadline }) => (\n              <Text>\n                {payrollDeadline?.toLocaleDateString(locale, {\n                  weekday: 'short',\n                  month: 'short',\n                  day: 'numeric',\n                  year: 'numeric',\n                })}\n              </Text>\n            ),\n          },\n          {\n            title: t('tableHeaders.4'),\n            render: ({ processed }) => (\n              <Badge>{processed ? t('status.processed') : t('status.unprocessed')}</Badge>\n            ),\n          },\n        ]}\n        data={payrolls}\n        label={t('payrollsListLabel')}\n        itemMenu={({ payrollUuid }) => (\n          <Button\n            onClick={() => {\n              onRunPayroll({ payrollId: payrollUuid! })\n            }}\n            title={t('runPayrollTitle')}\n            variant=\"secondary\"\n          >\n            {t('runPayrollTitle')}\n          </Button>\n        )}\n      />\n    </Flex>\n  )\n}\n"],"names":["PayrollListPresentation","onRunPayroll","payrolls","paySchedules","Badge","Button","Heading","Text","useComponentContext","useI18n","useTranslation","locale","useLocale","jsxs","Flex","jsx","DataView","payPeriod","startDate","parseDateStringToLocal","endDate","schedule","payrollType","checkDate","payrollDeadline","processed","payrollUuid"],"mappings":"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"}
+{"version":3,"file":"PayrollListPresentation.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollListPresentation.tsx"],"sourcesContent":["import type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport type { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'\nimport type { PayrollType } from './types'\nimport styles from './PayrollListPresentation.module.scss'\nimport { DataView, Flex, HamburgerMenu } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { parseDateStringToLocal } from '@/helpers/dateFormatting'\nimport { useLocale } from '@/contexts/LocaleProvider'\n\ninterface PresentationPayroll extends Payroll {\n  payrollType: PayrollType\n}\n\ninterface PayrollListPresentationProps {\n  onRunPayroll: ({ payrollId }: { payrollId: NonNullable<Payroll['payrollUuid']> }) => void\n  onSubmitPayroll: ({ payrollId }: { payrollId: NonNullable<Payroll['payrollUuid']> }) => void\n  onSkipPayroll: ({ payrollId }: { payrollId: NonNullable<Payroll['payrollUuid']> }) => void\n  onViewBlockers?: () => void\n  payrolls: PresentationPayroll[]\n  paySchedules: PayScheduleList[]\n  showSkipSuccessAlert: boolean\n  onDismissSkipSuccessAlert: () => void\n  skippingPayrollId: string | null\n  blockers: ApiPayrollBlocker[]\n}\n\nexport const PayrollListPresentation = ({\n  onRunPayroll,\n  onSubmitPayroll,\n  onSkipPayroll,\n  onViewBlockers,\n  payrolls,\n  paySchedules,\n  showSkipSuccessAlert,\n  onDismissSkipSuccessAlert,\n  skippingPayrollId,\n  blockers,\n}: PayrollListPresentationProps) => {\n  const { Badge, Button, Dialog, Heading, Text, Alert } = useComponentContext()\n  useI18n('Payroll.PayrollList')\n  const { t } = useTranslation('Payroll.PayrollList')\n  const { locale } = useLocale()\n  const [skipPayrollDialogState, setSkipPayrollDialogState] = useState<{\n    isOpen: boolean\n    payrollId: string | null\n    payPeriod: string | null\n  }>({\n    isOpen: false,\n    payrollId: null,\n    payPeriod: null,\n  })\n\n  const handleOpenSkipDialog = (payrollId: string, payPeriod: string) => {\n    setSkipPayrollDialogState({\n      isOpen: true,\n      payrollId,\n      payPeriod,\n    })\n  }\n\n  const handleCloseSkipDialog = () => {\n    setSkipPayrollDialogState({\n      isOpen: false,\n      payrollId: null,\n      payPeriod: null,\n    })\n  }\n\n  const handleConfirmSkipPayroll = () => {\n    if (skipPayrollDialogState.payrollId) {\n      onSkipPayroll({ payrollId: skipPayrollDialogState.payrollId })\n      handleCloseSkipDialog()\n    }\n  }\n\n  const formatPayPeriod = (startDate: string | undefined, endDate: string | undefined) => {\n    const formattedStartDate = startDate\n      ? parseDateStringToLocal(startDate)?.toLocaleDateString(locale, {\n          month: 'short',\n          day: 'numeric',\n        })\n      : null\n\n    const formattedEndDate = endDate\n      ? parseDateStringToLocal(endDate)?.toLocaleDateString(locale, {\n          month: 'short',\n          day: 'numeric',\n          year: 'numeric',\n        })\n      : null\n\n    return {\n      startDate: formattedStartDate,\n      endDate: formattedEndDate,\n      fullPeriod:\n        formattedStartDate && formattedEndDate ? `${formattedStartDate} – ${formattedEndDate}` : '',\n    }\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {showSkipSuccessAlert && (\n        <div className={styles.alertContainer}>\n          <Alert\n            status=\"info\"\n            label={t('skipSuccessAlert')}\n            onDismiss={onDismissSkipSuccessAlert}\n          />\n        </div>\n      )}\n      <PayrollBlockerAlerts blockers={blockers} onMultipleViewClick={onViewBlockers} />\n      <Flex\n        flexDirection={{ base: 'column', medium: 'row' }}\n        justifyContent=\"space-between\"\n        alignItems=\"flex-start\"\n        gap={{ base: 12, medium: 24 }}\n      >\n        <Flex>\n          <Heading as=\"h2\">{t('title')}</Heading>\n        </Flex>\n      </Flex>\n\n      <DataView\n        columns={[\n          {\n            render: ({ payPeriod }) => {\n              const { startDate, endDate } = formatPayPeriod(\n                payPeriod?.startDate,\n                payPeriod?.endDate,\n              )\n\n              return (\n                <Flex flexDirection=\"column\" gap={0}>\n                  <Text>\n                    {startDate} - {endDate}\n                  </Text>\n                  <Text variant=\"supporting\">\n                    {paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                      ?.name ||\n                      paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                        ?.customName}\n                  </Text>\n                </Flex>\n              )\n            },\n            title: t('tableHeaders.0'),\n          },\n          {\n            render: ({ payrollType }) => <Text>{t(`type.${payrollType}`)}</Text>,\n            title: t('tableHeaders.1'),\n          },\n          {\n            render: ({ checkDate }) => (\n              <Text>\n                {checkDate\n                  ? parseDateStringToLocal(checkDate)?.toLocaleDateString(locale, {\n                      weekday: 'short',\n                      month: 'short',\n                      day: 'numeric',\n                      year: 'numeric',\n                    })\n                  : null}\n              </Text>\n            ),\n            title: t('tableHeaders.2'),\n          },\n          {\n            title: t('tableHeaders.3'),\n            render: ({ payrollDeadline }) => (\n              <Text>\n                {payrollDeadline?.toLocaleDateString(locale, {\n                  weekday: 'short',\n                  month: 'short',\n                  day: 'numeric',\n                  year: 'numeric',\n                })}\n              </Text>\n            ),\n          },\n          {\n            title: t('tableHeaders.4'),\n            render: ({ processed }) => (\n              <Badge>{processed ? t('status.processed') : t('status.unprocessed')}</Badge>\n            ),\n          },\n        ]}\n        data={payrolls}\n        label={t('payrollsListLabel')}\n        itemMenu={({ payrollUuid, calculatedAt, processed, payPeriod }) => {\n          if (processed) {\n            return null\n          }\n\n          const isProcessingSkipPayroll = skippingPayrollId === payrollUuid\n\n          const { fullPeriod: payPeriodString } = formatPayPeriod(\n            payPeriod?.startDate,\n            payPeriod?.endDate,\n          )\n\n          return (\n            <div className={styles.actionsContainer}>\n              {calculatedAt ? (\n                <Button\n                  isLoading={isProcessingSkipPayroll}\n                  onClick={() => {\n                    onSubmitPayroll({ payrollId: payrollUuid! })\n                  }}\n                  title={t('submitPayrollCta')}\n                  variant=\"secondary\"\n                >\n                  {t('submitPayrollCta')}\n                </Button>\n              ) : (\n                <Button\n                  isLoading={isProcessingSkipPayroll}\n                  onClick={() => {\n                    onRunPayroll({ payrollId: payrollUuid! })\n                  }}\n                  title={t('runPayrollTitle')}\n                  variant=\"secondary\"\n                >\n                  {t('runPayrollTitle')}\n                </Button>\n              )}\n              <HamburgerMenu\n                isLoading={isProcessingSkipPayroll}\n                menuLabel={t('payrollMenuLabel')}\n                items={[\n                  {\n                    label: t('skipPayrollCta'),\n                    onClick: () => {\n                      handleOpenSkipDialog(payrollUuid!, payPeriodString)\n                    },\n                  },\n                ]}\n              />\n            </div>\n          )\n        }}\n      />\n      <Dialog\n        isOpen={skipPayrollDialogState.isOpen}\n        onClose={handleCloseSkipDialog}\n        onPrimaryActionClick={handleConfirmSkipPayroll}\n        isDestructive={true}\n        title={t('skipPayrollDialog.title', { payPeriod: skipPayrollDialogState.payPeriod })}\n        primaryActionLabel={t('skipPayrollDialog.confirmButton')}\n        closeActionLabel={t('skipPayrollDialog.cancelButton')}\n      >\n        {t('skipPayrollDialog.body')}\n      </Dialog>\n    </Flex>\n  )\n}\n"],"names":["PayrollListPresentation","onRunPayroll","onSubmitPayroll","onSkipPayroll","onViewBlockers","payrolls","paySchedules","showSkipSuccessAlert","onDismissSkipSuccessAlert","skippingPayrollId","blockers","Badge","Button","Dialog","Heading","Text","Alert","useComponentContext","useI18n","useTranslation","locale","useLocale","skipPayrollDialogState","setSkipPayrollDialogState","useState","handleOpenSkipDialog","payrollId","payPeriod","handleCloseSkipDialog","handleConfirmSkipPayroll","formatPayPeriod","startDate","endDate","formattedStartDate","parseDateStringToLocal","formattedEndDate","jsxs","Flex","jsx","styles","PayrollBlockerAlerts","DataView","schedule","payrollType","checkDate","payrollDeadline","processed","payrollUuid","calculatedAt","isProcessingSkipPayroll","payPeriodString","HamburgerMenu"],"mappings":"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"}

package/dist/components/Payroll/PayrollList/PayrollListPresentation.module.scss.js

@@ -0,0 +1,10 @@
+const n = "_actionsContainer_1bdsf_1", t = "_alertContainer_1bdsf_8", a = {
+  actionsContainer: n,
+  alertContainer: t
+};
+export {
+  n as actionsContainer,
+  t as alertContainer,
+  a as default
+};
+//# sourceMappingURL=PayrollListPresentation.module.scss.js.map

package/dist/components/Payroll/PayrollList/PayrollListPresentation.module.scss.js.map

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

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

@@ -4,7 +4,8 @@ interface PayrollOverviewProps extends BaseComponentInterface<'Payroll.PayrollOv
     companyId: string;
     payrollId: string;
     alerts?: PayrollFlowAlert[];
+    showBackButton?: boolean;
 }
 export declare function PayrollOverview(props: PayrollOverviewProps): import("react/jsx-runtime").JSX.Element;
-export declare const Root: ({ companyId, payrollId, dictionary, onEvent, alerts, }: PayrollOverviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Root: ({ companyId, payrollId, dictionary, onEvent, alerts, showBackButton, }: PayrollOverviewProps) => import("react/jsx-runtime").JSX.Element;
 export {};