@gusto/embedded-react-sdk 0.13.3 → 0.13.4

package/dist/components/Payroll/PayrollReceipts/PayrollReceipts.js

@@ -0,0 +1,21 @@
+import { jsx as e } from "react/jsx-runtime";
+import { usePayrollsGetReceiptSuspense as i } from "@gusto/embedded-api/react-query/payrollsGetReceipt";
+import { PayrollReceiptsPresentation as a } from "./PayrollReceiptsPresentation.js";
+import { BaseComponent as n } from "../../Base/Base.js";
+import "../../Base/useBase.js";
+import { useComponentDictionary as p, useI18n as c } from "../../../i18n/I18n.js";
+function d(o) {
+  return /* @__PURE__ */ e(n, { ...o, children: /* @__PURE__ */ e(s, { ...o, children: o.children }) });
+}
+const s = ({ payrollId: o, dictionary: r }) => {
+  p("Payroll.PayrollReceipts", r), c("Payroll.PayrollReceipts");
+  const { data: t } = i({
+    payrollUuid: o
+  }), l = t.payrollReceipt;
+  return /* @__PURE__ */ e(a, { receiptData: l });
+};
+export {
+  d as PayrollReceipts,
+  s as Root
+};
+//# sourceMappingURL=PayrollReceipts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayrollReceipts.js","sources":["../../../../src/components/Payroll/PayrollReceipts/PayrollReceipts.tsx"],"sourcesContent":["import { usePayrollsGetReceiptSuspense } from '@gusto/embedded-api/react-query/payrollsGetReceipt'\nimport { PayrollReceiptsPresentation } from './PayrollReceiptsPresentation'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\n\ninterface PayrollReceiptsProps extends BaseComponentInterface<'Payroll.PayrollReceipts'> {\n  payrollId: string\n}\n\nexport function PayrollReceipts(props: PayrollReceiptsProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({ payrollId, dictionary }: PayrollReceiptsProps) => {\n  useComponentDictionary('Payroll.PayrollReceipts', dictionary)\n  useI18n('Payroll.PayrollReceipts')\n\n  const { data } = usePayrollsGetReceiptSuspense({\n    payrollUuid: payrollId,\n  })\n  const payrollData = data.payrollReceipt!\n\n  return <PayrollReceiptsPresentation receiptData={payrollData} />\n}\n"],"names":["PayrollReceipts","props","jsx","BaseComponent","Root","payrollId","dictionary","useComponentDictionary","useI18n","data","usePayrollsGetReceiptSuspense","payrollData","PayrollReceiptsPresentation"],"mappings":";;;;;;AASO,SAASA,EAAgBC,GAA6B;AAC3D,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEO,MAAMG,IAAO,CAAC,EAAE,WAAAC,GAAW,YAAAC,QAAuC;AACvE,EAAAC,EAAuB,2BAA2BD,CAAU,GAC5DE,EAAQ,yBAAyB;AAEjC,QAAM,EAAE,MAAAC,EAAA,IAASC,EAA8B;AAAA,IAC7C,aAAaL;AAAA,EAAA,CACd,GACKM,IAAcF,EAAK;AAEzB,SAAO,gBAAAP,EAACU,GAAA,EAA4B,aAAaD,EAAA,CAAa;AAChE;"}

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

