@gusto/embedded-react-sdk 0.52.2 → 0.54.0

package/dist/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentsListPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupWithBlockers } from '@gusto/embedded-api/models/components/contractorpaymentgroupwithblockers'\nimport type { InternalAlert } from '../types'\nimport styles from './PaymentsListPresentation.module.scss'\nimport { DataView, Flex, EmptyData, ActionsLayout, useDataView } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport EyeIcon from '@/assets/icons/eye.svg?react'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { ConfirmWireDetails } from '@/components/Payroll/ConfirmWireDetails'\nimport type { EventType } from '@/shared/constants'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\ninterface ContractorPaymentPaymentsListPresentationProps {\n  numberOfMonths: number\n  contractorPayments: ContractorPaymentGroupWithBlockers[]\n  onCreatePayment: () => void\n  onDateRangeChange: (numberOfMonths: number) => void\n  onViewPayment: (paymentId: string) => void\n  alerts?: InternalAlert[]\n  companyId: string\n  hasUnresolvedWireInRequests: boolean\n  onEvent: (type: EventType, data?: unknown) => void\n  paginationProps?: PaginationControlProps\n}\n\n/** @internal */\nexport const PaymentsListPresentation = ({\n  contractorPayments,\n  numberOfMonths,\n  onCreatePayment,\n  onDateRangeChange,\n  onViewPayment,\n  alerts = [],\n  companyId,\n  hasUnresolvedWireInRequests,\n  onEvent,\n  paginationProps,\n}: ContractorPaymentPaymentsListPresentationProps) => {\n  const { Button, Heading, Select, ButtonIcon, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.PaymentsList')\n  const { t } = useTranslation('Contractor.Payments.PaymentsList')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n\n  const dateRangeOptions = [\n    { value: '3', label: t('dateRanges.last3Months') },\n    { value: '6', label: t('dateRanges.last6Months') },\n  ]\n  const { ...dataViewProps } = useDataView({\n    data: contractorPayments,\n    columns: [\n      {\n        title: t('paymentDateColumnLabel'),\n        render: ({ checkDate }) => formatLongWithYear(checkDate) || 'N/A',\n      },\n      {\n        title: t('wageTotalColumnLabel'),\n        justify: 'end',\n        render: ({ totals }) => currencyFormatter(Number(totals?.wageAmount || 0)),\n      },\n      {\n        title: t('reimbursementTotalColumnLabel'),\n        justify: 'end',\n        render: ({ totals }) => currencyFormatter(Number(totals?.reimbursementAmount) || 0),\n      },\n    ],\n    itemMenu: ({ uuid }) => (\n      <ButtonIcon\n        aria-label={t('viewPaymentCta')}\n        variant=\"tertiary\"\n        onClick={() => {\n          onViewPayment(uuid || '')\n        }}\n      >\n        <EyeIcon aria-hidden />\n      </ButtonIcon>\n    ),\n    emptyState: () => (\n      <EmptyData title={t('noPaymentsFound')} description={t('noPaymentsDescription')}>\n        <ActionsLayout justifyContent=\"center\">\n          <Button\n            variant=\"secondary\"\n            icon={<PlusCircleIcon aria-hidden />}\n            onClick={onCreatePayment}\n          >\n            {t('createPaymentCta')}\n          </Button>\n        </ActionsLayout>\n      </EmptyData>\n    ),\n    pagination: paginationProps,\n  })\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h1\" styledAs=\"h2\">\n          {t('title')}\n        </Heading>\n      </Flex>\n\n      {hasUnresolvedWireInRequests && (\n        <ConfirmWireDetails companyId={companyId} onEvent={onEvent} />\n      )}\n\n      {alerts.length > 0 && (\n        <Flex flexDirection=\"column\" gap={16}>\n          {alerts.map((alert, index) => (\n            <Alert\n              key={`${alert.type}-${alert.title}-${index}`}\n              label={t(`alerts.${alert.title}` as never, alert.translationParams)}\n              status={alert.type}\n              onDismiss={alert.onDismiss}\n            >\n              <Flex flexDirection=\"column\" gap={12}>\n                {typeof alert.content === 'string'\n                  ? t(`alerts.${alert.content}` as never)\n                  : (alert.content ?? null)}\n                {alert.onAction && alert.actionLabel && (\n                  <div>\n                    <Button variant=\"secondary\" onClick={alert.onAction}>\n                      {t(`alerts.${alert.actionLabel}` as never)}\n                    </Button>\n                  </div>\n                )}\n              </Flex>\n            </Alert>\n          ))}\n        </Flex>\n      )}\n\n      <Flex\n        flexDirection={{\n          base: 'column',\n          small: 'row',\n        }}\n        gap={16}\n        alignItems={{\n          base: 'stretch',\n          small: 'center',\n        }}\n        justifyContent=\"space-between\"\n      >\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('subtitle')}\n        </Heading>\n        <div className={styles.actionsContainer}>\n          <Select\n            id=\"date-range-select\"\n            value={numberOfMonths.toString()}\n            onChange={value => {\n              onDateRangeChange(Number(value))\n            }}\n            options={dateRangeOptions}\n            isRequired\n            label={t('startDate')}\n            placeholder=\"\"\n            shouldVisuallyHideLabel\n          />\n          {contractorPayments.length > 0 && (\n            <Button\n              onClick={onCreatePayment}\n              variant=\"secondary\"\n              icon={<PlusCircleIcon aria-hidden />}\n              className={styles.nowrap}\n            >\n              {t('createPaymentCta')}\n            </Button>\n          )}\n        </div>\n      </Flex>\n\n      <DataView label={t('subtitle')} {...dataViewProps} />\n    </Flex>\n  )\n}\n"],"names":["PaymentsListPresentation","contractorPayments","numberOfMonths","onCreatePayment","onDateRangeChange","onViewPayment","alerts","companyId","hasUnresolvedWireInRequests","onEvent","paginationProps","Button","Heading","Select","ButtonIcon","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","dateRangeOptions","dataViewProps","useDataView","checkDate","totals","uuid","jsx","EyeIcon","EmptyData","ActionsLayout","PlusCircleIcon","jsxs","Flex","ConfirmWireDetails","alert","index","styles","value","DataView"],"mappings":"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"}
+{"version":3,"file":"PaymentsListPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupWithBlockers } from '@gusto/embedded-api/models/components/contractorpaymentgroupwithblockers'\nimport type { InternalAlert } from '../types'\nimport styles from './PaymentsListPresentation.module.scss'\nimport { DataView, Flex, EmptyData, ActionsLayout, useDataView } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport EyeIcon from '@/assets/icons/eye.svg?react'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { ConfirmWireDetails } from '@/components/Payroll/ConfirmWireDetails'\nimport type { EventType } from '@/shared/constants'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\ninterface ContractorPaymentPaymentsListPresentationProps {\n  numberOfMonths: number\n  contractorPayments: ContractorPaymentGroupWithBlockers[]\n  onCreatePayment: () => void\n  onDateRangeChange: (numberOfMonths: number) => void\n  onViewPayment: (paymentId: string) => void\n  alerts?: InternalAlert[]\n  companyId: string\n  hasUnresolvedWireInRequests: boolean\n  onEvent: (type: EventType, data?: unknown) => void\n  paginationProps?: PaginationControlProps\n}\n\n/** @internal */\nexport const PaymentsListPresentation = ({\n  contractorPayments,\n  numberOfMonths,\n  onCreatePayment,\n  onDateRangeChange,\n  onViewPayment,\n  alerts = [],\n  companyId,\n  hasUnresolvedWireInRequests,\n  onEvent,\n  paginationProps,\n}: ContractorPaymentPaymentsListPresentationProps) => {\n  const { Button, Heading, Select, ButtonIcon, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.PaymentsList')\n  const { t } = useTranslation('Contractor.Payments.PaymentsList')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n\n  const dateRangeOptions = [\n    { value: '3', label: t('dateRanges.last3Months') },\n    { value: '6', label: t('dateRanges.last6Months') },\n  ]\n  const { ...dataViewProps } = useDataView({\n    data: contractorPayments,\n    columns: [\n      {\n        title: t('paymentDateColumnLabel'),\n        render: ({ checkDate }) => formatLongWithYear(checkDate) || 'N/A',\n      },\n      {\n        title: t('wageTotalColumnLabel'),\n        justify: 'end',\n        render: ({ totals }) => currencyFormatter(Number(totals?.wageAmount || 0)),\n      },\n      {\n        title: t('reimbursementTotalColumnLabel'),\n        justify: 'end',\n        render: ({ totals }) => currencyFormatter(Number(totals?.reimbursementAmount) || 0),\n      },\n    ],\n    itemMenu: ({ uuid }) => (\n      <ButtonIcon\n        aria-label={t('viewPaymentCta')}\n        variant=\"tertiary\"\n        onClick={() => {\n          onViewPayment(uuid || '')\n        }}\n      >\n        <EyeIcon aria-hidden />\n      </ButtonIcon>\n    ),\n    emptyState: () => (\n      <EmptyData title={t('noPaymentsFound')} description={t('noPaymentsDescription')}>\n        <ActionsLayout justifyContent=\"center\">\n          <Button\n            variant=\"secondary\"\n            icon={<PlusCircleIcon aria-hidden />}\n            onClick={onCreatePayment}\n          >\n            {t('createPaymentCta')}\n          </Button>\n        </ActionsLayout>\n      </EmptyData>\n    ),\n    pagination: paginationProps,\n  })\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h1\" styledAs=\"h2\">\n          {t('title')}\n        </Heading>\n      </Flex>\n\n      {hasUnresolvedWireInRequests && (\n        <ConfirmWireDetails companyId={companyId} onEvent={onEvent} />\n      )}\n\n      {alerts.length > 0 && (\n        <Flex flexDirection=\"column\" gap={16}>\n          {alerts.map((alert, index) => (\n            <Alert\n              key={`${alert.type}-${alert.title}-${index}`}\n              label={t(`alerts.${alert.title}` as never, alert.translationParams)}\n              status={alert.type}\n              onDismiss={alert.onDismiss}\n            >\n              <Flex flexDirection=\"column\" gap={12}>\n                {typeof alert.content === 'string'\n                  ? t(`alerts.${alert.content}` as never)\n                  : (alert.content ?? null)}\n                {alert.onAction && alert.actionLabel && (\n                  <div>\n                    <Button variant=\"secondary\" onClick={alert.onAction}>\n                      {t(`alerts.${alert.actionLabel}` as never)}\n                    </Button>\n                  </div>\n                )}\n              </Flex>\n            </Alert>\n          ))}\n        </Flex>\n      )}\n\n      <Flex\n        flexDirection={{\n          base: 'column',\n          small: 'row',\n        }}\n        gap={16}\n        alignItems={{\n          base: 'stretch',\n          small: 'center',\n        }}\n        justifyContent=\"space-between\"\n      >\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('subtitle')}\n        </Heading>\n        <div className={styles.actionsContainer}>\n          <Select\n            id=\"date-range-select\"\n            value={numberOfMonths.toString()}\n            onChange={value => {\n              onDateRangeChange(Number(value))\n            }}\n            options={dateRangeOptions}\n            isRequired\n            label={t('startDate')}\n            placeholder=\"\"\n            shouldVisuallyHideLabel\n          />\n          {contractorPayments.length > 0 && (\n            <Button\n              onClick={onCreatePayment}\n              variant=\"secondary\"\n              icon={<PlusCircleIcon aria-hidden />}\n              className={styles.nowrap}\n            >\n              {t('createPaymentCta')}\n            </Button>\n          )}\n        </div>\n      </Flex>\n\n      <DataView label={t('subtitle')} {...dataViewProps} />\n    </Flex>\n  )\n}\n"],"names":["PaymentsListPresentation","contractorPayments","numberOfMonths","onCreatePayment","onDateRangeChange","onViewPayment","alerts","companyId","hasUnresolvedWireInRequests","onEvent","paginationProps","Button","Heading","Select","ButtonIcon","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","dateRangeOptions","dataViewProps","useDataView","checkDate","totals","uuid","jsx","EyeIcon","EmptyData","ActionsLayout","PlusCircleIcon","jsxs","Flex","ConfirmWireDetails","alert","index","styles","value","DataView"],"mappings":"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"}

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

@@ -0,0 +1,63 @@
+import { ViewPaymentFlowProps } from './ViewPaymentFlowComponents';
+import { FlowBreadcrumb } from '../../../Common/FlowBreadcrumbs/FlowBreadcrumbsTypes';
+/**
+ * Props for the flow-internal {@link ViewPaymentInternalFlow}, which layers a parent flow's
+ * prefix breadcrumbs on top of the public {@link ViewPaymentFlowProps}.
+ *
+ * @internal
+ */
+export interface ViewPaymentInternalFlowProps extends ViewPaymentFlowProps {
+    /**
+     * Breadcrumbs prepended to the flow's own breadcrumb trail. Set by a parent flow (e.g.
+     * `PaymentFlow`) so the breadcrumb history remains coherent across the handoff.
+     */
+    prefixBreadcrumbs?: FlowBreadcrumb[];
+}
+/**
+ * Guided flow to inspect a contractor payment group's history and drill into an individual
+ * contractor's payment statement.
+ *
+ * @remarks
+ * This is the inner flow that powers the view-payment spoke of `ContractorManagement.PaymentFlow`.
+ * Render it directly when you have built your own payments landing page and want to hand the user
+ * off to the standard payment-viewing experience without re-implementing it. The flow ships with
+ * breadcrumb navigation and lets the user cancel an individual payment from the history screen.
+ *
+ * @events
+ * | Event | Description | Data |
+ * | ----- | ----------- | ---- |
+ * | `contractor/payments/view/details` | Fired when the user views a specific contractor payment | `{ contractor: Contractor, paymentGroupId: string }` |
+ * | `contractor/payments/cancel` | Fired when a payment is cancelled | `{ paymentId: string }` |
+ * | `breadcrumb/navigate` | Fired when the user clicks a breadcrumb to navigate back | `{ key: string, onNavigate: (ctx) => ctx }` |
+ *
+ * @components
+ * - {@link PaymentHistory}
+ * - {@link PaymentStatement}
+ *
+ * @param props - See {@link ViewPaymentFlowProps}.
+ * @returns The composed view-payment flow.
+ * @alpha
+ *
+ * @example
+ * ```tsx title="App.tsx"
+ * import { ContractorManagement } from '@gusto/embedded-react-sdk'
+ *
+ * function MyApp() {
+ *   return (
+ *     <ContractorManagement.ViewPaymentFlow
+ *       paymentId="0987fcea-7b59-4907-a301-f232b5aff508"
+ *       onEvent={() => {}}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare function ViewPaymentFlow(props: ViewPaymentFlowProps): import("react").JSX.Element;
+/**
+ * Flow-internal entry point for {@link ViewPaymentFlow} that additionally accepts
+ * flow-injected `prefixBreadcrumbs`. Partners use {@link ViewPaymentFlow}; `PaymentFlow` renders
+ * this directly to prepend its own breadcrumb trail.
+ *
+ * @internal
+ */
+export declare function ViewPaymentInternalFlow({ paymentId, onEvent, prefixBreadcrumbs, }: ViewPaymentInternalFlowProps): import("react").JSX.Element;

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

@@ -0,0 +1,46 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createMachine as u } from "robot3";
+import { useState as b } from "react";
+import { viewPaymentBreadcrumbsNodes as d, viewPaymentMachine as p } from "./viewPaymentMachine.js";
+import { PaymentHistoryContextual as y } from "./ViewPaymentFlowComponents.js";
+import { Flow as f } from "../../../Flow/Flow.js";
+import { buildBreadcrumbs as w, updateBreadcrumbs as l } from "../../../../helpers/breadcrumbHelpers.js";
+const P = [];
+function E(e) {
+  return /* @__PURE__ */ t(B, { ...e });
+}
+function B({
+  paymentId: e,
+  onEvent: o,
+  prefixBreadcrumbs: m = P
+}) {
+  const [n] = b(() => {
+    const a = w(d), i = Object.fromEntries(
+      Object.entries(a).map(([r, s]) => [
+        r,
+        [...m, ...s]
+      ])
+    ), c = l("history", {
+      header: {
+        type: "breadcrumbs",
+        breadcrumbs: i
+      }
+    });
+    return u(
+      "history",
+      p,
+      (r) => ({
+        ...r,
+        ...c,
+        component: y,
+        currentPaymentId: e
+      })
+    );
+  });
+  return /* @__PURE__ */ t(f, { machine: n, onEvent: o });
+}
+export {
+  E as ViewPaymentFlow,
+  B as ViewPaymentInternalFlow
+};
+//# sourceMappingURL=ViewPaymentFlow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewPaymentFlow.js","sources":["../../../../../src/components/Contractor/Payments/ViewPaymentFlow/ViewPaymentFlow.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useState } from 'react'\nimport { viewPaymentBreadcrumbsNodes, viewPaymentMachine } from './viewPaymentMachine'\nimport {\n  PaymentHistoryContextual,\n  type ViewPaymentFlowContextInterface,\n  type ViewPaymentFlowProps,\n} from './ViewPaymentFlowComponents'\nimport { Flow } from '@/components/Flow/Flow'\nimport type { FlowBreadcrumb } from '@/components/Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'\nimport { buildBreadcrumbs, updateBreadcrumbs } from '@/helpers/breadcrumbHelpers'\n\nconst EMPTY_BREADCRUMBS: FlowBreadcrumb[] = []\n\n/**\n * Props for the flow-internal {@link ViewPaymentInternalFlow}, which layers a parent flow's\n * prefix breadcrumbs on top of the public {@link ViewPaymentFlowProps}.\n *\n * @internal\n */\nexport interface ViewPaymentInternalFlowProps extends ViewPaymentFlowProps {\n  /**\n   * Breadcrumbs prepended to the flow's own breadcrumb trail. Set by a parent flow (e.g.\n   * `PaymentFlow`) so the breadcrumb history remains coherent across the handoff.\n   */\n  prefixBreadcrumbs?: FlowBreadcrumb[]\n}\n\n/**\n * Guided flow to inspect a contractor payment group's history and drill into an individual\n * contractor's payment statement.\n *\n * @remarks\n * This is the inner flow that powers the view-payment spoke of `ContractorManagement.PaymentFlow`.\n * Render it directly when you have built your own payments landing page and want to hand the user\n * off to the standard payment-viewing experience without re-implementing it. The flow ships with\n * breadcrumb navigation and lets the user cancel an individual payment from the history screen.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/payments/view/details` | Fired when the user views a specific contractor payment | `{ contractor: Contractor, paymentGroupId: string }` |\n * | `contractor/payments/cancel` | Fired when a payment is cancelled | `{ paymentId: string }` |\n * | `breadcrumb/navigate` | Fired when the user clicks a breadcrumb to navigate back | `{ key: string, onNavigate: (ctx) => ctx }` |\n *\n * @components\n * - {@link PaymentHistory}\n * - {@link PaymentStatement}\n *\n * @param props - See {@link ViewPaymentFlowProps}.\n * @returns The composed view-payment flow.\n * @alpha\n *\n * @example\n * ```tsx title=\"App.tsx\"\n * import { ContractorManagement } from '@gusto/embedded-react-sdk'\n *\n * function MyApp() {\n *   return (\n *     <ContractorManagement.ViewPaymentFlow\n *       paymentId=\"0987fcea-7b59-4907-a301-f232b5aff508\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function ViewPaymentFlow(props: ViewPaymentFlowProps) {\n  return <ViewPaymentInternalFlow {...props} />\n}\n\n/**\n * Flow-internal entry point for {@link ViewPaymentFlow} that additionally accepts\n * flow-injected `prefixBreadcrumbs`. Partners use {@link ViewPaymentFlow}; `PaymentFlow` renders\n * this directly to prepend its own breadcrumb trail.\n *\n * @internal\n */\nexport function ViewPaymentInternalFlow({\n  paymentId,\n  onEvent,\n  prefixBreadcrumbs = EMPTY_BREADCRUMBS,\n}: ViewPaymentInternalFlowProps) {\n  // Built once via a lazy useState initializer, not useMemo -- see CreatePaymentFlow.tsx for why:\n  // a useMemo keyed on `prefixBreadcrumbs` doesn't guarantee the machine's identity survives a\n  // re-render triggered by a bubbled `onEvent` call.\n  const [viewPaymentFlow] = useState(() => {\n    const baseBreadcrumbs = buildBreadcrumbs(viewPaymentBreadcrumbsNodes)\n    const breadcrumbs = Object.fromEntries(\n      Object.entries(baseBreadcrumbs).map(([stateKey, trail]) => [\n        stateKey,\n        [...prefixBreadcrumbs, ...trail],\n      ]),\n    )\n\n    const initialBreadcrumbContext = updateBreadcrumbs('history', {\n      header: {\n        type: 'breadcrumbs' as const,\n        breadcrumbs,\n      },\n    })\n\n    return createMachine(\n      'history',\n      viewPaymentMachine,\n      (initialContext: ViewPaymentFlowContextInterface) => ({\n        ...initialContext,\n        ...initialBreadcrumbContext,\n        component: PaymentHistoryContextual,\n        currentPaymentId: paymentId,\n      }),\n    )\n  })\n\n  return <Flow machine={viewPaymentFlow} onEvent={onEvent} />\n}\n"],"names":["EMPTY_BREADCRUMBS","ViewPaymentFlow","props","jsx","ViewPaymentInternalFlow","paymentId","onEvent","prefixBreadcrumbs","viewPaymentFlow","useState","baseBreadcrumbs","buildBreadcrumbs","viewPaymentBreadcrumbsNodes","breadcrumbs","stateKey","trail","initialBreadcrumbContext","updateBreadcrumbs","createMachine","viewPaymentMachine","initialContext","PaymentHistoryContextual","Flow"],"mappings":";;;;;;;AAYA,MAAMA,IAAsC,CAAA;AAuDrC,SAASC,EAAgBC,GAA6B;AAC3D,SAAO,gBAAAC,EAACC,GAAA,EAAyB,GAAGF,EAAA,CAAO;AAC7C;AASO,SAASE,EAAwB;AAAA,EACtC,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,mBAAAC,IAAoBP;AACtB,GAAiC;AAI/B,QAAM,CAACQ,CAAe,IAAIC,EAAS,MAAM;AACvC,UAAMC,IAAkBC,EAAiBC,CAA2B,GAC9DC,IAAc,OAAO;AAAA,MACzB,OAAO,QAAQH,CAAe,EAAE,IAAI,CAAC,CAACI,GAAUC,CAAK,MAAM;AAAA,QACzDD;AAAA,QACA,CAAC,GAAGP,GAAmB,GAAGQ,CAAK;AAAA,MAAA,CAChC;AAAA,IAAA,GAGGC,IAA2BC,EAAkB,WAAW;AAAA,MAC5D,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,aAAAJ;AAAA,MAAA;AAAA,IACF,CACD;AAED,WAAOK;AAAA,MACL;AAAA,MACAC;AAAA,MACA,CAACC,OAAqD;AAAA,QACpD,GAAGA;AAAA,QACH,GAAGJ;AAAA,QACH,WAAWK;AAAA,QACX,kBAAkBhB;AAAA,MAAA;AAAA,IACpB;AAAA,EAEJ,CAAC;AAED,SAAO,gBAAAF,EAACmB,GAAA,EAAK,SAASd,GAAiB,SAAAF,EAAA,CAAkB;AAC3D;"}

