@gusto/embedded-react-sdk 0.44.2 → 0.45.0

package/dist/components/Company/OnboardingOverview/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../../../../src/components/Company/OnboardingOverview/context.ts"],"sourcesContent":["import type { OnboardingStep } from '@gusto/embedded-api/models/components/companyonboardingstatus'\nimport { createCompoundContext } from '@/components/Base'\n\ntype OnboardingOverviewContextType = {\n  onboardingCompleted?: boolean\n  onboardingSteps?: OnboardingStep[]\n  handleDone: () => void\n  handleContinue: () => void\n}\n\nconst [useOnboardingOverview, OnboardingOverviewProvider] =\n  createCompoundContext<OnboardingOverviewContextType>('OnboardingOverviewContext')\n\nexport { useOnboardingOverview, OnboardingOverviewProvider }\n"],"names":["useOnboardingOverview","OnboardingOverviewProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,MAAM,CAACA,GAAuBC,CAA0B,IACtDC,EAAqD,2BAA2B;"}
+{"version":3,"file":"context.js","sources":["../../../../src/components/Company/OnboardingOverview/context.ts"],"sourcesContent":["import type { OnboardingStep } from '@gusto/embedded-api/models/components/companyonboardingstatus'\nimport { createCompoundContext } from '@/components/Base'\n\ntype OnboardingOverviewContextType = {\n  onboardingCompleted?: boolean\n  onboardingSteps?: OnboardingStep[]\n  handleDone: () => void\n  handleContinue: () => void\n}\n\nconst [useOnboardingOverview, OnboardingOverviewProvider] =\n  createCompoundContext<OnboardingOverviewContextType>('OnboardingOverviewContext')\n\nexport { useOnboardingOverview, OnboardingOverviewProvider }\n"],"names":["useOnboardingOverview","OnboardingOverviewProvider","createCompoundContext"],"mappings":";;AAUA,MAAM,CAACA,GAAuBC,CAA0B,IACtDC,EAAqD,2BAA2B;"}

package/dist/components/Company/PaySchedule/PayScheduleList.js

@@ -5,16 +5,16 @@ import d from "./PayScheduleList.module.scss.js";
 import { Flex as r } from "../../Common/Flex/Flex.js";
 import "classnames";
 import { componentEvents as s } from "../../../shared/constants.js";
-import { ActionsLayout as C } from "../../Common/ActionsLayout/ActionsLayout.js";
+import { ActionsLayout as g } from "../../Common/ActionsLayout/ActionsLayout.js";
 import L from "../../../assets/icons/pencil.svg.js";
