@gusto/embedded-react-sdk 0.22.0 → 0.23.0-rc.2

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

@@ -0,0 +1,132 @@
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useId as w } from "react";
+import { useWatch as a, FormProvider as k } from "react-hook-form";
+import { useTranslation as H } from "react-i18next";
+import { z as t } from "zod";
+import { useComponentContext as L } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { Flex as i } from "../../../Common/Flex/Flex.js";
+import { Grid as R } from "../../../Common/Grid/Grid.js";
+import "classnames";
+import { RadioGroupField as S } from "../../../Common/Fields/RadioGroupField/RadioGroupField.js";
+import { ActionsLayout as T } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { NumberInputField as c } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
+import { Form as E } from "../../../Common/Form/Form.js";
+import { useI18n as I } from "../../../../i18n/I18n.js";
+import j from "../../../../hooks/useNumberFormatter.js";
+const Y = t.object({
+  wageType: t.enum(["Hourly", "Fixed"]),
+  hours: t.number().nonnegative().max(2e4).optional(),
+  wage: t.number().nonnegative().optional(),
+  bonus: t.number().nonnegative().optional(),
+  reimbursement: t.number().nonnegative().optional(),
+  paymentMethod: t.enum(["Check", "Direct Deposit", "Historical Payment"]),
+  hourlyRate: t.number().nonnegative().optional(),
+  contractorUuid: t.string()
+}), Z = ({
+  isOpen: y,
+  onClose: u,
+  formMethods: o,
+  onSubmit: s
+}) => {
+  const d = w();
+  I("Contractor.Payments.CreatePayment");
+  const { t: e } = H("Contractor.Payments.CreatePayment", {
+    keyPrefix: "editContractorPayment"
+  }), { Modal: b, Button: p, Text: h, Heading: l } = L(), g = j("currency"), m = a({
+    name: "wageType",
+    control: o.control
+  }), f = a({
+    name: "hours",
+    control: o.control
+  }), x = a({
+    name: "wage",
+    control: o.control
+  }), C = a({
+    name: "bonus",
+    control: o.control
+  }), P = a({
+    name: "reimbursement",
+    control: o.control
+  }), v = a({
+    name: "hourlyRate",
+    control: o.control
+  }), D = (m === "Fixed" ? 0 : C || 0) + (P || 0) + (x || 0) + (f || 0) * (v || 0), F = [
+    { value: "Check", label: e("paymentMethods.check") },
+    { value: "Direct Deposit", label: e("paymentMethods.directDeposit") },
+    { value: "Historical Payment", label: e("paymentMethods.historicalPayment") }
+  ];
+  return /* @__PURE__ */ n(
+    b,
+    {
+      isOpen: y,
+      onClose: u,
+      footer: /* @__PURE__ */ r(T, { children: [
+        /* @__PURE__ */ n(p, { variant: "secondary", onClick: u, children: e("cancelCta") }),
+        /* @__PURE__ */ n(
+          p,
+          {
+            variant: "primary",
+            type: "submit",
+            form: d,
+            onClick: () => o.handleSubmit(s),
+            children: e("saveCta")
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ n(k, { ...o, children: /* @__PURE__ */ n(E, { id: d, onSubmit: o.handleSubmit(s), children: /* @__PURE__ */ r(i, { flexDirection: "column", gap: 32, children: [
+        /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
+          /* @__PURE__ */ n(l, { as: "h2", children: e("title") }),
+          /* @__PURE__ */ n(h, { children: e("subtitle") }),
+          /* @__PURE__ */ r(h, { weight: "bold", children: [
+            e("totalPay"),
+            ": ",
+            g(D)
+          ] })
+        ] }),
+        m === "Hourly" && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
+          /* @__PURE__ */ n(l, { as: "h3", children: e("hoursSection") }),
+          /* @__PURE__ */ n(
+            c,
+            {
+              name: "hours",
+              isRequired: !0,
+              label: e("hoursLabel"),
+              adornmentEnd: e("hoursAdornment")
+            }
+          )
+        ] }),
+        m === "Fixed" && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
+          /* @__PURE__ */ n(l, { as: "h3", children: e("fixedPaySection") }),
+          /* @__PURE__ */ n(c, { name: "wage", isRequired: !0, label: e("wageLabel"), format: "currency" })
+        ] }),
+        /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
+          /* @__PURE__ */ n(l, { as: "h3", children: e("additionalEarningsSection") }),
+          /* @__PURE__ */ r(R, { gridTemplateColumns: { base: "1fr", small: [200, 200] }, gap: 16, children: [
+            m === "Hourly" && /* @__PURE__ */ n(c, { name: "bonus", label: e("bonusLabel"), format: "currency" }),
+            /* @__PURE__ */ n(
+              c,
+              {
+                name: "reimbursement",
+                label: e("reimbursementLabel"),
+                format: "currency"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ n(i, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ n(
+          S,
+          {
+            name: "paymentMethod",
+            options: F,
+            label: e("paymentMethodLabel")
+          }
+        ) })
+      ] }) }) })
+    }
+  );
+};
+export {
+  Y as EditContractorPaymentFormSchema,
+  Z as EditContractorPaymentPresentation
+};
+//# sourceMappingURL=EditContractorPaymentPresentation.js.map

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

