@gusto/embedded-react-sdk 0.13.0 → 0.13.1

package/dist/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.js

@@ -1,146 +1,149 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { useTranslation as B } from "react-i18next";
-import { useFormatEmployeePayRate as H, getRegularHours as L, formatHoursDisplay as C, getTotalPtoHours as M, getAdditionalEarnings as v, getReimbursements as R, calculateGrossPay as S } from "../helpers.js";
+import { useFormatEmployeePayRate as H, getRegularHours as L, formatHoursDisplay as C, getTotalPtoHours as M, getAdditionalEarnings as R, getReimbursements as F, calculateGrossPay as S } from "../helpers.js";
+import { useI18n as j } from "../../../i18n/I18n.js";
 import { Flex as p } from "../../Common/Flex/Flex.js";
 import "classnames";
 import "../../../shared/constants.js";
-import { useComponentContext as F } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { HamburgerMenu as j } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useComponentContext as v } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { HamburgerMenu as V } from "../../Common/HamburgerMenu/HamburgerMenu.js";
 import G from "../../../assets/icons/pencil.svg.js";
-import { formatNumberAsCurrency as y, firstLastName as _ } from "../../../helpers/formattedStrings.js";
-import { parseDateStringToLocal as w } from "../../../helpers/dateFormatting.js";
-import { useLocale as I } from "../../../contexts/LocaleProvider/useLocale.js";
+import { formatNumberAsCurrency as y, firstLastName as I } from "../../../helpers/formattedStrings.js";
+import { parseDateStringToLocal as P } from "../../../helpers/dateFormatting.js";
+import { useLocale as _ } from "../../../contexts/LocaleProvider/useLocale.js";
 import { DataView as O } from "../../Common/DataView/DataView.js";