package/dist/components/Contractor/Payments/ViewPaymentFlow/ViewPaymentFlowComponents.d.ts

@@ -0,0 +1,20 @@
+import { FlowContextInterface } from '../../../Flow/useFlow';
+import { BaseComponentInterface } from '../../../Base';
+/**
+ * Props for {@link ViewPaymentFlow}.
+ *
+ * @alpha
+ */
+export interface ViewPaymentFlowProps extends BaseComponentInterface<never> {
+    /** Identifier of the payment group to inspect. */
+    paymentId: string;
+}
+/** @internal */
+export interface ViewPaymentFlowContextInterface extends FlowContextInterface {
+    currentPaymentId?: string;
+    currentContractorUuid?: string;
+}
+/** @internal */
+export declare function PaymentHistoryContextual(): import("react").JSX.Element;
+/** @internal */
+export declare function PaymentStatementContextual(): import("react").JSX.Element;

package/dist/components/Contractor/Payments/ViewPaymentFlow/ViewPaymentFlowComponents.js

@@ -0,0 +1,25 @@
+import { jsx as e } from "react/jsx-runtime";
+import { PaymentHistory as u } from "../PaymentHistory/PaymentHistory.js";
+import { PaymentStatement as a } from "../PaymentStatement/PaymentStatement.js";
+import { useFlow as o } from "../../../Flow/useFlow.js";
+import { ensureRequired as r } from "../../../../helpers/ensureRequired.js";
+function f() {
+  const { currentPaymentId: t, onEvent: n } = o();
+  return /* @__PURE__ */ e(u, { onEvent: n, paymentId: r(t) });
+}
+function s() {
+  const { currentPaymentId: t, currentContractorUuid: n, onEvent: m } = o();
+  return /* @__PURE__ */ e(
+    a,
+    {
+      onEvent: m,
+      paymentGroupId: r(t),
+      contractorUuid: r(n)
+    }
+  );
+}
+export {
+  f as PaymentHistoryContextual,
+  s as PaymentStatementContextual
+};
+//# sourceMappingURL=ViewPaymentFlowComponents.js.map