@@ -0,0 +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 { z } from 'zod'\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'\n\nexport const EditContractorPaymentFormSchema = z.object({\n  wageType: z.enum(['Hourly', 'Fixed']),\n  hours: z.number().nonnegative().max(20000).optional(),\n  wage: z.number().nonnegative().optional(),\n  bonus: z.number().nonnegative().optional(),\n  reimbursement: z.number().nonnegative().optional(),\n  paymentMethod: z.enum(['Check', 'Direct Deposit', 'Historical Payment']),\n  hourlyRate: z.number().nonnegative().optional(),\n  contractorUuid: z.string(),\n})\n\nexport type EditContractorPaymentFormValues = z.infer<typeof EditContractorPaymentFormSchema>\n\ninterface EditContractorPaymentPresentationProps {\n  isOpen: boolean\n  onClose: () => void\n  formMethods: UseFormReturn<EditContractorPaymentFormValues>\n  onSubmit: (data: EditContractorPaymentFormValues) => void\n}\n\nexport const EditContractorPaymentPresentation = ({\n  isOpen,\n  onClose,\n  formMethods,\n  onSubmit,\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 paymentMethodOptions = [\n    { value: 'Check', label: t('paymentMethods.check') },\n    { value: 'Direct Deposit', label: t('paymentMethods.directDeposit') },\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={16}>\n              <Heading as=\"h2\">{t('title')}</Heading>\n              <Text>{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                  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 name=\"wage\" isRequired label={t('wageLabel')} format=\"currency\" />\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 name=\"bonus\" label={t('bonusLabel')} format=\"currency\" />\n                )}\n                <NumberInputField\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":["EditContractorPaymentFormSchema","z","EditContractorPaymentPresentation","isOpen","onClose","formMethods","onSubmit","formId","useId","useI18n","t","useTranslation","Modal","Button","Text","Heading","useComponentContext","currencyFormatter","useNumberFormatter","wageType","useWatch","hours","wage","bonus","reimbursement","hourlyRate","totalAmount","paymentMethodOptions","jsx","ActionsLayout","FormProvider","Form","jsxs","Flex","NumberInputField","Grid","RadioGroupField"],"mappings":";;;;;;;;;;;;;;;AAUO,MAAMA,IAAkCC,EAAE,OAAO;AAAA,EACtD,UAAUA,EAAE,KAAK,CAAC,UAAU,OAAO,CAAC;AAAA,EACpC,OAAOA,EAAE,SAAS,cAAc,IAAI,GAAK,EAAE,SAAA;AAAA,EAC3C,MAAMA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EAC/B,OAAOA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EAChC,eAAeA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EACxC,eAAeA,EAAE,KAAK,CAAC,SAAS,kBAAkB,oBAAoB,CAAC;AAAA,EACvE,YAAYA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EACrC,gBAAgBA,EAAE,OAAA;AACpB,CAAC,GAWYC,IAAoC,CAAC;AAAA,EAChD,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AACF,MAA8C;AAC5C,QAAMC,IAASC,EAAA;AACf,EAAAC,EAAQ,mCAAmC;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,qCAAqC;AAAA,IAChE,WAAW;AAAA,EAAA,CACZ,GACK,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,EAAA,IAAYC,EAAA,GACnCC,IAAoBC,EAAmB,UAAU,GAEjDC,IAAWC,EAAsD;AAAA,IACrE,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKgB,IAAQD,EAAmD;AAAA,IAC/D,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKiB,IAAOF,EAAkD;AAAA,IAC7D,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKkB,IAAQH,EAAmD;AAAA,IAC/D,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKmB,IAAgBJ,EAA2D;AAAA,IAC/E,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKoB,IAAaL,EAAwD;AAAA,IACzE,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GAEKqB,KACHP,MAAa,UAAU,IAAII,KAAS,MACpCC,KAAiB,MACjBF,KAAQ,MACRD,KAAS,MAAMI,KAAc,IAE1BE,IAAuB;AAAA,IAC3B,EAAE,OAAO,SAAS,OAAOjB,EAAE,sBAAsB,EAAA;AAAA,IACjD,EAAE,OAAO,kBAAkB,OAAOA,EAAE,8BAA8B,EAAA;AAAA,IAClE,EAAE,OAAO,sBAAsB,OAAOA,EAAE,kCAAkC,EAAA;AAAA,EAAE;AAG9E,SACE,gBAAAkB;AAAA,IAAChB;AAAA,IAAA;AAAA,MACC,QAAAT;AAAA,MACA,SAAAC;AAAA,MACA,0BACGyB,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAD,EAACf,KAAO,SAAQ,aAAY,SAAST,GAClC,UAAAM,EAAE,WAAW,GAChB;AAAA,QACA,gBAAAkB;AAAA,UAACf;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,MAAMN;AAAA,YACN,SAAS,MAAMF,EAAY,aAAaC,CAAQ;AAAA,YAE/C,YAAE,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,GACF;AAAA,MAGF,4BAACwB,GAAA,EAAc,GAAGzB,GAChB,UAAA,gBAAAuB,EAACG,GAAA,EAAK,IAAIxB,GAAQ,UAAUF,EAAY,aAAaC,CAAQ,GAC3D,UAAA,gBAAA0B,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,OAAO,GAAE;AAAA,UAC7B,gBAAAkB,EAACd,GAAA,EAAM,UAAAJ,EAAE,UAAU,EAAA,CAAE;AAAA,UACrB,gBAAAsB,EAAClB,GAAA,EAAK,QAAO,QACV,UAAA;AAAA,YAAAJ,EAAE,UAAU;AAAA,YAAE;AAAA,YAAGO,EAAkBS,CAAW;AAAA,UAAA,EAAA,CACjD;AAAA,QAAA,GACF;AAAA,QAECP,MAAa,YACZ,gBAAAa,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,cAAc,GAAE;AAAA,UACpC,gBAAAkB;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,YAAU;AAAA,cACV,OAAOxB,EAAE,YAAY;AAAA,cACrB,cAAcA,EAAE,gBAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,QAClC,GACF;AAAA,QAGDS,MAAa,WACZ,gBAAAa,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,iBAAiB,GAAE;AAAA,UACvC,gBAAAkB,EAACM,GAAA,EAAiB,MAAK,QAAO,YAAU,IAAC,OAAOxB,EAAE,WAAW,GAAG,QAAO,WAAA,CAAW;AAAA,QAAA,GACpF;AAAA,QAGF,gBAAAsB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,2BAA2B,GAAE;AAAA,UACjD,gBAAAsB,EAACG,GAAA,EAAK,qBAAqB,EAAE,MAAM,OAAO,OAAO,CAAC,KAAK,GAAG,EAAA,GAAK,KAAK,IACjE,UAAA;AAAA,YAAAhB,MAAa,YACZ,gBAAAS,EAACM,GAAA,EAAiB,MAAK,SAAQ,OAAOxB,EAAE,YAAY,GAAG,QAAO,WAAA,CAAW;AAAA,YAE3E,gBAAAkB;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAOxB,EAAE,oBAAoB;AAAA,gBAC7B,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UACT,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAkB,EAACK,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA,gBAAAL;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAST;AAAA,YACT,OAAOjB,EAAE,oBAAoB;AAAA,UAAA;AAAA,QAAA,EAC/B,CACF;AAAA,MAAA,EAAA,CACF,GACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,11 @@
+import { ContractorPaymentGroupPreview } from '@gusto/embedded-api/models/components/contractorpaymentgrouppreview';
+import { Contractor } from '@gusto/embedded-api/models/components/contractor';
+interface PreviewPresentationProps {
+    contractorPaymentGroup: ContractorPaymentGroupPreview;
+    contractors: Contractor[];
+    onBackToEdit: () => void;
+    onSubmit: () => void;
+    isLoading: boolean;
+}
+export declare const PreviewPresentation: ({ contractorPaymentGroup, contractors, onBackToEdit, onSubmit, isLoading, }: PreviewPresentationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,139 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { useTranslation as w } from "react-i18next";
+import { useMemo as A } from "react";
+import { getContractorDisplayName as D } from "./helpers.js";
+import { Flex as u } from "../../../Common/Flex/Flex.js";
+import "classnames";
+import "../../../../shared/constants.js";
+import { useComponentContext as H } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as N } from "../../../../i18n/I18n.js";
+import { formatHoursDisplay as x } from "../../../Payroll/helpers.js";
+import C from "../../../../hooks/useNumberFormatter.js";
+import { DataView as b } from "../../../Common/DataView/DataView.js";
+const v = "0.000", U = ({
+  contractorPaymentGroup: i,
+  contractors: c,
+  onBackToEdit: h,
+  onSubmit: y,
+  isLoading: p
+}) => {
+  const { Button: s, Text: n, Heading: d, Alert: T } = H();
+  N("Contractor.Payments.CreatePayment");
+  const { t: r } = w("Contractor.Payments.CreatePayment", {
+    keyPrefix: "previewPresentation"
+  }), a = C(), g = (e) => e.wageType === "Hourly" && e.hourlyRate ? `${r("wageTypes.hourly")} ${a(Number(e.hourlyRate))}${r("perHour")}` : e.wageType, l = A(
+    () => i.contractorPayments?.reduce(
+      (e, o) => (e.wageAmount += Number(o.wage || "0"), e.bonusAmount += Number(o.bonus || "0"), e.reimbursementAmount += Number(o.reimbursement || "0"), e.totalAmount += Number(o.wageTotal || "0"), e),
+      { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 }
+    ),
+    [i.contractorPayments]
+  ), f = i.contractorPayments || [];
+  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__ */ t(d, { as: "h2", children: r("reviewAndSubmitTitle") }),
+        /* @__PURE__ */ t(n, { variant: "supporting", children: r("reviewSubtitle", { debitDate: i.debitDate }) })
+      ] }),
+      /* @__PURE__ */ m(u, { justifyContent: "flex-end", gap: 16, children: [
+        /* @__PURE__ */ t(s, { onClick: h, variant: "secondary", children: r("editButton") }),
+        /* @__PURE__ */ t(s, { onClick: y, variant: "primary", isLoading: p, children: r("submitButton") })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(
+      T,
+      {
+        status: "info",
+        label: r("alerts.submitPaymentsDeadline", {
+          checkDate: i.checkDate,
+          debitDate: i.debitDate
+        })
+      }
+    ),
+    /* @__PURE__ */ t(d, { as: "h3", children: r("paymentSummaryTitle") }),
+    /* @__PURE__ */ t(
+      b,
+      {
+        columns: [
+          {
+            title: r("summaryTableHeaders.totalAmount"),
+            render: () => /* @__PURE__ */ t(n, { children: a(Number(i.totals?.amount || "0")) })
+          },
+          {
+            title: r("summaryTableHeaders.debitAmount"),
+            render: () => /* @__PURE__ */ t(n, { children: a(Number(i.totals?.debitAmount || "0")) })
+          },
+          {
+            title: r("summaryTableHeaders.debitAccount"),
+            render: () => /* @__PURE__ */ t(n, { children: "debitAccount" })
+          },
+          {
+            title: r("summaryTableHeaders.debitDate"),
+            render: () => /* @__PURE__ */ t(n, { children: i.debitDate || "debitDate" })
+          },
+          {
+            title: r("summaryTableHeaders.contractorPayDate"),
+            render: () => /* @__PURE__ */ t(n, { children: i.checkDate || "contractorPayDate" })
+          }
+        ],
+        data: [i],
+        label: "Payment Summary"
+      }
+    ),
+    /* @__PURE__ */ t(
+      b,
+      {
+        columns: [
+          {
+            title: r("contractorTableHeaders.contractor"),
+            render: (e) => /* @__PURE__ */ t(n, { children: D(
+              c.find(
+                (o) => o.uuid === e.contractorUuid
+              )
+            ) })
+          },
+          {
+            title: r("contractorTableHeaders.wageType"),
+            render: (e) => /* @__PURE__ */ t(n, { children: g(e) })
+          },
+          {
+            title: r("contractorTableHeaders.paymentMethod"),
+            render: (e) => /* @__PURE__ */ t(n, { children: e.paymentMethod || "N/A" })
+          },
+          {
+            title: r("contractorTableHeaders.hours"),
+            render: (e) => /* @__PURE__ */ t(n, { children: e.wageType === "Hourly" && e.hours ? x(parseFloat(e.hours)) : v })
+          },
+          {
+            title: r("contractorTableHeaders.wage"),
+            render: (e) => /* @__PURE__ */ t(n, { children: e.wageType === "Fixed" && e.wage ? a(Number(e.wage || "0")) : a(0) })
+          },
+          {
+            title: r("contractorTableHeaders.bonus"),
+            render: (e) => /* @__PURE__ */ t(n, { children: a(Number(e.bonus || "0")) })
+          },
+          {
+            title: r("contractorTableHeaders.reimbursement"),
+            render: (e) => /* @__PURE__ */ t(n, { children: a(Number(e.reimbursement || "0")) })
+          },
+          {
+            title: r("contractorTableHeaders.total"),
+            render: (e) => /* @__PURE__ */ t(n, { children: a(Number(e.wageTotal || "0")) })
+          }
+        ],
+        data: f,
+        footer: () => ({
+          "column-0": /* @__PURE__ */ t(n, { weight: "bold", children: r("totalsLabel") }),
+          "column-4": /* @__PURE__ */ t(n, { children: a(Number(l?.wageAmount || "0")) }),
+          "column-5": /* @__PURE__ */ t(n, { children: a(Number(l?.bonusAmount || "0")) }),
+          "column-6": /* @__PURE__ */ t(n, { children: a(Number(l?.reimbursementAmount || "0")) }),
+          "column-7": /* @__PURE__ */ t(n, { children: a(Number(l?.totalAmount || "0")) })
+        }),
+        label: r("whatYourCompanyPays")
+      }
+    )
+  ] });
+};
+export {
+  U as PreviewPresentation
+};
+//# sourceMappingURL=PreviewPresentation.js.map

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