-const V = ({
-  payPeriod: i,
+const q = ({
+  payPeriod: a,
   locale: c,
   t: s
 }) => {
-  if (i?.startDate && i.endDate) {
-    const d = w(i.startDate), u = w(i.endDate);
+  if (a?.startDate && a.endDate) {
+    const d = P(a.startDate), u = P(a.endDate);
     if (d && u) {
-      const h = d.toLocaleDateString(c, {
+      const g = d.toLocaleDateString(c, {
         month: "long",
         day: "numeric"
-      }), g = u.toLocaleDateString(c, {
+      }), h = u.toLocaleDateString(c, {
         month: "short",
         day: "numeric",
         year: "numeric"
       });
-      return s("pageTitle", { startDate: h, endDate: g });
+      return s("pageTitle", { startDate: g, endDate: h });
     }
   }
   return s("pageTitle", { startDate: "", endDate: "" });
-}, ne = ({
-  employeeCompensations: i,
+}, oe = ({
+  employeeCompensations: a,
   employeeDetails: c,
   payPeriod: s,
   paySchedule: d,
   onBack: u,
-  onEdit: h,
-  onCalculatePayroll: g,
-  isOffCycle: P = !1
+  onEdit: g,
+  onCalculatePayroll: h,
+  isOffCycle: w = !1
 }) => {
-  const { Alert: f, Button: b, Heading: D, Text: l, Badge: T } = F(), { t: n } = B("Payroll.PayrollConfiguration"), { locale: x } = I(), E = H(), o = new Map(c.map((t) => [t.uuid, t])), N = (t) => {
+  const { Alert: f, Button: b, Heading: D, Text: n, Badge: N } = v();
+  j("Payroll.PayrollConfiguration");
+  const { t: l } = B("Payroll.PayrollConfiguration"), { locale: T } = _(), x = H(), o = new Map(c.map((t) => [t.uuid, t])), E = (t) => {
     const r = o.get(t);
-    return r ? _({ first_name: r.firstName, last_name: r.lastName }) : null;
+    return r ? I({ first_name: r.firstName, last_name: r.lastName }) : null;
   };
   return /* @__PURE__ */ m(p, { flexDirection: "column", gap: 16, children: [
     /* @__PURE__ */ m(p, { justifyContent: "space-between", alignItems: "center", children: [
-      /* @__PURE__ */ e(D, { as: "h1", children: V({ payPeriod: s, locale: x, t: n }) }),
-      /* @__PURE__ */ e(b, { title: n("calculatePayrollTitle"), onClick: g, children: n("calculatePayroll") })
+      /* @__PURE__ */ e(D, { as: "h1", children: q({ payPeriod: s, locale: T, t: l }) }),
+      /* @__PURE__ */ e(b, { title: l("calculatePayrollTitle"), onClick: h, children: l("calculatePayroll") })
     ] }),
-    /* @__PURE__ */ e(l, { children: n("regularPayroll") }),
+    /* @__PURE__ */ e(n, { children: l("regularPayroll") }),
     /* @__PURE__ */ m(p, { flexDirection: "column", gap: 16, children: [
-      /* @__PURE__ */ e(f, { label: "Payroll Deadline", status: "info", children: "To pay your employees with direct deposit on the check date, you'll need to run payroll by the deadline." }),
-      /* @__PURE__ */ e(f, { label: "Skipped Employees", status: "warning", children: /* @__PURE__ */ m("ul", { children: [
-        /* @__PURE__ */ e("li", { children: "Employee address not verified" }),
-        /* @__PURE__ */ e("li", { children: "Employee address not verified" })
+      /* @__PURE__ */ e(f, { label: l("alerts.payrollDeadline.label"), status: "info", children: l("alerts.payrollDeadline.message") }),
+      /* @__PURE__ */ e(f, { label: l("alerts.skippedEmployees.label"), status: "warning", children: /* @__PURE__ */ m("ul", { children: [
+        /* @__PURE__ */ e("li", { children: l("alerts.skippedEmployees.employeeAddressNotVerified") }),
+        /* @__PURE__ */ e("li", { children: l("alerts.skippedEmployees.employeeAddressNotVerified") })
       ] }) })
     ] }),
-    /* @__PURE__ */ e(D, { as: "h3", children: n("hoursAndEarningsTitle") }),
-    /* @__PURE__ */ e(l, { children: n("hoursAndEarningsDescription") }),
+    /* @__PURE__ */ e(D, { as: "h3", children: l("hoursAndEarningsTitle") }),
+    /* @__PURE__ */ e(n, { children: l("hoursAndEarningsDescription") }),
     /* @__PURE__ */ e(
       O,
       {
-        label: n("employeeCompensationsTitle"),
+        label: l("employeeCompensationsTitle"),
         columns: [
           {
-            title: /* @__PURE__ */ e(l, { weight: "semibold", children: n("tableColumns.employees") }),
+            title: /* @__PURE__ */ e(n, { weight: "semibold", children: l("tableColumns.employees") }),
             render: (t) => {
-              const r = o.get(t.employeeUuid || ""), a = E(r);
+              const r = o.get(t.employeeUuid || ""), i = x(r);
               return /* @__PURE__ */ m(p, { flexDirection: "column", gap: 8, children: [
-                /* @__PURE__ */ e(l, { weight: "semibold", children: N(t.employeeUuid || "") }),
-                a && /* @__PURE__ */ e(l, { variant: "supporting", children: a }),
-                t.excluded && /* @__PURE__ */ e(T, { status: "warning", children: n("skippedBadge") })
+                /* @__PURE__ */ e(n, { weight: "semibold", children: E(t.employeeUuid || "") }),
+                i && /* @__PURE__ */ e(n, { variant: "supporting", children: i }),
+                t.excluded && /* @__PURE__ */ e(N, { status: "warning", children: l("skippedBadge") })
               ] });
             }
           },
           {
-            title: /* @__PURE__ */ e(l, { weight: "semibold", children: n("tableColumns.hours") }),
+            title: /* @__PURE__ */ e(n, { weight: "semibold", children: l("tableColumns.hours") }),
             render: (t) => {
               const r = L(t);
-              return /* @__PURE__ */ e(l, { children: C(r) });
+              return /* @__PURE__ */ e(n, { children: C(r) });
             }
           },
           {
-            title: /* @__PURE__ */ e(l, { weight: "semibold", children: n("tableColumns.timeOff") }),
+            title: /* @__PURE__ */ e(n, { weight: "semibold", children: l("tableColumns.timeOff") }),
             render: (t) => {
               const r = M(t);
-              return /* @__PURE__ */ e(l, { children: C(r) });
+              return /* @__PURE__ */ e(n, { children: C(r) });
             }
           },
           {
-            title: /* @__PURE__ */ e(l, { weight: "semibold", children: n("tableColumns.additionalEarnings") }),
+            title: /* @__PURE__ */ e(n, { weight: "semibold", children: l("tableColumns.additionalEarnings") }),
             render: (t) => {
-              const r = v(t);
-              return /* @__PURE__ */ e(l, { children: y(r) });
+              const r = R(t);
+              return /* @__PURE__ */ e(n, { children: y(r) });
             }
           },
           {
-            title: /* @__PURE__ */ e(l, { weight: "semibold", children: n("tableColumns.reimbursements") }),
+            title: /* @__PURE__ */ e(n, { weight: "semibold", children: l("tableColumns.reimbursements") }),
             render: (t) => {
-              const r = R(t);
-              return /* @__PURE__ */ e(l, { children: y(r) });
+              const r = F(t);
+              return /* @__PURE__ */ e(n, { children: y(r) });
             }
           },
           {
-            title: /* @__PURE__ */ e(l, { weight: "semibold", children: n("tableColumns.totalPay") }),
+            title: /* @__PURE__ */ e(n, { weight: "semibold", children: l("tableColumns.totalPay") }),
             render: (t) => {
-              const r = o.get(t.employeeUuid || ""), a = r ? S(t, r, s?.startDate, d, P) : 0;
-              return /* @__PURE__ */ e(l, { children: y(a) });
+              const r = o.get(t.employeeUuid || ""), i = r ? S(t, r, s?.startDate, d, w) : 0;
+              return /* @__PURE__ */ e(n, { children: y(i) });
             }
           }
         ],
-        data: i.filter((t) => {
+        data: a.filter((t) => {
           const r = t.employeeUuid;
           return r ? o.has(r) : !1;
         }).sort((t, r) => {
-          const a = o.get(t.employeeUuid || ""), k = o.get(r.employeeUuid || ""), U = a?.lastName || "", A = k?.lastName || "";
-          return U.localeCompare(A);
+          const i = o.get(t.employeeUuid || ""), k = o.get(r.employeeUuid || ""), A = i?.lastName || "", U = k?.lastName || "";
+          return A.localeCompare(U);
         }),
         itemMenu: (t) => /* @__PURE__ */ e(
-          j,
+          V,
           {
             items: [
               {
-                label: n("editMenu.edit"),
+                label: l("editMenu.edit"),
                 icon: /* @__PURE__ */ e(G, { "aria-hidden": !0 }),
                 onClick: () => {
                   const r = o.get(t.employeeUuid || "");
-                  r && h(r);
+                  r && g(r);
                 }
               }
             ],
-            triggerLabel: n("editMenu.edit")
+            triggerLabel: l("editMenu.edit")
           }
         )
       }
     ),
-    /* @__PURE__ */ e(b, { title: n("backButtonTitle"), onClick: u, variant: "secondary", children: n("backButton") })
+    /* @__PURE__ */ e(b, { title: l("backButtonTitle"), onClick: u, variant: "secondary", children: l("backButton") })
   ] });
 };
 export {
-  ne as PayrollConfigurationPresentation
+  oe as PayrollConfigurationPresentation
 };
 //# sourceMappingURL=PayrollConfigurationPresentation.js.map

package/dist/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { EmployeeCompensations } from '@gusto/embedded-api/models/components/payrollshow'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype'\nimport type { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject'\nimport { useTranslation } from 'react-i18next'\nimport type { TFunction } from 'i18next'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { parseDateStringToLocal } from '@/helpers/dateFormatting'\nimport { useLocale } from '@/contexts/LocaleProvider/useLocale'\n\ninterface PayrollConfigurationPresentationProps {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod?: PayrollPayPeriodType\n  paySchedule?: PayScheduleObject\n  onBack: () => void\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n  isOffCycle?: boolean\n}\n\nconst getPayrollConfigurationTitle = ({\n  payPeriod,\n  locale,\n  t,\n}: {\n  payPeriod?: PayrollPayPeriodType\n  locale: string\n  t: TFunction<'Payroll.PayrollConfiguration'>\n}) => {\n  if (payPeriod?.startDate && payPeriod.endDate) {\n    const startDate = parseDateStringToLocal(payPeriod.startDate)\n    const endDate = parseDateStringToLocal(payPeriod.endDate)\n\n    if (startDate && endDate) {\n      const startFormatted = startDate.toLocaleDateString(locale, {\n        month: 'long',\n        day: 'numeric',\n      })\n      const endFormatted = endDate.toLocaleDateString(locale, {\n        month: 'short',\n        day: 'numeric',\n        year: 'numeric',\n      })\n      return t('pageTitle', { startDate: startFormatted, endDate: endFormatted })\n    }\n  }\n  return t('pageTitle', { startDate: '', endDate: '' })\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employeeCompensations,\n  employeeDetails,\n  payPeriod,\n  paySchedule,\n  onBack,\n  onEdit,\n  onCalculatePayroll,\n  isOffCycle = false,\n}: PayrollConfigurationPresentationProps) => {\n  const { Alert, Button, Heading, Text, Badge } = useComponentContext()\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const { locale } = useLocale()\n  const formatEmployeePayRate = useFormatEmployeePayRate()\n\n  const employeeMap = new Map(employeeDetails.map(employee => [employee.uuid, employee]))\n\n  const getEmployeeName = (employeeUuid: string) => {\n    const employee = employeeMap.get(employeeUuid)\n    return employee\n      ? firstLastName({ first_name: employee.firstName, last_name: employee.lastName })\n      : null\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      <Flex justifyContent=\"space-between\" alignItems=\"center\">\n        <Heading as=\"h1\">{getPayrollConfigurationTitle({ payPeriod, locale, t })}</Heading>\n        <Button title={t('calculatePayrollTitle')} onClick={onCalculatePayroll}>\n          {t('calculatePayroll')}\n        </Button>\n      </Flex>\n\n      <Text>{t('regularPayroll')}</Text>\n\n      <Flex flexDirection=\"column\" gap={16}>\n        {/* TODO: Replace with actual deadline information from payroll data */}\n        <Alert label=\"Payroll Deadline\" status=\"info\">\n          To pay your employees with direct deposit on the check date, you&apos;ll need to run\n          payroll by the deadline.\n        </Alert>\n\n        {/* TODO: Replace with actual skipped employees list from payroll data */}\n        <Alert label=\"Skipped Employees\" status=\"warning\">\n          <ul>\n            <li>Employee address not verified</li>\n            <li>Employee address not verified</li>\n          </ul>\n        </Alert>\n      </Flex>\n\n      <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n      <Text>{t('hoursAndEarningsDescription')}</Text>\n\n      <DataView\n        label={t('employeeCompensationsTitle')}\n        columns={[\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.employees')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const employee = employeeMap.get(item.employeeUuid || '')\n              const payRateDisplay = formatEmployeePayRate(employee)\n              return (\n                <Flex flexDirection=\"column\" gap={8 as const}>\n                  <Text weight=\"semibold\">{getEmployeeName(item.employeeUuid || '')}</Text>\n                  {payRateDisplay && <Text variant=\"supporting\">{payRateDisplay}</Text>}\n                  {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                </Flex>\n              )\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.hours')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const hours = getRegularHours(item)\n              return <Text>{formatHoursDisplay(hours)}</Text>\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.timeOff')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const ptoHours = getTotalPtoHours(item)\n              return <Text>{formatHoursDisplay(ptoHours)}</Text>\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.additionalEarnings')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const earnings = getAdditionalEarnings(item)\n              return <Text>{formatNumberAsCurrency(earnings)}</Text>\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.reimbursements')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const reimbursements = getReimbursements(item)\n              return <Text>{formatNumberAsCurrency(reimbursements)}</Text>\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.totalPay')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const employee = employeeMap.get(item.employeeUuid || '')\n              const calculatedGrossPay = employee\n                ? calculateGrossPay(item, employee, payPeriod?.startDate, paySchedule, isOffCycle)\n                : 0\n              return <Text>{formatNumberAsCurrency(calculatedGrossPay)}</Text>\n            },\n          },\n        ]}\n        data={employeeCompensations\n          .filter(compensation => {\n            const employeeUuid = compensation.employeeUuid\n            if (!employeeUuid) return false\n            return employeeMap.has(employeeUuid)\n          })\n          .sort((a, b) => {\n            const employeeA = employeeMap.get(a.employeeUuid || '')\n            const employeeB = employeeMap.get(b.employeeUuid || '')\n            const lastNameA = employeeA?.lastName || ''\n            const lastNameB = employeeB?.lastName || ''\n            return lastNameA.localeCompare(lastNameB)\n          })}\n        itemMenu={(item: EmployeeCompensations) => (\n          <HamburgerMenu\n            items={[\n              {\n                label: t('editMenu.edit'),\n                icon: <PencilSvg aria-hidden />,\n                onClick: () => {\n                  const employee = employeeMap.get(item.employeeUuid || '')\n                  if (employee) {\n                    onEdit(employee)\n                  }\n                },\n              },\n            ]}\n            triggerLabel={t('editMenu.edit')}\n          />\n        )}\n      />\n\n      <Button title={t('backButtonTitle')} onClick={onBack} variant=\"secondary\">\n        {t('backButton')}\n      </Button>\n    </Flex>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","locale","t","startDate","parseDateStringToLocal","endDate","startFormatted","endFormatted","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onBack","onEdit","onCalculatePayroll","isOffCycle","Alert","Button","Heading","Text","Badge","useComponentContext","useTranslation","useLocale","formatEmployeePayRate","useFormatEmployeePayRate","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsxs","Flex","jsx","DataView","item","payRateDisplay","hours","getRegularHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","compensation","a","b","employeeA","employeeB","lastNameA","lastNameB","HamburgerMenu","PencilSvg"],"mappings":"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"}
+{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { EmployeeCompensations } from '@gusto/embedded-api/models/components/payrollshow'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype'\nimport type { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject'\nimport { useTranslation } from 'react-i18next'\nimport type { TFunction } from 'i18next'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport { useI18n } from '@/i18n'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { parseDateStringToLocal } from '@/helpers/dateFormatting'\nimport { useLocale } from '@/contexts/LocaleProvider/useLocale'\n\ninterface PayrollConfigurationPresentationProps {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod?: PayrollPayPeriodType\n  paySchedule?: PayScheduleObject\n  onBack: () => void\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n  isOffCycle?: boolean\n}\n\nconst getPayrollConfigurationTitle = ({\n  payPeriod,\n  locale,\n  t,\n}: {\n  payPeriod?: PayrollPayPeriodType\n  locale: string\n  t: TFunction<'Payroll.PayrollConfiguration'>\n}) => {\n  if (payPeriod?.startDate && payPeriod.endDate) {\n    const startDate = parseDateStringToLocal(payPeriod.startDate)\n    const endDate = parseDateStringToLocal(payPeriod.endDate)\n\n    if (startDate && endDate) {\n      const startFormatted = startDate.toLocaleDateString(locale, {\n        month: 'long',\n        day: 'numeric',\n      })\n      const endFormatted = endDate.toLocaleDateString(locale, {\n        month: 'short',\n        day: 'numeric',\n        year: 'numeric',\n      })\n      return t('pageTitle', { startDate: startFormatted, endDate: endFormatted })\n    }\n  }\n  return t('pageTitle', { startDate: '', endDate: '' })\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employeeCompensations,\n  employeeDetails,\n  payPeriod,\n  paySchedule,\n  onBack,\n  onEdit,\n  onCalculatePayroll,\n  isOffCycle = false,\n}: PayrollConfigurationPresentationProps) => {\n  const { Alert, Button, Heading, Text, Badge } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const { locale } = useLocale()\n  const formatEmployeePayRate = useFormatEmployeePayRate()\n\n  const employeeMap = new Map(employeeDetails.map(employee => [employee.uuid, employee]))\n\n  const getEmployeeName = (employeeUuid: string) => {\n    const employee = employeeMap.get(employeeUuid)\n    return employee\n      ? firstLastName({ first_name: employee.firstName, last_name: employee.lastName })\n      : null\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      <Flex justifyContent=\"space-between\" alignItems=\"center\">\n        <Heading as=\"h1\">{getPayrollConfigurationTitle({ payPeriod, locale, t })}</Heading>\n        <Button title={t('calculatePayrollTitle')} onClick={onCalculatePayroll}>\n          {t('calculatePayroll')}\n        </Button>\n      </Flex>\n\n      <Text>{t('regularPayroll')}</Text>\n\n      <Flex flexDirection=\"column\" gap={16}>\n        {/* TODO: Replace with actual deadline information from payroll data */}\n        <Alert label={t('alerts.payrollDeadline.label')} status=\"info\">\n          {t('alerts.payrollDeadline.message')}\n        </Alert>\n\n        {/* TODO: Replace with actual skipped employees list from payroll data */}\n        <Alert label={t('alerts.skippedEmployees.label')} status=\"warning\">\n          <ul>\n            <li>{t('alerts.skippedEmployees.employeeAddressNotVerified')}</li>\n            <li>{t('alerts.skippedEmployees.employeeAddressNotVerified')}</li>\n          </ul>\n        </Alert>\n      </Flex>\n\n      <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n      <Text>{t('hoursAndEarningsDescription')}</Text>\n\n      <DataView\n        label={t('employeeCompensationsTitle')}\n        columns={[\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.employees')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const employee = employeeMap.get(item.employeeUuid || '')\n              const payRateDisplay = formatEmployeePayRate(employee)\n              return (\n                <Flex flexDirection=\"column\" gap={8 as const}>\n                  <Text weight=\"semibold\">{getEmployeeName(item.employeeUuid || '')}</Text>\n                  {payRateDisplay && <Text variant=\"supporting\">{payRateDisplay}</Text>}\n                  {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                </Flex>\n              )\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.hours')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const hours = getRegularHours(item)\n              return <Text>{formatHoursDisplay(hours)}</Text>\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.timeOff')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const ptoHours = getTotalPtoHours(item)\n              return <Text>{formatHoursDisplay(ptoHours)}</Text>\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.additionalEarnings')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const earnings = getAdditionalEarnings(item)\n              return <Text>{formatNumberAsCurrency(earnings)}</Text>\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.reimbursements')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const reimbursements = getReimbursements(item)\n              return <Text>{formatNumberAsCurrency(reimbursements)}</Text>\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.totalPay')}</Text>,\n            render: (item: PayrollEmployeeCompensationsType) => {\n              const employee = employeeMap.get(item.employeeUuid || '')\n              const calculatedGrossPay = employee\n                ? calculateGrossPay(item, employee, payPeriod?.startDate, paySchedule, isOffCycle)\n                : 0\n              return <Text>{formatNumberAsCurrency(calculatedGrossPay)}</Text>\n            },\n          },\n        ]}\n        data={employeeCompensations\n          .filter(compensation => {\n            const employeeUuid = compensation.employeeUuid\n            if (!employeeUuid) return false\n            return employeeMap.has(employeeUuid)\n          })\n          .sort((a, b) => {\n            const employeeA = employeeMap.get(a.employeeUuid || '')\n            const employeeB = employeeMap.get(b.employeeUuid || '')\n            const lastNameA = employeeA?.lastName || ''\n            const lastNameB = employeeB?.lastName || ''\n            return lastNameA.localeCompare(lastNameB)\n          })}\n        itemMenu={(item: EmployeeCompensations) => (\n          <HamburgerMenu\n            items={[\n              {\n                label: t('editMenu.edit'),\n                icon: <PencilSvg aria-hidden />,\n                onClick: () => {\n                  const employee = employeeMap.get(item.employeeUuid || '')\n                  if (employee) {\n                    onEdit(employee)\n                  }\n                },\n              },\n            ]}\n            triggerLabel={t('editMenu.edit')}\n          />\n        )}\n      />\n\n      <Button title={t('backButtonTitle')} onClick={onBack} variant=\"secondary\">\n        {t('backButton')}\n      </Button>\n    </Flex>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","locale","t","startDate","parseDateStringToLocal","endDate","startFormatted","endFormatted","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onBack","onEdit","onCalculatePayroll","isOffCycle","Alert","Button","Heading","Text","Badge","useComponentContext","useI18n","useTranslation","useLocale","formatEmployeePayRate","useFormatEmployeePayRate","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsxs","Flex","jsx","DataView","item","payRateDisplay","hours","getRegularHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","compensation","a","b","employeeA","employeeB","lastNameA","lastNameB","HamburgerMenu","PencilSvg"],"mappings":"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"}

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

@@ -1,6 +1,9 @@
 import { BaseComponentInterface } from '../../Base/Base';
-interface PayrollEditEmployeeProps extends BaseComponentInterface {
+interface PayrollEditEmployeeProps extends BaseComponentInterface<'Payroll.PayrollEditEmployee'> {
     employeeId: string;
+    companyId: string;
+    payrollId: string;
 }
-export declare const PayrollEditEmployee: ({ employeeId, onEvent, ...baseProps }: PayrollEditEmployeeProps) => import("react/jsx-runtime").JSX.Element;
+export declare function PayrollEditEmployee(props: PayrollEditEmployeeProps & BaseComponentInterface): import("react/jsx-runtime").JSX.Element;
+export declare const Root: ({ employeeId, companyId, payrollId, onEvent, dictionary, }: PayrollEditEmployeeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployee.js

@@ -1,19 +1,70 @@
-import { jsx as e } from "react/jsx-runtime";
-import { PayrollEditEmployeePresentation as r } from "./PayrollEditEmployeePresentation.js";
+import { jsx as r } from "react/jsx-runtime";
+import { useEmployeesGetSuspense as A } from "@gusto/embedded-api/react-query/employeesGet";
+import { usePayrollsUpdateMutation as R } from "@gusto/embedded-api/react-query/payrollsUpdate";
+import { calculateGrossPay as U } from "../helpers.js";
+import { usePreparedPayrollData as g } from "../usePreparedPayrollData.js";
+import { PayrollEditEmployeePresentation as O } from "./PayrollEditEmployeePresentation.js";
 import { componentEvents as p } from "../../../shared/constants.js";
-import { BaseComponent as s } from "../../Base/Base.js";
-const a = ({ employeeId: t }) => ({ mutate: async () => {
-} }), u = ({
-  employeeId: t,
-  onEvent: o,
-  ...n
+import { BaseComponent as S } from "../../Base/Base.js";
+import { useComponentDictionary as Y } from "../../../i18n/I18n.js";
+import { useBase as N } from "../../Base/useBase.js";
+function b(e) {
+  return /* @__PURE__ */ r(S, { ...e, children: /* @__PURE__ */ r(h, { ...e, children: e.children }) });
+}
+const h = ({
+  employeeId: e,
+  companyId: s,
+  payrollId: m,
+  onEvent: i,
+  dictionary: c
 }) => {
-  const { mutate: m } = a({ employeeId: t });
-  return /* @__PURE__ */ e(s, { ...n, onEvent: o, children: /* @__PURE__ */ e(r, { onDone: async () => {
-    await m(), o(p.RUN_PAYROLL_EMPLOYEE_SAVED);
-  } }) });
+  Y("Payroll.PayrollEditEmployee", c);
+  const { LoadingIndicator: y } = N(), { data: u } = A({ employeeId: e }), { preparedPayroll: n, paySchedule: P, isLoading: d } = g({
+    companyId: s,
+    payrollId: m
+  }), { mutateAsync: f, isPending: E } = R(), l = u.employee, a = n?.employeeCompensations?.find(
+    (o) => o.employeeUuid === e
+  ), C = ({
+    paymentMethod: o,
+    ...t
+  }) => ({
+    ...t,
+    ...o && o !== "Historical" ? { paymentMethod: o } : {},
+    memo: t.memo || void 0
+  }), L = async (o) => {
+    const t = C(o), _ = await f({
+      request: {
+        companyId: s,
+        payrollId: m,
+        payrollUpdate: {
+          employeeCompensations: [t]
+        }
+      }
+    });
+    i(p.RUN_PAYROLL_EMPLOYEE_SAVED, _.payrollPrepared);
+  }, D = () => {
+    i(p.RUN_PAYROLL_EMPLOYEE_CANCELLED);
+  };
+  return d ? /* @__PURE__ */ r(y, {}) : /* @__PURE__ */ r(
+    O,
+    {
+      onSave: L,
+      onCancel: D,
+      employee: l,
+      isPending: E,
+      grossPay: a ? U(
+        a,
+        l,
+        n?.payPeriod?.startDate,
+        P,
+        n?.offCycle
+      ) : 0,
+      employeeCompensation: a
+    }
+  );
 };
 export {
-  u as PayrollEditEmployee
+  b as PayrollEditEmployee,
+  h as Root
 };
 //# sourceMappingURL=PayrollEditEmployee.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollEditEmployee.js","sources":["../../../../src/components/Payroll/PayrollEditEmployee/PayrollEditEmployee.tsx"],"sourcesContent":["import { PayrollEditEmployeePresentation } from './PayrollEditEmployeePresentation'\nimport { componentEvents } from '@/shared/constants'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { BaseComponent } from '@/components/Base/Base'\n\n//TODO: Use Speakeasy type\ninterface Employee {\n  employeeId: string\n}\n\n// TODO: Replace this hook with call to Speakeasy instead\nconst useEditEmployeeApi = ({ employeeId }: Employee) => {\n  const mutate = async () => {}\n  return { mutate }\n}\n\ninterface PayrollEditEmployeeProps extends BaseComponentInterface {\n  employeeId: string\n}\n\nexport const PayrollEditEmployee = ({\n  employeeId,\n  onEvent,\n  ...baseProps\n}: PayrollEditEmployeeProps) => {\n  const { mutate } = useEditEmployeeApi({ employeeId })\n  const onDone = async () => {\n    await mutate()\n    onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_SAVED)\n  }\n  return (\n    <BaseComponent {...baseProps} onEvent={onEvent}>\n      <PayrollEditEmployeePresentation onDone={onDone} />\n    </BaseComponent>\n  )\n}\n"],"names":["useEditEmployeeApi","employeeId","PayrollEditEmployee","onEvent","baseProps","mutate","jsx","BaseComponent","PayrollEditEmployeePresentation","componentEvents"],"mappings":";;;;AAWA,MAAMA,IAAqB,CAAC,EAAE,YAAAC,SAErB,EAAE,QADM,YAAY;AAAC,EACnB,IAOEC,IAAsB,CAAC;AAAA,EAClC,YAAAD;AAAA,EACA,SAAAE;AAAA,EACA,GAAGC;AACL,MAAgC;AAC9B,QAAM,EAAE,QAAAC,EAAA,IAAWL,EAAmB,EAAE,YAAAC,GAAY;AAKpD,SACE,gBAAAK,EAACC,KAAe,GAAGH,GAAW,SAAAD,GAC5B,UAAA,gBAAAG,EAACE,GAAA,EAAgC,QANtB,YAAY;AACzB,UAAMH,EAAA,GACNF,EAAQM,EAAgB,0BAA0B;AAAA,EACpD,GAGqD,EAAA,CACnD;AAEJ;"}
+{"version":3,"file":"PayrollEditEmployee.js","sources":["../../../../src/components/Payroll/PayrollEditEmployee/PayrollEditEmployee.tsx"],"sourcesContent":["import { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet'\nimport { usePayrollsUpdateMutation } from '@gusto/embedded-api/react-query/payrollsUpdate'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport type { PayrollUpdateEmployeeCompensations } from '@gusto/embedded-api/models/components/payrollupdate'\nimport { calculateGrossPay } from '../helpers'\nimport { usePreparedPayrollData } from '../usePreparedPayrollData'\nimport { PayrollEditEmployeePresentation } from './PayrollEditEmployeePresentation'\nimport { componentEvents } from '@/shared/constants'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { BaseComponent } from '@/components/Base/Base'\nimport { useComponentDictionary } from '@/i18n'\nimport { useBase } from '@/components/Base/useBase'\n\ninterface PayrollEditEmployeeProps extends BaseComponentInterface<'Payroll.PayrollEditEmployee'> {\n  employeeId: string\n  companyId: string\n  payrollId: string\n}\n\nexport function PayrollEditEmployee(props: PayrollEditEmployeeProps & BaseComponentInterface) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({\n  employeeId,\n  companyId,\n  payrollId,\n  onEvent,\n  dictionary,\n}: PayrollEditEmployeeProps) => {\n  useComponentDictionary('Payroll.PayrollEditEmployee', dictionary)\n\n  const { LoadingIndicator } = useBase()\n\n  const { data: employeeData } = useEmployeesGetSuspense({ employeeId })\n  const { preparedPayroll, paySchedule, isLoading } = usePreparedPayrollData({\n    companyId,\n    payrollId,\n  })\n\n  const { mutateAsync: updatePayroll, isPending } = usePayrollsUpdateMutation()\n\n  const employee = employeeData.employee!\n\n  const employeeCompensation = preparedPayroll?.employeeCompensations?.find(\n    compensation => compensation.employeeUuid === employeeId,\n  )\n\n  const transformEmployeeCompensation = ({\n    paymentMethod,\n    ...compensation\n  }: PayrollEmployeeCompensationsType): PayrollUpdateEmployeeCompensations => {\n    return {\n      ...compensation,\n      ...(paymentMethod && paymentMethod !== 'Historical' ? { paymentMethod } : {}),\n      memo: compensation.memo || undefined,\n    }\n  }\n\n  const onSave = async (updatedCompensation: PayrollEmployeeCompensationsType) => {\n    const transformedCompensation = transformEmployeeCompensation(updatedCompensation)\n\n    const result = await updatePayroll({\n      request: {\n        companyId,\n        payrollId,\n        payrollUpdate: {\n          employeeCompensations: [transformedCompensation],\n        },\n      },\n    })\n\n    onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_SAVED, result.payrollPrepared)\n  }\n\n  const onCancel = () => {\n    onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_CANCELLED)\n  }\n\n  if (isLoading) {\n    return <LoadingIndicator />\n  }\n\n  return (\n    <PayrollEditEmployeePresentation\n      onSave={onSave}\n      onCancel={onCancel}\n      employee={employee}\n      isPending={isPending}\n      grossPay={\n        employeeCompensation\n          ? calculateGrossPay(\n              employeeCompensation,\n              employee,\n              preparedPayroll?.payPeriod?.startDate,\n              paySchedule,\n              preparedPayroll?.offCycle,\n            )\n          : 0\n      }\n      employeeCompensation={employeeCompensation}\n    />\n  )\n}\n"],"names":["PayrollEditEmployee","props","jsx","BaseComponent","Root","employeeId","companyId","payrollId","onEvent","dictionary","useComponentDictionary","LoadingIndicator","useBase","employeeData","useEmployeesGetSuspense","preparedPayroll","paySchedule","isLoading","usePreparedPayrollData","updatePayroll","isPending","usePayrollsUpdateMutation","employee","employeeCompensation","compensation","transformEmployeeCompensation","paymentMethod","onSave","updatedCompensation","transformedCompensation","result","componentEvents","onCancel","PayrollEditEmployeePresentation","calculateGrossPay"],"mappings":";;;;;;;;;;AAmBO,SAASA,EAAoBC,GAA0D;AAC5F,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEO,MAAMG,IAAO,CAAC;AAAA,EACnB,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AACF,MAAgC;AAC9B,EAAAC,EAAuB,+BAA+BD,CAAU;AAEhE,QAAM,EAAE,kBAAAE,EAAA,IAAqBC,EAAA,GAEvB,EAAE,MAAMC,EAAA,IAAiBC,EAAwB,EAAE,YAAAT,GAAY,GAC/D,EAAE,iBAAAU,GAAiB,aAAAC,GAAa,WAAAC,EAAA,IAAcC,EAAuB;AAAA,IACzE,WAAAZ;AAAA,IACA,WAAAC;AAAA,EAAA,CACD,GAEK,EAAE,aAAaY,GAAe,WAAAC,EAAA,IAAcC,EAAA,GAE5CC,IAAWT,EAAa,UAExBU,IAAuBR,GAAiB,uBAAuB;AAAA,IACnE,CAAAS,MAAgBA,EAAa,iBAAiBnB;AAAA,EAAA,GAG1CoB,IAAgC,CAAC;AAAA,IACrC,eAAAC;AAAA,IACA,GAAGF;AAAA,EAAA,OAEI;AAAA,IACL,GAAGA;AAAA,IACH,GAAIE,KAAiBA,MAAkB,eAAe,EAAE,eAAAA,EAAA,IAAkB,CAAA;AAAA,IAC1E,MAAMF,EAAa,QAAQ;AAAA,EAAA,IAIzBG,IAAS,OAAOC,MAA0D;AAC9E,UAAMC,IAA0BJ,EAA8BG,CAAmB,GAE3EE,IAAS,MAAMX,EAAc;AAAA,MACjC,SAAS;AAAA,QACP,WAAAb;AAAA,QACA,WAAAC;AAAA,QACA,eAAe;AAAA,UACb,uBAAuB,CAACsB,CAAuB;AAAA,QAAA;AAAA,MACjD;AAAA,IACF,CACD;AAED,IAAArB,EAAQuB,EAAgB,4BAA4BD,EAAO,eAAe;AAAA,EAC5E,GAEME,IAAW,MAAM;AACrB,IAAAxB,EAAQuB,EAAgB,8BAA8B;AAAA,EACxD;AAEA,SAAId,sBACMN,GAAA,EAAiB,IAIzB,gBAAAT;AAAA,IAAC+B;AAAA,IAAA;AAAA,MACC,QAAAN;AAAA,MACA,UAAAK;AAAA,MACA,UAAAV;AAAA,MACA,WAAAF;AAAA,MACA,UACEG,IACIW;AAAA,QACEX;AAAA,QACAD;AAAA,QACAP,GAAiB,WAAW;AAAA,QAC5BC;AAAA,QACAD,GAAiB;AAAA,MAAA,IAEnB;AAAA,MAEN,sBAAAQ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.d.ts

@@ -1,5 +1,21 @@
+import { Employee } from '@gusto/embedded-api/models/components/employee';
+import { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype';
+import { z } from 'zod';
 interface PayrollEditEmployeeProps {
-    onDone: () => void;
+    onSave: (updatedCompensation: PayrollEmployeeCompensationsType) => void;
+    onCancel: () => void;
+    employee: Employee;
+    employeeCompensation?: PayrollEmployeeCompensationsType;
+    grossPay: number;
+    isPending?: boolean;
 }
-export declare const PayrollEditEmployeePresentation: ({ onDone }: PayrollEditEmployeeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayrollEditEmployeeFormSchema: z.ZodObject<{
+    hourlyCompensations: z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodString, z.ZodOptional<z.ZodString>>>;
+}, "strip", z.ZodTypeAny, {
+    hourlyCompensations: Record<string, Record<string, string | undefined>>;
+}, {
+    hourlyCompensations: Record<string, Record<string, string | undefined>>;
+}>;
+export type PayrollEditEmployeeFormValues = z.infer<typeof PayrollEditEmployeeFormSchema>;
+export declare const PayrollEditEmployeePresentation: ({ onSave, onCancel, employee, grossPay, employeeCompensation, isPending, }: PayrollEditEmployeeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js

@@ -1,24 +1,122 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useForm as m, FormProvider as s } from "react-hook-form";
-import { Flex as a } from "../../Common/Flex/Flex.js";
-import "classnames";
-import "../../../shared/constants.js";
-import "react-i18next";
-import { NumberInputField as d } from "../../Common/Fields/NumberInputField/NumberInputField.js";
-import { useComponentContext as p } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { Form as u } from "../../Common/Form/Form.js";
-const D = ({ onDone: e }) => {
-  const { Button: t, Heading: o, Text: n } = p(), i = m();
-  return /* @__PURE__ */ l(a, { flexDirection: "column", gap: 20, children: [
-    /* @__PURE__ */ r(o, { as: "h2", children: "Edit Hannah Arendt's payroll" }),
-    /* @__PURE__ */ r(o, { as: "h1", children: "$1,173.08" }),
-    /* @__PURE__ */ r(n, { children: "Gross pay" }),
-    /* @__PURE__ */ r(o, { as: "h3", children: "Regular hours" }),
-    /* @__PURE__ */ r(s, { ...i, children: /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(d, { defaultValue: 40, isRequired: !0, label: "Hours", name: "hours" }) }) }),
-    /* @__PURE__ */ r(t, { onClick: e, title: "Done", children: "Done" })
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { useForm as x, FormProvider as M } from "react-hook-form";
+import { useTranslation as S } from "react-i18next";
+import { z as s } from "zod";
+import { zodResolver as A } from "@hookform/resolvers/zod";
+import { Flex as u } from "../../Common/Flex/Flex.js";
+import { Grid as v } from "../../Common/Grid/Grid.js";
+import { TextInputField as U } from "../../Common/Fields/TextInputField/TextInputField.js";
+import { useComponentContext as I } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as L } from "../../../i18n/I18n.js";
+import { Form as R } from "../../Common/Form/Form.js";
+import { firstLastName as F, formatNumberAsCurrency as H } from "../../../helpers/formattedStrings.js";
+import { HOURS_COMPENSATION_NAMES as C, COMPENSATION_NAME_DOUBLE_OVERTIME as B, COMPENSATION_NAME_OVERTIME as w, COMPENSATION_NAME_REGULAR_HOURS as D } from "../../../shared/constants.js";
+const V = s.object({
+  hourlyCompensations: s.record(s.string(), s.record(s.string(), s.string().optional()))
+}), or = ({
+  onSave: g,
+  onCancel: y,
+  employee: l,
+  grossPay: N,
+  employeeCompensation: m,
+  isPending: b = !1
+}) => {
+  const { Button: f, Heading: d, Text: O } = I(), { t } = S("Payroll.PayrollEditEmployee");
+  L("Payroll.PayrollEditEmployee");
+  const p = l.jobs?.find((r) => r.primary), c = p ? [p] : [];
+  m?.hourlyCompensations?.forEach((r) => {
+    const e = l.jobs?.find((o) => o.uuid === r.jobUuid);
+    e && !c.find((o) => o.uuid === e.uuid) && c.push(e);
+  });
+  const h = (r, e) => m?.hourlyCompensations?.find(
+    (o) => o.jobUuid === r && o.name?.toLowerCase() === e.toLowerCase()
+  ), P = (r) => {
+    switch (r) {
+      case D:
+        return t("compensationNames.regularHours");
+      case w:
+        return t("compensationNames.overtime");
+      case B:
+        return t("compensationNames.doubleOvertime");
+      default:
+        return r;
+    }
+  }, j = {
+    hourlyCompensations: (() => {
+      const r = {};
+      return c.forEach((e) => {
+        C.forEach((o) => {
+          const i = h(e.uuid, o);
+          i && (r[e.uuid] || (r[e.uuid] = {}), r[e.uuid][i.name] = i.hours ? parseFloat(i.hours).toString() : "");
+        });
+      }), r;
+    })()
+  }, E = x({
+    resolver: A(V),
+    defaultValues: j
+  }), T = F({
+    first_name: l.firstName,
+    last_name: l.lastName
+  }), _ = (r) => {
+    const e = {
+      ...m
+    };
+    e.hourlyCompensations = m?.hourlyCompensations?.map(
+      (o) => {
+        const i = o.jobUuid && o.name ? r.hourlyCompensations[o.jobUuid]?.[o.name] : void 0;
+        return i ? {
+          ...o,
+          hours: i
+        } : o;
+      }
+    ), g(e);
+  };
+  return /* @__PURE__ */ a(u, { flexDirection: "column", gap: 20, children: [
+    /* @__PURE__ */ a(u, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ a(u, { flexDirection: "column", gap: 8, children: [
+        /* @__PURE__ */ n(d, { as: "h2", children: t("pageTitle", { employeeName: T }) }),
+        /* @__PURE__ */ n(d, { as: "h1", children: H(N || 0) }),
+        /* @__PURE__ */ n(O, { children: t("grossPayLabel") })
+      ] }),
+      /* @__PURE__ */ a(u, { gap: 12, justifyContent: "flex-end", children: [
+        /* @__PURE__ */ n(f, { variant: "secondary", onClick: y, title: t("cancelButton"), children: t("cancelButton") }),
+        /* @__PURE__ */ n(
+          f,
+          {
+            onClick: E.handleSubmit(_),
+            title: t("saveButton"),
+            isLoading: b,
+            children: t("saveButton")
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ n(d, { as: "h3", children: t("regularHoursTitle") }),
+    /* @__PURE__ */ n(M, { ...E, children: /* @__PURE__ */ n(R, { children: c.map((r) => /* @__PURE__ */ a(u, { flexDirection: "column", gap: 8, children: [
+      /* @__PURE__ */ n(d, { as: "h4", children: r.title }),
+      /* @__PURE__ */ n(v, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: C.map((e) => {
+        const o = h(
+          r.uuid,
+          e
+        );
+        if (o)
+          return /* @__PURE__ */ n(
+            U,
+            {
+              type: "number",
+              adornmentEnd: t("hoursUnit"),
+              isRequired: !0,
+              label: P(e),
+              name: `hourlyCompensations.${r.uuid}.${o.name}`
+            },
+            e
+          );
+      }) })
+    ] }, r.uuid)) }) })
   ] });
 };
 export {
-  D as PayrollEditEmployeePresentation
+  V as PayrollEditEmployeeFormSchema,
+  or as PayrollEditEmployeePresentation
 };
 //# sourceMappingURL=PayrollEditEmployeePresentation.js.map

package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollEditEmployeePresentation.js","sources":["../../../../src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx"],"sourcesContent":["import { FormProvider, useForm } from 'react-hook-form'\nimport { Flex, NumberInputField } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Form } from '@/components/Common/Form'\n\ninterface PayrollEditEmployeeProps {\n  onDone: () => void\n}\n\nexport const PayrollEditEmployeePresentation = ({ onDone }: PayrollEditEmployeeProps) => {\n  const { Button, Heading, Text } = useComponentContext()\n  const formHandlers = useForm()\n  return (\n    <Flex flexDirection=\"column\" gap={20}>\n      <Heading as=\"h2\">{`Edit Hannah Arendt's payroll`}</Heading>\n      <Heading as=\"h1\">$1,173.08</Heading>\n      <Text>Gross pay</Text>\n      <Heading as=\"h3\">Regular hours</Heading>\n      <FormProvider {...formHandlers}>\n        <Form>\n          <NumberInputField defaultValue={40} isRequired label=\"Hours\" name=\"hours\" />\n        </Form>\n      </FormProvider>\n\n      <Button onClick={onDone} title=\"Done\">\n        Done\n      </Button>\n    </Flex>\n  )\n}\n"],"names":["PayrollEditEmployeePresentation","onDone","Button","Heading","Text","useComponentContext","formHandlers","useForm","jsxs","Flex","jsx","FormProvider","Form","NumberInputField"],"mappings":";;;;;;;;;AASO,MAAMA,IAAkC,CAAC,EAAE,QAAAC,QAAuC;AACvF,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,EAAA,IAASC,EAAA,GAC5BC,IAAeC,EAAA;AACrB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAC,EAACP,GAAA,EAAQ,IAAG,MAAM,UAAA,gCAA+B;AAAA,IACjD,gBAAAO,EAACP,GAAA,EAAQ,IAAG,MAAK,UAAA,aAAS;AAAA,IAC1B,gBAAAO,EAACN,KAAK,UAAA,YAAA,CAAS;AAAA,IACf,gBAAAM,EAACP,GAAA,EAAQ,IAAG,MAAK,UAAA,iBAAa;AAAA,sBAC7BQ,GAAA,EAAc,GAAGL,GAChB,UAAA,gBAAAI,EAACE,KACC,UAAA,gBAAAF,EAACG,GAAA,EAAiB,cAAc,IAAI,YAAU,IAAC,OAAM,SAAQ,MAAK,QAAA,CAAQ,GAC5E,GACF;AAAA,sBAECX,GAAA,EAAO,SAASD,GAAQ,OAAM,QAAO,UAAA,OAAA,CAEtC;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"PayrollEditEmployeePresentation.js","sources":["../../../../src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx"],"sourcesContent":["import { FormProvider, useForm } from 'react-hook-form'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport { useTranslation } from 'react-i18next'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport { z } from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { Flex, Grid, TextInputField } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { Form } from '@/components/Common/Form'\nimport { formatNumberAsCurrency, firstLastName } from '@/helpers/formattedStrings'\nimport {\n  COMPENSATION_NAME_DOUBLE_OVERTIME,\n  COMPENSATION_NAME_OVERTIME,\n  COMPENSATION_NAME_REGULAR_HOURS,\n  HOURS_COMPENSATION_NAMES,\n} from '@/shared/constants'\n\ninterface PayrollEditEmployeeProps {\n  onSave: (updatedCompensation: PayrollEmployeeCompensationsType) => void\n  onCancel: () => void\n  employee: Employee\n  employeeCompensation?: PayrollEmployeeCompensationsType\n  grossPay: number\n  isPending?: boolean\n}\n\nexport const PayrollEditEmployeeFormSchema = z.object({\n  hourlyCompensations: z.record(z.string(), z.record(z.string(), z.string().optional())),\n})\n\nexport type PayrollEditEmployeeFormValues = z.infer<typeof PayrollEditEmployeeFormSchema>\n\nexport const PayrollEditEmployeePresentation = ({\n  onSave,\n  onCancel,\n  employee,\n  grossPay,\n  employeeCompensation,\n  isPending = false,\n}: PayrollEditEmployeeProps) => {\n  const { Button, Heading, Text } = useComponentContext()\n\n  const { t } = useTranslation('Payroll.PayrollEditEmployee')\n  useI18n('Payroll.PayrollEditEmployee')\n\n  const primaryJob = employee.jobs?.find(job => job.primary)\n  const hourlyJobs = primaryJob ? [primaryJob] : []\n\n  employeeCompensation?.hourlyCompensations?.forEach(compensation => {\n    const job = employee.jobs?.find(job => job.uuid === compensation.jobUuid)\n    if (job && !hourlyJobs.find(hourlyJob => hourlyJob.uuid === job.uuid)) {\n      hourlyJobs.push(job)\n    }\n  })\n\n  const findMatchingCompensation = (jobUuid: string, compensationName: string) => {\n    return employeeCompensation?.hourlyCompensations?.find(\n      compensation =>\n        compensation.jobUuid === jobUuid &&\n        compensation.name?.toLowerCase() === compensationName.toLowerCase(),\n    )\n  }\n\n  const getCompensationLabel = (compensationName: string) => {\n    switch (compensationName) {\n      case COMPENSATION_NAME_REGULAR_HOURS:\n        return t('compensationNames.regularHours')\n      case COMPENSATION_NAME_OVERTIME:\n        return t('compensationNames.overtime')\n      case COMPENSATION_NAME_DOUBLE_OVERTIME:\n        return t('compensationNames.doubleOvertime')\n      default:\n        return compensationName\n    }\n  }\n\n  const defaultValues = {\n    hourlyCompensations: (() => {\n      const compensations: PayrollEditEmployeeFormValues['hourlyCompensations'] = {}\n\n      hourlyJobs.forEach(hourlyJob => {\n        HOURS_COMPENSATION_NAMES.forEach(compensationName => {\n          const matchingCompensation = findMatchingCompensation(hourlyJob.uuid, compensationName)\n          if (matchingCompensation) {\n            if (!compensations[hourlyJob.uuid]) {\n              compensations[hourlyJob.uuid] = {}\n            }\n            compensations[hourlyJob.uuid]![matchingCompensation.name!] = matchingCompensation.hours\n              ? parseFloat(matchingCompensation.hours).toString()\n              : ''\n          }\n        })\n      })\n\n      return compensations\n    })(),\n  }\n\n  const formHandlers = useForm<PayrollEditEmployeeFormValues>({\n    resolver: zodResolver(PayrollEditEmployeeFormSchema),\n    defaultValues,\n  })\n\n  const employeeName = firstLastName({\n    first_name: employee.firstName,\n    last_name: employee.lastName,\n  })\n\n  const onSubmit = (data: PayrollEditEmployeeFormValues) => {\n    const updatedCompensation = {\n      ...employeeCompensation,\n    }\n\n    updatedCompensation.hourlyCompensations = employeeCompensation?.hourlyCompensations?.map(\n      compensation => {\n        const hours =\n          compensation.jobUuid && compensation.name\n            ? data.hourlyCompensations[compensation.jobUuid]?.[compensation.name]\n            : undefined\n        return hours\n          ? {\n              ...compensation,\n              hours,\n            }\n          : compensation\n      },\n    )\n\n    onSave(updatedCompensation)\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={20}>\n      <Flex justifyContent=\"space-between\">\n        <Flex flexDirection=\"column\" gap={8}>\n          <Heading as=\"h2\">{t('pageTitle', { employeeName })}</Heading>\n          <Heading as=\"h1\">{formatNumberAsCurrency(grossPay || 0)}</Heading>\n          <Text>{t('grossPayLabel')}</Text>\n        </Flex>\n        <Flex gap={12} justifyContent=\"flex-end\">\n          <Button variant=\"secondary\" onClick={onCancel} title={t('cancelButton')}>\n            {t('cancelButton')}\n          </Button>\n          <Button\n            onClick={formHandlers.handleSubmit(onSubmit)}\n            title={t('saveButton')}\n            isLoading={isPending}\n          >\n            {t('saveButton')}\n          </Button>\n        </Flex>\n      </Flex>\n      <Heading as=\"h3\">{t('regularHoursTitle')}</Heading>\n      <FormProvider {...formHandlers}>\n        <Form>\n          {hourlyJobs.map(hourlyJob => (\n            <Flex key={hourlyJob.uuid} flexDirection=\"column\" gap={8}>\n              <Heading as=\"h4\">{hourlyJob.title}</Heading>\n              <Grid gridTemplateColumns={{ base: '1fr', small: [320, 320] }} gap={20}>\n                {HOURS_COMPENSATION_NAMES.map(compensationName => {\n                  const employeeHourlyCompensation = findMatchingCompensation(\n                    hourlyJob.uuid,\n                    compensationName,\n                  )\n                  if (employeeHourlyCompensation) {\n                    return (\n                      <TextInputField\n                        key={compensationName}\n                        type=\"number\"\n                        adornmentEnd={t('hoursUnit')}\n                        isRequired\n                        label={getCompensationLabel(compensationName)}\n                        name={`hourlyCompensations.${hourlyJob.uuid}.${employeeHourlyCompensation.name}`}\n                      />\n                    )\n                  }\n                })}\n              </Grid>\n            </Flex>\n          ))}\n        </Form>\n      </FormProvider>\n    </Flex>\n  )\n}\n"],"names":["PayrollEditEmployeeFormSchema","z","PayrollEditEmployeePresentation","onSave","onCancel","employee","grossPay","employeeCompensation","isPending","Button","Heading","Text","useComponentContext","useTranslation","useI18n","primaryJob","job","hourlyJobs","compensation","hourlyJob","findMatchingCompensation","jobUuid","compensationName","getCompensationLabel","COMPENSATION_NAME_REGULAR_HOURS","COMPENSATION_NAME_OVERTIME","COMPENSATION_NAME_DOUBLE_OVERTIME","defaultValues","compensations","HOURS_COMPENSATION_NAMES","matchingCompensation","formHandlers","useForm","zodResolver","employeeName","firstLastName","onSubmit","data","updatedCompensation","hours","jsxs","Flex","jsx","formatNumberAsCurrency","FormProvider","Form","Grid","employeeHourlyCompensation","TextInputField"],"mappings":"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"}