@gusto/embedded-react-sdk 0.48.3 → 0.50.0

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\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 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/PreviewPresentation.js

@@ -1,58 +1,58 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import { useTranslation as C } from "react-i18next";
-import { useMemo as v } from "react";
-import { getContractorDisplayName as R } from "./helpers.js";
-import { FastAchSubmissionBlockerBanner as L } from "./FastAchSubmissionBlockerBanner.js";
-import { GenericBlocker as P } from "./GenericBlocker.js";
-import { Flex as l } from "../../../Common/Flex/Flex.js";
-import { useComponentContext as _ } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as E } from "../../../../i18n/I18n.js";
-import { formatHoursDisplay as F } from "../../../Payroll/helpers.js";
-import j from "../../../../hooks/useNumberFormatter.js";
-import { PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES as T } from "../../../../shared/constants.js";
-import { DataView as p } from "../../../Common/DataView/DataView.js";
+import { useMemo as j } from "react";
+import { getContractorDisplayName as v } from "./helpers.js";
+import { FastAchSubmissionBlockerBanner as P } from "./FastAchSubmissionBlockerBanner.js";
+import { GenericBlocker as R } from "./GenericBlocker.js";
+import { Flex as u } from "../../../Common/Flex/Flex.js";
+import { useComponentContext as L } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as _ } from "../../../../i18n/I18n.js";
+import { formatHoursDisplay as E } from "../../../Payroll/helpers.js";
+import F from "../../../../hooks/useNumberFormatter.js";
+import { PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES as f } from "../../../../shared/constants.js";
+import { DataView as T } from "../../../Common/DataView/DataView.js";
 const I = "0.000", X = ({
-  contractorPaymentGroup: a,
-  contractors: f,
+  contractorPaymentGroup: n,
+  contractors: p,
   onBackToEdit: h,
   onSubmit: A,
-  isLoading: u,
-  bankAccount: g,
+  isLoading: l,
+  bankAccount: D,
   selectedUnblockOptions: d = {},
   onUnblockOptionChange: b,
-  paymentSpeed: D
+  paymentSpeed: g
 }) => {
-  const { Button: c, Text: w, Heading: y, Alert: H } = _();
-  E("Contractor.Payments.CreatePayment");
+  const { Button: c, Text: w, Heading: y, Alert: H } = L();
+  _("Contractor.Payments.CreatePayment");
   const { t } = C("Contractor.Payments.CreatePayment", {
     keyPrefix: "previewPresentation"
-  }), n = j(), N = (e) => e.wageType === "Hourly" && e.hourlyRate ? `${t("wageTypes.hourly")} ${n(Number(e.hourlyRate || "0"))}${t("perHour")}` : e.wageType, m = v(
-    () => a.contractorPayments?.reduce(
+  }), a = F(), N = (e) => e.wageType === "Hourly" && e.hourlyRate ? `${a(Number(e.hourlyRate || "0"))}${t("perHour")}` : e.wageType, i = j(
+    () => n.contractorPayments?.reduce(
       (e, r) => (e.wageAmount += Number(r.wage || "0"), e.bonusAmount += Number(r.bonus || "0"), e.reimbursementAmount += Number(r.reimbursement || "0"), e.totalAmount += Number(r.wageTotal || "0"), e),
       { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 }
     ),
-    [a.contractorPayments]
-  ), B = a.contractorPayments || [], s = (a.submissionBlockers || []).filter(
+    [n.contractorPayments]
+  ), B = n.contractorPayments || [], s = (n.submissionBlockers || []).filter(
     (e) => e.status === "unresolved"
   ), S = s.some(
-    (e) => !T.includes(e.blockerType || "")
+    (e) => !f.includes(e.blockerType || "")
   ), k = s.some(
     (e) => !d[e.blockerType || ""]
-  ), x = u || s.length > 0 && (S || k);
-  return /* @__PURE__ */ i(l, { flexDirection: "column", gap: 32, children: [
-    /* @__PURE__ */ i(l, { justifyContent: "flex-end", gap: 16, children: [
-      /* @__PURE__ */ i(l, { flexDirection: "column", gap: 2, children: [
+  ), x = l || s.length > 0 && (S || k);
+  return /* @__PURE__ */ m(u, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ m(u, { justifyContent: "flex-end", gap: 16, children: [
+      /* @__PURE__ */ m(u, { flexDirection: "column", gap: 2, children: [
         /* @__PURE__ */ o(y, { as: "h2", children: t("reviewAndSubmitTitle") }),
-        /* @__PURE__ */ o(w, { variant: "supporting", children: t("reviewSubtitle", { debitDate: a.debitDate }) })
+        /* @__PURE__ */ o(w, { variant: "supporting", children: t("reviewSubtitle", { debitDate: n.debitDate }) })
       ] }),
-      /* @__PURE__ */ i(l, { justifyContent: "flex-end", gap: 16, children: [
+      /* @__PURE__ */ m(u, { justifyContent: "flex-end", gap: 16, children: [
         /* @__PURE__ */ o(c, { onClick: h, variant: "secondary", children: t("editButton") }),
         /* @__PURE__ */ o(
           c,
           {
             onClick: A,
             variant: "primary",
-            isLoading: u,
+            isLoading: l,
             isDisabled: x,
             children: t("submitButton")
           }
@@ -64,62 +64,62 @@ const I = "0.000", X = ({
       {
         status: "info",
         label: t("alerts.submitPaymentsDeadline", {
-          checkDate: a.checkDate,
-          debitDate: a.debitDate
+          checkDate: n.checkDate,
+          debitDate: n.debitDate
         })
       }
     ),
     s.length > 0 && b && s.map((e) => {
       const r = e.blockerType || "";
-      return T.includes(r) ? /* @__PURE__ */ o(
-        L,
+      return f.includes(r) ? /* @__PURE__ */ o(
+        P,
         {
           blocker: e,
           selectedValue: d[r],
           onUnblockOptionChange: b,
-          paymentSpeed: D
+          paymentSpeed: g
         },
         r
-      ) : /* @__PURE__ */ o(P, { blocker: e }, r);
+      ) : /* @__PURE__ */ o(R, { blocker: e }, r);
     }),
     /* @__PURE__ */ o(y, { as: "h3", children: t("paymentSummaryTitle") }),
     /* @__PURE__ */ o(
-      p,
+      T,
       {
         columns: [
           {
             title: t("summaryTableHeaders.totalAmount"),
-            render: () => n(Number(a.totals?.amount || "0"))
+            render: () => a(Number(n.totals?.amount || "0"))
           },
           {
             title: t("summaryTableHeaders.debitAmount"),
-            render: () => n(Number(a.totals?.debitAmount || "0"))
+            render: () => a(Number(n.totals?.debitAmount || "0"))
           },
           {
             title: t("summaryTableHeaders.debitAccount"),
-            render: () => g?.hiddenAccountNumber ?? t("naDebitAccount")
+            render: () => D?.hiddenAccountNumber ?? t("naDebitAccount")
           },
           {
             title: t("summaryTableHeaders.debitDate"),
-            render: () => a.debitDate || "debitDate"
+            render: () => n.debitDate || "debitDate"
           },
           {
             title: t("summaryTableHeaders.contractorPayDate"),
-            render: () => a.checkDate || "contractorPayDate"
+            render: () => n.checkDate || "contractorPayDate"
           }
         ],
-        data: [a],
+        data: [n],
         label: "Payment Summary"
       }
     ),
     /* @__PURE__ */ o(
-      p,
+      T,
       {
         columns: [
           {
             title: t("contractorTableHeaders.contractor"),
-            render: (e) => R(
-              f.find(
+            render: (e) => v(
+              p.find(
                 (r) => r.uuid === e.contractorUuid
               )
             )
@@ -134,35 +134,41 @@ const I = "0.000", X = ({
           },
           {
             title: t("contractorTableHeaders.hours"),
+            justify: "end",
             render: (e) => {
+              if (e.wageType === "Fixed") return t("na");
               const r = Number(e.hours || "0");
-              return e.wageType === "Hourly" && r ? F(r) : I;
+              return r ? E(r) : I;
             }
           },
           {
             title: t("contractorTableHeaders.wage"),
-            render: (e) => e.wageType === "Fixed" && e.wage ? n(Number(e.wage || "0")) : n(0)
+            justify: "end",
+            render: (e) => e.wageType === "Hourly" ? t("na") : a(Number(e.wage || "0"))
           },
           {
             title: t("contractorTableHeaders.bonus"),
-            render: (e) => n(Number(e.bonus || "0"))
+            justify: "end",
+            render: (e) => a(Number(e.bonus || "0"))
           },
           {
             title: t("contractorTableHeaders.reimbursement"),
-            render: (e) => n(Number(e.reimbursement || "0"))
+            justify: "end",
+            render: (e) => a(Number(e.reimbursement || "0"))
           },
           {
             title: t("contractorTableHeaders.total"),
-            render: (e) => n(Number(e.wageTotal || "0"))
+            justify: "end",
+            render: (e) => a(Number(e.wageTotal || "0"))
           }
         ],
         data: B,
         footer: () => ({
           "column-0": t("totalsLabel"),
-          "column-4": n(m?.wageAmount ?? 0),
-          "column-5": n(m?.bonusAmount ?? 0),
-          "column-6": n(m?.reimbursementAmount ?? 0),
-          "column-7": n(m?.totalAmount ?? 0)
+          "column-4": a(i?.wageAmount ?? 0),
+          "column-5": a(i?.bonusAmount ?? 0),
+          "column-6": a(i?.reimbursementAmount ?? 0),
+          "column-7": a(i?.totalAmount ?? 0)
         }),
         label: t("whatYourCompanyPays")
       }

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

@@ -1 +1 @@
-{"version":3,"file":"PreviewPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/PreviewPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupPreview } from '@gusto/embedded-api-v-2025-11-15/models/components/contractorpaymentgrouppreview'\nimport type { ContractorPaymentForGroupPreview } from '@gusto/embedded-api-v-2025-11-15/models/components/contractorpaymentforgrouppreview'\nimport { useMemo } from 'react'\nimport type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'\nimport type { CompanyBankAccount } from '@gusto/embedded-api-v-2025-11-15/models/components/companybankaccount'\nimport type { PaymentSpeed } from '@gusto/embedded-api-v-2025-11-15/models/components/paymentconfigs'\nimport { getContractorDisplayName } from './helpers'\nimport { FastAchSubmissionBlockerBanner } from './FastAchSubmissionBlockerBanner'\nimport { GenericBlocker } from './GenericBlocker'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES } from '@/shared/constants'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface PreviewPresentationProps {\n  contractorPaymentGroup: ContractorPaymentGroupPreview\n  contractors: Contractor[]\n  onBackToEdit: () => void\n  onSubmit: () => void\n  isLoading: boolean\n  bankAccount?: CompanyBankAccount\n  selectedUnblockOptions?: Record<string, string>\n  onUnblockOptionChange?: (blockerType: string, value: string) => void\n  paymentSpeed?: PaymentSpeed\n}\n\n/** @internal */\nexport const PreviewPresentation = ({\n  contractorPaymentGroup,\n  contractors,\n  onBackToEdit,\n  onSubmit,\n  isLoading,\n  bankAccount,\n  selectedUnblockOptions = {},\n  onUnblockOptionChange,\n  paymentSpeed,\n}: PreviewPresentationProps) => {\n  const { Button, Text, Heading, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment', {\n    keyPrefix: 'previewPresentation',\n  })\n  const currencyFormatter = useNumberFormatter()\n\n  const formatWageType = (contractor: ContractorPaymentForGroupPreview) => {\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 totals = useMemo(\n    () =>\n      contractorPaymentGroup.contractorPayments?.reduce(\n        (acc, contractor) => {\n          acc.wageAmount += Number(contractor.wage || '0')\n          acc.bonusAmount += Number(contractor.bonus || '0')\n          acc.reimbursementAmount += Number(contractor.reimbursement || '0')\n          acc.totalAmount += Number(contractor.wageTotal || '0')\n          return acc\n        },\n        { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 },\n      ),\n    [contractorPaymentGroup.contractorPayments],\n  )\n\n  const contractorPayments = contractorPaymentGroup.contractorPayments || []\n\n  const submissionBlockers = (contractorPaymentGroup.submissionBlockers || []).filter(\n    blocker => blocker.status === 'unresolved',\n  )\n\n  const hasUnresolvableBlockers = submissionBlockers.some(\n    blocker => !PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(blocker.blockerType || ''),\n  )\n\n  const hasUnselectedBlockers = submissionBlockers.some(\n    blocker => !selectedUnblockOptions[blocker.blockerType || ''],\n  )\n\n  const isSubmitDisabled =\n    isLoading ||\n    (submissionBlockers.length > 0 && (hasUnresolvableBlockers || hasUnselectedBlockers))\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex justifyContent=\"flex-end\" gap={16}>\n        <Flex flexDirection=\"column\" gap={2}>\n          <Heading as=\"h2\">{t('reviewAndSubmitTitle')}</Heading>\n          <Text variant=\"supporting\">\n            {t('reviewSubtitle', { debitDate: contractorPaymentGroup.debitDate })}\n          </Text>\n        </Flex>\n        <Flex justifyContent=\"flex-end\" gap={16}>\n          <Button onClick={onBackToEdit} variant=\"secondary\">\n            {t('editButton')}\n          </Button>\n          <Button\n            onClick={onSubmit}\n            variant=\"primary\"\n            isLoading={isLoading}\n            isDisabled={isSubmitDisabled}\n          >\n            {t('submitButton')}\n          </Button>\n        </Flex>\n      </Flex>\n\n      <Alert\n        status=\"info\"\n        label={t('alerts.submitPaymentsDeadline', {\n          checkDate: contractorPaymentGroup.checkDate,\n          debitDate: contractorPaymentGroup.debitDate,\n        })}\n      />\n\n      {submissionBlockers.length > 0 &&\n        onUnblockOptionChange &&\n        submissionBlockers.map(blocker => {\n          const blockerType = blocker.blockerType || ''\n\n          if (PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(blockerType)) {\n            return (\n              <FastAchSubmissionBlockerBanner\n                key={blockerType}\n                blocker={blocker}\n                selectedValue={selectedUnblockOptions[blockerType]}\n                onUnblockOptionChange={onUnblockOptionChange}\n                paymentSpeed={paymentSpeed}\n              />\n            )\n          }\n\n          return <GenericBlocker key={blockerType} blocker={blocker} />\n        })}\n\n      {/* Payment Summary */}\n      <Heading as=\"h3\">{t('paymentSummaryTitle')}</Heading>\n      <DataView\n        columns={[\n          {\n            title: t('summaryTableHeaders.totalAmount'),\n            render: () => currencyFormatter(Number(contractorPaymentGroup.totals?.amount || '0')),\n          },\n          {\n            title: t('summaryTableHeaders.debitAmount'),\n            render: () =>\n              currencyFormatter(Number(contractorPaymentGroup.totals?.debitAmount || '0')),\n          },\n          {\n            title: t('summaryTableHeaders.debitAccount'),\n            render: () => bankAccount?.hiddenAccountNumber ?? t('naDebitAccount'),\n          },\n          {\n            title: t('summaryTableHeaders.debitDate'),\n            render: () => contractorPaymentGroup.debitDate || 'debitDate',\n          },\n          {\n            title: t('summaryTableHeaders.contractorPayDate'),\n            render: () => contractorPaymentGroup.checkDate || 'contractorPayDate',\n          },\n        ]}\n        data={[contractorPaymentGroup]}\n        label=\"Payment Summary\"\n      />\n\n      {/* Contractor Payments Table */}\n      <DataView\n        columns={[\n          {\n            title: t('contractorTableHeaders.contractor'),\n            render: contractorPayment =>\n              getContractorDisplayName(\n                contractors.find(\n                  contractor => contractor.uuid === contractorPayment.contractorUuid,\n                ),\n              ),\n          },\n          {\n            title: t('contractorTableHeaders.wageType'),\n            render: contractorPayment => formatWageType(contractorPayment),\n          },\n          {\n            title: t('contractorTableHeaders.paymentMethod'),\n            render: contractorPayment => contractorPayment.paymentMethod || 'N/A',\n          },\n          {\n            title: t('contractorTableHeaders.hours'),\n            render: contractorPayment => {\n              const hours = Number(contractorPayment.hours || '0')\n              return contractorPayment.wageType === 'Hourly' && hours\n                ? formatHoursDisplay(hours)\n                : ZERO_HOURS_DISPLAY\n            },\n          },\n          {\n            title: t('contractorTableHeaders.wage'),\n            render: contractorPayment =>\n              contractorPayment.wageType === 'Fixed' && contractorPayment.wage\n                ? currencyFormatter(Number(contractorPayment.wage || '0'))\n                : currencyFormatter(0),\n          },\n          {\n            title: t('contractorTableHeaders.bonus'),\n            render: contractorPayment => currencyFormatter(Number(contractorPayment.bonus || '0')),\n          },\n          {\n            title: t('contractorTableHeaders.reimbursement'),\n            render: contractorPayment =>\n              currencyFormatter(Number(contractorPayment.reimbursement || '0')),\n          },\n          {\n            title: t('contractorTableHeaders.total'),\n            render: contractorPayment =>\n              currencyFormatter(Number(contractorPayment.wageTotal || '0')),\n          },\n        ]}\n        data={contractorPayments}\n        footer={() => ({\n          'column-0': t('totalsLabel'),\n          'column-4': currencyFormatter(totals?.wageAmount ?? 0),\n          'column-5': currencyFormatter(totals?.bonusAmount ?? 0),\n          'column-6': currencyFormatter(totals?.reimbursementAmount ?? 0),\n          'column-7': currencyFormatter(totals?.totalAmount ?? 0),\n        })}\n        label={t('whatYourCompanyPays')}\n      />\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","PreviewPresentation","contractorPaymentGroup","contractors","onBackToEdit","onSubmit","isLoading","bankAccount","selectedUnblockOptions","onUnblockOptionChange","paymentSpeed","Button","Text","Heading","Alert","useComponentContext","useI18n","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","totals","useMemo","acc","contractorPayments","submissionBlockers","blocker","hasUnresolvableBlockers","PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES","hasUnselectedBlockers","isSubmitDisabled","jsxs","Flex","jsx","blockerType","FastAchSubmissionBlockerBanner","GenericBlocker","DataView","contractorPayment","getContractorDisplayName","hours","formatHoursDisplay"],"mappings":";;;;;;;;;;;;;AAiBA,MAAMA,IAAqB,SAedC,IAAsB,CAAC;AAAA,EAClC,wBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,wBAAAC,IAAyB,CAAA;AAAA,EACzB,uBAAAC;AAAA,EACA,cAAAC;AACF,MAAgC;AAC9B,QAAM,EAAE,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,GAAS,OAAAC,EAAA,IAAUC,EAAA;AACzC,EAAAC,EAAQ,mCAAmC;AAC3C,QAAM,EAAE,EAAA,IAAMC,EAAe,qCAAqC;AAAA,IAChE,WAAW;AAAA,EAAA,CACZ,GACKC,IAAoBC,EAAA,GAEpBC,IAAiB,CAACC,MAClBA,EAAW,aAAa,YAAYA,EAAW,aAC1C,GAAG,EAAE,kBAAkB,CAAC,IAAIH,EAAkB,OAAOG,EAAW,cAAc,GAAG,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,KAEpGA,EAAW,UAGdC,IAASC;AAAA,IACb,MACErB,EAAuB,oBAAoB;AAAA,MACzC,CAACsB,GAAKH,OACJG,EAAI,cAAc,OAAOH,EAAW,QAAQ,GAAG,GAC/CG,EAAI,eAAe,OAAOH,EAAW,SAAS,GAAG,GACjDG,EAAI,uBAAuB,OAAOH,EAAW,iBAAiB,GAAG,GACjEG,EAAI,eAAe,OAAOH,EAAW,aAAa,GAAG,GAC9CG;AAAA,MAET,EAAE,YAAY,GAAG,aAAa,GAAG,qBAAqB,GAAG,aAAa,EAAA;AAAA,IAAE;AAAA,IAE5E,CAACtB,EAAuB,kBAAkB;AAAA,EAAA,GAGtCuB,IAAqBvB,EAAuB,sBAAsB,CAAA,GAElEwB,KAAsBxB,EAAuB,sBAAsB,CAAA,GAAI;AAAA,IAC3E,CAAAyB,MAAWA,EAAQ,WAAW;AAAA,EAAA,GAG1BC,IAA0BF,EAAmB;AAAA,IACjD,OAAW,CAACG,EAA4C,SAASF,EAAQ,eAAe,EAAE;AAAA,EAAA,GAGtFG,IAAwBJ,EAAmB;AAAA,IAC/C,CAAAC,MAAW,CAACnB,EAAuBmB,EAAQ,eAAe,EAAE;AAAA,EAAA,GAGxDI,IACJzB,KACCoB,EAAmB,SAAS,MAAME,KAA2BE;AAEhE,SACE,gBAAAE,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAK,gBAAe,YAAW,KAAK,IACnC,UAAA;AAAA,MAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,QAAA,gBAAAC,EAACrB,GAAA,EAAQ,IAAG,MAAM,UAAA,EAAE,sBAAsB,GAAE;AAAA,QAC5C,gBAAAqB,EAACtB,GAAA,EAAK,SAAQ,cACX,UAAA,EAAE,kBAAkB,EAAE,WAAWV,EAAuB,UAAA,CAAW,EAAA,CACtE;AAAA,MAAA,GACF;AAAA,MACA,gBAAA8B,EAACC,GAAA,EAAK,gBAAe,YAAW,KAAK,IACnC,UAAA;AAAA,QAAA,gBAAAC,EAACvB,KAAO,SAASP,GAAc,SAAQ,aACpC,UAAA,EAAE,YAAY,GACjB;AAAA,QACA,gBAAA8B;AAAA,UAACvB;AAAA,UAAA;AAAA,YACC,SAASN;AAAA,YACT,SAAQ;AAAA,YACR,WAAAC;AAAA,YACA,YAAYyB;AAAA,YAEX,YAAE,cAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MACnB,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAEA,gBAAAG;AAAA,MAACpB;AAAA,MAAA;AAAA,QACC,QAAO;AAAA,QACP,OAAO,EAAE,iCAAiC;AAAA,UACxC,WAAWZ,EAAuB;AAAA,UAClC,WAAWA,EAAuB;AAAA,QAAA,CACnC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGFwB,EAAmB,SAAS,KAC3BjB,KACAiB,EAAmB,IAAI,CAAAC,MAAW;AAChC,YAAMQ,IAAcR,EAAQ,eAAe;AAE3C,aAAIE,EAA4C,SAASM,CAAW,IAEhE,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UAEC,SAAAT;AAAA,UACA,eAAenB,EAAuB2B,CAAW;AAAA,UACjD,uBAAA1B;AAAA,UACA,cAAAC;AAAA,QAAA;AAAA,QAJKyB;AAAA,MAAA,IASJ,gBAAAD,EAACG,GAAA,EAAiC,SAAAV,EAAA,GAAbQ,CAA+B;AAAA,IAC7D,CAAC;AAAA,sBAGFtB,GAAA,EAAQ,IAAG,MAAM,UAAA,EAAE,qBAAqB,GAAE;AAAA,IAC3C,gBAAAqB;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP;AAAA,YACE,OAAO,EAAE,iCAAiC;AAAA,YAC1C,QAAQ,MAAMpB,EAAkB,OAAOhB,EAAuB,QAAQ,UAAU,GAAG,CAAC;AAAA,UAAA;AAAA,UAEtF;AAAA,YACE,OAAO,EAAE,iCAAiC;AAAA,YAC1C,QAAQ,MACNgB,EAAkB,OAAOhB,EAAuB,QAAQ,eAAe,GAAG,CAAC;AAAA,UAAA;AAAA,UAE/E;AAAA,YACE,OAAO,EAAE,kCAAkC;AAAA,YAC3C,QAAQ,MAAMK,GAAa,uBAAuB,EAAE,gBAAgB;AAAA,UAAA;AAAA,UAEtE;AAAA,YACE,OAAO,EAAE,+BAA+B;AAAA,YACxC,QAAQ,MAAML,EAAuB,aAAa;AAAA,UAAA;AAAA,UAEpD;AAAA,YACE,OAAO,EAAE,uCAAuC;AAAA,YAChD,QAAQ,MAAMA,EAAuB,aAAa;AAAA,UAAA;AAAA,QACpD;AAAA,QAEF,MAAM,CAACA,CAAsB;AAAA,QAC7B,OAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAIR,gBAAAgC;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP;AAAA,YACE,OAAO,EAAE,mCAAmC;AAAA,YAC5C,QAAQ,CAAAC,MACNC;AAAA,cACErC,EAAY;AAAA,gBACV,CAAAkB,MAAcA,EAAW,SAASkB,EAAkB;AAAA,cAAA;AAAA,YACtD;AAAA,UACF;AAAA,UAEJ;AAAA,YACE,OAAO,EAAE,iCAAiC;AAAA,YAC1C,QAAQ,CAAAA,MAAqBnB,EAAemB,CAAiB;AAAA,UAAA;AAAA,UAE/D;AAAA,YACE,OAAO,EAAE,sCAAsC;AAAA,YAC/C,QAAQ,CAAAA,MAAqBA,EAAkB,iBAAiB;AAAA,UAAA;AAAA,UAElE;AAAA,YACE,OAAO,EAAE,8BAA8B;AAAA,YACvC,QAAQ,CAAAA,MAAqB;AAC3B,oBAAME,IAAQ,OAAOF,EAAkB,SAAS,GAAG;AACnD,qBAAOA,EAAkB,aAAa,YAAYE,IAC9CC,EAAmBD,CAAK,IACxBzC;AAAA,YACN;AAAA,UAAA;AAAA,UAEF;AAAA,YACE,OAAO,EAAE,6BAA6B;AAAA,YACtC,QAAQ,CAAAuC,MACNA,EAAkB,aAAa,WAAWA,EAAkB,OACxDrB,EAAkB,OAAOqB,EAAkB,QAAQ,GAAG,CAAC,IACvDrB,EAAkB,CAAC;AAAA,UAAA;AAAA,UAE3B;AAAA,YACE,OAAO,EAAE,8BAA8B;AAAA,YACvC,QAAQ,CAAAqB,MAAqBrB,EAAkB,OAAOqB,EAAkB,SAAS,GAAG,CAAC;AAAA,UAAA;AAAA,UAEvF;AAAA,YACE,OAAO,EAAE,sCAAsC;AAAA,YAC/C,QAAQ,CAAAA,MACNrB,EAAkB,OAAOqB,EAAkB,iBAAiB,GAAG,CAAC;AAAA,UAAA;AAAA,UAEpE;AAAA,YACE,OAAO,EAAE,8BAA8B;AAAA,YACvC,QAAQ,CAAAA,MACNrB,EAAkB,OAAOqB,EAAkB,aAAa,GAAG,CAAC;AAAA,UAAA;AAAA,QAChE;AAAA,QAEF,MAAMd;AAAA,QACN,QAAQ,OAAO;AAAA,UACb,YAAY,EAAE,aAAa;AAAA,UAC3B,YAAYP,EAAkBI,GAAQ,cAAc,CAAC;AAAA,UACrD,YAAYJ,EAAkBI,GAAQ,eAAe,CAAC;AAAA,UACtD,YAAYJ,EAAkBI,GAAQ,uBAAuB,CAAC;AAAA,UAC9D,YAAYJ,EAAkBI,GAAQ,eAAe,CAAC;AAAA,QAAA;AAAA,QAExD,OAAO,EAAE,qBAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,EAChC,GACF;AAEJ;"}
+{"version":3,"file":"PreviewPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/PreviewPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupPreview } from '@gusto/embedded-api-v-2025-11-15/models/components/contractorpaymentgrouppreview'\nimport type { ContractorPaymentForGroupPreview } from '@gusto/embedded-api-v-2025-11-15/models/components/contractorpaymentforgrouppreview'\nimport { useMemo } from 'react'\nimport type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'\nimport type { CompanyBankAccount } from '@gusto/embedded-api-v-2025-11-15/models/components/companybankaccount'\nimport type { PaymentSpeed } from '@gusto/embedded-api-v-2025-11-15/models/components/paymentconfigs'\nimport { getContractorDisplayName } from './helpers'\nimport { FastAchSubmissionBlockerBanner } from './FastAchSubmissionBlockerBanner'\nimport { GenericBlocker } from './GenericBlocker'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES } from '@/shared/constants'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface PreviewPresentationProps {\n  contractorPaymentGroup: ContractorPaymentGroupPreview\n  contractors: Contractor[]\n  onBackToEdit: () => void\n  onSubmit: () => void\n  isLoading: boolean\n  bankAccount?: CompanyBankAccount\n  selectedUnblockOptions?: Record<string, string>\n  onUnblockOptionChange?: (blockerType: string, value: string) => void\n  paymentSpeed?: PaymentSpeed\n}\n\n/** @internal */\nexport const PreviewPresentation = ({\n  contractorPaymentGroup,\n  contractors,\n  onBackToEdit,\n  onSubmit,\n  isLoading,\n  bankAccount,\n  selectedUnblockOptions = {},\n  onUnblockOptionChange,\n  paymentSpeed,\n}: PreviewPresentationProps) => {\n  const { Button, Text, Heading, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment', {\n    keyPrefix: 'previewPresentation',\n  })\n  const currencyFormatter = useNumberFormatter()\n\n  const formatWageType = (contractor: ContractorPaymentForGroupPreview) => {\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 totals = useMemo(\n    () =>\n      contractorPaymentGroup.contractorPayments?.reduce(\n        (acc, contractor) => {\n          acc.wageAmount += Number(contractor.wage || '0')\n          acc.bonusAmount += Number(contractor.bonus || '0')\n          acc.reimbursementAmount += Number(contractor.reimbursement || '0')\n          acc.totalAmount += Number(contractor.wageTotal || '0')\n          return acc\n        },\n        { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 },\n      ),\n    [contractorPaymentGroup.contractorPayments],\n  )\n\n  const contractorPayments = contractorPaymentGroup.contractorPayments || []\n\n  const submissionBlockers = (contractorPaymentGroup.submissionBlockers || []).filter(\n    blocker => blocker.status === 'unresolved',\n  )\n\n  const hasUnresolvableBlockers = submissionBlockers.some(\n    blocker => !PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(blocker.blockerType || ''),\n  )\n\n  const hasUnselectedBlockers = submissionBlockers.some(\n    blocker => !selectedUnblockOptions[blocker.blockerType || ''],\n  )\n\n  const isSubmitDisabled =\n    isLoading ||\n    (submissionBlockers.length > 0 && (hasUnresolvableBlockers || hasUnselectedBlockers))\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex justifyContent=\"flex-end\" gap={16}>\n        <Flex flexDirection=\"column\" gap={2}>\n          <Heading as=\"h2\">{t('reviewAndSubmitTitle')}</Heading>\n          <Text variant=\"supporting\">\n            {t('reviewSubtitle', { debitDate: contractorPaymentGroup.debitDate })}\n          </Text>\n        </Flex>\n        <Flex justifyContent=\"flex-end\" gap={16}>\n          <Button onClick={onBackToEdit} variant=\"secondary\">\n            {t('editButton')}\n          </Button>\n          <Button\n            onClick={onSubmit}\n            variant=\"primary\"\n            isLoading={isLoading}\n            isDisabled={isSubmitDisabled}\n          >\n            {t('submitButton')}\n          </Button>\n        </Flex>\n      </Flex>\n\n      <Alert\n        status=\"info\"\n        label={t('alerts.submitPaymentsDeadline', {\n          checkDate: contractorPaymentGroup.checkDate,\n          debitDate: contractorPaymentGroup.debitDate,\n        })}\n      />\n\n      {submissionBlockers.length > 0 &&\n        onUnblockOptionChange &&\n        submissionBlockers.map(blocker => {\n          const blockerType = blocker.blockerType || ''\n\n          if (PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(blockerType)) {\n            return (\n              <FastAchSubmissionBlockerBanner\n                key={blockerType}\n                blocker={blocker}\n                selectedValue={selectedUnblockOptions[blockerType]}\n                onUnblockOptionChange={onUnblockOptionChange}\n                paymentSpeed={paymentSpeed}\n              />\n            )\n          }\n\n          return <GenericBlocker key={blockerType} blocker={blocker} />\n        })}\n\n      {/* Payment Summary */}\n      <Heading as=\"h3\">{t('paymentSummaryTitle')}</Heading>\n      <DataView\n        columns={[\n          {\n            title: t('summaryTableHeaders.totalAmount'),\n            render: () => currencyFormatter(Number(contractorPaymentGroup.totals?.amount || '0')),\n          },\n          {\n            title: t('summaryTableHeaders.debitAmount'),\n            render: () =>\n              currencyFormatter(Number(contractorPaymentGroup.totals?.debitAmount || '0')),\n          },\n          {\n            title: t('summaryTableHeaders.debitAccount'),\n            render: () => bankAccount?.hiddenAccountNumber ?? t('naDebitAccount'),\n          },\n          {\n            title: t('summaryTableHeaders.debitDate'),\n            render: () => contractorPaymentGroup.debitDate || 'debitDate',\n          },\n          {\n            title: t('summaryTableHeaders.contractorPayDate'),\n            render: () => contractorPaymentGroup.checkDate || 'contractorPayDate',\n          },\n        ]}\n        data={[contractorPaymentGroup]}\n        label=\"Payment Summary\"\n      />\n\n      {/* Contractor Payments Table */}\n      <DataView\n        columns={[\n          {\n            title: t('contractorTableHeaders.contractor'),\n            render: contractorPayment =>\n              getContractorDisplayName(\n                contractors.find(\n                  contractor => contractor.uuid === contractorPayment.contractorUuid,\n                ),\n              ),\n          },\n          {\n            title: t('contractorTableHeaders.wageType'),\n            render: contractorPayment => formatWageType(contractorPayment),\n          },\n          {\n            title: t('contractorTableHeaders.paymentMethod'),\n            render: contractorPayment => contractorPayment.paymentMethod || 'N/A',\n          },\n          {\n            title: t('contractorTableHeaders.hours'),\n            justify: 'end',\n            render: contractorPayment => {\n              if (contractorPayment.wageType === 'Fixed') return t('na')\n              const hours = Number(contractorPayment.hours || '0')\n              return hours ? formatHoursDisplay(hours) : ZERO_HOURS_DISPLAY\n            },\n          },\n          {\n            title: t('contractorTableHeaders.wage'),\n            justify: 'end',\n            render: contractorPayment => {\n              if (contractorPayment.wageType === 'Hourly') return t('na')\n              return currencyFormatter(Number(contractorPayment.wage || '0'))\n            },\n          },\n          {\n            title: t('contractorTableHeaders.bonus'),\n            justify: 'end',\n            render: contractorPayment => currencyFormatter(Number(contractorPayment.bonus || '0')),\n          },\n          {\n            title: t('contractorTableHeaders.reimbursement'),\n            justify: 'end',\n            render: contractorPayment =>\n              currencyFormatter(Number(contractorPayment.reimbursement || '0')),\n          },\n          {\n            title: t('contractorTableHeaders.total'),\n            justify: 'end',\n            render: contractorPayment =>\n              currencyFormatter(Number(contractorPayment.wageTotal || '0')),\n          },\n        ]}\n        data={contractorPayments}\n        footer={() => ({\n          'column-0': t('totalsLabel'),\n          'column-4': currencyFormatter(totals?.wageAmount ?? 0),\n          'column-5': currencyFormatter(totals?.bonusAmount ?? 0),\n          'column-6': currencyFormatter(totals?.reimbursementAmount ?? 0),\n          'column-7': currencyFormatter(totals?.totalAmount ?? 0),\n        })}\n        label={t('whatYourCompanyPays')}\n      />\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","PreviewPresentation","contractorPaymentGroup","contractors","onBackToEdit","onSubmit","isLoading","bankAccount","selectedUnblockOptions","onUnblockOptionChange","paymentSpeed","Button","Text","Heading","Alert","useComponentContext","useI18n","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","totals","useMemo","acc","contractorPayments","submissionBlockers","blocker","hasUnresolvableBlockers","PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES","hasUnselectedBlockers","isSubmitDisabled","jsxs","Flex","jsx","blockerType","FastAchSubmissionBlockerBanner","GenericBlocker","DataView","contractorPayment","getContractorDisplayName","hours","formatHoursDisplay"],"mappings":"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"}

package/dist/components/Contractor/Payments/PaymentFlow/PaymentFlow.d.ts

@@ -1,12 +1,13 @@
 import { PaymentFlowProps } from './PaymentFlowComponents';
 /**
- * Guided workflow for creating, managing, and viewing contractor payment groups for a company.
+ * Hub for creating and managing contractor payments for a company.
  *
  * @remarks
- * Composes the contractor payment subcomponents into a complete experience with breadcrumb navigation between the payments list, the create-payment form, the post-creation summary, the payment-history detail view, and individual contractor payment statements. Also routes into the information-requests flow when a payment-related request needs a response, and surfaces wire-transfer confirmation alerts after a wire details submission.
+ * Composes the contractor payment blocks into a complete experience with breadcrumb navigation between the payments list, the create-payment form, the post-creation summary, the payment-history detail view, and individual contractor payment statements. Also routes into the information-requests flow when a payment-related request needs a response, and surfaces wire-transfer confirmation alerts after a wire details submission.
  *
- * Events emitted by the subcomponents bubble up through the single `onEvent` handler.
+ * Events emitted by the blocks bubble up through the single `onEvent` handler.
  *
+ * @events
  * | Event | Description | Data |
  * | ----- | ----------- | ---- |
  * | `contractor/payments/create` | Fired when the user chooses to create a new payment | — |
@@ -21,12 +22,20 @@ import { PaymentFlowProps } from './PaymentFlowComponents';
  * | `informationRequest/form/cancel` | Fired when the information-requests flow is cancelled | — |
  * | `breadcrumb/navigate` | Fired when the user clicks a breadcrumb to navigate back | `{ key: string, onNavigate: (ctx) => ctx }` |
  *
+ * @components
+ * - {@link PaymentsList}
+ * - {@link CreatePayment}
+ * - {@link PaymentSummary}
+ * - {@link PaymentHistory}
+ * - {@link PaymentStatement}
+ * - {@link InformationRequests.InformationRequestsFlow | InformationRequestsFlow}
+ *
  * @param props - See {@link PaymentFlowProps}.
  * @returns The multi-step contractor payments workflow.
  * @public
  *
  * @example
- * ```tsx
+ * ```tsx title="App.tsx"
  * import { ContractorManagement } from '@gusto/embedded-react-sdk'
  *
  * function MyApp() {