npm - @gusto/embedded-react-sdk - Versions diffs - 0.52.2 → 0.53.0 - Mend

@gusto/embedded-react-sdk 0.52.2 → 0.53.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (459) hide show

package/dist/components/Flow/FlowHeader.js CHANGED Viewed

@@ -2,12 +2,11 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { useTranslation as m } from "react-i18next";
 import { FlowBreadcrumbs as f } from "../Common/FlowBreadcrumbs/FlowBreadcrumbs.js";
 import { Flex as l, FlexItem as a } from "../Common/Flex/Flex.js";
-import { useComponentContext as u } from "../../contexts/ComponentAdapter/useComponentContext.js";
-import "react";
 import { useFlow as s } from "./useFlow.js";
 import { componentEvents as b } from "../../shared/constants.js";
+import { useComponentContext as u } from "../../contexts/ComponentAdapter/useComponentContext.js";
 import h from "../../assets/icons/caret-left.svg.js";
-function L() {
+function I() {
   const { header: e, component: t } = s();
   if (!e || !t) return null;
   switch (e.type) {
@@ -88,6 +87,6 @@ function v({
   ] });
 }
 export {
-  L as FlowHeader
+  I as FlowHeader
 };
 //# sourceMappingURL=FlowHeader.js.map

package/dist/components/Flow/FlowHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlowHeader.js","sources":["../../../src/components/Flow/FlowHeader.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { CustomTypeOptions } from 'i18next'\nimport { FlowBreadcrumbs } from '../Common/FlowBreadcrumbs/FlowBreadcrumbs'\nimport type { BreadcrumbTrail } from '../Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'\nimport { Flex } from '../Common/Flex'\nimport { FlexItem } from '../Common'\nimport { useFlow } from './useFlow'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport CaretLeftIcon from '@/assets/icons/caret-left.svg?react'\n\n/*\n Renders the chrome above the active flow component (back affordance, progress bar, breadcrumbs).\n \n @remarks\n * Reads the discriminated `header` value from {@link FlowContext} and dispatches to the matching\n * internal renderer:\n \n - `header.type === 'minimal'` — back button and optional CTA.\n * - `header.type === 'progress'` — step indicator with `currentStep` / `totalSteps`.\n * - `header.type === 'breadcrumbs'` — breadcrumb trail; renders nothing while\n * `currentBreadcrumbId` is absent so passive states (e.g. landing screens) don't reset the bar.\n \n When no `header` is configured, or there is no active `component` in context, nothing is\n * rendered. To add a new chrome variant: extend {@link FlowHeaderConfig}, add a renderer below,\n * and add a branch here.\n \n @returns A header element above the active flow component, or `null` when no header should show.\n * @internal\n */\nexport function FlowHeader() {\n const { header, component } = useFlow()\n\n if (!header \|\| !component) return null\n\n switch (header.type) {\n case 'minimal':\n return <MinimalHeader back={header.back} cta={header.cta} />\n case 'progress':\n return (\n <ProgressHeader\n currentStep={header.currentStep}\n totalSteps={header.totalSteps}\n cta={header.cta}\n />\n )\n case 'breadcrumbs':\n // The breadcrumb trail is intentionally persisted across \"passive\"\n // states (e.g. landing screens) so that subsequent transitions can\n // pick up where they left off without rebuilding it. We render the\n // bar only when there's an active breadcrumb to show; otherwise\n // we treat the flow as \"no chrome\" for this state.\n if (!header.currentBreadcrumbId) return null\n return (\n <BreadcrumbsHeader\n currentBreadcrumbId={header.currentBreadcrumbId}\n breadcrumbs={header.breadcrumbs}\n cta={header.cta}\n />\n )\n }\n}\n\nfunction MinimalHeader({\n back,\n cta: Cta,\n}: {\n back?: {\n labelKey: string\n namespace: keyof CustomTypeOptions['resources']\n event: EventType\n }\n cta?: React.ComponentType\n}) {\n const { onEvent } = useFlow()\n const Components = useComponentContext()\n const { t } = useTranslation(back?.namespace)\n\n const label = back ? t(back.labelKey as never) : t('back')\n const event = back?.event ?? componentEvents.CANCEL\n\n return (\n <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n <FlexItem>\n <Components.Button\n variant=\"secondary\"\n icon={<CaretLeftIcon aria-hidden=\"true\" />}\n onClick={() => {\n onEvent(event, undefined)\n }}\n >\n {label}\n </Components.Button>\n </FlexItem>\n {Cta && (\n <FlexItem>\n <Cta />\n </FlexItem>\n )}\n </Flex>\n )\n}\n\nfunction ProgressHeader({\n currentStep,\n totalSteps,\n cta: Cta,\n}: {\n currentStep: number\n totalSteps: number\n cta?: React.ComponentType\n}) {\n const Components = useComponentContext()\n const { t } = useTranslation()\n\n return (\n <Components.ProgressBar\n totalSteps={totalSteps}\n currentStep={currentStep}\n label={t('progressBarLabel', { totalSteps, currentStep })}\n cta={Cta}\n />\n )\n}\n\nfunction BreadcrumbsHeader({\n currentBreadcrumbId,\n breadcrumbs = {},\n cta: Cta,\n}: {\n currentBreadcrumbId?: string\n breadcrumbs?: BreadcrumbTrail\n cta?: React.ComponentType\n}) {\n const { onEvent } = useFlow()\n\n return (\n <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n <FlexItem flexGrow={1}>\n <FlowBreadcrumbs\n breadcrumbs={currentBreadcrumbId ? (breadcrumbs[currentBreadcrumbId] ?? []) : []}\n currentBreadcrumbId={currentBreadcrumbId}\n onEvent={onEvent}\n />\n </FlexItem>\n <FlexItem>{Cta && <Cta />}</FlexItem>\n </Flex>\n )\n}\n"],"names":["FlowHeader","header","component","useFlow","MinimalHeader","jsx","ProgressHeader","BreadcrumbsHeader","back","Cta","onEvent","Components","useComponentContext","t","useTranslation","label","event","componentEvents","Flex","FlexItem","CaretLeftIcon","currentStep","totalSteps","currentBreadcrumbId","breadcrumbs","FlowBreadcrumbs"],"mappings":"~~;;;;;;;;;~~AA8BO,SAASA,IAAa;AAC3B,QAAM,EAAE,QAAAC,GAAQ,WAAAC,EAAA,IAAcC,EAAA;AAE9B,MAAI,CAACF,KAAU,CAACC,EAAW,QAAO;AAElC,UAAQD,EAAO,MAAA;AAAA,IACb,KAAK;AACH,+BAAQG,GAAA,EAAc,MAAMH,EAAO,MAAM,KAAKA,EAAO,KAAK;AAAA,IAC5D,KAAK;AACH,aACE,gBAAAI;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,aAAaL,EAAO;AAAA,UACpB,YAAYA,EAAO;AAAA,UACnB,KAAKA,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAGlB,KAAK;AAMH,aAAKA,EAAO,sBAEV,gBAAAI;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,qBAAqBN,EAAO;AAAA,UAC5B,aAAaA,EAAO;AAAA,UACpB,KAAKA,EAAO;AAAA,QAAA;AAAA,MAAA,IALwB;AAAA,EAMtC;AAGR;AAEA,SAASG,EAAc;AAAA,EACrB,MAAAI;AAAA,EACA,KAAKC;AACP,GAOG;AACD,QAAM,EAAE,SAAAC,EAAA,IAAYP,EAAA,GACdQ,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAeN,GAAM,SAAS,GAEtCO,IAAeF,EAAPL,IAASA,EAAK,WAAuB,MAAN,GACvCQ,IAAQR,GAAM,SAASS,EAAgB;AAE7C,2BACGC,GAAA,EAAK,eAAc,OAAM,gBAAe,iBAAgB,YAAW,UAClE,UAAA;AAAA,IAAA,gBAAAb,EAACc,GAAA,EACC,UAAA,gBAAAd;AAAA,MAACM,EAAW;AAAA,MAAX;AAAA,QACC,SAAQ;AAAA,QACR,MAAM,gBAAAN,EAACe,GAAA,EAAc,eAAY,OAAA,CAAO;AAAA,QACxC,SAAS,MAAM;AACb,UAAAV,EAAQM,GAAO,MAAS;AAAA,QAC1B;AAAA,QAEC,UAAAD;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IACCN,KACC,gBAAAJ,EAACc,GAAA,EACC,UAAA,gBAAAd,EAACI,KAAI,EAAA,CACP;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAASH,EAAe;AAAA,EACtB,aAAAe;AAAA,EACA,YAAAC;AAAA,EACA,KAAKb;AACP,GAIG;AACD,QAAME,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SACE,gBAAAT;AAAA,IAACM,EAAW;AAAA,IAAX;AAAA,MACC,YAAAW;AAAA,MACA,aAAAD;AAAA,MACA,OAAOR,EAAE,oBAAoB,EAAE,YAAAS,GAAY,aAAAD,GAAa;AAAA,MACxD,KAAKZ;AAAA,IAAA;AAAA,EAAA;AAGX;AAEA,SAASF,EAAkB;AAAA,EACzB,qBAAAgB;AAAA,EACA,aAAAC,IAAc,CAAA;AAAA,EACd,KAAKf;AACP,GAIG;AACD,QAAM,EAAE,SAAAC,EAAA,IAAYP,EAAA;AAEpB,2BACGe,GAAA,EAAK,eAAc,OAAM,gBAAe,iBAAgB,YAAW,UAClE,UAAA;AAAA,IAAA,gBAAAb,EAACc,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAd;AAAA,MAACoB;AAAA,MAAA;AAAA,QACC,aAAaF,IAAuBC,EAAYD,CAAmB,KAAK,CAAA,IAAM,CAAA;AAAA,QAC9E,qBAAAA;AAAA,QACA,SAAAb;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAL,EAACc,GAAA,EAAU,UAAAV,KAAO,gBAAAJ,EAACI,KAAI,EAAA,CAAG;AAAA,EAAA,GAC5B;AAEJ;"}
1	+ {"version":3,"file":"FlowHeader.js","sources":["../../../src/components/Flow/FlowHeader.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { CustomTypeOptions } from 'i18next'\nimport { FlowBreadcrumbs } from '../Common/FlowBreadcrumbs/FlowBreadcrumbs'\nimport type { BreadcrumbTrail } from '../Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'\nimport { Flex } from '../Common/Flex'\nimport { FlexItem } from '../Common'\nimport { useFlow } from './useFlow'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport CaretLeftIcon from '@/assets/icons/caret-left.svg?react'\n\n/*\n Renders the chrome above the active flow component (back affordance, progress bar, breadcrumbs).\n \n @remarks\n * Reads the discriminated `header` value from {@link FlowContext} and dispatches to the matching\n * internal renderer:\n \n - `header.type === 'minimal'` — back button and optional CTA.\n * - `header.type === 'progress'` — step indicator with `currentStep` / `totalSteps`.\n * - `header.type === 'breadcrumbs'` — breadcrumb trail; renders nothing while\n * `currentBreadcrumbId` is absent so passive states (e.g. landing screens) don't reset the bar.\n \n When no `header` is configured, or there is no active `component` in context, nothing is\n * rendered. To add a new chrome variant: extend {@link FlowHeaderConfig}, add a renderer below,\n * and add a branch here.\n \n @returns A header element above the active flow component, or `null` when no header should show.\n * @internal\n */\nexport function FlowHeader() {\n const { header, component } = useFlow()\n\n if (!header \|\| !component) return null\n\n switch (header.type) {\n case 'minimal':\n return <MinimalHeader back={header.back} cta={header.cta} />\n case 'progress':\n return (\n <ProgressHeader\n currentStep={header.currentStep}\n totalSteps={header.totalSteps}\n cta={header.cta}\n />\n )\n case 'breadcrumbs':\n // The breadcrumb trail is intentionally persisted across \"passive\"\n // states (e.g. landing screens) so that subsequent transitions can\n // pick up where they left off without rebuilding it. We render the\n // bar only when there's an active breadcrumb to show; otherwise\n // we treat the flow as \"no chrome\" for this state.\n if (!header.currentBreadcrumbId) return null\n return (\n <BreadcrumbsHeader\n currentBreadcrumbId={header.currentBreadcrumbId}\n breadcrumbs={header.breadcrumbs}\n cta={header.cta}\n />\n )\n }\n}\n\nfunction MinimalHeader({\n back,\n cta: Cta,\n}: {\n back?: {\n labelKey: string\n namespace: keyof CustomTypeOptions['resources']\n event: EventType\n }\n cta?: React.ComponentType\n}) {\n const { onEvent } = useFlow()\n const Components = useComponentContext()\n const { t } = useTranslation(back?.namespace)\n\n const label = back ? t(back.labelKey as never) : t('back')\n const event = back?.event ?? componentEvents.CANCEL\n\n return (\n <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n <FlexItem>\n <Components.Button\n variant=\"secondary\"\n icon={<CaretLeftIcon aria-hidden=\"true\" />}\n onClick={() => {\n onEvent(event, undefined)\n }}\n >\n {label}\n </Components.Button>\n </FlexItem>\n {Cta && (\n <FlexItem>\n <Cta />\n </FlexItem>\n )}\n </Flex>\n )\n}\n\nfunction ProgressHeader({\n currentStep,\n totalSteps,\n cta: Cta,\n}: {\n currentStep: number\n totalSteps: number\n cta?: React.ComponentType\n}) {\n const Components = useComponentContext()\n const { t } = useTranslation()\n\n return (\n <Components.ProgressBar\n totalSteps={totalSteps}\n currentStep={currentStep}\n label={t('progressBarLabel', { totalSteps, currentStep })}\n cta={Cta}\n />\n )\n}\n\nfunction BreadcrumbsHeader({\n currentBreadcrumbId,\n breadcrumbs = {},\n cta: Cta,\n}: {\n currentBreadcrumbId?: string\n breadcrumbs?: BreadcrumbTrail\n cta?: React.ComponentType\n}) {\n const { onEvent } = useFlow()\n\n return (\n <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n <FlexItem flexGrow={1}>\n <FlowBreadcrumbs\n breadcrumbs={currentBreadcrumbId ? (breadcrumbs[currentBreadcrumbId] ?? []) : []}\n currentBreadcrumbId={currentBreadcrumbId}\n onEvent={onEvent}\n />\n </FlexItem>\n <FlexItem>{Cta && <Cta />}</FlexItem>\n </Flex>\n )\n}\n"],"names":["FlowHeader","header","component","useFlow","MinimalHeader","jsx","ProgressHeader","BreadcrumbsHeader","back","Cta","onEvent","Components","useComponentContext","t","useTranslation","label","event","componentEvents","Flex","FlexItem","CaretLeftIcon","currentStep","totalSteps","currentBreadcrumbId","breadcrumbs","FlowBreadcrumbs"],"mappings":";;;;;;;;AA8BO,SAASA,IAAa;AAC3B,QAAM,EAAE,QAAAC,GAAQ,WAAAC,EAAA,IAAcC,EAAA;AAE9B,MAAI,CAACF,KAAU,CAACC,EAAW,QAAO;AAElC,UAAQD,EAAO,MAAA;AAAA,IACb,KAAK;AACH,+BAAQG,GAAA,EAAc,MAAMH,EAAO,MAAM,KAAKA,EAAO,KAAK;AAAA,IAC5D,KAAK;AACH,aACE,gBAAAI;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,aAAaL,EAAO;AAAA,UACpB,YAAYA,EAAO;AAAA,UACnB,KAAKA,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAGlB,KAAK;AAMH,aAAKA,EAAO,sBAEV,gBAAAI;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,qBAAqBN,EAAO;AAAA,UAC5B,aAAaA,EAAO;AAAA,UACpB,KAAKA,EAAO;AAAA,QAAA;AAAA,MAAA,IALwB;AAAA,EAMtC;AAGR;AAEA,SAASG,EAAc;AAAA,EACrB,MAAAI;AAAA,EACA,KAAKC;AACP,GAOG;AACD,QAAM,EAAE,SAAAC,EAAA,IAAYP,EAAA,GACdQ,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAeN,GAAM,SAAS,GAEtCO,IAAeF,EAAPL,IAASA,EAAK,WAAuB,MAAN,GACvCQ,IAAQR,GAAM,SAASS,EAAgB;AAE7C,2BACGC,GAAA,EAAK,eAAc,OAAM,gBAAe,iBAAgB,YAAW,UAClE,UAAA;AAAA,IAAA,gBAAAb,EAACc,GAAA,EACC,UAAA,gBAAAd;AAAA,MAACM,EAAW;AAAA,MAAX;AAAA,QACC,SAAQ;AAAA,QACR,MAAM,gBAAAN,EAACe,GAAA,EAAc,eAAY,OAAA,CAAO;AAAA,QACxC,SAAS,MAAM;AACb,UAAAV,EAAQM,GAAO,MAAS;AAAA,QAC1B;AAAA,QAEC,UAAAD;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IACCN,KACC,gBAAAJ,EAACc,GAAA,EACC,UAAA,gBAAAd,EAACI,KAAI,EAAA,CACP;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAASH,EAAe;AAAA,EACtB,aAAAe;AAAA,EACA,YAAAC;AAAA,EACA,KAAKb;AACP,GAIG;AACD,QAAME,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SACE,gBAAAT;AAAA,IAACM,EAAW;AAAA,IAAX;AAAA,MACC,YAAAW;AAAA,MACA,aAAAD;AAAA,MACA,OAAOR,EAAE,oBAAoB,EAAE,YAAAS,GAAY,aAAAD,GAAa;AAAA,MACxD,KAAKZ;AAAA,IAAA;AAAA,EAAA;AAGX;AAEA,SAASF,EAAkB;AAAA,EACzB,qBAAAgB;AAAA,EACA,aAAAC,IAAc,CAAA;AAAA,EACd,KAAKf;AACP,GAIG;AACD,QAAM,EAAE,SAAAC,EAAA,IAAYP,EAAA;AAEpB,2BACGe,GAAA,EAAK,eAAc,OAAM,gBAAe,iBAAgB,YAAW,UAClE,UAAA;AAAA,IAAA,gBAAAb,EAACc,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAd;AAAA,MAACoB;AAAA,MAAA;AAAA,QACC,aAAaF,IAAuBC,EAAYD,CAAmB,KAAK,CAAA,IAAM,CAAA;AAAA,QAC9E,qBAAAA;AAAA,QACA,SAAAb;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAL,EAACc,GAAA,EAAU,UAAAV,KAAO,gBAAAJ,EAACI,KAAI,EAAA,CAAG;AAAA,EAAA,GAC5B;AAEJ;"}

package/dist/components/InformationRequests/InformationRequestForm/InformationRequestForm.js CHANGED Viewed

@@ -13,10 +13,9 @@ import s from "./InformationRequestForm.module.scss.js";
 import { BaseComponent as W } from "../../Base/Base.js";
 import { useBase as j } from "../../Base/useBase.js";
 import { Flex as E } from "../../Common/Flex/Flex.js";
-import { useComponentContext as H } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import "react";
-import { FileInputField as G } from "../../Common/Fields/FileInputField/FileInputField.js";
-import { Form as V } from "../../Common/Form/Form.js";
+import { FileInputField as H } from "../../Common/Fields/FileInputField/FileInputField.js";
+import { Form as G } from "../../Common/Form/Form.js";
+import { useComponentContext as V } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useComponentDictionary as X, useI18n as Y } from "../../../i18n/I18n.js";
 import { informationRequestEvents as $ } from "../../../shared/constants.js";
 import "../../Flow/useFlow.js";
@@ -28,7 +27,7 @@ const K = "gusto-sdk-information-request-form", Z = ["image/jpeg", "image/png",
   l.string(),
   l.union([l.string().min(1), l.instanceof(File)])
 );
-function Pe(t) {
+function be(t) {
   return /* @__PURE__ */ e(W, { ...t, children: /* @__PURE__ */ e(ae, { ...t, children: t.children }) });
 }
 const te = (t) => new Promise((r, h) => {
@@ -45,7 +44,7 @@ function ie(t) {
 }
 function ae({ companyId: t, requestId: r, dictionary: h }) {
   X("InformationRequests.InformationRequestForm", h), Y("InformationRequests.InformationRequestForm");
-  const { t: o } = C("InformationRequests.InformationRequestForm"), { Alert: F, Heading: S, Text: a } = H(), { onEvent: x, baseSubmitHandler: N } = j(), { data: D } = z({
+  const { t: o } = C("InformationRequests.InformationRequestForm"), { Alert: F, Heading: S, Text: a } = V(), { onEvent: x, baseSubmitHandler: N } = j(), { data: D } = z({
     companyUuid: t
   }), y = D.informationRequests?.find((n) => n.uuid === r), c = y?.requiredQuestions ?? [], U = y?.blockingPayroll ?? !1, b = re(c), g = ie(c), { mutateAsync: P } = B(), T = {}, R = [];
   c.forEach((n) => {
@@ -113,7 +112,7 @@ function ae({ companyId: t, requestId: r, dictionary: h }) {
         }
       ) }),
       f && /* @__PURE__ */ e("div", { className: s.fileInputWrapper, children: /* @__PURE__ */ e(
-        G,
+        H,
         {
           name: d,
           label: o("fields.fileUpload.label"),
@@ -136,10 +135,10 @@ function ae({ companyId: t, requestId: r, dictionary: h }) {
   return /* @__PURE__ */ e("div", { className: s.root, children: /* @__PURE__ */ p(E, { flexDirection: "column", gap: 16, children: [
     /* @__PURE__ */ e(S, { as: "h2", children: o("title") }),
     U && /* @__PURE__ */ e(F, { status: "error", label: o("blockingAlert.title"), disableScrollIntoView: !0, children: o("blockingAlert.description") }),
-    b ? O : /* @__PURE__ */ e(Q, { ...I, children: /* @__PURE__ */ e(V, { id: K, onSubmit: I.handleSubmit(_), children: /* @__PURE__ */ e(E, { flexDirection: "column", gap: 16, children: c.map(A) }) }) })
+    b ? O : /* @__PURE__ */ e(Q, { ...I, children: /* @__PURE__ */ e(G, { id: K, onSubmit: I.handleSubmit(_), children: /* @__PURE__ */ e(E, { flexDirection: "column", gap: 16, children: c.map(A) }) }) })
   ] }) });
 }
 export {
-  Pe as InformationRequestForm
+  be as InformationRequestForm
 };
 //# sourceMappingURL=InformationRequestForm.js.map

package/dist/components/InformationRequests/InformationRequestForm/InformationRequestForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InformationRequestForm.js","sources":["../../../../src/components/InformationRequests/InformationRequestForm/InformationRequestForm.tsx"],"sourcesContent":["import DOMPurify from 'dompurify'\nimport { useTranslation } from 'react-i18next'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { z } from 'zod'\nimport { useIsMutating } from '@tanstack/react-query'\nimport { useInformationRequestsGetInformationRequestsSuspense } from '@gusto/embedded-api/react-query/informationRequestsGetInformationRequests'\nimport {\n useInformationRequestsSubmitMutation,\n mutationKeyInformationRequestsSubmit,\n} from '@gusto/embedded-api/react-query/informationRequestsSubmit'\nimport type { RequiredQuestions } from '@gusto/embedded-api/models/components/informationrequest'\nimport { ResponseType } from '@gusto/embedded-api/models/components/informationrequest'\nimport { ResponseType as SubmitResponseType } from '@gusto/embedded-api/models/operations/submitinformationrequest'\nimport type { InformationRequestsContextInterface } from '../InformationRequestsComponents'\nimport styles from './InformationRequestForm.module.scss'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { Flex, TextInputField } from '@/components/Common'\nimport { FileInputField } from '@/components/Common/Fields/FileInputField'\nimport { Form } from '@/components/Common/Form'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { informationRequestEvents, type EventType } from '@/shared/constants'\nimport { useFlow } from '@/components/Flow/useFlow'\n\nconst INFORMATION_REQUEST_FORM_ID = 'gusto-sdk-information-request-form'\nconst ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'application/pdf']\nconst dompurifyConfig = {\n ALLOWED_TAGS: ['a', 'b', 'strong'],\n ALLOWED_ATTR: ['target', 'href', 'rel'],\n}\n\n/* API does not enforce an upper limit, so set a reasonable character max for a single-line input. /\nconst MAX_TEXT_RESPONSE = 5000\n\nconst InformationRequestFormSchema = z.record(\n z.string(),\n z.union([z.string().min(1), z.instanceof(File)]),\n)\n\ntype InformationRequestFormValues = z.infer<typeof InformationRequestFormSchema>\n\n/\n Props for {@link InformationRequestForm}.\n \n @public\n /\nexport interface InformationRequestFormProps extends BaseComponentInterface<'InformationRequests.InformationRequestForm'> {\n /* The associated company identifier. /\n companyId: string\n /* The identifier of the information request to respond to. /\n requestId: string\n /* Event handler invoked when the form is submitted or cancelled. See the events table in {@link InformationRequestForm}. /\n onEvent: OnEventType<EventType, unknown>\n}\n\n/\n Dynamic response form for a single information request.\n \n Renders supported question types (text and document upload) based on the request's\n * `requiredQuestions` payload and submits responses to the Submit information request\n * endpoint. Use this component directly when you have built your own list or routing\n * surface and need to host the form — typically inside a modal or page you control.\n \n Requests with unsupported response types (e.g. `persona`-driven identity verification)\n * display a guidance message instead of the form; in those cases the user must complete\n * the request through your own integration with the underlying provider.\n \n Text inputs accept up to 5,000 characters. Document uploads are restricted to JPEG,\n * PNG, or PDF.\n \n @remarks\n * Events emitted via `onEvent`:\n \n @events\n * \| Event \| Description \| Data \|\n * \| ----- \| ----------- \| ---- \|\n * \| `informationRequest/form/done` \| Fired when the form is successfully submitted \| The `informationRequest` field from the Submit information request response \|\n * \| `informationRequest/form/cancel` \| Fired when the user cancels the form \| — \|\n \n @param props - See {@link InformationRequestFormProps}.\n * @returns The rendered information request response form.\n * @public\n /\nexport function InformationRequestForm(props: InformationRequestFormProps) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nconst convertFileToDataUrl = (file: File) => {\n return new Promise<string>((resolve, reject) => {\n const reader = new FileReader()\n reader.onload = () => {\n resolve(reader.result as string)\n }\n reader.onerror = reject\n reader.readAsDataURL(file)\n })\n}\n\nconst SUPPORTED_RESPONSE_TYPES: ResponseType[] = [ResponseType.Text, ResponseType.Document]\n\nfunction hasUnsupportedQuestionTypes(questions: RequiredQuestions[]) {\n return questions.some(question => !SUPPORTED_RESPONSE_TYPES.includes(question.responseType))\n}\n\nfunction hasPersonaQuestionType(questions: RequiredQuestions[]) {\n return questions.some(question => question.responseType === ResponseType.Persona)\n}\n\nfunction Root({ companyId, requestId, dictionary }: InformationRequestFormProps) {\n useComponentDictionary('InformationRequests.InformationRequestForm', dictionary)\n useI18n('InformationRequests.InformationRequestForm')\n const { t } = useTranslation('InformationRequests.InformationRequestForm')\n const { Alert, Heading, Text } = useComponentContext()\n const { onEvent, baseSubmitHandler } = useBase()\n\n const { data } = useInformationRequestsGetInformationRequestsSuspense({\n companyUuid: companyId,\n })\n\n const informationRequest = data.informationRequests?.find(req => req.uuid === requestId)\n const requiredQuestions = informationRequest?.requiredQuestions ?? []\n const isBlockingPayroll = informationRequest?.blockingPayroll ?? false\n const hasUnsupportedTypes = hasUnsupportedQuestionTypes(requiredQuestions)\n const hasPersonaType = hasPersonaQuestionType(requiredQuestions)\n\n const { mutateAsync: submitInformationRequest } = useInformationRequestsSubmitMutation()\n\n const defaultValues: Record<string, string \| File \| undefined> = {}\n const questionUuids: string[] = []\n\n requiredQuestions.forEach(question => {\n if (question.responseType === ResponseType.Text) {\n questionUuids.push(question.questionUuid)\n defaultValues[question.questionUuid] = ''\n } else if (question.responseType === ResponseType.Document) {\n questionUuids.push(question.questionUuid)\n defaultValues[question.questionUuid] = undefined\n }\n })\n\n const formMethods = useForm<InformationRequestFormValues>({\n resolver: zodResolver(InformationRequestFormSchema),\n defaultValues,\n })\n\n const onSubmit = async (formData: InformationRequestFormValues) => {\n await baseSubmitHandler(formData, async () => {\n const questionResponses = await Promise.all(\n questionUuids.map(async uuid => {\n const value = formData[uuid]\n\n if (typeof value === 'string') {\n return {\n questionUuid: uuid,\n responseType: SubmitResponseType.Text,\n textResponse: value,\n }\n }\n\n if (value instanceof File) {\n const fileResponse = await convertFileToDataUrl(value)\n return {\n questionUuid: uuid,\n responseType: SubmitResponseType.Document,\n fileResponse,\n fileName: value.name,\n }\n }\n\n return null\n }),\n )\n\n const validResponses = questionResponses.filter(response => response !== null)\n\n const response = await submitInformationRequest({\n request: {\n informationRequestUuid: requestId,\n requestBody: {\n requiredQuestions: validResponses,\n },\n },\n })\n\n onEvent(informationRequestEvents.INFORMATION_REQUEST_FORM_DONE, response.informationRequest)\n })\n }\n\n const renderQuestion = (question: RequiredQuestions) => {\n const fieldName = question.questionUuid\n const isDocumentType = question.responseType === ResponseType.Document\n const isTextType = question.responseType === ResponseType.Text\n\n return (\n <div key={fieldName} className={styles.questionCard}>\n <div className={styles.questionDescription}>\n <Text size=\"sm\" weight=\"medium\">\n {isDocumentType ? t('questionTypes.document') : t('questionTypes.answer')}\n </Text>\n <Text size=\"sm\" variant=\"supporting\">\n {/ SECURITY: XSS mitigated via DOMPurify with strict allowlist. Pattern matches TaxInputs.tsx /}\n <span\n dangerouslySetInnerHTML={{\n __html: DOMPurify.sanitize(question.questionText, dompurifyConfig),\n }}\n />\n </Text>\n </div>\n\n <hr className={styles.divider} />\n\n {isTextType && (\n <div className={styles.textInputWrapper}>\n <TextInputField\n name={fieldName}\n label={t('fields.textAnswer.label')}\n placeholder={t('fields.textAnswer.placeholder')}\n maxLength={MAX_TEXT_RESPONSE}\n isRequired\n errorMessage={t('validation.required')}\n />\n </div>\n )}\n\n {isDocumentType && (\n <div className={styles.fileInputWrapper}>\n <FileInputField\n name={fieldName}\n label={t('fields.fileUpload.label')}\n accept={ACCEPTED_FILE_TYPES}\n isRequired\n errorMessage={t('validation.required')}\n />\n </div>\n )}\n </div>\n )\n }\n\n const unsupportedPlaceholder = (\n <div className={styles.questionCard}>\n <div className={styles.questionDescription}>\n <Text weight=\"medium\">\n {t(hasPersonaType ? 'unsupported.persona.title' : 'unsupported.generic.title')}\n </Text>\n <Text>\n {t(\n hasPersonaType ? 'unsupported.persona.description' : 'unsupported.generic.description',\n )}\n </Text>\n </div>\n\n <hr className={styles.divider} />\n\n <div className={styles.contactSupport}>\n <Text variant=\"supporting\">{t('unsupported.contactSupport')}</Text>\n </div>\n </div>\n )\n\n return (\n <div className={styles.root}>\n <Flex flexDirection=\"column\" gap={16}>\n <Heading as=\"h2\">{t('title')}</Heading>\n\n {isBlockingPayroll && (\n <Alert status=\"error\" label={t('blockingAlert.title')} disableScrollIntoView>\n {t('blockingAlert.description')}\n </Alert>\n )}\n\n {hasUnsupportedTypes ? (\n unsupportedPlaceholder\n ) : (\n <FormProvider {...formMethods}>\n <Form id={INFORMATION_REQUEST_FORM_ID} onSubmit={formMethods.handleSubmit(onSubmit)}>\n <Flex flexDirection=\"column\" gap={16}>\n {requiredQuestions.map(renderQuestion)}\n </Flex>\n </Form>\n </FormProvider>\n )}\n </Flex>\n </div>\n )\n}\n\n/* @internal */\nexport function Footer({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) {\n useI18n('InformationRequests.InformationRequestForm')\n const { t } = useTranslation('InformationRequests.InformationRequestForm')\n const { Button } = useComponentContext()\n const { companyId, selectedRequestId } = useFlow<InformationRequestsContextInterface>()\n\n const { data } = useInformationRequestsGetInformationRequestsSuspense({\n companyUuid: companyId,\n })\n\n const informationRequest = data.informationRequests?.find(req => req.uuid === selectedRequestId)\n const requiredQuestions = informationRequest?.requiredQuestions ?? []\n const hasUnsupportedTypes = hasUnsupportedQuestionTypes(requiredQuestions)\n\n const isMutating = useIsMutating({\n mutationKey: mutationKeyInformationRequestsSubmit(),\n })\n const isPending = isMutating > 0\n\n const handleCancel = () => {\n onEvent(informationRequestEvents.INFORMATION_REQUEST_FORM_CANCEL)\n }\n\n if (hasUnsupportedTypes) {\n return (\n <Flex justifyContent=\"flex-end\" gap={12}>\n <Button variant=\"secondary\" onClick={handleCancel}>\n {t('cta.close')}\n </Button>\n </Flex>\n )\n }\n\n return (\n <Flex justifyContent=\"flex-end\" gap={12}>\n <Button variant=\"secondary\" onClick={handleCancel} isDisabled={isPending}>\n {t('cta.cancel')}\n </Button>\n <Button\n variant=\"primary\"\n type=\"submit\"\n form={INFORMATION_REQUEST_FORM_ID}\n isLoading={isPending}\n >\n {t('cta.submit')}\n </Button>\n </Flex>\n )\n}\n"],"names":["INFORMATION_REQUEST_FORM_ID","ACCEPTED_FILE_TYPES","dompurifyConfig","MAX_TEXT_RESPONSE","InformationRequestFormSchema","z","InformationRequestForm","props","jsx","BaseComponent","Root","convertFileToDataUrl","file","resolve","reject","reader","SUPPORTED_RESPONSE_TYPES","ResponseType","hasUnsupportedQuestionTypes","questions","question","hasPersonaQuestionType","companyId","requestId","dictionary","useComponentDictionary","useI18n","t","useTranslation","Alert","Heading","Text","useComponentContext","onEvent","baseSubmitHandler","useBase","data","useInformationRequestsGetInformationRequestsSuspense","informationRequest","req","requiredQuestions","isBlockingPayroll","hasUnsupportedTypes","hasPersonaType","submitInformationRequest","useInformationRequestsSubmitMutation","defaultValues","questionUuids","formMethods","useForm","zodResolver","onSubmit","formData","validResponses","uuid","value","SubmitResponseType","fileResponse","response","informationRequestEvents","renderQuestion","fieldName","isDocumentType","isTextType","jsxs","styles","DOMPurify","TextInputField","FileInputField","unsupportedPlaceholder","Flex","FormProvider","Form"],"mappings":"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"}
1	+ {"version":3,"file":"InformationRequestForm.js","sources":["../../../../src/components/InformationRequests/InformationRequestForm/InformationRequestForm.tsx"],"sourcesContent":["import DOMPurify from 'dompurify'\nimport { useTranslation } from 'react-i18next'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { z } from 'zod'\nimport { useIsMutating } from '@tanstack/react-query'\nimport { useInformationRequestsGetInformationRequestsSuspense } from '@gusto/embedded-api/react-query/informationRequestsGetInformationRequests'\nimport {\n useInformationRequestsSubmitMutation,\n mutationKeyInformationRequestsSubmit,\n} from '@gusto/embedded-api/react-query/informationRequestsSubmit'\nimport type { RequiredQuestions } from '@gusto/embedded-api/models/components/informationrequest'\nimport { ResponseType } from '@gusto/embedded-api/models/components/informationrequest'\nimport { ResponseType as SubmitResponseType } from '@gusto/embedded-api/models/operations/submitinformationrequest'\nimport type { InformationRequestsContextInterface } from '../InformationRequestsComponents'\nimport styles from './InformationRequestForm.module.scss'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { Flex, TextInputField } from '@/components/Common'\nimport { FileInputField } from '@/components/Common/Fields/FileInputField'\nimport { Form } from '@/components/Common/Form'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { informationRequestEvents, type EventType } from '@/shared/constants'\nimport { useFlow } from '@/components/Flow/useFlow'\n\nconst INFORMATION_REQUEST_FORM_ID = 'gusto-sdk-information-request-form'\nconst ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'application/pdf']\nconst dompurifyConfig = {\n ALLOWED_TAGS: ['a', 'b', 'strong'],\n ALLOWED_ATTR: ['target', 'href', 'rel'],\n}\n\n/* API does not enforce an upper limit, so set a reasonable character max for a single-line input. /\nconst MAX_TEXT_RESPONSE = 5000\n\nconst InformationRequestFormSchema = z.record(\n z.string(),\n z.union([z.string().min(1), z.instanceof(File)]),\n)\n\ntype InformationRequestFormValues = z.infer<typeof InformationRequestFormSchema>\n\n/\n Props for {@link InformationRequestForm}.\n \n @public\n /\nexport interface InformationRequestFormProps extends BaseComponentInterface<'InformationRequests.InformationRequestForm'> {\n /* The associated company identifier. /\n companyId: string\n /* The identifier of the information request to respond to. /\n requestId: string\n /* Event handler invoked when the form is submitted or cancelled. See the events table in {@link InformationRequestForm}. /\n onEvent: OnEventType<EventType, unknown>\n}\n\n/\n Dynamic response form for a single information request.\n \n Renders supported question types (text and document upload) based on the request's\n * `requiredQuestions` payload and submits responses to the Submit information request\n * endpoint. Use this component directly when you have built your own list or routing\n * surface and need to host the form — typically inside a modal or page you control.\n \n Requests with unsupported response types (e.g. `persona`-driven identity verification)\n * display a guidance message instead of the form; in those cases the user must complete\n * the request through your own integration with the underlying provider.\n \n Text inputs accept up to 5,000 characters. Document uploads are restricted to JPEG,\n * PNG, or PDF.\n \n @remarks\n * Events emitted via `onEvent`:\n \n @events\n * \| Event \| Description \| Data \|\n * \| ----- \| ----------- \| ---- \|\n * \| `informationRequest/form/done` \| Fired when the form is successfully submitted \| The `informationRequest` field from the Submit information request response \|\n * \| `informationRequest/form/cancel` \| Fired when the user cancels the form \| — \|\n \n @param props - See {@link InformationRequestFormProps}.\n * @returns The rendered information request response form.\n * @public\n /\nexport function InformationRequestForm(props: InformationRequestFormProps) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nconst convertFileToDataUrl = (file: File) => {\n return new Promise<string>((resolve, reject) => {\n const reader = new FileReader()\n reader.onload = () => {\n resolve(reader.result as string)\n }\n reader.onerror = reject\n reader.readAsDataURL(file)\n })\n}\n\nconst SUPPORTED_RESPONSE_TYPES: ResponseType[] = [ResponseType.Text, ResponseType.Document]\n\nfunction hasUnsupportedQuestionTypes(questions: RequiredQuestions[]) {\n return questions.some(question => !SUPPORTED_RESPONSE_TYPES.includes(question.responseType))\n}\n\nfunction hasPersonaQuestionType(questions: RequiredQuestions[]) {\n return questions.some(question => question.responseType === ResponseType.Persona)\n}\n\nfunction Root({ companyId, requestId, dictionary }: InformationRequestFormProps) {\n useComponentDictionary('InformationRequests.InformationRequestForm', dictionary)\n useI18n('InformationRequests.InformationRequestForm')\n const { t } = useTranslation('InformationRequests.InformationRequestForm')\n const { Alert, Heading, Text } = useComponentContext()\n const { onEvent, baseSubmitHandler } = useBase()\n\n const { data } = useInformationRequestsGetInformationRequestsSuspense({\n companyUuid: companyId,\n })\n\n const informationRequest = data.informationRequests?.find(req => req.uuid === requestId)\n const requiredQuestions = informationRequest?.requiredQuestions ?? []\n const isBlockingPayroll = informationRequest?.blockingPayroll ?? false\n const hasUnsupportedTypes = hasUnsupportedQuestionTypes(requiredQuestions)\n const hasPersonaType = hasPersonaQuestionType(requiredQuestions)\n\n const { mutateAsync: submitInformationRequest } = useInformationRequestsSubmitMutation()\n\n const defaultValues: Record<string, string \| File \| undefined> = {}\n const questionUuids: string[] = []\n\n requiredQuestions.forEach(question => {\n if (question.responseType === ResponseType.Text) {\n questionUuids.push(question.questionUuid)\n defaultValues[question.questionUuid] = ''\n } else if (question.responseType === ResponseType.Document) {\n questionUuids.push(question.questionUuid)\n defaultValues[question.questionUuid] = undefined\n }\n })\n\n const formMethods = useForm<InformationRequestFormValues>({\n resolver: zodResolver(InformationRequestFormSchema),\n defaultValues,\n })\n\n const onSubmit = async (formData: InformationRequestFormValues) => {\n await baseSubmitHandler(formData, async () => {\n const questionResponses = await Promise.all(\n questionUuids.map(async uuid => {\n const value = formData[uuid]\n\n if (typeof value === 'string') {\n return {\n questionUuid: uuid,\n responseType: SubmitResponseType.Text,\n textResponse: value,\n }\n }\n\n if (value instanceof File) {\n const fileResponse = await convertFileToDataUrl(value)\n return {\n questionUuid: uuid,\n responseType: SubmitResponseType.Document,\n fileResponse,\n fileName: value.name,\n }\n }\n\n return null\n }),\n )\n\n const validResponses = questionResponses.filter(response => response !== null)\n\n const response = await submitInformationRequest({\n request: {\n informationRequestUuid: requestId,\n requestBody: {\n requiredQuestions: validResponses,\n },\n },\n })\n\n onEvent(informationRequestEvents.INFORMATION_REQUEST_FORM_DONE, response.informationRequest)\n })\n }\n\n const renderQuestion = (question: RequiredQuestions) => {\n const fieldName = question.questionUuid\n const isDocumentType = question.responseType === ResponseType.Document\n const isTextType = question.responseType === ResponseType.Text\n\n return (\n <div key={fieldName} className={styles.questionCard}>\n <div className={styles.questionDescription}>\n <Text size=\"sm\" weight=\"medium\">\n {isDocumentType ? t('questionTypes.document') : t('questionTypes.answer')}\n </Text>\n <Text size=\"sm\" variant=\"supporting\">\n {/ SECURITY: XSS mitigated via DOMPurify with strict allowlist. Pattern matches TaxInputs.tsx /}\n <span\n dangerouslySetInnerHTML={{\n __html: DOMPurify.sanitize(question.questionText, dompurifyConfig),\n }}\n />\n </Text>\n </div>\n\n <hr className={styles.divider} />\n\n {isTextType && (\n <div className={styles.textInputWrapper}>\n <TextInputField\n name={fieldName}\n label={t('fields.textAnswer.label')}\n placeholder={t('fields.textAnswer.placeholder')}\n maxLength={MAX_TEXT_RESPONSE}\n isRequired\n errorMessage={t('validation.required')}\n />\n </div>\n )}\n\n {isDocumentType && (\n <div className={styles.fileInputWrapper}>\n <FileInputField\n name={fieldName}\n label={t('fields.fileUpload.label')}\n accept={ACCEPTED_FILE_TYPES}\n isRequired\n errorMessage={t('validation.required')}\n />\n </div>\n )}\n </div>\n )\n }\n\n const unsupportedPlaceholder = (\n <div className={styles.questionCard}>\n <div className={styles.questionDescription}>\n <Text weight=\"medium\">\n {t(hasPersonaType ? 'unsupported.persona.title' : 'unsupported.generic.title')}\n </Text>\n <Text>\n {t(\n hasPersonaType ? 'unsupported.persona.description' : 'unsupported.generic.description',\n )}\n </Text>\n </div>\n\n <hr className={styles.divider} />\n\n <div className={styles.contactSupport}>\n <Text variant=\"supporting\">{t('unsupported.contactSupport')}</Text>\n </div>\n </div>\n )\n\n return (\n <div className={styles.root}>\n <Flex flexDirection=\"column\" gap={16}>\n <Heading as=\"h2\">{t('title')}</Heading>\n\n {isBlockingPayroll && (\n <Alert status=\"error\" label={t('blockingAlert.title')} disableScrollIntoView>\n {t('blockingAlert.description')}\n </Alert>\n )}\n\n {hasUnsupportedTypes ? (\n unsupportedPlaceholder\n ) : (\n <FormProvider {...formMethods}>\n <Form id={INFORMATION_REQUEST_FORM_ID} onSubmit={formMethods.handleSubmit(onSubmit)}>\n <Flex flexDirection=\"column\" gap={16}>\n {requiredQuestions.map(renderQuestion)}\n </Flex>\n </Form>\n </FormProvider>\n )}\n </Flex>\n </div>\n )\n}\n\n/* @internal */\nexport function Footer({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) {\n useI18n('InformationRequests.InformationRequestForm')\n const { t } = useTranslation('InformationRequests.InformationRequestForm')\n const { Button } = useComponentContext()\n const { companyId, selectedRequestId } = useFlow<InformationRequestsContextInterface>()\n\n const { data } = useInformationRequestsGetInformationRequestsSuspense({\n companyUuid: companyId,\n })\n\n const informationRequest = data.informationRequests?.find(req => req.uuid === selectedRequestId)\n const requiredQuestions = informationRequest?.requiredQuestions ?? []\n const hasUnsupportedTypes = hasUnsupportedQuestionTypes(requiredQuestions)\n\n const isMutating = useIsMutating({\n mutationKey: mutationKeyInformationRequestsSubmit(),\n })\n const isPending = isMutating > 0\n\n const handleCancel = () => {\n onEvent(informationRequestEvents.INFORMATION_REQUEST_FORM_CANCEL)\n }\n\n if (hasUnsupportedTypes) {\n return (\n <Flex justifyContent=\"flex-end\" gap={12}>\n <Button variant=\"secondary\" onClick={handleCancel}>\n {t('cta.close')}\n </Button>\n </Flex>\n )\n }\n\n return (\n <Flex justifyContent=\"flex-end\" gap={12}>\n <Button variant=\"secondary\" onClick={handleCancel} isDisabled={isPending}>\n {t('cta.cancel')}\n </Button>\n <Button\n variant=\"primary\"\n type=\"submit\"\n form={INFORMATION_REQUEST_FORM_ID}\n isLoading={isPending}\n >\n {t('cta.submit')}\n </Button>\n </Flex>\n )\n}\n"],"names":["INFORMATION_REQUEST_FORM_ID","ACCEPTED_FILE_TYPES","dompurifyConfig","MAX_TEXT_RESPONSE","InformationRequestFormSchema","z","InformationRequestForm","props","jsx","BaseComponent","Root","convertFileToDataUrl","file","resolve","reject","reader","SUPPORTED_RESPONSE_TYPES","ResponseType","hasUnsupportedQuestionTypes","questions","question","hasPersonaQuestionType","companyId","requestId","dictionary","useComponentDictionary","useI18n","t","useTranslation","Alert","Heading","Text","useComponentContext","onEvent","baseSubmitHandler","useBase","data","useInformationRequestsGetInformationRequestsSuspense","informationRequest","req","requiredQuestions","isBlockingPayroll","hasUnsupportedTypes","hasPersonaType","submitInformationRequest","useInformationRequestsSubmitMutation","defaultValues","questionUuids","formMethods","useForm","zodResolver","onSubmit","formData","validResponses","uuid","value","SubmitResponseType","fileResponse","response","informationRequestEvents","renderQuestion","fieldName","isDocumentType","isTextType","jsxs","styles","DOMPurify","TextInputField","FileInputField","unsupportedPlaceholder","Flex","FormProvider","Form"],"mappings":"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"}

package/dist/components/InformationRequests/InformationRequestList/InformationRequestList.js CHANGED Viewed

@@ -10,14 +10,13 @@ import { DataView as D } from "../../Common/DataView/DataView.js";
 import { useDataView as k } from "../../Common/DataView/useDataView.js";
 import { FlexItem as E, Flex as u } from "../../Common/Flex/Flex.js";
 import { EmptyData as v } from "../../Common/EmptyData/EmptyData.js";
-import "react";
 import { informationRequestEvents as B } from "../../../shared/constants.js";
-function K(o) {
+function J(o) {
   return /* @__PURE__ */ n(w, { ...o, children: /* @__PURE__ */ n(C, { ...o, children: o.children }) });
 }
 function C({ companyId: o, dictionary: d, onEvent: f }) {
   S("InformationRequests.InformationRequestList", d), T("InformationRequests.InformationRequestList");
-  const { t } = b("InformationRequests.InformationRequestList"), { Heading: y, Text: m, Button: R, Badge: l } = x(), { data: g } = P({
+  const { t } = b("InformationRequests.InformationRequestList"), { Heading: y, Text: l, Button: R, Badge: m } = x(), { data: g } = P({
     companyUuid: o
   }), c = (g.informationRequests ?? []).filter(
     (e) => e.status !== r.Approved
@@ -50,7 +49,7 @@ function C({ companyId: o, dictionary: d, onEvent: f }) {
       {
         key: "type",
         title: t("columns.type"),
-        render: (e) => /* @__PURE__ */ n(E, { flexGrow: 1, children: /* @__PURE__ */ n(m, { weight: "medium", children: h(e.type) }) })
+        render: (e) => /* @__PURE__ */ n(E, { flexGrow: 1, children: /* @__PURE__ */ n(l, { weight: "medium", children: h(e.type) }) })
       },
       {
         key: "status",
@@ -58,8 +57,8 @@ function C({ companyId: o, dictionary: d, onEvent: f }) {
         render: (e) => {
           const s = q(e.status), p = e.blockingPayroll;
           return !s && !p ? null : /* @__PURE__ */ a(u, { gap: 8, alignItems: "center", children: [
-            s && /* @__PURE__ */ n(l, { status: s.badgeStatus, children: s.label }),
-            p && /* @__PURE__ */ n(l, { status: "error", children: t("status.payrollBlocking") })
+            s && /* @__PURE__ */ n(m, { status: s.badgeStatus, children: s.label }),
+            p && /* @__PURE__ */ n(m, { status: "error", children: t("status.payrollBlocking") })
           ] });
         }
       }
@@ -80,12 +79,12 @@ function C({ companyId: o, dictionary: d, onEvent: f }) {
   return /* @__PURE__ */ a(u, { flexDirection: "column", gap: 20, children: [
     /* @__PURE__ */ a(u, { flexDirection: "column", gap: 2, children: [
       /* @__PURE__ */ n(y, { as: "h2", styledAs: "h4", children: t("title") }),
-      c.length > 0 && /* @__PURE__ */ n(m, { children: t("description") })
+      c.length > 0 && /* @__PURE__ */ n(l, { children: t("description") })
     ] }),
     /* @__PURE__ */ n(D, { ...I, label: t("title") })
   ] });
 }
 export {
-  K as InformationRequestList
+  J as InformationRequestList
 };
 //# sourceMappingURL=InformationRequestList.js.map

package/dist/components/InformationRequests/InformationRequestList/InformationRequestList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InformationRequestList.js","sources":["../../../../src/components/InformationRequests/InformationRequestList/InformationRequestList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useInformationRequestsGetInformationRequestsSuspense } from '@gusto/embedded-api/react-query/informationRequestsGetInformationRequests'\nimport type { InformationRequest } from '@gusto/embedded-api/models/components/informationrequest'\nimport {\n InformationRequestStatus,\n InformationRequestType,\n} from '@gusto/embedded-api/models/components/informationrequest'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { EmptyData, Flex, FlexItem } from '@/components/Common'\nimport { informationRequestEvents } from '@/shared/constants'\nimport type { BadgeProps } from '@/components/Common/UI/Badge/BadgeTypes'\n\n/*\n Props for {@link InformationRequestList}.\n \n @public\n /\nexport interface InformationRequestListProps extends BaseComponentInterface<'InformationRequests.InformationRequestList'> {\n /* The associated company identifier. /\n companyId: string\n /* Event callback. See the events table on {@link InformationRequestList} for emitted events. /\n onEvent: BaseComponentInterface['onEvent']\n}\n\n/\n Displays the list of outstanding information requests for a company with a \"Respond\" CTA on each open request.\n \n @remarks\n * Renders status badges for each request and an extra \"Payroll blocking\" badge when the request is currently blocking payroll. Approved requests are filtered out of the list. Used as the top-level surface of `InformationRequests.InformationRequestsFlow`, but can be rendered directly when you want to host the response form yourself (e.g. in a custom modal or page).\n \n @events\n * \| Event \| Description \| Data \|\n * \| ----- \| ----------- \| ---- \|\n * \| `informationRequest/respond` \| Fired when the user clicks \"Respond\" on an open request \| `{ requestId: string }` \|\n \n @param props - See {@link InformationRequestListProps}.\n * @returns The rendered information request list.\n * @public\n */\nexport function InformationRequestList(props: InformationRequestListProps) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\ntype StatusMapping = {\n label: string\n badgeStatus: BadgeProps['status']\n} \| null\n\nfunction Root({ companyId, dictionary, onEvent }: InformationRequestListProps) {\n useComponentDictionary('InformationRequests.InformationRequestList', dictionary)\n useI18n('InformationRequests.InformationRequestList')\n const { t } = useTranslation('InformationRequests.InformationRequestList')\n const { Heading, Text, Button, Badge } = useComponentContext()\n\n const { data } = useInformationRequestsGetInformationRequestsSuspense({\n companyUuid: companyId,\n })\n\n const informationRequests = data.informationRequests ?? []\n\n const visibleRequests = informationRequests.filter(\n request => request.status !== InformationRequestStatus.Approved,\n )\n\n const getTypeLabel = (type: InformationRequest['type']): string => {\n switch (type) {\n case InformationRequestType.CompanyOnboarding:\n return t('types.companyOnboarding')\n case InformationRequestType.AccountProtection:\n return t('types.accountProtection')\n case InformationRequestType.PaymentRequest:\n return t('types.paymentRequest')\n case InformationRequestType.PaymentError:\n return t('types.paymentError')\n default:\n return t('types.unknown')\n }\n }\n\n const getStatusMapping = (status: InformationRequest['status']): StatusMapping => {\n switch (status) {\n case InformationRequestStatus.PendingResponse:\n return { label: t('status.incomplete'), badgeStatus: 'info' }\n case InformationRequestStatus.PendingReview:\n return { label: t('status.underReview'), badgeStatus: 'warning' }\n default:\n return null\n }\n }\n\n const dataViewProps = useDataView({\n data: visibleRequests,\n emptyState: () => (\n <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')} />\n ),\n columns: [\n {\n key: 'type',\n title: t('columns.type'),\n render: request => (\n <FlexItem flexGrow={1}>\n <Text weight=\"medium\">{getTypeLabel(request.type)}</Text>\n </FlexItem>\n ),\n },\n {\n key: 'status',\n title: t('columns.status'),\n render: request => {\n const statusMapping = getStatusMapping(request.status)\n const showPayrollBlockingBadge = request.blockingPayroll\n\n if (!statusMapping && !showPayrollBlockingBadge) {\n return null\n }\n\n return (\n <Flex gap={8} alignItems=\"center\">\n {statusMapping && (\n <Badge status={statusMapping.badgeStatus}>{statusMapping.label}</Badge>\n )}\n {showPayrollBlockingBadge && (\n <Badge status=\"error\">{t('status.payrollBlocking')}</Badge>\n )}\n </Flex>\n )\n },\n },\n ],\n itemMenu: request => {\n const isPendingResponse = request.status === InformationRequestStatus.PendingResponse\n if (!isPendingResponse) {\n return null\n }\n return (\n <Button\n variant=\"secondary\"\n onClick={() => {\n onEvent(informationRequestEvents.INFORMATION_REQUEST_RESPOND, {\n requestId: request.uuid,\n })\n }}\n >\n {t('cta.respond')}\n </Button>\n )\n },\n })\n\n return (\n <Flex flexDirection=\"column\" gap={20}>\n <Flex flexDirection=\"column\" gap={2}>\n <Heading as=\"h2\" styledAs=\"h4\">\n {t('title')}\n </Heading>\n {visibleRequests.length > 0 && <Text>{t('description')}</Text>}\n </Flex>\n\n <DataView {...dataViewProps} label={t('title')} />\n </Flex>\n )\n}\n"],"names":["InformationRequestList","props","jsx","BaseComponent","Root","companyId","dictionary","onEvent","useComponentDictionary","useI18n","useTranslation","Heading","Text","Button","Badge","useComponentContext","data","useInformationRequestsGetInformationRequestsSuspense","visibleRequests","request","InformationRequestStatus","getTypeLabel","type","InformationRequestType","getStatusMapping","status","dataViewProps","useDataView","EmptyData","FlexItem","statusMapping","showPayrollBlockingBadge","jsxs","Flex","informationRequestEvents","DataView"],"mappings":"~~;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"InformationRequestList.js","sources":["../../../../src/components/InformationRequests/InformationRequestList/InformationRequestList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useInformationRequestsGetInformationRequestsSuspense } from '@gusto/embedded-api/react-query/informationRequestsGetInformationRequests'\nimport type { InformationRequest } from '@gusto/embedded-api/models/components/informationrequest'\nimport {\n InformationRequestStatus,\n InformationRequestType,\n} from '@gusto/embedded-api/models/components/informationrequest'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { EmptyData, Flex, FlexItem } from '@/components/Common'\nimport { informationRequestEvents } from '@/shared/constants'\nimport type { BadgeProps } from '@/components/Common/UI/Badge/BadgeTypes'\n\n/*\n Props for {@link InformationRequestList}.\n \n @public\n /\nexport interface InformationRequestListProps extends BaseComponentInterface<'InformationRequests.InformationRequestList'> {\n /* The associated company identifier. /\n companyId: string\n /* Event callback. See the events table on {@link InformationRequestList} for emitted events. /\n onEvent: BaseComponentInterface['onEvent']\n}\n\n/\n Displays the list of outstanding information requests for a company with a \"Respond\" CTA on each open request.\n \n @remarks\n * Renders status badges for each request and an extra \"Payroll blocking\" badge when the request is currently blocking payroll. Approved requests are filtered out of the list. Used as the top-level surface of `InformationRequests.InformationRequestsFlow`, but can be rendered directly when you want to host the response form yourself (e.g. in a custom modal or page).\n \n @events\n * \| Event \| Description \| Data \|\n * \| ----- \| ----------- \| ---- \|\n * \| `informationRequest/respond` \| Fired when the user clicks \"Respond\" on an open request \| `{ requestId: string }` \|\n \n @param props - See {@link InformationRequestListProps}.\n * @returns The rendered information request list.\n * @public\n */\nexport function InformationRequestList(props: InformationRequestListProps) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\ntype StatusMapping = {\n label: string\n badgeStatus: BadgeProps['status']\n} \| null\n\nfunction Root({ companyId, dictionary, onEvent }: InformationRequestListProps) {\n useComponentDictionary('InformationRequests.InformationRequestList', dictionary)\n useI18n('InformationRequests.InformationRequestList')\n const { t } = useTranslation('InformationRequests.InformationRequestList')\n const { Heading, Text, Button, Badge } = useComponentContext()\n\n const { data } = useInformationRequestsGetInformationRequestsSuspense({\n companyUuid: companyId,\n })\n\n const informationRequests = data.informationRequests ?? []\n\n const visibleRequests = informationRequests.filter(\n request => request.status !== InformationRequestStatus.Approved,\n )\n\n const getTypeLabel = (type: InformationRequest['type']): string => {\n switch (type) {\n case InformationRequestType.CompanyOnboarding:\n return t('types.companyOnboarding')\n case InformationRequestType.AccountProtection:\n return t('types.accountProtection')\n case InformationRequestType.PaymentRequest:\n return t('types.paymentRequest')\n case InformationRequestType.PaymentError:\n return t('types.paymentError')\n default:\n return t('types.unknown')\n }\n }\n\n const getStatusMapping = (status: InformationRequest['status']): StatusMapping => {\n switch (status) {\n case InformationRequestStatus.PendingResponse:\n return { label: t('status.incomplete'), badgeStatus: 'info' }\n case InformationRequestStatus.PendingReview:\n return { label: t('status.underReview'), badgeStatus: 'warning' }\n default:\n return null\n }\n }\n\n const dataViewProps = useDataView({\n data: visibleRequests,\n emptyState: () => (\n <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')} />\n ),\n columns: [\n {\n key: 'type',\n title: t('columns.type'),\n render: request => (\n <FlexItem flexGrow={1}>\n <Text weight=\"medium\">{getTypeLabel(request.type)}</Text>\n </FlexItem>\n ),\n },\n {\n key: 'status',\n title: t('columns.status'),\n render: request => {\n const statusMapping = getStatusMapping(request.status)\n const showPayrollBlockingBadge = request.blockingPayroll\n\n if (!statusMapping && !showPayrollBlockingBadge) {\n return null\n }\n\n return (\n <Flex gap={8} alignItems=\"center\">\n {statusMapping && (\n <Badge status={statusMapping.badgeStatus}>{statusMapping.label}</Badge>\n )}\n {showPayrollBlockingBadge && (\n <Badge status=\"error\">{t('status.payrollBlocking')}</Badge>\n )}\n </Flex>\n )\n },\n },\n ],\n itemMenu: request => {\n const isPendingResponse = request.status === InformationRequestStatus.PendingResponse\n if (!isPendingResponse) {\n return null\n }\n return (\n <Button\n variant=\"secondary\"\n onClick={() => {\n onEvent(informationRequestEvents.INFORMATION_REQUEST_RESPOND, {\n requestId: request.uuid,\n })\n }}\n >\n {t('cta.respond')}\n </Button>\n )\n },\n })\n\n return (\n <Flex flexDirection=\"column\" gap={20}>\n <Flex flexDirection=\"column\" gap={2}>\n <Heading as=\"h2\" styledAs=\"h4\">\n {t('title')}\n </Heading>\n {visibleRequests.length > 0 && <Text>{t('description')}</Text>}\n </Flex>\n\n <DataView {...dataViewProps} label={t('title')} />\n </Flex>\n )\n}\n"],"names":["InformationRequestList","props","jsx","BaseComponent","Root","companyId","dictionary","onEvent","useComponentDictionary","useI18n","useTranslation","Heading","Text","Button","Badge","useComponentContext","data","useInformationRequestsGetInformationRequestsSuspense","visibleRequests","request","InformationRequestStatus","getTypeLabel","type","InformationRequestType","getStatusMapping","status","dataViewProps","useDataView","EmptyData","FlexItem","statusMapping","showPayrollBlockingBadge","jsxs","Flex","informationRequestEvents","DataView"],"mappings":"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"}

package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsForm/ConfirmWireDetailsForm.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import { useTranslation as F, Trans as A } from "react-i18next";
 import r from "zod";
-import { useForm as _, FormProvider as O } from "react-hook-form";
-import { zodResolver as T } from "@hookform/resolvers/zod";
-import { useIsMutating as E } from "@tanstack/react-query";
+import { useForm as _, FormProvider as T } from "react-hook-form";
+import { zodResolver as E } from "@hookform/resolvers/zod";
+import { useIsMutating as O } from "@tanstack/react-query";
 import { useWireInRequestsSubmitMutation as U, mutationKeyWireInRequestsSubmit as j } from "@gusto/embedded-api/react-query/wireInRequestsSubmit";
 import { useWireInRequestsGetSuspense as B } from "@gusto/embedded-api/react-query/wireInRequestsGet";
 import { usePayrollsListSuspense as G } from "@gusto/embedded-api/react-query/payrollsList";
@@ -11,62 +11,62 @@ import d from "./ConfirmWireDetailsForm.module.scss.js";
 import { Form as H } from "../../../Common/Form/Form.js";
 import { BaseComponent as K } from "../../../Base/Base.js";
 import { useBase as Y } from "../../../Base/useBase.js";
-import { useComponentContext as S } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useComponentDictionary as z, useI18n as g } from "../../../../i18n/I18n.js";
+import { useComponentContext as g } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useComponentDictionary as z, useI18n as N } from "../../../../i18n/I18n.js";
 import { Flex as p, FlexItem as f } from "../../../Common/Flex/Flex.js";
-import { payrollWireEvents as I } from "../../../../shared/constants.js";
-import "react";
+import { payrollWireEvents as S } from "../../../../shared/constants.js";
 import { TextAreaField as V } from "../../../Common/Fields/TextAreaField/TextAreaField.js";
 import { useDateFormatter as J } from "../../../../hooks/useDateFormatter.js";
-import { NumberInputField as Q } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
-import { DatePickerField as X } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
-import { TextInputField as Z } from "../../../Common/Fields/TextInputField/TextInputField.js";
-const $ = r.object({
+import { formatDateToStringDate as Q } from "../../../../helpers/dateFormatting.js";
+import { NumberInputField as X } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
+import { DatePickerField as Z } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
+import { TextInputField as $ } from "../../../Common/Fields/TextInputField/TextInputField.js";
+const ee = r.object({
   amountSent: r.number().positive(),
   dateSent: r.date(),
   bankName: r.string().min(1),
   additionalNotes: r.string().optional()
-}), N = "confirm-wire-details-form", ee = (o) => ({
+}), C = "confirm-wire-details-form", te = (o) => ({
   amountSent: String(o.amountSent),
-  dateSent: o.dateSent.toISOString().split("T")[0] || "",
+  dateSent: Q(o.dateSent) ?? "",
   bankName: o.bankName,
   additionalNotes: o.additionalNotes || void 0
 });
-function te(o) {
-  return /* @__PURE__ */ e(K, { ...o, children: /* @__PURE__ */ e(oe, { ...o, children: o.children }) });
+function oe(o) {
+  return /* @__PURE__ */ e(K, { ...o, children: /* @__PURE__ */ e(re, { ...o, children: o.children }) });
 }
-const oe = ({
+const re = ({
   wireInId: o,
   companyId: n,
   dictionary: i,
   modalContainerRef: y
 }) => {
-  z("Payroll.ConfirmWireDetailsForm", i), g("Payroll.ConfirmWireDetailsForm");
-  const { onEvent: a, baseSubmitHandler: C } = Y(), { t } = F("Payroll.ConfirmWireDetailsForm"), { Heading: v, Text: b } = S(), R = J(), { data: P } = B({
+  z("Payroll.ConfirmWireDetailsForm", i), N("Payroll.ConfirmWireDetailsForm");
+  const { onEvent: a, baseSubmitHandler: I } = Y(), { t } = F("Payroll.ConfirmWireDetailsForm"), { Heading: v, Text: b } = g(), R = J(), { data: P } = B({
     wireInRequestUuid: o
   }), q = P.wireInRequest, { data: W } = G({
     companyId: n,
     processed: !0
   }), l = W.payrollList?.find(
     (u) => u.payrollUuid === q?.paymentUuid
-  ), s = l?.payPeriod, c = s?.startDate && s.endDate ? R.formatPayPeriodRange(s.startDate, s.endDate) : void 0, h = l ? R.formatShortWithYear(l.checkDate) : void 0, D = _({
-    resolver: T($),
+  ), s = l?.payPeriod, c = s?.startDate && s.endDate ? R.formatPayPeriodRange(s.startDate, s.endDate) : void 0, D = l ? R.formatShortWithYear(l.checkDate) : void 0, h = _({
+    resolver: E(ee),
     defaultValues: {
       bankName: ""
     }
   }), { mutateAsync: k } = U(), x = async (u) => {
-    await C(u, async (w) => {
-      const L = ee(w), M = await k({
+    await I(u, async (w) => {
+      const L = te(w), M = await k({
         request: {
           wireInRequestUuid: o,
           wireInRequestUpdateRequestBody: L
         }
       });
-      a(I.PAYROLL_WIRE_FORM_DONE, {
+      a(S.PAYROLL_WIRE_FORM_DONE, {
         wireInRequest: M.wireInRequest,
         confirmationAlert: {
           title: c ? t("confirmationAlert.title", { payrollRange: c }) : t("confirmationAlert.emptyTitle"),
-          content: h ? /* @__PURE__ */ e(b, { children: t("confirmationAlert.content", { checkDate: h }) }) : void 0
+          content: D ? /* @__PURE__ */ e(b, { children: t("confirmationAlert.content", { checkDate: D }) }) : void 0
         }
       });
     });
@@ -76,15 +76,15 @@ const oe = ({
       /* @__PURE__ */ e(v, { as: "h2", children: /* @__PURE__ */ e(A, { i18nKey: "title", t, values: { payrollRange: c } }) }),
       /* @__PURE__ */ e(b, { children: t("description") })
     ] }),
-    /* @__PURE__ */ e(O, { ...D, children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(T, { ...h, children: /* @__PURE__ */ e(
       H,
       {
-        id: N,
-        onSubmit: D.handleSubmit(x),
+        id: C,
+        onSubmit: h.handleSubmit(x),
         className: d.form,
         children: /* @__PURE__ */ m(p, { flexDirection: "column", gap: 20, children: [
           /* @__PURE__ */ e(
-            Q,
+            X,
             {
               name: "amountSent",
               label: t("amountLabel"),
@@ -94,7 +94,7 @@ const oe = ({
             }
           ),
           /* @__PURE__ */ e(
-            X,
+            Z,
             {
               name: "dateSent",
               label: t("dateLabel"),
@@ -104,7 +104,7 @@ const oe = ({
             }
           ),
           /* @__PURE__ */ e(
-            Z,
+            $,
             {
               name: "bankName",
               label: t("bankNameLabel"),
@@ -119,9 +119,9 @@ const oe = ({
       }
     ) })
   ] });
-}, re = ({ onEvent: o }) => {
-  g("Payroll.ConfirmWireDetailsForm");
-  const { t: n } = F("Payroll.ConfirmWireDetailsForm"), { Button: i } = S(), a = E({
+}, ne = ({ onEvent: o }) => {
+  N("Payroll.ConfirmWireDetailsForm");
+  const { t: n } = F("Payroll.ConfirmWireDetailsForm"), { Button: i } = g(), a = O({
     mutationKey: j()
   }) > 0;
   return /* @__PURE__ */ m(p, { gap: 12, justifyContent: "space-evenly", children: [
@@ -130,7 +130,7 @@ const oe = ({
       {
         variant: "secondary",
         onClick: () => {
-          o(I.PAYROLL_WIRE_FORM_CANCEL);
+          o(S.PAYROLL_WIRE_FORM_CANCEL);
         },
         isDisabled: a,
         className: d.button,
@@ -142,7 +142,7 @@ const oe = ({
       {
         variant: "primary",
         type: "submit",
-        form: N,
+        form: C,
         isLoading: a,
         className: d.button,
         children: n("submitCta")
@@ -150,8 +150,8 @@ const oe = ({
     ) })
   ] });
 };
-te.Footer = re;
+oe.Footer = ne;
 export {
-  te as ConfirmWireDetailsForm
+  oe as ConfirmWireDetailsForm
 };
 //# sourceMappingURL=ConfirmWireDetailsForm.js.map

package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsForm/ConfirmWireDetailsForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConfirmWireDetailsForm.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsForm/ConfirmWireDetailsForm.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport z from 'zod'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useIsMutating } from '@tanstack/react-query'\nimport {\n useWireInRequestsSubmitMutation,\n mutationKeyWireInRequestsSubmit,\n} from '@gusto/embedded-api/react-query/wireInRequestsSubmit'\nimport { useWireInRequestsGetSuspense } from '@gusto/embedded-api/react-query/wireInRequestsGet'\nimport type { PutWireInRequestsWireInRequestUuidRequest } from '@gusto/embedded-api/models/operations/putwireinrequestswireinrequestuuid'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport styles from './ConfirmWireDetailsForm.module.scss'\nimport { Form as HtmlForm } from '@/components/Common/Form'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { Flex, FlexItem } from '@/components/Common/Flex/Flex'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\nimport { DatePickerField, NumberInputField, TextInputField } from '@/components/Common'\nimport { TextAreaField } from '@/components/Common/Fields/TextAreaField'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\n\ninterface ConfirmWireDetailsFormProps extends BaseComponentInterface<'Payroll.ConfirmWireDetailsForm'> {\n wireInId: string\n companyId: string\n modalContainerRef?: React.RefObject<HTMLDivElement \| null>\n}\n\nconst ConfirmWireDetailsFormSchema = z.object({\n amountSent: z.number().positive(),\n dateSent: z.date(),\n bankName: z.string().min(1),\n additionalNotes: z.string().optional(),\n})\n\ntype ConfirmWireDetailsFormValues = z.infer<typeof ConfirmWireDetailsFormSchema>\n\nconst CONFIRM_WIRE_FORM_ID = 'confirm-wire-details-form'\n\nconst transformFormDataToPayload = (\n data: ConfirmWireDetailsFormValues,\n): PutWireInRequestsWireInRequestUuidRequest['wireInRequestUpdateRequestBody'] => {\n return {\n amountSent: String(data.amountSent),\n dateSent: data.dateSent.toISOString().split('T')[0] \|\| '',\n bankName: data.bankName,\n additionalNotes: data.additionalNotes \|\| undefined,\n }\n}\n\n/** @internal */\nexport function ConfirmWireDetailsForm(props: ConfirmWireDetailsFormProps) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nconst Root = ({\n wireInId,\n companyId,\n dictionary,\n modalContainerRef,\n}: ConfirmWireDetailsFormProps) => {\n useComponentDictionary('Payroll.ConfirmWireDetailsForm', dictionary)\n useI18n('Payroll.ConfirmWireDetailsForm')\n const { onEvent, baseSubmitHandler } = useBase()\n const { t } = useTranslation('Payroll.ConfirmWireDetailsForm')\n const { Heading, Text } = useComponentContext()\n const dateFormatter = useDateFormatter()\n const { data } = useWireInRequestsGetSuspense({\n wireInRequestUuid: wireInId,\n })\n const wireInRequest = data.wireInRequest\n\n const { data: payrollsData } = usePayrollsListSuspense({\n companyId,\n processed: true,\n })\n\n const payrollData = payrollsData.payrollList?.find(\n payroll => payroll.payrollUuid === wireInRequest?.paymentUuid,\n )\n const payPeriod = payrollData?.payPeriod\n const payPeriodRange =\n payPeriod?.startDate && payPeriod.endDate\n ? dateFormatter.formatPayPeriodRange(payPeriod.startDate, payPeriod.endDate)\n : undefined\n\n const checkDate = payrollData\n ? dateFormatter.formatShortWithYear(payrollData.checkDate)\n : undefined\n\n const formHandlers = useForm<ConfirmWireDetailsFormValues>({\n resolver: zodResolver(ConfirmWireDetailsFormSchema),\n defaultValues: {\n bankName: '',\n },\n })\n\n const { mutateAsync: submitWireInRequest } = useWireInRequestsSubmitMutation()\n\n const onSubmit = async (data: ConfirmWireDetailsFormValues) => {\n await baseSubmitHandler(data, async innerData => {\n const payload = transformFormDataToPayload(innerData)\n const response = await submitWireInRequest({\n request: {\n wireInRequestUuid: wireInId,\n wireInRequestUpdateRequestBody: payload,\n },\n })\n onEvent(payrollWireEvents.PAYROLL_WIRE_FORM_DONE, {\n wireInRequest: response.wireInRequest,\n confirmationAlert: {\n title: payPeriodRange\n ? t('confirmationAlert.title', { payrollRange: payPeriodRange })\n : t('confirmationAlert.emptyTitle'),\n content: checkDate ? (\n <Text>{t('confirmationAlert.content', { checkDate })}</Text>\n ) : undefined,\n },\n })\n })\n }\n\n return (\n <Flex flexDirection=\"column\" gap={24}>\n <FlexItem>\n <Heading as=\"h2\">\n <Trans i18nKey=\"title\" t={t} values={{ payrollRange: payPeriodRange }} />\n </Heading>\n <Text>{t('description')}</Text>\n </FlexItem>\n\n <FormProvider {...formHandlers}>\n <HtmlForm\n id={CONFIRM_WIRE_FORM_ID}\n onSubmit={formHandlers.handleSubmit(onSubmit)}\n className={styles.form}\n >\n <Flex flexDirection=\"column\" gap={20}>\n <NumberInputField\n name=\"amountSent\"\n label={t('amountLabel')}\n isRequired\n format=\"currency\"\n errorMessage={t('validations.amount')}\n />\n <DatePickerField\n name=\"dateSent\"\n label={t('dateLabel')}\n isRequired\n errorMessage={t('validations.date')}\n portalContainer={modalContainerRef?.current \|\| undefined}\n />\n <TextInputField\n name=\"bankName\"\n label={t('bankNameLabel')}\n isRequired\n description={t('bankNameDescription')}\n placeholder={t('bankNamePlaceholder')}\n errorMessage={t('validations.bankName')}\n />\n <TextAreaField name=\"additionalNotes\" label={t('notesLabel')} rows={3} />\n </Flex>\n </HtmlForm>\n </FormProvider>\n </Flex>\n )\n}\n\nconst Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {\n useI18n('Payroll.ConfirmWireDetailsForm')\n const { t } = useTranslation('Payroll.ConfirmWireDetailsForm')\n const { Button } = useComponentContext()\n const isMutating = useIsMutating({\n mutationKey: mutationKeyWireInRequestsSubmit(),\n })\n const isPending = isMutating > 0\n\n return (\n <Flex gap={12} justifyContent=\"space-evenly\">\n <FlexItem flexGrow={1}>\n <Button\n variant=\"secondary\"\n onClick={() => {\n onEvent(payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL)\n }}\n isDisabled={isPending}\n className={styles.button}\n >\n {t('cancelCta')}\n </Button>\n </FlexItem>\n <FlexItem flexGrow={1}>\n <Button\n variant=\"primary\"\n type=\"submit\"\n form={CONFIRM_WIRE_FORM_ID}\n isLoading={isPending}\n className={styles.button}\n >\n {t('submitCta')}\n </Button>\n </FlexItem>\n </Flex>\n )\n}\nConfirmWireDetailsForm.Footer = Footer\n"],"names":["ConfirmWireDetailsFormSchema","z","CONFIRM_WIRE_FORM_ID","transformFormDataToPayload","data","ConfirmWireDetailsForm","props","jsx","BaseComponent","Root","wireInId","companyId","dictionary","modalContainerRef","useComponentDictionary","useI18n","onEvent","baseSubmitHandler","useBase","useTranslation","Heading","Text","useComponentContext","dateFormatter","useDateFormatter","useWireInRequestsGetSuspense","wireInRequest","payrollsData","usePayrollsListSuspense","payrollData","payroll","payPeriod","payPeriodRange","checkDate","formHandlers","useForm","zodResolver","submitWireInRequest","useWireInRequestsSubmitMutation","onSubmit","innerData","payload","response","payrollWireEvents","jsxs","Flex","FlexItem","Trans","FormProvider","HtmlForm","styles","NumberInputField","DatePickerField","TextInputField","TextAreaField","Footer","t","Button","isPending","useIsMutating","mutationKeyWireInRequestsSubmit"],"mappings":"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"}
1	+ {"version":3,"file":"ConfirmWireDetailsForm.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsForm/ConfirmWireDetailsForm.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport z from 'zod'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useIsMutating } from '@tanstack/react-query'\nimport {\n useWireInRequestsSubmitMutation,\n mutationKeyWireInRequestsSubmit,\n} from '@gusto/embedded-api/react-query/wireInRequestsSubmit'\nimport { useWireInRequestsGetSuspense } from '@gusto/embedded-api/react-query/wireInRequestsGet'\nimport type { PutWireInRequestsWireInRequestUuidRequest } from '@gusto/embedded-api/models/operations/putwireinrequestswireinrequestuuid'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport styles from './ConfirmWireDetailsForm.module.scss'\nimport { Form as HtmlForm } from '@/components/Common/Form'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { Flex, FlexItem } from '@/components/Common/Flex/Flex'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\nimport { DatePickerField, NumberInputField, TextInputField } from '@/components/Common'\nimport { TextAreaField } from '@/components/Common/Fields/TextAreaField'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\n\ninterface ConfirmWireDetailsFormProps extends BaseComponentInterface<'Payroll.ConfirmWireDetailsForm'> {\n wireInId: string\n companyId: string\n modalContainerRef?: React.RefObject<HTMLDivElement \| null>\n}\n\nconst ConfirmWireDetailsFormSchema = z.object({\n amountSent: z.number().positive(),\n dateSent: z.date(),\n bankName: z.string().min(1),\n additionalNotes: z.string().optional(),\n})\n\ntype ConfirmWireDetailsFormValues = z.infer<typeof ConfirmWireDetailsFormSchema>\n\nconst CONFIRM_WIRE_FORM_ID = 'confirm-wire-details-form'\n\nconst transformFormDataToPayload = (\n data: ConfirmWireDetailsFormValues,\n): PutWireInRequestsWireInRequestUuidRequest['wireInRequestUpdateRequestBody'] => {\n return {\n amountSent: String(data.amountSent),\n dateSent: formatDateToStringDate(data.dateSent) ?? '',\n bankName: data.bankName,\n additionalNotes: data.additionalNotes \|\| undefined,\n }\n}\n\n/** @internal */\nexport function ConfirmWireDetailsForm(props: ConfirmWireDetailsFormProps) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nconst Root = ({\n wireInId,\n companyId,\n dictionary,\n modalContainerRef,\n}: ConfirmWireDetailsFormProps) => {\n useComponentDictionary('Payroll.ConfirmWireDetailsForm', dictionary)\n useI18n('Payroll.ConfirmWireDetailsForm')\n const { onEvent, baseSubmitHandler } = useBase()\n const { t } = useTranslation('Payroll.ConfirmWireDetailsForm')\n const { Heading, Text } = useComponentContext()\n const dateFormatter = useDateFormatter()\n const { data } = useWireInRequestsGetSuspense({\n wireInRequestUuid: wireInId,\n })\n const wireInRequest = data.wireInRequest\n\n const { data: payrollsData } = usePayrollsListSuspense({\n companyId,\n processed: true,\n })\n\n const payrollData = payrollsData.payrollList?.find(\n payroll => payroll.payrollUuid === wireInRequest?.paymentUuid,\n )\n const payPeriod = payrollData?.payPeriod\n const payPeriodRange =\n payPeriod?.startDate && payPeriod.endDate\n ? dateFormatter.formatPayPeriodRange(payPeriod.startDate, payPeriod.endDate)\n : undefined\n\n const checkDate = payrollData\n ? dateFormatter.formatShortWithYear(payrollData.checkDate)\n : undefined\n\n const formHandlers = useForm<ConfirmWireDetailsFormValues>({\n resolver: zodResolver(ConfirmWireDetailsFormSchema),\n defaultValues: {\n bankName: '',\n },\n })\n\n const { mutateAsync: submitWireInRequest } = useWireInRequestsSubmitMutation()\n\n const onSubmit = async (data: ConfirmWireDetailsFormValues) => {\n await baseSubmitHandler(data, async innerData => {\n const payload = transformFormDataToPayload(innerData)\n const response = await submitWireInRequest({\n request: {\n wireInRequestUuid: wireInId,\n wireInRequestUpdateRequestBody: payload,\n },\n })\n onEvent(payrollWireEvents.PAYROLL_WIRE_FORM_DONE, {\n wireInRequest: response.wireInRequest,\n confirmationAlert: {\n title: payPeriodRange\n ? t('confirmationAlert.title', { payrollRange: payPeriodRange })\n : t('confirmationAlert.emptyTitle'),\n content: checkDate ? (\n <Text>{t('confirmationAlert.content', { checkDate })}</Text>\n ) : undefined,\n },\n })\n })\n }\n\n return (\n <Flex flexDirection=\"column\" gap={24}>\n <FlexItem>\n <Heading as=\"h2\">\n <Trans i18nKey=\"title\" t={t} values={{ payrollRange: payPeriodRange }} />\n </Heading>\n <Text>{t('description')}</Text>\n </FlexItem>\n\n <FormProvider {...formHandlers}>\n <HtmlForm\n id={CONFIRM_WIRE_FORM_ID}\n onSubmit={formHandlers.handleSubmit(onSubmit)}\n className={styles.form}\n >\n <Flex flexDirection=\"column\" gap={20}>\n <NumberInputField\n name=\"amountSent\"\n label={t('amountLabel')}\n isRequired\n format=\"currency\"\n errorMessage={t('validations.amount')}\n />\n <DatePickerField\n name=\"dateSent\"\n label={t('dateLabel')}\n isRequired\n errorMessage={t('validations.date')}\n portalContainer={modalContainerRef?.current \|\| undefined}\n />\n <TextInputField\n name=\"bankName\"\n label={t('bankNameLabel')}\n isRequired\n description={t('bankNameDescription')}\n placeholder={t('bankNamePlaceholder')}\n errorMessage={t('validations.bankName')}\n />\n <TextAreaField name=\"additionalNotes\" label={t('notesLabel')} rows={3} />\n </Flex>\n </HtmlForm>\n </FormProvider>\n </Flex>\n )\n}\n\nconst Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {\n useI18n('Payroll.ConfirmWireDetailsForm')\n const { t } = useTranslation('Payroll.ConfirmWireDetailsForm')\n const { Button } = useComponentContext()\n const isMutating = useIsMutating({\n mutationKey: mutationKeyWireInRequestsSubmit(),\n })\n const isPending = isMutating > 0\n\n return (\n <Flex gap={12} justifyContent=\"space-evenly\">\n <FlexItem flexGrow={1}>\n <Button\n variant=\"secondary\"\n onClick={() => {\n onEvent(payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL)\n }}\n isDisabled={isPending}\n className={styles.button}\n >\n {t('cancelCta')}\n </Button>\n </FlexItem>\n <FlexItem flexGrow={1}>\n <Button\n variant=\"primary\"\n type=\"submit\"\n form={CONFIRM_WIRE_FORM_ID}\n isLoading={isPending}\n className={styles.button}\n >\n {t('submitCta')}\n </Button>\n </FlexItem>\n </Flex>\n )\n}\nConfirmWireDetailsForm.Footer = Footer\n"],"names":["ConfirmWireDetailsFormSchema","z","CONFIRM_WIRE_FORM_ID","transformFormDataToPayload","data","formatDateToStringDate","ConfirmWireDetailsForm","props","jsx","BaseComponent","Root","wireInId","companyId","dictionary","modalContainerRef","useComponentDictionary","useI18n","onEvent","baseSubmitHandler","useBase","useTranslation","Heading","Text","useComponentContext","dateFormatter","useDateFormatter","useWireInRequestsGetSuspense","wireInRequest","payrollsData","usePayrollsListSuspense","payrollData","payroll","payPeriod","payPeriodRange","checkDate","formHandlers","useForm","zodResolver","submitWireInRequest","useWireInRequestsSubmitMutation","onSubmit","innerData","payload","response","payrollWireEvents","jsxs","Flex","FlexItem","Trans","FormProvider","HtmlForm","styles","NumberInputField","DatePickerField","TextInputField","TextAreaField","Footer","t","Button","isPending","useIsMutating","mutationKeyWireInRequestsSubmit"],"mappings":"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"}

package/dist/components/Payroll/Dismissal/DismissalPayPeriodSelection/DismissalPayPeriodSelectionPresentation.js CHANGED Viewed

@@ -3,18 +3,17 @@ import { useTranslation as d } from "react-i18next";
 import { Flex as o } from "../../../Common/Flex/Flex.js";
 import { ActionsLayout as f } from "../../../Common/ActionsLayout/ActionsLayout.js";
 import { useComponentContext as g } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import "react";
 import { useI18n as x } from "../../../../i18n/I18n.js";
-function S({
-  payPeriodOptions: r,
-  selectedPeriodKey: n,
+function L({
+  payPeriodOptions: n,
+  selectedPeriodKey: r,
   onSelectPeriod: s,
   onSubmit: c,
   isPending: l
 }) {
   x("Payroll.Dismissal");
   const { t: i } = d("Payroll.Dismissal"), { Heading: a, Text: m, Select: p, Button: u, Alert: h } = g();
-  return r.length === 0 ? /* @__PURE__ */ t(o, { flexDirection: "column", gap: 24, children: [
+  return n.length === 0 ? /* @__PURE__ */ t(o, { flexDirection: "column", gap: 24, children: [
     /* @__PURE__ */ e(o, { flexDirection: "column", gap: 4, children: /* @__PURE__ */ e(a, { as: "h2", children: i("pageTitle") }) }),
     /* @__PURE__ */ e(h, { status: "info", label: i("emptyState") })
   ] }) : /* @__PURE__ */ t(o, { flexDirection: "column", gap: 24, children: [
@@ -26,8 +25,8 @@ function S({
       p,
       {
         label: i("selectLabel"),
-        options: r,
-        value: n,
+        options: n,
+        value: r,
         onChange: s,
         placeholder: i("selectPlaceholder"),
         isRequired: !0
@@ -39,13 +38,13 @@ function S({
         variant: "primary",
         onClick: c,
         isLoading: l,
-        isDisabled: l || n === void 0,
+        isDisabled: l || r === void 0,
         children: i("continueCta")
       }
     ) })
   ] });
 }
 export {
-  S as DismissalPayPeriodSelectionPresentation
+  L as DismissalPayPeriodSelectionPresentation
 };
 //# sourceMappingURL=DismissalPayPeriodSelectionPresentation.js.map