package/dist/components/Contractor/Payments/ViewPaymentFlow/ViewPaymentFlowComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewPaymentFlowComponents.js","sources":["../../../../../src/components/Contractor/Payments/ViewPaymentFlow/ViewPaymentFlowComponents.tsx"],"sourcesContent":["import { PaymentHistory } from '../PaymentHistory/PaymentHistory'\nimport { PaymentStatement } from '../PaymentStatement/PaymentStatement'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { ensureRequired } from '@/helpers/ensureRequired'\n\n/**\n * Props for {@link ViewPaymentFlow}.\n *\n * @alpha\n */\nexport interface ViewPaymentFlowProps extends BaseComponentInterface<never> {\n  /** Identifier of the payment group to inspect. */\n  paymentId: string\n}\n\n/** @internal */\nexport interface ViewPaymentFlowContextInterface extends FlowContextInterface {\n  currentPaymentId?: string\n  currentContractorUuid?: string\n}\n\n/** @internal */\nexport function PaymentHistoryContextual() {\n  const { currentPaymentId, onEvent } = useFlow<ViewPaymentFlowContextInterface>()\n  return <PaymentHistory onEvent={onEvent} paymentId={ensureRequired(currentPaymentId)} />\n}\n\n/** @internal */\nexport function PaymentStatementContextual() {\n  const { currentPaymentId, currentContractorUuid, onEvent } =\n    useFlow<ViewPaymentFlowContextInterface>()\n  return (\n    <PaymentStatement\n      onEvent={onEvent}\n      paymentGroupId={ensureRequired(currentPaymentId)}\n      contractorUuid={ensureRequired(currentContractorUuid)}\n    />\n  )\n}\n"],"names":["PaymentHistoryContextual","currentPaymentId","onEvent","useFlow","PaymentHistory","ensureRequired","PaymentStatementContextual","currentContractorUuid","jsx","PaymentStatement"],"mappings":";;;;;AAuBO,SAASA,IAA2B;AACzC,QAAM,EAAE,kBAAAC,GAAkB,SAAAC,EAAA,IAAYC,EAAA;AACtC,2BAAQC,GAAA,EAAe,SAAAF,GAAkB,WAAWG,EAAeJ,CAAgB,GAAG;AACxF;AAGO,SAASK,IAA6B;AAC3C,QAAM,EAAE,kBAAAL,GAAkB,uBAAAM,GAAuB,SAAAL,EAAA,IAC/CC,EAAA;AACF,SACE,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAP;AAAA,MACA,gBAAgBG,EAAeJ,CAAgB;AAAA,MAC/C,gBAAgBI,EAAeE,CAAqB;AAAA,IAAA;AAAA,EAAA;AAG1D;"}

