@gusto/embedded-react-sdk 0.40.0 → 0.41.0

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

@@ -1,153 +1,36 @@
-import { jsx as a, jsxs as z } from "react/jsx-runtime";
-import { useForm as G, FormProvider as K } from "react-hook-form";
-import { zodResolver as J } from "@hookform/resolvers/zod";
-import { useState as q, useEffect as T } from "react";
-import { usePaySchedulesGetPreview as Q } from "@gusto/embedded-api/react-query/paySchedulesGetPreview";
-import { usePaySchedulesUpdateMutation as W } from "@gusto/embedded-api/react-query/paySchedulesUpdate";
-import { usePaySchedulesGetAllSuspense as X } from "@gusto/embedded-api/react-query/paySchedulesGetAll";
-import { usePaySchedulesCreateMutation as Z } from "@gusto/embedded-api/react-query/paySchedulesCreate";
-import { RFCDate as i } from "@gusto/embedded-api/types/rfcdate";
-import { PayScheduleSchema as $, PayScheduleProvider as V } from "./usePaySchedule.js";
-import { useCompanyPaymentSpeed as ee } from "../../../hooks/useCompanyPaymentSpeed.js";
-import { Form as oe } from "../../Common/Form/Form.js";
-import { BaseComponent as re } from "../../Base/Base.js";
-import { useBase as te } from "../../Base/useBase.js";
-import { Flex as ae } from "../../Common/Flex/Flex.js";
-import { useI18n as ne, useComponentDictionary as ce } from "../../../i18n/I18n.js";
-import { componentEvents as p } from "../../../shared/constants.js";
-import { formatDateToStringDate as l } from "../../../helpers/dateFormatting.js";
-import { normalizeErrorKeyForForm as ie } from "../../../helpers/formattedStrings.js";
-import { Head as de } from "./_parts/Head.js";
-import { List as se } from "./_parts/List.js";
-import { Edit as me } from "./_parts/Edit.js";
-import { Actions as ye } from "./_parts/Actions.js";
-const Re = ({
-  companyId: n,
-  defaultValues: m,
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as u } from "react";
+import { createMachine as l } from "robot3";
+import { usePaySchedulesGetAllSuspense as p } from "@gusto/embedded-api/react-query/paySchedulesGetAll";
+import { payScheduleStateMachine as h } from "./payScheduleStateMachine.js";
+import { PayScheduleListContextual as S, PayScheduleFormContextual as d } from "./PayScheduleComponents.js";
+import { BaseComponent as f } from "../../Base/Base.js";
+import { useBase as y } from "../../Base/useBase.js";
+import { useI18n as C, useComponentDictionary as P } from "../../../i18n/I18n.js";
+import { Flow as x } from "../../Flow/Flow.js";
+const L = ({
+  companyId: e,
+  defaultValues: o,
   dictionary: t,
-  ...y
-}) => (ne("Company.PaySchedule"), ce("Company.PaySchedule", t), /* @__PURE__ */ a(re, { ...y, children: /* @__PURE__ */ a(Pe, { companyId: n, defaultValues: m, children: y.children }) })), Pe = ({ companyId: n, children: m, defaultValues: t }) => {
-  const { baseSubmitHandler: y, onEvent: f, error: O, setError: U } = te(), { data: w } = X({
-    companyId: n
-  }), { paymentSpeedDays: H } = ee(n), [d, P] = q(
-    w.paySchedules?.length === 0 ? "ADD_PAY_SCHEDULE" : "LIST_PAY_SCHEDULES"
-  ), [E, Y] = q(null), g = {
-    frequency: t?.frequency ?? "Every week",
-    anchorPayDate: t?.anchorPayDate ? new Date(t.anchorPayDate) : void 0,
-    anchorEndOfPayPeriod: t?.anchorEndOfPayPeriod ? new Date(t.anchorEndOfPayPeriod) : void 0,
-    day1: t?.day1 ?? void 0,
-    day2: t?.day2 ?? void 0,
-    customName: t?.customName ?? "",
-    customTwicePerMonth: "false"
-  }, v = Z(), A = W(), D = G({
-    resolver: J($),
-    defaultValues: g
-  }), { watch: M, setValue: S, reset: s, clearErrors: N, setError: _ } = D, u = O?.fieldErrors;
-  T(() => {
-    u && u.length > 0 && u.forEach((o) => {
-      const r = ie(o.field);
-      _(r, { message: o.message });
-    });
-  }, [_, u]);
-  const e = M(), C = e.anchorPayDate && l(e.anchorPayDate) || "", L = e.anchorEndOfPayPeriod && l(e.anchorEndOfPayPeriod) || "", { data: R, isLoading: F } = Q(
-    {
-      companyId: n,
-      frequency: e.frequency,
-      ...C && { anchorPayDate: new i(C) },
-      ...L && {
-        anchorEndOfPayPeriod: new i(L)
-      },
-      day1: e.day1 ?? void 0,
-      day2: e.day2 ?? void 0
-    },
-    {
-      enabled: !!(e.anchorPayDate && e.anchorEndOfPayPeriod && (d === "ADD_PAY_SCHEDULE" || d === "EDIT_PAY_SCHEDULE"))
-    }
+  ...n
+}) => (C("Company.PaySchedule"), P("Company.PaySchedule", t), /* @__PURE__ */ r(f, { ...n, children: /* @__PURE__ */ r(M, { companyId: e, defaultValues: o }) }));
+function M({ companyId: e, defaultValues: o }) {
+  const { onEvent: t } = y(), { data: n } = p({ companyId: e }), m = (n.paySchedules?.length ?? 0) > 0, c = m ? "listSchedules" : "addSchedule", i = m ? S : d, a = u(
+    () => l(
+      c,
+      h,
+      (s) => ({
+        ...s,
+        component: i,
+        companyId: e,
+        defaultValues: o
+      })
+    ),
+    [e, o, c, i]
   );
-  T(() => {
-    e.frequency === "Twice per month" && e.day1 === 15 && e.day2 === 31 && e.customTwicePerMonth === void 0 ? S("customTwicePerMonth", "1st15th") : e.frequency === "Twice per month" && e.customTwicePerMonth === void 0 && S("customTwicePerMonth", "custom");
-  }, [e.frequency, e.day1, e.day2, S, e.customTwicePerMonth]);
-  const b = () => {
-    P("ADD_PAY_SCHEDULE"), s({});
-  }, x = () => {
-    P("LIST_PAY_SCHEDULES"), s({}), N(), U(null);
-  }, B = (o) => {
-    s({
-      frequency: o.frequency,
-      anchorPayDate: o.anchorPayDate ? new Date(o.anchorPayDate.toString()) : void 0,
-      anchorEndOfPayPeriod: o.anchorEndOfPayPeriod ? new Date(o.anchorEndOfPayPeriod.toString()) : void 0,
-      day1: o.day1 ?? void 0,
-      day2: o.day2 ?? void 0,
-      customName: o.customName ?? ""
-    }), Y(o), P("EDIT_PAY_SCHEDULE");
-  }, I = () => {
-    f(p.PAY_SCHEDULE_DONE);
-  }, j = async (o) => {
-    await y(o, async (r) => {
-      const h = (c) => c && l(c) || "";
-      if (d === "ADD_PAY_SCHEDULE") {
-        const c = await v.mutateAsync({
-          request: {
-            companyId: n,
-            payScheduleCreateRequest: {
-              frequency: r.frequency,
-              anchorPayDate: new i(h(r.anchorPayDate)),
-              anchorEndOfPayPeriod: new i(h(r.anchorEndOfPayPeriod)),
-              customName: r.customName,
-              day1: r.day1,
-              day2: r.day2
-            }
-          }
-        });
-        f(p.PAY_SCHEDULE_CREATED, c), s();
-      } else if (d === "EDIT_PAY_SCHEDULE") {
-        const c = E?.version, k = await A.mutateAsync({
-          request: {
-            payScheduleId: E?.uuid,
-            companyId: n,
-            payScheduleUpdateRequest: {
-              frequency: r.frequency,
-              anchorPayDate: new i(h(r.anchorPayDate)),
-              anchorEndOfPayPeriod: new i(h(r.anchorEndOfPayPeriod)),
-              customName: r.customName,
-              day1: r.day1,
-              day2: r.day2,
-              version: c
-            }
-          }
-        });
-        f(p.PAY_SCHEDULE_UPDATED, k), s();
-      }
-      P("LIST_PAY_SCHEDULES");
-    });
-  };
-  return /* @__PURE__ */ a(
-    V,
-    {
-      value: {
-        companyId: n,
-        handleAdd: b,
-        handleEdit: B,
-        handleCancel: x,
-        handleContinue: I,
-        mode: d,
-        isPending: v.isPending || A.isPending,
-        paySchedules: w.paySchedules,
-        payPeriodPreview: R?.paySchedulePreview?.payPeriods,
-        payPreviewLoading: F,
-        currentPaySchedule: E,
-        paymentSpeedDays: H
-      },
-      children: /* @__PURE__ */ a("span", { "data-testid": "pay-schedule-edit-form", children: /* @__PURE__ */ a(K, { ...D, children: /* @__PURE__ */ a(oe, { onSubmit: D.handleSubmit(j), children: m || /* @__PURE__ */ z(ae, { flexDirection: "column", children: [
-        /* @__PURE__ */ a(de, {}),
-        /* @__PURE__ */ a(se, {}),
-        /* @__PURE__ */ a(me, {}),
-        /* @__PURE__ */ a(ye, {})
-      ] }) }) }) })
-    }
-  );
-};
+  return /* @__PURE__ */ r(x, { machine: a, onEvent: t });
+}
 export {
-  Re as PaySchedule
+  L as PaySchedule
 };
 //# sourceMappingURL=PaySchedule.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaySchedule.js","sources":["../../../../src/components/Company/PaySchedule/PaySchedule.tsx"],"sourcesContent":["import type { SubmitHandler } from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useEffect, useState } from 'react'\nimport { usePaySchedulesGetPreview } from '@gusto/embedded-api/react-query/paySchedulesGetPreview'\nimport { usePaySchedulesUpdateMutation } from '@gusto/embedded-api/react-query/paySchedulesUpdate'\nimport { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'\nimport { usePaySchedulesCreateMutation } from '@gusto/embedded-api/react-query/paySchedulesCreate'\nimport type { PaySchedule as PayScheduleType } from '@gusto/embedded-api/models/components/payschedule'\nimport { RFCDate } from '@gusto/embedded-api/types/rfcdate'\nimport type { MODE, PayScheduleInputs, PayScheduleOutputs } from './usePaySchedule'\nimport {\n  PayScheduleProvider,\n  PayScheduleSchema,\n  type PayScheduleDefaultValues,\n} from './usePaySchedule'\nimport { Actions, Edit, Head, List } from './_parts'\nimport { useCompanyPaymentSpeed } from '@/hooks/useCompanyPaymentSpeed'\nimport { Form } from '@/components/Common/Form'\nimport type { BaseComponentInterface, CommonComponentInterface } from '@/components/Base'\nimport { BaseComponent, useBase } from '@/components/Base'\nimport { Flex } from '@/components/Common'\nimport { useI18n } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\nimport { normalizeErrorKeyForForm } from '@/helpers/formattedStrings'\nimport { useComponentDictionary } from '@/i18n/I18n'\n\ninterface PayScheduleProps extends CommonComponentInterface<'Company.PaySchedule'> {\n  companyId: string\n  defaultValues?: PayScheduleDefaultValues\n}\n\nexport const PaySchedule = ({\n  companyId,\n  defaultValues,\n  dictionary,\n  ...props\n}: PayScheduleProps & BaseComponentInterface) => {\n  useI18n('Company.PaySchedule')\n  useComponentDictionary('Company.PaySchedule', dictionary)\n  return (\n    <BaseComponent {...props}>\n      <Root companyId={companyId} defaultValues={defaultValues}>\n        {props.children}\n      </Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ companyId, children, defaultValues }: PayScheduleProps) => {\n  const { baseSubmitHandler, onEvent, error, setError: setBaseError } = useBase()\n\n  const { data: paySchedules } = usePaySchedulesGetAllSuspense({\n    companyId,\n  })\n\n  const { paymentSpeedDays } = useCompanyPaymentSpeed(companyId)\n\n  const [mode, setMode] = useState<MODE>(\n    paySchedules.paySchedules?.length === 0 ? 'ADD_PAY_SCHEDULE' : 'LIST_PAY_SCHEDULES',\n  )\n  const [currentPaySchedule, setCurrentPaySchedule] = useState<PayScheduleType | null>(null)\n  const transformedDefaultValues: PayScheduleInputs = {\n    frequency: defaultValues?.frequency ?? 'Every week',\n    anchorPayDate: defaultValues?.anchorPayDate ? new Date(defaultValues.anchorPayDate) : undefined,\n    anchorEndOfPayPeriod: defaultValues?.anchorEndOfPayPeriod\n      ? new Date(defaultValues.anchorEndOfPayPeriod)\n      : undefined,\n    day1: defaultValues?.day1 ?? undefined,\n    day2: defaultValues?.day2 ?? undefined,\n    customName: defaultValues?.customName ?? '',\n    customTwicePerMonth: 'false',\n  }\n\n  const createPayScheduleMutation = usePaySchedulesCreateMutation()\n  const updatePayScheduleMutation = usePaySchedulesUpdateMutation()\n\n  const formMethods = useForm<PayScheduleInputs, unknown, PayScheduleOutputs>({\n    resolver: zodResolver(PayScheduleSchema),\n    defaultValues: transformedDefaultValues,\n  })\n  const { watch, setValue, reset, clearErrors, setError } = formMethods\n\n  const fieldErrors = error?.fieldErrors\n  useEffect(() => {\n    if (fieldErrors && fieldErrors.length > 0) {\n      fieldErrors.forEach(fieldError => {\n        const key = normalizeErrorKeyForForm(fieldError.field)\n        setError(key as keyof PayScheduleInputs, { message: fieldError.message })\n      })\n    }\n  }, [setError, fieldErrors])\n\n  const allValues = watch()\n\n  const formattedAnchorPayDate = allValues.anchorPayDate\n    ? formatDateToStringDate(allValues.anchorPayDate) || ''\n    : ''\n  const formattedAnchorEndOfPayPeriod = allValues.anchorEndOfPayPeriod\n    ? formatDateToStringDate(allValues.anchorEndOfPayPeriod) || ''\n    : ''\n\n  const { data: payPreviewData, isLoading } = usePaySchedulesGetPreview(\n    {\n      companyId,\n      frequency: allValues.frequency,\n      ...(formattedAnchorPayDate && { anchorPayDate: new RFCDate(formattedAnchorPayDate) }),\n      ...(formattedAnchorEndOfPayPeriod && {\n        anchorEndOfPayPeriod: new RFCDate(formattedAnchorEndOfPayPeriod),\n      }),\n      day1: allValues.day1 ?? undefined,\n      day2: allValues.day2 ?? undefined,\n    } as Parameters<typeof usePaySchedulesGetPreview>[0],\n    {\n      enabled: Boolean(\n        allValues.anchorPayDate &&\n        allValues.anchorEndOfPayPeriod &&\n        (mode === 'ADD_PAY_SCHEDULE' || mode === 'EDIT_PAY_SCHEDULE'),\n      ),\n    },\n  )\n\n  // Set the custom_twice_per_month value based on the frequency and day_1 and day_2 values as it is not set by the API call\n  useEffect(() => {\n    if (\n      allValues.frequency === 'Twice per month' &&\n      allValues.day1 === 15 &&\n      allValues.day2 === 31 &&\n      allValues.customTwicePerMonth === undefined\n    ) {\n      setValue('customTwicePerMonth', `1st15th`)\n    } else if (\n      allValues.frequency === 'Twice per month' &&\n      allValues.customTwicePerMonth === undefined\n    ) {\n      setValue('customTwicePerMonth', `custom`)\n    }\n  }, [allValues.frequency, allValues.day1, allValues.day2, setValue, allValues.customTwicePerMonth])\n\n  const handleAdd = () => {\n    setMode('ADD_PAY_SCHEDULE')\n    reset({})\n  }\n  const handleCancel = () => {\n    setMode('LIST_PAY_SCHEDULES')\n    reset({})\n    clearErrors()\n    setBaseError(null)\n  }\n  const handleEdit = (schedule: PayScheduleType) => {\n    reset({\n      frequency: schedule.frequency as PayScheduleInputs['frequency'],\n      anchorPayDate: schedule.anchorPayDate\n        ? new Date(schedule.anchorPayDate.toString())\n        : undefined,\n      anchorEndOfPayPeriod: schedule.anchorEndOfPayPeriod\n        ? new Date(schedule.anchorEndOfPayPeriod.toString())\n        : undefined,\n      day1: schedule.day1 ?? undefined,\n      day2: schedule.day2 ?? undefined,\n      customName: schedule.customName ?? '',\n    })\n    setCurrentPaySchedule(schedule)\n    setMode('EDIT_PAY_SCHEDULE')\n  }\n  const handleContinue = () => {\n    onEvent(componentEvents.PAY_SCHEDULE_DONE)\n  }\n  const onSubmit: SubmitHandler<PayScheduleOutputs> = async data => {\n    await baseSubmitHandler(data, async payload => {\n      const formatPayloadDate = (date: Date | undefined): string => {\n        return date ? formatDateToStringDate(date) || '' : ''\n      }\n\n      if (mode === 'ADD_PAY_SCHEDULE') {\n        const createPayScheduleResponse = await createPayScheduleMutation.mutateAsync({\n          request: {\n            companyId,\n            payScheduleCreateRequest: {\n              frequency: payload.frequency,\n              anchorPayDate: new RFCDate(formatPayloadDate(payload.anchorPayDate)),\n              anchorEndOfPayPeriod: new RFCDate(formatPayloadDate(payload.anchorEndOfPayPeriod)),\n              customName: payload.customName,\n              day1: payload.day1,\n              day2: payload.day2,\n            },\n          },\n        })\n        onEvent(componentEvents.PAY_SCHEDULE_CREATED, createPayScheduleResponse)\n        reset()\n      } else if (mode === 'EDIT_PAY_SCHEDULE') {\n        const version = currentPaySchedule?.version\n        const updatePayScheduleResponse = await updatePayScheduleMutation.mutateAsync({\n          request: {\n            payScheduleId: currentPaySchedule?.uuid as string,\n            companyId,\n            payScheduleUpdateRequest: {\n              frequency: payload.frequency,\n              anchorPayDate: new RFCDate(formatPayloadDate(payload.anchorPayDate)),\n              anchorEndOfPayPeriod: new RFCDate(formatPayloadDate(payload.anchorEndOfPayPeriod)),\n              customName: payload.customName,\n              day1: payload.day1,\n              day2: payload.day2,\n              version: version as string,\n            },\n          },\n        })\n        onEvent(componentEvents.PAY_SCHEDULE_UPDATED, updatePayScheduleResponse)\n        reset()\n      }\n      setMode('LIST_PAY_SCHEDULES')\n    })\n  }\n\n  return (\n    <PayScheduleProvider\n      value={{\n        companyId,\n        handleAdd,\n        handleEdit,\n        handleCancel,\n        handleContinue,\n        mode,\n        isPending: createPayScheduleMutation.isPending || updatePayScheduleMutation.isPending,\n        paySchedules: paySchedules.paySchedules,\n        payPeriodPreview: payPreviewData?.paySchedulePreview?.payPeriods,\n        payPreviewLoading: isLoading,\n        currentPaySchedule,\n        paymentSpeedDays,\n      }}\n    >\n      <span data-testid=\"pay-schedule-edit-form\">\n        <FormProvider {...formMethods}>\n          <Form onSubmit={formMethods.handleSubmit(onSubmit)}>\n            {children ? (\n              children\n            ) : (\n              <Flex flexDirection=\"column\">\n                <Head />\n                <List />\n                <Edit />\n                <Actions />\n              </Flex>\n            )}\n          </Form>\n        </FormProvider>\n      </span>\n    </PayScheduleProvider>\n  )\n}\n"],"names":["PaySchedule","companyId","defaultValues","dictionary","props","useI18n","useComponentDictionary","jsx","BaseComponent","Root","children","baseSubmitHandler","onEvent","error","setBaseError","useBase","paySchedules","usePaySchedulesGetAllSuspense","paymentSpeedDays","useCompanyPaymentSpeed","mode","setMode","useState","currentPaySchedule","setCurrentPaySchedule","transformedDefaultValues","createPayScheduleMutation","usePaySchedulesCreateMutation","updatePayScheduleMutation","usePaySchedulesUpdateMutation","formMethods","useForm","zodResolver","PayScheduleSchema","watch","setValue","reset","clearErrors","setError","fieldErrors","useEffect","fieldError","key","normalizeErrorKeyForForm","allValues","formattedAnchorPayDate","formatDateToStringDate","formattedAnchorEndOfPayPeriod","payPreviewData","isLoading","usePaySchedulesGetPreview","RFCDate","handleAdd","handleCancel","handleEdit","schedule","handleContinue","componentEvents","onSubmit","data","payload","formatPayloadDate","date","createPayScheduleResponse","version","updatePayScheduleResponse","PayScheduleProvider","FormProvider","Form","jsxs","Flex","Head","List","Edit","Actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCO,MAAMA,KAAc,CAAC;AAAA,EAC1B,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACL,OACEC,GAAQ,qBAAqB,GAC7BC,GAAuB,uBAAuBH,CAAU,GAEtD,gBAAAI,EAACC,IAAA,EAAe,GAAGJ,GACjB,UAAA,gBAAAG,EAACE,MAAK,WAAAR,GAAsB,eAAAC,GACzB,UAAAE,EAAM,SAAA,CACT,EAAA,CACF,IAIEK,KAAO,CAAC,EAAE,WAAAR,GAAW,UAAAS,GAAU,eAAAR,QAAsC;AACzE,QAAM,EAAE,mBAAAS,GAAmB,SAAAC,GAAS,OAAAC,GAAO,UAAUC,EAAA,IAAiBC,GAAA,GAEhE,EAAE,MAAMC,EAAA,IAAiBC,EAA8B;AAAA,IAC3D,WAAAhB;AAAA,EAAA,CACD,GAEK,EAAE,kBAAAiB,EAAA,IAAqBC,GAAuBlB,CAAS,GAEvD,CAACmB,GAAMC,CAAO,IAAIC;AAAA,IACtBN,EAAa,cAAc,WAAW,IAAI,qBAAqB;AAAA,EAAA,GAE3D,CAACO,GAAoBC,CAAqB,IAAIF,EAAiC,IAAI,GACnFG,IAA8C;AAAA,IAClD,WAAWvB,GAAe,aAAa;AAAA,IACvC,eAAeA,GAAe,gBAAgB,IAAI,KAAKA,EAAc,aAAa,IAAI;AAAA,IACtF,sBAAsBA,GAAe,uBACjC,IAAI,KAAKA,EAAc,oBAAoB,IAC3C;AAAA,IACJ,MAAMA,GAAe,QAAQ;AAAA,IAC7B,MAAMA,GAAe,QAAQ;AAAA,IAC7B,YAAYA,GAAe,cAAc;AAAA,IACzC,qBAAqB;AAAA,EAAA,GAGjBwB,IAA4BC,EAAA,GAC5BC,IAA4BC,EAAA,GAE5BC,IAAcC,EAAwD;AAAA,IAC1E,UAAUC,EAAYC,CAAiB;AAAA,IACvC,eAAeR;AAAA,EAAA,CAChB,GACK,EAAE,OAAAS,GAAO,UAAAC,GAAU,OAAAC,GAAO,aAAAC,GAAa,UAAAC,MAAaR,GAEpDS,IAAc1B,GAAO;AAC3B,EAAA2B,EAAU,MAAM;AACd,IAAID,KAAeA,EAAY,SAAS,KACtCA,EAAY,QAAQ,CAAAE,MAAc;AAChC,YAAMC,IAAMC,GAAyBF,EAAW,KAAK;AACrD,MAAAH,EAASI,GAAgC,EAAE,SAASD,EAAW,SAAS;AAAA,IAC1E,CAAC;AAAA,EAEL,GAAG,CAACH,GAAUC,CAAW,CAAC;AAE1B,QAAMK,IAAYV,EAAA,GAEZW,IAAyBD,EAAU,iBACrCE,EAAuBF,EAAU,aAAa,KAAK,IAEjDG,IAAgCH,EAAU,wBAC5CE,EAAuBF,EAAU,oBAAoB,KAAK,IAGxD,EAAE,MAAMI,GAAgB,WAAAC,EAAA,IAAcC;AAAA,IAC1C;AAAA,MACE,WAAAjD;AAAA,MACA,WAAW2C,EAAU;AAAA,MACrB,GAAIC,KAA0B,EAAE,eAAe,IAAIM,EAAQN,CAAsB,EAAA;AAAA,MACjF,GAAIE,KAAiC;AAAA,QACnC,sBAAsB,IAAII,EAAQJ,CAA6B;AAAA,MAAA;AAAA,MAEjE,MAAMH,EAAU,QAAQ;AAAA,MACxB,MAAMA,EAAU,QAAQ;AAAA,IAAA;AAAA,IAE1B;AAAA,MACE,SAAS,GACPA,EAAU,iBACVA,EAAU,yBACTxB,MAAS,sBAAsBA,MAAS;AAAA,IAC3C;AAAA,EACF;AAIF,EAAAoB,EAAU,MAAM;AACd,IACEI,EAAU,cAAc,qBACxBA,EAAU,SAAS,MACnBA,EAAU,SAAS,MACnBA,EAAU,wBAAwB,SAElCT,EAAS,uBAAuB,SAAS,IAEzCS,EAAU,cAAc,qBACxBA,EAAU,wBAAwB,UAElCT,EAAS,uBAAuB,QAAQ;AAAA,EAE5C,GAAG,CAACS,EAAU,WAAWA,EAAU,MAAMA,EAAU,MAAMT,GAAUS,EAAU,mBAAmB,CAAC;AAEjG,QAAMQ,IAAY,MAAM;AACtB,IAAA/B,EAAQ,kBAAkB,GAC1Be,EAAM,CAAA,CAAE;AAAA,EACV,GACMiB,IAAe,MAAM;AACzB,IAAAhC,EAAQ,oBAAoB,GAC5Be,EAAM,CAAA,CAAE,GACRC,EAAA,GACAvB,EAAa,IAAI;AAAA,EACnB,GACMwC,IAAa,CAACC,MAA8B;AAChD,IAAAnB,EAAM;AAAA,MACJ,WAAWmB,EAAS;AAAA,MACpB,eAAeA,EAAS,gBACpB,IAAI,KAAKA,EAAS,cAAc,SAAA,CAAU,IAC1C;AAAA,MACJ,sBAAsBA,EAAS,uBAC3B,IAAI,KAAKA,EAAS,qBAAqB,SAAA,CAAU,IACjD;AAAA,MACJ,MAAMA,EAAS,QAAQ;AAAA,MACvB,MAAMA,EAAS,QAAQ;AAAA,MACvB,YAAYA,EAAS,cAAc;AAAA,IAAA,CACpC,GACD/B,EAAsB+B,CAAQ,GAC9BlC,EAAQ,mBAAmB;AAAA,EAC7B,GACMmC,IAAiB,MAAM;AAC3B,IAAA5C,EAAQ6C,EAAgB,iBAAiB;AAAA,EAC3C,GACMC,IAA8C,OAAMC,MAAQ;AAChE,UAAMhD,EAAkBgD,GAAM,OAAMC,MAAW;AAC7C,YAAMC,IAAoB,CAACC,MAClBA,KAAOhB,EAAuBgB,CAAI,KAAK;AAGhD,UAAI1C,MAAS,oBAAoB;AAC/B,cAAM2C,IAA4B,MAAMrC,EAA0B,YAAY;AAAA,UAC5E,SAAS;AAAA,YACP,WAAAzB;AAAA,YACA,0BAA0B;AAAA,cACxB,WAAW2D,EAAQ;AAAA,cACnB,eAAe,IAAIT,EAAQU,EAAkBD,EAAQ,aAAa,CAAC;AAAA,cACnE,sBAAsB,IAAIT,EAAQU,EAAkBD,EAAQ,oBAAoB,CAAC;AAAA,cACjF,YAAYA,EAAQ;AAAA,cACpB,MAAMA,EAAQ;AAAA,cACd,MAAMA,EAAQ;AAAA,YAAA;AAAA,UAChB;AAAA,QACF,CACD;AACD,QAAAhD,EAAQ6C,EAAgB,sBAAsBM,CAAyB,GACvE3B,EAAA;AAAA,MACF,WAAWhB,MAAS,qBAAqB;AACvC,cAAM4C,IAAUzC,GAAoB,SAC9B0C,IAA4B,MAAMrC,EAA0B,YAAY;AAAA,UAC5E,SAAS;AAAA,YACP,eAAeL,GAAoB;AAAA,YACnC,WAAAtB;AAAA,YACA,0BAA0B;AAAA,cACxB,WAAW2D,EAAQ;AAAA,cACnB,eAAe,IAAIT,EAAQU,EAAkBD,EAAQ,aAAa,CAAC;AAAA,cACnE,sBAAsB,IAAIT,EAAQU,EAAkBD,EAAQ,oBAAoB,CAAC;AAAA,cACjF,YAAYA,EAAQ;AAAA,cACpB,MAAMA,EAAQ;AAAA,cACd,MAAMA,EAAQ;AAAA,cACd,SAAAI;AAAA,YAAA;AAAA,UACF;AAAA,QACF,CACD;AACD,QAAApD,EAAQ6C,EAAgB,sBAAsBQ,CAAyB,GACvE7B,EAAA;AAAA,MACF;AACA,MAAAf,EAAQ,oBAAoB;AAAA,IAC9B,CAAC;AAAA,EACH;AAEA,SACE,gBAAAd;AAAA,IAAC2D;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,WAAAjE;AAAA,QACA,WAAAmD;AAAA,QACA,YAAAE;AAAA,QACA,cAAAD;AAAA,QACA,gBAAAG;AAAA,QACA,MAAApC;AAAA,QACA,WAAWM,EAA0B,aAAaE,EAA0B;AAAA,QAC5E,cAAcZ,EAAa;AAAA,QAC3B,kBAAkBgC,GAAgB,oBAAoB;AAAA,QACtD,mBAAmBC;AAAA,QACnB,oBAAA1B;AAAA,QACA,kBAAAL;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAX,EAAC,UAAK,eAAY,0BAChB,4BAAC4D,GAAA,EAAc,GAAGrC,GAChB,UAAA,gBAAAvB,EAAC6D,IAAA,EAAK,UAAUtC,EAAY,aAAa4B,CAAQ,GAC9C,UAAAhD,KAGC,gBAAA2D,EAACC,IAAA,EAAK,eAAc,UAClB,UAAA;AAAA,QAAA,gBAAA/D,EAACgE,IAAA,EAAK;AAAA,0BACLC,IAAA,EAAK;AAAA,0BACLC,IAAA,EAAK;AAAA,0BACLC,IAAA,CAAA,CAAQ;AAAA,MAAA,GACX,EAAA,CAEJ,GACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"PaySchedule.js","sources":["../../../../src/components/Company/PaySchedule/PaySchedule.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { createMachine } from 'robot3'\nimport { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'\nimport type { PayScheduleCreateUpdate } from '@gusto/embedded-api/models/components/payschedulecreateupdate'\nimport { payScheduleStateMachine } from './payScheduleStateMachine'\nimport type { PayScheduleContextInterface } from './PayScheduleComponents'\nimport { PayScheduleFormContextual, PayScheduleListContextual } from './PayScheduleComponents'\nimport type { BaseComponentInterface, CommonComponentInterface } from '@/components/Base'\nimport { BaseComponent, useBase } from '@/components/Base'\nimport { useI18n } from '@/i18n'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { Flow } from '@/components/Flow/Flow'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\ntype PayScheduleDefaultFields = {\n  [K in keyof Pick<\n    PayScheduleCreateUpdate,\n    'anchorPayDate' | 'anchorEndOfPayPeriod' | 'day1' | 'day2' | 'customName' | 'frequency'\n  >]: NonNullable<PayScheduleCreateUpdate[K]>\n}\n\nexport type PayScheduleDefaultValues = RequireAtLeastOne<Partial<PayScheduleDefaultFields>>\n\ninterface PayScheduleProps extends CommonComponentInterface<'Company.PaySchedule'> {\n  companyId: string\n  defaultValues?: PayScheduleDefaultValues\n}\n\nexport const PaySchedule = ({\n  companyId,\n  defaultValues,\n  dictionary,\n  ...props\n}: PayScheduleProps & BaseComponentInterface) => {\n  useI18n('Company.PaySchedule')\n  useComponentDictionary('Company.PaySchedule', dictionary)\n  return (\n    <BaseComponent {...props}>\n      <Root companyId={companyId} defaultValues={defaultValues} />\n    </BaseComponent>\n  )\n}\n\nfunction Root({ companyId, defaultValues }: PayScheduleProps) {\n  const { onEvent } = useBase()\n  const { data: paySchedules } = usePaySchedulesGetAllSuspense({ companyId })\n\n  const hasSchedules = (paySchedules.paySchedules?.length ?? 0) > 0\n  const initialState = hasSchedules ? 'listSchedules' : 'addSchedule'\n  const initialComponent = hasSchedules ? PayScheduleListContextual : PayScheduleFormContextual\n\n  const machine = useMemo(\n    () =>\n      createMachine(\n        initialState,\n        payScheduleStateMachine,\n        (initialContext: PayScheduleContextInterface) => ({\n          ...initialContext,\n          component: initialComponent,\n          companyId,\n          defaultValues,\n        }),\n      ),\n    [companyId, defaultValues, initialState, initialComponent],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n"],"names":["PaySchedule","companyId","defaultValues","dictionary","props","useI18n","useComponentDictionary","jsx","BaseComponent","Root","onEvent","useBase","paySchedules","usePaySchedulesGetAllSuspense","hasSchedules","initialState","initialComponent","PayScheduleListContextual","PayScheduleFormContextual","machine","useMemo","createMachine","payScheduleStateMachine","initialContext","Flow"],"mappings":";;;;;;;;;;AA4BO,MAAMA,IAAc,CAAC;AAAA,EAC1B,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACL,OACEC,EAAQ,qBAAqB,GAC7BC,EAAuB,uBAAuBH,CAAU,GAEtD,gBAAAI,EAACC,KAAe,GAAGJ,GACjB,4BAACK,GAAA,EAAK,WAAAR,GAAsB,eAAAC,GAA8B,EAAA,CAC5D;AAIJ,SAASO,EAAK,EAAE,WAAAR,GAAW,eAAAC,KAAmC;AAC5D,QAAM,EAAE,SAAAQ,EAAA,IAAYC,EAAA,GACd,EAAE,MAAMC,EAAA,IAAiBC,EAA8B,EAAE,WAAAZ,GAAW,GAEpEa,KAAgBF,EAAa,cAAc,UAAU,KAAK,GAC1DG,IAAeD,IAAe,kBAAkB,eAChDE,IAAmBF,IAAeG,IAA4BC,GAE9DC,IAAUC;AAAA,IACd,MACEC;AAAA,MACEN;AAAA,MACAO;AAAA,MACA,CAACC,OAAiD;AAAA,QAChD,GAAGA;AAAA,QACH,WAAWP;AAAA,QACX,WAAAf;AAAA,QACA,eAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACD,GAAWC,GAAea,GAAcC,CAAgB;AAAA,EAAA;AAG3D,SAAO,gBAAAT,EAACiB,GAAA,EAAK,SAAAL,GAAkB,SAAAT,EAAA,CAAkB;AACnD;"}

