@gusto/embedded-react-sdk 0.48.2 → 0.49.0

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

@@ -1,52 +1,53 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { useTranslation as k } from "react-i18next";
-import { useMemo as v } from "react";
-import { getContractorDisplayName as F } from "./helpers.js";
-import { PayrollBlockerAlerts as M } from "../../../Payroll/PayrollBlocker/components/PayrollBlockerAlerts.js";
-import { Flex as a, FlexItem as j } from "../../../Common/Flex/Flex.js";
-import { EmptyData as I } from "../../../Common/EmptyData/EmptyData.js";
-import { HamburgerMenu as S } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
-import { useComponentContext as O } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as U } from "../../../../i18n/I18n.js";
-import { formatHoursDisplay as $ } from "../../../Payroll/helpers.js";
+import { useTranslation as A } from "react-i18next";
+import { useMemo as R } from "react";
+import { getContractorDisplayName as v } from "./helpers.js";
+import { PayrollBlockerAlerts as F } from "../../../Payroll/PayrollBlocker/components/PayrollBlockerAlerts.js";
+import { Flex as a, FlexItem as M } from "../../../Common/Flex/Flex.js";
+import { EmptyData as S } from "../../../Common/EmptyData/EmptyData.js";
+import { HamburgerMenu as z } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useComponentContext as I } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as O } from "../../../../i18n/I18n.js";
+import { formatHoursDisplay as U } from "../../../Payroll/helpers.js";
 import B from "../../../../hooks/useNumberFormatter.js";