-import { useComponentContext as g } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { VisuallyHidden as D } from "../../Common/VisuallyHidden/VisuallyHidden.js";
-import { HamburgerMenu as v } from "../../Common/HamburgerMenu/HamburgerMenu.js";
-import { useDataView as P } from "../../Common/DataView/useDataView.js";
-import { DataView as x } from "../../Common/DataView/DataView.js";
-function F({ companyId: u, onEvent: c }) {
-  const { t } = f("Company.PaySchedule"), i = g(), { data: p } = S({ companyId: u }), h = P({
-    data: p.payScheduleShowResponse || [],
+import { useComponentContext as C } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { VisuallyHidden as v } from "../../Common/VisuallyHidden/VisuallyHidden.js";
+import { HamburgerMenu as D } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useDataView as x } from "../../Common/DataView/useDataView.js";
+import { DataView as P } from "../../Common/DataView/DataView.js";
+function F({ companyId: p, onEvent: c }) {
+  const { t } = f("Company.PaySchedule"), i = C(), { data: u } = S({ companyId: p }), h = x({
+    data: u.payScheduleShowResponse || [],
     columns: [
       {
         title: t("payScheduleList.name"),
@@ -31,13 +31,13 @@ function F({ companyId: u, onEvent: c }) {
         }
       },
       {
-        title: /* @__PURE__ */ e(D, { children: t("payScheduleList.active") }),
+        title: /* @__PURE__ */ e(v, { children: t("payScheduleList.active") }),
         key: "active",
         render: (n) => /* @__PURE__ */ e(r, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ e("div", { className: d.content, children: n.active ? /* @__PURE__ */ e(i.Badge, { status: "success", children: t("payScheduleList.active") }) : /* @__PURE__ */ e(i.Badge, { status: "info", children: t("payScheduleList.inactive") }) }) })
       }
     ],
     itemMenu: (n) => /* @__PURE__ */ e(
-      v,
+      D,
       {
         triggerLabel: "Actions",
         items: [
@@ -52,10 +52,10 @@ function F({ companyId: u, onEvent: c }) {
       }
     )
   });
-  return /* @__PURE__ */ o(r, { flexDirection: "column", children: [
-    /* @__PURE__ */ e(r, { justifyContent: "space-between", flexDirection: "column", gap: 4, children: /* @__PURE__ */ o("header", { children: [
+  return /* @__PURE__ */ o(r, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ e(r, { justifyContent: "space-between", flexDirection: "column", gap: 4, alignItems: "stretch", children: /* @__PURE__ */ e("header", { children: /* @__PURE__ */ o(r, { flexDirection: "column", gap: 4, children: [
       /* @__PURE__ */ e(i.Heading, { as: "h2", children: t("headings.pageTitle") }),
-      /* @__PURE__ */ e(i.Text, { children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(i.Text, { variant: "supporting", children: /* @__PURE__ */ e(
         m,
         {
           i18nKey: "listDescription",
@@ -63,7 +63,7 @@ function F({ companyId: u, onEvent: c }) {
           components: { ScheduleLink: /* @__PURE__ */ e(i.Link, {}) }
         }
       ) }),
-      /* @__PURE__ */ e(i.Text, { children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(i.Text, { variant: "supporting", children: /* @__PURE__ */ e(
         m,
         {
           i18nKey: "listDescription2",
@@ -71,9 +71,9 @@ function F({ companyId: u, onEvent: c }) {
           components: { PaymentLawLink: /* @__PURE__ */ e(i.Link, {}) }
         }
       ) })
-    ] }) }),
-    /* @__PURE__ */ e(x, { label: "test", ...h }),
-    /* @__PURE__ */ o(C, { children: [
+    ] }) }) }),
+    /* @__PURE__ */ e(P, { label: t("payScheduleListLabel"), ...h }),
+    /* @__PURE__ */ o(g, { children: [
       /* @__PURE__ */ e(
         i.Button,
         {

package/dist/components/Company/PaySchedule/PayScheduleList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayScheduleList.js","sources":["../../../../src/components/Company/PaySchedule/PayScheduleList.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'\nimport styles from './PayScheduleList.module.scss'\nimport { useDataView, DataView, Flex, VisuallyHidden, ActionsLayout } from '@/components/Common'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\ninterface PayScheduleListProps {\n  companyId: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport function PayScheduleList({ companyId, onEvent }: PayScheduleListProps) {\n  const { t } = useTranslation('Company.PaySchedule')\n  const Components = useComponentContext()\n\n  const { data: paySchedules } = usePaySchedulesGetAllSuspense({ companyId })\n\n  const dataViewProps = useDataView({\n    data: paySchedules.payScheduleShowResponse || [],\n    columns: [\n      {\n        title: t('payScheduleList.name'),\n        key: 'customName',\n        render: schedule => {\n          const hasName = !!schedule.name\n          let displayName = hasName ? schedule.name : schedule.customName\n          if (displayName && displayName.length > 1) {\n            displayName = displayName.charAt(0).toUpperCase() + displayName.slice(1)\n          } else {\n            displayName = schedule.customName\n          }\n          const displayFrequency = schedule.customName\n          return (\n            <Flex flexDirection=\"column\" gap={0}>\n              <div className={styles.content}>\n                <div>{displayName}</div>\n                {hasName && <div>{displayFrequency}</div>}\n              </div>\n            </Flex>\n          )\n        },\n      },\n      {\n        title: <VisuallyHidden>{t('payScheduleList.active')}</VisuallyHidden>,\n        key: 'active',\n        render: schedule => (\n          <Flex alignItems=\"center\" justifyContent=\"center\">\n            <div className={styles.content}>\n              {schedule.active ? (\n                <Components.Badge status=\"success\">{t('payScheduleList.active')}</Components.Badge>\n              ) : (\n                <Components.Badge status=\"info\">{t('payScheduleList.inactive')}</Components.Badge>\n              )}\n            </div>\n          </Flex>\n        ),\n      },\n    ],\n    itemMenu: schedule => (\n      <HamburgerMenu\n        triggerLabel=\"Actions\"\n        items={[\n          {\n            label: t('payScheduleList.edit'),\n            onClick: () => {\n              onEvent(componentEvents.PAY_SCHEDULE_UPDATE, { uuid: schedule.uuid })\n            },\n            icon: <PencilSvg aria-hidden />,\n          },\n        ]}\n      />\n    ),\n  })\n\n  return (\n    <Flex flexDirection=\"column\">\n      <Flex justifyContent=\"space-between\" flexDirection=\"column\" gap={4}>\n        <header>\n          <Components.Heading as=\"h2\">{t('headings.pageTitle')}</Components.Heading>\n          <Components.Text>\n            <Trans\n              i18nKey=\"listDescription\"\n              t={t}\n              components={{ ScheduleLink: <Components.Link /> }}\n            />\n          </Components.Text>\n          <Components.Text>\n            <Trans\n              i18nKey=\"listDescription2\"\n              t={t}\n              components={{ PaymentLawLink: <Components.Link /> }}\n            />\n          </Components.Text>\n        </header>\n      </Flex>\n      <DataView label=\"test\" {...dataViewProps} />\n      <ActionsLayout>\n        <Components.Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(componentEvents.PAY_SCHEDULE_CREATE)\n          }}\n        >\n          {t('addAnotherPayScheduleCta')}\n        </Components.Button>\n        <Components.Button\n          variant=\"primary\"\n          onClick={() => {\n            onEvent(componentEvents.PAY_SCHEDULE_DONE)\n          }}\n        >\n          {t('continueCta')}\n        </Components.Button>\n      </ActionsLayout>\n    </Flex>\n  )\n}\n"],"names":["PayScheduleList","companyId","onEvent","useTranslation","Components","useComponentContext","paySchedules","usePaySchedulesGetAllSuspense","dataViewProps","useDataView","schedule","hasName","displayName","displayFrequency","jsx","Flex","jsxs","styles","VisuallyHidden","HamburgerMenu","componentEvents","PencilSvg","Trans","DataView","ActionsLayout"],"mappings":"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"}
+{"version":3,"file":"PayScheduleList.js","sources":["../../../../src/components/Company/PaySchedule/PayScheduleList.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'\nimport styles from './PayScheduleList.module.scss'\nimport { useDataView, DataView, Flex, VisuallyHidden, ActionsLayout } from '@/components/Common'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\ninterface PayScheduleListProps {\n  companyId: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport function PayScheduleList({ companyId, onEvent }: PayScheduleListProps) {\n  const { t } = useTranslation('Company.PaySchedule')\n  const Components = useComponentContext()\n\n  const { data: paySchedules } = usePaySchedulesGetAllSuspense({ companyId })\n\n  const dataViewProps = useDataView({\n    data: paySchedules.payScheduleShowResponse || [],\n    columns: [\n      {\n        title: t('payScheduleList.name'),\n        key: 'customName',\n        render: schedule => {\n          const hasName = !!schedule.name\n          let displayName = hasName ? schedule.name : schedule.customName\n          if (displayName && displayName.length > 1) {\n            displayName = displayName.charAt(0).toUpperCase() + displayName.slice(1)\n          } else {\n            displayName = schedule.customName\n          }\n          const displayFrequency = schedule.customName\n          return (\n            <Flex flexDirection=\"column\" gap={0}>\n              <div className={styles.content}>\n                <div>{displayName}</div>\n                {hasName && <div>{displayFrequency}</div>}\n              </div>\n            </Flex>\n          )\n        },\n      },\n      {\n        title: <VisuallyHidden>{t('payScheduleList.active')}</VisuallyHidden>,\n        key: 'active',\n        render: schedule => (\n          <Flex alignItems=\"center\" justifyContent=\"center\">\n            <div className={styles.content}>\n              {schedule.active ? (\n                <Components.Badge status=\"success\">{t('payScheduleList.active')}</Components.Badge>\n              ) : (\n                <Components.Badge status=\"info\">{t('payScheduleList.inactive')}</Components.Badge>\n              )}\n            </div>\n          </Flex>\n        ),\n      },\n    ],\n    itemMenu: schedule => (\n      <HamburgerMenu\n        triggerLabel=\"Actions\"\n        items={[\n          {\n            label: t('payScheduleList.edit'),\n            onClick: () => {\n              onEvent(componentEvents.PAY_SCHEDULE_UPDATE, { uuid: schedule.uuid })\n            },\n            icon: <PencilSvg aria-hidden />,\n          },\n        ]}\n      />\n    ),\n  })\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex justifyContent=\"space-between\" flexDirection=\"column\" gap={4} alignItems=\"stretch\">\n        <header>\n          <Flex flexDirection=\"column\" gap={4}>\n            <Components.Heading as=\"h2\">{t('headings.pageTitle')}</Components.Heading>\n            <Components.Text variant=\"supporting\">\n              <Trans\n                i18nKey=\"listDescription\"\n                t={t}\n                components={{ ScheduleLink: <Components.Link /> }}\n              />\n            </Components.Text>\n            <Components.Text variant=\"supporting\">\n              <Trans\n                i18nKey=\"listDescription2\"\n                t={t}\n                components={{ PaymentLawLink: <Components.Link /> }}\n              />\n            </Components.Text>\n          </Flex>\n        </header>\n      </Flex>\n      <DataView label={t('payScheduleListLabel')} {...dataViewProps} />\n      <ActionsLayout>\n        <Components.Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(componentEvents.PAY_SCHEDULE_CREATE)\n          }}\n        >\n          {t('addAnotherPayScheduleCta')}\n        </Components.Button>\n        <Components.Button\n          variant=\"primary\"\n          onClick={() => {\n            onEvent(componentEvents.PAY_SCHEDULE_DONE)\n          }}\n        >\n          {t('continueCta')}\n        </Components.Button>\n      </ActionsLayout>\n    </Flex>\n  )\n}\n"],"names":["PayScheduleList","companyId","onEvent","useTranslation","Components","useComponentContext","paySchedules","usePaySchedulesGetAllSuspense","dataViewProps","useDataView","schedule","hasName","displayName","displayFrequency","jsx","Flex","jsxs","styles","VisuallyHidden","HamburgerMenu","componentEvents","PencilSvg","Trans","DataView","ActionsLayout"],"mappings":";;;;;;;;;;;;;;AAeO,SAASA,EAAgB,EAAE,WAAAC,GAAW,SAAAC,KAAiC;AAC5E,QAAM,EAAE,EAAA,IAAMC,EAAe,qBAAqB,GAC5CC,IAAaC,EAAA,GAEb,EAAE,MAAMC,EAAA,IAAiBC,EAA8B,EAAE,WAAAN,GAAW,GAEpEO,IAAgBC,EAAY;AAAA,IAChC,MAAMH,EAAa,2BAA2B,CAAA;AAAA,IAC9C,SAAS;AAAA,MACP;AAAA,QACE,OAAO,EAAE,sBAAsB;AAAA,QAC/B,KAAK;AAAA,QACL,QAAQ,CAAAI,MAAY;AAClB,gBAAMC,IAAU,CAAC,CAACD,EAAS;AAC3B,cAAIE,IAAcD,IAAUD,EAAS,OAAOA,EAAS;AACrD,UAAIE,KAAeA,EAAY,SAAS,IACtCA,IAAcA,EAAY,OAAO,CAAC,EAAE,gBAAgBA,EAAY,MAAM,CAAC,IAEvEA,IAAcF,EAAS;AAEzB,gBAAMG,IAAmBH,EAAS;AAClC,iBACE,gBAAAI,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,SACrB,UAAA;AAAA,YAAA,gBAAAH,EAAC,SAAK,UAAAF,EAAA,CAAY;AAAA,YACjBD,KAAW,gBAAAG,EAAC,OAAA,EAAK,UAAAD,EAAA,CAAiB;AAAA,UAAA,EAAA,CACrC,EAAA,CACF;AAAA,QAEJ;AAAA,MAAA;AAAA,MAEF;AAAA,QACE,OAAO,gBAAAC,EAACI,GAAA,EAAgB,UAAA,EAAE,wBAAwB,GAAE;AAAA,QACpD,KAAK;AAAA,QACL,QAAQ,CAAAR,MACN,gBAAAI,EAACC,GAAA,EAAK,YAAW,UAAS,gBAAe,UACvC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAO,SACpB,UAAAP,EAAS,SACR,gBAAAI,EAACV,EAAW,OAAX,EAAiB,QAAO,WAAW,UAAA,EAAE,wBAAwB,EAAA,CAAE,IAEhE,gBAAAU,EAACV,EAAW,OAAX,EAAiB,QAAO,QAAQ,UAAA,EAAE,0BAA0B,GAAE,GAEnE,EAAA,CACF;AAAA,MAAA;AAAA,IAEJ;AAAA,IAEF,UAAU,CAAAM,MACR,gBAAAI;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,cAAa;AAAA,QACb,OAAO;AAAA,UACL;AAAA,YACE,OAAO,EAAE,sBAAsB;AAAA,YAC/B,SAAS,MAAM;AACb,cAAAjB,EAAQkB,EAAgB,qBAAqB,EAAE,MAAMV,EAAS,MAAM;AAAA,YACtE;AAAA,YACA,MAAM,gBAAAI,EAACO,GAAA,EAAU,eAAW,GAAA,CAAC;AAAA,UAAA;AAAA,QAC/B;AAAA,MACF;AAAA,IAAA;AAAA,EACF,CAEH;AAED,SACE,gBAAAL,EAACD,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,KAAK,gBAAe,iBAAgB,eAAc,UAAS,KAAK,GAAG,YAAW,WAC7E,UAAA,gBAAAD,EAAC,YACC,UAAA,gBAAAE,EAACD,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAD,EAACV,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAA,EAAE,oBAAoB,GAAE;AAAA,MACrD,gBAAAU,EAACV,EAAW,MAAX,EAAgB,SAAQ,cACvB,UAAA,gBAAAU;AAAA,QAACQ;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR;AAAA,UACA,YAAY,EAAE,gCAAelB,EAAW,MAAX,CAAA,CAAgB,EAAA;AAAA,QAAG;AAAA,MAAA,GAEpD;AAAA,MACA,gBAAAU,EAACV,EAAW,MAAX,EAAgB,SAAQ,cACvB,UAAA,gBAAAU;AAAA,QAACQ;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR;AAAA,UACA,YAAY,EAAE,kCAAiBlB,EAAW,MAAX,CAAA,CAAgB,EAAA;AAAA,QAAG;AAAA,MAAA,EACpD,CACF;AAAA,IAAA,EAAA,CACF,GACF,GACF;AAAA,sBACCmB,GAAA,EAAS,OAAO,EAAE,sBAAsB,GAAI,GAAGf,GAAe;AAAA,sBAC9DgB,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAV;AAAA,QAACV,EAAW;AAAA,QAAX;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM;AACb,YAAAF,EAAQkB,EAAgB,mBAAmB;AAAA,UAC7C;AAAA,UAEC,YAAE,0BAA0B;AAAA,QAAA;AAAA,MAAA;AAAA,MAE/B,gBAAAN;AAAA,QAACV,EAAW;AAAA,QAAX;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM;AACb,YAAAF,EAAQkB,EAAgB,iBAAiB;AAAA,UAC3C;AAAA,UAEC,YAAE,aAAa;AAAA,QAAA;AAAA,MAAA;AAAA,IAClB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/Company/StateTaxes/StateTaxesForm/context.js

@@ -1,24 +1,8 @@
-import "react/jsx-runtime";
-import "react";
-import "react-error-boundary";
-import "react-i18next";
-import "@tanstack/react-query";
-import "../../../Base/useBase.js";
-import "@gusto/embedded-api/models/errors/apierror";
-import "@gusto/embedded-api/models/errors/gustoembeddederror";
-import "@gusto/embedded-api/models/errors/sdkvalidationerror";
-import "@gusto/embedded-api/models/errors/unprocessableentityerror";
-import "@gusto/embedded-api/models/errors/httpclienterrors";
-import "dompurify";
-import "../../../../contexts/LocaleProvider/useLocale.js";
-import "../../../../shared/constants.js";
-import "classnames";
-import "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import "../../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import { createCompoundContext as t } from "../../../Base/createCompoundContext.js";
-const [v, P] = t("StateTaxesFormContext");
+import "../../../Base/useBase.js";
+const [r, a] = t("StateTaxesFormContext");
 export {
-  P as StateTaxesFormProvider,
-  v as useStateTaxesForm
+  a as StateTaxesFormProvider,
+  r as useStateTaxesForm
 };
 //# sourceMappingURL=context.js.map

package/dist/components/Company/StateTaxes/StateTaxesForm/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../../../../../src/components/Company/StateTaxes/StateTaxesForm/context.ts"],"sourcesContent":["import type { TaxRequirementsState } from '@gusto/embedded-api/models/components/taxrequirementsstate'\nimport { createCompoundContext } from '@/components/Base'\n\ninterface StateTaxFormContext {\n  isPending: boolean\n  state: string\n  stateTaxRequirements: TaxRequirementsState\n  handleCancel: () => void\n}\n\nconst [useStateTaxesForm, StateTaxesFormProvider] =\n  createCompoundContext<StateTaxFormContext>('StateTaxesFormContext')\n\nexport { useStateTaxesForm, StateTaxesFormProvider }\n"],"names":["useStateTaxesForm","StateTaxesFormProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,MAAM,CAACA,GAAmBC,CAAsB,IAC9CC,EAA2C,uBAAuB;"}
+{"version":3,"file":"context.js","sources":["../../../../../src/components/Company/StateTaxes/StateTaxesForm/context.ts"],"sourcesContent":["import type { TaxRequirementsState } from '@gusto/embedded-api/models/components/taxrequirementsstate'\nimport { createCompoundContext } from '@/components/Base'\n\ninterface StateTaxFormContext {\n  isPending: boolean\n  state: string\n  stateTaxRequirements: TaxRequirementsState\n  handleCancel: () => void\n}\n\nconst [useStateTaxesForm, StateTaxesFormProvider] =\n  createCompoundContext<StateTaxFormContext>('StateTaxesFormContext')\n\nexport { useStateTaxesForm, StateTaxesFormProvider }\n"],"names":["useStateTaxesForm","StateTaxesFormProvider","createCompoundContext"],"mappings":";;AAUA,MAAM,CAACA,GAAmBC,CAAsB,IAC9CC,EAA2C,uBAAuB;"}

package/dist/components/Company/StateTaxes/StateTaxesList/context.js

@@ -1,24 +1,8 @@
-import "react/jsx-runtime";
-import "react";
-import "react-error-boundary";
-import "react-i18next";
-import "@tanstack/react-query";
-import "../../../Base/useBase.js";
-import "@gusto/embedded-api/models/errors/apierror";
-import "@gusto/embedded-api/models/errors/gustoembeddederror";
-import "@gusto/embedded-api/models/errors/sdkvalidationerror";
-import "@gusto/embedded-api/models/errors/unprocessableentityerror";
-import "@gusto/embedded-api/models/errors/httpclienterrors";
-import "dompurify";
-import "../../../../contexts/LocaleProvider/useLocale.js";
-import "../../../../shared/constants.js";
-import "classnames";
-import "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import "../../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import { createCompoundContext as t } from "../../../Base/createCompoundContext.js";
-const [v, P] = t("StateTaxesListContext");
+import "../../../Base/useBase.js";
+const [s, a] = t("StateTaxesListContext");
 export {
-  P as StateTaxesListProvider,
-  v as useStateTaxesList
+  a as StateTaxesListProvider,
+  s as useStateTaxesList
 };
 //# sourceMappingURL=context.js.map

package/dist/components/Company/StateTaxes/StateTaxesList/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../../../../../src/components/Company/StateTaxes/StateTaxesList/context.ts"],"sourcesContent":["import type { TaxRequirementStatesList } from '@gusto/embedded-api/models/components/taxrequirementstateslist'\nimport { createCompoundContext } from '@/components/Base'\n\ntype StateTaxesListContextType = {\n  isPending: boolean\n  stateTaxRequirements: TaxRequirementStatesList[]\n  handleContinue: () => void\n  handleChange: (state: string) => void\n}\n\nconst [useStateTaxesList, StateTaxesListProvider] =\n  createCompoundContext<StateTaxesListContextType>('StateTaxesListContext')\n\nexport { useStateTaxesList, StateTaxesListProvider }\n"],"names":["useStateTaxesList","StateTaxesListProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,MAAM,CAACA,GAAmBC,CAAsB,IAC9CC,EAAiD,uBAAuB;"}
+{"version":3,"file":"context.js","sources":["../../../../../src/components/Company/StateTaxes/StateTaxesList/context.ts"],"sourcesContent":["import type { TaxRequirementStatesList } from '@gusto/embedded-api/models/components/taxrequirementstateslist'\nimport { createCompoundContext } from '@/components/Base'\n\ntype StateTaxesListContextType = {\n  isPending: boolean\n  stateTaxRequirements: TaxRequirementStatesList[]\n  handleContinue: () => void\n  handleChange: (state: string) => void\n}\n\nconst [useStateTaxesList, StateTaxesListProvider] =\n  createCompoundContext<StateTaxesListContextType>('StateTaxesListContext')\n\nexport { useStateTaxesList, StateTaxesListProvider }\n"],"names":["useStateTaxesList","StateTaxesListProvider","createCompoundContext"],"mappings":";;AAUA,MAAM,CAACA,GAAmBC,CAAsB,IAC9CC,EAAiD,uBAAuB;"}

package/dist/components/Contractor/Address/useAddress.js

@@ -1,34 +1,18 @@
 import { z as t } from "zod";
-import "react/jsx-runtime";
-import "react";
-import "react-error-boundary";
-import "react-i18next";
-import "@tanstack/react-query";
-import "../../Base/useBase.js";
-import "@gusto/embedded-api/models/errors/apierror";
-import "@gusto/embedded-api/models/errors/gustoembeddederror";
-import "@gusto/embedded-api/models/errors/sdkvalidationerror";
-import "@gusto/embedded-api/models/errors/unprocessableentityerror";
-import "@gusto/embedded-api/models/errors/httpclienterrors";
-import "dompurify";
-import "../../../contexts/LocaleProvider/useLocale.js";
-import "../../../shared/constants.js";
-import "classnames";
-import "../../../contexts/ComponentAdapter/useComponentContext.js";
-import "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import { createCompoundContext as r } from "../../Base/createCompoundContext.js";
-const j = t.object({
+import "../../Base/useBase.js";
+const i = t.object({
   street1: t.string().min(1),
   street2: t.string().optional(),
   city: t.string().min(1),
   state: t.string().min(1),
   zip: t.string().min(1)
-}), [l, v] = r(
+}), [n, m] = r(
   "ContractorAddressContext"
 );
 export {
-  j as AddressFormSchema,
-  v as AddressProvider,
-  l as useAddress
+  i as AddressFormSchema,
+  m as AddressProvider,
+  n as useAddress
 };
 //# sourceMappingURL=useAddress.js.map

package/dist/components/Contractor/Address/useAddress.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAddress.js","sources":["../../../../src/components/Contractor/Address/useAddress.ts"],"sourcesContent":["import type { Contractor, ContractorType } from '@gusto/embedded-api/models/components/contractor'\nimport type { ContractorAddress } from '@gusto/embedded-api/models/components/contractoraddress'\nimport { z } from 'zod'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\nexport interface AddressContextType {\n  contractor?: Contractor\n  contractorType?: ContractorType\n  address?: ContractorAddress\n  isPending: boolean\n}\n\nexport type AddressDefaultValues = RequireAtLeastOne<\n  Pick<ContractorAddress, 'street1' | 'street2' | 'city' | 'state' | 'zip'>\n>\n\nexport const AddressFormSchema = z.object({\n  street1: z.string().min(1),\n  street2: z.string().optional(),\n  city: z.string().min(1),\n  state: z.string().min(1),\n  zip: z.string().min(1),\n})\n\nexport type AddressFormValues = z.infer<typeof AddressFormSchema>\n\nconst [useAddress, AddressProvider] = createCompoundContext<AddressContextType>(\n  'ContractorAddressContext',\n)\n\nexport { useAddress, AddressProvider }\n"],"names":["AddressFormSchema","z","useAddress","AddressProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,IAAoBC,EAAE,OAAO;AAAA,EACxC,SAASA,EAAE,SAAS,IAAI,CAAC;AAAA,EACzB,SAASA,EAAE,OAAA,EAAS,SAAA;AAAA,EACpB,MAAMA,EAAE,SAAS,IAAI,CAAC;AAAA,EACtB,OAAOA,EAAE,SAAS,IAAI,CAAC;AAAA,EACvB,KAAKA,EAAE,OAAA,EAAS,IAAI,CAAC;AACvB,CAAC,GAIK,CAACC,GAAYC,CAAe,IAAIC;AAAA,EACpC;AACF;"}
+{"version":3,"file":"useAddress.js","sources":["../../../../src/components/Contractor/Address/useAddress.ts"],"sourcesContent":["import type { Contractor, ContractorType } from '@gusto/embedded-api/models/components/contractor'\nimport type { ContractorAddress } from '@gusto/embedded-api/models/components/contractoraddress'\nimport { z } from 'zod'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\nexport interface AddressContextType {\n  contractor?: Contractor\n  contractorType?: ContractorType\n  address?: ContractorAddress\n  isPending: boolean\n}\n\nexport type AddressDefaultValues = RequireAtLeastOne<\n  Pick<ContractorAddress, 'street1' | 'street2' | 'city' | 'state' | 'zip'>\n>\n\nexport const AddressFormSchema = z.object({\n  street1: z.string().min(1),\n  street2: z.string().optional(),\n  city: z.string().min(1),\n  state: z.string().min(1),\n  zip: z.string().min(1),\n})\n\nexport type AddressFormValues = z.infer<typeof AddressFormSchema>\n\nconst [useAddress, AddressProvider] = createCompoundContext<AddressContextType>(\n  'ContractorAddressContext',\n)\n\nexport { useAddress, AddressProvider }\n"],"names":["AddressFormSchema","z","useAddress","AddressProvider","createCompoundContext"],"mappings":";;;AAiBO,MAAMA,IAAoBC,EAAE,OAAO;AAAA,EACxC,SAASA,EAAE,SAAS,IAAI,CAAC;AAAA,EACzB,SAASA,EAAE,OAAA,EAAS,SAAA;AAAA,EACpB,MAAMA,EAAE,SAAS,IAAI,CAAC;AAAA,EACtB,OAAOA,EAAE,SAAS,IAAI,CAAC;AAAA,EACvB,KAAKA,EAAE,OAAA,EAAS,IAAI,CAAC;AACvB,CAAC,GAIK,CAACC,GAAYC,CAAe,IAAIC;AAAA,EACpC;AACF;"}

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

@@ -40,7 +40,7 @@ const V = "0.000", ne = ({
   );
   return /* @__PURE__ */ l(a, { flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ l(a, { justifyContent: "flex-end", gap: 16, children: [
-      /* @__PURE__ */ l(a, { flexDirection: "column", gap: 16, children: [
+      /* @__PURE__ */ l(a, { flexDirection: "column", gap: 4, children: [
         /* @__PURE__ */ t(s, { as: "h2", children: r("title") }),
         /* @__PURE__ */ t(w, { variant: "supporting", children: r("paymentSpeedNotice", {
           count: x

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

@@ -1 +1 @@
-{"version":3,"file":"CreatePaymentPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/CreatePaymentPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport type { ContractorPayments } from '@gusto/embedded-api/models/operations/postv1companiescompanyidcontractorpaymentgroups'\nimport { useMemo } from 'react'\nimport type { InternalAlert } from '../types'\nimport { getContractorDisplayName } from './helpers'\nimport type { ApiPayrollBlocker } from '@/components/Payroll/PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '@/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts'\nimport { DataView, Flex, FlexItem, EmptyData } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface ContractorPaymentCreatePaymentPresentationProps {\n  contractors: Contractor[]\n  contractorPayments: (ContractorPayments & { isTouched?: boolean })[]\n  paymentDate: string\n  onPaymentDateChange: (date: string) => void\n  onSaveAndContinue: () => void\n  onEditContractor: (contractorUuid: string) => void\n  totals: {\n    wage: number\n    bonus: number\n    reimbursement: number\n    total: number\n  }\n  alerts: Record<string, InternalAlert>\n  payrollBlockers?: ApiPayrollBlocker[]\n  onViewBlockers?: () => void\n  isLoading: boolean\n  paymentSpeedDays: number\n}\n\nexport const CreatePaymentPresentation = ({\n  contractors,\n  paymentDate,\n  contractorPayments,\n  onPaymentDateChange,\n  onSaveAndContinue,\n  onEditContractor,\n  totals,\n  alerts,\n  payrollBlockers = [],\n  onViewBlockers,\n  isLoading,\n  paymentSpeedDays,\n}: ContractorPaymentCreatePaymentPresentationProps) => {\n  const { Button, Text, Heading, TextInput, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment')\n  const currencyFormatter = useNumberFormatter('currency')\n\n  const formatWageType = (contractor?: Contractor) => {\n    if (!contractor) return ''\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `${t('wageTypes.hourly')} ${currencyFormatter(Number(contractor.hourlyRate || '0'))}${t('perHour')}`\n    }\n    return contractor.wageType\n  }\n\n  const tableData = useMemo(\n    () =>\n      contractorPayments.map(payment => {\n        return {\n          ...payment,\n          contractorDetails: contractors.find(\n            contractor => contractor.uuid === payment.contractorUuid,\n          ),\n        }\n      }),\n    [contractorPayments, contractors],\n  )\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex justifyContent=\"flex-end\" gap={16}>\n        <Flex flexDirection=\"column\" gap={16}>\n          <Heading as=\"h2\">{t('title')}</Heading>\n          <Text variant=\"supporting\">\n            {t('paymentSpeedNotice', {\n              count: paymentSpeedDays,\n            })}\n          </Text>\n        </Flex>\n        <FlexItem>\n          <Button onClick={onSaveAndContinue} variant=\"primary\" isLoading={isLoading}>\n            {t('continueCta')}\n          </Button>\n        </FlexItem>\n      </Flex>\n\n      {payrollBlockers.length > 0 && (\n        <PayrollBlockerAlerts blockers={payrollBlockers} onViewBlockersClick={onViewBlockers} />\n      )}\n\n      {Object.values(alerts).map(alert => (\n        <Alert\n          key={alert.title}\n          label={alert.title}\n          onDismiss={alert.onDismiss}\n          status={alert.type}\n        >\n          {alert.content ?? null}\n        </Alert>\n      ))}\n\n      <Flex flexDirection=\"column\" gap={8}>\n        <TextInput\n          type=\"date\"\n          value={paymentDate}\n          onChange={onPaymentDateChange}\n          label={t('dateLabel')}\n          isRequired\n        />\n      </Flex>\n\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h3\">{t('hoursAndPaymentsLabel')}</Heading>\n        <DataView\n          columns={[\n            {\n              title: t('contractorTableHeaders.contractor'),\n              render: paymentData => getContractorDisplayName(paymentData.contractorDetails),\n            },\n            {\n              title: t('contractorTableHeaders.wageType'),\n              render: paymentData => formatWageType(paymentData.contractorDetails),\n            },\n            {\n              title: t('contractorTableHeaders.paymentMethod'),\n              render: paymentData => paymentData.paymentMethod || t('na'),\n            },\n            {\n              title: t('contractorTableHeaders.hours'),\n              render: paymentData => {\n                const hours = Number(paymentData.hours || '0')\n                return paymentData.contractorDetails?.wageType === 'Hourly' && hours\n                  ? formatHoursDisplay(hours)\n                  : ZERO_HOURS_DISPLAY\n              },\n            },\n            {\n              title: t('contractorTableHeaders.wage'),\n              render: paymentData => {\n                const amount =\n                  paymentData.contractorDetails?.wageType === 'Fixed' && paymentData.wage\n                    ? Number(paymentData.wage || '0')\n                    : 0\n                return currencyFormatter(amount)\n              },\n            },\n            {\n              title: t('contractorTableHeaders.bonus'),\n              render: paymentData => currencyFormatter(Number(paymentData.bonus || '0')),\n            },\n            {\n              title: t('contractorTableHeaders.reimbursement'),\n              render: paymentData => currencyFormatter(Number(paymentData.reimbursement || '0')),\n            },\n            {\n              title: t('contractorTableHeaders.total'),\n              render: ({ bonus, reimbursement, wage, hours, contractorDetails }) => {\n                const totalAmount =\n                  Number(bonus || '0') +\n                  Number(reimbursement || '0') +\n                  Number(wage || '0') +\n                  (contractorDetails?.wageType === 'Hourly' && hours\n                    ? Number(hours || '0') * Number(contractorDetails.hourlyRate || '0')\n                    : 0)\n                return currencyFormatter(totalAmount)\n              },\n            },\n          ]}\n          data={tableData}\n          footer={\n            tableData.length > 0\n              ? () => ({\n                  'column-0': t('totalsLabel'),\n                  'column-4': currencyFormatter(totals.wage),\n                  'column-5': currencyFormatter(totals.bonus),\n                  'column-6': currencyFormatter(totals.reimbursement),\n                  'column-7': currencyFormatter(totals.total),\n                })\n              : undefined\n          }\n          label={t('hoursAndPaymentsLabel')}\n          itemMenu={paymentData => (\n            <HamburgerMenu\n              items={[\n                {\n                  label: t('editContractor'),\n                  onClick: () => {\n                    onEditContractor(paymentData.contractorUuid!)\n                  },\n                },\n              ]}\n              triggerLabel={t('editContractor')}\n            />\n          )}\n          emptyState={() => (\n            <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')} />\n          )}\n        />\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","CreatePaymentPresentation","contractors","paymentDate","contractorPayments","onPaymentDateChange","onSaveAndContinue","onEditContractor","totals","alerts","payrollBlockers","onViewBlockers","isLoading","paymentSpeedDays","Button","Text","Heading","TextInput","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","tableData","useMemo","payment","jsxs","Flex","jsx","FlexItem","PayrollBlockerAlerts","alert","DataView","paymentData","getContractorDisplayName","hours","formatHoursDisplay","amount","bonus","reimbursement","wage","contractorDetails","totalAmount","HamburgerMenu","EmptyData"],"mappings":"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"}
+{"version":3,"file":"CreatePaymentPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/CreatePaymentPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport type { ContractorPayments } from '@gusto/embedded-api/models/operations/postv1companiescompanyidcontractorpaymentgroups'\nimport { useMemo } from 'react'\nimport type { InternalAlert } from '../types'\nimport { getContractorDisplayName } from './helpers'\nimport type { ApiPayrollBlocker } from '@/components/Payroll/PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '@/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts'\nimport { DataView, Flex, FlexItem, EmptyData } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface ContractorPaymentCreatePaymentPresentationProps {\n  contractors: Contractor[]\n  contractorPayments: (ContractorPayments & { isTouched?: boolean })[]\n  paymentDate: string\n  onPaymentDateChange: (date: string) => void\n  onSaveAndContinue: () => void\n  onEditContractor: (contractorUuid: string) => void\n  totals: {\n    wage: number\n    bonus: number\n    reimbursement: number\n    total: number\n  }\n  alerts: Record<string, InternalAlert>\n  payrollBlockers?: ApiPayrollBlocker[]\n  onViewBlockers?: () => void\n  isLoading: boolean\n  paymentSpeedDays: number\n}\n\nexport const CreatePaymentPresentation = ({\n  contractors,\n  paymentDate,\n  contractorPayments,\n  onPaymentDateChange,\n  onSaveAndContinue,\n  onEditContractor,\n  totals,\n  alerts,\n  payrollBlockers = [],\n  onViewBlockers,\n  isLoading,\n  paymentSpeedDays,\n}: ContractorPaymentCreatePaymentPresentationProps) => {\n  const { Button, Text, Heading, TextInput, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment')\n  const currencyFormatter = useNumberFormatter('currency')\n\n  const formatWageType = (contractor?: Contractor) => {\n    if (!contractor) return ''\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `${t('wageTypes.hourly')} ${currencyFormatter(Number(contractor.hourlyRate || '0'))}${t('perHour')}`\n    }\n    return contractor.wageType\n  }\n\n  const tableData = useMemo(\n    () =>\n      contractorPayments.map(payment => {\n        return {\n          ...payment,\n          contractorDetails: contractors.find(\n            contractor => contractor.uuid === payment.contractorUuid,\n          ),\n        }\n      }),\n    [contractorPayments, contractors],\n  )\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex justifyContent=\"flex-end\" gap={16}>\n        <Flex flexDirection=\"column\" gap={4}>\n          <Heading as=\"h2\">{t('title')}</Heading>\n          <Text variant=\"supporting\">\n            {t('paymentSpeedNotice', {\n              count: paymentSpeedDays,\n            })}\n          </Text>\n        </Flex>\n        <FlexItem>\n          <Button onClick={onSaveAndContinue} variant=\"primary\" isLoading={isLoading}>\n            {t('continueCta')}\n          </Button>\n        </FlexItem>\n      </Flex>\n\n      {payrollBlockers.length > 0 && (\n        <PayrollBlockerAlerts blockers={payrollBlockers} onViewBlockersClick={onViewBlockers} />\n      )}\n\n      {Object.values(alerts).map(alert => (\n        <Alert\n          key={alert.title}\n          label={alert.title}\n          onDismiss={alert.onDismiss}\n          status={alert.type}\n        >\n          {alert.content ?? null}\n        </Alert>\n      ))}\n\n      <Flex flexDirection=\"column\" gap={8}>\n        <TextInput\n          type=\"date\"\n          value={paymentDate}\n          onChange={onPaymentDateChange}\n          label={t('dateLabel')}\n          isRequired\n        />\n      </Flex>\n\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h3\">{t('hoursAndPaymentsLabel')}</Heading>\n        <DataView\n          columns={[\n            {\n              title: t('contractorTableHeaders.contractor'),\n              render: paymentData => getContractorDisplayName(paymentData.contractorDetails),\n            },\n            {\n              title: t('contractorTableHeaders.wageType'),\n              render: paymentData => formatWageType(paymentData.contractorDetails),\n            },\n            {\n              title: t('contractorTableHeaders.paymentMethod'),\n              render: paymentData => paymentData.paymentMethod || t('na'),\n            },\n            {\n              title: t('contractorTableHeaders.hours'),\n              render: paymentData => {\n                const hours = Number(paymentData.hours || '0')\n                return paymentData.contractorDetails?.wageType === 'Hourly' && hours\n                  ? formatHoursDisplay(hours)\n                  : ZERO_HOURS_DISPLAY\n              },\n            },\n            {\n              title: t('contractorTableHeaders.wage'),\n              render: paymentData => {\n                const amount =\n                  paymentData.contractorDetails?.wageType === 'Fixed' && paymentData.wage\n                    ? Number(paymentData.wage || '0')\n                    : 0\n                return currencyFormatter(amount)\n              },\n            },\n            {\n              title: t('contractorTableHeaders.bonus'),\n              render: paymentData => currencyFormatter(Number(paymentData.bonus || '0')),\n            },\n            {\n              title: t('contractorTableHeaders.reimbursement'),\n              render: paymentData => currencyFormatter(Number(paymentData.reimbursement || '0')),\n            },\n            {\n              title: t('contractorTableHeaders.total'),\n              render: ({ bonus, reimbursement, wage, hours, contractorDetails }) => {\n                const totalAmount =\n                  Number(bonus || '0') +\n                  Number(reimbursement || '0') +\n                  Number(wage || '0') +\n                  (contractorDetails?.wageType === 'Hourly' && hours\n                    ? Number(hours || '0') * Number(contractorDetails.hourlyRate || '0')\n                    : 0)\n                return currencyFormatter(totalAmount)\n              },\n            },\n          ]}\n          data={tableData}\n          footer={\n            tableData.length > 0\n              ? () => ({\n                  'column-0': t('totalsLabel'),\n                  'column-4': currencyFormatter(totals.wage),\n                  'column-5': currencyFormatter(totals.bonus),\n                  'column-6': currencyFormatter(totals.reimbursement),\n                  'column-7': currencyFormatter(totals.total),\n                })\n              : undefined\n          }\n          label={t('hoursAndPaymentsLabel')}\n          itemMenu={paymentData => (\n            <HamburgerMenu\n              items={[\n                {\n                  label: t('editContractor'),\n                  onClick: () => {\n                    onEditContractor(paymentData.contractorUuid!)\n                  },\n                },\n              ]}\n              triggerLabel={t('editContractor')}\n            />\n          )}\n          emptyState={() => (\n            <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')} />\n          )}\n        />\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","CreatePaymentPresentation","contractors","paymentDate","contractorPayments","onPaymentDateChange","onSaveAndContinue","onEditContractor","totals","alerts","payrollBlockers","onViewBlockers","isLoading","paymentSpeedDays","Button","Text","Heading","TextInput","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","tableData","useMemo","payment","jsxs","Flex","jsx","FlexItem","PayrollBlockerAlerts","alert","DataView","paymentData","getContractorDisplayName","hours","formatHoursDisplay","amount","bonus","reimbursement","wage","contractorDetails","totalAmount","HamburgerMenu","EmptyData"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAMA,IAAqB,SAsBdC,KAA4B,CAAC;AAAA,EACxC,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAA;AAAA,EAClB,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC;AACF,MAAuD;AACrD,QAAM,EAAE,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,GAAS,WAAAC,GAAW,OAAAC,EAAA,IAAUC,EAAA;AACpD,EAAAC,EAAQ,mCAAmC;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,mCAAmC,GAC1DC,IAAoBC,EAAmB,UAAU,GAEjDC,IAAiB,CAACC,MACjBA,IACDA,EAAW,aAAa,YAAYA,EAAW,aAC1C,GAAGL,EAAE,kBAAkB,CAAC,IAAIE,EAAkB,OAAOG,EAAW,cAAc,GAAG,CAAC,CAAC,GAAGL,EAAE,SAAS,CAAC,KAEpGK,EAAW,WAJM,IAOpBC,IAAYC;AAAA,IAChB,MACExB,EAAmB,IAAI,CAAAyB,OACd;AAAA,MACL,GAAGA;AAAA,MACH,mBAAmB3B,EAAY;AAAA,QAC7B,CAAAwB,MAAcA,EAAW,SAASG,EAAQ;AAAA,MAAA;AAAA,IAC5C,EAEH;AAAA,IACH,CAACzB,GAAoBF,CAAW;AAAA,EAAA;AAGlC,SACE,gBAAA4B,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,UAAAK,EAAE,OAAO,GAAE;AAAA,QAC7B,gBAAAW,EAACjB,GAAA,EAAK,SAAQ,cACX,YAAE,sBAAsB;AAAA,UACvB,OAAOF;AAAA,QAAA,CACR,EAAA,CACH;AAAA,MAAA,GACF;AAAA,MACA,gBAAAmB,EAACC,GAAA,EACC,UAAA,gBAAAD,EAAClB,GAAA,EAAO,SAASR,GAAmB,SAAQ,WAAU,WAAAM,GACnD,UAAAS,EAAE,aAAa,EAAA,CAClB,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAECX,EAAgB,SAAS,KACxB,gBAAAsB,EAACE,KAAqB,UAAUxB,GAAiB,qBAAqBC,GAAgB;AAAA,IAGvF,OAAO,OAAOF,CAAM,EAAE,IAAI,CAAA0B,MACzB,gBAAAH;AAAA,MAACd;AAAA,MAAA;AAAA,QAEC,OAAOiB,EAAM;AAAA,QACb,WAAWA,EAAM;AAAA,QACjB,QAAQA,EAAM;AAAA,QAEb,YAAM,WAAW;AAAA,MAAA;AAAA,MALbA,EAAM;AAAA,IAAA,CAOd;AAAA,IAED,gBAAAH,EAACD,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA,gBAAAC;AAAA,MAACf;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOd;AAAA,QACP,UAAUE;AAAA,QACV,OAAOgB,EAAE,WAAW;AAAA,QACpB,YAAU;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,IAEA,gBAAAS,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,MAAA,gBAAAC,EAAChB,GAAA,EAAQ,IAAG,MAAM,UAAAK,EAAE,uBAAuB,GAAE;AAAA,MAC7C,gBAAAW;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,YACP;AAAA,cACE,OAAOf,EAAE,mCAAmC;AAAA,cAC5C,QAAQ,CAAAgB,MAAeC,EAAyBD,EAAY,iBAAiB;AAAA,YAAA;AAAA,YAE/E;AAAA,cACE,OAAOhB,EAAE,iCAAiC;AAAA,cAC1C,QAAQ,CAAAgB,MAAeZ,EAAeY,EAAY,iBAAiB;AAAA,YAAA;AAAA,YAErE;AAAA,cACE,OAAOhB,EAAE,sCAAsC;AAAA,cAC/C,QAAQ,CAAAgB,MAAeA,EAAY,iBAAiBhB,EAAE,IAAI;AAAA,YAAA;AAAA,YAE5D;AAAA,cACE,OAAOA,EAAE,8BAA8B;AAAA,cACvC,QAAQ,CAAAgB,MAAe;AACrB,sBAAME,IAAQ,OAAOF,EAAY,SAAS,GAAG;AAC7C,uBAAOA,EAAY,mBAAmB,aAAa,YAAYE,IAC3DC,EAAmBD,CAAK,IACxBvC;AAAA,cACN;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAOqB,EAAE,6BAA6B;AAAA,cACtC,QAAQ,CAAAgB,MAAe;AACrB,sBAAMI,IACJJ,EAAY,mBAAmB,aAAa,WAAWA,EAAY,OAC/D,OAAOA,EAAY,QAAQ,GAAG,IAC9B;AACN,uBAAOd,EAAkBkB,CAAM;AAAA,cACjC;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAOpB,EAAE,8BAA8B;AAAA,cACvC,QAAQ,CAAAgB,MAAed,EAAkB,OAAOc,EAAY,SAAS,GAAG,CAAC;AAAA,YAAA;AAAA,YAE3E;AAAA,cACE,OAAOhB,EAAE,sCAAsC;AAAA,cAC/C,QAAQ,CAAAgB,MAAed,EAAkB,OAAOc,EAAY,iBAAiB,GAAG,CAAC;AAAA,YAAA;AAAA,YAEnF;AAAA,cACE,OAAOhB,EAAE,8BAA8B;AAAA,cACvC,QAAQ,CAAC,EAAE,OAAAqB,GAAO,eAAAC,GAAe,MAAAC,GAAM,OAAAL,GAAO,mBAAAM,QAAwB;AACpE,sBAAMC,IACJ,OAAOJ,KAAS,GAAG,IACnB,OAAOC,KAAiB,GAAG,IAC3B,OAAOC,KAAQ,GAAG,KACjBC,GAAmB,aAAa,YAAYN,IACzC,OAAOA,KAAS,GAAG,IAAI,OAAOM,EAAkB,cAAc,GAAG,IACjE;AACN,uBAAOtB,EAAkBuB,CAAW;AAAA,cACtC;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,MAAMnB;AAAA,UACN,QACEA,EAAU,SAAS,IACf,OAAO;AAAA,YACL,YAAYN,EAAE,aAAa;AAAA,YAC3B,YAAYE,EAAkBf,EAAO,IAAI;AAAA,YACzC,YAAYe,EAAkBf,EAAO,KAAK;AAAA,YAC1C,YAAYe,EAAkBf,EAAO,aAAa;AAAA,YAClD,YAAYe,EAAkBf,EAAO,KAAK;AAAA,UAAA,KAE5C;AAAA,UAEN,OAAOa,EAAE,uBAAuB;AAAA,UAChC,UAAU,CAAAgB,MACR,gBAAAL;AAAA,YAACe;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL;AAAA,kBACE,OAAO1B,EAAE,gBAAgB;AAAA,kBACzB,SAAS,MAAM;AACb,oBAAAd,EAAiB8B,EAAY,cAAe;AAAA,kBAC9C;AAAA,gBAAA;AAAA,cACF;AAAA,cAEF,cAAchB,EAAE,gBAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGpC,YAAY,MACV,gBAAAW,EAACgB,GAAA,EAAU,OAAO3B,EAAE,iBAAiB,GAAG,aAAaA,EAAE,uBAAuB,EAAA,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAErF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -1,5 +1,5 @@
 import { jsx as n, jsxs as t } from "react/jsx-runtime";
-import { useId as v } from "react";
+import { useId as k } from "react";
 import { useWatch as o, FormProvider as L } from "react-hook-form";
 import { useTranslation as R } from "react-i18next";
 import { useComponentContext as S } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
@@ -18,7 +18,7 @@ const Y = ({
   onSubmit: s,
   contractorPaymentMethod: b
 }) => {
-  const u = v();
+  const u = k();
   E("Contractor.Payments.CreatePayment");
   const { t: e } = R("Contractor.Payments.CreatePayment", {
     keyPrefix: "editContractorPayment"
@@ -40,12 +40,12 @@ const Y = ({
   }), P = o({
     name: "hourlyRate",
     control: r.control
-  }), F = (l === "Fixed" ? 0 : C || 0) + (D || 0) + (x || 0) + (g || 0) * (P || 0), w = b === "Check", k = [
+  }), F = (l === "Fixed" ? 0 : C || 0) + (D || 0) + (x || 0) + (g || 0) * (P || 0), v = b === "Check", w = [
     { value: "Check", label: e("paymentMethods.check") },
     {
       value: "Direct Deposit",
       label: e("paymentMethods.directDeposit"),
-      isDisabled: w
+      isDisabled: v
     }
     // { value: 'Historical Payment', label: t('paymentMethods.historicalPayment') },
   ];
@@ -68,9 +68,9 @@ const Y = ({
         )
       ] }),
       children: /* @__PURE__ */ n(L, { ...r, children: /* @__PURE__ */ n(A, { id: u, onSubmit: r.handleSubmit(s), children: /* @__PURE__ */ t(i, { flexDirection: "column", gap: 32, children: [
-        /* @__PURE__ */ t(i, { flexDirection: "column", gap: 16, children: [
+        /* @__PURE__ */ t(i, { flexDirection: "column", gap: 4, children: [
           /* @__PURE__ */ n(a, { as: "h2", children: e("title") }),
-          /* @__PURE__ */ n(p, { children: e("subtitle") }),
+          /* @__PURE__ */ n(p, { variant: "supporting", children: e("subtitle") }),
           /* @__PURE__ */ t(p, { weight: "bold", children: [
             e("totalPay"),
             ": ",
@@ -130,7 +130,7 @@ const Y = ({
           j,
           {
             name: "paymentMethod",
-            options: k,
+            options: w,
             label: e("paymentMethodLabel")
           }
         ) })

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

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

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

@@ -62,7 +62,7 @@ const _ = ({
     pagination: g
   });
   return /* @__PURE__ */ i(o, { flexDirection: "column", gap: 24, children: [
-    /* @__PURE__ */ n(o, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ n(l, { as: "h1", children: e("title") }) }),
+    /* @__PURE__ */ n(o, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ n(l, { as: "h1", styledAs: "h2", children: e("title") }) }),
     f && /* @__PURE__ */ n(V, { companyId: h, onEvent: b }),
     s.length > 0 && /* @__PURE__ */ n(o, { flexDirection: "column", gap: 16, children: s.map((t, w) => /* @__PURE__ */ n(
       P,
@@ -91,7 +91,7 @@ const _ = ({
         },
         justifyContent: "space-between",
         children: [
-          /* @__PURE__ */ n(l, { as: "h2", children: e("subtitle") }),
+          /* @__PURE__ */ n(l, { as: "h2", styledAs: "h4", children: e("subtitle") }),
           /* @__PURE__ */ i("div", { className: c.actionsContainer, children: [
             /* @__PURE__ */ n(
               C,

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 { 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\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        render: ({ totals }) => currencyFormatter(Number(totals?.wageAmount || 0)),\n      },\n      {\n        title: t('reimbursementTotalColumnLabel'),\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 variant=\"primary\" onClick={onCreatePayment}>\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\">{t('title')}</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: 'flex-end',\n        }}\n        justifyContent=\"space-between\"\n      >\n        <Heading as=\"h2\">{t('subtitle')}</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            shouldVisuallyHideLabel\n          />\n          <Button onClick={onCreatePayment} variant=\"secondary\" className={styles.nowrap}>\n            {t('createPaymentCta')}\n          </Button>\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","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 { 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\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        render: ({ totals }) => currencyFormatter(Number(totals?.wageAmount || 0)),\n      },\n      {\n        title: t('reimbursementTotalColumnLabel'),\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 variant=\"primary\" onClick={onCreatePayment}>\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: 'flex-end',\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            shouldVisuallyHideLabel\n          />\n          <Button onClick={onCreatePayment} variant=\"secondary\" className={styles.nowrap}>\n            {t('createPaymentCta')}\n          </Button>\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","jsxs","Flex","ConfirmWireDetails","alert","index","styles","value","DataView"],"mappings":"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"}