package/dist/components/Company/PaySchedule/PayScheduleComponents.d.ts

@@ -0,0 +1,10 @@
+import { PayScheduleDefaultValues } from './PaySchedule';
+import { FlowContextInterface } from '../../Flow/useFlow';
+export interface PayScheduleContextInterface extends FlowContextInterface {
+    companyId: string;
+    payScheduleId?: string;
+    defaultValues?: PayScheduleDefaultValues;
+    component: React.ComponentType | null;
+}
+export declare function PayScheduleListContextual(): import("react/jsx-runtime").JSX.Element;
+export declare function PayScheduleFormContextual(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx as t } from "react/jsx-runtime";
+import { PayScheduleList as a } from "./PayScheduleList.js";
+import { PayScheduleForm as c } from "./PayScheduleForm.js";
+import { useFlow as n } from "../../Flow/useFlow.js";
+import { ensureRequired as r } from "../../../helpers/ensureRequired.js";
+function f() {
+  const { companyId: o, onEvent: e } = n();
+  return /* @__PURE__ */ t(a, { onEvent: e, companyId: r(o) });
+}
+function s() {
+  const { companyId: o, payScheduleId: e, defaultValues: m, onEvent: u } = n();
+  return /* @__PURE__ */ t(
+    c,
+    {
+      companyId: r(o),
+      payScheduleId: e,
+      defaultValues: m,
+      onEvent: u
+    }
+  );
+}
+export {
+  s as PayScheduleFormContextual,
+  f as PayScheduleListContextual
+};
+//# sourceMappingURL=PayScheduleComponents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayScheduleComponents.js","sources":["../../../../src/components/Company/PaySchedule/PayScheduleComponents.tsx"],"sourcesContent":["import type { PayScheduleDefaultValues } from './PaySchedule'\nimport { PayScheduleList } from './PayScheduleList'\nimport { PayScheduleForm } from './PayScheduleForm'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport { ensureRequired } from '@/helpers/ensureRequired'\n\nexport interface PayScheduleContextInterface extends FlowContextInterface {\n  companyId: string\n  payScheduleId?: string\n  defaultValues?: PayScheduleDefaultValues\n  component: React.ComponentType | null\n}\n\nexport function PayScheduleListContextual() {\n  const { companyId, onEvent } = useFlow<PayScheduleContextInterface>()\n  return <PayScheduleList onEvent={onEvent} companyId={ensureRequired(companyId)} />\n}\n\nexport function PayScheduleFormContextual() {\n  const { companyId, payScheduleId, defaultValues, onEvent } =\n    useFlow<PayScheduleContextInterface>()\n\n  return (\n    <PayScheduleForm\n      companyId={ensureRequired(companyId)}\n      payScheduleId={payScheduleId}\n      defaultValues={defaultValues}\n      onEvent={onEvent}\n    />\n  )\n}\n"],"names":["PayScheduleListContextual","companyId","onEvent","useFlow","PayScheduleList","ensureRequired","PayScheduleFormContextual","payScheduleId","defaultValues","jsx","PayScheduleForm"],"mappings":";;;;;AAaO,SAASA,IAA4B;AAC1C,QAAM,EAAE,WAAAC,GAAW,SAAAC,EAAA,IAAYC,EAAA;AAC/B,2BAAQC,GAAA,EAAgB,SAAAF,GAAkB,WAAWG,EAAeJ,CAAS,GAAG;AAClF;AAEO,SAASK,IAA4B;AAC1C,QAAM,EAAE,WAAAL,GAAW,eAAAM,GAAe,eAAAC,GAAe,SAAAN,EAAA,IAC/CC,EAAA;AAEF,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWL,EAAeJ,CAAS;AAAA,MACnC,eAAAM;AAAA,MACA,eAAAC;AAAA,MACA,SAAAN;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Company/PaySchedule/PayScheduleForm.d.ts

