@gusto/embedded-react-sdk 0.40.0 → 0.42.0

package/dist/components/Company/OnboardingFlow/onboardingStateMachine.js

@@ -1,82 +1,84 @@
-import { state as e, transition as t, reduce as o } from "robot3";
-import { OnboardingOverviewContextual as u, DocumentSignerContextual as p, StateTaxesContextual as s, PayScheduleContextual as O, EmployeesContextual as E, BankAccountContextual as l, IndustryContextual as N, FederalTaxesContextual as C, LocationsContextual as _ } from "./OnboardingFlowComponents.js";
-import { componentEvents as n } from "../../../shared/constants.js";
-const r = (a) => (c) => ({
-  ...c,
-  ...a
-}), S = {
+import { state as e, transition as t, reduce as n } from "robot3";
+import { OnboardingOverviewContextual as O, DocumentSignerContextual as E, StateTaxesContextual as d, PayScheduleContextual as l, EmployeesContextual as u, BankAccountContextual as N, IndustryContextual as _, FederalTaxesContextual as p, LocationsContextual as C } from "./OnboardingFlowComponents.js";
+import { componentEvents as o } from "../../../shared/constants.js";
+const m = 8, r = (c) => ({
+  type: "progress",
+  currentStep: c,
+  totalSteps: m
+}), a = (c) => (s) => ({
+  ...s,
+  ...c
+}), x = {
   overview: e(
     t(
-      n.COMPANY_OVERVIEW_CONTINUE,
+      o.COMPANY_OVERVIEW_CONTINUE,
       "locations",
-      o(
-        r({
-          component: _,
-          currentStep: 1,
-          progressBarType: "progress"
+      n(
+        a({
+          component: C,
+          header: r(1)
         })
       )
     ),
-    t(n.COMPANY_OVERVIEW_DONE, "final")
+    t(o.COMPANY_OVERVIEW_DONE, "final")
   ),
   locations: e(
     t(
-      n.COMPANY_LOCATION_DONE,
+      o.COMPANY_LOCATION_DONE,
       "federalTaxes",
-      o(r({ component: C, currentStep: 2 }))
+      n(a({ component: p, header: r(2) }))
     )
   ),
   federalTaxes: e(
     t(
-      n.COMPANY_FEDERAL_TAXES_DONE,
+      o.COMPANY_FEDERAL_TAXES_DONE,
       "industry",
-      o(r({ component: N, currentStep: 3 }))
+      n(a({ component: _, header: r(3) }))
     )
   ),
   industry: e(
     t(
-      n.COMPANY_INDUSTRY_SELECTED,
+      o.COMPANY_INDUSTRY_SELECTED,
       "bankAccount",
-      o(r({ component: l, currentStep: 4 }))
+      n(a({ component: N, header: r(4) }))
     )
   ),
   bankAccount: e(
     t(
-      n.COMPANY_BANK_ACCOUNT_DONE,
+      o.COMPANY_BANK_ACCOUNT_DONE,
       "employees",
-      o(r({ component: E, currentStep: 5 }))
+      n(a({ component: u, header: r(5) }))
     )
   ),
   employees: e(
     t(
-      n.EMPLOYEE_ONBOARDING_DONE,
+      o.EMPLOYEE_ONBOARDING_DONE,
       "payschedule",
-      o(r({ component: O, currentStep: 6 }))
+      n(a({ component: l, header: r(6) }))
     )
   ),
   payschedule: e(
     t(
-      n.PAY_SCHEDULE_DONE,
+      o.PAY_SCHEDULE_DONE,
       "stateTaxes",
-      o(r({ component: s, currentStep: 7 }))
+      n(a({ component: d, header: r(7) }))
     )
   ),
   stateTaxes: e(
     t(
-      n.COMPANY_STATE_TAX_DONE,
+      o.COMPANY_STATE_TAX_DONE,
       "documents",
-      o(r({ component: p, currentStep: 8 }))
+      n(a({ component: E, header: r(8) }))
     )
   ),
   documents: e(
     t(
-      n.COMPANY_FORMS_DONE,
+      o.COMPANY_FORMS_DONE,
       "overview",
-      o(
-        r({
-          component: u,
-          currentStep: 1,
-          progressBarType: null
+      n(
+        a({
+          component: O,
+          header: null
         })
       )
     )
@@ -84,6 +86,6 @@ const r = (a) => (c) => ({
   final: e()
 };
 export {
-  S as onboardingMachine
+  x as onboardingMachine
 };
 //# sourceMappingURL=onboardingStateMachine.js.map

package/dist/components/Company/OnboardingFlow/onboardingStateMachine.js.map

@@ -1 +1 @@
-{"version":3,"file":"onboardingStateMachine.js","sources":["../../../../src/components/Company/OnboardingFlow/onboardingStateMachine.ts"],"sourcesContent":["import { transition, reduce, state } from 'robot3'\nimport {\n  BankAccountContextual,\n  DocumentSignerContextual,\n  EmployeesContextual,\n  FederalTaxesContextual,\n  IndustryContextual,\n  LocationsContextual,\n  OnboardingOverviewContextual,\n  PayScheduleContextual,\n  StateTaxesContextual,\n  type OnboardingFlowContextInterface,\n} from './OnboardingFlowComponents'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineTransition } from '@/types/Helpers'\n\nconst createReducer = (props: Partial<OnboardingFlowContextInterface>) => {\n  return (ctx: OnboardingFlowContextInterface): OnboardingFlowContextInterface => ({\n    ...ctx,\n    ...props,\n  })\n}\nexport const onboardingMachine = {\n  overview: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_OVERVIEW_CONTINUE,\n      'locations',\n      reduce(\n        createReducer({\n          component: LocationsContextual,\n          currentStep: 1,\n          progressBarType: 'progress',\n        }),\n      ),\n    ),\n    transition(componentEvents.COMPANY_OVERVIEW_DONE, 'final'),\n  ),\n  locations: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_LOCATION_DONE,\n      'federalTaxes',\n      reduce(createReducer({ component: FederalTaxesContextual, currentStep: 2 })),\n    ),\n  ),\n  federalTaxes: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_FEDERAL_TAXES_DONE,\n      'industry',\n      reduce(createReducer({ component: IndustryContextual, currentStep: 3 })),\n    ),\n  ),\n  industry: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_INDUSTRY_SELECTED,\n      'bankAccount',\n      reduce(createReducer({ component: BankAccountContextual, currentStep: 4 })),\n    ),\n  ),\n  bankAccount: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_BANK_ACCOUNT_DONE,\n      'employees',\n      reduce(createReducer({ component: EmployeesContextual, currentStep: 5 })),\n    ),\n  ),\n  employees: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_ONBOARDING_DONE,\n      'payschedule',\n      reduce(createReducer({ component: PayScheduleContextual, currentStep: 6 })),\n    ),\n  ),\n  payschedule: state<MachineTransition>(\n    transition(\n      componentEvents.PAY_SCHEDULE_DONE,\n      'stateTaxes',\n      reduce(createReducer({ component: StateTaxesContextual, currentStep: 7 })),\n    ),\n  ),\n  stateTaxes: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_STATE_TAX_DONE,\n      'documents',\n      reduce(createReducer({ component: DocumentSignerContextual, currentStep: 8 })),\n    ),\n  ),\n  documents: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_FORMS_DONE,\n      'overview',\n      reduce(\n        createReducer({\n          component: OnboardingOverviewContextual,\n          currentStep: 1,\n          progressBarType: null,\n        }),\n      ),\n    ),\n  ),\n\n  final: state<MachineTransition>(),\n}\n"],"names":["createReducer","props","ctx","onboardingMachine","state","transition","componentEvents","reduce","LocationsContextual","FederalTaxesContextual","IndustryContextual","BankAccountContextual","EmployeesContextual","PayScheduleContextual","StateTaxesContextual","DocumentSignerContextual","OnboardingOverviewContextual"],"mappings":";;;AAgBA,MAAMA,IAAgB,CAACC,MACd,CAACC,OAAyE;AAAA,EAC/E,GAAGA;AAAA,EACH,GAAGD;AAAA,IAGME,IAAoB;AAAA,EAC/B,UAAUC;AAAA,IACRC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACEP,EAAc;AAAA,UACZ,WAAWQ;AAAA,UACX,aAAa;AAAA,UACb,iBAAiB;AAAA,QAAA,CAClB;AAAA,MAAA;AAAA,IACH;AAAA,IAEFH,EAAWC,EAAgB,uBAAuB,OAAO;AAAA,EAAA;AAAA,EAE3D,WAAWF;AAAA,IACTC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWS,GAAwB,aAAa,GAAG,CAAC;AAAA,IAAA;AAAA,EAC7E;AAAA,EAEF,cAAcL;AAAA,IACZC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWU,GAAoB,aAAa,GAAG,CAAC;AAAA,IAAA;AAAA,EACzE;AAAA,EAEF,UAAUN;AAAA,IACRC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWW,GAAuB,aAAa,GAAG,CAAC;AAAA,IAAA;AAAA,EAC5E;AAAA,EAEF,aAAaP;AAAA,IACXC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWY,GAAqB,aAAa,GAAG,CAAC;AAAA,IAAA;AAAA,EAC1E;AAAA,EAEF,WAAWR;AAAA,IACTC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWa,GAAuB,aAAa,GAAG,CAAC;AAAA,IAAA;AAAA,EAC5E;AAAA,EAEF,aAAaT;AAAA,IACXC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWc,GAAsB,aAAa,GAAG,CAAC;AAAA,IAAA;AAAA,EAC3E;AAAA,EAEF,YAAYV;AAAA,IACVC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWe,GAA0B,aAAa,GAAG,CAAC;AAAA,IAAA;AAAA,EAC/E;AAAA,EAEF,WAAWX;AAAA,IACTC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACEP,EAAc;AAAA,UACZ,WAAWgB;AAAA,UACX,aAAa;AAAA,UACb,iBAAiB;AAAA,QAAA,CAClB;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAAA,EAGF,OAAOZ,EAAA;AACT;"}
+{"version":3,"file":"onboardingStateMachine.js","sources":["../../../../src/components/Company/OnboardingFlow/onboardingStateMachine.ts"],"sourcesContent":["import { transition, reduce, state } from 'robot3'\nimport {\n  BankAccountContextual,\n  DocumentSignerContextual,\n  EmployeesContextual,\n  FederalTaxesContextual,\n  IndustryContextual,\n  LocationsContextual,\n  OnboardingOverviewContextual,\n  PayScheduleContextual,\n  StateTaxesContextual,\n  type OnboardingFlowContextInterface,\n} from './OnboardingFlowComponents'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineTransition } from '@/types/Helpers'\nimport type { FlowHeaderConfig } from '@/components/Flow/useFlow'\n\nconst TOTAL_STEPS = 8\n\nconst progressHeader = (currentStep: number): FlowHeaderConfig => ({\n  type: 'progress',\n  currentStep,\n  totalSteps: TOTAL_STEPS,\n})\n\nconst createReducer = (props: Partial<OnboardingFlowContextInterface>) => {\n  return (ctx: OnboardingFlowContextInterface): OnboardingFlowContextInterface => ({\n    ...ctx,\n    ...props,\n  })\n}\n\nexport const onboardingMachine = {\n  overview: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_OVERVIEW_CONTINUE,\n      'locations',\n      reduce(\n        createReducer({\n          component: LocationsContextual,\n          header: progressHeader(1),\n        }),\n      ),\n    ),\n    transition(componentEvents.COMPANY_OVERVIEW_DONE, 'final'),\n  ),\n  locations: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_LOCATION_DONE,\n      'federalTaxes',\n      reduce(createReducer({ component: FederalTaxesContextual, header: progressHeader(2) })),\n    ),\n  ),\n  federalTaxes: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_FEDERAL_TAXES_DONE,\n      'industry',\n      reduce(createReducer({ component: IndustryContextual, header: progressHeader(3) })),\n    ),\n  ),\n  industry: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_INDUSTRY_SELECTED,\n      'bankAccount',\n      reduce(createReducer({ component: BankAccountContextual, header: progressHeader(4) })),\n    ),\n  ),\n  bankAccount: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_BANK_ACCOUNT_DONE,\n      'employees',\n      reduce(createReducer({ component: EmployeesContextual, header: progressHeader(5) })),\n    ),\n  ),\n  employees: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_ONBOARDING_DONE,\n      'payschedule',\n      reduce(createReducer({ component: PayScheduleContextual, header: progressHeader(6) })),\n    ),\n  ),\n  payschedule: state<MachineTransition>(\n    transition(\n      componentEvents.PAY_SCHEDULE_DONE,\n      'stateTaxes',\n      reduce(createReducer({ component: StateTaxesContextual, header: progressHeader(7) })),\n    ),\n  ),\n  stateTaxes: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_STATE_TAX_DONE,\n      'documents',\n      reduce(createReducer({ component: DocumentSignerContextual, header: progressHeader(8) })),\n    ),\n  ),\n  documents: state<MachineTransition>(\n    transition(\n      componentEvents.COMPANY_FORMS_DONE,\n      'overview',\n      reduce(\n        createReducer({\n          component: OnboardingOverviewContextual,\n          header: null,\n        }),\n      ),\n    ),\n  ),\n\n  final: state<MachineTransition>(),\n}\n"],"names":["TOTAL_STEPS","progressHeader","currentStep","createReducer","props","ctx","onboardingMachine","state","transition","componentEvents","reduce","LocationsContextual","FederalTaxesContextual","IndustryContextual","BankAccountContextual","EmployeesContextual","PayScheduleContextual","StateTaxesContextual","DocumentSignerContextual","OnboardingOverviewContextual"],"mappings":";;;AAiBA,MAAMA,IAAc,GAEdC,IAAiB,CAACC,OAA2C;AAAA,EACjE,MAAM;AAAA,EACN,aAAAA;AAAA,EACA,YAAYF;AACd,IAEMG,IAAgB,CAACC,MACd,CAACC,OAAyE;AAAA,EAC/E,GAAGA;AAAA,EACH,GAAGD;AAAA,IAIME,IAAoB;AAAA,EAC/B,UAAUC;AAAA,IACRC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACEP,EAAc;AAAA,UACZ,WAAWQ;AAAA,UACX,QAAQV,EAAe,CAAC;AAAA,QAAA,CACzB;AAAA,MAAA;AAAA,IACH;AAAA,IAEFO,EAAWC,EAAgB,uBAAuB,OAAO;AAAA,EAAA;AAAA,EAE3D,WAAWF;AAAA,IACTC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWS,GAAwB,QAAQX,EAAe,CAAC,GAAG,CAAC;AAAA,IAAA;AAAA,EACxF;AAAA,EAEF,cAAcM;AAAA,IACZC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWU,GAAoB,QAAQZ,EAAe,CAAC,GAAG,CAAC;AAAA,IAAA;AAAA,EACpF;AAAA,EAEF,UAAUM;AAAA,IACRC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWW,GAAuB,QAAQb,EAAe,CAAC,GAAG,CAAC;AAAA,IAAA;AAAA,EACvF;AAAA,EAEF,aAAaM;AAAA,IACXC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWY,GAAqB,QAAQd,EAAe,CAAC,GAAG,CAAC;AAAA,IAAA;AAAA,EACrF;AAAA,EAEF,WAAWM;AAAA,IACTC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWa,GAAuB,QAAQf,EAAe,CAAC,GAAG,CAAC;AAAA,IAAA;AAAA,EACvF;AAAA,EAEF,aAAaM;AAAA,IACXC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWc,GAAsB,QAAQhB,EAAe,CAAC,GAAG,CAAC;AAAA,IAAA;AAAA,EACtF;AAAA,EAEF,YAAYM;AAAA,IACVC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOP,EAAc,EAAE,WAAWe,GAA0B,QAAQjB,EAAe,CAAC,GAAG,CAAC;AAAA,IAAA;AAAA,EAC1F;AAAA,EAEF,WAAWM;AAAA,IACTC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACEP,EAAc;AAAA,UACZ,WAAWgB;AAAA,UACX,QAAQ;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAAA,EAGF,OAAOZ,EAAA;AACT;"}

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

@@ -1,5 +1,10 @@
-import { PayScheduleDefaultValues } from './usePaySchedule';
+import { PayScheduleCreateUpdate } from '@gusto/embedded-api/models/components/payschedulecreateupdate';
 import { BaseComponentInterface, CommonComponentInterface } from '../../Base';
+import { RequireAtLeastOne } from '../../../types/Helpers';
+type PayScheduleDefaultFields = {
+    [K in keyof Pick<PayScheduleCreateUpdate, 'anchorPayDate' | 'anchorEndOfPayPeriod' | 'day1' | 'day2' | 'customName' | 'frequency'>]: NonNullable<PayScheduleCreateUpdate[K]>;
+};
+export type PayScheduleDefaultValues = RequireAtLeastOne<Partial<PayScheduleDefaultFields>>;
 interface PayScheduleProps extends CommonComponentInterface<'Company.PaySchedule'> {
     companyId: string;
     defaultValues?: PayScheduleDefaultValues;

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