@@ -0,0 +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/models/components/contractorpaymentgrouppreview'\nimport type { ContractorPaymentForGroupPreview } from '@gusto/embedded-api/models/components/contractorpaymentforgrouppreview'\nimport { useMemo } from 'react'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport { getContractorDisplayName } from './helpers'\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'\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}\n\nexport const PreviewPresentation = ({\n  contractorPaymentGroup,\n  contractors,\n  onBackToEdit,\n  onSubmit,\n  isLoading,\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))}${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  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 onClick={onSubmit} variant=\"primary\" isLoading={isLoading}>\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      {/* Payment Summary */}\n      <Heading as=\"h3\">{t('paymentSummaryTitle')}</Heading>\n      <DataView\n        columns={[\n          {\n            title: t('summaryTableHeaders.totalAmount'),\n            render: () => (\n              <Text>{currencyFormatter(Number(contractorPaymentGroup.totals?.amount || '0'))}</Text>\n            ),\n          },\n          {\n            title: t('summaryTableHeaders.debitAmount'),\n            render: () => (\n              <Text>\n                {currencyFormatter(Number(contractorPaymentGroup.totals?.debitAmount || '0'))}\n              </Text>\n            ),\n          },\n          {\n            title: t('summaryTableHeaders.debitAccount'),\n            render: () => <Text>{'debitAccount'}</Text>,\n          },\n          {\n            title: t('summaryTableHeaders.debitDate'),\n            render: () => <Text>{contractorPaymentGroup.debitDate || 'debitDate'}</Text>,\n          },\n          {\n            title: t('summaryTableHeaders.contractorPayDate'),\n            render: () => <Text>{contractorPaymentGroup.checkDate || 'contractorPayDate'}</Text>,\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              <Text>\n                {getContractorDisplayName(\n                  contractors.find(\n                    contractor => contractor.uuid === contractorPayment.contractorUuid,\n                  ),\n                )}\n              </Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.wageType'),\n            render: contractorPayment => <Text>{formatWageType(contractorPayment)}</Text>,\n          },\n          {\n            title: t('contractorTableHeaders.paymentMethod'),\n            render: contractorPayment => <Text>{contractorPayment.paymentMethod || 'N/A'}</Text>,\n          },\n          {\n            title: t('contractorTableHeaders.hours'),\n            render: contractorPayment => (\n              <Text>\n                {contractorPayment.wageType === 'Hourly' && contractorPayment.hours\n                  ? formatHoursDisplay(parseFloat(contractorPayment.hours))\n                  : ZERO_HOURS_DISPLAY}\n              </Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.wage'),\n            render: contractorPayment => (\n              <Text>\n                {contractorPayment.wageType === 'Fixed' && contractorPayment.wage\n                  ? currencyFormatter(Number(contractorPayment.wage || '0'))\n                  : currencyFormatter(0)}\n              </Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.bonus'),\n            render: contractorPayment => (\n              <Text>{currencyFormatter(Number(contractorPayment.bonus || '0'))}</Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.reimbursement'),\n            render: contractorPayment => (\n              <Text>{currencyFormatter(Number(contractorPayment.reimbursement || '0'))}</Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.total'),\n            render: contractorPayment => (\n              <Text>{currencyFormatter(Number(contractorPayment.wageTotal || '0'))}</Text>\n            ),\n          },\n        ]}\n        data={contractorPayments}\n        footer={() => ({\n          'column-0': <Text weight=\"bold\">{t('totalsLabel')}</Text>,\n          'column-4': <Text>{currencyFormatter(Number(totals?.wageAmount || '0'))}</Text>,\n          'column-5': <Text>{currencyFormatter(Number(totals?.bonusAmount || '0'))}</Text>,\n          'column-6': <Text>{currencyFormatter(Number(totals?.reimbursementAmount || '0'))}</Text>,\n          'column-7': <Text>{currencyFormatter(Number(totals?.totalAmount || '0'))}</Text>,\n        })}\n        label={t('whatYourCompanyPays')}\n      />\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","PreviewPresentation","contractorPaymentGroup","contractors","onBackToEdit","onSubmit","isLoading","Button","Text","Heading","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","totals","useMemo","acc","contractorPayments","jsxs","Flex","jsx","DataView","contractorPayment","getContractorDisplayName","formatHoursDisplay"],"mappings":";;;;;;;;;;;;AAYA,MAAMA,IAAqB,SAUdC,IAAsB,CAAC;AAAA,EAClC,wBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,MAAgC;AAC9B,QAAM,EAAE,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,GAAS,OAAAC,EAAA,IAAUC,EAAA;AACzC,EAAAC,EAAQ,mCAAmC;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,qCAAqC;AAAA,IAChE,WAAW;AAAA,EAAA,CACZ,GACKC,IAAoBC,EAAA,GAEpBC,IAAiB,CAACC,MAClBA,EAAW,aAAa,YAAYA,EAAW,aAC1C,GAAGL,EAAE,kBAAkB,CAAC,IAAIE,EAAkB,OAAOG,EAAW,UAAU,CAAC,CAAC,GAAGL,EAAE,SAAS,CAAC,KAE7FK,EAAW,UAGdC,IAASC;AAAA,IACb,MACElB,EAAuB,oBAAoB;AAAA,MACzC,CAACmB,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,CAACnB,EAAuB,kBAAkB;AAAA,EAAA,GAGtCoB,IAAqBpB,EAAuB,sBAAsB,CAAA;AAExE,SACE,gBAAAqB,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,EAAChB,GAAA,EAAQ,IAAG,MAAM,UAAAI,EAAE,sBAAsB,GAAE;AAAA,QAC5C,gBAAAY,EAACjB,GAAA,EAAK,SAAQ,cACX,UAAAK,EAAE,kBAAkB,EAAE,WAAWX,EAAuB,UAAA,CAAW,EAAA,CACtE;AAAA,MAAA,GACF;AAAA,MACA,gBAAAqB,EAACC,GAAA,EAAK,gBAAe,YAAW,KAAK,IACnC,UAAA;AAAA,QAAA,gBAAAC,EAAClB,KAAO,SAASH,GAAc,SAAQ,aACpC,UAAAS,EAAE,YAAY,GACjB;AAAA,QACA,gBAAAY,EAAClB,KAAO,SAASF,GAAU,SAAQ,WAAU,WAAAC,GAC1C,UAAAO,EAAE,cAAc,EAAA,CACnB;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAEA,gBAAAY;AAAA,MAACf;AAAA,MAAA;AAAA,QACC,QAAO;AAAA,QACP,OAAOG,EAAE,iCAAiC;AAAA,UACxC,WAAWX,EAAuB;AAAA,UAClC,WAAWA,EAAuB;AAAA,QAAA,CACnC;AAAA,MAAA;AAAA,IAAA;AAAA,sBAIFO,GAAA,EAAQ,IAAG,MAAM,UAAAI,EAAE,qBAAqB,GAAE;AAAA,IAC3C,gBAAAY;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP;AAAA,YACE,OAAOb,EAAE,iCAAiC;AAAA,YAC1C,QAAQ,MACN,gBAAAY,EAACjB,GAAA,EAAM,UAAAO,EAAkB,OAAOb,EAAuB,QAAQ,UAAU,GAAG,CAAC,EAAA,CAAE;AAAA,UAAA;AAAA,UAGnF;AAAA,YACE,OAAOW,EAAE,iCAAiC;AAAA,YAC1C,QAAQ,MACN,gBAAAY,EAACjB,GAAA,EACE,UAAAO,EAAkB,OAAOb,EAAuB,QAAQ,eAAe,GAAG,CAAC,EAAA,CAC9E;AAAA,UAAA;AAAA,UAGJ;AAAA,YACE,OAAOW,EAAE,kCAAkC;AAAA,YAC3C,QAAQ,MAAM,gBAAAY,EAACjB,GAAA,EAAM,UAAA,eAAA,CAAe;AAAA,UAAA;AAAA,UAEtC;AAAA,YACE,OAAOK,EAAE,+BAA+B;AAAA,YACxC,QAAQ,MAAM,gBAAAY,EAACjB,GAAA,EAAM,UAAAN,EAAuB,aAAa,YAAA,CAAY;AAAA,UAAA;AAAA,UAEvE;AAAA,YACE,OAAOW,EAAE,uCAAuC;AAAA,YAChD,QAAQ,MAAM,gBAAAY,EAACjB,GAAA,EAAM,UAAAN,EAAuB,aAAa,oBAAA,CAAoB;AAAA,UAAA;AAAA,QAC/E;AAAA,QAEF,MAAM,CAACA,CAAsB;AAAA,QAC7B,OAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAIR,gBAAAuB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP;AAAA,YACE,OAAOb,EAAE,mCAAmC;AAAA,YAC5C,QAAQ,CAAAc,MACN,gBAAAF,EAACjB,GAAA,EACE,UAAAoB;AAAA,cACCzB,EAAY;AAAA,gBACV,CAAAe,MAAcA,EAAW,SAASS,EAAkB;AAAA,cAAA;AAAA,YACtD,EACF,CACF;AAAA,UAAA;AAAA,UAGJ;AAAA,YACE,OAAOd,EAAE,iCAAiC;AAAA,YAC1C,QAAQ,CAAAc,MAAqB,gBAAAF,EAACjB,GAAA,EAAM,UAAAS,EAAeU,CAAiB,EAAA,CAAE;AAAA,UAAA;AAAA,UAExE;AAAA,YACE,OAAOd,EAAE,sCAAsC;AAAA,YAC/C,QAAQ,CAAAc,MAAqB,gBAAAF,EAACjB,GAAA,EAAM,UAAAmB,EAAkB,iBAAiB,MAAA,CAAM;AAAA,UAAA;AAAA,UAE/E;AAAA,YACE,OAAOd,EAAE,8BAA8B;AAAA,YACvC,QAAQ,CAAAc,MACN,gBAAAF,EAACjB,GAAA,EACE,YAAkB,aAAa,YAAYmB,EAAkB,QAC1DE,EAAmB,WAAWF,EAAkB,KAAK,CAAC,IACtD3B,EAAA,CACN;AAAA,UAAA;AAAA,UAGJ;AAAA,YACE,OAAOa,EAAE,6BAA6B;AAAA,YACtC,QAAQ,CAAAc,MACN,gBAAAF,EAACjB,KACE,UAAAmB,EAAkB,aAAa,WAAWA,EAAkB,OACzDZ,EAAkB,OAAOY,EAAkB,QAAQ,GAAG,CAAC,IACvDZ,EAAkB,CAAC,EAAA,CACzB;AAAA,UAAA;AAAA,UAGJ;AAAA,YACE,OAAOF,EAAE,8BAA8B;AAAA,YACvC,QAAQ,CAAAc,MACN,gBAAAF,EAACjB,GAAA,EAAM,UAAAO,EAAkB,OAAOY,EAAkB,SAAS,GAAG,CAAC,EAAA,CAAE;AAAA,UAAA;AAAA,UAGrE;AAAA,YACE,OAAOd,EAAE,sCAAsC;AAAA,YAC/C,QAAQ,CAAAc,MACN,gBAAAF,EAACjB,GAAA,EAAM,UAAAO,EAAkB,OAAOY,EAAkB,iBAAiB,GAAG,CAAC,EAAA,CAAE;AAAA,UAAA;AAAA,UAG7E;AAAA,YACE,OAAOd,EAAE,8BAA8B;AAAA,YACvC,QAAQ,CAAAc,MACN,gBAAAF,EAACjB,GAAA,EAAM,UAAAO,EAAkB,OAAOY,EAAkB,aAAa,GAAG,CAAC,EAAA,CAAE;AAAA,UAAA;AAAA,QAEzE;AAAA,QAEF,MAAML;AAAA,QACN,QAAQ,OAAO;AAAA,UACb,YAAY,gBAAAG,EAACjB,GAAA,EAAK,QAAO,QAAQ,UAAAK,EAAE,aAAa,GAAE;AAAA,UAClD,8BAAaL,GAAA,EAAM,UAAAO,EAAkB,OAAOI,GAAQ,cAAc,GAAG,CAAC,EAAA,CAAE;AAAA,UACxE,8BAAaX,GAAA,EAAM,UAAAO,EAAkB,OAAOI,GAAQ,eAAe,GAAG,CAAC,EAAA,CAAE;AAAA,UACzE,8BAAaX,GAAA,EAAM,UAAAO,EAAkB,OAAOI,GAAQ,uBAAuB,GAAG,CAAC,EAAA,CAAE;AAAA,UACjF,8BAAaX,GAAA,EAAM,UAAAO,EAAkB,OAAOI,GAAQ,eAAe,GAAG,CAAC,EAAA,CAAE;AAAA,QAAA;AAAA,QAE3E,OAAON,EAAE,qBAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,EAChC,GACF;AAEJ;"}

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