package/dist/components/Contractor/Payments/ViewPaymentFlow/index.d.ts

@@ -0,0 +1,2 @@
+export { ViewPaymentFlow } from './ViewPaymentFlow';
+export type { ViewPaymentFlowProps } from './ViewPaymentFlowComponents';

package/dist/components/Contractor/Payments/ViewPaymentFlow/viewPaymentMachine.d.ts

@@ -0,0 +1,8 @@
+import { BreadcrumbNodes } from '../../../Common/FlowBreadcrumbs/FlowBreadcrumbsTypes';
+/** @internal */
+export declare const viewPaymentBreadcrumbsNodes: BreadcrumbNodes;
+/** @internal */
+export declare const viewPaymentMachine: {
+    history: import('robot3').MachineState<any>;
+    statement: import('robot3').MachineState<any>;
+};

package/dist/components/Contractor/Payments/ViewPaymentFlow/viewPaymentMachine.js

@@ -0,0 +1,51 @@
+import { state as a, transition as o, reduce as n } from "robot3";
+import { getContractorDisplayName as m } from "../../shared/helpers.js";
+import { PaymentHistoryContextual as i, PaymentStatementContextual as c } from "./ViewPaymentFlowComponents.js";
+import { componentEvents as s } from "../../../../shared/constants.js";
+import { updateBreadcrumbs as r } from "../../../../helpers/breadcrumbHelpers.js";
+import { createBreadcrumbNavigateTransition as y } from "../../../Common/FlowBreadcrumbs/breadcrumbTransitionHelpers.js";
+const p = y(), N = {
+  history: {
+    parent: null,
+    item: {
+      id: "history",
+      label: "breadcrumbLabel",
+      namespace: "Contractor.Payments.PaymentHistory",
+      onNavigate: ((t) => ({
+        ...r("history", t),
+        component: i
+      }))
+    }
+  },
+  statement: {
+    parent: "history",
+    item: {
+      id: "statement",
+      label: "breadcrumbLabel",
+      namespace: "Contractor.Payments.PaymentStatement"
+    }
+  }
+}, h = {
+  history: a(
+    o(
+      s.CONTRACTOR_PAYMENT_VIEW_DETAILS,
+      "statement",
+      n(
+        (t, e) => ({
+          ...r("statement", t, {
+            contractorName: m(e.payload.contractor)
+          }),
+          component: c,
+          currentContractorUuid: e.payload.contractor.uuid,
+          currentPaymentId: e.payload.paymentGroupId
+        })
+      )
+    )
+  ),
+  statement: a(p("history"))
+};
+export {
+  N as viewPaymentBreadcrumbsNodes,
+  h as viewPaymentMachine
+};
+//# sourceMappingURL=viewPaymentMachine.js.map