@@ -0,0 +1,220 @@
+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 i from "./PayrollReceiptsPresentation.module.scss.js";
+import { Flex as a } 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"),
+    0
+  ), f = () => (n.employeeCompensations || []).reduce(
+    (l, s) => l + parseFloat(s.totalReimbursement || "0"),
+    0
+  ), x = () => (n.employeeCompensations || []).reduce(
+    (l, s) => l + parseFloat(s.netPay || "0"),
+    0
+  ), w = () => (n.employeeCompensations || []).reduce(
+    (l, s) => l + parseFloat(s.totalTax || "0"),
+    0
+  ), k = [
+    {
+      label: t("breakdown.directDeposits"),
+      amount: parseFloat(n.totals?.netPayDebit || "0")
+    },
+    {
+      label: t("breakdown.reimbursements"),
+      amount: parseFloat(n.totals?.reimbursementDebit || "0")
+    },
+    {
+      label: t("breakdown.garnishments"),
+      amount: parseFloat(n.totals?.childSupportDebit || "0")
+    },
+    { label: t("breakdown.taxes"), amount: parseFloat(n.totals?.taxDebit || "0") }
+  ], F = [
+    {
+      label: t("receipt.receiptId"),
+      value: n.payrollUuid || ""
+    },
+    {
+      label: t("receipt.from"),
+      value: n.nameOfSender || ""
+    },
+    {
+      label: t("receipt.to"),
+      value: n.nameOfRecipient || "Payroll Recipients"
+    },
+    {
+      label: t("receipt.debitDate"),
+      value: n.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")) })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: i.receiptDetailsTable, children: /* @__PURE__ */ e(
+      h,
+      {
+        label: t("receipt.detailsLabel"),
+        variant: "minimal",
+        breakAt: "small",
+        breakpoints: {
+          base: "0rem",
+          small: "22rem"
+        },
+        columns: [
+          {
+            title: "",
+            render: (l) => /* @__PURE__ */ e(o, { size: "sm", variant: "supporting", children: l.label })
+          },
+          {
+            title: "",
+            render: (l) => /* @__PURE__ */ e(o, { size: "sm", children: l.value })
+          }
+        ],
+        data: F
+      }
+    ) }),
+    /* @__PURE__ */ m(a, { flexDirection: "column", alignItems: "center", gap: 12, children: [
+      /* @__PURE__ */ e(
+        o,
+        {
+          size: "sm",
+          variant: "supporting",
+          className: d(i.disclaimer, c && i.textMobile),
+          children: n.recipientNotice
+        }
+      ),
+      /* @__PURE__ */ e(
+        o,
+        {
+          size: "sm",
+          variant: "supporting",
+          className: d(i.companyInfo, c && i.textMobile),
+          children: n.license
+        }
+      ),
+      /* @__PURE__ */ e(
+        o,
+        {
+          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 || ""}`
+        }
+      )
+    ] })
+  ] }) }), N = () => /* @__PURE__ */ e(a, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ e(
+    b,
+    {
+      label: t("sections.debitedLabel"),
+      columns: [
+        {
+          title: t("sections.debitedLabel"),
+          render: (l) => /* @__PURE__ */ e(o, { children: l.label })
+        },
+        {
+          title: t("breakdown.amount"),
+          render: (l) => /* @__PURE__ */ e(o, { children: r(l.amount) })
+        }
+      ],
+      data: k,
+      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")) })
+      })
+    }
+  ) }), C = () => /* @__PURE__ */ e(a, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ e(
+    b,
+    {
+      label: t("sections.taxLabel"),
+      columns: [
+        {
+          title: t("sections.taxLabel"),
+          render: (l) => /* @__PURE__ */ e(o, { children: l.name })
+        },
+        {
+          title: t("tax.amount"),
+          render: (l) => /* @__PURE__ */ e(o, { children: r(parseFloat(l.amount || "0")) })
+        }
+      ],
+      data: n.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")) })
+      })
+    }
+  ) }), 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(),
+    C(),
+    T()
+  ] }) });
+};
+export {
+  Q as PayrollReceiptsPresentation
+};
+//# sourceMappingURL=PayrollReceiptsPresentation.js.map

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

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

package/dist/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.module.scss.js

@@ -0,0 +1,28 @@
+const e = "_container_1hj66_1", t = "_receiptHeader_1hj66_10", c = "_receiptIcon_1hj66_21", o = "_checkmarkIcon_1hj66_32", n = "_totalAmount_1hj66_38", _ = "_receiptDetailsTable_1hj66_43", a = "_disclaimer_1hj66_67", r = "_companyInfo_1hj66_72", i = "_address_1hj66_76", s = "_receiptHeaderMobile_1hj66_89", l = "_textMobile_1hj66_100", d = {
+  container: e,
+  receiptHeader: t,
+  receiptIcon: c,
+  checkmarkIcon: o,
+  totalAmount: n,
+  receiptDetailsTable: _,
+  disclaimer: a,
+  companyInfo: r,
+  address: i,
+  receiptHeaderMobile: s,
+  textMobile: l
+};
+export {
+  i as address,
+  o as checkmarkIcon,
+  r as companyInfo,
+  e as container,
+  d as default,
+  a as disclaimer,
+  _ as receiptDetailsTable,
+  t as receiptHeader,
+  s as receiptHeaderMobile,
+  c as receiptIcon,
+  l as textMobile,
+  n as totalAmount
+};
+//# sourceMappingURL=PayrollReceiptsPresentation.module.scss.js.map

package/dist/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.module.scss.js.map

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

package/dist/components/Payroll/RunPayrollFlow/RunPayroll.js

@@ -1,22 +1,24 @@
 import { jsx as o } from "react/jsx-runtime";
-import { useReducer as L, useState as N } from "react";
-import { useTranslation as _ } from "react-i18next";
-import { componentEvents as m } from "../../../shared/constants.js";
+import { useReducer as A, useState as N } from "react";
+import { useTranslation as w } from "react-i18next";
+import { PayrollReceipts as h } from "../PayrollReceipts/PayrollReceipts.js";
+import { componentEvents as d } from "../../../shared/constants.js";
 import { useComponentContext as S } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { firstLastName as b } from "../../../helpers/formattedStrings.js";
-import { useI18n as w } from "../../../i18n/I18n.js";
+import { firstLastName as O } from "../../../helpers/formattedStrings.js";
+import { useI18n as b } from "../../../i18n/I18n.js";
 const D = () => ({
   currentPayrollId: void 0,
   isCalculated: !1,
-  editedEmployeeId: void 0
-}), O = (e, l) => {
-  switch (l.type) {
+  editedEmployeeId: void 0,
+  showReceipt: !1
+}), U = (e, r) => {
+  switch (r.type) {
     case "runPayroll/back":
       return {
         ...e,
         currentPayrollId: void 0
       };
-    case "runPayroll/edited":
+    case "runPayroll/edit":
       return {
         ...e,
         isCalculated: !1
@@ -29,7 +31,7 @@ const D = () => ({
     case "runPayroll/selected":
       return {
         ...e,
-        currentPayrollId: l.payload.payrollId
+        currentPayrollId: r.payload.payrollId
       };
     case "runPayroll/submitted":
       return {
@@ -37,10 +39,10 @@ const D = () => ({
         isCalculated: !1,
         currentPayrollId: void 0
       };
-    case "runPayroll/employee/edited":
+    case "runPayroll/employee/edit":
       return {
         ...e,
-        editedEmployeeId: l.payload.employeeId
+        editedEmployeeId: r.payload.employeeId
       };
     case "runPayroll/employee/saved":
     case "runPayroll/employee/cancelled":
@@ -48,70 +50,77 @@ const D = () => ({
         ...e,
         editedEmployeeId: void 0
       };
-    case m.RUN_PAYROLL_CANCELLED:
+    case d.RUN_PAYROLL_CANCELLED:
       return {
         ...e,
         isCalculated: !1,
         currentPayrollId: void 0
       };
+    case d.RUN_PAYROLL_RECEIPT_GET:
+      return {
+        ...e,
+        isCalculated: !0,
+        showReceipt: !0,
+        currentPayrollId: r.payload.payrollId
+      };
     default:
       return e;
   }
-}, M = ({
+}, V = ({
   companyId: e,
-  Configuration: l,
+  Configuration: r,
   Landing: y,
-  onEvent: i,
+  onEvent: m,
   Overview: p,
   EditEmployee: P
 }) => {
-  w("Payroll.RunPayroll");
-  const { t: f } = _("Payroll.RunPayroll"), [{ isCalculated: E, currentPayrollId: r, editedEmployeeId: d }, v] = L(
-    O,
+  b("Payroll.RunPayroll");
+  const { t: E } = w("Payroll.RunPayroll"), [{ isCalculated: f, currentPayrollId: l, editedEmployeeId: u, showReceipt: I }, v] = A(
+    U,
     D()
-  ), [u, c] = N(
+  ), [c, i] = N(
     null
-  ), I = S(), C = () => {
-    c(null);
+  ), R = S(), C = () => {
+    i(null);
   }, t = (a, n) => {
-    if (a === m.RUN_PAYROLL_EMPLOYEE_SAVED) {
+    if (a === d.RUN_PAYROLL_EMPLOYEE_SAVED) {
       const s = n.employee;
       if (s) {
-        const A = b({
+        const _ = O({
           first_name: s.firstName,
           last_name: s.lastName
         });
-        c({ employeeName: A });
+        i({ employeeName: _ });
       }
     }
-    v({ type: a, payload: n }), i(a, n);
-  }, R = u ? /* @__PURE__ */ o(
-    I.Alert,
+    v({ type: a, payload: n }), m(a, n);
+  }, L = c ? /* @__PURE__ */ o(
+    R.Alert,
     {
       status: "success",
-      label: f("alerts.employeeUpdated.label", { name: u.employeeName }),
+      label: E("alerts.employeeUpdated.label", { name: c.employeeName }),
       onDismiss: C
     }
   ) : void 0;
-  return d && r ? /* @__PURE__ */ o(
+  return u && l ? /* @__PURE__ */ o(
     P,
     {
       onEvent: t,
-      employeeId: d,
+      employeeId: u,
       companyId: e,
-      payrollId: r
+      payrollId: l
     }
-  ) : r ? E ? /* @__PURE__ */ o(p, { companyId: e, onEvent: t, payrollId: r }) : /* @__PURE__ */ o(
-    l,
+  ) : I && l ? /* @__PURE__ */ o(h, { onEvent: t, payrollId: l }) : l ? f ? /* @__PURE__ */ o(p, { companyId: e, onEvent: t, payrollId: l }) : /* @__PURE__ */ o(
+    r,
     {
       onEvent: t,
-      payrollId: r,
+      payrollId: l,
       companyId: e,
-      alerts: R
+      alerts: L
     }
   ) : /* @__PURE__ */ o(y, { companyId: e, onEvent: t });
 };
 export {
-  M as RunPayroll
+  V as RunPayroll
 };
 //# sourceMappingURL=RunPayroll.js.map

package/dist/components/Payroll/RunPayrollFlow/RunPayroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"RunPayroll.js","sources":["../../../../src/components/Payroll/RunPayrollFlow/RunPayroll.tsx"],"sourcesContent":["import { useReducer, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { EventType, runPayrollEvents } from '@/shared/constants'\nimport { componentEvents } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { firstLastName } from '@/helpers/formattedStrings'\nimport { useI18n } from '@/i18n'\n\ntype PayrollFlowEvent = (typeof runPayrollEvents)[keyof typeof runPayrollEvents]\ntype PayrollFlowAction =\n  | {\n      type: Extract<\n        PayrollFlowEvent,\n        'runPayroll/back' | 'runPayroll/edited' | 'runPayroll/calculated' | 'runPayroll/submitted'\n      >\n    }\n  | {\n      type: Extract<PayrollFlowEvent, 'runPayroll/selected'>\n      payload: { payrollId: string }\n    }\n  | {\n      type: Extract<PayrollFlowEvent, 'runPayroll/employee/edited'>\n      payload: { employeeId: string }\n    }\n  | {\n      type: Extract<PayrollFlowEvent, 'runPayroll/employee/saved' | 'runPayroll/employee/cancelled'>\n    }\n  | {\n      type: Extract<PayrollFlowEvent, 'runPayroll/cancelled'>\n    }\n\ninterface PayrollFlowState {\n  currentPayrollId?: string\n  isCalculated: boolean\n  editedEmployeeId?: string\n}\nconst createInitialPayrollFlowState: () => PayrollFlowState = () => ({\n  currentPayrollId: undefined,\n  isCalculated: false,\n  editedEmployeeId: undefined,\n})\n\nconst runPayrollFlowReducer: (\n  state: PayrollFlowState,\n  action: PayrollFlowAction,\n) => PayrollFlowState = (state, action) => {\n  switch (action.type) {\n    case 'runPayroll/back':\n      return {\n        ...state,\n        currentPayrollId: undefined,\n      }\n    case 'runPayroll/edited':\n      return {\n        ...state,\n        isCalculated: false,\n      }\n    case 'runPayroll/calculated':\n      return {\n        ...state,\n        isCalculated: true,\n      }\n    case 'runPayroll/selected': {\n      return {\n        ...state,\n        currentPayrollId: action.payload.payrollId,\n      }\n    }\n    case 'runPayroll/submitted': {\n      return {\n        ...state,\n        isCalculated: false,\n        currentPayrollId: undefined,\n      }\n    }\n    case 'runPayroll/employee/edited': {\n      return {\n        ...state,\n        editedEmployeeId: action.payload.employeeId,\n      }\n    }\n    case 'runPayroll/employee/saved':\n    case 'runPayroll/employee/cancelled': {\n      return {\n        ...state,\n        editedEmployeeId: undefined,\n      }\n    }\n    case componentEvents.RUN_PAYROLL_CANCELLED: {\n      return {\n        ...state,\n        isCalculated: false,\n        currentPayrollId: undefined,\n      }\n    }\n    default:\n      return state\n  }\n}\n\ninterface RunPayrollProps extends Pick<BaseComponentInterface, 'onEvent'> {\n  companyId: string\n  Configuration: ({\n    onEvent,\n    payrollId,\n    companyId,\n    alerts,\n  }: Pick<BaseComponentInterface, 'onEvent'> & {\n    payrollId: string\n    companyId: string\n    alerts?: React.ReactNode\n  }) => React.JSX.Element\n  Landing: ({\n    companyId,\n    onEvent,\n  }: Pick<BaseComponentInterface, 'onEvent'> & { companyId: string }) => React.JSX.Element\n  Overview: ({\n    companyId,\n    onEvent,\n    payrollId,\n  }: Pick<BaseComponentInterface, 'onEvent'> & {\n    companyId: string\n    payrollId: string\n  }) => React.JSX.Element\n  EditEmployee: ({\n    onEvent,\n    employeeId,\n    companyId,\n    payrollId,\n  }: Pick<BaseComponentInterface, 'onEvent'> & {\n    employeeId: string\n    companyId: string\n    payrollId: string\n  }) => React.JSX.Element\n}\n\nexport const RunPayroll = ({\n  companyId,\n  Configuration,\n  Landing,\n  onEvent,\n  Overview,\n  EditEmployee,\n}: RunPayrollProps) => {\n  useI18n('Payroll.RunPayroll')\n  const { t } = useTranslation('Payroll.RunPayroll')\n\n  const [{ isCalculated, currentPayrollId, editedEmployeeId }, dispatch] = useReducer(\n    runPayrollFlowReducer,\n    createInitialPayrollFlowState(),\n  )\n  const [employeeSavedAlert, setEmployeeSavedAlert] = useState<{ employeeName: string } | null>(\n    null,\n  )\n\n  const Components = useComponentContext()\n\n  const handleDismissEmployeeSavedAlert = () => {\n    setEmployeeSavedAlert(null)\n  }\n\n  const wrappedOnEvent: OnEventType<string, unknown> = (event, payload) => {\n    if (event === componentEvents.RUN_PAYROLL_EMPLOYEE_SAVED) {\n      const employee = (payload as { employee?: Employee }).employee\n      if (employee) {\n        const employeeName = firstLastName({\n          first_name: employee.firstName,\n          last_name: employee.lastName,\n        })\n        setEmployeeSavedAlert({ employeeName })\n      }\n    }\n\n    dispatch({ type: event, payload } as PayrollFlowAction)\n    onEvent(event as EventType, payload)\n  }\n\n  const alerts = employeeSavedAlert ? (\n    <Components.Alert\n      status=\"success\"\n      label={t('alerts.employeeUpdated.label', { name: employeeSavedAlert.employeeName })}\n      onDismiss={handleDismissEmployeeSavedAlert}\n    />\n  ) : undefined\n\n  if (editedEmployeeId && currentPayrollId) {\n    return (\n      <EditEmployee\n        onEvent={wrappedOnEvent}\n        employeeId={editedEmployeeId}\n        companyId={companyId}\n        payrollId={currentPayrollId}\n      />\n    )\n  }\n\n  return currentPayrollId ? (\n    isCalculated ? (\n      <Overview companyId={companyId} onEvent={wrappedOnEvent} payrollId={currentPayrollId} />\n    ) : (\n      <Configuration\n        onEvent={wrappedOnEvent}\n        payrollId={currentPayrollId}\n        companyId={companyId}\n        alerts={alerts}\n      />\n    )\n  ) : (\n    <Landing companyId={companyId} onEvent={wrappedOnEvent} />\n  )\n}\n"],"names":["createInitialPayrollFlowState","runPayrollFlowReducer","state","action","componentEvents","RunPayroll","companyId","Configuration","Landing","onEvent","Overview","EditEmployee","useI18n","t","useTranslation","isCalculated","currentPayrollId","editedEmployeeId","dispatch","useReducer","employeeSavedAlert","setEmployeeSavedAlert","useState","Components","useComponentContext","handleDismissEmployeeSavedAlert","wrappedOnEvent","event","payload","employee","employeeName","firstLastName","alerts","jsx"],"mappings":"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"}
+{"version":3,"file":"RunPayroll.js","sources":["../../../../src/components/Payroll/RunPayrollFlow/RunPayroll.tsx"],"sourcesContent":["import { useReducer, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport { PayrollReceipts } from '../PayrollReceipts/PayrollReceipts'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { EventType, runPayrollEvents } from '@/shared/constants'\nimport { componentEvents } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { firstLastName } from '@/helpers/formattedStrings'\nimport { useI18n } from '@/i18n'\ntype PayrollFlowEvent = (typeof runPayrollEvents)[keyof typeof runPayrollEvents]\ntype PayrollFlowAction =\n  | {\n      type: Extract<\n        PayrollFlowEvent,\n        'runPayroll/back' | 'runPayroll/edit' | 'runPayroll/calculated' | 'runPayroll/submitted'\n      >\n    }\n  | {\n      type: Extract<PayrollFlowEvent, 'runPayroll/selected'>\n      payload: { payrollId: string }\n    }\n  | {\n      type: Extract<PayrollFlowEvent, 'runPayroll/employee/edit'>\n      payload: { employeeId: string }\n    }\n  | {\n      type: Extract<PayrollFlowEvent, 'runPayroll/employee/saved' | 'runPayroll/employee/cancelled'>\n    }\n  | {\n      type: Extract<PayrollFlowEvent, 'runPayroll/cancelled'>\n    }\n  | {\n      type: Extract<PayrollFlowEvent, 'runPayroll/receipt/get'>\n      payload: { payrollId: string }\n    }\n\ninterface PayrollFlowState {\n  currentPayrollId?: string\n  isCalculated: boolean\n  editedEmployeeId?: string\n  showReceipt: boolean\n}\nconst createInitialPayrollFlowState: () => PayrollFlowState = () => ({\n  currentPayrollId: undefined,\n  isCalculated: false,\n  editedEmployeeId: undefined,\n  showReceipt: false,\n})\n\nconst runPayrollFlowReducer: (\n  state: PayrollFlowState,\n  action: PayrollFlowAction,\n) => PayrollFlowState = (state, action) => {\n  switch (action.type) {\n    case 'runPayroll/back':\n      return {\n        ...state,\n        currentPayrollId: undefined,\n      }\n    case 'runPayroll/edit':\n      return {\n        ...state,\n        isCalculated: false,\n      }\n    case 'runPayroll/calculated':\n      return {\n        ...state,\n        isCalculated: true,\n      }\n    case 'runPayroll/selected': {\n      return {\n        ...state,\n        currentPayrollId: action.payload.payrollId,\n      }\n    }\n    case 'runPayroll/submitted': {\n      return {\n        ...state,\n        isCalculated: false,\n        currentPayrollId: undefined,\n      }\n    }\n    case 'runPayroll/employee/edit': {\n      return {\n        ...state,\n        editedEmployeeId: action.payload.employeeId,\n      }\n    }\n    case 'runPayroll/employee/saved':\n    case 'runPayroll/employee/cancelled': {\n      return {\n        ...state,\n        editedEmployeeId: undefined,\n      }\n    }\n    case componentEvents.RUN_PAYROLL_CANCELLED: {\n      return {\n        ...state,\n        isCalculated: false,\n        currentPayrollId: undefined,\n      }\n    }\n    case componentEvents.RUN_PAYROLL_RECEIPT_GET: {\n      return {\n        ...state,\n        isCalculated: true,\n        showReceipt: true,\n        currentPayrollId: action.payload.payrollId,\n      }\n    }\n    default:\n      return state\n  }\n}\n\ninterface RunPayrollProps extends Pick<BaseComponentInterface, 'onEvent'> {\n  companyId: string\n  Configuration: ({\n    onEvent,\n    payrollId,\n    companyId,\n    alerts,\n  }: Pick<BaseComponentInterface, 'onEvent'> & {\n    payrollId: string\n    companyId: string\n    alerts?: React.ReactNode\n  }) => React.JSX.Element\n  Landing: ({\n    companyId,\n    onEvent,\n  }: Pick<BaseComponentInterface, 'onEvent'> & { companyId: string }) => React.JSX.Element\n  Overview: ({\n    companyId,\n    onEvent,\n    payrollId,\n  }: Pick<BaseComponentInterface, 'onEvent'> & {\n    companyId: string\n    payrollId: string\n  }) => React.JSX.Element\n  EditEmployee: ({\n    onEvent,\n    employeeId,\n    companyId,\n    payrollId,\n  }: Pick<BaseComponentInterface, 'onEvent'> & {\n    employeeId: string\n    companyId: string\n    payrollId: string\n  }) => React.JSX.Element\n}\n\nexport const RunPayroll = ({\n  companyId,\n  Configuration,\n  Landing,\n  onEvent,\n  Overview,\n  EditEmployee,\n}: RunPayrollProps) => {\n  useI18n('Payroll.RunPayroll')\n  const { t } = useTranslation('Payroll.RunPayroll')\n\n  const [{ isCalculated, currentPayrollId, editedEmployeeId, showReceipt }, dispatch] = useReducer(\n    runPayrollFlowReducer,\n    createInitialPayrollFlowState(),\n  )\n  const [employeeSavedAlert, setEmployeeSavedAlert] = useState<{ employeeName: string } | null>(\n    null,\n  )\n\n  const Components = useComponentContext()\n\n  const handleDismissEmployeeSavedAlert = () => {\n    setEmployeeSavedAlert(null)\n  }\n\n  const wrappedOnEvent: OnEventType<string, unknown> = (event, payload) => {\n    if (event === componentEvents.RUN_PAYROLL_EMPLOYEE_SAVED) {\n      const employee = (payload as { employee?: Employee }).employee\n      if (employee) {\n        const employeeName = firstLastName({\n          first_name: employee.firstName,\n          last_name: employee.lastName,\n        })\n        setEmployeeSavedAlert({ employeeName })\n      }\n    }\n\n    dispatch({ type: event, payload } as PayrollFlowAction)\n    onEvent(event as EventType, payload)\n  }\n\n  const alerts = employeeSavedAlert ? (\n    <Components.Alert\n      status=\"success\"\n      label={t('alerts.employeeUpdated.label', { name: employeeSavedAlert.employeeName })}\n      onDismiss={handleDismissEmployeeSavedAlert}\n    />\n  ) : undefined\n\n  if (editedEmployeeId && currentPayrollId) {\n    return (\n      <EditEmployee\n        onEvent={wrappedOnEvent}\n        employeeId={editedEmployeeId}\n        companyId={companyId}\n        payrollId={currentPayrollId}\n      />\n    )\n  }\n\n  if (showReceipt && currentPayrollId) {\n    return <PayrollReceipts onEvent={wrappedOnEvent} payrollId={currentPayrollId} />\n  }\n\n  return currentPayrollId ? (\n    isCalculated ? (\n      <Overview companyId={companyId} onEvent={wrappedOnEvent} payrollId={currentPayrollId} />\n    ) : (\n      <Configuration\n        onEvent={wrappedOnEvent}\n        payrollId={currentPayrollId}\n        companyId={companyId}\n        alerts={alerts}\n      />\n    )\n  ) : (\n    <Landing companyId={companyId} onEvent={wrappedOnEvent} />\n  )\n}\n"],"names":["createInitialPayrollFlowState","runPayrollFlowReducer","state","action","componentEvents","RunPayroll","companyId","Configuration","Landing","onEvent","Overview","EditEmployee","useI18n","t","useTranslation","isCalculated","currentPayrollId","editedEmployeeId","showReceipt","dispatch","useReducer","employeeSavedAlert","setEmployeeSavedAlert","useState","Components","useComponentContext","handleDismissEmployeeSavedAlert","wrappedOnEvent","event","payload","employee","employeeName","firstLastName","alerts","jsx","PayrollReceipts"],"mappings":"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"}

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

@@ -5,4 +5,6 @@ export { PayrollHistory } from './PayrollHistory/PayrollHistory';
 export { PayrollLanding } from './PayrollLanding/PayrollLanding';
 export { PayrollList } from './PayrollList/PayrollList';
 export { PayrollOverview } from './PayrollOverview/PayrollOverview';
+export { PayrollFlow } from './PayrollFlow/PayrollFlow';
 export { RunPayrollFlow } from './RunPayrollFlow/RunPayrollFlow';
+export { PayrollReceipts } from './PayrollReceipts/PayrollReceipts';

package/dist/components/Payroll/index.js

@@ -1,17 +1,21 @@
 import { PayrollConfiguration as l } from "./PayrollConfiguration/PayrollConfiguration.js";
 import { PayrollEditEmployee as t } from "./PayrollEditEmployee/PayrollEditEmployee.js";
-import { PayrollHistory as y } from "./PayrollHistory/PayrollHistory.js";
-import { PayrollLanding as m } from "./PayrollLanding/PayrollLanding.js";
-import { PayrollList as i } from "./PayrollList/PayrollList.js";
-import { PayrollOverview as P } from "./PayrollOverview/PayrollOverview.js";
+import { PayrollHistory as p } from "./PayrollHistory/PayrollHistory.js";
+import { PayrollLanding as f } from "./PayrollLanding/PayrollLanding.js";
+import { PayrollList as x } from "./PayrollList/PayrollList.js";
+import { PayrollOverview as i } from "./PayrollOverview/PayrollOverview.js";
+import { PayrollFlow as s } from "./PayrollFlow/PayrollFlow.js";
 import { RunPayrollFlow as d } from "./RunPayrollFlow/RunPayrollFlow.js";
+import { PayrollReceipts as u } from "./PayrollReceipts/PayrollReceipts.js";
 export {
   l as PayrollConfiguration,
   t as PayrollEditEmployee,
-  y as PayrollHistory,
-  m as PayrollLanding,
-  i as PayrollList,
-  P as PayrollOverview,
+  s as PayrollFlow,
+  p as PayrollHistory,
+  f as PayrollLanding,
+  x as PayrollList,
+  i as PayrollOverview,
+  u as PayrollReceipts,
   d as RunPayrollFlow
 };
 //# sourceMappingURL=index.js.map

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

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

package/dist/contexts/GustoProvider/GustoProviderCustomUIAdapter.js

@@ -8,11 +8,12 @@ import { ApiProvider as I } from "../ApiProvider/ApiProvider.js";
 import { LoadingIndicatorProvider as x } from "../LoadingIndicatorProvider/LoadingIndicatorProvider.js";
 import { SDKI18next as t } from "./SDKI18next.js";
 import "classnames";
+import "../../shared/constants.js";
 import { InternalError as y } from "../../components/Common/InternalError/InternalError.js";
 import { LocaleProvider as L } from "../LocaleProvider/LocaleProvider.js";
 import "../LocaleProvider/useLocale.js";
 import { ThemeProvider as U } from "../ThemeProvider/ThemeProvider.js";
-const q = (a) => {
+const z = (a) => {
   const {
     children: c,
     config: e,
@@ -41,6 +42,6 @@ const q = (a) => {
   }, [n]), /* @__PURE__ */ r(P, { value: C(s), children: /* @__PURE__ */ r(x, { value: f, children: /* @__PURE__ */ r(h, { FallbackComponent: y, children: /* @__PURE__ */ r(U, { theme: l, children: /* @__PURE__ */ r(L, { locale: d, currency: p, children: /* @__PURE__ */ r(v, { i18n: t, children: /* @__PURE__ */ r(I, { url: e.baseUrl, headers: e.headers, hooks: e.hooks, children: c }) }, n) }) }) }) }) });
 };
 export {
-  q as GustoProviderCustomUIAdapter
+  z as GustoProviderCustomUIAdapter
 };
 //# sourceMappingURL=GustoProviderCustomUIAdapter.js.map

package/dist/contexts/GustoProvider/GustoProviderCustomUIAdapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"GustoProviderCustomUIAdapter.js","sources":["../../../src/contexts/GustoProvider/GustoProviderCustomUIAdapter.tsx"],"sourcesContent":["import type React from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { I18nextProvider } from 'react-i18next'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useEffect } from 'react'\nimport { ComponentsProvider } from '../ComponentAdapter/ComponentsProvider'\nimport type { ComponentsContextType } from '../ComponentAdapter/useComponentContext'\nimport { createComponents } from '../ComponentAdapter/createComponentsWithDefaults'\nimport { ApiProvider } from '../ApiProvider/ApiProvider'\nimport { LoadingIndicatorProvider } from '../LoadingIndicatorProvider/LoadingIndicatorProvider'\nimport type { LoadingIndicatorContextProps } from '../LoadingIndicatorProvider/useLoadingIndicator'\nimport { SDKI18next } from './SDKI18next'\nimport { InternalError } from '@/components/Common'\nimport { LocaleProvider } from '@/contexts/LocaleProvider'\nimport { ThemeProvider } from '@/contexts/ThemeProvider'\nimport type { GustoSDKTheme } from '@/contexts/ThemeProvider/theme'\nimport type { ResourceDictionary, SupportedLanguages } from '@/types/Helpers'\nimport type { SDKHooks } from '@/types/hooks'\n\nexport interface APIConfig {\n  baseUrl: string\n  headers?: HeadersInit\n  hooks?: SDKHooks\n}\n\nexport interface GustoProviderProps {\n  config: APIConfig\n  dictionary?: ResourceDictionary\n  lng?: string\n  locale?: string\n  currency?: string\n  theme?: GustoSDKTheme\n  queryClient?: QueryClient\n  components: ComponentsContextType\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n}\n\nexport interface GustoProviderCustomUIAdapterProps extends GustoProviderProps {\n  children?: React.ReactNode\n}\n\n/**\n * A provider that accepts UI component adapters through the components prop\n */\nconst GustoProviderCustomUIAdapter: React.FC<GustoProviderCustomUIAdapterProps> = props => {\n  const {\n    children,\n    config,\n    dictionary,\n    lng = 'en',\n    locale = 'en-US',\n    currency = 'USD',\n    theme,\n    components,\n    LoaderComponent,\n  } = props\n\n  // Handle dictionary resources\n  if (dictionary) {\n    for (const language in dictionary) {\n      const lang = language as SupportedLanguages\n      for (const ns in dictionary[lang]) {\n        // Adding resources overrides to i18next instance - initial load will override common namespace and add component specific dictionaries provided by partners\n        SDKI18next.addResourceBundle(\n          lang,\n          ns,\n          (dictionary[lang] as Record<string, unknown>)[ns],\n          true,\n          true,\n        )\n      }\n    }\n  }\n\n  // Handle language change\n  useEffect(() => {\n    void (async () => {\n      await SDKI18next.changeLanguage(lng)\n    })()\n  }, [lng])\n\n  return (\n    <ComponentsProvider value={createComponents(components)}>\n      <LoadingIndicatorProvider value={LoaderComponent}>\n        <ErrorBoundary FallbackComponent={InternalError}>\n          <ThemeProvider theme={theme}>\n            <LocaleProvider locale={locale} currency={currency}>\n              <I18nextProvider i18n={SDKI18next} key={lng}>\n                <ApiProvider url={config.baseUrl} headers={config.headers} hooks={config.hooks}>\n                  {children}\n                </ApiProvider>\n              </I18nextProvider>\n            </LocaleProvider>\n          </ThemeProvider>\n        </ErrorBoundary>\n      </LoadingIndicatorProvider>\n    </ComponentsProvider>\n  )\n}\n\nexport { GustoProviderCustomUIAdapter }\n"],"names":["GustoProviderCustomUIAdapter","props","children","config","dictionary","lng","locale","currency","theme","components","LoaderComponent","language","lang","ns","SDKI18next","useEffect","ComponentsProvider","createComponents","LoadingIndicatorProvider","jsx","ErrorBoundary","InternalError","ThemeProvider","LocaleProvider","I18nextProvider","ApiProvider"],"mappings":";;;;;;;;;;;;;;AA4CA,MAAMA,IAA4E,CAAAC,MAAS;AACzF,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA,IACET;AAGJ,MAAIG;AACF,eAAWO,KAAYP,GAAY;AACjC,YAAMQ,IAAOD;AACb,iBAAWE,KAAMT,EAAWQ,CAAI;AAE9B,QAAAE,EAAW;AAAA,UACTF;AAAA,UACAC;AAAA,UACCT,EAAWQ,CAAI,EAA8BC,CAAE;AAAA,UAChD;AAAA,UACA;AAAA,QAAA;AAAA,IAGN;AAIF,SAAAE,EAAU,MAAM;AACd,KAAM,YACJ,MAAMD,EAAW,eAAeT,CAAG;AAAA,EAEvC,GAAG,CAACA,CAAG,CAAC,qBAGLW,GAAA,EAAmB,OAAOC,EAAiBR,CAAU,GACpD,4BAACS,GAAA,EAAyB,OAAOR,GAC/B,UAAA,gBAAAS,EAACC,GAAA,EAAc,mBAAmBC,GAChC,UAAA,gBAAAF,EAACG,KAAc,OAAAd,GACb,UAAA,gBAAAW,EAACI,KAAe,QAAAjB,GAAgB,UAAAC,GAC9B,4BAACiB,GAAA,EAAgB,MAAMV,GACrB,UAAA,gBAAAK,EAACM,GAAA,EAAY,KAAKtB,EAAO,SAAS,SAASA,EAAO,SAAS,OAAOA,EAAO,OACtE,UAAAD,GACH,EAAA,GAHsCG,CAIxC,GACF,EAAA,CACF,GACF,GACF,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"GustoProviderCustomUIAdapter.js","sources":["../../../src/contexts/GustoProvider/GustoProviderCustomUIAdapter.tsx"],"sourcesContent":["import type React from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { I18nextProvider } from 'react-i18next'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useEffect } from 'react'\nimport { ComponentsProvider } from '../ComponentAdapter/ComponentsProvider'\nimport type { ComponentsContextType } from '../ComponentAdapter/useComponentContext'\nimport { createComponents } from '../ComponentAdapter/createComponentsWithDefaults'\nimport { ApiProvider } from '../ApiProvider/ApiProvider'\nimport { LoadingIndicatorProvider } from '../LoadingIndicatorProvider/LoadingIndicatorProvider'\nimport type { LoadingIndicatorContextProps } from '../LoadingIndicatorProvider/useLoadingIndicator'\nimport { SDKI18next } from './SDKI18next'\nimport { InternalError } from '@/components/Common'\nimport { LocaleProvider } from '@/contexts/LocaleProvider'\nimport { ThemeProvider } from '@/contexts/ThemeProvider'\nimport type { GustoSDKTheme } from '@/contexts/ThemeProvider/theme'\nimport type { ResourceDictionary, SupportedLanguages } from '@/types/Helpers'\nimport type { SDKHooks } from '@/types/hooks'\n\nexport interface APIConfig {\n  baseUrl: string\n  headers?: HeadersInit\n  hooks?: SDKHooks\n}\n\nexport interface GustoProviderProps {\n  config: APIConfig\n  dictionary?: ResourceDictionary\n  lng?: string\n  locale?: string\n  currency?: string\n  theme?: GustoSDKTheme\n  queryClient?: QueryClient\n  components: ComponentsContextType\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n}\n\nexport interface GustoProviderCustomUIAdapterProps extends GustoProviderProps {\n  children?: React.ReactNode\n}\n\n/**\n * A provider that accepts UI component adapters through the components prop\n */\nconst GustoProviderCustomUIAdapter: React.FC<GustoProviderCustomUIAdapterProps> = props => {\n  const {\n    children,\n    config,\n    dictionary,\n    lng = 'en',\n    locale = 'en-US',\n    currency = 'USD',\n    theme,\n    components,\n    LoaderComponent,\n  } = props\n\n  // Handle dictionary resources\n  if (dictionary) {\n    for (const language in dictionary) {\n      const lang = language as SupportedLanguages\n      for (const ns in dictionary[lang]) {\n        // Adding resources overrides to i18next instance - initial load will override common namespace and add component specific dictionaries provided by partners\n        SDKI18next.addResourceBundle(\n          lang,\n          ns,\n          (dictionary[lang] as Record<string, unknown>)[ns],\n          true,\n          true,\n        )\n      }\n    }\n  }\n\n  // Handle language change\n  useEffect(() => {\n    void (async () => {\n      await SDKI18next.changeLanguage(lng)\n    })()\n  }, [lng])\n\n  return (\n    <ComponentsProvider value={createComponents(components)}>\n      <LoadingIndicatorProvider value={LoaderComponent}>\n        <ErrorBoundary FallbackComponent={InternalError}>\n          <ThemeProvider theme={theme}>\n            <LocaleProvider locale={locale} currency={currency}>\n              <I18nextProvider i18n={SDKI18next} key={lng}>\n                <ApiProvider url={config.baseUrl} headers={config.headers} hooks={config.hooks}>\n                  {children}\n                </ApiProvider>\n              </I18nextProvider>\n            </LocaleProvider>\n          </ThemeProvider>\n        </ErrorBoundary>\n      </LoadingIndicatorProvider>\n    </ComponentsProvider>\n  )\n}\n\nexport { GustoProviderCustomUIAdapter }\n"],"names":["GustoProviderCustomUIAdapter","props","children","config","dictionary","lng","locale","currency","theme","components","LoaderComponent","language","lang","ns","SDKI18next","useEffect","ComponentsProvider","createComponents","LoadingIndicatorProvider","jsx","ErrorBoundary","InternalError","ThemeProvider","LocaleProvider","I18nextProvider","ApiProvider"],"mappings":";;;;;;;;;;;;;;;AA4CA,MAAMA,IAA4E,CAAAC,MAAS;AACzF,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA,IACET;AAGJ,MAAIG;AACF,eAAWO,KAAYP,GAAY;AACjC,YAAMQ,IAAOD;AACb,iBAAWE,KAAMT,EAAWQ,CAAI;AAE9B,QAAAE,EAAW;AAAA,UACTF;AAAA,UACAC;AAAA,UACCT,EAAWQ,CAAI,EAA8BC,CAAE;AAAA,UAChD;AAAA,UACA;AAAA,QAAA;AAAA,IAGN;AAIF,SAAAE,EAAU,MAAM;AACd,KAAM,YACJ,MAAMD,EAAW,eAAeT,CAAG;AAAA,EAEvC,GAAG,CAACA,CAAG,CAAC,qBAGLW,GAAA,EAAmB,OAAOC,EAAiBR,CAAU,GACpD,4BAACS,GAAA,EAAyB,OAAOR,GAC/B,UAAA,gBAAAS,EAACC,GAAA,EAAc,mBAAmBC,GAChC,UAAA,gBAAAF,EAACG,KAAc,OAAAd,GACb,UAAA,gBAAAW,EAACI,KAAe,QAAAjB,GAAgB,UAAAC,GAC9B,4BAACiB,GAAA,EAAgB,MAAMV,GACrB,UAAA,gBAAAK,EAACM,GAAA,EAAY,KAAKtB,EAAO,SAAS,SAASA,EAAO,SAAS,OAAOA,EAAO,OACtE,UAAAD,GACH,EAAA,GAHsCG,CAIxC,GACF,EAAA,CACF,GACF,GACF,EAAA,CACF;AAEJ;"}