@gusto/embedded-react-sdk 0.30.0 → 0.31.0

package/dist/components/Contractor/Payments/CreatePayment/CreatePayment.js

@@ -1,63 +1,64 @@
-import { jsx as P, jsxs as q, Fragment as x } from "react/jsx-runtime";
-import { useContractorsListSuspense as F } from "@gusto/embedded-api/react-query/contractorsList";
-import { useContractorPaymentGroupsCreateMutation as I } from "@gusto/embedded-api/react-query/contractorPaymentGroupsCreate";
-import { useContractorPaymentGroupsPreviewMutation as V } from "@gusto/embedded-api/react-query/contractorPaymentGroupsPreview";
-import { useState as u, useMemo as M } from "react";
-import { RFCDate as N } from "@gusto/embedded-api/types/rfcdate";
-import { useForm as j } from "react-hook-form";
-import { zodResolver as W } from "@hookform/resolvers/zod";
-import { useTranslation as z } from "react-i18next";
-import { useBankAccountsGet as K } from "@gusto/embedded-api/react-query/bankAccountsGet";
-import { CreatePaymentPresentation as J } from "./CreatePaymentPresentation.js";
-import { EditContractorPaymentFormSchema as Q, EditContractorPaymentPresentation as X } from "./EditContractorPaymentPresentation.js";
-import { PreviewPresentation as Z } from "./PreviewPresentation.js";
-import { useComponentDictionary as $ } from "../../../../i18n/I18n.js";
-import { BaseComponent as tt } from "../../../Base/Base.js";
-import { useBase as et } from "../../../Base/useBase.js";
-import { ContractorOnboardingStatus as ot, componentEvents as d } from "../../../../shared/constants.js";
-import { firstLastName as rt } from "../../../../helpers/formattedStrings.js";
-function Et(s) {
-  return /* @__PURE__ */ P(tt, { ...s, children: /* @__PURE__ */ P(nt, { ...s, children: s.children }) });
+import { jsx as P, jsxs as I, Fragment as j } from "react/jsx-runtime";
+import { useContractorsListSuspense as z } from "@gusto/embedded-api/react-query/contractorsList";
+import { useContractorPaymentGroupsCreateMutation as W } from "@gusto/embedded-api/react-query/contractorPaymentGroupsCreate";
+import { useContractorPaymentGroupsPreviewMutation as K } from "@gusto/embedded-api/react-query/contractorPaymentGroupsPreview";
+import { useState as m, useMemo as E } from "react";
+import J from "dompurify";
+import { RFCDate as k } from "@gusto/embedded-api/types/rfcdate";
+import { useForm as Q } from "react-hook-form";
+import { zodResolver as X } from "@hookform/resolvers/zod";
+import { useTranslation as Z } from "react-i18next";
+import { useBankAccountsGet as $ } from "@gusto/embedded-api/react-query/bankAccountsGet";
+import { CreatePaymentPresentation as tt } from "./CreatePaymentPresentation.js";
+import { EditContractorPaymentFormSchema as et, EditContractorPaymentPresentation as ot } from "./EditContractorPaymentPresentation.js";
+import { PreviewPresentation as rt } from "./PreviewPresentation.js";
+import { useComponentDictionary as nt } from "../../../../i18n/I18n.js";
+import { BaseComponent as st } from "../../../Base/Base.js";
+import { useBase as at } from "../../../Base/useBase.js";
+import { ContractorOnboardingStatus as it, componentEvents as d } from "../../../../shared/constants.js";
+import { firstLastName as ct } from "../../../../helpers/formattedStrings.js";
+function vt(s) {
+  return /* @__PURE__ */ P(st, { ...s, children: /* @__PURE__ */ P(ut, { ...s, children: s.children }) });
 }
-const nt = ({ companyId: s, dictionary: E, onEvent: m }) => {
-  $("Contractor.Payments.CreatePayment", E);
-  const { t: f } = z("Contractor.Payments.CreatePayment"), [k, C] = u(!1), [b, U] = u(
+const ut = ({ companyId: s, dictionary: S, onEvent: l }) => {
+  nt("Contractor.Payments.CreatePayment", S);
+  const { t: f } = Z("Contractor.Payments.CreatePayment"), [U, C] = m(!1), [b, _] = m(
     (/* @__PURE__ */ new Date()).toISOString().split("T")[0] || ""
-  ), { baseSubmitHandler: h } = et(), [T, l] = u({}), [p, g] = u(null), [w, A] = u({}), { mutateAsync: _, isPending: D } = I(), {
-    mutateAsync: G,
+  ), { baseSubmitHandler: h } = at(), [T, p] = m({}), [y, g] = m(null), [w, N] = m({}), { mutateAsync: G, isPending: D } = W(), {
+    mutateAsync: v,
     isPending: O
-  } = V(), { data: S } = F({ companyUuid: s }), a = (S.contractorList || []).filter(
-    (t) => t.isActive && t.onboardingStatus === ot.ONBOARDING_COMPLETED
-  ), { data: v } = K({ companyId: s }), B = v?.companyBankAccounts?.[0], L = M(
+  } = K(), { data: B } = z({ companyUuid: s }), a = (B.contractorList || []).filter(
+    (t) => t.isActive && t.onboardingStatus === it.ONBOARDING_COMPLETED
+  ), { data: L } = $({ companyId: s }), H = L?.companyBankAccounts?.[0], V = E(
     () => a.map((t) => {
       const e = t.paymentMethod ? t.paymentMethod : "Direct Deposit";
       return {
         contractorUuid: t.uuid,
         paymentMethod: e,
-        wage: 0,
-        hours: 0,
-        bonus: 0,
-        reimbursement: 0,
+        wage: "0",
+        hours: "0",
+        bonus: "0",
+        reimbursement: "0",
         isTouched: !1
       };
     }),
     [a]
-  ), [c, H] = u(L), Y = M(
-    () => c.reduce(
+  ), [u, Y] = m(V), q = E(
+    () => u.reduce(
       (t, e) => {
-        const o = a.find((y) => y.uuid === e.contractorUuid), r = o?.wageType === "Hourly", n = r ? (e.hours || 0) * Number(o.hourlyRate || 0) : 0, i = r ? 0 : e.wage || 0;
+        const o = a.find((F) => F.uuid === e.contractorUuid), r = o?.wageType === "Hourly", n = Number(e.hours || "0"), c = Number(e.wage || "0"), i = Number(e.bonus || "0"), M = Number(e.reimbursement || "0"), x = r ? n * Number(o.hourlyRate || "0") : 0, R = r ? 0 : c;
         return {
-          wage: t.wage + i,
-          bonus: t.bonus + (e.bonus || 0),
-          reimbursement: t.reimbursement + (e.reimbursement || 0),
-          total: t.total + n + i + (e.bonus || 0) + (e.reimbursement || 0)
+          wage: t.wage + R,
+          bonus: t.bonus + i,
+          reimbursement: t.reimbursement + M,
+          total: t.total + x + R + i + M
         };
       },
       { wage: 0, bonus: 0, reimbursement: 0, total: 0 }
     ),
-    [c, a]
-  ), R = j({
-    resolver: W(Q),
+    [u, a]
+  ), A = Q({
+    resolver: X(et),
     defaultValues: {
       wageType: "Hourly",
       hours: 0,
@@ -69,60 +70,62 @@ const nt = ({ companyId: s, dictionary: E, onEvent: m }) => {
       contractorUuid: ""
     }
   });
-  return /* @__PURE__ */ q(x, { children: [
-    p && /* @__PURE__ */ P(
-      Z,
+  return /* @__PURE__ */ I(j, { children: [
+    y && /* @__PURE__ */ P(
+      rt,
       {
-        contractorPaymentGroup: p,
+        contractorPaymentGroup: y,
         contractors: a,
         onBackToEdit: () => {
-          g(null), A({}), m(d.CONTRACTOR_PAYMENT_BACK_TO_EDIT);
+          g(null), N({}), l(d.CONTRACTOR_PAYMENT_BACK_TO_EDIT);
         },
         onSubmit: async () => {
           await h(null, async () => {
-            const t = c.filter((i) => i.isTouched);
-            if (t.length === 0 || !p?.creationToken)
+            const t = u.filter((c) => c.isTouched);
+            if (t.length === 0 || !y?.creationToken)
               return;
-            const e = p.creationToken, o = Object.entries(w).map(([i, y]) => ({
-              blockerType: i,
-              selectedOption: y
-            })), r = {
-              checkDate: new N(b),
-              contractorPayments: t,
+            const e = y.creationToken, o = Object.entries(w).map(
+              ([c, i]) => ({
+                blockerType: c,
+                selectedOption: i
+              })
+            ), r = {
+              checkDate: new k(b),
+              contractorPayments: t.map(({ isTouched: c, ...i }) => i),
               creationToken: e,
               ...o.length > 0 && { submissionBlockers: o }
-            }, n = await _({
+            }, n = await G({
               request: {
                 companyId: s,
                 requestBody: r
               }
             });
-            m(d.CONTRACTOR_PAYMENT_CREATED, n.contractorPaymentGroup || {});
+            l(d.CONTRACTOR_PAYMENT_CREATED, n.contractorPaymentGroup || {});
           });
         },
         isLoading: D || O,
-        bankAccount: B,
+        bankAccount: H,
         selectedUnblockOptions: w,
         onUnblockOptionChange: (t, e) => {
-          A((o) => ({
+          N((o) => ({
             ...o,
             [t]: e
           }));
         }
       }
     ),
-    !p && /* @__PURE__ */ P(
-      J,
+    !y && /* @__PURE__ */ P(
+      tt,
       {
         contractors: a,
-        contractorPayments: c,
+        contractorPayments: u,
         paymentDate: b,
-        onPaymentDateChange: U,
+        onPaymentDateChange: _,
         onSaveAndContinue: async () => {
           await h(null, async () => {
-            const t = c.filter((o) => o.isTouched);
+            const t = u.filter((o) => o.isTouched);
             if (t.length === 0) {
-              l({
+              p({
                 ...T,
                 error: {
                   type: "error",
@@ -131,90 +134,90 @@ const nt = ({ companyId: s, dictionary: E, onEvent: m }) => {
               });
               return;
             }
-            l({});
-            const e = await G({
+            p({});
+            const e = await v({
               request: {
                 companyId: s,
                 requestBody: {
-                  contractorPayments: t.map((o) => {
-                    const { isTouched: r, ...n } = o;
-                    return n;
-                  }),
-                  checkDate: new N(b)
+                  contractorPayments: t.map(({ isTouched: o, ...r }) => r),
+                  checkDate: new k(b)
                 }
               }
             });
-            g(e.contractorPaymentGroupPreview || null), m(d.CONTRACTOR_PAYMENT_PREVIEW, e.contractorPaymentGroupPreview);
+            g(e.contractorPaymentGroupPreview || null), l(d.CONTRACTOR_PAYMENT_PREVIEW, e.contractorPaymentGroupPreview);
           });
         },
         onEditContractor: (t) => {
-          const e = a.find((r) => r.uuid === t), o = c.find(
+          const e = a.find((r) => r.uuid === t), o = u.find(
             (r) => r.contractorUuid === t
           );
-          R.reset(
+          A.reset(
             {
               wageType: e?.wageType || "Hourly",
-              hours: o?.hours || 0,
-              wage: o?.wage || 0,
-              bonus: o?.bonus || 0,
-              reimbursement: o?.reimbursement || 0,
+              hours: Number(o?.hours || "0"),
+              wage: Number(o?.wage || "0"),
+              bonus: Number(o?.bonus || "0"),
+              reimbursement: Number(o?.reimbursement || "0"),
               paymentMethod: o?.paymentMethod || "Direct Deposit",
-              hourlyRate: e?.hourlyRate ? Number(e.hourlyRate) : 0,
+              hourlyRate: Number(e?.hourlyRate || "0"),
               contractorUuid: t
             },
             { keepDirty: !1, keepValues: !1 }
-          ), l({}), C(!0), m(d.CONTRACTOR_PAYMENT_EDIT);
+          ), p({}), C(!0), l(d.CONTRACTOR_PAYMENT_EDIT);
         },
-        totals: Y,
+        totals: q,
         alerts: T,
         isLoading: D || O
       }
     ),
     /* @__PURE__ */ P(
-      X,
+      ot,
       {
-        isOpen: k,
+        isOpen: U,
         onClose: () => {
           C(!1);
         },
-        formMethods: R,
+        formMethods: A,
         onSubmit: (t) => {
-          H(
+          Y(
             (r) => r.map(
               (n) => n.contractorUuid === t.contractorUuid ? {
                 contractorUuid: n.contractorUuid,
-                wage: t.wage,
-                hours: t.hours,
-                bonus: t.bonus,
-                reimbursement: t.reimbursement,
+                wage: String(t.wage ?? 0),
+                hours: String(t.hours ?? 0),
+                bonus: String(t.bonus ?? 0),
+                reimbursement: String(t.reimbursement ?? 0),
                 paymentMethod: t.paymentMethod,
                 isTouched: !0
               } : n
             )
           );
-          const e = a.find((r) => r.uuid === t.contractorUuid), o = e?.type === "Individual" ? rt({ first_name: e.firstName, last_name: e.lastName }) : e?.businessName;
-          l((r) => ({
+          const e = a.find((r) => r.uuid === t.contractorUuid), o = J.sanitize(
+            e?.type === "Individual" ? ct({ first_name: e.firstName, last_name: e.lastName }) : e?.businessName || ""
+          );
+          p((r) => ({
             ...r,
             [t.contractorUuid]: {
               type: "success",
               title: f("alerts.contractorPaymentUpdated", {
-                contractorName: o
+                contractorName: o,
+                interpolation: { escapeValue: !1 }
               }),
               onDismiss: () => {
-                l((n) => {
-                  const { [t.contractorUuid]: i, ...y } = n;
-                  return y;
+                p((n) => {
+                  const { [t.contractorUuid]: c, ...i } = n;
+                  return i;
                 });
               }
             }
-          })), C(!1), m(d.CONTRACTOR_PAYMENT_UPDATE, t);
+          })), C(!1), l(d.CONTRACTOR_PAYMENT_UPDATE, t);
         }
       }
     )
   ] });
 };
 export {
-  Et as CreatePayment,
-  nt as Root
+  vt as CreatePayment,
+  ut as Root
 };
 //# sourceMappingURL=CreatePayment.js.map

package/dist/components/Contractor/Payments/CreatePayment/CreatePayment.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreatePayment.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/CreatePayment.tsx"],"sourcesContent":["import { useContractorsListSuspense } from '@gusto/embedded-api/react-query/contractorsList'\nimport { useContractorPaymentGroupsCreateMutation } from '@gusto/embedded-api/react-query/contractorPaymentGroupsCreate'\nimport type {\n  ContractorPayments,\n  PostV1CompaniesCompanyIdContractorPaymentGroupsRequestBody,\n  PostV1CompaniesCompanyIdContractorPaymentGroupsSubmissionBlockers,\n} from '@gusto/embedded-api/models/operations/postv1companiescompanyidcontractorpaymentgroups'\nimport { useContractorPaymentGroupsPreviewMutation } from '@gusto/embedded-api/react-query/contractorPaymentGroupsPreview'\nimport { useMemo, useState } from 'react'\nimport { RFCDate } from '@gusto/embedded-api/types/rfcdate'\nimport { useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupPreview } from '@gusto/embedded-api/models/components/contractorpaymentgrouppreview'\nimport { useBankAccountsGet } from '@gusto/embedded-api/react-query/bankAccountsGet'\nimport type { InternalAlert } from '../types'\nimport { CreatePaymentPresentation } from './CreatePaymentPresentation'\nimport {\n  EditContractorPaymentPresentation,\n  EditContractorPaymentFormSchema,\n  type EditContractorPaymentFormValues,\n} from './EditContractorPaymentPresentation'\nimport { PreviewPresentation } from './PreviewPresentation'\nimport { useComponentDictionary } from '@/i18n'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport { componentEvents, ContractorOnboardingStatus } from '@/shared/constants'\nimport { firstLastName } from '@/helpers/formattedStrings'\n\ninterface CreatePaymentProps extends BaseComponentInterface<'Contractor.Payments.CreatePayment'> {\n  companyId: string\n}\n\nexport function CreatePayment(props: CreatePaymentProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({ companyId, dictionary, onEvent }: CreatePaymentProps) => {\n  useComponentDictionary('Contractor.Payments.CreatePayment', dictionary)\n  const { t } = useTranslation('Contractor.Payments.CreatePayment')\n  const [isModalOpen, setIsModalOpen] = useState(false)\n  const [paymentDate, setPaymentDate] = useState<string>(\n    new Date().toISOString().split('T')[0] || '',\n  )\n  const { baseSubmitHandler } = useBase()\n  const [alerts, setAlerts] = useState<Record<string, InternalAlert>>({})\n  const [previewData, setPreviewData] = useState<ContractorPaymentGroupPreview | null>(null)\n  const [selectedUnblockOptions, setSelectedUnblockOptions] = useState<Record<string, string>>({})\n\n  const { mutateAsync: createContractorPaymentGroup, isPending: isCreatingContractorPaymentGroup } =\n    useContractorPaymentGroupsCreateMutation()\n  const {\n    mutateAsync: previewContractorPaymentGroup,\n    isPending: isPreviewingContractorPaymentGroup,\n  } = useContractorPaymentGroupsPreviewMutation()\n\n  const { data: contractorList } = useContractorsListSuspense({ companyUuid: companyId })\n  const contractors = (contractorList.contractorList || []).filter(\n    contractor =>\n      contractor.isActive &&\n      contractor.onboardingStatus === ContractorOnboardingStatus.ONBOARDING_COMPLETED,\n  )\n  const { data: bankAccounts } = useBankAccountsGet({ companyId })\n  // Currently, we only support a single default bank account per company.\n  const bankAccount = bankAccounts?.companyBankAccounts?.[0]\n\n  const initialContractorPayments: (ContractorPayments & { isTouched: boolean })[] = useMemo(\n    () =>\n      contractors.map(contractor => {\n        const paymentMethod = contractor.paymentMethod ? contractor.paymentMethod : 'Direct Deposit'\n\n        return {\n          contractorUuid: contractor.uuid,\n          paymentMethod,\n          wage: 0,\n          hours: 0,\n          bonus: 0,\n          reimbursement: 0,\n          isTouched: false,\n        }\n      }),\n    [contractors],\n  )\n  const [virtualContractorPayments, setVirtualContractorPayments] =\n    useState<(ContractorPayments & { isTouched: boolean })[]>(initialContractorPayments)\n  const totals = useMemo(\n    () =>\n      virtualContractorPayments.reduce<{\n        wage: number\n        bonus: number\n        reimbursement: number\n        total: number\n      }>(\n        (acc, payment) => {\n          const contractor = contractors.find(c => c.uuid === payment.contractorUuid)\n          const isHourly = contractor?.wageType === 'Hourly'\n          const hourlyAmount = isHourly\n            ? (payment.hours || 0) * Number(contractor.hourlyRate || 0)\n            : 0\n          const fixedWage = isHourly ? 0 : payment.wage || 0\n\n          return {\n            wage: acc.wage + fixedWage,\n            bonus: acc.bonus + (payment.bonus || 0),\n            reimbursement: acc.reimbursement + (payment.reimbursement || 0),\n            total:\n              acc.total +\n              hourlyAmount +\n              fixedWage +\n              (payment.bonus || 0) +\n              (payment.reimbursement || 0),\n          }\n        },\n        { wage: 0, bonus: 0, reimbursement: 0, total: 0 },\n      ),\n    [virtualContractorPayments, contractors],\n  )\n\n  const formMethods = useForm<EditContractorPaymentFormValues>({\n    resolver: zodResolver(EditContractorPaymentFormSchema),\n    defaultValues: {\n      wageType: 'Hourly',\n      hours: 0,\n      wage: 0,\n      bonus: 0,\n      reimbursement: 0,\n      paymentMethod: 'Direct Deposit',\n      hourlyRate: 0,\n      contractorUuid: '',\n    },\n  })\n\n  const onCreatePaymentGroup = async () => {\n    await baseSubmitHandler(null, async () => {\n      const contractorPayments = virtualContractorPayments.filter(payment => payment.isTouched)\n      if (contractorPayments.length === 0 || !previewData?.creationToken) {\n        return\n      }\n      const creationToken = previewData.creationToken\n\n      const submissionBlockers: PostV1CompaniesCompanyIdContractorPaymentGroupsSubmissionBlockers[] =\n        Object.entries(selectedUnblockOptions).map(([blockerType, selectedOption]) => ({\n          blockerType,\n          selectedOption,\n        }))\n\n      const requestBody: PostV1CompaniesCompanyIdContractorPaymentGroupsRequestBody = {\n        checkDate: new RFCDate(paymentDate),\n        contractorPayments: contractorPayments,\n        creationToken,\n        ...(submissionBlockers.length > 0 && { submissionBlockers }),\n      }\n\n      const response = await createContractorPaymentGroup({\n        request: {\n          companyId,\n          requestBody,\n        },\n      })\n\n      onEvent(componentEvents.CONTRACTOR_PAYMENT_CREATED, response.contractorPaymentGroup || {})\n    })\n  }\n\n  const onUnblockOptionChange = (blockerType: string, value: string) => {\n    setSelectedUnblockOptions(prev => ({\n      ...prev,\n      [blockerType]: value,\n    }))\n  }\n  const onEditContractor = (contractorUuid: string) => {\n    const contractor = contractors.find(contractor => contractor.uuid === contractorUuid)\n    const contractorPayment = virtualContractorPayments.find(\n      payment => payment.contractorUuid === contractorUuid,\n    )\n    formMethods.reset(\n      {\n        wageType: contractor?.wageType || 'Hourly',\n        hours: contractorPayment?.hours || 0,\n        wage: contractorPayment?.wage || 0,\n        bonus: contractorPayment?.bonus || 0,\n        reimbursement: contractorPayment?.reimbursement || 0,\n        paymentMethod: contractorPayment?.paymentMethod || 'Direct Deposit',\n        hourlyRate: contractor?.hourlyRate ? Number(contractor.hourlyRate) : 0,\n        contractorUuid: contractorUuid,\n      },\n      { keepDirty: false, keepValues: false },\n    )\n    setAlerts({})\n    setIsModalOpen(true)\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_EDIT)\n  }\n\n  const onEditContractorSubmit = (data: EditContractorPaymentFormValues) => {\n    setVirtualContractorPayments(prevPayments =>\n      prevPayments.map(payment =>\n        payment.contractorUuid === data.contractorUuid\n          ? {\n              contractorUuid: payment.contractorUuid,\n              wage: data.wage,\n              hours: data.hours,\n              bonus: data.bonus,\n              reimbursement: data.reimbursement,\n              paymentMethod: data.paymentMethod,\n              isTouched: true,\n            }\n          : payment,\n      ),\n    )\n    const contractor = contractors.find(contractor => contractor.uuid === data.contractorUuid)\n    const displayName =\n      contractor?.type === 'Individual'\n        ? firstLastName({ first_name: contractor.firstName, last_name: contractor.lastName })\n        : contractor?.businessName\n    setAlerts(prevAlerts => ({\n      ...prevAlerts,\n      [data.contractorUuid]: {\n        type: 'success',\n        title: t('alerts.contractorPaymentUpdated', {\n          contractorName: displayName,\n        }),\n        onDismiss: () => {\n          setAlerts(prevAlerts => {\n            const { [data.contractorUuid]: _, ...rest } = prevAlerts\n            return rest\n          })\n        },\n      },\n    }))\n    setIsModalOpen(false)\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_UPDATE, data)\n  }\n\n  const onContinueToPreview = async () => {\n    await baseSubmitHandler(null, async () => {\n      const contractorPayments = virtualContractorPayments.filter(payment => payment.isTouched)\n      if (contractorPayments.length === 0) {\n        setAlerts({\n          ...alerts,\n          error: {\n            type: 'error',\n            title: t('alerts.noContractorPayments'),\n          },\n        })\n        return\n      }\n      setAlerts({})\n      const response = await previewContractorPaymentGroup({\n        request: {\n          companyId,\n          requestBody: {\n            contractorPayments: contractorPayments.map(payment => {\n              const { isTouched, ...rest } = payment\n              return rest\n            }),\n            checkDate: new RFCDate(paymentDate),\n          },\n        },\n      })\n\n      setPreviewData(response.contractorPaymentGroupPreview || null)\n      onEvent(componentEvents.CONTRACTOR_PAYMENT_PREVIEW, response.contractorPaymentGroupPreview)\n    })\n  }\n  const onBackToEdit = () => {\n    setPreviewData(null)\n    setSelectedUnblockOptions({})\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_BACK_TO_EDIT)\n  }\n\n  return (\n    <>\n      {previewData && (\n        <PreviewPresentation\n          contractorPaymentGroup={previewData}\n          contractors={contractors}\n          onBackToEdit={onBackToEdit}\n          onSubmit={onCreatePaymentGroup}\n          isLoading={isCreatingContractorPaymentGroup || isPreviewingContractorPaymentGroup}\n          bankAccount={bankAccount}\n          selectedUnblockOptions={selectedUnblockOptions}\n          onUnblockOptionChange={onUnblockOptionChange}\n        />\n      )}\n      {!previewData && (\n        <CreatePaymentPresentation\n          contractors={contractors}\n          contractorPayments={virtualContractorPayments}\n          paymentDate={paymentDate}\n          onPaymentDateChange={setPaymentDate}\n          onSaveAndContinue={onContinueToPreview}\n          onEditContractor={onEditContractor}\n          totals={totals}\n          alerts={alerts}\n          isLoading={isCreatingContractorPaymentGroup || isPreviewingContractorPaymentGroup}\n        />\n      )}\n      <EditContractorPaymentPresentation\n        isOpen={isModalOpen}\n        onClose={() => {\n          setIsModalOpen(false)\n        }}\n        formMethods={formMethods}\n        onSubmit={onEditContractorSubmit}\n      />\n    </>\n  )\n}\n"],"names":["CreatePayment","props","jsx","BaseComponent","Root","companyId","dictionary","onEvent","useComponentDictionary","t","useTranslation","isModalOpen","setIsModalOpen","useState","paymentDate","setPaymentDate","baseSubmitHandler","useBase","alerts","setAlerts","previewData","setPreviewData","selectedUnblockOptions","setSelectedUnblockOptions","createContractorPaymentGroup","isCreatingContractorPaymentGroup","useContractorPaymentGroupsCreateMutation","previewContractorPaymentGroup","isPreviewingContractorPaymentGroup","useContractorPaymentGroupsPreviewMutation","contractorList","useContractorsListSuspense","contractors","contractor","ContractorOnboardingStatus","bankAccounts","useBankAccountsGet","bankAccount","initialContractorPayments","useMemo","paymentMethod","virtualContractorPayments","setVirtualContractorPayments","totals","acc","payment","c","isHourly","hourlyAmount","fixedWage","formMethods","useForm","zodResolver","EditContractorPaymentFormSchema","jsxs","Fragment","PreviewPresentation","componentEvents","contractorPayments","creationToken","submissionBlockers","blockerType","selectedOption","requestBody","RFCDate","response","value","prev","CreatePaymentPresentation","isTouched","rest","contractorUuid","contractorPayment","EditContractorPaymentPresentation","data","prevPayments","displayName","firstLastName","prevAlerts","_"],"mappings":"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"}
+{"version":3,"file":"CreatePayment.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/CreatePayment.tsx"],"sourcesContent":["import { useContractorsListSuspense } from '@gusto/embedded-api/react-query/contractorsList'\nimport { useContractorPaymentGroupsCreateMutation } from '@gusto/embedded-api/react-query/contractorPaymentGroupsCreate'\nimport type {\n  ContractorPayments,\n  PostV1CompaniesCompanyIdContractorPaymentGroupsRequestBody,\n  SubmissionBlockers,\n} from '@gusto/embedded-api/models/operations/postv1companiescompanyidcontractorpaymentgroups'\nimport { useContractorPaymentGroupsPreviewMutation } from '@gusto/embedded-api/react-query/contractorPaymentGroupsPreview'\nimport { useMemo, useState } from 'react'\nimport DOMPurify from 'dompurify'\nimport { RFCDate } from '@gusto/embedded-api/types/rfcdate'\nimport { useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupPreview } from '@gusto/embedded-api/models/components/contractorpaymentgrouppreview'\nimport { useBankAccountsGet } from '@gusto/embedded-api/react-query/bankAccountsGet'\nimport type { InternalAlert } from '../types'\nimport { CreatePaymentPresentation } from './CreatePaymentPresentation'\nimport {\n  EditContractorPaymentPresentation,\n  EditContractorPaymentFormSchema,\n  type EditContractorPaymentFormValues,\n} from './EditContractorPaymentPresentation'\nimport { PreviewPresentation } from './PreviewPresentation'\nimport { useComponentDictionary } from '@/i18n'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport { componentEvents, ContractorOnboardingStatus } from '@/shared/constants'\nimport { firstLastName } from '@/helpers/formattedStrings'\n\ninterface CreatePaymentProps extends BaseComponentInterface<'Contractor.Payments.CreatePayment'> {\n  companyId: string\n}\n\nexport function CreatePayment(props: CreatePaymentProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({ companyId, dictionary, onEvent }: CreatePaymentProps) => {\n  useComponentDictionary('Contractor.Payments.CreatePayment', dictionary)\n  const { t } = useTranslation('Contractor.Payments.CreatePayment')\n  const [isModalOpen, setIsModalOpen] = useState(false)\n  const [paymentDate, setPaymentDate] = useState<string>(\n    new Date().toISOString().split('T')[0] || '',\n  )\n  const { baseSubmitHandler } = useBase()\n  const [alerts, setAlerts] = useState<Record<string, InternalAlert>>({})\n  const [previewData, setPreviewData] = useState<ContractorPaymentGroupPreview | null>(null)\n  const [selectedUnblockOptions, setSelectedUnblockOptions] = useState<Record<string, string>>({})\n\n  const { mutateAsync: createContractorPaymentGroup, isPending: isCreatingContractorPaymentGroup } =\n    useContractorPaymentGroupsCreateMutation()\n  const {\n    mutateAsync: previewContractorPaymentGroup,\n    isPending: isPreviewingContractorPaymentGroup,\n  } = useContractorPaymentGroupsPreviewMutation()\n\n  const { data: contractorList } = useContractorsListSuspense({ companyUuid: companyId })\n  const contractors = (contractorList.contractorList || []).filter(\n    contractor =>\n      contractor.isActive &&\n      contractor.onboardingStatus === ContractorOnboardingStatus.ONBOARDING_COMPLETED,\n  )\n  const { data: bankAccounts } = useBankAccountsGet({ companyId })\n  // Currently, we only support a single default bank account per company.\n  const bankAccount = bankAccounts?.companyBankAccounts?.[0]\n\n  const initialContractorPayments: (ContractorPayments & { isTouched: boolean })[] = useMemo(\n    () =>\n      contractors.map(contractor => {\n        const paymentMethod = contractor.paymentMethod ? contractor.paymentMethod : 'Direct Deposit'\n\n        return {\n          contractorUuid: contractor.uuid,\n          paymentMethod,\n          wage: '0',\n          hours: '0',\n          bonus: '0',\n          reimbursement: '0',\n          isTouched: false,\n        }\n      }),\n    [contractors],\n  )\n  const [virtualContractorPayments, setVirtualContractorPayments] =\n    useState<(ContractorPayments & { isTouched: boolean })[]>(initialContractorPayments)\n  const totals = useMemo(\n    () =>\n      virtualContractorPayments.reduce<{\n        wage: number\n        bonus: number\n        reimbursement: number\n        total: number\n      }>(\n        (acc, payment) => {\n          const contractor = contractors.find(c => c.uuid === payment.contractorUuid)\n          const isHourly = contractor?.wageType === 'Hourly'\n          const hours = Number(payment.hours || '0')\n          const wage = Number(payment.wage || '0')\n          const bonus = Number(payment.bonus || '0')\n          const reimbursement = Number(payment.reimbursement || '0')\n          const hourlyAmount = isHourly ? hours * Number(contractor.hourlyRate || '0') : 0\n          const fixedWage = isHourly ? 0 : wage\n\n          return {\n            wage: acc.wage + fixedWage,\n            bonus: acc.bonus + bonus,\n            reimbursement: acc.reimbursement + reimbursement,\n            total: acc.total + hourlyAmount + fixedWage + bonus + reimbursement,\n          }\n        },\n        { wage: 0, bonus: 0, reimbursement: 0, total: 0 },\n      ),\n    [virtualContractorPayments, contractors],\n  )\n\n  const formMethods = useForm<EditContractorPaymentFormValues>({\n    resolver: zodResolver(EditContractorPaymentFormSchema),\n    defaultValues: {\n      wageType: 'Hourly',\n      hours: 0,\n      wage: 0,\n      bonus: 0,\n      reimbursement: 0,\n      paymentMethod: 'Direct Deposit',\n      hourlyRate: 0,\n      contractorUuid: '',\n    },\n  })\n\n  const onCreatePaymentGroup = async () => {\n    await baseSubmitHandler(null, async () => {\n      const contractorPayments = virtualContractorPayments.filter(payment => payment.isTouched)\n      if (contractorPayments.length === 0 || !previewData?.creationToken) {\n        return\n      }\n      const creationToken = previewData.creationToken\n\n      const submissionBlockers: SubmissionBlockers[] = Object.entries(selectedUnblockOptions).map(\n        ([blockerType, selectedOption]) => ({\n          blockerType,\n          selectedOption,\n        }),\n      )\n\n      const requestBody: PostV1CompaniesCompanyIdContractorPaymentGroupsRequestBody = {\n        checkDate: new RFCDate(paymentDate),\n        contractorPayments: contractorPayments.map(({ isTouched, ...rest }) => rest),\n        creationToken,\n        ...(submissionBlockers.length > 0 && { submissionBlockers }),\n      }\n\n      const response = await createContractorPaymentGroup({\n        request: {\n          companyId,\n          requestBody,\n        },\n      })\n\n      onEvent(componentEvents.CONTRACTOR_PAYMENT_CREATED, response.contractorPaymentGroup || {})\n    })\n  }\n\n  const onUnblockOptionChange = (blockerType: string, value: string) => {\n    setSelectedUnblockOptions(prev => ({\n      ...prev,\n      [blockerType]: value,\n    }))\n  }\n  const onEditContractor = (contractorUuid: string) => {\n    const contractor = contractors.find(contractor => contractor.uuid === contractorUuid)\n    const contractorPayment = virtualContractorPayments.find(\n      payment => payment.contractorUuid === contractorUuid,\n    )\n    formMethods.reset(\n      {\n        wageType: contractor?.wageType || 'Hourly',\n        hours: Number(contractorPayment?.hours || '0'),\n        wage: Number(contractorPayment?.wage || '0'),\n        bonus: Number(contractorPayment?.bonus || '0'),\n        reimbursement: Number(contractorPayment?.reimbursement || '0'),\n        paymentMethod: contractorPayment?.paymentMethod || 'Direct Deposit',\n        hourlyRate: Number(contractor?.hourlyRate || '0'),\n        contractorUuid: contractorUuid,\n      },\n      { keepDirty: false, keepValues: false },\n    )\n    setAlerts({})\n    setIsModalOpen(true)\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_EDIT)\n  }\n\n  const onEditContractorSubmit = (data: EditContractorPaymentFormValues) => {\n    setVirtualContractorPayments(prevPayments =>\n      prevPayments.map(payment =>\n        payment.contractorUuid === data.contractorUuid\n          ? {\n              contractorUuid: payment.contractorUuid,\n              wage: String(data.wage ?? 0),\n              hours: String(data.hours ?? 0),\n              bonus: String(data.bonus ?? 0),\n              reimbursement: String(data.reimbursement ?? 0),\n              paymentMethod: data.paymentMethod,\n              isTouched: true,\n            }\n          : payment,\n      ),\n    )\n    const contractor = contractors.find(contractor => contractor.uuid === data.contractorUuid)\n    const displayName = DOMPurify.sanitize(\n      contractor?.type === 'Individual'\n        ? firstLastName({ first_name: contractor.firstName, last_name: contractor.lastName })\n        : contractor?.businessName || '',\n    )\n    setAlerts(prevAlerts => ({\n      ...prevAlerts,\n      [data.contractorUuid]: {\n        type: 'success',\n        title: t('alerts.contractorPaymentUpdated', {\n          contractorName: displayName,\n          interpolation: { escapeValue: false },\n        }),\n        onDismiss: () => {\n          setAlerts(prevAlerts => {\n            const { [data.contractorUuid]: _, ...rest } = prevAlerts\n            return rest\n          })\n        },\n      },\n    }))\n    setIsModalOpen(false)\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_UPDATE, data)\n  }\n\n  const onContinueToPreview = async () => {\n    await baseSubmitHandler(null, async () => {\n      const contractorPayments = virtualContractorPayments.filter(payment => payment.isTouched)\n      if (contractorPayments.length === 0) {\n        setAlerts({\n          ...alerts,\n          error: {\n            type: 'error',\n            title: t('alerts.noContractorPayments'),\n          },\n        })\n        return\n      }\n      setAlerts({})\n      const response = await previewContractorPaymentGroup({\n        request: {\n          companyId,\n          requestBody: {\n            contractorPayments: contractorPayments.map(({ isTouched, ...rest }) => rest),\n            checkDate: new RFCDate(paymentDate),\n          },\n        },\n      })\n\n      setPreviewData(response.contractorPaymentGroupPreview || null)\n      onEvent(componentEvents.CONTRACTOR_PAYMENT_PREVIEW, response.contractorPaymentGroupPreview)\n    })\n  }\n  const onBackToEdit = () => {\n    setPreviewData(null)\n    setSelectedUnblockOptions({})\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_BACK_TO_EDIT)\n  }\n\n  return (\n    <>\n      {previewData && (\n        <PreviewPresentation\n          contractorPaymentGroup={previewData}\n          contractors={contractors}\n          onBackToEdit={onBackToEdit}\n          onSubmit={onCreatePaymentGroup}\n          isLoading={isCreatingContractorPaymentGroup || isPreviewingContractorPaymentGroup}\n          bankAccount={bankAccount}\n          selectedUnblockOptions={selectedUnblockOptions}\n          onUnblockOptionChange={onUnblockOptionChange}\n        />\n      )}\n      {!previewData && (\n        <CreatePaymentPresentation\n          contractors={contractors}\n          contractorPayments={virtualContractorPayments}\n          paymentDate={paymentDate}\n          onPaymentDateChange={setPaymentDate}\n          onSaveAndContinue={onContinueToPreview}\n          onEditContractor={onEditContractor}\n          totals={totals}\n          alerts={alerts}\n          isLoading={isCreatingContractorPaymentGroup || isPreviewingContractorPaymentGroup}\n        />\n      )}\n      <EditContractorPaymentPresentation\n        isOpen={isModalOpen}\n        onClose={() => {\n          setIsModalOpen(false)\n        }}\n        formMethods={formMethods}\n        onSubmit={onEditContractorSubmit}\n      />\n    </>\n  )\n}\n"],"names":["CreatePayment","props","jsx","BaseComponent","Root","companyId","dictionary","onEvent","useComponentDictionary","t","useTranslation","isModalOpen","setIsModalOpen","useState","paymentDate","setPaymentDate","baseSubmitHandler","useBase","alerts","setAlerts","previewData","setPreviewData","selectedUnblockOptions","setSelectedUnblockOptions","createContractorPaymentGroup","isCreatingContractorPaymentGroup","useContractorPaymentGroupsCreateMutation","previewContractorPaymentGroup","isPreviewingContractorPaymentGroup","useContractorPaymentGroupsPreviewMutation","contractorList","useContractorsListSuspense","contractors","contractor","ContractorOnboardingStatus","bankAccounts","useBankAccountsGet","bankAccount","initialContractorPayments","useMemo","paymentMethod","virtualContractorPayments","setVirtualContractorPayments","totals","acc","payment","c","isHourly","hours","wage","bonus","reimbursement","hourlyAmount","fixedWage","formMethods","useForm","zodResolver","EditContractorPaymentFormSchema","jsxs","Fragment","PreviewPresentation","componentEvents","contractorPayments","creationToken","submissionBlockers","blockerType","selectedOption","requestBody","RFCDate","isTouched","rest","response","value","prev","CreatePaymentPresentation","contractorUuid","contractorPayment","EditContractorPaymentPresentation","data","prevPayments","displayName","DOMPurify","firstLastName","prevAlerts","_"],"mappings":"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"}

package/dist/components/Contractor/Payments/CreatePayment/CreatePaymentPresentation.d.ts

@@ -3,7 +3,9 @@ import { ContractorPayments } from '@gusto/embedded-api/models/operations/postv1
 import { InternalAlert } from '../types';
 interface ContractorPaymentCreatePaymentPresentationProps {
     contractors: Contractor[];
-    contractorPayments: ContractorPayments[];
+    contractorPayments: (ContractorPayments & {
+        isTouched?: boolean;
+    })[];
     paymentDate: string;
     onPaymentDateChange: (date: string) => void;
     onSaveAndContinue: () => void;

package/dist/components/Contractor/Payments/CreatePayment/CreatePaymentPresentation.js

@@ -1,21 +1,22 @@
 import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { useTranslation as R } from "react-i18next";
-import { useMemo as A } from "react";
-import { getContractorDisplayName as F } from "./helpers.js";
-import { Flex as a, FlexItem as M } from "../../../Common/Flex/Flex.js";
+import { useTranslation as L } from "react-i18next";
+import { useMemo as R } from "react";
+import { getContractorDisplayName as A } from "./helpers.js";
+import { Flex as i, FlexItem as F } from "../../../Common/Flex/Flex.js";
 import "classnames";
-import { EmptyData as N } from "../../../Common/EmptyData/EmptyData.js";
+import "../../../../shared/constants.js";
+import { EmptyData as M } from "../../../Common/EmptyData/EmptyData.js";
 import { HamburgerMenu as j } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
 import { useComponentContext as v } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as I } from "../../../../i18n/I18n.js";
 import { formatHoursDisplay as S } from "../../../Payroll/helpers.js";
 import O from "../../../../hooks/useNumberFormatter.js";
 import { DataView as U } from "../../../Common/DataView/DataView.js";
-const $ = "0.000", Q = ({
+const $ = "0.000", X = ({
   contractors: m,
-  paymentDate: h,
+  paymentDate: b,
   contractorPayments: u,
-  onPaymentDateChange: b,
+  onPaymentDateChange: h,
   onSaveAndContinue: y,
   onEditContractor: g,
   totals: l,
@@ -24,22 +25,22 @@ const $ = "0.000", Q = ({
 }) => {
   const { Button: H, Text: n, Heading: s, TextInput: C, Alert: x } = v();
   I("Contractor.Payments.CreatePayment");
-  const { t } = R("Contractor.Payments.CreatePayment"), o = O("currency"), w = (e) => e ? e.wageType === "Hourly" && e.hourlyRate ? `${t("wageTypes.hourly")} ${o(Number(e.hourlyRate))}${t("perHour")}` : e.wageType : "", D = A(
+  const { t } = L("Contractor.Payments.CreatePayment"), o = O("currency"), D = (e) => e ? e.wageType === "Hourly" && e.hourlyRate ? `${t("wageTypes.hourly")} ${o(Number(e.hourlyRate || "0"))}${t("perHour")}` : e.wageType : "", w = R(
     () => u.map((e) => ({
       ...e,
       contractorDetails: m.find(
-        (i) => i.uuid === e.contractorUuid
+        (a) => a.uuid === e.contractorUuid
       )
     })),
     [u, m]
   );
-  return /* @__PURE__ */ c(a, { flexDirection: "column", gap: 32, children: [
-    /* @__PURE__ */ c(a, { justifyContent: "flex-end", gap: 16, children: [
-      /* @__PURE__ */ c(a, { flexDirection: "column", gap: 16, children: [
+  return /* @__PURE__ */ c(i, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ c(i, { justifyContent: "flex-end", gap: 16, children: [
+      /* @__PURE__ */ c(i, { flexDirection: "column", gap: 16, children: [
         /* @__PURE__ */ r(s, { as: "h2", children: t("title") }),
         /* @__PURE__ */ r(n, { variant: "supporting", children: t("paymentSpeedNotice") })
       ] }),
-      /* @__PURE__ */ r(M, { children: /* @__PURE__ */ r(H, { onClick: y, variant: "primary", isLoading: T, children: t("continueCta") }) })
+      /* @__PURE__ */ r(F, { children: /* @__PURE__ */ r(H, { onClick: y, variant: "primary", isLoading: T, children: t("continueCta") }) })
     ] }),
     Object.values(f).map((e) => /* @__PURE__ */ r(
       x,
@@ -51,17 +52,17 @@ const $ = "0.000", Q = ({
       },
       e.title
     )),
-    /* @__PURE__ */ r(a, { flexDirection: "column", gap: 8, children: /* @__PURE__ */ r(
+    /* @__PURE__ */ r(i, { flexDirection: "column", gap: 8, children: /* @__PURE__ */ r(
       C,
       {
         type: "date",
-        value: h,
-        onChange: b,
+        value: b,
+        onChange: h,
         label: t("dateLabel"),
         isRequired: !0
       }
     ) }),
-    /* @__PURE__ */ c(a, { flexDirection: "column", gap: 16, children: [
+    /* @__PURE__ */ c(i, { flexDirection: "column", gap: 16, children: [
       /* @__PURE__ */ r(s, { as: "h3", children: t("hoursAndPaymentsLabel") }),
       /* @__PURE__ */ r(
         U,
@@ -69,11 +70,11 @@ const $ = "0.000", Q = ({
           columns: [
             {
               title: t("contractorTableHeaders.contractor"),
-              render: (e) => /* @__PURE__ */ r(n, { children: F(e.contractorDetails) })
+              render: (e) => /* @__PURE__ */ r(n, { children: A(e.contractorDetails) })
             },
             {
               title: t("contractorTableHeaders.wageType"),
-              render: (e) => /* @__PURE__ */ r(n, { children: w(e.contractorDetails) })
+              render: (e) => /* @__PURE__ */ r(n, { children: D(e.contractorDetails) })
             },
             {
               title: t("contractorTableHeaders.paymentMethod"),
@@ -81,32 +82,35 @@ const $ = "0.000", Q = ({
             },
             {
               title: t("contractorTableHeaders.hours"),
-              render: (e) => /* @__PURE__ */ r(n, { children: e.contractorDetails?.wageType === "Hourly" && e.hours ? S(e.hours) : $ })
+              render: (e) => {
+                const a = Number(e.hours || "0");
+                return /* @__PURE__ */ r(n, { children: e.contractorDetails?.wageType === "Hourly" && a ? S(a) : $ });
+              }
             },
             {
               title: t("contractorTableHeaders.wage"),
               render: (e) => {
-                const i = e.contractorDetails?.wageType === "Fixed" && e.wage ? e.wage : 0;
-                return /* @__PURE__ */ r(n, { children: o(i) });
+                const a = e.contractorDetails?.wageType === "Fixed" && e.wage ? Number(e.wage || "0") : 0;
+                return /* @__PURE__ */ r(n, { children: o(a) });
               }
             },
             {
               title: t("contractorTableHeaders.bonus"),
-              render: (e) => /* @__PURE__ */ r(n, { children: o(e.bonus || 0) })
+              render: (e) => /* @__PURE__ */ r(n, { children: o(Number(e.bonus || "0")) })
             },
             {
               title: t("contractorTableHeaders.reimbursement"),
-              render: (e) => /* @__PURE__ */ r(n, { children: o(e.reimbursement || 0) })
+              render: (e) => /* @__PURE__ */ r(n, { children: o(Number(e.reimbursement || "0")) })
             },
             {
               title: t("contractorTableHeaders.total"),
-              render: ({ bonus: e, reimbursement: i, wage: P, hours: d, contractorDetails: p }) => {
-                const L = (e ?? 0) + (i ?? 0) + (P ?? 0) + (p?.wageType === "Hourly" && d ? d * Number(p.hourlyRate ?? 0) : 0);
-                return /* @__PURE__ */ r(n, { children: o(L) });
+              render: ({ bonus: e, reimbursement: a, wage: N, hours: d, contractorDetails: p }) => {
+                const P = Number(e || "0") + Number(a || "0") + Number(N || "0") + (p?.wageType === "Hourly" && d ? Number(d || "0") * Number(p.hourlyRate || "0") : 0);
+                return /* @__PURE__ */ r(n, { children: o(P) });
               }
             }
           ],
-          data: D,
+          data: w,
           footer: () => ({
             "column-0": /* @__PURE__ */ r(n, { weight: "bold", children: t("totalsLabel") }),
             "column-4": /* @__PURE__ */ r(n, { children: o(l.wage) }),
@@ -129,13 +133,13 @@ const $ = "0.000", Q = ({
               triggerLabel: t("editContractor")
             }
           ),
-          emptyState: () => /* @__PURE__ */ r(N, { title: t("emptyTableTitle"), description: t("emptyTableDescription") })
+          emptyState: () => /* @__PURE__ */ r(M, { title: t("emptyTableTitle"), description: t("emptyTableDescription") })
         }
       )
     ] })
   ] });
 };
 export {
-  Q as CreatePaymentPresentation
+  X as CreatePaymentPresentation
 };
 //# sourceMappingURL=CreatePaymentPresentation.js.map