package/dist/components/Contractor/Payments/ViewPaymentFlow/viewPaymentMachine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewPaymentMachine.js","sources":["../../../../../src/components/Contractor/Payments/ViewPaymentFlow/viewPaymentMachine.ts"],"sourcesContent":["import { reduce, state, transition } from 'robot3'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport { getContractorDisplayName } from '../../shared/helpers'\nimport {\n  PaymentHistoryContextual,\n  PaymentStatementContextual,\n  type ViewPaymentFlowContextInterface,\n} from './ViewPaymentFlowComponents'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\nimport { updateBreadcrumbs } from '@/helpers/breadcrumbHelpers'\nimport type { BreadcrumbNodes } from '@/components/Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'\nimport { createBreadcrumbNavigateTransition } from '@/components/Common/FlowBreadcrumbs/breadcrumbTransitionHelpers'\n\ntype EventPayloads = {\n  [componentEvents.CONTRACTOR_PAYMENT_VIEW_DETAILS]: {\n    contractor: Contractor\n    paymentGroupId: string\n  }\n}\n\nconst breadcrumbNavigateTransition =\n  createBreadcrumbNavigateTransition<ViewPaymentFlowContextInterface>()\n\n/** @internal */\nexport const viewPaymentBreadcrumbsNodes: BreadcrumbNodes = {\n  history: {\n    parent: null,\n    item: {\n      id: 'history',\n      label: 'breadcrumbLabel',\n      namespace: 'Contractor.Payments.PaymentHistory',\n      onNavigate: ((ctx: ViewPaymentFlowContextInterface) => ({\n        ...updateBreadcrumbs('history', ctx),\n        component: PaymentHistoryContextual,\n      })) as (context: unknown) => unknown,\n    },\n  },\n  statement: {\n    parent: 'history',\n    item: {\n      id: 'statement',\n      label: 'breadcrumbLabel',\n      namespace: 'Contractor.Payments.PaymentStatement',\n    },\n  },\n}\n\n/** @internal */\nexport const viewPaymentMachine = {\n  history: state<MachineTransition>(\n    transition(\n      componentEvents.CONTRACTOR_PAYMENT_VIEW_DETAILS,\n      'statement',\n      reduce(\n        (\n          ctx: ViewPaymentFlowContextInterface,\n          ev: MachineEventType<\n            EventPayloads,\n            typeof componentEvents.CONTRACTOR_PAYMENT_VIEW_DETAILS\n          >,\n        ): ViewPaymentFlowContextInterface => {\n          return {\n            ...updateBreadcrumbs('statement', ctx, {\n              contractorName: getContractorDisplayName(ev.payload.contractor),\n            }),\n            component: PaymentStatementContextual,\n            currentContractorUuid: ev.payload.contractor.uuid,\n            currentPaymentId: ev.payload.paymentGroupId,\n          }\n        },\n      ),\n    ),\n  ),\n  statement: state<MachineTransition>(breadcrumbNavigateTransition('history')),\n}\n"],"names":["breadcrumbNavigateTransition","createBreadcrumbNavigateTransition","viewPaymentBreadcrumbsNodes","ctx","updateBreadcrumbs","PaymentHistoryContextual","viewPaymentMachine","state","transition","componentEvents","reduce","ev","getContractorDisplayName","PaymentStatementContextual"],"mappings":";;;;;;AAqBA,MAAMA,IACJC,EAAA,GAGWC,IAA+C;AAAA,EAC1D,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,aAAa,CAACC,OAA0C;AAAA,QACtD,GAAGC,EAAkB,WAAWD,CAAG;AAAA,QACnC,WAAWE;AAAA,MAAA;AAAA,IACb;AAAA,EACF;AAAA,EAEF,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,GAGaC,IAAqB;AAAA,EAChC,SAASC;AAAA,IACPC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CACEP,GACAQ,OAKO;AAAA,UACL,GAAGP,EAAkB,aAAaD,GAAK;AAAA,YACrC,gBAAgBS,EAAyBD,EAAG,QAAQ,UAAU;AAAA,UAAA,CAC/D;AAAA,UACD,WAAWE;AAAA,UACX,uBAAuBF,EAAG,QAAQ,WAAW;AAAA,UAC7C,kBAAkBA,EAAG,QAAQ;AAAA,QAAA;AAAA,MAEjC;AAAA,IACF;AAAA,EACF;AAAA,EAEF,WAAWJ,EAAyBP,EAA6B,SAAS,CAAC;AAC7E;"}

