npm - @gusto/embedded-react-sdk - Versions diffs - 0.23.0 → 0.24.0 - Mend

@gusto/embedded-react-sdk 0.23.0 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/dist/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.js CHANGED Viewed

@@ -1,75 +1,80 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { useRef as P } from "react";
-import { useTranslation as R } from "react-i18next";
-import d from "classnames";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useRef as I } from "react";
+import { useTranslation as z } from "react-i18next";
+import p from "classnames";
 import i from "./PayrollReceiptsPresentation.module.scss.js";
-import { Flex as a } from "../../Common/Flex/Flex.js";
+import { Flex as m } from "../../Common/Flex/Flex.js";
 import "../../../shared/constants.js";
-import { useComponentContext as L } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { formatNumberAsCurrency as r } from "../../../helpers/formattedStrings.js";
-import { useI18n as I } from "../../../i18n/I18n.js";
-import { useContainerBreakpoints as S } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-import z from "../../../assets/icons/receipt-check.svg.js";
-import { DataTable as b } from "../../Common/DataView/DataTable/DataTable.js";
-import { DataView as h } from "../../Common/DataView/DataView.js";
-const Q = ({ receiptData: n }) => {
-  const { Heading: p, Text: o } = L();
-  I("Payroll.PayrollReceipts");
-  const { t } = R("Payroll.PayrollReceipts"), u = P(null), c = !S({ ref: u }).includes("small"), y = (l) => `${l.employeeFirstName || ""} ${l.employeeLastName || ""}`.trim(), g = () => (n.employeeCompensations || []).reduce(
-    (l, s) => l + parseFloat(s.childSupportGarnishment || "0"),
+import { useComponentContext as M } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { formatNumberAsCurrency as a } from "../../../helpers/formattedStrings.js";
+import { useI18n as $ } from "../../../i18n/I18n.js";
+import { useContainerBreakpoints as A } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import B from "../../../assets/icons/receipt-check.svg.js";
+import { DataTable as y } from "../../Common/DataView/DataTable/DataTable.js";
+import { DataView as f } from "../../Common/DataView/DataView.js";
+const Z = ({
+  receiptData: o,
+  withReimbursements: u = !0
+}) => {
+  const { Heading: b, Text: t } = M();
+  $("Payroll.PayrollReceipts");
+  const { t: l } = z("Payroll.PayrollReceipts"), h = I(null), d = !A({ ref: h }).includes("small"), g = (n) => `${n.employeeFirstName || ""} ${n.employeeLastName || ""}`.trim(), x = () => (o.employeeCompensations || []).reduce(
+    (n, s) => n + parseFloat(s.childSupportGarnishment || "0"),
     0
-  ), f = () => (n.employeeCompensations || []).reduce(
-    (l, s) => l + parseFloat(s.totalReimbursement || "0"),
+  ), k = () => (o.employeeCompensations || []).reduce(
+    (n, s) => n + parseFloat(s.totalReimbursement || "0"),
     0
-  ), x = () => (n.employeeCompensations || []).reduce(
-    (l, s) => l + parseFloat(s.netPay || "0"),
+  ), w = () => (o.employeeCompensations || []).reduce(
+    (n, s) => n + parseFloat(s.netPay || "0"),
     0
-  ), w = () => (n.employeeCompensations || []).reduce(
-    (l, s) => l + parseFloat(s.totalTax || "0"),
+  ), F = () => (o.employeeCompensations || []).reduce(
+    (n, s) => n + parseFloat(s.totalTax || "0"),
     0
-  ), k = [
+  ), v = [
     {
-      label: t("breakdown.directDeposits"),
-      amount: parseFloat(n.totals?.netPayDebit || "0")
-    },
-    {
-      label: t("breakdown.reimbursements"),
-      amount: parseFloat(n.totals?.reimbursementDebit || "0")
+      label: l("breakdown.directDeposits"),
+      amount: parseFloat(o.totals?.netPayDebit || "0")
     },
+    ...u ? [
+      {
+        label: l("breakdown.reimbursements"),
+        amount: parseFloat(o.totals?.reimbursementDebit || "0")
+      }
+    ] : [],
     {
-      label: t("breakdown.garnishments"),
-      amount: parseFloat(n.totals?.childSupportDebit || "0")
+      label: l("breakdown.garnishments"),
+      amount: parseFloat(o.totals?.childSupportDebit || "0")
     },
-    { label: t("breakdown.taxes"), amount: parseFloat(n.totals?.taxDebit || "0") }
-  ], F = [
+    { label: l("breakdown.taxes"), amount: parseFloat(o.totals?.taxDebit || "0") }
+  ], N = [
     {
-      label: t("receipt.receiptId"),
-      value: n.payrollUuid || ""
+      label: l("receipt.receiptId"),
+      value: o.payrollUuid || ""
     },
     {
-      label: t("receipt.from"),
-      value: n.nameOfSender || ""
+      label: l("receipt.from"),
+      value: o.nameOfSender || ""
     },
     {
-      label: t("receipt.to"),
-      value: n.nameOfRecipient || "Payroll Recipients"
+      label: l("receipt.to"),
+      value: o.nameOfRecipient || "Payroll Recipients"
     },
     {
-      label: t("receipt.debitDate"),
-      value: n.debitDate || ""
+      label: l("receipt.debitDate"),
+      value: o.debitDate || ""
     }
-  ], v = () => /* @__PURE__ */ e("div", { className: d(i.receiptHeader, c && i.receiptHeaderMobile), children: /* @__PURE__ */ m(a, { flexDirection: "column", gap: 24, children: [
-    /* @__PURE__ */ m(a, { flexDirection: "column", alignItems: "center", gap: 16, children: [
-      /* @__PURE__ */ e("div", { className: i.receiptIcon, children: /* @__PURE__ */ e(z, { className: i.checkmarkIcon }) }),
-      /* @__PURE__ */ m(a, { flexDirection: "column", alignItems: "center", gap: 8, children: [
-        /* @__PURE__ */ e(o, { size: "sm", variant: "supporting", children: t("receipt.totalLabel") }),
-        /* @__PURE__ */ e(p, { as: "h1", styledAs: "h2", className: i.totalAmount, children: r(parseFloat(n.totals?.companyDebit || "0")) })
+  ], C = () => /* @__PURE__ */ e("div", { className: p(i.receiptHeader, d && i.receiptHeaderMobile), children: /* @__PURE__ */ c(m, { flexDirection: "column", gap: 24, children: [
+    /* @__PURE__ */ c(m, { flexDirection: "column", alignItems: "center", gap: 16, children: [
+      /* @__PURE__ */ e("div", { className: i.receiptIcon, children: /* @__PURE__ */ e(B, { className: i.checkmarkIcon }) }),
+      /* @__PURE__ */ c(m, { flexDirection: "column", alignItems: "center", gap: 8, children: [
+        /* @__PURE__ */ e(t, { size: "sm", variant: "supporting", children: l("receipt.totalLabel") }),
+        /* @__PURE__ */ e(b, { as: "h1", styledAs: "h2", className: i.totalAmount, children: a(parseFloat(o.totals?.companyDebit || "0")) })
       ] })
     ] }),
     /* @__PURE__ */ e("div", { className: i.receiptDetailsTable, children: /* @__PURE__ */ e(
-      h,
+      f,
       {
-        label: t("receipt.detailsLabel"),
+        label: l("receipt.detailsLabel"),
         variant: "minimal",
         breakAt: "small",
         breakpoints: {
@@ -79,142 +84,152 @@ const Q = ({ receiptData: n }) => {
         columns: [
           {
             title: "",
-            render: (l) => /* @__PURE__ */ e(o, { size: "sm", variant: "supporting", children: l.label })
+            render: (n) => /* @__PURE__ */ e(t, { size: "sm", variant: "supporting", children: n.label })
           },
           {
             title: "",
-            render: (l) => /* @__PURE__ */ e(o, { size: "sm", children: l.value })
+            render: (n) => /* @__PURE__ */ e(t, { size: "sm", children: n.value })
           }
         ],
-        data: F
+        data: N
       }
     ) }),
-    /* @__PURE__ */ m(a, { flexDirection: "column", alignItems: "center", gap: 12, children: [
+    /* @__PURE__ */ c(m, { flexDirection: "column", alignItems: "center", gap: 12, children: [
       /* @__PURE__ */ e(
-        o,
+        t,
         {
           size: "sm",
           variant: "supporting",
-          className: d(i.disclaimer, c && i.textMobile),
-          children: n.recipientNotice
+          className: p(i.disclaimer, d && i.textMobile),
+          children: o.recipientNotice
         }
       ),
       /* @__PURE__ */ e(
-        o,
+        t,
         {
           size: "sm",
           variant: "supporting",
-          className: d(i.companyInfo, c && i.textMobile),
-          children: n.license
+          className: p(i.companyInfo, d && i.textMobile),
+          children: o.license
         }
       ),
       /* @__PURE__ */ e(
-        o,
+        t,
         {
           size: "sm",
           variant: "supporting",
-          className: d(i.address, c && i.textMobile),
-          children: n.licensee && `${n.licensee.address || ""}, ${n.licensee.city || ""}, ${n.licensee.state || ""} ${n.licensee.postalCode || ""}`
+          className: p(i.address, d && i.textMobile),
+          children: o.licensee && `${o.licensee.address || ""}, ${o.licensee.city || ""}, ${o.licensee.state || ""} ${o.licensee.postalCode || ""}`
         }
       )
     ] })
-  ] }) }), N = () => /* @__PURE__ */ e(a, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ e(
-    b,
+  ] }) }), P = () => /* @__PURE__ */ e(m, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ e(
+    y,
     {
-      label: t("sections.debitedLabel"),
+      label: l("sections.debitedLabel"),
       columns: [
         {
-          title: t("sections.debitedLabel"),
-          render: (l) => /* @__PURE__ */ e(o, { children: l.label })
+          title: l("sections.debitedLabel"),
+          render: (n) => /* @__PURE__ */ e(t, { children: n.label })
         },
         {
-          title: t("breakdown.amount"),
-          render: (l) => /* @__PURE__ */ e(o, { children: r(l.amount) })
+          title: l("breakdown.amount"),
+          render: (n) => /* @__PURE__ */ e(t, { children: a(n.amount) })
         }
       ],
-      data: k,
+      data: v,
       footer: () => ({
-        "column-0": /* @__PURE__ */ e(o, { weight: "semibold", children: t("breakdown.totals") }),
-        "column-1": /* @__PURE__ */ e(o, { weight: "semibold", children: r(parseFloat(n.totals?.companyDebit || "0")) })
+        "column-0": /* @__PURE__ */ e(t, { weight: "semibold", children: l("breakdown.totals") }),
+        "column-1": /* @__PURE__ */ e(t, { weight: "semibold", children: a(parseFloat(o.totals?.companyDebit || "0")) })
       })
     }
-  ) }), C = () => /* @__PURE__ */ e(a, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ e(
-    b,
+  ) }), T = () => /* @__PURE__ */ e(m, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ e(
+    y,
     {
-      label: t("sections.taxLabel"),
+      label: l("sections.taxLabel"),
       columns: [
         {
-          title: t("sections.taxLabel"),
-          render: (l) => /* @__PURE__ */ e(o, { children: l.name })
+          title: l("sections.taxLabel"),
+          render: (n) => /* @__PURE__ */ e(t, { children: n.name })
         },
         {
-          title: t("tax.amount"),
-          render: (l) => /* @__PURE__ */ e(o, { children: r(parseFloat(l.amount || "0")) })
+          title: l("tax.amount"),
+          render: (n) => /* @__PURE__ */ e(t, { children: a(parseFloat(n.amount || "0")) })
         }
       ],
-      data: n.taxes || [],
+      data: o.taxes || [],
       footer: () => ({
-        "column-0": /* @__PURE__ */ e(o, { weight: "semibold", children: t("breakdown.totals") }),
-        "column-1": /* @__PURE__ */ e(o, { weight: "semibold", children: r(parseFloat(n.totals?.taxDebit || "0")) })
+        "column-0": /* @__PURE__ */ e(t, { weight: "semibold", children: l("breakdown.totals") }),
+        "column-1": /* @__PURE__ */ e(t, { weight: "semibold", children: a(parseFloat(o.totals?.taxDebit || "0")) })
       })
     }
-  ) }), T = () => /* @__PURE__ */ m(a, { flexDirection: "column", gap: 16, children: [
-    c && /* @__PURE__ */ e(p, { as: "h2", children: t("sections.employeesLabel") }),
-    /* @__PURE__ */ e(
-      h,
-      {
-        label: t("sections.employeesLabel"),
-        columns: [
-          {
-            title: t("employee.name"),
-            render: (l) => /* @__PURE__ */ e(o, { children: y(l) })
-          },
-          {
-            title: t("employee.paymentMethod"),
-            render: (l) => /* @__PURE__ */ e(o, { children: l.paymentMethod || "N/A" })
-          },
-          {
-            title: t("employee.childSupport"),
-            render: (l) => /* @__PURE__ */ e(o, { children: r(parseFloat(l.childSupportGarnishment || "0")) })
-          },
-          {
-            title: t("employee.reimbursement"),
-            render: (l) => /* @__PURE__ */ e(o, { children: r(parseFloat(l.totalReimbursement || "0")) })
-          },
-          {
-            title: t("employee.totalTaxes"),
-            render: (l) => /* @__PURE__ */ e(o, { children: r(parseFloat(l.totalTax || "0")) })
-          },
-          {
-            title: t("employee.netPay"),
-            render: (l) => /* @__PURE__ */ e(o, { children: r(parseFloat(l.netPay || "0")) })
-          }
-        ],
-        data: n.employeeCompensations || [],
-        footer: () => ({
-          "column-0": /* @__PURE__ */ m(a, { flexDirection: "column", gap: 4, children: [
-            /* @__PURE__ */ e(o, { weight: "semibold", children: t("breakdown.totals") }),
-            /* @__PURE__ */ e(o, { size: "sm", variant: "supporting", children: t("employee.totalEmployees", {
-              count: n.employeeCompensations?.length || 0
-            }) })
-          ] }),
-          "column-1": /* @__PURE__ */ e(o, { children: " " }),
-          "column-2": /* @__PURE__ */ e(o, { weight: "semibold", children: r(g()) }),
-          "column-3": /* @__PURE__ */ e(o, { weight: "semibold", children: r(f()) }),
-          "column-4": /* @__PURE__ */ e(o, { weight: "semibold", children: r(w()) }),
-          "column-5": /* @__PURE__ */ e(o, { weight: "semibold", children: r(x()) })
-        })
-      }
-    )
-  ] });
-  return /* @__PURE__ */ e("div", { className: i.container, ref: u, children: /* @__PURE__ */ m(a, { flexDirection: "column", gap: 24, children: [
-    v(),
-    N(),
+  ) }), R = () => {
+    const s = [
+      /* @__PURE__ */ c(m, { flexDirection: "column", gap: 4, children: [
+        /* @__PURE__ */ e(t, { weight: "semibold", children: l("breakdown.totals") }),
+        /* @__PURE__ */ e(t, { size: "sm", variant: "supporting", children: l("employee.totalEmployees", {
+          count: o.employeeCompensations?.length || 0
+        }) })
+      ] }, "totals"),
+      /* @__PURE__ */ e(t, { children: " " }, "spacer"),
+      /* @__PURE__ */ e(t, { weight: "semibold", children: a(x()) }, "childSupport"),
+      ...u ? [
+        /* @__PURE__ */ e(t, { weight: "semibold", children: a(k()) }, "reimbursements")
+      ] : [],
+      /* @__PURE__ */ e(t, { weight: "semibold", children: a(F()) }, "taxes"),
+      /* @__PURE__ */ e(t, { weight: "semibold", children: a(w()) }, "netPay")
+    ].reduce(
+      (r, L, S) => (r[`column-${S}`] = L, r),
+      {}
+    );
+    return /* @__PURE__ */ c(m, { flexDirection: "column", gap: 16, children: [
+      d && /* @__PURE__ */ e(b, { as: "h2", children: l("sections.employeesLabel") }),
+      /* @__PURE__ */ e(
+        f,
+        {
+          label: l("sections.employeesLabel"),
+          columns: [
+            {
+              title: l("employee.name"),
+              render: (r) => /* @__PURE__ */ e(t, { children: g(r) })
+            },
+            {
+              title: l("employee.paymentMethod"),
+              render: (r) => /* @__PURE__ */ e(t, { children: r.paymentMethod || "N/A" })
+            },
+            {
+              title: l("employee.childSupport"),
+              render: (r) => /* @__PURE__ */ e(t, { children: a(parseFloat(r.childSupportGarnishment || "0")) })
+            },
+            ...u ? [
+              {
+                title: l("employee.reimbursement"),
+                render: (r) => /* @__PURE__ */ e(t, { children: a(parseFloat(r.totalReimbursement || "0")) })
+              }
+            ] : [],
+            {
+              title: l("employee.totalTaxes"),
+              render: (r) => /* @__PURE__ */ e(t, { children: a(parseFloat(r.totalTax || "0")) })
+            },
+            {
+              title: l("employee.netPay"),
+              render: (r) => /* @__PURE__ */ e(t, { children: a(parseFloat(r.netPay || "0")) })
+            }
+          ],
+          data: o.employeeCompensations || [],
+          footer: () => s
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ e("div", { className: i.container, ref: h, children: /* @__PURE__ */ c(m, { flexDirection: "column", gap: 24, children: [
     C(),
-    T()
+    P(),
+    T(),
+    R()
   ] }) });
 };
 export {
-  Q as PayrollReceiptsPresentation
+  Z as PayrollReceiptsPresentation
 };
 //# sourceMappingURL=PayrollReceiptsPresentation.js.map

package/dist/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PayrollReceiptsPresentation.js","sources":["../../../../src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport type {\n PayrollReceipt,\n Taxes as TaxBreakdownItem,\n PayrollReceiptEmployeeCompensations as EmployeeBreakdownItem,\n} from '@gusto/embedded-api/models/components/payrollreceipt'\nimport styles from './PayrollReceiptsPresentation.module.scss'\nimport { DataView, DataTable, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useI18n } from '@/i18n'\nimport { useContainerBreakpoints } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport ReceiptCheck from '@/assets/icons/receipt-check.svg?react'\n\ninterface PayrollReceiptsPresentationProps {\n receiptData: PayrollReceipt\n}\n\nexport const PayrollReceiptsPresentation = ({ receiptData }: PayrollReceiptsPresentationProps) => {\n const { Heading, Text } = useComponentContext()\n useI18n('Payroll.PayrollReceipts')\n const { t } = useTranslation('Payroll.PayrollReceipts')\n\n const containerRef = useRef<HTMLDivElement>(null)\n const breakpoints = useContainerBreakpoints({ ref: containerRef })\n const isMobile = !breakpoints.includes('small')\n\n // Helper to get employee full name\n const getEmployeeFullName = (emp: EmployeeBreakdownItem) =>\n `${emp.employeeFirstName \|\| ''} ${emp.employeeLastName \|\| ''}`.trim()\n\n const getTotalChildSupport = () =>\n (receiptData.employeeCompensations \|\| []).reduce(\n (sum, emp) => sum + parseFloat(emp.childSupportGarnishment \|\| '0'),\n 0,\n )\n\n const getTotalReimbursements = () =>\n (receiptData.employeeCompensations \|\| []).reduce(\n (sum, emp) => sum + parseFloat(emp.totalReimbursement \|\| '0'),\n 0,\n )\n\n const getTotalNetPay = () =>\n (receiptData.employeeCompensations \|\| []).reduce(\n (sum, emp) => sum + parseFloat(emp.netPay \|\| '0'),\n 0,\n )\n\n const getTotalTaxes = () =>\n (receiptData.employeeCompensations \|\| []).reduce(\n (sum, emp) => sum + parseFloat(emp.totalTax \|\| '0'),\n 0,\n )\n\n const breakdownData = [\n {\n label: t('breakdown.directDeposits'),\n amount: parseFloat(receiptData.totals?.netPayDebit \|\| '0'),\n },\n {\n label: t('breakdown.reimbursements'),\n amount: parseFloat(receiptData.totals?.reimbursementDebit \|\| '0'),\n },\n {\n label: t('breakdown.garnishments'),\n amount: parseFloat(receiptData.totals?.childSupportDebit \|\| '0'),\n },\n { label: t('breakdown.taxes'), amount: parseFloat(receiptData.totals?.taxDebit \|\| '0') },\n ]\n\n const receiptDetailsConfig = [\n {\n label: t('receipt.receiptId'),\n value: receiptData.payrollUuid \|\| '',\n },\n {\n label: t('receipt.from'),\n value: receiptData.nameOfSender \|\| '',\n },\n {\n label: t('receipt.to'),\n value: receiptData.nameOfRecipient \|\| 'Payroll Recipients',\n },\n {\n label: t('receipt.debitDate'),\n value: receiptData.debitDate \|\| '',\n },\n ]\n\n const renderReceiptHeader = () => (\n <div className={classNames(styles.receiptHeader, isMobile && styles.receiptHeaderMobile)}>\n <Flex flexDirection=\"column\" gap={24}>\n <Flex flexDirection=\"column\" alignItems=\"center\" gap={16}>\n <div className={styles.receiptIcon}>\n <ReceiptCheck className={styles.checkmarkIcon} />\n </div>\n\n <Flex flexDirection=\"column\" alignItems=\"center\" gap={8}>\n <Text size=\"sm\" variant=\"supporting\">\n {t('receipt.totalLabel')}\n </Text>\n <Heading as=\"h1\" styledAs=\"h2\" className={styles.totalAmount}>\n {formatNumberAsCurrency(parseFloat(receiptData.totals?.companyDebit \|\| '0'))}\n </Heading>\n </Flex>\n </Flex>\n\n <div className={styles.receiptDetailsTable}>\n <DataView\n label={t('receipt.detailsLabel')}\n variant=\"minimal\"\n breakAt=\"small\"\n breakpoints={{\n base: '0rem',\n small: '22rem',\n }}\n columns={[\n {\n title: '',\n render: (item: { label: string; value: string }) => (\n <Text size=\"sm\" variant=\"supporting\">\n {item.label}\n </Text>\n ),\n },\n {\n title: '',\n render: (item: { label: string; value: string }) => (\n <Text size=\"sm\">{item.value}</Text>\n ),\n },\n ]}\n data={receiptDetailsConfig}\n />\n </div>\n\n <Flex flexDirection=\"column\" alignItems=\"center\" gap={12}>\n <Text\n size=\"sm\"\n variant=\"supporting\"\n className={classNames(styles.disclaimer, isMobile && styles.textMobile)}\n >\n {receiptData.recipientNotice}\n </Text>\n\n <Text\n size=\"sm\"\n variant=\"supporting\"\n className={classNames(styles.companyInfo, isMobile && styles.textMobile)}\n >\n {receiptData.license}\n </Text>\n\n <Text\n size=\"sm\"\n variant=\"supporting\"\n className={classNames(styles.address, isMobile && styles.textMobile)}\n >\n {receiptData.licensee &&\n `${receiptData.licensee.address \|\| ''}, ${receiptData.licensee.city \|\| ''}, ${receiptData.licensee.state \|\| ''} ${receiptData.licensee.postalCode \|\| ''}`}\n </Text>\n </Flex>\n </Flex>\n </div>\n )\n\n const renderBreakdownSection = () => (\n <Flex flexDirection=\"column\" gap={16}>\n <DataTable\n label={t('sections.debitedLabel')}\n columns={[\n {\n title: t('sections.debitedLabel'),\n render: (item: { label: string; amount: number }) => <Text>{item.label}</Text>,\n },\n {\n title: t('breakdown.amount'),\n render: (item: { label: string; amount: number }) => (\n <Text>{formatNumberAsCurrency(item.amount)}</Text>\n ),\n },\n ]}\n data={breakdownData}\n footer={() => ({\n 'column-0': <Text weight=\"semibold\">{t('breakdown.totals')}</Text>,\n 'column-1': (\n <Text weight=\"semibold\">\n {formatNumberAsCurrency(parseFloat(receiptData.totals?.companyDebit \|\| '0'))}\n </Text>\n ),\n })}\n />\n </Flex>\n )\n\n const renderTaxBreakdown = () => (\n <Flex flexDirection=\"column\" gap={16}>\n <DataTable\n label={t('sections.taxLabel')}\n columns={[\n {\n title: t('sections.taxLabel'),\n render: (tax: TaxBreakdownItem) => <Text>{tax.name}</Text>,\n },\n {\n title: t('tax.amount'),\n render: (tax: TaxBreakdownItem) => (\n <Text>{formatNumberAsCurrency(parseFloat(tax.amount \|\| '0'))}</Text>\n ),\n },\n ]}\n data={receiptData.taxes \|\| []}\n footer={() => ({\n 'column-0': <Text weight=\"semibold\">{t('breakdown.totals')}</Text>,\n 'column-1': (\n <Text weight=\"semibold\">\n {formatNumberAsCurrency(parseFloat(receiptData.totals?.taxDebit \|\| '0'))}\n </Text>\n ),\n })}\n />\n </Flex>\n )\n\n const renderEmployeeBreakdown = () => (\n <Flex flexDirection=\"column\" gap={16}>\n {isMobile && <Heading as=\"h2\">{t('sections.employeesLabel')}</Heading>}\n <DataView\n label={t('sections.employeesLabel')}\n columns={[\n {\n title: t('employee.name'),\n render: (employee: EmployeeBreakdownItem) => (\n <Text>{getEmployeeFullName(employee)}</Text>\n ),\n },\n {\n title: t('employee.paymentMethod'),\n render: (employee: EmployeeBreakdownItem) => (\n <Text>{employee.paymentMethod \|\| 'N/A'}</Text>\n ),\n },\n {\n title: t('employee.childSupport'),\n render: (employee: EmployeeBreakdownItem) => (\n <Text>\n {formatNumberAsCurrency(parseFloat(employee.childSupportGarnishment \|\| '0'))}\n </Text>\n ),\n },\n {\n title: t('employee.reimbursement'),\n render: (employee: EmployeeBreakdownItem) => (\n <Text>{formatNumberAsCurrency(parseFloat(employee.totalReimbursement \|\| '0'))}</Text>\n ),\n },\n {\n title: t('employee.totalTaxes'),\n render: (employee: EmployeeBreakdownItem) => (\n <Text>{formatNumberAsCurrency(parseFloat(employee.totalTax \|\| '0'))}</Text>\n ),\n },\n {\n title: t('employee.netPay'),\n render: (employee: EmployeeBreakdownItem) => (\n <Text>{formatNumberAsCurrency(parseFloat(employee.netPay \|\| '0'))}</Text>\n ),\n },\n ]}\n data={receiptData.employeeCompensations \|\| []}\n footer={() => ({\n 'column-0': (\n <Flex flexDirection=\"column\" gap={4}>\n <Text weight=\"semibold\">{t('breakdown.totals')}</Text>\n <Text size=\"sm\" variant=\"supporting\">\n {t('employee.totalEmployees', {\n count: receiptData.employeeCompensations?.length \|\| 0,\n })}\n </Text>\n </Flex>\n ),\n 'column-1': <Text>{'\\u00A0'}</Text>,\n 'column-2': (\n <Text weight=\"semibold\">{formatNumberAsCurrency(getTotalChildSupport())}</Text>\n ),\n 'column-3': (\n <Text weight=\"semibold\">{formatNumberAsCurrency(getTotalReimbursements())}</Text>\n ),\n 'column-4': <Text weight=\"semibold\">{formatNumberAsCurrency(getTotalTaxes())}</Text>,\n 'column-5': <Text weight=\"semibold\">{formatNumberAsCurrency(getTotalNetPay())}</Text>,\n })}\n />\n </Flex>\n )\n\n return (\n <div className={styles.container} ref={containerRef}>\n <Flex flexDirection=\"column\" gap={24}>\n {renderReceiptHeader()}\n {renderBreakdownSection()}\n {renderTaxBreakdown()}\n {renderEmployeeBreakdown()}\n </Flex>\n </div>\n )\n}\n"],"names":["PayrollReceiptsPresentation","receiptData","Heading","Text","useComponentContext","useI18n","useTranslation","containerRef","useRef","isMobile","useContainerBreakpoints","getEmployeeFullName","emp","getTotalChildSupport","sum","getTotalReimbursements","getTotalNetPay","getTotalTaxes","breakdownData","receiptDetailsConfig","renderReceiptHeader","jsx","classNames","styles","jsxs","Flex","ReceiptCheck","formatNumberAsCurrency","DataView","item","renderBreakdownSection","DataTable","renderTaxBreakdown","tax","renderEmployeeBreakdown","employee"],"mappings":"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"}
1	+ {"version":3,"file":"PayrollReceiptsPresentation.js","sources":["../../../../src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport type {\n PayrollReceipt,\n Taxes as TaxBreakdownItem,\n PayrollReceiptEmployeeCompensations as EmployeeBreakdownItem,\n} from '@gusto/embedded-api/models/components/payrollreceipt'\nimport styles from './PayrollReceiptsPresentation.module.scss'\nimport { DataView, DataTable, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useI18n } from '@/i18n'\nimport { useContainerBreakpoints } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport ReceiptCheck from '@/assets/icons/receipt-check.svg?react'\n\ninterface PayrollReceiptsPresentationProps {\n receiptData: PayrollReceipt\n withReimbursements?: boolean\n}\n\nexport const PayrollReceiptsPresentation = ({\n receiptData,\n withReimbursements = true,\n}: PayrollReceiptsPresentationProps) => {\n const { Heading, Text } = useComponentContext()\n useI18n('Payroll.PayrollReceipts')\n const { t } = useTranslation('Payroll.PayrollReceipts')\n\n const containerRef = useRef<HTMLDivElement>(null)\n const breakpoints = useContainerBreakpoints({ ref: containerRef })\n const isMobile = !breakpoints.includes('small')\n\n // Helper to get employee full name\n const getEmployeeFullName = (emp: EmployeeBreakdownItem) =>\n `${emp.employeeFirstName \|\| ''} ${emp.employeeLastName \|\| ''}`.trim()\n\n const getTotalChildSupport = () =>\n (receiptData.employeeCompensations \|\| []).reduce(\n (sum, emp) => sum + parseFloat(emp.childSupportGarnishment \|\| '0'),\n 0,\n )\n\n const getTotalReimbursements = () =>\n (receiptData.employeeCompensations \|\| []).reduce(\n (sum, emp) => sum + parseFloat(emp.totalReimbursement \|\| '0'),\n 0,\n )\n\n const getTotalNetPay = () =>\n (receiptData.employeeCompensations \|\| []).reduce(\n (sum, emp) => sum + parseFloat(emp.netPay \|\| '0'),\n 0,\n )\n\n const getTotalTaxes = () =>\n (receiptData.employeeCompensations \|\| []).reduce(\n (sum, emp) => sum + parseFloat(emp.totalTax \|\| '0'),\n 0,\n )\n\n const breakdownData = [\n {\n label: t('breakdown.directDeposits'),\n amount: parseFloat(receiptData.totals?.netPayDebit \|\| '0'),\n },\n ...(withReimbursements\n ? [\n {\n label: t('breakdown.reimbursements'),\n amount: parseFloat(receiptData.totals?.reimbursementDebit \|\| '0'),\n },\n ]\n : []),\n {\n label: t('breakdown.garnishments'),\n amount: parseFloat(receiptData.totals?.childSupportDebit \|\| '0'),\n },\n { label: t('breakdown.taxes'), amount: parseFloat(receiptData.totals?.taxDebit \|\| '0') },\n ]\n\n const receiptDetailsConfig = [\n {\n label: t('receipt.receiptId'),\n value: receiptData.payrollUuid \|\| '',\n },\n {\n label: t('receipt.from'),\n value: receiptData.nameOfSender \|\| '',\n },\n {\n label: t('receipt.to'),\n value: receiptData.nameOfRecipient \|\| 'Payroll Recipients',\n },\n {\n label: t('receipt.debitDate'),\n value: receiptData.debitDate \|\| '',\n },\n ]\n\n const renderReceiptHeader = () => (\n <div className={classNames(styles.receiptHeader, isMobile && styles.receiptHeaderMobile)}>\n <Flex flexDirection=\"column\" gap={24}>\n <Flex flexDirection=\"column\" alignItems=\"center\" gap={16}>\n <div className={styles.receiptIcon}>\n <ReceiptCheck className={styles.checkmarkIcon} />\n </div>\n\n <Flex flexDirection=\"column\" alignItems=\"center\" gap={8}>\n <Text size=\"sm\" variant=\"supporting\">\n {t('receipt.totalLabel')}\n </Text>\n <Heading as=\"h1\" styledAs=\"h2\" className={styles.totalAmount}>\n {formatNumberAsCurrency(parseFloat(receiptData.totals?.companyDebit \|\| '0'))}\n </Heading>\n </Flex>\n </Flex>\n\n <div className={styles.receiptDetailsTable}>\n <DataView\n label={t('receipt.detailsLabel')}\n variant=\"minimal\"\n breakAt=\"small\"\n breakpoints={{\n base: '0rem',\n small: '22rem',\n }}\n columns={[\n {\n title: '',\n render: (item: { label: string; value: string }) => (\n <Text size=\"sm\" variant=\"supporting\">\n {item.label}\n </Text>\n ),\n },\n {\n title: '',\n render: (item: { label: string; value: string }) => (\n <Text size=\"sm\">{item.value}</Text>\n ),\n },\n ]}\n data={receiptDetailsConfig}\n />\n </div>\n\n <Flex flexDirection=\"column\" alignItems=\"center\" gap={12}>\n <Text\n size=\"sm\"\n variant=\"supporting\"\n className={classNames(styles.disclaimer, isMobile && styles.textMobile)}\n >\n {receiptData.recipientNotice}\n </Text>\n\n <Text\n size=\"sm\"\n variant=\"supporting\"\n className={classNames(styles.companyInfo, isMobile && styles.textMobile)}\n >\n {receiptData.license}\n </Text>\n\n <Text\n size=\"sm\"\n variant=\"supporting\"\n className={classNames(styles.address, isMobile && styles.textMobile)}\n >\n {receiptData.licensee &&\n `${receiptData.licensee.address \|\| ''}, ${receiptData.licensee.city \|\| ''}, ${receiptData.licensee.state \|\| ''} ${receiptData.licensee.postalCode \|\| ''}`}\n </Text>\n </Flex>\n </Flex>\n </div>\n )\n\n const renderBreakdownSection = () => (\n <Flex flexDirection=\"column\" gap={16}>\n <DataTable\n label={t('sections.debitedLabel')}\n columns={[\n {\n title: t('sections.debitedLabel'),\n render: (item: { label: string; amount: number }) => <Text>{item.label}</Text>,\n },\n {\n title: t('breakdown.amount'),\n render: (item: { label: string; amount: number }) => (\n <Text>{formatNumberAsCurrency(item.amount)}</Text>\n ),\n },\n ]}\n data={breakdownData}\n footer={() => ({\n 'column-0': <Text weight=\"semibold\">{t('breakdown.totals')}</Text>,\n 'column-1': (\n <Text weight=\"semibold\">\n {formatNumberAsCurrency(parseFloat(receiptData.totals?.companyDebit \|\| '0'))}\n </Text>\n ),\n })}\n />\n </Flex>\n )\n\n const renderTaxBreakdown = () => (\n <Flex flexDirection=\"column\" gap={16}>\n <DataTable\n label={t('sections.taxLabel')}\n columns={[\n {\n title: t('sections.taxLabel'),\n render: (tax: TaxBreakdownItem) => <Text>{tax.name}</Text>,\n },\n {\n title: t('tax.amount'),\n render: (tax: TaxBreakdownItem) => (\n <Text>{formatNumberAsCurrency(parseFloat(tax.amount \|\| '0'))}</Text>\n ),\n },\n ]}\n data={receiptData.taxes \|\| []}\n footer={() => ({\n 'column-0': <Text weight=\"semibold\">{t('breakdown.totals')}</Text>,\n 'column-1': (\n <Text weight=\"semibold\">\n {formatNumberAsCurrency(parseFloat(receiptData.totals?.taxDebit \|\| '0'))}\n </Text>\n ),\n })}\n />\n </Flex>\n )\n\n const renderEmployeeBreakdown = () => {\n const footerValues = [\n <Flex flexDirection=\"column\" gap={4} key=\"totals\">\n <Text weight=\"semibold\">{t('breakdown.totals')}</Text>\n <Text size=\"sm\" variant=\"supporting\">\n {t('employee.totalEmployees', {\n count: receiptData.employeeCompensations?.length \|\| 0,\n })}\n </Text>\n </Flex>,\n <Text key=\"spacer\">{'\\u00A0'}</Text>,\n <Text weight=\"semibold\" key=\"childSupport\">\n {formatNumberAsCurrency(getTotalChildSupport())}\n </Text>,\n ...(withReimbursements\n ? [\n <Text weight=\"semibold\" key=\"reimbursements\">\n {formatNumberAsCurrency(getTotalReimbursements())}\n </Text>,\n ]\n : []),\n <Text weight=\"semibold\" key=\"taxes\">\n {formatNumberAsCurrency(getTotalTaxes())}\n </Text>,\n <Text weight=\"semibold\" key=\"netPay\">\n {formatNumberAsCurrency(getTotalNetPay())}\n </Text>,\n ]\n\n const footerContent = footerValues.reduce<Record<string, React.ReactNode>>(\n (acc, value, index) => {\n acc[`column-${index}`] = value\n return acc\n },\n {},\n )\n\n return (\n <Flex flexDirection=\"column\" gap={16}>\n {isMobile && <Heading as=\"h2\">{t('sections.employeesLabel')}</Heading>}\n <DataView\n label={t('sections.employeesLabel')}\n columns={[\n {\n title: t('employee.name'),\n render: (employee: EmployeeBreakdownItem) => (\n <Text>{getEmployeeFullName(employee)}</Text>\n ),\n },\n {\n title: t('employee.paymentMethod'),\n render: (employee: EmployeeBreakdownItem) => (\n <Text>{employee.paymentMethod \|\| 'N/A'}</Text>\n ),\n },\n {\n title: t('employee.childSupport'),\n render: (employee: EmployeeBreakdownItem) => (\n <Text>\n {formatNumberAsCurrency(parseFloat(employee.childSupportGarnishment \|\| '0'))}\n </Text>\n ),\n },\n ...(withReimbursements\n ? [\n {\n title: t('employee.reimbursement'),\n render: (employee: EmployeeBreakdownItem) => (\n <Text>\n {formatNumberAsCurrency(parseFloat(employee.totalReimbursement \|\| '0'))}\n </Text>\n ),\n },\n ]\n : []),\n {\n title: t('employee.totalTaxes'),\n render: (employee: EmployeeBreakdownItem) => (\n <Text>{formatNumberAsCurrency(parseFloat(employee.totalTax \|\| '0'))}</Text>\n ),\n },\n {\n title: t('employee.netPay'),\n render: (employee: EmployeeBreakdownItem) => (\n <Text>{formatNumberAsCurrency(parseFloat(employee.netPay \|\| '0'))}</Text>\n ),\n },\n ]}\n data={receiptData.employeeCompensations \|\| []}\n footer={() => footerContent}\n />\n </Flex>\n )\n }\n\n return (\n <div className={styles.container} ref={containerRef}>\n <Flex flexDirection=\"column\" gap={24}>\n {renderReceiptHeader()}\n {renderBreakdownSection()}\n {renderTaxBreakdown()}\n {renderEmployeeBreakdown()}\n </Flex>\n </div>\n )\n}\n"],"names":["PayrollReceiptsPresentation","receiptData","withReimbursements","Heading","Text","useComponentContext","useI18n","t","useTranslation","containerRef","useRef","isMobile","useContainerBreakpoints","getEmployeeFullName","emp","getTotalChildSupport","sum","getTotalReimbursements","getTotalNetPay","getTotalTaxes","breakdownData","receiptDetailsConfig","renderReceiptHeader","jsx","classNames","styles","jsxs","Flex","ReceiptCheck","formatNumberAsCurrency","DataView","item","renderBreakdownSection","DataTable","renderTaxBreakdown","tax","renderEmployeeBreakdown","footerContent","acc","value","index","employee"],"mappings":"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"}

package/dist/components/Payroll/index.d.ts CHANGED Viewed

@@ -8,4 +8,5 @@ export { PayrollOverview } from './PayrollOverview/PayrollOverview';
 export { PayrollFlow } from './PayrollFlow/PayrollFlow';
 export { PayrollReceipts } from './PayrollReceipts/PayrollReceipts';
 export { ConfirmWireDetails } from './ConfirmWireDetails/ConfirmWireDetails';
+export type { ConfirmWireDetailsProps, ConfirmWireDetailsComponentType } from './ConfirmWireDetails';
 export { PayrollBlocker, type ApiPayrollBlocker } from './PayrollBlocker';

package/dist/components/Payroll/usePreparedPayrollData.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useState as m, useCallback as y, useEffect as S } from "react";
+import { useState as y, useCallback as m, useEffect as S } from "react";
 import { usePayrollsPrepareMutation as h } from "@gusto/embedded-api/react-query/payrollsPrepare";
 import { usePaySchedulesGet as f } from "@gusto/embedded-api/react-query/paySchedulesGet";
 import "react/jsx-runtime";
@@ -11,15 +11,14 @@ import { useBase as b } from "../Base/useBase.js";
 import "../../shared/constants.js";
 import "classnames";
 import "../../contexts/ComponentAdapter/useComponentContext.js";
-import "../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import "dompurify";
-const M = ({
+const H = ({
   companyId: e,
   payrollId: t,
   employeeUuids: o,
   sortBy: s
 }) => {
-  const { mutateAsync: i, isPending: l } = h(), [r, d] = m(), { baseSubmitHandler: p } = b(), { data: u, isLoading: n } = f(
+  const { mutateAsync: i, isPending: l } = h(), [r, d] = y(), { baseSubmitHandler: p } = b(), { data: u, isLoading: n } = f(
     {
       companyId: e,
       payScheduleId: r?.payPeriod?.payScheduleUuid || ""
@@ -27,7 +26,7 @@ const M = ({
     {
       enabled: !!r?.payPeriod?.payScheduleUuid
     }
-  ), a = y(async () => {
+  ), a = m(async () => {
     await p(null, async () => {
       const P = await i({
         request: {
@@ -54,6 +53,6 @@ const M = ({
   };
 };
 export {
-  M as usePreparedPayrollData
+  H as usePreparedPayrollData
 };
 //# sourceMappingURL=usePreparedPayrollData.js.map

package/dist/components/Payroll/usePreparedPayrollData.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"usePreparedPayrollData.js","sources":["../../../src/components/Payroll/usePreparedPayrollData.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react'\nimport { usePayrollsPrepareMutation } from '@gusto/embedded-api/react-query/payrollsPrepare'\nimport { usePaySchedulesGet } from '@gusto/embedded-api/react-query/paySchedulesGet'\nimport type { PayrollPrepared } from '@gusto/embedded-api/models/components/payrollprepared'\nimport type { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject'\nimport type { PayrollPrepareSortBy } from '@gusto/embedded-api/models/components/payrollpreparesortby'\nimport { useBase } from '../Base'\n\ninterface UsePreparedPayrollDataParams {\n companyId: string\n payrollId: string\n employeeUuids?: string[]\n sortBy?: PayrollPrepareSortBy\n}\n\ninterface UsePreparedPayrollDataReturn {\n handlePreparePayroll: () => Promise<void>\n preparedPayroll: PayrollPrepared \| undefined\n paySchedule: PayScheduleObject \| undefined\n isLoading: boolean\n}\n\nexport const usePreparedPayrollData = ({\n companyId,\n payrollId,\n employeeUuids,\n sortBy,\n}: UsePreparedPayrollDataParams): UsePreparedPayrollDataReturn => {\n const { mutateAsync: preparePayroll, isPending: isPreparePayrollPending } =\n usePayrollsPrepareMutation()\n const [preparedPayroll, setPreparedPayroll] = useState<PayrollPrepared \| undefined>()\n const { baseSubmitHandler } = useBase()\n\n const { data: payScheduleData, isLoading: isPayScheduleLoading } = usePaySchedulesGet(\n {\n companyId,\n payScheduleId: preparedPayroll?.payPeriod?.payScheduleUuid \|\| '',\n },\n {\n enabled: !!preparedPayroll?.payPeriod?.payScheduleUuid,\n },\n )\n\n const handlePreparePayroll = useCallback(async () => {\n await baseSubmitHandler(null, async () => {\n const result = await preparePayroll({\n request: {\n companyId,\n payrollId,\n sortBy,\n requestBody: {\n employeeUuids,\n },\n },\n })\n setPreparedPayroll(result.payrollPrepared)\n })\n }, [companyId, payrollId, preparePayroll, employeeUuids, baseSubmitHandler])\n\n useEffect(() => {\n void handlePreparePayroll()\n }, [handlePreparePayroll])\n\n const isLoading = isPreparePayrollPending \|\| isPayScheduleLoading\n\n return {\n handlePreparePayroll,\n preparedPayroll,\n paySchedule: payScheduleData?.payScheduleObject,\n isLoading,\n }\n}\n"],"names":["usePreparedPayrollData","companyId","payrollId","employeeUuids","sortBy","preparePayroll","isPreparePayrollPending","usePayrollsPrepareMutation","preparedPayroll","setPreparedPayroll","useState","baseSubmitHandler","useBase","payScheduleData","isPayScheduleLoading","usePaySchedulesGet","handlePreparePayroll","useCallback","result","useEffect","isLoading"],"mappings":"~~;;;;;;;;;;;;;;;~~AAsBO,MAAMA,IAAyB,CAAC;AAAA,EACrC,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AACF,MAAkE;AAChE,QAAM,EAAE,aAAaC,GAAgB,WAAWC,EAAA,IAC9CC,EAAA,GACI,CAACC,GAAiBC,CAAkB,IAAIC,EAAA,GACxC,EAAE,mBAAAC,EAAA,IAAsBC,EAAA,GAExB,EAAE,MAAMC,GAAiB,WAAWC,MAAyBC;AAAA,IACjE;AAAA,MACE,WAAAd;AAAA,MACA,eAAeO,GAAiB,WAAW,mBAAmB;AAAA,IAAA;AAAA,IAEhE;AAAA,MACE,SAAS,CAAC,CAACA,GAAiB,WAAW;AAAA,IAAA;AAAA,EACzC,GAGIQ,IAAuBC,EAAY,YAAY;AACnD,UAAMN,EAAkB,MAAM,YAAY;AACxC,YAAMO,IAAS,MAAMb,EAAe;AAAA,QAClC,SAAS;AAAA,UACP,WAAAJ;AAAA,UACA,WAAAC;AAAA,UACA,QAAAE;AAAA,UACA,aAAa;AAAA,YACX,eAAAD;AAAA,UAAA;AAAA,QACF;AAAA,MACF,CACD;AACD,MAAAM,EAAmBS,EAAO,eAAe;AAAA,IAC3C,CAAC;AAAA,EACH,GAAG,CAACjB,GAAWC,GAAWG,GAAgBF,GAAeQ,CAAiB,CAAC;AAE3E,EAAAQ,EAAU,MAAM;AACd,IAAKH,EAAA;AAAA,EACP,GAAG,CAACA,CAAoB,CAAC;AAEzB,QAAMI,IAAYd,KAA2BQ;AAE7C,SAAO;AAAA,IACL,sBAAAE;AAAA,IACA,iBAAAR;AAAA,IACA,aAAaK,GAAiB;AAAA,IAC9B,WAAAO;AAAA,EAAA;AAEJ;"}
1	+ {"version":3,"file":"usePreparedPayrollData.js","sources":["../../../src/components/Payroll/usePreparedPayrollData.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react'\nimport { usePayrollsPrepareMutation } from '@gusto/embedded-api/react-query/payrollsPrepare'\nimport { usePaySchedulesGet } from '@gusto/embedded-api/react-query/paySchedulesGet'\nimport type { PayrollPrepared } from '@gusto/embedded-api/models/components/payrollprepared'\nimport type { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject'\nimport type { PayrollPrepareSortBy } from '@gusto/embedded-api/models/components/payrollpreparesortby'\nimport { useBase } from '../Base'\n\ninterface UsePreparedPayrollDataParams {\n companyId: string\n payrollId: string\n employeeUuids?: string[]\n sortBy?: PayrollPrepareSortBy\n}\n\ninterface UsePreparedPayrollDataReturn {\n handlePreparePayroll: () => Promise<void>\n preparedPayroll: PayrollPrepared \| undefined\n paySchedule: PayScheduleObject \| undefined\n isLoading: boolean\n}\n\nexport const usePreparedPayrollData = ({\n companyId,\n payrollId,\n employeeUuids,\n sortBy,\n}: UsePreparedPayrollDataParams): UsePreparedPayrollDataReturn => {\n const { mutateAsync: preparePayroll, isPending: isPreparePayrollPending } =\n usePayrollsPrepareMutation()\n const [preparedPayroll, setPreparedPayroll] = useState<PayrollPrepared \| undefined>()\n const { baseSubmitHandler } = useBase()\n\n const { data: payScheduleData, isLoading: isPayScheduleLoading } = usePaySchedulesGet(\n {\n companyId,\n payScheduleId: preparedPayroll?.payPeriod?.payScheduleUuid \|\| '',\n },\n {\n enabled: !!preparedPayroll?.payPeriod?.payScheduleUuid,\n },\n )\n\n const handlePreparePayroll = useCallback(async () => {\n await baseSubmitHandler(null, async () => {\n const result = await preparePayroll({\n request: {\n companyId,\n payrollId,\n sortBy,\n requestBody: {\n employeeUuids,\n },\n },\n })\n setPreparedPayroll(result.payrollPrepared)\n })\n }, [companyId, payrollId, preparePayroll, employeeUuids, baseSubmitHandler])\n\n useEffect(() => {\n void handlePreparePayroll()\n }, [handlePreparePayroll])\n\n const isLoading = isPreparePayrollPending \|\| isPayScheduleLoading\n\n return {\n handlePreparePayroll,\n preparedPayroll,\n paySchedule: payScheduleData?.payScheduleObject,\n isLoading,\n }\n}\n"],"names":["usePreparedPayrollData","companyId","payrollId","employeeUuids","sortBy","preparePayroll","isPreparePayrollPending","usePayrollsPrepareMutation","preparedPayroll","setPreparedPayroll","useState","baseSubmitHandler","useBase","payScheduleData","isPayScheduleLoading","usePaySchedulesGet","handlePreparePayroll","useCallback","result","useEffect","isLoading"],"mappings":";;;;;;;;;;;;;;AAsBO,MAAMA,IAAyB,CAAC;AAAA,EACrC,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AACF,MAAkE;AAChE,QAAM,EAAE,aAAaC,GAAgB,WAAWC,EAAA,IAC9CC,EAAA,GACI,CAACC,GAAiBC,CAAkB,IAAIC,EAAA,GACxC,EAAE,mBAAAC,EAAA,IAAsBC,EAAA,GAExB,EAAE,MAAMC,GAAiB,WAAWC,MAAyBC;AAAA,IACjE;AAAA,MACE,WAAAd;AAAA,MACA,eAAeO,GAAiB,WAAW,mBAAmB;AAAA,IAAA;AAAA,IAEhE;AAAA,MACE,SAAS,CAAC,CAACA,GAAiB,WAAW;AAAA,IAAA;AAAA,EACzC,GAGIQ,IAAuBC,EAAY,YAAY;AACnD,UAAMN,EAAkB,MAAM,YAAY;AACxC,YAAMO,IAAS,MAAMb,EAAe;AAAA,QAClC,SAAS;AAAA,UACP,WAAAJ;AAAA,UACA,WAAAC;AAAA,UACA,QAAAE;AAAA,UACA,aAAa;AAAA,YACX,eAAAD;AAAA,UAAA;AAAA,QACF;AAAA,MACF,CACD;AACD,MAAAM,EAAmBS,EAAO,eAAe;AAAA,IAC3C,CAAC;AAAA,EACH,GAAG,CAACjB,GAAWC,GAAWG,GAAgBF,GAAeQ,CAAiB,CAAC;AAE3E,EAAAQ,EAAU,MAAM;AACd,IAAKH,EAAA;AAAA,EACP,GAAG,CAACA,CAAoB,CAAC;AAEzB,QAAMI,IAAYd,KAA2BQ;AAE7C,SAAO;AAAA,IACL,sBAAAE;AAAA,IACA,iBAAAR;AAAA,IACA,aAAaK,GAAiB;AAAA,IAC9B,WAAAO;AAAA,EAAA;AAEJ;"}

package/dist/contexts/ApiProvider/ApiProvider.d.ts CHANGED Viewed

@@ -1,8 +1,10 @@
+import { QueryClient } from '@tanstack/react-query';
 import { SDKHooks } from '../../types/hooks';
 export interface ApiProviderProps {
     url: string;
     headers?: HeadersInit;
     hooks?: SDKHooks;
     children: React.ReactNode;
+    queryClient?: QueryClient;
 }
-export declare function ApiProvider({ url, headers, hooks, children }: ApiProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ApiProvider({ url, headers, hooks, children, queryClient: queryClientFromProps, }: ApiProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/contexts/ApiProvider/ApiProvider.js CHANGED Viewed

@@ -1,18 +1,24 @@
-import { jsx as c } from "react/jsx-runtime";
-import { QueryClient as p, QueryClientProvider as E } from "@tanstack/react-query";
-import { GustoEmbeddedProvider as H } from "@gusto/embedded-api/react-query/_context";
-import { GustoEmbeddedCore as b } from "@gusto/embedded-api/core";
-import { SDKHooks as R } from "@gusto/embedded-api/hooks/hooks";
-import { useMemo as a } from "react";
-function Q({ url: i, headers: s, hooks: e, children: u }) {
-  const d = a(() => {
-    const r = new b({
-      serverURL: i
-    }), o = r._options.hooks || new R();
+import { jsx as a } from "react/jsx-runtime";
+import { QueryClient as E, QueryClientProvider as H } from "@tanstack/react-query";
+import { GustoEmbeddedProvider as b } from "@gusto/embedded-api/react-query/_context";
+import { GustoEmbeddedCore as R } from "@gusto/embedded-api/core";
+import { SDKHooks as g } from "@gusto/embedded-api/hooks/hooks";
+import { useMemo as u } from "react";
+function x({
+  url: f,
+  headers: s,
+  hooks: e,
+  children: d,
+  queryClient: i
+}) {
+  const m = u(() => {
+    const r = new R({
+      serverURL: f
+    }), o = r._options.hooks || new g();
     if (s) {
       const t = {
-        beforeRequest: (g, n) => (new Headers(s).forEach((f, l) => {
-          f && n.headers.set(l, f);
+        beforeRequest: (q, n) => (new Headers(s).forEach((c, p) => {
+          c && n.headers.set(p, c);
         }), n)
       };
       o.registerBeforeRequestHook(t);
@@ -26,15 +32,17 @@ function Q({ url: i, headers: s, hooks: e, children: u }) {
     }), e?.afterError && e.afterError.forEach((t) => {
       o.registerAfterErrorHook(t);
     }), r._options.hooks || (r._options.hooks = o), r;
-  }, [i, s, e]), m = a(() => {
-    const r = new p(), o = async () => {
+  }, [f, s, e]), l = u(() => {
+    if (i)
+      return i;
+    const r = new E(), o = async () => {
       await r.invalidateQueries();
     };
     return r.setQueryDefaults(["@gusto/embedded-api"], { retry: !1 }), r.setMutationDefaults(["@gusto/embedded-api"], { onSettled: o, retry: !1 }), r;
-  }, []);
-  return /* @__PURE__ */ c(E, { client: m, children: /* @__PURE__ */ c(H, { client: d, children: u }) });
+  }, [i]);
+  return /* @__PURE__ */ a(H, { client: l, children: /* @__PURE__ */ a(b, { client: m, children: d }) });
 }
 export {
-  Q as ApiProvider
+  x as ApiProvider
 };
 //# sourceMappingURL=ApiProvider.js.map