@gusto/embedded-react-sdk 0.13.2 → 0.13.3

package/dist/components/Payroll/PayrollOverview/PayrollOverviewPresentation.js

@@ -1,100 +1,123 @@
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
-import { useTranslation as A } from "react-i18next";
-import { useState as R } from "react";
-import { Flex as E } from "../../Common/Flex/Flex.js";
-import { useComponentContext as B } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as I } from "../../../i18n/I18n.js";
-import { useLocale as j } from "../../../contexts/LocaleProvider/useLocale.js";
-import { parseDateStringToLocal as g } from "../../../helpers/dateFormatting.js";
-import W from "../../Common/hooks/useNumberFormatter.js";
-import { firstLastName as w } from "../../../helpers/formattedStrings.js";
-import { FlsaStatus as D, compensationTypeLabels as f } from "../../../shared/constants.js";
-import { DataView as T } from "../../Common/DataView/DataView.js";
-const X = ({
-  payPeriod: d,
-  locale: c,
-  t: u
+import { jsx as r, jsxs as d, Fragment as A } from "react/jsx-runtime";
+import { useTranslation as K } from "react-i18next";
+import { useState as _ } from "react";
+import { Flex as y } from "../../Common/Flex/Flex.js";
+import "classnames";
+import { useComponentContext as Q } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as $ } from "../../../i18n/I18n.js";
+import { useLocale as ee } from "../../../contexts/LocaleProvider/useLocale.js";
+import { parseDateStringToLocal as b } from "../../../helpers/dateFormatting.js";
+import te from "../../Common/hooks/useNumberFormatter.js";
+import { firstLastName as S } from "../../../helpers/formattedStrings.js";
+import { FlsaStatus as B, compensationTypeLabels as D } from "../../../shared/constants.js";
+import re from "../../../assets/icons/download-cloud.svg.js";
+import { DataView as u } from "../../Common/DataView/DataView.js";
+const ae = ({
+  payPeriod: c,
+  locale: h,
+  t: f
 }) => {
-  if (d?.startDate && d.endDate) {
-    const o = g(d.startDate), b = g(d.endDate);
-    if (o && b) {
-      const H = o.toLocaleDateString(c, {
+  if (c?.startDate && c.endDate) {
+    const g = b(c.startDate), T = b(c.endDate);
+    if (g && T) {
+      const x = g.toLocaleDateString(h, {
         month: "long",
         day: "numeric"
-      }), p = b.toLocaleDateString(c, {
+      }), n = T.toLocaleDateString(h, {
         month: "short",
         day: "numeric",
         year: "numeric"
       });
-      return u("pageSubtitle", { startDate: H, endDate: p });
+      return f("pageSubtitle", { startDate: x, endDate: n });
     }
   }
-  return u("pageSubtitle", { startDate: "", endDate: "" });
-}, ae = ({
-  onEdit: d,
-  onSubmit: c,
-  employeeDetails: u,
-  payrollData: o,
-  bankAccount: b
+  return f("pageSubtitle", { startDate: "", endDate: "" });
+}, ge = ({
+  onEdit: c,
+  onSubmit: h,
+  onCancel: f,
+  onPayrollReceipt: g,
+  onPaystubDownload: T,
+  employeeDetails: x,
+  payrollData: n,
+  bankAccount: R,
+  taxes: L,
+  isSubmitting: E = !1,
+  isProcessed: P
 }) => {
-  const { Alert: H, Button: p, Heading: C, Text: a, Tabs: v } = B();
-  I("Payroll.PayrollOverview");
-  const { locale: P } = j(), { t } = A("Payroll.PayrollOverview"), l = W("currency"), [F, O] = R("companyPays"), U = o.totals ? parseFloat(o.totals.grossPay) + parseFloat(o.totals.employerTaxes) + parseFloat(o.totals.reimbursements) + parseFloat(o.totals.benefits) : 0, _ = o.payrollStatusMeta?.expectedDebitTime ? g(o.payrollStatusMeta.expectedDebitTime) : o.payrollDeadline, L = (e) => e.taxes?.reduce(
-    (n, s) => s.employer ? n + s.amount : n,
+  const { Alert: I, Button: H, ButtonIcon: Y, Dialog: j, Heading: k, Text: a, Tabs: W } = Q();
+  $("Payroll.PayrollOverview");
+  const { locale: m } = ee(), { t } = K("Payroll.PayrollOverview"), o = te("currency"), [G, X] = _("companyPays"), [O, F] = _(!1), Z = n.totals ? parseFloat(n.totals.grossPay ?? "0") + parseFloat(n.totals.employerTaxes ?? "0") + parseFloat(n.totals.reimbursements ?? "0") + parseFloat(n.totals.benefits ?? "0") : 0, q = n.payrollStatusMeta?.expectedDebitTime ? b(n.payrollStatusMeta.expectedDebitTime) : n.payrollDeadline, N = (e) => e.taxes?.reduce(
+    (l, i) => i.employer ? l + i.amount : l,
     0
-  ) ?? 0, N = (e) => e.benefits?.reduce(
-    (n, s) => s.companyContribution ? n + s.companyContribution : n,
+  ) ?? 0, M = (e) => e.benefits?.reduce(
+    (l, i) => i.companyContribution ? l + i.companyContribution : l,
     0
-  ) ?? 0, S = (e) => e.fixedCompensations?.length ? parseFloat(
+  ) ?? 0, v = (e) => e.fixedCompensations?.length ? parseFloat(
     e.fixedCompensations.find(
-      (n) => n.name?.toLowerCase() === f.REIMBURSEMENT_NAME.toLowerCase()
+      (l) => l.name?.toLowerCase() === D.REIMBURSEMENT_NAME.toLowerCase()
     )?.amount || "0"
-  ) : 0, V = (e) => e.grossPay + S(e) + L(e) + N(e), i = new Map(u.map((e) => [e.uuid, e])), y = (e) => e.hourlyCompensations?.reduce(
-    (n, s) => {
-      if (typeof s.name > "u")
-        return n;
-      const m = s.name.toLowerCase(), x = n[m] ?? 0;
-      return n[m] = x + parseFloat(s.hours || "0"), n;
+  ) : 0, z = (e) => e.grossPay + v(e) + N(e) + M(e), s = new Map(x.map((e) => [e.uuid, e])), C = (e) => e.hourlyCompensations?.reduce(
+    (l, i) => {
+      if (typeof i.name > "u")
+        return l;
+      const p = i.name.toLowerCase(), w = l[p] ?? 0;
+      return l[p] = w + parseFloat(i.hours || "0"), l;
     },
     {}
-  ) || {}, M = (e) => e.paidTimeOff?.reduce((n, s) => n + parseFloat(s.hours || "0"), 0) ?? 0, k = [
+  ) || {}, U = (e) => e.paidTimeOff?.reduce((l, i) => l + parseFloat(i.hours || "0"), 0) ?? 0, V = [
+    {
+      title: t("tableHeaders.employees"),
+      render: (e) => /* @__PURE__ */ r(a, { children: S({
+        first_name: s.get(e.employeeUuid)?.firstName,
+        last_name: s.get(e.employeeUuid)?.lastName
+      }) })
+    },
+    {
+      title: t("tableHeaders.grossPay"),
+      render: (e) => /* @__PURE__ */ r(a, { children: o(e.grossPay) })
+    },
+    {
+      title: t("tableHeaders.reimbursements"),
+      render: (e) => /* @__PURE__ */ r(a, { children: o(v(e)) })
+    },
+    {
+      title: t("tableHeaders.companyTaxes"),
+      render: (e) => /* @__PURE__ */ r(a, { children: o(N(e)) })
+    },
+    {
+      title: t("tableHeaders.companyBenefits"),
+      render: (e) => /* @__PURE__ */ r(a, { children: o(M(e)) })
+    },
+    {
+      title: t("tableHeaders.companyPays"),
+      render: (e) => /* @__PURE__ */ r(a, { children: o(z(e)) })
+    }
+  ];
+  P && V.push({
+    title: t("tableHeaders.paystub"),
+    render: (e) => /* @__PURE__ */ r(
+      Y,
+      {
+        "aria-label": t("downloadPaystubLabel"),
+        variant: "tertiary",
+        onClick: () => {
+          e.employeeUuid && T(e.employeeUuid);
+        },
+        children: /* @__PURE__ */ r(re, {})
+      }
+    )
+  });
+  const J = [
     {
       id: "companyPays",
       label: t("dataViews.companyPaysTab"),
       content: /* @__PURE__ */ r(
-        T,
+        u,
         {
-          label: t("dataViews.companyPaysTab"),
-          columns: [
-            {
-              title: t("tableHeaders.employees"),
-              render: (e) => /* @__PURE__ */ r(a, { children: w({
-                first_name: i.get(e.employeeUuid)?.firstName,
-                last_name: i.get(e.employeeUuid)?.lastName
-              }) })
-            },
-            {
-              title: t("tableHeaders.grossPay"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(e.grossPay) })
-            },
-            {
-              title: t("tableHeaders.reimbursements"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(S(e)) })
-            },
-            {
-              title: t("tableHeaders.companyTaxes"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(L(e)) })
-            },
-            {
-              title: t("tableHeaders.companyBenefits"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(N(e)) })
-            },
-            {
-              title: t("tableHeaders.companyPays"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(V(e)) })
-            }
-          ],
-          data: o.employeeCompensations
+          label: t("dataViews.companyPaysTable"),
+          columns: V,
+          data: n.employeeCompensations
         }
       )
     },
@@ -102,61 +125,61 @@ const X = ({
       id: "hoursWorked",
       label: t("dataViews.hoursWorkedTab"),
       content: /* @__PURE__ */ r(
-        T,
+        u,
         {
-          label: t("dataViews.hoursWorkedTab"),
+          label: t("dataViews.hoursWorkedTable"),
           columns: [
             {
               title: t("tableHeaders.employees"),
-              render: (e) => /* @__PURE__ */ r(a, { children: w({
-                first_name: i.get(e.employeeUuid)?.firstName,
-                last_name: i.get(e.employeeUuid)?.lastName
+              render: (e) => /* @__PURE__ */ r(a, { children: S({
+                first_name: s.get(e.employeeUuid)?.firstName,
+                last_name: s.get(e.employeeUuid)?.lastName
               }) })
             },
             {
               title: t("tableHeaders.compensationType"),
-              render: (e) => /* @__PURE__ */ r(a, { children: i.get(e.employeeUuid)?.jobs?.reduce((n, s) => {
-                if (s.primary) {
-                  const m = s.compensations?.find(
-                    (x) => x.uuid === s.currentCompensationUuid
+              render: (e) => /* @__PURE__ */ r(a, { children: s.get(e.employeeUuid)?.jobs?.reduce((l, i) => {
+                if (i.primary) {
+                  const p = i.compensations?.find(
+                    (w) => w.uuid === i.currentCompensationUuid
                   )?.flsaStatus;
-                  switch (m) {
-                    case D.EXEMPT:
+                  switch (p) {
+                    case B.EXEMPT:
                       return t("compensationTypeLabels.exempt");
-                    case D.NONEXEMPT:
+                    case B.NONEXEMPT:
                       return t("compensationTypeLabels.nonexempt");
                     default:
-                      return m ?? "";
+                      return p ?? "";
                   }
                 }
-                return n;
+                return l;
               }, "") })
             },
             {
               title: t("tableHeaders.regular"),
-              render: (e) => /* @__PURE__ */ r(a, { children: y(e)[f.REGULAR_HOURS_NAME] || 0 })
+              render: (e) => /* @__PURE__ */ r(a, { children: C(e)[D.REGULAR_HOURS_NAME] || 0 })
             },
             {
               title: t("tableHeaders.overtime"),
-              render: (e) => /* @__PURE__ */ r(a, { children: y(e)[f.OVERTIME_NAME] || 0 })
+              render: (e) => /* @__PURE__ */ r(a, { children: C(e)[D.OVERTIME_NAME] || 0 })
             },
             {
               title: t("tableHeaders.doubleOT"),
-              render: (e) => /* @__PURE__ */ r(a, { children: y(e)[f.DOUBLE_OVERTIME_NAME] || 0 })
+              render: (e) => /* @__PURE__ */ r(a, { children: C(e)[D.DOUBLE_OVERTIME_NAME] || 0 })
             },
             {
               title: t("tableHeaders.timeOff"),
-              render: (e) => /* @__PURE__ */ r(a, { children: M(e) })
+              render: (e) => /* @__PURE__ */ r(a, { children: U(e) })
             },
             {
               title: t("tableHeaders.totalHours"),
-              render: (e) => /* @__PURE__ */ r(a, { children: Object.values(y(e)).reduce(
-                (n, s) => n + s,
+              render: (e) => /* @__PURE__ */ r(a, { children: Object.values(C(e)).reduce(
+                (l, i) => l + i,
                 0
-              ) + M(e) })
+              ) + U(e) })
             }
           ],
-          data: o.employeeCompensations
+          data: n.employeeCompensations
         }
       )
     },
@@ -164,15 +187,15 @@ const X = ({
       id: "employeeTakeHome",
       label: t("dataViews.employeeTakeHomeTab"),
       content: /* @__PURE__ */ r(
-        T,
+        u,
         {
-          label: t("dataViews.employeeTakeHomeTab"),
+          label: t("dataViews.employeeTakeHomeTable"),
           columns: [
             {
               title: t("tableHeaders.employees"),
-              render: (e) => /* @__PURE__ */ r(a, { children: w({
-                first_name: i.get(e.employeeUuid)?.firstName,
-                last_name: i.get(e.employeeUuid)?.lastName
+              render: (e) => /* @__PURE__ */ r(a, { children: S({
+                first_name: s.get(e.employeeUuid)?.firstName,
+                last_name: s.get(e.employeeUuid)?.lastName
               }) })
             },
             {
@@ -181,82 +204,157 @@ const X = ({
             },
             {
               title: t("tableHeaders.grossPay"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(e.grossPay ?? 0) })
+              render: (e) => /* @__PURE__ */ r(a, { children: o(e.grossPay ?? 0) })
             },
             {
               title: t("tableHeaders.deductions"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(
+              render: (e) => /* @__PURE__ */ r(a, { children: o(
                 e.deductions?.reduce(
-                  (n, s) => n + s.amount,
+                  (l, i) => l + i.amount,
                   0
                 ) ?? 0
               ) })
             },
             {
               title: t("tableHeaders.reimbursements"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(S(e)) })
+              render: (e) => /* @__PURE__ */ r(a, { children: o(v(e)) })
             },
             {
               title: t("tableHeaders.employeeTaxes"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(
+              render: (e) => /* @__PURE__ */ r(a, { children: o(
                 e.taxes?.reduce(
-                  (n, s) => s.employer ? n : n + s.amount,
+                  (l, i) => i.employer ? l : l + i.amount,
                   0
                 ) ?? 0
               ) })
             },
             {
               title: t("tableHeaders.employeeBenefits"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(
+              render: (e) => /* @__PURE__ */ r(a, { children: o(
                 e.benefits?.reduce(
-                  (n, s) => n + (s.employeeDeduction ?? 0),
+                  (l, i) => l + (i.employeeDeduction ?? 0),
                   0
                 ) ?? 0
               ) })
             },
             {
               title: t("tableHeaders.payment"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(e.netPay ?? 0) })
+              render: (e) => /* @__PURE__ */ r(a, { children: o(e.netPay ?? 0) })
             }
           ],
-          data: o.employeeCompensations
+          data: n.employeeCompensations
         }
       )
+    },
+    {
+      id: "taxes",
+      label: t("dataViews.taxesTab"),
+      content: /* @__PURE__ */ d(y, { flexDirection: "column", gap: 32, children: [
+        /* @__PURE__ */ r(
+          u,
+          {
+            label: t("dataViews.taxesTable"),
+            columns: [
+              {
+                key: "taxDescription",
+                title: t("tableHeaders.taxDescription"),
+                render: (e) => /* @__PURE__ */ r(a, { children: e })
+              },
+              {
+                key: "byYourEmployees",
+                title: t("tableHeaders.byYourEmployees"),
+                render: (e) => /* @__PURE__ */ r(a, { children: o(L[e]?.employee ?? 0) })
+              },
+              {
+                key: "byYourCompany",
+                title: t("tableHeaders.byYourCompany"),
+                render: (e) => /* @__PURE__ */ r(a, { children: o(L[e]?.employer ?? 0) })
+              }
+            ],
+            footer: () => ({
+              taxDescription: /* @__PURE__ */ r(a, { children: t("totalsLabel") }),
+              byYourEmployees: /* @__PURE__ */ r(a, { children: o(parseFloat(n.totals?.employeeTaxes ?? "0")) }),
+              byYourCompany: /* @__PURE__ */ r(a, { children: o(parseFloat(n.totals?.employerTaxes ?? "0")) })
+            }),
+            data: Object.keys(L)
+          }
+        ),
+        /* @__PURE__ */ r(
+          u,
+          {
+            label: t("dataViews.debitedTable"),
+            columns: [
+              {
+                title: t("tableHeaders.debitedByGusto"),
+                render: ({ label: e }) => /* @__PURE__ */ r(a, { children: e })
+              },
+              {
+                title: t("tableHeaders.taxesTotal"),
+                render: ({ value: e }) => /* @__PURE__ */ r(a, { children: o(parseFloat(e)) })
+              }
+            ],
+            data: [
+              { label: t("directDepositLabel"), value: n.totals?.netPayDebit || "0" },
+              {
+                label: t("reimbursementLabel"),
+                value: n.totals?.reimbursementDebit || "0"
+              },
+              {
+                label: t("garnishmentsLabel"),
+                value: n.totals?.childSupportDebit || "0"
+              },
+              { label: t("taxesLabel"), value: n.totals?.taxDebit || "0" }
+            ]
+          }
+        )
+      ] })
     }
   ];
-  return /* @__PURE__ */ h(E, { flexDirection: "column", alignItems: "stretch", children: [
-    /* @__PURE__ */ h(E, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ h("div", { children: [
-        /* @__PURE__ */ r(C, { as: "h1", children: t("pageTitle") }),
-        /* @__PURE__ */ r(a, { children: X({ payPeriod: o.payPeriod, locale: P, t }) })
+  return /* @__PURE__ */ d(y, { flexDirection: "column", alignItems: "stretch", children: [
+    /* @__PURE__ */ d(y, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ d("div", { children: [
+        /* @__PURE__ */ r(k, { as: "h1", children: t(P ? "summaryTitle" : "overviewTitle") }),
+        /* @__PURE__ */ r(a, { children: ae({ payPeriod: n.payPeriod, locale: m, t }) })
       ] }),
-      /* @__PURE__ */ h(E, { justifyContent: "flex-end", children: [
-        /* @__PURE__ */ r(p, { onClick: d, variant: "secondary", children: t("editCta") }),
-        /* @__PURE__ */ r(p, { onClick: c, children: t("submitCta") })
-      ] })
+      /* @__PURE__ */ r(y, { justifyContent: "flex-end", children: P ? /* @__PURE__ */ d(A, { children: [
+        /* @__PURE__ */ r(H, { onClick: g, variant: "secondary", children: t("payrollReceiptCta") }),
+        /* @__PURE__ */ r(
+          H,
+          {
+            onClick: () => {
+              F(!0);
+            },
+            variant: "error",
+            children: t("cancelCta")
+          }
+        )
+      ] }) : /* @__PURE__ */ d(A, { children: [
+        /* @__PURE__ */ r(H, { onClick: c, variant: "secondary", isDisabled: E, children: t("editCta") }),
+        /* @__PURE__ */ r(H, { onClick: h, isLoading: E, children: t("submitCta") })
+      ] }) })
     ] }),
-    /* @__PURE__ */ r(H, { label: t("alerts.progressSaved"), status: "success" }),
-    /* @__PURE__ */ r(C, { as: "h3", children: t("payrollSummaryTitle") }),
+    /* @__PURE__ */ r(I, { label: t("alerts.progressSaved"), status: "success" }),
+    /* @__PURE__ */ r(k, { as: "h3", children: t("payrollSummaryTitle") }),
     /* @__PURE__ */ r(
-      T,
+      u,
       {
         label: t("payrollSummaryLabel"),
         columns: [
           {
             title: t("tableHeaders.totalPayroll"),
-            render: () => /* @__PURE__ */ r(a, { children: l(U) })
+            render: () => /* @__PURE__ */ r(a, { children: o(Z) })
           },
           {
             title: t("tableHeaders.debitAmount"),
-            render: () => /* @__PURE__ */ r(a, { children: l(parseFloat(o.totals?.companyDebit ?? "0")) })
+            render: () => /* @__PURE__ */ r(a, { children: o(parseFloat(n.totals?.companyDebit ?? "0")) })
           },
           {
             title: t("tableHeaders.debitAccount"),
-            render: () => /* @__PURE__ */ r(a, { children: b?.hiddenAccountNumber ?? "" })
+            render: () => /* @__PURE__ */ r(a, { children: R?.hiddenAccountNumber ?? "" })
           },
           {
             title: t("tableHeaders.debitDate"),
-            render: () => /* @__PURE__ */ r(a, { children: _?.toLocaleString(P, {
+            render: () => /* @__PURE__ */ r(a, { children: q?.toLocaleString(m, {
               month: "short",
               day: "numeric",
               year: "numeric"
@@ -264,7 +362,7 @@ const X = ({
           },
           {
             title: t("tableHeaders.employeesPayDate"),
-            render: () => /* @__PURE__ */ r(a, { children: g(o.checkDate)?.toLocaleDateString(P, {
+            render: () => /* @__PURE__ */ r(a, { children: b(n.checkDate)?.toLocaleDateString(m, {
               month: "short",
               day: "numeric",
               year: "numeric"
@@ -275,17 +373,59 @@ const X = ({
       }
     ),
     /* @__PURE__ */ r(
-      v,
+      W,
       {
-        onSelectionChange: O,
-        selectedId: F,
+        onSelectionChange: X,
+        selectedId: G,
         "aria-label": t("dataViews.label"),
-        tabs: k
+        tabs: J
+      }
+    ),
+    O && /* @__PURE__ */ r(
+      j,
+      {
+        isOpen: O,
+        onClose: () => {
+          F(!1);
+        },
+        onPrimaryActionClick: f,
+        shouldCloseOnBackdropClick: !0,
+        primaryActionLabel: t("confirmCancelCta"),
+        isDestructive: !0,
+        closeActionLabel: t("declineCancelCta"),
+        title: t("cancelDialogTitle", {
+          startDate: b(
+            n.payPeriod?.startDate ?? ""
+          )?.toLocaleDateString(m, {
+            month: "long",
+            day: "numeric"
+          }),
+          endDate: b(
+            n.payPeriod?.endDate ?? ""
+          )?.toLocaleDateString(m, {
+            month: "long",
+            day: "numeric",
+            year: "numeric"
+          })
+        }),
+        children: /* @__PURE__ */ d(y, { gap: 14, flexDirection: "column", children: [
+          /* @__PURE__ */ r(a, { children: t("cancelDialogDescription") }),
+          /* @__PURE__ */ r(a, { children: t("cancelDialogDescriptionDeadline", {
+            deadline: (n.payrollDeadline ?? "").toLocaleString(m, {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+              hour: "numeric",
+              minute: "numeric",
+              timeZoneName: "short"
+            })
+          }) })
+        ] })
       }
     )
   ] });
 };
 export {
-  ae as PayrollOverviewPresentation
+  ge as PayrollOverviewPresentation
 };
 //# sourceMappingURL=PayrollOverviewPresentation.js.map