@@ -0,0 +1,2 @@
+import { Contractor } from '@gusto/embedded-api/models/components/contractor';
+export declare const getContractorDisplayName: (contractor?: Contractor) => string;

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

@@ -0,0 +1,6 @@
+import { firstLastName as s } from "../../../../helpers/formattedStrings.js";
+const a = (e) => e ? e.type === "Individual" ? s({ first_name: e.firstName, last_name: e.lastName }) : e.businessName || "" : "";
+export {
+  a as getContractorDisplayName
+};
+//# sourceMappingURL=helpers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/helpers.ts"],"sourcesContent":["import type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport { firstLastName } from '@/helpers/formattedStrings'\n\nexport const getContractorDisplayName = (contractor?: Contractor): string => {\n  if (!contractor) {\n    return ''\n  }\n  if (contractor.type === 'Individual') {\n    return firstLastName({ first_name: contractor.firstName, last_name: contractor.lastName })\n  } else {\n    return contractor.businessName || ''\n  }\n}\n"],"names":["getContractorDisplayName","contractor","firstLastName"],"mappings":";AAGO,MAAMA,IAA2B,CAACC,MAClCA,IAGDA,EAAW,SAAS,eACfC,EAAc,EAAE,YAAYD,EAAW,WAAW,WAAWA,EAAW,UAAU,IAElFA,EAAW,gBAAgB,KAL3B;"}

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