-import { DataView as E } from "../../../Common/DataView/DataView.js";
-const V = "0.000", te = ({
+import { normalizeDateToLocal as E, formatDateToStringDate as V, normalizeToDate as _ } from "../../../../helpers/dateFormatting.js";
+import { DataView as $ } from "../../../Common/DataView/DataView.js";
+const q = "0.000", ie = ({
   contractors: m,
-  paymentDate: y,
-  contractorPayments: u,
-  onPaymentDateChange: g,
-  onSaveAndContinue: h,
-  onEditContractor: f,
+  paymentDate: u,
+  contractorPayments: c,
+  onPaymentDateChange: y,
+  onSaveAndContinue: g,
+  onEditContractor: h,
   totals: i,
   alerts: T,
-  payrollBlockers: c = [],
-  onViewBlockers: C,
-  isLoading: H,
-  paymentSpeedDays: x
+  payrollBlockers: s = [],
+  onViewBlockers: D,
+  isLoading: C,
+  paymentSpeedDays: H
 }) => {
-  const { Button: D, Text: w, Heading: s, TextInput: N, Alert: P } = O();
-  U("Contractor.Payments.CreatePayment");
-  const { t: r } = k("Contractor.Payments.CreatePayment"), o = B("currency"), A = (e) => e ? e.wageType === "Hourly" && e.hourlyRate ? `${r("wageTypes.hourly")} ${o(Number(e.hourlyRate || "0"))}${r("perHour")}` : e.wageType : "", d = v(
-    () => u.map((e) => ({
+  const { Button: x, Text: N, Heading: d, DatePicker: w, Alert: P } = I();
+  O("Contractor.Payments.CreatePayment");
+  const { t: r } = A("Contractor.Payments.CreatePayment"), o = B("currency"), j = (e) => e ? e.wageType === "Hourly" && e.hourlyRate ? ` ${o(Number(e.hourlyRate || "0"))}${r("perHour")}` : e.wageType : "", p = R(
+    () => c.map((e) => ({
       ...e,
       contractorDetails: m.find(
         (n) => n.uuid === e.contractorUuid
       )
     })),
-    [u, m]
+    [c, m]
   );
   return /* @__PURE__ */ l(a, { flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ l(a, { justifyContent: "flex-end", gap: 16, children: [
       /* @__PURE__ */ l(a, { flexDirection: "column", gap: 4, children: [
-        /* @__PURE__ */ t(s, { as: "h2", children: r("title") }),
-        /* @__PURE__ */ t(w, { variant: "supporting", children: r("paymentSpeedNotice", {
-          count: x
+        /* @__PURE__ */ t(d, { as: "h2", children: r("title") }),
+        /* @__PURE__ */ t(N, { variant: "supporting", children: r("paymentSpeedNotice", {
+          count: H
         }) })
       ] }),
-      /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(D, { onClick: h, variant: "primary", isLoading: H, children: r("continueCta") }) })
+      /* @__PURE__ */ t(M, { children: /* @__PURE__ */ t(x, { onClick: g, variant: "primary", isLoading: C, children: r("continueCta") }) })
     ] }),
-    c.length > 0 && /* @__PURE__ */ t(M, { blockers: c, onViewBlockersClick: C }),
+    s.length > 0 && /* @__PURE__ */ t(F, { blockers: s, onViewBlockersClick: D }),
     Object.values(T).map((e) => /* @__PURE__ */ t(
       P,
       {
@@ -58,28 +59,30 @@ const V = "0.000", te = ({
       e.title
     )),
     /* @__PURE__ */ t(a, { flexDirection: "column", gap: 8, children: /* @__PURE__ */ t(
-      N,
+      w,
       {
-        type: "date",
-        value: y,
-        onChange: g,
+        value: u ? _(u) : null,
+        onChange: (e) => {
+          const n = E(e);
+          y(n ? V(n) ?? "" : "");
+        },
         label: r("dateLabel"),
         isRequired: !0
       }
     ) }),
     /* @__PURE__ */ l(a, { flexDirection: "column", gap: 16, children: [
-      /* @__PURE__ */ t(s, { as: "h3", children: r("hoursAndPaymentsLabel") }),
+      /* @__PURE__ */ t(d, { as: "h3", children: r("hoursAndPaymentsLabel") }),
       /* @__PURE__ */ t(
-        E,
+        $,
         {
           columns: [
             {
               title: r("contractorTableHeaders.contractor"),
-              render: (e) => F(e.contractorDetails)
+              render: (e) => v(e.contractorDetails)
             },
             {
               title: r("contractorTableHeaders.wageType"),
-              render: (e) => A(e.contractorDetails)
+              render: (e) => j(e.contractorDetails)
             },
             {
               title: r("contractorTableHeaders.paymentMethod"),
@@ -87,36 +90,39 @@ const V = "0.000", te = ({
             },
             {
               title: r("contractorTableHeaders.hours"),
+              justify: "end",
               render: (e) => {
+                if (e.contractorDetails?.wageType === "Fixed") return r("na");
                 const n = Number(e.hours || "0");
-                return e.contractorDetails?.wageType === "Hourly" && n ? $(n) : V;
+                return n ? U(n) : q;
               }
             },
             {
               title: r("contractorTableHeaders.wage"),
-              render: (e) => {
-                const n = e.contractorDetails?.wageType === "Fixed" && e.wage ? Number(e.wage || "0") : 0;
-                return o(n);
-              }
+              justify: "end",
+              render: (e) => e.contractorDetails?.wageType === "Hourly" ? r("na") : o(Number(e.wage || "0"))
             },
             {
               title: r("contractorTableHeaders.bonus"),
+              justify: "end",
               render: (e) => o(Number(e.bonus || "0"))
             },
             {
               title: r("contractorTableHeaders.reimbursement"),
+              justify: "end",
               render: (e) => o(Number(e.reimbursement || "0"))
             },
             {
               title: r("contractorTableHeaders.total"),
-              render: ({ bonus: e, reimbursement: n, wage: L, hours: p, contractorDetails: b }) => {
-                const R = Number(e || "0") + Number(n || "0") + Number(L || "0") + (b?.wageType === "Hourly" && p ? Number(p || "0") * Number(b.hourlyRate || "0") : 0);
-                return o(R);
+              justify: "end",
+              render: ({ bonus: e, reimbursement: n, wage: L, hours: b, contractorDetails: f }) => {
+                const k = Number(e || "0") + Number(n || "0") + Number(L || "0") + (f?.wageType === "Hourly" && b ? Number(b || "0") * Number(f.hourlyRate || "0") : 0);
+                return o(k);
               }
             }
           ],
-          data: d,
-          footer: d.length > 0 ? () => ({
+          data: p,
+          footer: p.length > 0 ? () => ({
             "column-0": r("totalsLabel"),
             "column-4": o(i.wage),
             "column-5": o(i.bonus),
@@ -125,26 +131,26 @@ const V = "0.000", te = ({
           }) : void 0,
           label: r("hoursAndPaymentsLabel"),
           itemMenu: (e) => /* @__PURE__ */ t(
-            S,
+            z,
             {
               items: [
                 {
                   label: r("editContractor"),
                   onClick: () => {
-                    f(e.contractorUuid);
+                    h(e.contractorUuid);
                   }
                 }
               ],
               triggerLabel: r("editContractor")
             }
           ),
-          emptyState: () => /* @__PURE__ */ t(I, { title: r("emptyTableTitle"), description: r("emptyTableDescription") })
+          emptyState: () => /* @__PURE__ */ t(S, { title: r("emptyTableTitle"), description: r("emptyTableDescription") })
         }
       )
     ] })
   ] });
 };
 export {
-  te as CreatePaymentPresentation
+  ie as CreatePaymentPresentation
 };
 //# sourceMappingURL=CreatePaymentPresentation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CreatePaymentPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/CreatePaymentPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'\nimport type { ContractorPayments } from '@gusto/embedded-api-v-2025-11-15/models/operations/postv1companiescompanyidcontractorpaymentgroups'\nimport { useMemo } from 'react'\nimport type { InternalAlert } from '../types'\nimport { getContractorDisplayName } from './helpers'\nimport type { ApiPayrollBlocker } from '@/components/Payroll/PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '@/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts'\nimport { DataView, Flex, FlexItem, EmptyData } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface ContractorPaymentCreatePaymentPresentationProps {\n  contractors: Contractor[]\n  contractorPayments: (ContractorPayments & { isTouched?: boolean })[]\n  paymentDate: string\n  onPaymentDateChange: (date: string) => void\n  onSaveAndContinue: () => void\n  onEditContractor: (contractorUuid: string) => void\n  totals: {\n    wage: number\n    bonus: number\n    reimbursement: number\n    total: number\n  }\n  alerts: Record<string, InternalAlert>\n  payrollBlockers?: ApiPayrollBlocker[]\n  onViewBlockers?: () => void\n  isLoading: boolean\n  paymentSpeedDays: number\n}\n\nexport const CreatePaymentPresentation = ({\n  contractors,\n  paymentDate,\n  contractorPayments,\n  onPaymentDateChange,\n  onSaveAndContinue,\n  onEditContractor,\n  totals,\n  alerts,\n  payrollBlockers = [],\n  onViewBlockers,\n  isLoading,\n  paymentSpeedDays,\n}: ContractorPaymentCreatePaymentPresentationProps) => {\n  const { Button, Text, Heading, TextInput, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment')\n  const currencyFormatter = useNumberFormatter('currency')\n\n  const formatWageType = (contractor?: Contractor) => {\n    if (!contractor) return ''\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `${t('wageTypes.hourly')} ${currencyFormatter(Number(contractor.hourlyRate || '0'))}${t('perHour')}`\n    }\n    return contractor.wageType\n  }\n\n  const tableData = useMemo(\n    () =>\n      contractorPayments.map(payment => {\n        return {\n          ...payment,\n          contractorDetails: contractors.find(\n            contractor => contractor.uuid === payment.contractorUuid,\n          ),\n        }\n      }),\n    [contractorPayments, contractors],\n  )\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex justifyContent=\"flex-end\" gap={16}>\n        <Flex flexDirection=\"column\" gap={4}>\n          <Heading as=\"h2\">{t('title')}</Heading>\n          <Text variant=\"supporting\">\n            {t('paymentSpeedNotice', {\n              count: paymentSpeedDays,\n            })}\n          </Text>\n        </Flex>\n        <FlexItem>\n          <Button onClick={onSaveAndContinue} variant=\"primary\" isLoading={isLoading}>\n            {t('continueCta')}\n          </Button>\n        </FlexItem>\n      </Flex>\n\n      {payrollBlockers.length > 0 && (\n        <PayrollBlockerAlerts blockers={payrollBlockers} onViewBlockersClick={onViewBlockers} />\n      )}\n\n      {Object.values(alerts).map(alert => (\n        <Alert\n          key={alert.title}\n          label={alert.title}\n          onDismiss={alert.onDismiss}\n          status={alert.type}\n        >\n          {alert.content ?? null}\n        </Alert>\n      ))}\n\n      <Flex flexDirection=\"column\" gap={8}>\n        <TextInput\n          type=\"date\"\n          value={paymentDate}\n          onChange={onPaymentDateChange}\n          label={t('dateLabel')}\n          isRequired\n        />\n      </Flex>\n\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h3\">{t('hoursAndPaymentsLabel')}</Heading>\n        <DataView\n          columns={[\n            {\n              title: t('contractorTableHeaders.contractor'),\n              render: paymentData => getContractorDisplayName(paymentData.contractorDetails),\n            },\n            {\n              title: t('contractorTableHeaders.wageType'),\n              render: paymentData => formatWageType(paymentData.contractorDetails),\n            },\n            {\n              title: t('contractorTableHeaders.paymentMethod'),\n              render: paymentData => paymentData.paymentMethod || t('na'),\n            },\n            {\n              title: t('contractorTableHeaders.hours'),\n              render: paymentData => {\n                const hours = Number(paymentData.hours || '0')\n                return paymentData.contractorDetails?.wageType === 'Hourly' && hours\n                  ? formatHoursDisplay(hours)\n                  : ZERO_HOURS_DISPLAY\n              },\n            },\n            {\n              title: t('contractorTableHeaders.wage'),\n              render: paymentData => {\n                const amount =\n                  paymentData.contractorDetails?.wageType === 'Fixed' && paymentData.wage\n                    ? Number(paymentData.wage || '0')\n                    : 0\n                return currencyFormatter(amount)\n              },\n            },\n            {\n              title: t('contractorTableHeaders.bonus'),\n              render: paymentData => currencyFormatter(Number(paymentData.bonus || '0')),\n            },\n            {\n              title: t('contractorTableHeaders.reimbursement'),\n              render: paymentData => currencyFormatter(Number(paymentData.reimbursement || '0')),\n            },\n            {\n              title: t('contractorTableHeaders.total'),\n              render: ({ bonus, reimbursement, wage, hours, contractorDetails }) => {\n                const totalAmount =\n                  Number(bonus || '0') +\n                  Number(reimbursement || '0') +\n                  Number(wage || '0') +\n                  (contractorDetails?.wageType === 'Hourly' && hours\n                    ? Number(hours || '0') * Number(contractorDetails.hourlyRate || '0')\n                    : 0)\n                return currencyFormatter(totalAmount)\n              },\n            },\n          ]}\n          data={tableData}\n          footer={\n            tableData.length > 0\n              ? () => ({\n                  'column-0': t('totalsLabel'),\n                  'column-4': currencyFormatter(totals.wage),\n                  'column-5': currencyFormatter(totals.bonus),\n                  'column-6': currencyFormatter(totals.reimbursement),\n                  'column-7': currencyFormatter(totals.total),\n                })\n              : undefined\n          }\n          label={t('hoursAndPaymentsLabel')}\n          itemMenu={paymentData => (\n            <HamburgerMenu\n              items={[\n                {\n                  label: t('editContractor'),\n                  onClick: () => {\n                    onEditContractor(paymentData.contractorUuid!)\n                  },\n                },\n              ]}\n              triggerLabel={t('editContractor')}\n            />\n          )}\n          emptyState={() => (\n            <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')} />\n          )}\n        />\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","CreatePaymentPresentation","contractors","paymentDate","contractorPayments","onPaymentDateChange","onSaveAndContinue","onEditContractor","totals","alerts","payrollBlockers","onViewBlockers","isLoading","paymentSpeedDays","Button","Text","Heading","TextInput","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","tableData","useMemo","payment","jsxs","Flex","jsx","FlexItem","PayrollBlockerAlerts","alert","DataView","paymentData","getContractorDisplayName","hours","formatHoursDisplay","amount","bonus","reimbursement","wage","contractorDetails","totalAmount","HamburgerMenu","EmptyData"],"mappings":"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"}
+{"version":3,"file":"CreatePaymentPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/CreatePaymentPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'\nimport type { ContractorPayments } from '@gusto/embedded-api-v-2025-11-15/models/operations/postv1companiescompanyidcontractorpaymentgroups'\nimport { useMemo } from 'react'\nimport type { InternalAlert } from '../types'\nimport { getContractorDisplayName } from './helpers'\nimport type { ApiPayrollBlocker } from '@/components/Payroll/PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '@/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts'\nimport { DataView, Flex, FlexItem, EmptyData } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport {\n  formatDateToStringDate,\n  normalizeDateToLocal,\n  normalizeToDate,\n} from '@/helpers/dateFormatting'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface ContractorPaymentCreatePaymentPresentationProps {\n  contractors: Contractor[]\n  contractorPayments: (ContractorPayments & { isTouched?: boolean })[]\n  paymentDate: string\n  onPaymentDateChange: (date: string) => void\n  onSaveAndContinue: () => void\n  onEditContractor: (contractorUuid: string) => void\n  totals: {\n    wage: number\n    bonus: number\n    reimbursement: number\n    total: number\n  }\n  alerts: Record<string, InternalAlert>\n  payrollBlockers?: ApiPayrollBlocker[]\n  onViewBlockers?: () => void\n  isLoading: boolean\n  paymentSpeedDays: number\n}\n\n/** @internal */\nexport const CreatePaymentPresentation = ({\n  contractors,\n  paymentDate,\n  contractorPayments,\n  onPaymentDateChange,\n  onSaveAndContinue,\n  onEditContractor,\n  totals,\n  alerts,\n  payrollBlockers = [],\n  onViewBlockers,\n  isLoading,\n  paymentSpeedDays,\n}: ContractorPaymentCreatePaymentPresentationProps) => {\n  const { Button, Text, Heading, DatePicker, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment')\n  const currencyFormatter = useNumberFormatter('currency')\n\n  const formatWageType = (contractor?: Contractor) => {\n    if (!contractor) return ''\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return ` ${currencyFormatter(Number(contractor.hourlyRate || '0'))}${t('perHour')}`\n    }\n    return contractor.wageType\n  }\n\n  const tableData = useMemo(\n    () =>\n      contractorPayments.map(payment => {\n        return {\n          ...payment,\n          contractorDetails: contractors.find(\n            contractor => contractor.uuid === payment.contractorUuid,\n          ),\n        }\n      }),\n    [contractorPayments, contractors],\n  )\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex justifyContent=\"flex-end\" gap={16}>\n        <Flex flexDirection=\"column\" gap={4}>\n          <Heading as=\"h2\">{t('title')}</Heading>\n          <Text variant=\"supporting\">\n            {t('paymentSpeedNotice', {\n              count: paymentSpeedDays,\n            })}\n          </Text>\n        </Flex>\n        <FlexItem>\n          <Button onClick={onSaveAndContinue} variant=\"primary\" isLoading={isLoading}>\n            {t('continueCta')}\n          </Button>\n        </FlexItem>\n      </Flex>\n\n      {payrollBlockers.length > 0 && (\n        <PayrollBlockerAlerts blockers={payrollBlockers} onViewBlockersClick={onViewBlockers} />\n      )}\n\n      {Object.values(alerts).map(alert => (\n        <Alert\n          key={alert.title}\n          label={alert.title}\n          onDismiss={alert.onDismiss}\n          status={alert.type}\n        >\n          {alert.content ?? null}\n        </Alert>\n      ))}\n\n      <Flex flexDirection=\"column\" gap={8}>\n        <DatePicker\n          value={paymentDate ? normalizeToDate(paymentDate) : null}\n          onChange={date => {\n            const normalized = normalizeDateToLocal(date)\n            onPaymentDateChange(normalized ? (formatDateToStringDate(normalized) ?? '') : '')\n          }}\n          label={t('dateLabel')}\n          isRequired\n        />\n      </Flex>\n\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h3\">{t('hoursAndPaymentsLabel')}</Heading>\n        <DataView\n          columns={[\n            {\n              title: t('contractorTableHeaders.contractor'),\n              render: paymentData => getContractorDisplayName(paymentData.contractorDetails),\n            },\n            {\n              title: t('contractorTableHeaders.wageType'),\n              render: paymentData => formatWageType(paymentData.contractorDetails),\n            },\n            {\n              title: t('contractorTableHeaders.paymentMethod'),\n              render: paymentData => paymentData.paymentMethod || t('na'),\n            },\n            {\n              title: t('contractorTableHeaders.hours'),\n              justify: 'end',\n              render: paymentData => {\n                if (paymentData.contractorDetails?.wageType === 'Fixed') return t('na')\n                const hours = Number(paymentData.hours || '0')\n                return hours ? formatHoursDisplay(hours) : ZERO_HOURS_DISPLAY\n              },\n            },\n            {\n              title: t('contractorTableHeaders.wage'),\n              justify: 'end',\n              render: paymentData => {\n                if (paymentData.contractorDetails?.wageType === 'Hourly') return t('na')\n                return currencyFormatter(Number(paymentData.wage || '0'))\n              },\n            },\n            {\n              title: t('contractorTableHeaders.bonus'),\n              justify: 'end',\n              render: paymentData => currencyFormatter(Number(paymentData.bonus || '0')),\n            },\n            {\n              title: t('contractorTableHeaders.reimbursement'),\n              justify: 'end',\n              render: paymentData => currencyFormatter(Number(paymentData.reimbursement || '0')),\n            },\n            {\n              title: t('contractorTableHeaders.total'),\n              justify: 'end',\n              render: ({ bonus, reimbursement, wage, hours, contractorDetails }) => {\n                const totalAmount =\n                  Number(bonus || '0') +\n                  Number(reimbursement || '0') +\n                  Number(wage || '0') +\n                  (contractorDetails?.wageType === 'Hourly' && hours\n                    ? Number(hours || '0') * Number(contractorDetails.hourlyRate || '0')\n                    : 0)\n                return currencyFormatter(totalAmount)\n              },\n            },\n          ]}\n          data={tableData}\n          footer={\n            tableData.length > 0\n              ? () => ({\n                  'column-0': t('totalsLabel'),\n                  'column-4': currencyFormatter(totals.wage),\n                  'column-5': currencyFormatter(totals.bonus),\n                  'column-6': currencyFormatter(totals.reimbursement),\n                  'column-7': currencyFormatter(totals.total),\n                })\n              : undefined\n          }\n          label={t('hoursAndPaymentsLabel')}\n          itemMenu={paymentData => (\n            <HamburgerMenu\n              items={[\n                {\n                  label: t('editContractor'),\n                  onClick: () => {\n                    onEditContractor(paymentData.contractorUuid!)\n                  },\n                },\n              ]}\n              triggerLabel={t('editContractor')}\n            />\n          )}\n          emptyState={() => (\n            <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')} />\n          )}\n        />\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","CreatePaymentPresentation","contractors","paymentDate","contractorPayments","onPaymentDateChange","onSaveAndContinue","onEditContractor","totals","alerts","payrollBlockers","onViewBlockers","isLoading","paymentSpeedDays","Button","Text","Heading","DatePicker","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","tableData","useMemo","payment","jsxs","Flex","jsx","FlexItem","PayrollBlockerAlerts","alert","normalizeToDate","date","normalized","normalizeDateToLocal","formatDateToStringDate","DataView","paymentData","getContractorDisplayName","hours","formatHoursDisplay","bonus","reimbursement","wage","contractorDetails","totalAmount","HamburgerMenu","EmptyData"],"mappings":"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"}

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

@@ -1,21 +1,5 @@
 import { z } from 'zod';
-export declare const EditContractorPaymentFormSchema: z.ZodObject<{
-    wageType: z.ZodEnum<{
-        Fixed: "Fixed";
-        Hourly: "Hourly";
-    }>;
-    hours: z.ZodOptional<z.ZodNumber>;
-    wage: z.ZodOptional<z.ZodNumber>;
-    bonus: z.ZodOptional<z.ZodNumber>;
-    reimbursement: z.ZodOptional<z.ZodNumber>;
-    paymentMethod: z.ZodEnum<{
-        Check: "Check";
-        "Direct Deposit": "Direct Deposit";
-    }>;
-    hourlyRate: z.ZodOptional<z.ZodNumber>;
-    contractorUuid: z.ZodString;
-    contractorPaymentMethod: z.ZodOptional<z.ZodString>;
-}, z.core.$strip>;
+/** @internal */
 export declare const createEditContractorPaymentFormSchema: () => z.ZodObject<{
     wageType: z.ZodEnum<{
         Fixed: "Fixed";
@@ -33,4 +17,6 @@ export declare const createEditContractorPaymentFormSchema: () => z.ZodObject<{
     contractorUuid: z.ZodString;
     contractorPaymentMethod: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;
-export type EditContractorPaymentFormValues = z.infer<typeof EditContractorPaymentFormSchema>;
+/** @internal */
+export type EditContractorPaymentFormValues = { wageType: "Fixed" | "Hourly"; paymentMethod: "Check" | "Direct Deposit"; contractorUuid: string; hours?: number | undefined; wage?: number | undefined; bonus?: number | undefined; reimbursement?: number | undefined; hourlyRate?: number | undefined; contractorPaymentMethod?: string | undefined; };
+export {};

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

@@ -17,7 +17,6 @@ const n = ["Check", "Direct Deposit"], o = e.object({
   }
 );
 export {
-  o as EditContractorPaymentFormSchema,
   a as createEditContractorPaymentFormSchema
 };
 //# sourceMappingURL=EditContractorPaymentFormSchema.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditContractorPaymentFormSchema.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/EditContractorPaymentFormSchema.ts"],"sourcesContent":["import { z } from 'zod'\n\nconst SUPPORTED_PAYMENT_METHODS = ['Check', 'Direct Deposit'] as const\n\nexport const EditContractorPaymentFormSchema = z.object({\n  wageType: z.enum(['Hourly', 'Fixed']),\n  hours: z.number().nonnegative().max(20000).optional(),\n  wage: z.number().nonnegative().optional(),\n  bonus: z.number().nonnegative().optional(),\n  reimbursement: z.number().nonnegative().optional(),\n  paymentMethod: z.enum(SUPPORTED_PAYMENT_METHODS),\n  hourlyRate: z.number().nonnegative().optional(),\n  contractorUuid: z.string(),\n  contractorPaymentMethod: z.string().optional(),\n})\n\nexport const createEditContractorPaymentFormSchema = () => {\n  return EditContractorPaymentFormSchema.refine(\n    data => {\n      if (data.contractorPaymentMethod === 'Check' && data.paymentMethod === 'Direct Deposit') {\n        return false\n      }\n      return true\n    },\n    {\n      message: 'VALIDATION_ERROR',\n      path: ['paymentMethod'],\n    },\n  )\n}\n\nexport type EditContractorPaymentFormValues = z.infer<typeof EditContractorPaymentFormSchema>\n"],"names":["SUPPORTED_PAYMENT_METHODS","EditContractorPaymentFormSchema","z","createEditContractorPaymentFormSchema","data"],"mappings":";AAEA,MAAMA,IAA4B,CAAC,SAAS,gBAAgB,GAE/CC,IAAkCC,EAAE,OAAO;AAAA,EACtD,UAAUA,EAAE,KAAK,CAAC,UAAU,OAAO,CAAC;AAAA,EACpC,OAAOA,EAAE,SAAS,cAAc,IAAI,GAAK,EAAE,SAAA;AAAA,EAC3C,MAAMA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EAC/B,OAAOA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EAChC,eAAeA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EACxC,eAAeA,EAAE,KAAKF,CAAyB;AAAA,EAC/C,YAAYE,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EACrC,gBAAgBA,EAAE,OAAA;AAAA,EAClB,yBAAyBA,EAAE,OAAA,EAAS,SAAA;AACtC,CAAC,GAEYC,IAAwC,MAC5CF,EAAgC;AAAA,EACrC,CAAAG,MACM,EAAAA,EAAK,4BAA4B,WAAWA,EAAK,kBAAkB;AAAA,EAKzE;AAAA,IACE,SAAS;AAAA,IACT,MAAM,CAAC,eAAe;AAAA,EAAA;AACxB;"}
+{"version":3,"file":"EditContractorPaymentFormSchema.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/EditContractorPaymentFormSchema.ts"],"sourcesContent":["import { z } from 'zod'\n\nconst SUPPORTED_PAYMENT_METHODS = ['Check', 'Direct Deposit'] as const\n\nconst EditContractorPaymentFormSchema = z.object({\n  wageType: z.enum(['Hourly', 'Fixed']),\n  hours: z.number().nonnegative().max(20000).optional(),\n  wage: z.number().nonnegative().optional(),\n  bonus: z.number().nonnegative().optional(),\n  reimbursement: z.number().nonnegative().optional(),\n  paymentMethod: z.enum(SUPPORTED_PAYMENT_METHODS),\n  hourlyRate: z.number().nonnegative().optional(),\n  contractorUuid: z.string(),\n  contractorPaymentMethod: z.string().optional(),\n})\n\n/** @internal */\nexport const createEditContractorPaymentFormSchema = () => {\n  return EditContractorPaymentFormSchema.refine(\n    data => {\n      if (data.contractorPaymentMethod === 'Check' && data.paymentMethod === 'Direct Deposit') {\n        return false\n      }\n      return true\n    },\n    {\n      message: 'VALIDATION_ERROR',\n      path: ['paymentMethod'],\n    },\n  )\n}\n\n/** @internal */\nexport type EditContractorPaymentFormValues = z.infer<typeof EditContractorPaymentFormSchema>\n"],"names":["SUPPORTED_PAYMENT_METHODS","EditContractorPaymentFormSchema","z","createEditContractorPaymentFormSchema","data"],"mappings":";AAEA,MAAMA,IAA4B,CAAC,SAAS,gBAAgB,GAEtDC,IAAkCC,EAAE,OAAO;AAAA,EAC/C,UAAUA,EAAE,KAAK,CAAC,UAAU,OAAO,CAAC;AAAA,EACpC,OAAOA,EAAE,SAAS,cAAc,IAAI,GAAK,EAAE,SAAA;AAAA,EAC3C,MAAMA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EAC/B,OAAOA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EAChC,eAAeA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EACxC,eAAeA,EAAE,KAAKF,CAAyB;AAAA,EAC/C,YAAYE,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EACrC,gBAAgBA,EAAE,OAAA;AAAA,EAClB,yBAAyBA,EAAE,OAAA,EAAS,SAAA;AACtC,CAAC,GAGYC,IAAwC,MAC5CF,EAAgC;AAAA,EACrC,CAAAG,MACM,EAAAA,EAAK,4BAA4B,WAAWA,EAAK,kBAAkB;AAAA,EAKzE;AAAA,IACE,SAAS;AAAA,IACT,MAAM,CAAC,eAAe;AAAA,EAAA;AACxB;"}

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

@@ -7,5 +7,6 @@ interface EditContractorPaymentPresentationProps {
     onSubmit: (data: EditContractorPaymentFormValues) => void;
     contractorPaymentMethod?: string;
 }
+/** @internal */
 export declare const EditContractorPaymentPresentation: ({ isOpen, onClose, formMethods, onSubmit, contractorPaymentMethod, }: EditContractorPaymentPresentationProps) => import("react").JSX.Element;
 export {};

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

@@ -1,98 +1,90 @@
-import { jsx as n, jsxs as t } from "react/jsx-runtime";
-import { useId as k } from "react";
-import { useWatch as o, FormProvider as L } from "react-hook-form";
-import { useTranslation as R } from "react-i18next";
-import { useComponentContext as S } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { Flex as i } from "../../../Common/Flex/Flex.js";
-import { Grid as T } from "../../../Common/Grid/Grid.js";
-import { ActionsLayout as I } from "../../../Common/ActionsLayout/ActionsLayout.js";
-import { Form as A } from "../../../Common/Form/Form.js";
-import { useI18n as E } from "../../../../i18n/I18n.js";
-import H from "../../../../hooks/useNumberFormatter.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useId as L, useState as I } from "react";
+import { useWatch as f, FormProvider as R } from "react-hook-form";
+import { useTranslation as w } from "react-i18next";
+import { useComponentContext as T } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { Flex as a } from "../../../Common/Flex/Flex.js";
+import { ActionsLayout as S } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { Form as j } from "../../../Common/Form/Form.js";
+import { useI18n as q } from "../../../../i18n/I18n.js";
+import A from "../../../../hooks/useNumberFormatter.js";
 import { NumberInputField as c } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
-import { RadioGroupField as j } from "../../../Common/Fields/RadioGroupField/RadioGroupField.js";
+import { RadioGroupField as E } from "../../../Common/Fields/RadioGroupField/RadioGroupField.js";
 const Y = ({
-  isOpen: h,
-  onClose: m,
-  formMethods: r,
-  onSubmit: s,
-  contractorPaymentMethod: b
+  isOpen: D,
+  onClose: l,
+  formMethods: t,
+  onSubmit: u,
+  contractorPaymentMethod: C
 }) => {
-  const u = k();
-  E("Contractor.Payments.CreatePayment");
-  const { t: e } = R("Contractor.Payments.CreatePayment", {
+  const p = L();
+  q("Contractor.Payments.CreatePayment");
+  const { t: e } = w("Contractor.Payments.CreatePayment", {
     keyPrefix: "editContractorPayment"
-  }), { Modal: y, Button: d, Text: p, Heading: a } = S(), f = H("currency"), l = o({
+  }), { Modal: g, Button: d, Text: P, Heading: x } = T(), y = A("currency"), m = f({
     name: "wageType",
-    control: r.control
-  }), g = o({
-    name: "hours",
-    control: r.control
-  }), x = o({
-    name: "wage",
-    control: r.control
-  }), C = o({
-    name: "bonus",
-    control: r.control
-  }), D = o({
-    name: "reimbursement",
-    control: r.control
-  }), P = o({
+    control: t.control
+  }), o = f({
     name: "hourlyRate",
-    control: r.control
-  }), F = (l === "Fixed" ? 0 : C || 0) + (D || 0) + (x || 0) + (g || 0) * (P || 0), v = b === "Check", w = [
+    control: t.control
+  }), F = (n) => {
+    const b = parseFloat(n.replace(/[^\d.]/g, ""));
+    return isNaN(b) ? 0 : b;
+  }, h = (n) => !o || o <= 0 ? "" : e("hoursPayDescription", {
+    rate: y(o),
+    total: y(n * o)
+  }), s = t.getValues("hours"), [v, H] = I(
+    h(
+      typeof s > "u" || Number.isNaN(s) ? 0 : s
+    )
+  ), N = C === "Check", k = [
     { value: "Check", label: e("paymentMethods.check") },
     {
       value: "Direct Deposit",
       label: e("paymentMethods.directDeposit"),
-      isDisabled: v
+      isDisabled: N
     }
     // { value: 'Historical Payment', label: t('paymentMethods.historicalPayment') },
   ];
-  return /* @__PURE__ */ n(
-    y,
+  return /* @__PURE__ */ r(
+    g,
     {
-      isOpen: h,
-      onClose: m,
-      footer: /* @__PURE__ */ t(I, { children: [
-        /* @__PURE__ */ n(d, { variant: "secondary", onClick: m, children: e("cancelCta") }),
-        /* @__PURE__ */ n(
+      isOpen: D,
+      onClose: l,
+      footer: /* @__PURE__ */ i(S, { children: [
+        /* @__PURE__ */ r(d, { variant: "secondary", onClick: l, children: e("cancelCta") }),
+        /* @__PURE__ */ r(
           d,
           {
             variant: "primary",
             type: "submit",
-            form: u,
-            onClick: () => r.handleSubmit(s),
+            form: p,
+            onClick: () => t.handleSubmit(u),
             children: e("saveCta")
           }
         )
       ] }),
-      children: /* @__PURE__ */ n(L, { ...r, children: /* @__PURE__ */ n(A, { id: u, onSubmit: r.handleSubmit(s), children: /* @__PURE__ */ t(i, { flexDirection: "column", gap: 32, children: [
-        /* @__PURE__ */ t(i, { flexDirection: "column", gap: 4, children: [
-          /* @__PURE__ */ n(a, { as: "h2", children: e("title") }),
-          /* @__PURE__ */ n(p, { variant: "supporting", children: e("subtitle") }),
-          /* @__PURE__ */ t(p, { weight: "bold", children: [
-            e("totalPay"),
-            ": ",
-            f(F)
-          ] })
+      children: /* @__PURE__ */ r(R, { ...t, children: /* @__PURE__ */ r(j, { id: p, onSubmit: t.handleSubmit(u), children: /* @__PURE__ */ i(a, { flexDirection: "column", gap: 32, children: [
+        /* @__PURE__ */ i(a, { flexDirection: "column", gap: 4, children: [
+          /* @__PURE__ */ r(x, { as: "h2", children: e("title") }),
+          /* @__PURE__ */ r(P, { variant: "supporting", children: e("subtitle") })
         ] }),
-        l === "Hourly" && /* @__PURE__ */ t(i, { flexDirection: "column", gap: 16, children: [
-          /* @__PURE__ */ n(a, { as: "h3", children: e("hoursSection") }),
-          /* @__PURE__ */ n(
+        /* @__PURE__ */ i(a, { flexDirection: "column", gap: 20, children: [
+          m === "Hourly" && /* @__PURE__ */ r(
             c,
             {
               min: 0,
               name: "hours",
               isRequired: !0,
               label: e("hoursLabel"),
-              adornmentEnd: e("hoursAdornment")
+              adornmentEnd: e("hoursAdornment"),
+              description: o && o > 0 ? v : void 0,
+              onInputChange: (n) => {
+                H(h(F(n)));
+              }
             }
-          )
-        ] }),
-        l === "Fixed" && /* @__PURE__ */ t(i, { flexDirection: "column", gap: 16, children: [
-          /* @__PURE__ */ n(a, { as: "h3", children: e("fixedPaySection") }),
-          /* @__PURE__ */ n(
+          ),
+          m === "Fixed" && /* @__PURE__ */ r(
             c,
             {
               min: 0,
@@ -101,36 +93,23 @@ const Y = ({
               label: e("wageLabel"),
               format: "currency"
             }
+          ),
+          m === "Hourly" && /* @__PURE__ */ r(c, { min: 0, name: "bonus", label: e("bonusLabel"), format: "currency" }),
+          /* @__PURE__ */ r(
+            c,
+            {
+              min: 0,
+              name: "reimbursement",
+              label: e("reimbursementLabel"),
+              format: "currency"
+            }
           )
         ] }),
-        /* @__PURE__ */ t(i, { flexDirection: "column", gap: 16, children: [
-          /* @__PURE__ */ n(a, { as: "h3", children: e("additionalEarningsSection") }),
-          /* @__PURE__ */ t(T, { gridTemplateColumns: { base: "1fr", small: [200, 200] }, gap: 16, children: [
-            l === "Hourly" && /* @__PURE__ */ n(
-              c,
-              {
-                min: 0,
-                name: "bonus",
-                label: e("bonusLabel"),
-                format: "currency"
-              }
-            ),
-            /* @__PURE__ */ n(
-              c,
-              {
-                min: 0,
-                name: "reimbursement",
-                label: e("reimbursementLabel"),
-                format: "currency"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ n(i, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ n(
-          j,
+        /* @__PURE__ */ r(a, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ r(
+          E,
           {
             name: "paymentMethod",
-            options: w,
+            options: k,
             label: e("paymentMethodLabel")
           }
         ) })

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

@@ -1 +1 @@
-{"version":3,"file":"EditContractorPaymentPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { FormProvider, useWatch, type UseFormReturn } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport type { EditContractorPaymentFormValues } from './EditContractorPaymentFormSchema'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ActionsLayout, Flex, Grid, NumberInputField, RadioGroupField } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { useI18n } from '@/i18n'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport type { RadioGroupOption } from '@/index'\n\ninterface EditContractorPaymentPresentationProps {\n  isOpen: boolean\n  onClose: () => void\n  formMethods: UseFormReturn<EditContractorPaymentFormValues>\n  onSubmit: (data: EditContractorPaymentFormValues) => void\n  contractorPaymentMethod?: string\n}\n\nexport const EditContractorPaymentPresentation = ({\n  isOpen,\n  onClose,\n  formMethods,\n  onSubmit,\n  contractorPaymentMethod,\n}: EditContractorPaymentPresentationProps) => {\n  const formId = useId()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment', {\n    keyPrefix: 'editContractorPayment',\n  })\n  const { Modal, Button, Text, Heading } = useComponentContext()\n  const currencyFormatter = useNumberFormatter('currency')\n\n  const wageType = useWatch<EditContractorPaymentFormValues, 'wageType'>({\n    name: 'wageType',\n    control: formMethods.control,\n  })\n  const hours = useWatch<EditContractorPaymentFormValues, 'hours'>({\n    name: 'hours',\n    control: formMethods.control,\n  })\n  const wage = useWatch<EditContractorPaymentFormValues, 'wage'>({\n    name: 'wage',\n    control: formMethods.control,\n  })\n  const bonus = useWatch<EditContractorPaymentFormValues, 'bonus'>({\n    name: 'bonus',\n    control: formMethods.control,\n  })\n  const reimbursement = useWatch<EditContractorPaymentFormValues, 'reimbursement'>({\n    name: 'reimbursement',\n    control: formMethods.control,\n  })\n  const hourlyRate = useWatch<EditContractorPaymentFormValues, 'hourlyRate'>({\n    name: 'hourlyRate',\n    control: formMethods.control,\n  })\n\n  const totalAmount =\n    (wageType === 'Fixed' ? 0 : bonus || 0) +\n    (reimbursement || 0) +\n    (wage || 0) +\n    (hours || 0) * (hourlyRate || 0)\n\n  const isDirectDepositDisabled = contractorPaymentMethod === 'Check'\n\n  const paymentMethodOptions: RadioGroupOption[] = [\n    { value: 'Check', label: t('paymentMethods.check') },\n    {\n      value: 'Direct Deposit',\n      label: t('paymentMethods.directDeposit'),\n      isDisabled: isDirectDepositDisabled,\n    },\n    // { value: 'Historical Payment', label: t('paymentMethods.historicalPayment') },\n  ]\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onClose}\n      footer={\n        <ActionsLayout>\n          <Button variant=\"secondary\" onClick={onClose}>\n            {t('cancelCta')}\n          </Button>\n          <Button\n            variant=\"primary\"\n            type=\"submit\"\n            form={formId}\n            onClick={() => formMethods.handleSubmit(onSubmit)}\n          >\n            {t('saveCta')}\n          </Button>\n        </ActionsLayout>\n      }\n    >\n      <FormProvider {...formMethods}>\n        <Form id={formId} onSubmit={formMethods.handleSubmit(onSubmit)}>\n          <Flex flexDirection=\"column\" gap={32}>\n            <Flex flexDirection=\"column\" gap={4}>\n              <Heading as=\"h2\">{t('title')}</Heading>\n              <Text variant=\"supporting\">{t('subtitle')}</Text>\n              <Text weight=\"bold\">\n                {t('totalPay')}: {currencyFormatter(totalAmount)}\n              </Text>\n            </Flex>\n\n            {wageType === 'Hourly' && (\n              <Flex flexDirection=\"column\" gap={16}>\n                <Heading as=\"h3\">{t('hoursSection')}</Heading>\n                <NumberInputField\n                  min={0}\n                  name=\"hours\"\n                  isRequired\n                  label={t('hoursLabel')}\n                  adornmentEnd={t('hoursAdornment')}\n                />\n              </Flex>\n            )}\n\n            {wageType === 'Fixed' && (\n              <Flex flexDirection=\"column\" gap={16}>\n                <Heading as=\"h3\">{t('fixedPaySection')}</Heading>\n                <NumberInputField\n                  min={0}\n                  name=\"wage\"\n                  isRequired\n                  label={t('wageLabel')}\n                  format=\"currency\"\n                />\n              </Flex>\n            )}\n\n            <Flex flexDirection=\"column\" gap={16}>\n              <Heading as=\"h3\">{t('additionalEarningsSection')}</Heading>\n              <Grid gridTemplateColumns={{ base: '1fr', small: [200, 200] }} gap={16}>\n                {wageType === 'Hourly' && (\n                  <NumberInputField\n                    min={0}\n                    name=\"bonus\"\n                    label={t('bonusLabel')}\n                    format=\"currency\"\n                  />\n                )}\n                <NumberInputField\n                  min={0}\n                  name=\"reimbursement\"\n                  label={t('reimbursementLabel')}\n                  format=\"currency\"\n                />\n              </Grid>\n            </Flex>\n\n            <Flex flexDirection=\"column\" gap={16}>\n              <RadioGroupField\n                name=\"paymentMethod\"\n                options={paymentMethodOptions}\n                label={t('paymentMethodLabel')}\n              />\n            </Flex>\n          </Flex>\n        </Form>\n      </FormProvider>\n    </Modal>\n  )\n}\n"],"names":["EditContractorPaymentPresentation","isOpen","onClose","formMethods","onSubmit","contractorPaymentMethod","formId","useId","useI18n","t","useTranslation","Modal","Button","Text","Heading","useComponentContext","currencyFormatter","useNumberFormatter","wageType","useWatch","hours","wage","bonus","reimbursement","hourlyRate","totalAmount","isDirectDepositDisabled","paymentMethodOptions","jsx","ActionsLayout","FormProvider","Form","jsxs","Flex","NumberInputField","Grid","RadioGroupField"],"mappings":"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"}
+{"version":3,"file":"EditContractorPaymentPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.tsx"],"sourcesContent":["import { useId, useState } from 'react'\nimport { FormProvider, useWatch, type UseFormReturn } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport type { EditContractorPaymentFormValues } from './EditContractorPaymentFormSchema'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ActionsLayout, Flex, NumberInputField, RadioGroupField } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { useI18n } from '@/i18n'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport type { RadioGroupOption } from '@/index'\n\ninterface EditContractorPaymentPresentationProps {\n  isOpen: boolean\n  onClose: () => void\n  formMethods: UseFormReturn<EditContractorPaymentFormValues>\n  onSubmit: (data: EditContractorPaymentFormValues) => void\n  contractorPaymentMethod?: string\n}\n\n/** @internal */\nexport const EditContractorPaymentPresentation = ({\n  isOpen,\n  onClose,\n  formMethods,\n  onSubmit,\n  contractorPaymentMethod,\n}: EditContractorPaymentPresentationProps) => {\n  const formId = useId()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment', {\n    keyPrefix: 'editContractorPayment',\n  })\n  const { Modal, Button, Text, Heading } = useComponentContext()\n  const currencyFormatter = useNumberFormatter('currency')\n\n  const wageType = useWatch<EditContractorPaymentFormValues, 'wageType'>({\n    name: 'wageType',\n    control: formMethods.control,\n  })\n  const hourlyRate = useWatch<EditContractorPaymentFormValues, 'hourlyRate'>({\n    name: 'hourlyRate',\n    control: formMethods.control,\n  })\n\n  const parseHours = (raw: string) => {\n    const parsed = parseFloat(raw.replace(/[^\\d.]/g, ''))\n    return isNaN(parsed) ? 0 : parsed\n  }\n\n  const computeHoursPayDescription = (hours: number) => {\n    if (!hourlyRate || hourlyRate <= 0) return ''\n    return t('hoursPayDescription', {\n      rate: currencyFormatter(hourlyRate),\n      total: currencyFormatter(hours * hourlyRate),\n    })\n  }\n\n  const initialHours = formMethods.getValues('hours')\n  const [hoursPayDescription, setHoursPayDescription] = useState(\n    computeHoursPayDescription(\n      typeof initialHours === 'undefined' || Number.isNaN(initialHours) ? 0 : initialHours,\n    ),\n  )\n\n  const isDirectDepositDisabled = contractorPaymentMethod === 'Check'\n\n  const paymentMethodOptions: RadioGroupOption[] = [\n    { value: 'Check', label: t('paymentMethods.check') },\n    {\n      value: 'Direct Deposit',\n      label: t('paymentMethods.directDeposit'),\n      isDisabled: isDirectDepositDisabled,\n    },\n    // { value: 'Historical Payment', label: t('paymentMethods.historicalPayment') },\n  ]\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onClose}\n      footer={\n        <ActionsLayout>\n          <Button variant=\"secondary\" onClick={onClose}>\n            {t('cancelCta')}\n          </Button>\n          <Button\n            variant=\"primary\"\n            type=\"submit\"\n            form={formId}\n            onClick={() => formMethods.handleSubmit(onSubmit)}\n          >\n            {t('saveCta')}\n          </Button>\n        </ActionsLayout>\n      }\n    >\n      <FormProvider {...formMethods}>\n        <Form id={formId} onSubmit={formMethods.handleSubmit(onSubmit)}>\n          <Flex flexDirection=\"column\" gap={32}>\n            <Flex flexDirection=\"column\" gap={4}>\n              <Heading as=\"h2\">{t('title')}</Heading>\n              <Text variant=\"supporting\">{t('subtitle')}</Text>\n            </Flex>\n            <Flex flexDirection=\"column\" gap={20}>\n              {wageType === 'Hourly' && (\n                <NumberInputField\n                  min={0}\n                  name=\"hours\"\n                  isRequired\n                  label={t('hoursLabel')}\n                  adornmentEnd={t('hoursAdornment')}\n                  description={hourlyRate && hourlyRate > 0 ? hoursPayDescription : undefined}\n                  onInputChange={raw => {\n                    setHoursPayDescription(computeHoursPayDescription(parseHours(raw)))\n                  }}\n                />\n              )}\n\n              {wageType === 'Fixed' && (\n                <NumberInputField\n                  min={0}\n                  name=\"wage\"\n                  isRequired\n                  label={t('wageLabel')}\n                  format=\"currency\"\n                />\n              )}\n\n              {wageType === 'Hourly' && (\n                <NumberInputField min={0} name=\"bonus\" label={t('bonusLabel')} format=\"currency\" />\n              )}\n              <NumberInputField\n                min={0}\n                name=\"reimbursement\"\n                label={t('reimbursementLabel')}\n                format=\"currency\"\n              />\n            </Flex>\n\n            <Flex flexDirection=\"column\" gap={16}>\n              <RadioGroupField\n                name=\"paymentMethod\"\n                options={paymentMethodOptions}\n                label={t('paymentMethodLabel')}\n              />\n            </Flex>\n          </Flex>\n        </Form>\n      </FormProvider>\n    </Modal>\n  )\n}\n"],"names":["EditContractorPaymentPresentation","isOpen","onClose","formMethods","onSubmit","contractorPaymentMethod","formId","useId","useI18n","t","useTranslation","Modal","Button","Text","Heading","useComponentContext","currencyFormatter","useNumberFormatter","wageType","useWatch","hourlyRate","parseHours","raw","parsed","computeHoursPayDescription","hours","initialHours","hoursPayDescription","setHoursPayDescription","useState","isDirectDepositDisabled","paymentMethodOptions","jsx","ActionsLayout","FormProvider","Form","jsxs","Flex","NumberInputField","RadioGroupField"],"mappings":"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"}

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

@@ -6,5 +6,6 @@ interface FastAchSubmissionBlockerBannerProps {
     onUnblockOptionChange: (blockerType: string, value: string) => void;
     paymentSpeed?: PaymentSpeed;
 }
+/** @internal */
 export declare const FastAchSubmissionBlockerBanner: ({ blocker, selectedValue, onUnblockOptionChange, paymentSpeed, }: FastAchSubmissionBlockerBannerProps) => import("react").JSX.Element;
 export {};