@@ -0,0 +1,8 @@
+import { UsePayScheduleFormProps } from './shared/usePayScheduleForm';
+import { EventType } from '../../../shared/constants';
+import { OnEventType } from '../../Base/useBase';
+interface PayScheduleFormProps extends UsePayScheduleFormProps {
+    onEvent: OnEventType<EventType, unknown>;
+}
+export declare function PayScheduleForm({ onEvent, ...hookProps }: PayScheduleFormProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,199 @@
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { useState as w } from "react";
+import { useTranslation as C } from "react-i18next";
+import { usePayScheduleForm as q } from "./shared/usePayScheduleForm/usePayScheduleForm.js";
+import l from "./PayScheduleForm.module.scss.js";
+import { BaseBoundaries as F, BaseLayout as h } from "../../Base/Base.js";
+import "../../Base/useBase.js";
+import { SDKFormProvider as E } from "../../../partner-hook-utils/form/SDKFormProvider.js";
+import { Form as M } from "../../Common/Form/Form.js";
+import { Flex as m } from "../../Common/Flex/Flex.js";
+import { Grid as x } from "../../Common/Grid/Grid.js";
+import "classnames";
+import { ActionsLayout as N } from "../../Common/ActionsLayout/ActionsLayout.js";
+import { useComponentContext as R } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useDateFormatter as T } from "../../../hooks/useDateFormatter.js";
+import { componentEvents as p } from "../../../shared/constants.js";
+import { TextInputField as O } from "../../Common/Fields/TextInputField/TextInputField.js";
+import { SelectField as A } from "../../Common/Fields/SelectField/SelectField.js";
+import { RadioGroupField as L } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
+import { NumberInputField as f } from "../../Common/Fields/NumberInputField/NumberInputField.js";
+import { DatePickerField as P } from "../../Common/Fields/DatePickerField/DatePickerField.js";
+function ie({ onEvent: d, ...u }) {
+  return /* @__PURE__ */ r(F, { componentName: "Company.PayScheduleForm", children: /* @__PURE__ */ r(k, { onEvent: d, ...u }) });
+}
+function k({ onEvent: d, ...u }) {
+  const { t: e } = C("Company.PaySchedule"), i = R(), v = T(), a = q(u), [o, D] = w(0);
+  if (a.isLoading)
+    return /* @__PURE__ */ r(h, { isLoading: !0, error: a.errorHandling.errors });
+  const g = async () => {
+    const t = await a.actions.onSubmit();
+    t && d(
+      t.mode === "create" ? p.PAY_SCHEDULE_CREATED : p.PAY_SCHEDULE_UPDATED,
+      { paySchedule: t.data }
+    );
+  }, { Fields: y } = a.form, { paymentSpeedDays: b, payPreviewLoading: S } = a.data, n = a.data.payPeriodPreview ?? void 0;
+  return /* @__PURE__ */ r(h, { error: a.errorHandling.errors, children: /* @__PURE__ */ r(E, { formHookResult: a, children: /* @__PURE__ */ r(M, { onSubmit: () => void g(), children: /* @__PURE__ */ s(m, { flexDirection: "column", children: [
+    /* @__PURE__ */ r(m, { justifyContent: "space-between", flexDirection: "column", gap: 4, children: /* @__PURE__ */ r("header", { children: /* @__PURE__ */ r(i.Heading, { as: "h2", children: a.status.mode === "create" ? e("headings.addPaySchedule") : e("headings.editPaySchedule") }) }) }),
+    /* @__PURE__ */ r("div", { className: l.payScheduleContainer, children: /* @__PURE__ */ s(x, { gap: 32, gridTemplateColumns: { base: "1fr", small: "1fr 1fr" }, children: [
+      /* @__PURE__ */ r("div", { className: l.payScheduleForm, children: /* @__PURE__ */ s(m, { flexDirection: "column", children: [
+        /* @__PURE__ */ r(
+          O,
+          {
+            name: "customName",
+            label: e("labels.name"),
+            isRequired: !0,
+            errorMessage: e("validations.name")
+          }
+        ),
+        /* @__PURE__ */ r(
+          A,
+          {
+            name: "frequency",
+            label: e("labels.frequency"),
+            options: [
+              { value: "Every week", label: e("frequencies.everyWeek") },
+              { value: "Every other week", label: e("frequencies.everyOtherWeek") },
+              { value: "Twice per month", label: e("frequencies.twicePerMonth") },
+              { value: "Monthly", label: e("frequencies.monthly") }
+            ],
+            isRequired: !0,
+            errorMessage: e("validations.frequency")
+          }
+        ),
+        y.CustomTwicePerMonth !== void 0 && /* @__PURE__ */ r(
+          L,
+          {
+            name: "customTwicePerMonth",
+            label: e("labels.frequencyOptions"),
+            description: e("descriptions.frequencyOptionsDescription"),
+            options: [
+              { value: "1st15th", label: e("frequencyOptions.15thAndLast") },
+              { value: "custom", label: e("frequencyOptions.custom") }
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          P,
+          {
+            name: "anchorPayDate",
+            label: e("labels.firstPayDate"),
+            description: e("descriptions.anchorPayDateDescription", {
+              count: b
+            }),
+            isRequired: !0,
+            errorMessage: e("validations.firstPayDate"),
+            minDate: /* @__PURE__ */ new Date()
+          }
+        ),
+        /* @__PURE__ */ r(
+          P,
+          {
+            name: "anchorEndOfPayPeriod",
+            label: e("labels.firstPayPeriodEndDate"),
+            description: e("descriptions.anchorEndOfPayPeriodDescription"),
+            isRequired: !0,
+            errorMessage: e("validations.firstPayPeriodEndDate")
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: y.Day1 !== void 0 ? "" : l.visuallyHidden, children: /* @__PURE__ */ r(
+          f,
+          {
+            name: "day1",
+            label: e("labels.firstPayDayOfTheMonth"),
+            isRequired: !0,
+            errorMessage: e("validations.firstPayDayOfTheMonth")
+          }
+        ) }),
+        /* @__PURE__ */ r("div", { className: y.Day2 !== void 0 ? "" : l.visuallyHidden, children: /* @__PURE__ */ r(
+          f,
+          {
+            name: "day2",
+            label: e("labels.lastPayDayOfTheMonth"),
+            isRequired: !0,
+            errorMessage: e("validations.lastPayDayOfTheMonth")
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ r(m, { flexDirection: "column", gap: 4, justifyContent: "center", alignItems: "center", children: n && n[o] ? /* @__PURE__ */ s("div", { className: l.calendarContainer, children: [
+        !S && /* @__PURE__ */ r(
+          i.Select,
+          {
+            label: e("labels.preview"),
+            isRequired: !0,
+            options: n.map((t, c) => ({
+              value: String(c),
+              label: v.formatPayPeriodRange(
+                t.startDate.toString(),
+                t.endDate.toString()
+              )
+            })),
+            value: String(o),
+            onChange: (t) => {
+              const c = Number(t);
+              isNaN(c) || D(c);
+            }
+          }
+        ),
+        /* @__PURE__ */ r(
+          i.CalendarPreview,
+          {
+            dateRange: {
+              start: new Date(
+                n[o].startDate.toString()
+              ),
+              end: new Date(
+                n[o].endDate.toString()
+              ),
+              label: e("payPreview.payPeriod") || "Pay Period"
+            },
+            highlightDates: [
+              {
+                date: new Date(
+                  n[o].checkDate.toString()
+                ),
+                highlightColor: "primary",
+                label: e("payPreview.payday") || "Payday"
+              },
+              {
+                date: new Date(
+                  n[o].runPayrollBy.toString()
+                ),
+                highlightColor: "secondary",
+                label: e("payPreview.payrollDeadline") || "Payroll Deadline"
+              }
+            ]
+          },
+          o
+        )
+      ] }) : /* @__PURE__ */ r("div", { className: l.calendarContainer, children: /* @__PURE__ */ r(
+        i.Alert,
+        {
+          status: "info",
+          label: e("previewAlert.title", "Pay Schedule Preview"),
+          children: /* @__PURE__ */ r(i.Text, { children: e(
+            "previewAlert.description",
+            "Complete all the required fields on the left to see a preview of your pay schedule."
+          ) })
+        }
+      ) }) })
+    ] }) }),
+    /* @__PURE__ */ s(N, { children: [
+      /* @__PURE__ */ r(
+        i.Button,
+        {
+          variant: "secondary",
+          onClick: () => {
+            d(p.CANCEL);
+          },
+          children: e("actions.cancel")
+        }
+      ),
+      /* @__PURE__ */ r(i.Button, { type: "submit", isLoading: a.status.isPending, children: e("actions.save") })
+    ] })
+  ] }) }) }) });
+}
+export {
+  ie as PayScheduleForm
+};
+//# sourceMappingURL=PayScheduleForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayScheduleForm.js","sources":["../../../../src/components/Company/PaySchedule/PayScheduleForm.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { usePayScheduleForm } from './shared/usePayScheduleForm'\nimport type { UsePayScheduleFormProps } from './shared/usePayScheduleForm'\nimport style from './PayScheduleForm.module.scss'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { Form } from '@/components/Common/Form'\nimport {\n  Flex,\n  Grid,\n  TextInputField,\n  SelectField,\n  RadioGroupField,\n  DatePickerField,\n  NumberInputField,\n  ActionsLayout,\n} from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\ninterface PayScheduleFormProps extends UsePayScheduleFormProps {\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport function PayScheduleForm({ onEvent, ...hookProps }: PayScheduleFormProps) {\n  return (\n    <BaseBoundaries componentName=\"Company.PayScheduleForm\">\n      <PayScheduleFormRoot onEvent={onEvent} {...hookProps} />\n    </BaseBoundaries>\n  )\n}\n\nfunction PayScheduleFormRoot({ onEvent, ...hookProps }: PayScheduleFormProps) {\n  const { t } = useTranslation('Company.PaySchedule')\n  const Components = useComponentContext()\n  const dateFormatter = useDateFormatter()\n  const paySchedule = usePayScheduleForm(hookProps)\n  const [selectedPayPeriodIndex, setSelectedPayPeriodIndex] = useState(0)\n\n  if (paySchedule.isLoading) {\n    return <BaseLayout isLoading error={paySchedule.errorHandling.errors} />\n  }\n\n  const handleSubmit = async () => {\n    const result = await paySchedule.actions.onSubmit()\n    if (result) {\n      onEvent(\n        result.mode === 'create'\n          ? componentEvents.PAY_SCHEDULE_CREATED\n          : componentEvents.PAY_SCHEDULE_UPDATED,\n        { paySchedule: result.data },\n      )\n    }\n  }\n\n  const { Fields } = paySchedule.form\n  const { paymentSpeedDays, payPreviewLoading } = paySchedule.data\n  const payPeriodPreview = paySchedule.data.payPeriodPreview ?? undefined\n\n  return (\n    <BaseLayout error={paySchedule.errorHandling.errors}>\n      <SDKFormProvider formHookResult={paySchedule}>\n        <Form onSubmit={() => void handleSubmit()}>\n          <Flex flexDirection=\"column\">\n            <Flex justifyContent=\"space-between\" flexDirection=\"column\" gap={4}>\n              <header>\n                <Components.Heading as=\"h2\">\n                  {paySchedule.status.mode === 'create'\n                    ? t('headings.addPaySchedule')\n                    : t('headings.editPaySchedule')}\n                </Components.Heading>\n              </header>\n            </Flex>\n            <div className={style.payScheduleContainer}>\n              <Grid gap={32} gridTemplateColumns={{ base: '1fr', small: '1fr 1fr' }}>\n                <div className={style.payScheduleForm}>\n                  <Flex flexDirection=\"column\">\n                    <TextInputField\n                      name=\"customName\"\n                      label={t('labels.name')}\n                      isRequired\n                      errorMessage={t('validations.name')}\n                    />\n                    <SelectField\n                      name=\"frequency\"\n                      label={t('labels.frequency')}\n                      options={[\n                        { value: 'Every week', label: t('frequencies.everyWeek') },\n                        { value: 'Every other week', label: t('frequencies.everyOtherWeek') },\n                        { value: 'Twice per month', label: t('frequencies.twicePerMonth') },\n                        { value: 'Monthly', label: t('frequencies.monthly') },\n                      ]}\n                      isRequired\n                      errorMessage={t('validations.frequency')}\n                    />\n                    {Fields.CustomTwicePerMonth !== undefined && (\n                      <RadioGroupField\n                        name=\"customTwicePerMonth\"\n                        label={t('labels.frequencyOptions')}\n                        description={t('descriptions.frequencyOptionsDescription')}\n                        options={[\n                          { value: '1st15th', label: t('frequencyOptions.15thAndLast') },\n                          { value: 'custom', label: t('frequencyOptions.custom') },\n                        ]}\n                      />\n                    )}\n                    <DatePickerField\n                      name=\"anchorPayDate\"\n                      label={t('labels.firstPayDate')}\n                      description={t('descriptions.anchorPayDateDescription', {\n                        count: paymentSpeedDays,\n                      })}\n                      isRequired\n                      errorMessage={t('validations.firstPayDate')}\n                      minDate={new Date()}\n                    />\n                    <DatePickerField\n                      name=\"anchorEndOfPayPeriod\"\n                      label={t('labels.firstPayPeriodEndDate')}\n                      description={t('descriptions.anchorEndOfPayPeriodDescription')}\n                      isRequired\n                      errorMessage={t('validations.firstPayPeriodEndDate')}\n                    />\n                    <div className={Fields.Day1 !== undefined ? '' : style.visuallyHidden}>\n                      <NumberInputField\n                        name=\"day1\"\n                        label={t('labels.firstPayDayOfTheMonth')}\n                        isRequired\n                        errorMessage={t('validations.firstPayDayOfTheMonth')}\n                      />\n                    </div>\n                    <div className={Fields.Day2 !== undefined ? '' : style.visuallyHidden}>\n                      <NumberInputField\n                        name=\"day2\"\n                        label={t('labels.lastPayDayOfTheMonth')}\n                        isRequired\n                        errorMessage={t('validations.lastPayDayOfTheMonth')}\n                      />\n                    </div>\n                  </Flex>\n                </div>\n                <Flex flexDirection=\"column\" gap={4} justifyContent=\"center\" alignItems=\"center\">\n                  {payPeriodPreview && payPeriodPreview[selectedPayPeriodIndex] ? (\n                    <div className={style.calendarContainer}>\n                      {!payPreviewLoading && (\n                        <Components.Select\n                          label={t('labels.preview')}\n                          isRequired\n                          options={payPeriodPreview.map((period, index) => ({\n                            value: String(index),\n                            label: dateFormatter.formatPayPeriodRange(\n                              period.startDate.toString(),\n                              period.endDate.toString(),\n                            ),\n                          }))}\n                          value={String(selectedPayPeriodIndex)}\n                          onChange={(value: string) => {\n                            const numericValue = Number(value)\n                            if (!isNaN(numericValue)) {\n                              setSelectedPayPeriodIndex(numericValue)\n                            }\n                          }}\n                        />\n                      )}\n                      <Components.CalendarPreview\n                        key={selectedPayPeriodIndex}\n                        dateRange={{\n                          start: new Date(\n                            payPeriodPreview[selectedPayPeriodIndex].startDate.toString(),\n                          ),\n                          end: new Date(\n                            payPeriodPreview[selectedPayPeriodIndex].endDate.toString(),\n                          ),\n                          label: t('payPreview.payPeriod') || 'Pay Period',\n                        }}\n                        highlightDates={[\n                          {\n                            date: new Date(\n                              payPeriodPreview[selectedPayPeriodIndex].checkDate.toString(),\n                            ),\n                            highlightColor: 'primary',\n                            label: t('payPreview.payday') || 'Payday',\n                          },\n                          {\n                            date: new Date(\n                              payPeriodPreview[selectedPayPeriodIndex].runPayrollBy.toString(),\n                            ),\n                            highlightColor: 'secondary',\n                            label: t('payPreview.payrollDeadline') || 'Payroll Deadline',\n                          },\n                        ]}\n                      />\n                    </div>\n                  ) : (\n                    <div className={style.calendarContainer}>\n                      <Components.Alert\n                        status=\"info\"\n                        label={t('previewAlert.title', 'Pay Schedule Preview')}\n                      >\n                        <Components.Text>\n                          {t(\n                            'previewAlert.description',\n                            'Complete all the required fields on the left to see a preview of your pay schedule.',\n                          )}\n                        </Components.Text>\n                      </Components.Alert>\n                    </div>\n                  )}\n                </Flex>\n              </Grid>\n            </div>\n            <ActionsLayout>\n              <Components.Button\n                variant=\"secondary\"\n                onClick={() => {\n                  onEvent(componentEvents.CANCEL)\n                }}\n              >\n                {t('actions.cancel')}\n              </Components.Button>\n              <Components.Button type=\"submit\" isLoading={paySchedule.status.isPending}>\n                {t('actions.save')}\n              </Components.Button>\n            </ActionsLayout>\n          </Flex>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n"],"names":["PayScheduleForm","onEvent","hookProps","jsx","BaseBoundaries","PayScheduleFormRoot","t","useTranslation","Components","useComponentContext","dateFormatter","useDateFormatter","paySchedule","usePayScheduleForm","selectedPayPeriodIndex","setSelectedPayPeriodIndex","useState","BaseLayout","handleSubmit","result","componentEvents","Fields","paymentSpeedDays","payPreviewLoading","payPeriodPreview","SDKFormProvider","Form","jsxs","Flex","style","Grid","TextInputField","SelectField","RadioGroupField","DatePickerField","NumberInputField","period","index","value","numericValue","ActionsLayout"],"mappings":"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"}

package/dist/components/Company/PaySchedule/{_parts/Edit.module.scss.js → PayScheduleForm.module.scss.js}

@@ -11,4 +11,4 @@ export {
   e as payScheduleForm,
   n as visuallyHidden
 };
-//# sourceMappingURL=Edit.module.scss.js.map
+//# sourceMappingURL=PayScheduleForm.module.scss.js.map

package/dist/components/Company/PaySchedule/PayScheduleForm.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayScheduleForm.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/Company/PaySchedule/PayScheduleList.d.ts

@@ -0,0 +1,8 @@
+import { EventType } from '../../../shared/constants';
+import { OnEventType } from '../../Base/useBase';
+interface PayScheduleListProps {
+    companyId: string;
+    onEvent: OnEventType<EventType, unknown>;
+}
+export declare function PayScheduleList({ companyId, onEvent }: PayScheduleListProps): import("react/jsx-runtime").JSX.Element;
+export {};