@@ -1,3 +1,4 @@
+import { InternalAlert } from '../types';
 import { FlowContextInterface } from '../../../Flow/useFlow';
 import { BaseComponentInterface } from '../../../Base';
 import { BreadcrumbTrail } from '../../../Common/FlowBreadcrumbs/FlowBreadcrumbsTypes';
@@ -7,9 +8,9 @@ export interface PaymentFlowProps extends BaseComponentInterface {
 export interface PaymentFlowContextInterface extends FlowContextInterface {
     companyId: string;
     breadcrumbs?: BreadcrumbTrail;
+    currentPaymentId?: string;
+    alerts?: InternalAlert[];
 }
 export declare function PaymentListContextual(): import("react/jsx-runtime").JSX.Element;
 export declare function CreatePaymentContextual(): import("react/jsx-runtime").JSX.Element;
-export declare function EditPaymentContextual(): import("react/jsx-runtime").JSX.Element;
-export declare function OverviewPaymentContextual(): import("react/jsx-runtime").JSX.Element;
 export declare function PaymentHistoryContextual(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Contractor/Payments/PaymentFlow/PaymentFlowComponents.js

@@ -1,30 +1,31 @@
-import { jsx as o } from "react/jsx-runtime";
-import { PaymentsList as r } from "../PaymentsList/PaymentsList.js";
-import { CreatePayment as a } from "../CreatePayment/CreatePayment.js";
-import { EditPayment as i } from "../EditPayment/EditPayment.js";
-import { Overview as c } from "../Overview/Overview.js";
-import { useFlow as e } from "../../../Flow/useFlow.js";
-import { ensureRequired as m } from "../../../../helpers/ensureRequired.js";
+import { jsx as r } from "react/jsx-runtime";
+import { PaymentsList as a } from "../PaymentsList/PaymentsList.js";
+import { CreatePayment as y } from "../CreatePayment/CreatePayment.js";
+import { PaymentHistory as i } from "../PaymentHistory/PaymentHistory.js";
+import { useFlow as m } from "../../../Flow/useFlow.js";
+import { ensureRequired as o } from "../../../../helpers/ensureRequired.js";
 function I() {
-  const { companyId: t, onEvent: n } = e();
-  return /* @__PURE__ */ o(r, { onEvent: n, companyId: m(t) });
+  const { companyId: t, onEvent: n, alerts: e } = m();
+  return /* @__PURE__ */ r(a, { onEvent: n, companyId: o(t), alerts: e });
 }
 function P() {
-  const { companyId: t, onEvent: n } = e();
-  return /* @__PURE__ */ o(a, { onEvent: n, companyId: m(t) });
+  const { companyId: t, onEvent: n } = m();
+  return /* @__PURE__ */ r(y, { onEvent: n, companyId: o(t) });
 }
-function x() {
-  const { companyId: t, onEvent: n } = e();
-  return /* @__PURE__ */ o(i, { onEvent: n, companyId: m(t) });
-}
-function C() {
-  const { companyId: t, onEvent: n } = e();
-  return /* @__PURE__ */ o(c, { onEvent: n, companyId: m(t) });
+function l() {
+  const { companyId: t, currentPaymentId: n, onEvent: e } = m();
+  return /* @__PURE__ */ r(
+    i,
+    {
+      onEvent: e,
+      companyId: o(t),
+      paymentId: o(n)
+    }
+  );
 }
 export {
   P as CreatePaymentContextual,
-  x as EditPaymentContextual,
-  C as OverviewPaymentContextual,
+  l as PaymentHistoryContextual,
   I as PaymentListContextual
 };
 //# sourceMappingURL=PaymentFlowComponents.js.map

package/dist/components/Contractor/Payments/PaymentFlow/PaymentFlowComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentFlowComponents.js","sources":["../../../../../src/components/Contractor/Payments/PaymentFlow/PaymentFlowComponents.tsx"],"sourcesContent":["import { PaymentsList } from '../PaymentsList/PaymentsList'\nimport { CreatePayment } from '../CreatePayment/CreatePayment'\nimport { EditPayment } from '../EditPayment/EditPayment'\nimport { Overview } from '../Overview/Overview'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport type { BaseComponentInterface } from '@/components/Base'\n// import { ensureRequired } from '@/helpers/ensureRequired'\nimport type { BreadcrumbTrail } from '@/components/Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'\nimport { ensureRequired } from '@/helpers/ensureRequired'\n\nexport interface PaymentFlowProps extends BaseComponentInterface {\n  companyId: string\n}\n\nexport interface PaymentFlowContextInterface extends FlowContextInterface {\n  companyId: string\n  breadcrumbs?: BreadcrumbTrail\n}\n\nexport function PaymentListContextual() {\n  const { companyId, onEvent } = useFlow<PaymentFlowContextInterface>()\n  return <PaymentsList onEvent={onEvent} companyId={ensureRequired(companyId)} />\n}\n\nexport function CreatePaymentContextual() {\n  const { companyId, onEvent } = useFlow<PaymentFlowContextInterface>()\n  return <CreatePayment onEvent={onEvent} companyId={ensureRequired(companyId)} />\n}\n\nexport function EditPaymentContextual() {\n  const { companyId, onEvent } = useFlow<PaymentFlowContextInterface>()\n  return <EditPayment onEvent={onEvent} companyId={ensureRequired(companyId)} />\n}\n\nexport function OverviewPaymentContextual() {\n  const { companyId, onEvent } = useFlow<PaymentFlowContextInterface>()\n  return <Overview onEvent={onEvent} companyId={ensureRequired(companyId)} />\n}\n\nexport function PaymentHistoryContextual() {\n  return <div>PaymentHistoryContextual</div>\n}\n"],"names":["PaymentListContextual","companyId","onEvent","useFlow","PaymentsList","ensureRequired","CreatePaymentContextual","CreatePayment","EditPaymentContextual","EditPayment","OverviewPaymentContextual","Overview"],"mappings":";;;;;;;AAmBO,SAASA,IAAwB;AACtC,QAAM,EAAE,WAAAC,GAAW,SAAAC,EAAA,IAAYC,EAAA;AAC/B,2BAAQC,GAAA,EAAa,SAAAF,GAAkB,WAAWG,EAAeJ,CAAS,GAAG;AAC/E;AAEO,SAASK,IAA0B;AACxC,QAAM,EAAE,WAAAL,GAAW,SAAAC,EAAA,IAAYC,EAAA;AAC/B,2BAAQI,GAAA,EAAc,SAAAL,GAAkB,WAAWG,EAAeJ,CAAS,GAAG;AAChF;AAEO,SAASO,IAAwB;AACtC,QAAM,EAAE,WAAAP,GAAW,SAAAC,EAAA,IAAYC,EAAA;AAC/B,2BAAQM,GAAA,EAAY,SAAAP,GAAkB,WAAWG,EAAeJ,CAAS,GAAG;AAC9E;AAEO,SAASS,IAA4B;AAC1C,QAAM,EAAE,WAAAT,GAAW,SAAAC,EAAA,IAAYC,EAAA;AAC/B,2BAAQQ,GAAA,EAAS,SAAAT,GAAkB,WAAWG,EAAeJ,CAAS,GAAG;AAC3E;"}
+{"version":3,"file":"PaymentFlowComponents.js","sources":["../../../../../src/components/Contractor/Payments/PaymentFlow/PaymentFlowComponents.tsx"],"sourcesContent":["import { PaymentsList } from '../PaymentsList/PaymentsList'\nimport { CreatePayment } from '../CreatePayment/CreatePayment'\nimport { PaymentHistory } from '../PaymentHistory/PaymentHistory'\nimport type { InternalAlert } from '../types'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport type { BreadcrumbTrail } from '@/components/Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'\nimport { ensureRequired } from '@/helpers/ensureRequired'\n\nexport interface PaymentFlowProps extends BaseComponentInterface {\n  companyId: string\n}\n\nexport interface PaymentFlowContextInterface extends FlowContextInterface {\n  companyId: string\n  breadcrumbs?: BreadcrumbTrail\n  currentPaymentId?: string\n  alerts?: InternalAlert[]\n}\n\nexport function PaymentListContextual() {\n  const { companyId, onEvent, alerts } = useFlow<PaymentFlowContextInterface>()\n  return <PaymentsList onEvent={onEvent} companyId={ensureRequired(companyId)} alerts={alerts} />\n}\n\nexport function CreatePaymentContextual() {\n  const { companyId, onEvent } = useFlow<PaymentFlowContextInterface>()\n  return <CreatePayment onEvent={onEvent} companyId={ensureRequired(companyId)} />\n}\n\nexport function PaymentHistoryContextual() {\n  const { companyId, currentPaymentId, onEvent } = useFlow<PaymentFlowContextInterface>()\n  return (\n    <PaymentHistory\n      onEvent={onEvent}\n      companyId={ensureRequired(companyId)}\n      paymentId={ensureRequired(currentPaymentId)}\n    />\n  )\n}\n"],"names":["PaymentListContextual","companyId","onEvent","alerts","useFlow","PaymentsList","ensureRequired","CreatePaymentContextual","CreatePayment","PaymentHistoryContextual","currentPaymentId","jsx","PaymentHistory"],"mappings":";;;;;;AAoBO,SAASA,IAAwB;AACtC,QAAM,EAAE,WAAAC,GAAW,SAAAC,GAAS,QAAAC,EAAA,IAAWC,EAAA;AACvC,2BAAQC,GAAA,EAAa,SAAAH,GAAkB,WAAWI,EAAeL,CAAS,GAAG,QAAAE,GAAgB;AAC/F;AAEO,SAASI,IAA0B;AACxC,QAAM,EAAE,WAAAN,GAAW,SAAAC,EAAA,IAAYE,EAAA;AAC/B,2BAAQI,GAAA,EAAc,SAAAN,GAAkB,WAAWI,EAAeL,CAAS,GAAG;AAChF;AAEO,SAASQ,IAA2B;AACzC,QAAM,EAAE,WAAAR,GAAW,kBAAAS,GAAkB,SAAAR,EAAA,IAAYE,EAAA;AACjD,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAV;AAAA,MACA,WAAWI,EAAeL,CAAS;AAAA,MACnC,WAAWK,EAAeI,CAAgB;AAAA,IAAA;AAAA,EAAA;AAGhD;"}

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

@@ -3,6 +3,5 @@ export declare const paymentFlowBreadcrumbsNodes: BreadcrumbNodes;
 export declare const paymentMachine: {
     landing: import('robot3').MachineState<any>;
     createPayment: import('robot3').MachineState<any>;
-    editPayment: import('robot3').MachineState<any>;
-    overview: import('robot3').MachineState<any>;
+    history: import('robot3').MachineState<any>;
 };

package/dist/components/Contractor/Payments/PaymentFlow/paymentStateMachine.js

@@ -1,9 +1,9 @@
-import { state as o, transition as r, reduce as n } from "robot3";
-import { PaymentListContextual as d, CreatePaymentContextual as c, OverviewPaymentContextual as l, EditPaymentContextual as y } from "./PaymentFlowComponents.js";
+import { state as r, transition as n, reduce as o } from "robot3";
+import { PaymentListContextual as c, CreatePaymentContextual as s, PaymentHistoryContextual as l } from "./PaymentFlowComponents.js";
 import { componentEvents as m } from "../../../../shared/constants.js";
 import { updateBreadcrumbs as t } from "../../../../helpers/breadcrumbHelpers.js";
-import { createBreadcrumbNavigateTransition as p } from "../../../Common/FlowBreadcrumbs/breadcrumbTransitionHelpers.js";
-const C = {
+import { createBreadcrumbNavigateTransition as y } from "../../../Common/FlowBreadcrumbs/breadcrumbTransitionHelpers.js";
+const v = {
   landing: {
     parent: null,
     item: {
@@ -14,7 +14,7 @@ const C = {
         ...e,
         currentBreadcrumb: "landing",
         progressBarType: null,
-        component: d
+        component: c
       }))
     }
   },
@@ -53,106 +53,70 @@ const C = {
     }
   },
   history: {
-    parent: "overview",
+    parent: "landing",
     item: {
       id: "receipts",
       label: "breadcrumbLabel",
-      namespace: "Payroll.PayrollReceipts"
+      namespace: "Contractor.Payments.PaymentHistory"
     }
   }
-}, s = (e) => (a) => ({
-  ...a,
-  ...e
-}), i = p(), g = {
-  landing: o(
-    r(
+}, d = y(), T = {
+  landing: r(
+    n(
       m.CONTRACTOR_PAYMENT_CREATE,
       "createPayment",
-      n(
+      o(
         (e, a) => ({
           ...t("createPayment", e),
-          component: c,
-          progressBarType: "breadcrumbs"
-        })
-      )
-    )
-  ),
-  createPayment: o(
-    r(
-      m.CONTRACTOR_PAYMENT_REVIEW,
-      "overview",
-      n(
-        (e, a) => ({
-          ...t("overview", e),
-          component: l
-        })
-      )
-    ),
-    r(
-      m.CONTRACTOR_PAYMENT_EDIT,
-      "editPayment",
-      n(
-        (e, a) => ({
-          ...t("editPayment", e),
-          component: y,
-          progressBarType: null
+          component: s,
+          progressBarType: "breadcrumbs",
+          alerts: void 0
         })
       )
     ),
-    i("landing")
-  ),
-  editPayment: o(
-    //TODO: should not update breadcrumbs here, just hide progress bar
-    r(
-      m.CONTRACTOR_PAYMENT_UPDATE,
-      "createPayment",
-      n(
+    n(
+      m.CONTRACTOR_PAYMENT_VIEW,
+      "history",
+      o(
         (e, a) => ({
-          ...t("createPayment", e),
-          component: c,
-          currentBreadcrumbId: "createPayment"
-        })
-      )
-    ),
-    r(
-      m.CANCEL,
-      "createPayment",
-      n(
-        s({
+          ...t("history", e),
+          component: l,
+          currentPaymentId: a.payload.paymentId,
           progressBarType: "breadcrumbs",
-          component: c,
-          currentBreadcrumbId: "createPayment"
+          alerts: void 0
         })
       )
-    ),
-    i("landing")
+    )
   ),
-  overview: o(
-    r(
-      m.CONTRACTOR_PAYMENT_SUBMIT,
+  createPayment: r(
+    n(
+      m.CONTRACTOR_PAYMENT_CREATED,
       "landing",
-      n(
-        (e, a) => ({
-          ...t("landing", e),
-          component: d,
-          progressBarType: null
-        })
+      o(
+        (e, a) => {
+          const i = a.payload.contractorPayments?.length || 0;
+          return {
+            ...t("landing", e),
+            component: c,
+            alerts: [
+              {
+                type: "success",
+                title: "paymentCreatedSuccessfully",
+                translationParams: {
+                  count: i
+                }
+              }
+            ]
+          };
+        }
       )
     ),
-    r(
-      m.CONTRACTOR_PAYMENT_CREATE,
-      "createPayment",
-      n(
-        (e, a) => ({
-          ...t("createPayment", e),
-          component: c
-        })
-      )
-    )
-  )
+    d("landing")
+  ),
+  history: r()
 };
 export {
-  C as paymentFlowBreadcrumbsNodes,
-  g as paymentMachine
+  v as paymentFlowBreadcrumbsNodes,
+  T as paymentMachine
 };
 //# sourceMappingURL=paymentStateMachine.js.map