package/dist/components/Contractor/Payments/ViewPaymentFlow/viewPaymentMachine.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Contractor/Payments/{CreatePayment → shared/SetPaymentAmounts}/EditContractorPaymentFormSchema.d.ts

@@ -12,11 +12,12 @@ export declare const createEditContractorPaymentFormSchema: () => z.ZodObject<{
     paymentMethod: z.ZodEnum<{
         Check: "Check";
         "Direct Deposit": "Direct Deposit";
+        "Historical Payment": "Historical Payment";
     }>;
     hourlyRate: z.ZodOptional<z.ZodNumber>;
     contractorUuid: z.ZodString;
     contractorPaymentMethod: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;
 /** @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 type EditContractorPaymentFormValues = { wageType: "Fixed" | "Hourly"; paymentMethod: "Check" | "Direct Deposit" | "Historical Payment"; 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 → shared/SetPaymentAmounts}/EditContractorPaymentFormSchema.js

@@ -1,5 +1,5 @@
 import { z as e } from "zod";
-const n = ["Check", "Direct Deposit"], o = e.object({
+const n = ["Check", "Direct Deposit", "Historical Payment"], o = e.object({
   wageType: e.enum(["Hourly", "Fixed"]),
   hours: e.number().nonnegative().max(2e4).optional(),
   wage: e.number().nonnegative().optional(),
@@ -12,7 +12,7 @@ const n = ["Check", "Direct Deposit"], o = e.object({
 }), a = () => o.refine(
   (t) => !(t.contractorPaymentMethod === "Check" && t.paymentMethod === "Direct Deposit"),
   {
-    message: "VALIDATION_ERROR",
+    message: "directDepositNotAvailable",
     path: ["paymentMethod"]
   }
 );

package/dist/components/Contractor/Payments/shared/SetPaymentAmounts/EditContractorPaymentFormSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditContractorPaymentFormSchema.js","sources":["../../../../../../src/components/Contractor/Payments/shared/SetPaymentAmounts/EditContractorPaymentFormSchema.ts"],"sourcesContent":["import { z } from 'zod'\n\nconst SUPPORTED_PAYMENT_METHODS = ['Check', 'Direct Deposit', 'Historical Payment'] 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: 'directDepositNotAvailable',\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,kBAAkB,oBAAoB,GAE5EC,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/shared/SetPaymentAmounts/EditContractorPaymentPresentation.d.ts

@@ -0,0 +1,44 @@
+import { UseFormReturn } from 'react-hook-form';
+import { PostV1CompaniesCompanyIdContractorPaymentGroupsPaymentMethod as ContractorPaymentMethod } from '@gusto/embedded-api/models/operations/postv1companiescompanyidcontractorpaymentgroups';
+import { EditContractorPaymentFormValues } from './EditContractorPaymentFormSchema';
+/**
+ * Every string the edit-contractor-pay modal renders. `hoursPayDescription` is a formatter
+ * rather than a translated string, since the rate/total it displays are computed at render
+ * time and there's no i18next instance backing this component to interpolate them.
+ *
+ * @internal
+ */
+export interface EditContractorPaymentDictionary {
+    title: string;
+    subtitle: string;
+    hoursLabel: string;
+    hoursAdornment: string;
+    hoursPayDescription: (rate: string, total: string) => string;
+    wageLabel: string;
+    bonusLabel: string;
+    reimbursementLabel: string;
+    paymentMethodLabel: string;
+    cancelCta: string;
+    saveCta: string;
+    paymentMethods: {
+        check: string;
+        directDeposit: string;
+        historicalPayment: string;
+    };
+    errors: {
+        directDepositNotAvailable: string;
+        unsupportedPaymentMethod: string;
+    };
+}
+interface EditContractorPaymentPresentationProps {
+    isOpen: boolean;
+    onClose: () => void;
+    formMethods: UseFormReturn<EditContractorPaymentFormValues>;
+    onSubmit: (data: EditContractorPaymentFormValues) => void;
+    allowedPaymentMethods: ContractorPaymentMethod[];
+    contractorPaymentMethod?: string;
+    dictionary: EditContractorPaymentDictionary;
+}
+/** @internal */
+export declare const EditContractorPaymentPresentation: ({ isOpen, onClose, formMethods, onSubmit, allowedPaymentMethods, contractorPaymentMethod, dictionary, }: EditContractorPaymentPresentationProps) => import("react").JSX.Element;
+export {};

package/dist/components/Contractor/Payments/shared/SetPaymentAmounts/EditContractorPaymentPresentation.js

@@ -0,0 +1,128 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { useId as E, useState as I } from "react";
+import { useWatch as g, FormProvider as S } from "react-hook-form";
+import { useComponentContext as w } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { Flex as s } from "../../../../Common/Flex/Flex.js";
+import { ActionsLayout as T } from "../../../../Common/ActionsLayout/ActionsLayout.js";
+import { Form as j } from "../../../../Common/Form/Form.js";
+import q from "../../../../../hooks/useNumberFormatter.js";
+import { NumberInputField as i } from "../../../../Common/Fields/NumberInputField/NumberInputField.js";
+import { RadioGroupField as B } from "../../../../Common/Fields/RadioGroupField/RadioGroupField.js";
+const Y = ({
+  isOpen: x,
+  onClose: c,
+  formMethods: o,
+  onSubmit: u,
+  allowedPaymentMethods: p,
+  contractorPaymentMethod: v,
+  dictionary: e
+}) => {
+  const d = E(), { Modal: C, Button: h, Text: P, Heading: F } = w(), b = q("currency"), l = g({
+    name: "wageType",
+    control: o.control
+  }), n = g({
+    name: "hourlyRate",
+    control: o.control
+  }), N = (t) => {
+    const f = parseFloat(t.replace(/[^\d.]/g, ""));
+    return isNaN(f) ? 0 : f;
+  }, y = (t) => !n || n <= 0 ? "" : e.hoursPayDescription(
+    b(n),
+    b(t * n)
+  ), m = o.getValues("hours"), [H, M] = I(
+    y(
+      typeof m > "u" || Number.isNaN(m) ? 0 : m
+    )
+  ), L = v === "Check", D = o.formState.errors.paymentMethod?.message, k = D === "directDepositNotAvailable" ? e.errors.directDepositNotAvailable : D === "unsupportedPaymentMethod" ? e.errors.unsupportedPaymentMethod : void 0, R = {
+    Check: e.paymentMethods.check,
+    "Direct Deposit": e.paymentMethods.directDeposit,
+    "Historical Payment": e.paymentMethods.historicalPayment
+  }, A = p.map((t) => ({
+    value: t,
+    label: R[t],
+    isDisabled: t === "Direct Deposit" && L
+  }));
+  return /* @__PURE__ */ r(
+    C,
+    {
+      isOpen: x,
+      onClose: c,
+      footer: /* @__PURE__ */ a(T, { children: [
+        /* @__PURE__ */ r(h, { variant: "secondary", onClick: c, children: e.cancelCta }),
+        /* @__PURE__ */ r(
+          h,
+          {
+            variant: "primary",
+            type: "submit",
+            form: d,
+            onClick: () => o.handleSubmit(u),
+            children: e.saveCta
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ r(S, { ...o, children: /* @__PURE__ */ r(j, { id: d, onSubmit: o.handleSubmit(u), children: /* @__PURE__ */ a(s, { flexDirection: "column", gap: 32, children: [
+        /* @__PURE__ */ a(s, { flexDirection: "column", gap: 4, children: [
+          /* @__PURE__ */ r(F, { as: "h2", children: e.title }),
+          /* @__PURE__ */ r(P, { variant: "supporting", children: e.subtitle })
+        ] }),
+        /* @__PURE__ */ a(s, { flexDirection: "column", gap: 20, children: [
+          l === "Hourly" && /* @__PURE__ */ r(
+            i,
+            {
+              min: 0,
+              name: "hours",
+              isRequired: !0,
+              label: e.hoursLabel,
+              adornmentEnd: e.hoursAdornment,
+              description: n && n > 0 ? H : void 0,
+              onInputChange: (t) => {
+                M(y(N(t)));
+              }
+            }
+          ),
+          l === "Fixed" && /* @__PURE__ */ r(
+            i,
+            {
+              min: 0,
+              name: "wage",
+              isRequired: !0,
+              label: e.wageLabel,
+              format: "currency"
+            }
+          ),
+          l === "Hourly" && /* @__PURE__ */ r(
+            i,
+            {
+              min: 0,
+              name: "bonus",
+              label: e.bonusLabel,
+              format: "currency"
+            }
+          ),
+          /* @__PURE__ */ r(
+            i,
+            {
+              min: 0,
+              name: "reimbursement",
+              label: e.reimbursementLabel,
+              format: "currency"
+            }
+          )
+        ] }),
+        p.length > 1 && /* @__PURE__ */ r(s, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ r(
+          B,
+          {
+            name: "paymentMethod",
+            options: A,
+            label: e.paymentMethodLabel,
+            errorMessage: k
+          }
+        ) })
+      ] }) }) })
+    }
+  );
+};
+export {
+  Y as EditContractorPaymentPresentation
+};
+//# sourceMappingURL=EditContractorPaymentPresentation.js.map

package/dist/components/Contractor/Payments/shared/SetPaymentAmounts/EditContractorPaymentPresentation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditContractorPaymentPresentation.js","sources":["../../../../../../src/components/Contractor/Payments/shared/SetPaymentAmounts/EditContractorPaymentPresentation.tsx"],"sourcesContent":["import { useId, useState } from 'react'\nimport { FormProvider, useWatch, type UseFormReturn } from 'react-hook-form'\nimport type { PostV1CompaniesCompanyIdContractorPaymentGroupsPaymentMethod as ContractorPaymentMethod } from '@gusto/embedded-api/models/operations/postv1companiescompanyidcontractorpaymentgroups'\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 useNumberFormatter from '@/hooks/useNumberFormatter'\nimport type { RadioGroupOption } from '@/index'\n\n/**\n * Every string the edit-contractor-pay modal renders. `hoursPayDescription` is a formatter\n * rather than a translated string, since the rate/total it displays are computed at render\n * time and there's no i18next instance backing this component to interpolate them.\n *\n * @internal\n */\nexport interface EditContractorPaymentDictionary {\n  title: string\n  subtitle: string\n  hoursLabel: string\n  hoursAdornment: string\n  hoursPayDescription: (rate: string, total: string) => string\n  wageLabel: string\n  bonusLabel: string\n  reimbursementLabel: string\n  paymentMethodLabel: string\n  cancelCta: string\n  saveCta: string\n  paymentMethods: {\n    check: string\n    directDeposit: string\n    historicalPayment: string\n  }\n  errors: {\n    directDepositNotAvailable: string\n    unsupportedPaymentMethod: string\n  }\n}\n\ninterface EditContractorPaymentPresentationProps {\n  isOpen: boolean\n  onClose: () => void\n  formMethods: UseFormReturn<EditContractorPaymentFormValues>\n  onSubmit: (data: EditContractorPaymentFormValues) => void\n  allowedPaymentMethods: ContractorPaymentMethod[]\n  contractorPaymentMethod?: string\n  dictionary: EditContractorPaymentDictionary\n}\n\n/** @internal */\nexport const EditContractorPaymentPresentation = ({\n  isOpen,\n  onClose,\n  formMethods,\n  onSubmit,\n  allowedPaymentMethods,\n  contractorPaymentMethod,\n  dictionary,\n}: EditContractorPaymentPresentationProps) => {\n  const formId = useId()\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 dictionary.hoursPayDescription(\n      currencyFormatter(hourlyRate),\n      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 paymentMethodErrorCode = formMethods.formState.errors.paymentMethod?.message\n  const paymentMethodErrorMessage =\n    paymentMethodErrorCode === 'directDepositNotAvailable'\n      ? dictionary.errors.directDepositNotAvailable\n      : paymentMethodErrorCode === 'unsupportedPaymentMethod'\n        ? dictionary.errors.unsupportedPaymentMethod\n        : undefined\n\n  const paymentMethodLabels: Record<ContractorPaymentMethod, string> = {\n    Check: dictionary.paymentMethods.check,\n    'Direct Deposit': dictionary.paymentMethods.directDeposit,\n    'Historical Payment': dictionary.paymentMethods.historicalPayment,\n  }\n  const paymentMethodOptions: RadioGroupOption[] = allowedPaymentMethods.map(method => ({\n    value: method,\n    label: paymentMethodLabels[method],\n    isDisabled: method === 'Direct Deposit' && isDirectDepositDisabled,\n  }))\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onClose}\n      footer={\n        <ActionsLayout>\n          <Button variant=\"secondary\" onClick={onClose}>\n            {dictionary.cancelCta}\n          </Button>\n          <Button\n            variant=\"primary\"\n            type=\"submit\"\n            form={formId}\n            onClick={() => formMethods.handleSubmit(onSubmit)}\n          >\n            {dictionary.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\">{dictionary.title}</Heading>\n              <Text variant=\"supporting\">{dictionary.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={dictionary.hoursLabel}\n                  adornmentEnd={dictionary.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={dictionary.wageLabel}\n                  format=\"currency\"\n                />\n              )}\n\n              {wageType === 'Hourly' && (\n                <NumberInputField\n                  min={0}\n                  name=\"bonus\"\n                  label={dictionary.bonusLabel}\n                  format=\"currency\"\n                />\n              )}\n              <NumberInputField\n                min={0}\n                name=\"reimbursement\"\n                label={dictionary.reimbursementLabel}\n                format=\"currency\"\n              />\n            </Flex>\n\n            {allowedPaymentMethods.length > 1 && (\n              <Flex flexDirection=\"column\" gap={16}>\n                <RadioGroupField\n                  name=\"paymentMethod\"\n                  options={paymentMethodOptions}\n                  label={dictionary.paymentMethodLabel}\n                  errorMessage={paymentMethodErrorMessage}\n                />\n              </Flex>\n            )}\n          </Flex>\n        </Form>\n      </FormProvider>\n    </Modal>\n  )\n}\n"],"names":["EditContractorPaymentPresentation","isOpen","onClose","formMethods","onSubmit","allowedPaymentMethods","contractorPaymentMethod","dictionary","formId","useId","Modal","Button","Text","Heading","useComponentContext","currencyFormatter","useNumberFormatter","wageType","useWatch","hourlyRate","parseHours","raw","parsed","computeHoursPayDescription","hours","initialHours","hoursPayDescription","setHoursPayDescription","useState","isDirectDepositDisabled","paymentMethodErrorCode","paymentMethodErrorMessage","paymentMethodLabels","paymentMethodOptions","method","jsx","ActionsLayout","FormProvider","Form","jsxs","Flex","NumberInputField","RadioGroupField"],"mappings":"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"}

package/dist/components/Contractor/Payments/shared/SetPaymentAmounts/SetPaymentAmounts.d.ts

@@ -0,0 +1,52 @@
+import { Contractor } from '@gusto/embedded-api/models/components/contractor';
+import { PostV1CompaniesCompanyIdContractorPaymentGroupsContractorPayments as ContractorPayments, PostV1CompaniesCompanyIdContractorPaymentGroupsPaymentMethod as ContractorPaymentMethod } from '@gusto/embedded-api/models/operations/postv1companiescompanyidcontractorpaymentgroups';
+import { UsePaymentAmountsEditorReturn } from '../usePaymentAmountsEditor';
+import { EditContractorPaymentDictionary } from './EditContractorPaymentPresentation';
+/**
+ * Every string `SetPaymentAmounts` and its edit modal render. There is no default copy or
+ * namespace of its own — `SetPaymentAmounts` is `@internal`, so each caller (`CreatePayment`,
+ * `HistoricalPaymentAmounts`) must fully resolve this from its own public namespace and pass it
+ * down, rather than this component owning a namespace that would show up in the SDK's public
+ * translation types without ever being a real partner override surface.
+ *
+ * @internal
+ */
+export interface SetPaymentAmountsDictionary {
+    hoursAndPaymentsLabel: string;
+    contractorTableHeaders: {
+        contractor: string;
+        wageType: string;
+        paymentMethod: string;
+        hours: string;
+        wage: string;
+        bonus: string;
+        reimbursement: string;
+        total: string;
+    };
+    emptyTableTitle: string;
+    emptyTableDescription: string;
+    na: string;
+    totalsLabel: string;
+    editContractor: string;
+    perHour: string;
+    editContractorPayment: EditContractorPaymentDictionary;
+}
+/** @internal */
+export interface SetPaymentAmountsProps {
+    contractors: Contractor[];
+    contractorPayments: (ContractorPayments & {
+        isTouched?: boolean;
+    })[];
+    totals: {
+        wage: number;
+        bonus: number;
+        reimbursement: number;
+        total: number;
+    };
+    allowedPaymentMethods: ContractorPaymentMethod[];
+    editModal: UsePaymentAmountsEditorReturn['editModal'];
+    /** Every string the grid and edit modal render, resolved by the caller from its own namespace. */
+    dictionary: SetPaymentAmountsDictionary;
+}
+/** @internal */
+export declare const SetPaymentAmounts: ({ contractors, contractorPayments, totals, allowedPaymentMethods, editModal, dictionary, }: SetPaymentAmountsProps) => import("react").JSX.Element;