@gusto/embedded-react-sdk 0.13.1 → 0.13.2

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 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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"}
+{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport 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, Grid } 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  alerts?: ReactNode\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  alerts,\n}: PayrollConfigurationPresentationProps) => {\n  const { 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      {alerts && (\n        <Grid gap={16} gridTemplateColumns=\"1fr\">\n          {alerts}\n        </Grid>\n      )}\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","alerts","Button","Heading","Text","Badge","useComponentContext","useI18n","useTranslation","useLocale","formatEmployeePayRate","useFormatEmployeePayRate","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsxs","Flex","jsx","Grid","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.js

@@ -1,4 +1,4 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as t } 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";
@@ -9,57 +9,60 @@ 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 }) });
+  return /* @__PURE__ */ t(S, { ...e, children: /* @__PURE__ */ t(h, { ...e, children: e.children }) });
 }
 const h = ({
   employeeId: e,
-  companyId: s,
-  payrollId: m,
+  companyId: m,
+  payrollId: l,
   onEvent: i,
-  dictionary: c
+  dictionary: y
 }) => {
-  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(
+  Y("Payroll.PayrollEditEmployee", y);
+  const { LoadingIndicator: c } = N(), { data: P } = A({ employeeId: e }), { preparedPayroll: a, paySchedule: d, isLoading: u } = g({
+    companyId: m,
+    payrollId: l
+  }), { mutateAsync: f, isPending: E } = R(), n = P.employee, s = a?.employeeCompensations?.find(
     (o) => o.employeeUuid === e
   ), C = ({
     paymentMethod: o,
-    ...t
+    ...r
   }) => ({
-    ...t,
+    ...r,
     ...o && o !== "Historical" ? { paymentMethod: o } : {},
-    memo: t.memo || void 0
+    memo: r.memo || void 0
   }), L = async (o) => {
-    const t = C(o), _ = await f({
+    const r = C(o), _ = await f({
       request: {
-        companyId: s,
-        payrollId: m,
+        companyId: m,
+        payrollId: l,
         payrollUpdate: {
-          employeeCompensations: [t]
+          employeeCompensations: [r]
         }
       }
     });
-    i(p.RUN_PAYROLL_EMPLOYEE_SAVED, _.payrollPrepared);
+    i(p.RUN_PAYROLL_EMPLOYEE_SAVED, {
+      payrollPrepared: _.payrollPrepared,
+      employee: n
+    });
   }, D = () => {
     i(p.RUN_PAYROLL_EMPLOYEE_CANCELLED);
   };
-  return d ? /* @__PURE__ */ r(y, {}) : /* @__PURE__ */ r(
+  return u ? /* @__PURE__ */ t(c, {}) : /* @__PURE__ */ t(
     O,
     {
       onSave: L,
       onCancel: D,
-      employee: l,
+      employee: n,
       isPending: E,
-      grossPay: a ? U(
-        a,
-        l,
-        n?.payPeriod?.startDate,
-        P,
-        n?.offCycle
+      grossPay: s ? U(
+        s,
+        n,
+        a?.payPeriod?.startDate,
+        d,
+        a?.offCycle
       ) : 0,
-      employeeCompensation: a
+      employeeCompensation: s
     }
   );
 };

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

@@ -1 +1 @@
-{"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;"}
+{"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, {\n      payrollPrepared: result.payrollPrepared,\n      employee,\n    })\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,4BAA4B;AAAA,MAClD,iBAAiBD,EAAO;AAAA,MACxB,UAAAR;AAAA,IAAA,CACD;AAAA,EACH,GAEMU,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.js

@@ -5,12 +5,12 @@ 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";
+import { useComponentContext as U } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as I } from "../../../i18n/I18n.js";
+import { Form as L } from "../../Common/Form/Form.js";
+import { firstLastName as R, formatNumberAsCurrency as F } from "../../../helpers/formattedStrings.js";
+import { HOURS_COMPENSATION_NAMES as C, COMPENSATION_NAME_DOUBLE_OVERTIME as H, COMPENSATION_NAME_OVERTIME as B, COMPENSATION_NAME_REGULAR_HOURS as w } from "../../../shared/constants.js";
+import { TextInputField as D } from "../../Common/Fields/TextInputField/TextInputField.js";
 const V = s.object({
   hourlyCompensations: s.record(s.string(), s.record(s.string(), s.string().optional()))
 }), or = ({
@@ -21,8 +21,8 @@ const V = s.object({
   employeeCompensation: m,
   isPending: b = !1
 }) => {
-  const { Button: f, Heading: d, Text: O } = I(), { t } = S("Payroll.PayrollEditEmployee");
-  L("Payroll.PayrollEditEmployee");
+  const { Button: f, Heading: d, Text: O } = U(), { t } = S("Payroll.PayrollEditEmployee");
+  I("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);
@@ -32,11 +32,11 @@ const V = s.object({
     (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");
+        return t("compensationNames.regularHours");
       case B:
+        return t("compensationNames.overtime");
+      case H:
         return t("compensationNames.doubleOvertime");
       default:
         return r;
@@ -54,7 +54,7 @@ const V = s.object({
   }, E = x({
     resolver: A(V),
     defaultValues: j
-  }), T = F({
+  }), T = R({
     first_name: l.firstName,
     last_name: l.lastName
   }), _ = (r) => {
@@ -75,7 +75,7 @@ const V = s.object({
     /* @__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(d, { as: "h1", children: F(N || 0) }),
         /* @__PURE__ */ n(O, { children: t("grossPayLabel") })
       ] }),
       /* @__PURE__ */ a(u, { gap: 12, justifyContent: "flex-end", children: [
@@ -92,7 +92,7 @@ const V = s.object({
       ] })
     ] }),
     /* @__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(M, { ...E, children: /* @__PURE__ */ n(L, { 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(
@@ -101,7 +101,7 @@ const V = s.object({
         );
         if (o)
           return /* @__PURE__ */ n(
-            U,
+            D,
             {
               type: "number",
               adornmentEnd: t("hoursUnit"),

package/dist/components/Payroll/PayrollHistory/PayrollHistoryPresentation.d.ts

@@ -0,0 +1,18 @@
+export interface PayrollHistoryItem {
+    id: string;
+    payPeriod: string;
+    type: 'Regular' | 'Off-cycle' | 'Dismissal';
+    payDate: string;
+    status: 'Unprocessed' | 'Submitted' | 'Pending' | 'Paid' | 'Complete' | 'In progress';
+    amount?: number;
+}
+interface PayrollHistoryPresentationProps {
+    payrollHistory: PayrollHistoryItem[];
+    selectedTimeFilter: string;
+    onTimeFilterChange: (value: string) => void;
+    onViewSummary: (payrollId: string) => void;
+    onViewReceipt: (payrollId: string) => void;
+    onCancelPayroll: (payrollId: string) => void;
+}
+export declare const PayrollHistoryPresentation: ({ payrollHistory, selectedTimeFilter, onTimeFilterChange, onViewSummary, onViewReceipt, onCancelPayroll, }: PayrollHistoryPresentationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,30 +1,36 @@
 import { jsx as t } from "react/jsx-runtime";
-import { usePayrollsListSuspense as n } from "@gusto/embedded-api/react-query/payrollsList";
+import { usePayrollsListSuspense as c } from "@gusto/embedded-api/react-query/payrollsList";
 import { usePaySchedulesGetAllSuspense as i } from "@gusto/embedded-api/react-query/paySchedulesGetAll";
-import { ProcessingStatuses as m } from "@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls";
-import { PayrollListPresentation as c } from "./PayrollListPresentation.js";
+import { ProcessingStatuses as y } from "@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls";
+import { PayrollListPresentation as m } from "./PayrollListPresentation.js";
 import { BaseComponent as u } from "../../Base/Base.js";
 import "../../Base/useBase.js";
-import { componentEvents as y } from "../../../shared/constants.js";
-const g = ({ companyId: s, onEvent: o }) => {
-  const { data: r } = n({
-    companyId: s,
-    processingStatuses: [m.Unprocessed]
-  }), e = r.payrollList, { data: l } = i({
-    companyId: s
-  }), a = l.payScheduleList;
-  return /* @__PURE__ */ t(u, { onEvent: o, children: /* @__PURE__ */ t(
-    c,
+import { componentEvents as P } from "../../../shared/constants.js";
+const L = ({
+  external: o,
+  offCycle: s
+}) => o ? "External" : s ? "Off-Cycle" : "Regular", S = (o) => ({
+  ...o,
+  payrollType: L(o)
+}), D = ({ companyId: o, onEvent: s }) => {
+  const { data: e } = c({
+    companyId: o,
+    processingStatuses: [y.Unprocessed]
+  }), r = e.payrollList, { data: l } = i({
+    companyId: o
+  }), a = l.payScheduleList, p = ({ payrollId: n }) => {
+    s(P.RUN_PAYROLL_SELECTED, { payrollId: n });
+  };
+  return /* @__PURE__ */ t(u, { onEvent: s, children: /* @__PURE__ */ t(
+    m,
     {
-      payrolls: e,
+      payrolls: r.map(S),
       paySchedules: a,
-      onRunPayroll: ({ payrollId: p }) => {
-        o(y.RUN_PAYROLL_SELECTED, { payrollId: p });
-      }
+      onRunPayroll: p
     }
   ) });
 };
 export {
-  g as PayrollList
+  D as PayrollList
 };
 //# sourceMappingURL=PayrollList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollList.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollList.tsx"],"sourcesContent":["import { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'\nimport { ProcessingStatuses } from '@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls'\nimport { PayrollListPresentation } from './PayrollListPresentation'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { BaseComponent } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\n\ninterface PayrollListBlockProps extends BaseComponentInterface {\n  companyId: string\n}\n\nexport const PayrollList = ({ companyId, onEvent }: PayrollListBlockProps) => {\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processingStatuses: [ProcessingStatuses.Unprocessed],\n  })\n  const payrollList = payrollsData.payrollList!\n  const { data: paySchedulesData } = usePaySchedulesGetAllSuspense({\n    companyId,\n  })\n  const paySchedulesList = paySchedulesData.payScheduleList!\n\n  const onRunPayroll = ({ payrollId }: { payrollId: string }) => {\n    onEvent(componentEvents.RUN_PAYROLL_SELECTED, { payrollId })\n  }\n  return (\n    <BaseComponent onEvent={onEvent}>\n      <PayrollListPresentation\n        payrolls={payrollList}\n        paySchedules={paySchedulesList}\n        onRunPayroll={onRunPayroll}\n      />\n    </BaseComponent>\n  )\n}\n"],"names":["PayrollList","companyId","onEvent","payrollsData","usePayrollsListSuspense","ProcessingStatuses","payrollList","paySchedulesData","usePaySchedulesGetAllSuspense","paySchedulesList","jsx","BaseComponent","PayrollListPresentation","payrollId","componentEvents"],"mappings":";;;;;;;;AAYO,MAAMA,IAAc,CAAC,EAAE,WAAAC,GAAW,SAAAC,QAAqC;AAC5E,QAAM,EAAE,MAAMC,EAAA,IAAiBC,EAAwB;AAAA,IACrD,WAAAH;AAAA,IACA,oBAAoB,CAACI,EAAmB,WAAW;AAAA,EAAA,CACpD,GACKC,IAAcH,EAAa,aAC3B,EAAE,MAAMI,EAAA,IAAqBC,EAA8B;AAAA,IAC/D,WAAAP;AAAA,EAAA,CACD,GACKQ,IAAmBF,EAAiB;AAK1C,SACE,gBAAAG,EAACC,KAAc,SAAAT,GACb,UAAA,gBAAAQ;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAUN;AAAA,MACV,cAAcG;AAAA,MACd,cARe,CAAC,EAAE,WAAAI,QAAuC;AAC7D,QAAAX,EAAQY,EAAgB,sBAAsB,EAAE,WAAAD,EAAA,CAAW;AAAA,MAC7D;AAAA,IAMM;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"PayrollList.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollList.tsx"],"sourcesContent":["import { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'\nimport { ProcessingStatuses } from '@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls'\nimport type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport { PayrollListPresentation } from './PayrollListPresentation'\nimport type { PayrollType } from './types'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { BaseComponent } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\n\nconst selectPayrollType = ({\n  external,\n  offCycle,\n}: Pick<Payroll, 'external' | 'offCycle'>): PayrollType =>\n  external ? 'External' : offCycle ? 'Off-Cycle' : 'Regular'\n\nconst createPayrollProjection = (p: Payroll) => ({\n  ...p,\n  payrollType: selectPayrollType(p),\n})\n\ninterface PayrollListBlockProps extends BaseComponentInterface {\n  companyId: string\n}\n\nexport const PayrollList = ({ companyId, onEvent }: PayrollListBlockProps) => {\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processingStatuses: [ProcessingStatuses.Unprocessed],\n  })\n  const payrollList = payrollsData.payrollList!\n  const { data: paySchedulesData } = usePaySchedulesGetAllSuspense({\n    companyId,\n  })\n  const paySchedulesList = paySchedulesData.payScheduleList!\n\n  const onRunPayroll = ({ payrollId }: { payrollId: string }) => {\n    onEvent(componentEvents.RUN_PAYROLL_SELECTED, { payrollId })\n  }\n  return (\n    <BaseComponent onEvent={onEvent}>\n      <PayrollListPresentation\n        payrolls={payrollList.map(createPayrollProjection)}\n        paySchedules={paySchedulesList}\n        onRunPayroll={onRunPayroll}\n      />\n    </BaseComponent>\n  )\n}\n"],"names":["selectPayrollType","external","offCycle","createPayrollProjection","p","PayrollList","companyId","onEvent","payrollsData","usePayrollsListSuspense","ProcessingStatuses","payrollList","paySchedulesData","usePaySchedulesGetAllSuspense","paySchedulesList","onRunPayroll","payrollId","componentEvents","jsx","BaseComponent","PayrollListPresentation"],"mappings":";;;;;;;;AAUA,MAAMA,IAAoB,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,UAAAC;AACF,MACED,IAAW,aAAaC,IAAW,cAAc,WAE7CC,IAA0B,CAACC,OAAgB;AAAA,EAC/C,GAAGA;AAAA,EACH,aAAaJ,EAAkBI,CAAC;AAClC,IAMaC,IAAc,CAAC,EAAE,WAAAC,GAAW,SAAAC,QAAqC;AAC5E,QAAM,EAAE,MAAMC,EAAA,IAAiBC,EAAwB;AAAA,IACrD,WAAAH;AAAA,IACA,oBAAoB,CAACI,EAAmB,WAAW;AAAA,EAAA,CACpD,GACKC,IAAcH,EAAa,aAC3B,EAAE,MAAMI,EAAA,IAAqBC,EAA8B;AAAA,IAC/D,WAAAP;AAAA,EAAA,CACD,GACKQ,IAAmBF,EAAiB,iBAEpCG,IAAe,CAAC,EAAE,WAAAC,QAAuC;AAC7D,IAAAT,EAAQU,EAAgB,sBAAsB,EAAE,WAAAD,EAAA,CAAW;AAAA,EAC7D;AACA,SACE,gBAAAE,EAACC,KAAc,SAAAZ,GACb,UAAA,gBAAAW;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAUT,EAAY,IAAIR,CAAuB;AAAA,MACjD,cAAcW;AAAA,MACd,cAAAC;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -1,10 +1,14 @@
 import { Payroll } from '@gusto/embedded-api/models/components/payroll';
 import { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist';
+import { PayrollType } from './types';
+interface PresentationPayroll extends Payroll {
+    payrollType: PayrollType;
+}
 interface PayrollListPresentationProps {
     onRunPayroll: ({ payrollId }: {
         payrollId: NonNullable<Payroll['payrollUuid']>;
     }) => void;
-    payrolls: Payroll[];
+    payrolls: PresentationPayroll[];
     paySchedules: PayScheduleList[];
 }
 export declare const PayrollListPresentation: ({ onRunPayroll, payrolls, paySchedules, }: PayrollListPresentationProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,50 +1,84 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useTranslation as u } from "react-i18next";
-import { Flex as c } from "../../Common/Flex/Flex.js";
-import "classnames";
-import "../../../shared/constants.js";
-import { useComponentContext as p } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as f } from "../../../i18n/I18n.js";
-import { DataView as y } from "../../Common/DataView/DataView.js";
-const H = ({
-  onRunPayroll: a,
-  payrolls: s,
-  paySchedules: n
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
+import { Flex as f } from "../../Common/Flex/Flex.js";
+import { useComponentContext as D } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as L } from "../../../i18n/I18n.js";
+import { parseDateStringToLocal as l } from "../../../helpers/dateFormatting.js";
+import { useLocale as g } from "../../../contexts/LocaleProvider/useLocale.js";
+import { DataView as b } from "../../Common/DataView/DataView.js";
+const j = ({
+  onRunPayroll: c,
+  payrolls: d,
+  paySchedules: i
 }) => {
-  const { Badge: d, Button: m, Text: l } = p();
-  f("Payroll.PayrollList");
-  const { t } = u("Payroll.PayrollList");
+  const { Badge: m, Button: u, Text: o } = D();
+  L("Payroll.PayrollList");
+  const { t } = p("Payroll.PayrollList"), { locale: a } = g();
   return /* @__PURE__ */ r(
-    y,
+    b,
     {
       columns: [
         {
-          render: ({ payPeriod: e }) => /* @__PURE__ */ i(c, { flexDirection: "column", children: [
-            /* @__PURE__ */ i(l, { children: [
-              e?.startDate,
-              " - ",
-              e?.endDate
-            ] }),
-            /* @__PURE__ */ r(l, { children: n.find((o) => o.uuid === e?.payScheduleUuid)?.name || n.find((o) => o.uuid === e?.payScheduleUuid)?.customName })
-          ] }),
+          render: ({ payPeriod: e }) => {
+            const h = l(e.startDate)?.toLocaleDateString(
+              a,
+              {
+                month: "short",
+                day: "numeric"
+              }
+            ), y = l(e.endDate)?.toLocaleDateString(
+              a,
+              {
+                month: "short",
+                day: "numeric",
+                year: "numeric"
+              }
+            );
+            return /* @__PURE__ */ s(f, { flexDirection: "column", gap: 0, children: [
+              /* @__PURE__ */ s(o, { children: [
+                h,
+                " - ",
+                y
+              ] }),
+              /* @__PURE__ */ r(o, { variant: "supporting", children: i.find((n) => n.uuid === e?.payScheduleUuid)?.name || i.find((n) => n.uuid === e?.payScheduleUuid)?.customName })
+            ] });
+          },
           title: t("tableHeaders.0")
         },
         {
-          title: t("tableHeaders.1"),
-          render: ({ payrollDeadline: e }) => /* @__PURE__ */ r(l, { children: e?.toLocaleDateString() })
+          render: ({ payrollType: e }) => /* @__PURE__ */ r(o, { children: t(`type.${e}`) }),
+          title: t("tableHeaders.1")
+        },
+        {
+          render: ({ checkDate: e }) => /* @__PURE__ */ r(o, { children: l(e)?.toLocaleDateString(a, {
+            weekday: "short",
+            month: "short",
+            day: "numeric",
+            year: "numeric"
+          }) }),
+          title: t("tableHeaders.2")
+        },
+        {
+          title: t("tableHeaders.3"),
+          render: ({ payrollDeadline: e }) => /* @__PURE__ */ r(o, { children: e?.toLocaleDateString(a, {
+            weekday: "short",
+            month: "short",
+            day: "numeric",
+            year: "numeric"
+          }) })
         },
         {
-          title: t("tableHeaders.2"),
-          render: ({ processed: e }) => /* @__PURE__ */ r(d, { children: t(e ? "status.processed" : "status.unprocessed") })
+          title: t("tableHeaders.4"),
+          render: ({ processed: e }) => /* @__PURE__ */ r(m, { children: t(e ? "status.processed" : "status.unprocessed") })
         }
       ],
-      data: s,
+      data: d,
       label: t("payrollsListLabel"),
       itemMenu: ({ payrollUuid: e }) => /* @__PURE__ */ r(
-        m,
+        u,
         {
           onClick: () => {
-            a({ payrollId: e });
+            c({ payrollId: e });
           },
           title: t("runPayrollTitle"),
           variant: "secondary",
@@ -55,6 +89,6 @@ const H = ({
   );
 };
 export {
-  H as PayrollListPresentation
+  j as PayrollListPresentation
 };
 //# sourceMappingURL=PayrollListPresentation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollListPresentation.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollListPresentation.tsx"],"sourcesContent":["import type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport type { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist'\nimport { useTranslation } from 'react-i18next'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\n\ninterface PayrollListPresentationProps {\n  onRunPayroll: ({ payrollId }: { payrollId: NonNullable<Payroll['payrollUuid']> }) => void\n  payrolls: Payroll[]\n  paySchedules: PayScheduleList[]\n}\nexport const PayrollListPresentation = ({\n  onRunPayroll,\n  payrolls,\n  paySchedules,\n}: PayrollListPresentationProps) => {\n  const { Badge, Button, Text } = useComponentContext()\n  useI18n('Payroll.PayrollList')\n  const { t } = useTranslation('Payroll.PayrollList')\n\n  return (\n    <DataView\n      columns={[\n        {\n          render: ({ payPeriod }) => (\n            <Flex flexDirection=\"column\">\n              <Text>\n                {payPeriod?.startDate} - {payPeriod?.endDate}\n              </Text>\n              <Text>\n                {paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                  ?.name ||\n                  paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                    ?.customName}\n              </Text>\n            </Flex>\n          ),\n          title: t('tableHeaders.0'),\n        },\n        {\n          title: t('tableHeaders.1'),\n          render: ({ payrollDeadline }) => <Text>{payrollDeadline?.toLocaleDateString()}</Text>,\n        },\n        {\n          title: t('tableHeaders.2'),\n          render: ({ processed }) => (\n            <Badge>{processed ? t('status.processed') : t('status.unprocessed')}</Badge>\n          ),\n        },\n      ]}\n      data={payrolls}\n      label={t('payrollsListLabel')}\n      itemMenu={({ payrollUuid }) => (\n        <Button\n          onClick={() => {\n            onRunPayroll({ payrollId: payrollUuid! })\n          }}\n          title={t('runPayrollTitle')}\n          variant=\"secondary\"\n        >\n          {t('runPayrollTitle')}\n        </Button>\n      )}\n    />\n  )\n}\n"],"names":["PayrollListPresentation","onRunPayroll","payrolls","paySchedules","Badge","Button","Text","useComponentContext","useI18n","useTranslation","jsx","DataView","payPeriod","jsxs","Flex","schedule","payrollDeadline","processed","payrollUuid"],"mappings":";;;;;;;;AAYO,MAAMA,IAA0B,CAAC;AAAA,EACtC,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AACF,MAAoC;AAClC,QAAM,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,EAAA,IAASC,EAAA;AAChC,EAAAC,EAAQ,qBAAqB;AAC7B,QAAM,EAAE,EAAA,IAAMC,EAAe,qBAAqB;AAElD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP;AAAA,UACE,QAAQ,CAAC,EAAE,WAAAC,QACT,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAClB,UAAA;AAAA,YAAA,gBAAAD,EAACP,GAAA,EACE,UAAA;AAAA,cAAAM,GAAW;AAAA,cAAU;AAAA,cAAIA,GAAW;AAAA,YAAA,GACvC;AAAA,8BACCN,GAAA,EACE,UAAAH,EAAa,KAAK,CAAAY,MAAYA,EAAS,SAASH,GAAW,eAAe,GACvE,QACFT,EAAa,KAAK,CAAAY,MAAYA,EAAS,SAASH,GAAW,eAAe,GACtE,WAAA,CACR;AAAA,UAAA,GACF;AAAA,UAEF,OAAO,EAAE,gBAAgB;AAAA,QAAA;AAAA,QAE3B;AAAA,UACE,OAAO,EAAE,gBAAgB;AAAA,UACzB,QAAQ,CAAC,EAAE,iBAAAI,EAAA,MAAsB,gBAAAN,EAACJ,GAAA,EAAM,UAAAU,GAAiB,qBAAmB,CAAE;AAAA,QAAA;AAAA,QAEhF;AAAA,UACE,OAAO,EAAE,gBAAgB;AAAA,UACzB,QAAQ,CAAC,EAAE,WAAAC,QACT,gBAAAP,EAACN,GAAA,EAAO,UAAY,EAAZa,IAAc,qBAAwB,oBAAN,EAA0B,CAAE;AAAA,QAAA;AAAA,MAExE;AAAA,MAEF,MAAMf;AAAA,MACN,OAAO,EAAE,mBAAmB;AAAA,MAC5B,UAAU,CAAC,EAAE,aAAAgB,EAAA,MACX,gBAAAR;AAAA,QAACL;AAAA,QAAA;AAAA,UACC,SAAS,MAAM;AACb,YAAAJ,EAAa,EAAE,WAAWiB,GAAc;AAAA,UAC1C;AAAA,UACA,OAAO,EAAE,iBAAiB;AAAA,UAC1B,SAAQ;AAAA,UAEP,YAAE,iBAAiB;AAAA,QAAA;AAAA,MAAA;AAAA,IACtB;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"PayrollListPresentation.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollListPresentation.tsx"],"sourcesContent":["import type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport type { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist'\nimport { useTranslation } from 'react-i18next'\nimport type { PayrollType } from './types'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { parseDateStringToLocal } from '@/helpers/dateFormatting'\nimport { useLocale } from '@/contexts/LocaleProvider'\n\ninterface PresentationPayroll extends Payroll {\n  payrollType: PayrollType\n}\n\ninterface PayrollListPresentationProps {\n  onRunPayroll: ({ payrollId }: { payrollId: NonNullable<Payroll['payrollUuid']> }) => void\n  payrolls: PresentationPayroll[]\n  paySchedules: PayScheduleList[]\n}\n\nexport const PayrollListPresentation = ({\n  onRunPayroll,\n  payrolls,\n  paySchedules,\n}: PayrollListPresentationProps) => {\n  const { Badge, Button, Text } = useComponentContext()\n  useI18n('Payroll.PayrollList')\n  const { t } = useTranslation('Payroll.PayrollList')\n  const { locale } = useLocale()\n\n  return (\n    <DataView\n      columns={[\n        {\n          render: ({ payPeriod }) => {\n            const startDate = parseDateStringToLocal(payPeriod!.startDate!)?.toLocaleDateString(\n              locale,\n              {\n                month: 'short',\n                day: 'numeric',\n              },\n            )\n\n            const endDate = parseDateStringToLocal(payPeriod!.endDate!)?.toLocaleDateString(\n              locale,\n              {\n                month: 'short',\n                day: 'numeric',\n                year: 'numeric',\n              },\n            )\n\n            return (\n              <Flex flexDirection=\"column\" gap={0}>\n                <Text>\n                  {startDate} - {endDate}\n                </Text>\n                <Text variant=\"supporting\">\n                  {paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                    ?.name ||\n                    paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                      ?.customName}\n                </Text>\n              </Flex>\n            )\n          },\n          title: t('tableHeaders.0'),\n        },\n        {\n          render: ({ payrollType }) => <Text>{t(`type.${payrollType}`)}</Text>,\n          title: t('tableHeaders.1'),\n        },\n        {\n          render: ({ checkDate }) => (\n            <Text>\n              {parseDateStringToLocal(checkDate!)?.toLocaleDateString(locale, {\n                weekday: 'short',\n                month: 'short',\n                day: 'numeric',\n                year: 'numeric',\n              })}\n            </Text>\n          ),\n          title: t('tableHeaders.2'),\n        },\n        {\n          title: t('tableHeaders.3'),\n          render: ({ payrollDeadline }) => (\n            <Text>\n              {payrollDeadline?.toLocaleDateString(locale, {\n                weekday: 'short',\n                month: 'short',\n                day: 'numeric',\n                year: 'numeric',\n              })}\n            </Text>\n          ),\n        },\n        {\n          title: t('tableHeaders.4'),\n          render: ({ processed }) => (\n            <Badge>{processed ? t('status.processed') : t('status.unprocessed')}</Badge>\n          ),\n        },\n      ]}\n      data={payrolls}\n      label={t('payrollsListLabel')}\n      itemMenu={({ payrollUuid }) => (\n        <Button\n          onClick={() => {\n            onRunPayroll({ payrollId: payrollUuid! })\n          }}\n          title={t('runPayrollTitle')}\n          variant=\"secondary\"\n        >\n          {t('runPayrollTitle')}\n        </Button>\n      )}\n    />\n  )\n}\n"],"names":["PayrollListPresentation","onRunPayroll","payrolls","paySchedules","Badge","Button","Text","useComponentContext","useI18n","useTranslation","locale","useLocale","jsx","DataView","payPeriod","startDate","parseDateStringToLocal","endDate","jsxs","Flex","schedule","payrollType","checkDate","payrollDeadline","processed","payrollUuid"],"mappings":"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"}

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

@@ -0,0 +1 @@
+export type PayrollType = 'External' | 'Off-Cycle' | 'Regular';

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

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