@gusto/embedded-react-sdk 0.57.1 → 0.57.2

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

@@ -1,49 +1,55 @@
-import { jsx as a, jsxs as c } from "react/jsx-runtime";
-import { useState as R } from "react";
-import { useTranslation as C } from "react-i18next";
-import { usePayScheduleForm as O } from "./shared/usePayScheduleForm/usePayScheduleForm.js";
-import m from "./PayScheduleForm.module.scss.js";
-import { BaseBoundaries as M, BaseLayout as f } from "../../Base/Base.js";
+import { jsx as a, jsxs as y } from "react/jsx-runtime";
+import { useState as O } from "react";
+import { useTranslation as M } from "react-i18next";
+import { usePayScheduleForm as q } from "./shared/usePayScheduleForm/usePayScheduleForm.js";
+import u from "./PayScheduleForm.module.scss.js";
+import { BaseBoundaries as A, BaseLayout as P } from "../../Base/Base.js";
 import "../../Base/useBase.js";
-import { SDKFormProvider as q } from "../../../partner-hook-utils/form/SDKFormProvider.js";
-import { Form as A } from "../../Common/Form/Form.js";
-import { Flex as u } from "../../Common/Flex/Flex.js";
-import { Grid as L } from "../../Common/Grid/Grid.js";
-import { ActionsLayout as T } from "../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as F } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useDateFormatter as x } from "../../../hooks/useDateFormatter.js";
-import { componentEvents as D } from "../../../shared/constants.js";
-import { normalizeToDate as N } from "../../../helpers/dateFormatting.js";
-const p = (l) => N(l.toString());
-function ee({ onEvent: l, LoaderComponent: d, ...h }) {
-  return /* @__PURE__ */ a(M, { componentName: "Company.PayScheduleForm", LoaderComponent: d, children: /* @__PURE__ */ a(I, { onEvent: l, LoaderComponent: d, ...h }) });
+import { SDKFormProvider as L } from "../../../partner-hook-utils/form/SDKFormProvider.js";
+import { Form as T } from "../../Common/Form/Form.js";
+import { Flex as p } from "../../Common/Flex/Flex.js";
+import { Grid as F } from "../../Common/Grid/Grid.js";
+import { ActionsLayout as x } from "../../Common/ActionsLayout/ActionsLayout.js";
+import { useComponentContext as N } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useDateFormatter as I } from "../../../hooks/useDateFormatter.js";
+import { componentEvents as f } from "../../../shared/constants.js";
+import { normalizeToDate as U } from "../../../helpers/dateFormatting.js";
+const D = (l) => U(l.toString());
+function te({ onEvent: l, LoaderComponent: d, ...c }) {
+  return /* @__PURE__ */ a(A, { componentName: "Company.PayScheduleForm", LoaderComponent: d, children: /* @__PURE__ */ a(Q, { onEvent: l, LoaderComponent: d, ...c }) });
 }
-function I({ onEvent: l, LoaderComponent: d, ...h }) {
-  const { t: e } = C("Company.PaySchedule"), i = F(), P = x(), o = O(h), [n, w] = R(0);
-  if (o.isLoading)
+function Q({
+  onEvent: l,
+  LoaderComponent: d,
+  variant: c = "onboarding",
+  copy: m,
+  ...w
+}) {
+  const { t: e } = M("Company.PaySchedule"), o = N(), g = I(), i = q(w), [n, S] = O(0);
+  if (i.isLoading)
     return /* @__PURE__ */ a(
-      f,
+      P,
       {
         isLoading: !0,
-        error: o.errorHandling.errors,
+        error: i.errorHandling.errors,
         LoaderComponent: d
       }
     );
   const v = async () => {
-    const t = await o.actions.onSubmit();
+    const t = await i.actions.onSubmit();
     t && l(
-      t.mode === "create" ? D.PAY_SCHEDULE_CREATED : D.PAY_SCHEDULE_UPDATED,
+      t.mode === "create" ? f.PAY_SCHEDULE_CREATED : f.PAY_SCHEDULE_UPDATED,
       { paySchedule: t.data }
     );
-  }, { Fields: r } = o.form, { paymentSpeedDays: S, payPreviewLoading: g } = o.data, s = o.data.payPeriodPreview, b = {
+  }, { Fields: r } = i.form, { paymentSpeedDays: b, payPreviewLoading: k } = i.data, s = i.data.payPeriodPreview, E = {
     "Every week": e("frequencies.everyWeek"),
     "Every other week": e("frequencies.everyOtherWeek"),
     "Twice per month": e("frequencies.twicePerMonth"),
     Monthly: e("frequencies.monthly")
-  }, k = {
+  }, R = {
     "1st15th": e("frequencyOptions.15thAndLast"),
     custom: e("frequencyOptions.custom")
-  }, E = {
+  }, C = {
     Sunday: e("workweekStartDayOptions.sunday"),
     Monday: e("workweekStartDayOptions.monday"),
     Tuesday: e("workweekStartDayOptions.tuesday"),
@@ -52,12 +58,12 @@ function I({ onEvent: l, LoaderComponent: d, ...h }) {
     Friday: e("workweekStartDayOptions.friday"),
     Saturday: e("workweekStartDayOptions.saturday")
   };
-  return /* @__PURE__ */ a(f, { error: o.errorHandling.errors, LoaderComponent: d, children: /* @__PURE__ */ a(q, { formHookResult: o, children: /* @__PURE__ */ a(A, { onSubmit: () => {
+  return /* @__PURE__ */ a(P, { error: i.errorHandling.errors, LoaderComponent: d, children: /* @__PURE__ */ a(L, { formHookResult: i, children: /* @__PURE__ */ a(T, { onSubmit: () => {
     v();
-  }, children: /* @__PURE__ */ c(u, { flexDirection: "column", children: [
-    /* @__PURE__ */ a(u, { justifyContent: "space-between", flexDirection: "column", gap: 4, children: /* @__PURE__ */ a("header", { children: /* @__PURE__ */ a(i.Heading, { as: "h2", children: o.status.mode === "create" ? e("headings.addPaySchedule") : e("headings.editPaySchedule") }) }) }),
-    /* @__PURE__ */ a("div", { className: m.payScheduleContainer, children: /* @__PURE__ */ c(L, { gap: 32, gridTemplateColumns: { base: "1fr", small: "1fr 1fr" }, children: [
-      /* @__PURE__ */ a("div", { className: m.payScheduleForm, children: /* @__PURE__ */ c(u, { flexDirection: "column", children: [
+  }, children: /* @__PURE__ */ y(p, { flexDirection: "column", children: [
+    /* @__PURE__ */ a(p, { justifyContent: "space-between", flexDirection: "column", gap: 4, children: /* @__PURE__ */ a("header", { children: /* @__PURE__ */ a(o.Heading, { as: "h2", children: i.status.mode === "create" ? e("headings.addPaySchedule") : e("headings.editPaySchedule") }) }) }),
+    /* @__PURE__ */ a("div", { className: u.payScheduleContainer, children: /* @__PURE__ */ y(F, { gap: 32, gridTemplateColumns: { base: "1fr", small: "1fr 1fr" }, children: [
+      /* @__PURE__ */ a("div", { className: u.payScheduleForm, children: /* @__PURE__ */ y(p, { flexDirection: "column", children: [
         /* @__PURE__ */ a(
           r.CustomName,
           {
@@ -70,7 +76,7 @@ function I({ onEvent: l, LoaderComponent: d, ...h }) {
           {
             label: e("labels.frequency"),
             placeholder: e("labels.frequencyPlaceholder"),
-            getOptionLabel: (t) => b[t],
+            getOptionLabel: (t) => E[t],
             validationMessages: { REQUIRED: e("validations.frequency") }
           }
         ),
@@ -79,7 +85,7 @@ function I({ onEvent: l, LoaderComponent: d, ...h }) {
           {
             label: e("labels.frequencyOptions"),
             description: e("descriptions.frequencyOptionsDescription"),
-            getOptionLabel: (t) => k[t] ?? t,
+            getOptionLabel: (t) => R[t] ?? t,
             validationMessages: { REQUIRED: e("validations.frequencyOptions") }
           }
         ),
@@ -87,9 +93,7 @@ function I({ onEvent: l, LoaderComponent: d, ...h }) {
           r.AnchorPayDate,
           {
             label: e("labels.firstPayDate"),
-            description: e("descriptions.anchorPayDateDescription", {
-              count: S
-            }),
+            description: m ? m.anchorPayDateDescription : e("descriptions.anchorPayDateDescription", { count: b }),
             validationMessages: { REQUIRED: e("validations.firstPayDate") },
             minDate: /* @__PURE__ */ new Date()
           }
@@ -98,7 +102,7 @@ function I({ onEvent: l, LoaderComponent: d, ...h }) {
           r.AnchorEndOfPayPeriod,
           {
             label: e("labels.firstPayPeriodEndDate"),
-            description: e("descriptions.anchorEndOfPayPeriodDescription"),
+            description: m?.anchorEndOfPayPeriodDescription ?? e("descriptions.anchorEndOfPayPeriodDescription"),
             validationMessages: { REQUIRED: e("validations.firstPayPeriodEndDate") }
           }
         ),
@@ -128,84 +132,84 @@ function I({ onEvent: l, LoaderComponent: d, ...h }) {
             label: e("labels.workweekStartDay"),
             placeholder: e("labels.workweekStartDayPlaceholder"),
             description: e("descriptions.workweekStartDayDescription"),
-            getOptionLabel: (t) => E[t]
+            getOptionLabel: (t) => C[t]
           }
         )
       ] }) }),
-      /* @__PURE__ */ a(u, { flexDirection: "column", gap: 4, justifyContent: "center", alignItems: "center", children: s && s[n] ? /* @__PURE__ */ c("div", { className: m.calendarContainer, children: [
-        !g && /* @__PURE__ */ a(
-          i.Select,
+      /* @__PURE__ */ a(p, { flexDirection: "column", gap: 4, justifyContent: "center", alignItems: "center", children: s && s[n] ? /* @__PURE__ */ y("div", { className: u.calendarContainer, "data-variant": c, children: [
+        !k && /* @__PURE__ */ a(
+          o.Select,
           {
             label: e("labels.preview"),
             placeholder: "",
             isRequired: !0,
-            options: s.map((t, y) => ({
-              value: String(y),
-              label: P.formatPayPeriodRange(
+            options: s.map((t, h) => ({
+              value: String(h),
+              label: c === "management" ? `${t.startDate.toString()} — ${t.endDate.toString()}` : g.formatPayPeriodRange(
                 t.startDate.toString(),
                 t.endDate.toString()
               )
             })),
             value: String(n),
             onChange: (t) => {
-              const y = Number(t);
-              isNaN(y) || w(y);
+              const h = Number(t);
+              isNaN(h) || S(h);
             }
           }
         ),
         /* @__PURE__ */ a(
-          i.CalendarPreview,
+          o.CalendarPreview,
           {
             dateRange: {
-              start: p(s[n].startDate),
-              end: p(s[n].endDate),
+              start: D(s[n].startDate),
+              end: D(s[n].endDate),
               label: e("payPreview.payPeriod") || "Pay Period"
             },
             highlightDates: [
               {
-                date: p(s[n].checkDate),
+                date: D(s[n].checkDate),
                 highlightColor: "primary",
                 label: e("payPreview.payday") || "Payday"
               },
               {
-                date: p(
+                date: D(
                   s[n].runPayrollBy
                 ),
                 highlightColor: "secondary",
-                label: e("payPreview.payrollDeadline") || "Payroll Deadline"
+                label: m?.payrollDeadline ?? e("payPreview.payrollDeadline")
               }
             ]
           },
           n
         )
-      ] }) : /* @__PURE__ */ a("div", { className: m.calendarContainer, children: /* @__PURE__ */ a(
-        i.Alert,
+      ] }) : /* @__PURE__ */ a("div", { className: u.calendarContainer, "data-variant": c, children: /* @__PURE__ */ a(
+        o.Alert,
         {
           status: "info",
           label: e("previewAlert.title", "Pay Schedule Preview"),
-          children: /* @__PURE__ */ a(i.Text, { children: e(
+          children: /* @__PURE__ */ a(o.Text, { children: e(
             "previewAlert.description",
             "Complete all the required fields on the left to see a preview of your pay schedule."
           ) })
         }
       ) }) })
     ] }) }),
-    /* @__PURE__ */ c(T, { children: [
+    /* @__PURE__ */ y(x, { children: [
       /* @__PURE__ */ a(
-        i.Button,
+        o.Button,
         {
           variant: "secondary",
           onClick: () => {
-            l(D.CANCEL);
+            l(f.CANCEL);
           },
           children: e("actions.cancel")
         }
       ),
-      /* @__PURE__ */ a(i.Button, { type: "submit", isLoading: o.status.isPending, children: e("actions.save") })
+      /* @__PURE__ */ a(o.Button, { type: "submit", isLoading: i.status.isPending, children: e("actions.save") })
     ] })
   ] }) }) }) });
 }
 export {
-  ee as PayScheduleForm
+  te as PayScheduleForm
 };
 //# sourceMappingURL=PayScheduleForm.js.map

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

@@ -1 +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 {\n  UsePayScheduleFormProps,\n  PayScheduleFrequency,\n  PayScheduleWorkweekStartDay,\n} 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 { Flex, Grid, ActionsLayout } 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'\nimport { normalizeToDate } from '@/helpers/dateFormatting'\nimport type { LoaderComponentType } from '@/components/Base'\n\ninterface PayScheduleFormProps extends UsePayScheduleFormProps {\n  onEvent: OnEventType<EventType, unknown>\n  /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */\n  LoaderComponent?: LoaderComponentType\n}\n\n// Pay period preview dates are RFCDate (`YYYY-MM-DD`) instances; normalizeToDate parses\n// them as local midnight instead of new Date's UTC midnight, which CalendarPreview would\n// otherwise roll back a day for timezones behind UTC. The format is always valid here.\nconst toLocalDate = (rfcDate: { toString(): string }): Date => normalizeToDate(rfcDate.toString())!\n\n/** @internal */\nexport function PayScheduleForm({ onEvent, LoaderComponent, ...hookProps }: PayScheduleFormProps) {\n  return (\n    <BaseBoundaries componentName=\"Company.PayScheduleForm\" LoaderComponent={LoaderComponent}>\n      <PayScheduleFormRoot onEvent={onEvent} LoaderComponent={LoaderComponent} {...hookProps} />\n    </BaseBoundaries>\n  )\n}\n\nfunction PayScheduleFormRoot({ onEvent, LoaderComponent, ...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 (\n      <BaseLayout\n        isLoading\n        error={paySchedule.errorHandling.errors}\n        LoaderComponent={LoaderComponent}\n      />\n    )\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\n\n  const frequencyLabels: Record<PayScheduleFrequency, string> = {\n    'Every week': t('frequencies.everyWeek'),\n    'Every other week': t('frequencies.everyOtherWeek'),\n    'Twice per month': t('frequencies.twicePerMonth'),\n    Monthly: t('frequencies.monthly'),\n  }\n\n  const twicePerMonthLabels: Record<string, string> = {\n    '1st15th': t('frequencyOptions.15thAndLast'),\n    custom: t('frequencyOptions.custom'),\n  }\n\n  const workweekStartDayLabels: Record<PayScheduleWorkweekStartDay, string> = {\n    Sunday: t('workweekStartDayOptions.sunday'),\n    Monday: t('workweekStartDayOptions.monday'),\n    Tuesday: t('workweekStartDayOptions.tuesday'),\n    Wednesday: t('workweekStartDayOptions.wednesday'),\n    Thursday: t('workweekStartDayOptions.thursday'),\n    Friday: t('workweekStartDayOptions.friday'),\n    Saturday: t('workweekStartDayOptions.saturday'),\n  }\n\n  return (\n    <BaseLayout error={paySchedule.errorHandling.errors} LoaderComponent={LoaderComponent}>\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                    <Fields.CustomName\n                      label={t('labels.name')}\n                      validationMessages={{ REQUIRED: t('validations.name') }}\n                    />\n                    <Fields.Frequency\n                      label={t('labels.frequency')}\n                      placeholder={t('labels.frequencyPlaceholder')}\n                      getOptionLabel={(entry: PayScheduleFrequency) => frequencyLabels[entry]}\n                      validationMessages={{ REQUIRED: t('validations.frequency') }}\n                    />\n                    {Fields.CustomTwicePerMonth && (\n                      <Fields.CustomTwicePerMonth\n                        label={t('labels.frequencyOptions')}\n                        description={t('descriptions.frequencyOptionsDescription')}\n                        getOptionLabel={(entry: string) => twicePerMonthLabels[entry] ?? entry}\n                        validationMessages={{ REQUIRED: t('validations.frequencyOptions') }}\n                      />\n                    )}\n                    <Fields.AnchorPayDate\n                      label={t('labels.firstPayDate')}\n                      description={t('descriptions.anchorPayDateDescription', {\n                        count: paymentSpeedDays,\n                      })}\n                      validationMessages={{ REQUIRED: t('validations.firstPayDate') }}\n                      minDate={new Date()}\n                    />\n                    <Fields.AnchorEndOfPayPeriod\n                      label={t('labels.firstPayPeriodEndDate')}\n                      description={t('descriptions.anchorEndOfPayPeriodDescription')}\n                      validationMessages={{ REQUIRED: t('validations.firstPayPeriodEndDate') }}\n                    />\n                    {Fields.Day1 && (\n                      <Fields.Day1\n                        label={t('labels.firstPayDayOfTheMonth')}\n                        validationMessages={{\n                          REQUIRED: t('validations.firstPayDayOfTheMonth'),\n                          DAY_RANGE: t('validations.dayRange'),\n                        }}\n                      />\n                    )}\n                    {Fields.Day2 && (\n                      <Fields.Day2\n                        label={t('labels.lastPayDayOfTheMonth')}\n                        validationMessages={{\n                          REQUIRED: t('validations.lastPayDayOfTheMonth'),\n                          DAY_RANGE: t('validations.dayRange'),\n                        }}\n                      />\n                    )}\n                    {Fields.WorkweekStartDay && (\n                      <Fields.WorkweekStartDay\n                        label={t('labels.workweekStartDay')}\n                        placeholder={t('labels.workweekStartDayPlaceholder')}\n                        description={t('descriptions.workweekStartDayDescription')}\n                        getOptionLabel={(entry: PayScheduleWorkweekStartDay) =>\n                          workweekStartDayLabels[entry]\n                        }\n                      />\n                    )}\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                          placeholder=\"\"\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: toLocalDate(payPeriodPreview[selectedPayPeriodIndex].startDate),\n                          end: toLocalDate(payPeriodPreview[selectedPayPeriodIndex].endDate),\n                          label: t('payPreview.payPeriod') || 'Pay Period',\n                        }}\n                        highlightDates={[\n                          {\n                            date: toLocalDate(payPeriodPreview[selectedPayPeriodIndex].checkDate),\n                            highlightColor: 'primary',\n                            label: t('payPreview.payday') || 'Payday',\n                          },\n                          {\n                            date: toLocalDate(\n                              payPeriodPreview[selectedPayPeriodIndex].runPayrollBy,\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":["toLocalDate","rfcDate","normalizeToDate","PayScheduleForm","onEvent","LoaderComponent","hookProps","jsx","BaseBoundaries","PayScheduleFormRoot","t","useTranslation","Components","useComponentContext","dateFormatter","useDateFormatter","paySchedule","usePayScheduleForm","selectedPayPeriodIndex","setSelectedPayPeriodIndex","useState","BaseLayout","handleSubmit","result","componentEvents","Fields","paymentSpeedDays","payPreviewLoading","payPeriodPreview","frequencyLabels","twicePerMonthLabels","workweekStartDayLabels","SDKFormProvider","Form","jsxs","Flex","style","Grid","entry","period","index","value","numericValue","ActionsLayout"],"mappings":"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"}
+{"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 {\n  UsePayScheduleFormProps,\n  PayScheduleFrequency,\n  PayScheduleWorkweekStartDay,\n} 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 { Flex, Grid, ActionsLayout } 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'\nimport { normalizeToDate } from '@/helpers/dateFormatting'\nimport type { LoaderComponentType } from '@/components/Base'\n\ninterface PayScheduleFormProps extends UsePayScheduleFormProps {\n  variant?: 'onboarding' | 'management'\n  copy?: {\n    anchorPayDateDescription?: string\n    anchorEndOfPayPeriodDescription: string\n    payrollDeadline: string\n  }\n  onEvent: OnEventType<EventType, unknown>\n  /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */\n  LoaderComponent?: LoaderComponentType\n}\n\n// Pay period preview dates are RFCDate (`YYYY-MM-DD`) instances; normalizeToDate parses\n// them as local midnight instead of new Date's UTC midnight, which CalendarPreview would\n// otherwise roll back a day for timezones behind UTC. The format is always valid here.\nconst toLocalDate = (rfcDate: { toString(): string }): Date => normalizeToDate(rfcDate.toString())!\n\n/** @internal */\nexport function PayScheduleForm({ onEvent, LoaderComponent, ...hookProps }: PayScheduleFormProps) {\n  return (\n    <BaseBoundaries componentName=\"Company.PayScheduleForm\" LoaderComponent={LoaderComponent}>\n      <PayScheduleFormRoot onEvent={onEvent} LoaderComponent={LoaderComponent} {...hookProps} />\n    </BaseBoundaries>\n  )\n}\n\nfunction PayScheduleFormRoot({\n  onEvent,\n  LoaderComponent,\n  variant = 'onboarding',\n  copy,\n  ...hookProps\n}: 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 (\n      <BaseLayout\n        isLoading\n        error={paySchedule.errorHandling.errors}\n        LoaderComponent={LoaderComponent}\n      />\n    )\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\n\n  const frequencyLabels: Record<PayScheduleFrequency, string> = {\n    'Every week': t('frequencies.everyWeek'),\n    'Every other week': t('frequencies.everyOtherWeek'),\n    'Twice per month': t('frequencies.twicePerMonth'),\n    Monthly: t('frequencies.monthly'),\n  }\n\n  const twicePerMonthLabels: Record<string, string> = {\n    '1st15th': t('frequencyOptions.15thAndLast'),\n    custom: t('frequencyOptions.custom'),\n  }\n\n  const workweekStartDayLabels: Record<PayScheduleWorkweekStartDay, string> = {\n    Sunday: t('workweekStartDayOptions.sunday'),\n    Monday: t('workweekStartDayOptions.monday'),\n    Tuesday: t('workweekStartDayOptions.tuesday'),\n    Wednesday: t('workweekStartDayOptions.wednesday'),\n    Thursday: t('workweekStartDayOptions.thursday'),\n    Friday: t('workweekStartDayOptions.friday'),\n    Saturday: t('workweekStartDayOptions.saturday'),\n  }\n\n  return (\n    <BaseLayout error={paySchedule.errorHandling.errors} LoaderComponent={LoaderComponent}>\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                    <Fields.CustomName\n                      label={t('labels.name')}\n                      validationMessages={{ REQUIRED: t('validations.name') }}\n                    />\n                    <Fields.Frequency\n                      label={t('labels.frequency')}\n                      placeholder={t('labels.frequencyPlaceholder')}\n                      getOptionLabel={(entry: PayScheduleFrequency) => frequencyLabels[entry]}\n                      validationMessages={{ REQUIRED: t('validations.frequency') }}\n                    />\n                    {Fields.CustomTwicePerMonth && (\n                      <Fields.CustomTwicePerMonth\n                        label={t('labels.frequencyOptions')}\n                        description={t('descriptions.frequencyOptionsDescription')}\n                        getOptionLabel={(entry: string) => twicePerMonthLabels[entry] ?? entry}\n                        validationMessages={{ REQUIRED: t('validations.frequencyOptions') }}\n                      />\n                    )}\n                    <Fields.AnchorPayDate\n                      label={t('labels.firstPayDate')}\n                      description={\n                        copy\n                          ? copy.anchorPayDateDescription\n                          : t('descriptions.anchorPayDateDescription', { count: paymentSpeedDays })\n                      }\n                      validationMessages={{ REQUIRED: t('validations.firstPayDate') }}\n                      minDate={new Date()}\n                    />\n                    <Fields.AnchorEndOfPayPeriod\n                      label={t('labels.firstPayPeriodEndDate')}\n                      description={\n                        copy?.anchorEndOfPayPeriodDescription ??\n                        t('descriptions.anchorEndOfPayPeriodDescription')\n                      }\n                      validationMessages={{ REQUIRED: t('validations.firstPayPeriodEndDate') }}\n                    />\n                    {Fields.Day1 && (\n                      <Fields.Day1\n                        label={t('labels.firstPayDayOfTheMonth')}\n                        validationMessages={{\n                          REQUIRED: t('validations.firstPayDayOfTheMonth'),\n                          DAY_RANGE: t('validations.dayRange'),\n                        }}\n                      />\n                    )}\n                    {Fields.Day2 && (\n                      <Fields.Day2\n                        label={t('labels.lastPayDayOfTheMonth')}\n                        validationMessages={{\n                          REQUIRED: t('validations.lastPayDayOfTheMonth'),\n                          DAY_RANGE: t('validations.dayRange'),\n                        }}\n                      />\n                    )}\n                    {Fields.WorkweekStartDay && (\n                      <Fields.WorkweekStartDay\n                        label={t('labels.workweekStartDay')}\n                        placeholder={t('labels.workweekStartDayPlaceholder')}\n                        description={t('descriptions.workweekStartDayDescription')}\n                        getOptionLabel={(entry: PayScheduleWorkweekStartDay) =>\n                          workweekStartDayLabels[entry]\n                        }\n                      />\n                    )}\n                  </Flex>\n                </div>\n                <Flex flexDirection=\"column\" gap={4} justifyContent=\"center\" alignItems=\"center\">\n                  {payPeriodPreview && payPeriodPreview[selectedPayPeriodIndex] ? (\n                    <div className={style.calendarContainer} data-variant={variant}>\n                      {!payPreviewLoading && (\n                        <Components.Select\n                          label={t('labels.preview')}\n                          placeholder=\"\"\n                          isRequired\n                          options={payPeriodPreview.map((period, index) => ({\n                            value: String(index),\n                            label:\n                              variant === 'management'\n                                ? `${period.startDate.toString()} — ${period.endDate.toString()}`\n                                : 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: toLocalDate(payPeriodPreview[selectedPayPeriodIndex].startDate),\n                          end: toLocalDate(payPeriodPreview[selectedPayPeriodIndex].endDate),\n                          label: t('payPreview.payPeriod') || 'Pay Period',\n                        }}\n                        highlightDates={[\n                          {\n                            date: toLocalDate(payPeriodPreview[selectedPayPeriodIndex].checkDate),\n                            highlightColor: 'primary',\n                            label: t('payPreview.payday') || 'Payday',\n                          },\n                          {\n                            date: toLocalDate(\n                              payPeriodPreview[selectedPayPeriodIndex].runPayrollBy,\n                            ),\n                            highlightColor: 'secondary',\n                            label: copy?.payrollDeadline ?? t('payPreview.payrollDeadline'),\n                          },\n                        ]}\n                      />\n                    </div>\n                  ) : (\n                    <div className={style.calendarContainer} data-variant={variant}>\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":["toLocalDate","rfcDate","normalizeToDate","PayScheduleForm","onEvent","LoaderComponent","hookProps","jsx","BaseBoundaries","PayScheduleFormRoot","variant","copy","t","useTranslation","Components","useComponentContext","dateFormatter","useDateFormatter","paySchedule","usePayScheduleForm","selectedPayPeriodIndex","setSelectedPayPeriodIndex","useState","BaseLayout","handleSubmit","result","componentEvents","Fields","paymentSpeedDays","payPreviewLoading","payPeriodPreview","frequencyLabels","twicePerMonthLabels","workweekStartDayLabels","SDKFormProvider","Form","jsxs","Flex","style","Grid","entry","period","index","value","numericValue","ActionsLayout"],"mappings":"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"}

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

@@ -1,11 +1,11 @@
-const e = "_payScheduleContainer_1glwl_1", a = "_payScheduleForm_1glwl_5", n = "_calendarContainer_1glwl_9", l = {
+const e = "_payScheduleContainer_6fjx0_1", a = "_payScheduleForm_6fjx0_5", n = "_calendarContainer_6fjx0_9", o = {
   payScheduleContainer: e,
   payScheduleForm: a,
   calendarContainer: n
 };
 export {
   n as calendarContainer,
-  l as default,
+  o as default,
   e as payScheduleContainer,
   a as payScheduleForm
 };

package/dist/components/Company/PaySchedule/management/PayScheduleAssignment/PayScheduleAssignmentComponents.js

@@ -1,141 +1,153 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useState as C, useMemo as _, useEffect as U } from "react";
-import { usePaySchedulesGetAllSuspense as T } from "@gusto/embedded-api/react-query/paySchedulesGetAll";
+import { useTranslation as C } from "react-i18next";
+import { useState as _, useMemo as U, useEffect as T } from "react";
+import { usePaySchedulesGetAllSuspense as D } from "@gusto/embedded-api/react-query/paySchedulesGetAll";
 import { usePaySchedulesPreviewAssignmentMutation as L } from "@gusto/embedded-api/react-query/paySchedulesPreviewAssignment";
 import { usePaySchedulesAssignMutation as v } from "@gusto/embedded-api/react-query/paySchedulesAssign";
-import { PayScheduleAssignmentBodyType as l } from "@gusto/embedded-api/models/components/payscheduleassignmentbody";
-import { AssignmentTypeStepPresentation as D } from "./AssignmentTypeStepPresentation.js";
-import { AssignmentScheduleStepPresentation as H } from "./AssignmentScheduleStepPresentation.js";
-import { AssignmentCompensationStepPresentation as N } from "./AssignmentCompensationStepPresentation.js";
-import { AssignmentReviewStepPresentation as I } from "./AssignmentReviewStepPresentation.js";
-import { PayScheduleForm as B } from "../../PayScheduleForm.js";
-import { useFlow as A } from "../../../../Flow/useFlow.js";
+import { PayScheduleAssignmentBodyType as m } from "@gusto/embedded-api/models/components/payscheduleassignmentbody";
+import { AssignmentTypeStepPresentation as H } from "./AssignmentTypeStepPresentation.js";
+import { AssignmentScheduleStepPresentation as N } from "./AssignmentScheduleStepPresentation.js";
+import { AssignmentCompensationStepPresentation as I } from "./AssignmentCompensationStepPresentation.js";
+import { AssignmentReviewStepPresentation as B } from "./AssignmentReviewStepPresentation.js";
+import { PayScheduleForm as M } from "../../PayScheduleForm.js";
+import { useFlow as h } from "../../../../Flow/useFlow.js";
 import { BaseLayout as Y } from "../../../../Base/Base.js";
 import { useBase as w } from "../../../../Base/useBase.js";
-import { ensureRequired as i } from "../../../../../helpers/ensureRequired.js";
-import { componentEvents as n } from "../../../../../shared/constants.js";
-function X() {
-  const { assignmentType: t, onEvent: o } = A();
+import { ensureRequired as a } from "../../../../../helpers/ensureRequired.js";
+import { componentEvents as t } from "../../../../../shared/constants.js";
+function $() {
+  const { assignmentType: n, onEvent: o } = h();
   return /* @__PURE__ */ r(
-    D,
+    H,
     {
-      defaultType: t,
+      defaultType: n,
       onBack: () => {
-        o(n.PAY_SCHEDULE_ASSIGNMENT_CANCEL);
+        o(t.PAY_SCHEDULE_ASSIGNMENT_CANCEL);
       },
-      onContinue: (u) => {
-        o(n.PAY_SCHEDULE_ASSIGNMENT_TYPE_SELECTED, { type: u });
+      onContinue: (s) => {
+        o(t.PAY_SCHEDULE_ASSIGNMENT_TYPE_SELECTED, { type: s });
       }
     }
   );
 }
-function Z() {
+function ee() {
   const {
-    companyId: t,
+    companyId: n,
     assignmentType: o,
-    defaultPayScheduleUuid: u,
+    defaultPayScheduleUuid: s,
     hourlyPayScheduleUuid: y,
     salariedPayScheduleUuid: p,
-    onEvent: s
-  } = A(), { data: d } = T({
-    companyId: i(t)
-  }), a = d.payScheduleShowResponse ?? [], S = a.find((e) => e.active), c = (e) => a.some((h) => h.uuid === e) ? e : S?.uuid;
-  return o === l.HourlySalaried ? /* @__PURE__ */ r(
-    N,
+    onEvent: i
+  } = h(), { data: d } = D({
+    companyId: a(n)
+  }), u = d.payScheduleShowResponse ?? [], S = u.find((e) => e.active), c = (e) => u.some((A) => A.uuid === e) ? e : S?.uuid;
+  return o === m.HourlySalaried ? /* @__PURE__ */ r(
+    I,
     {
-      schedules: a,
+      schedules: u,
       hourlyPayScheduleUuid: c(y),
       salariedPayScheduleUuid: c(p),
       onBack: () => {
-        s(n.PAY_SCHEDULE_ASSIGNMENT_BACK);
+        i(t.PAY_SCHEDULE_ASSIGNMENT_BACK);
       },
       onAddPaySchedule: () => {
-        s(n.PAY_SCHEDULE_CREATE);
+        i(t.PAY_SCHEDULE_CREATE);
       },
       onContinue: (e) => {
-        s(n.PAY_SCHEDULE_ASSIGNMENT_SCHEDULE_SELECTED, e);
+        i(t.PAY_SCHEDULE_ASSIGNMENT_SCHEDULE_SELECTED, e);
       }
     }
   ) : /* @__PURE__ */ r(
-    H,
+    N,
     {
-      schedules: a,
-      defaultPayScheduleUuid: c(u),
+      schedules: u,
+      defaultPayScheduleUuid: c(s),
       onBack: () => {
-        s(n.PAY_SCHEDULE_ASSIGNMENT_BACK);
+        i(t.PAY_SCHEDULE_ASSIGNMENT_BACK);
       },
       onAddPaySchedule: () => {
-        s(n.PAY_SCHEDULE_CREATE);
+        i(t.PAY_SCHEDULE_CREATE);
       },
       onContinue: (e) => {
-        s(n.PAY_SCHEDULE_ASSIGNMENT_SCHEDULE_SELECTED, {
+        i(t.PAY_SCHEDULE_ASSIGNMENT_SCHEDULE_SELECTED, {
           defaultPayScheduleUuid: e
         });
       }
     }
   );
 }
-function $() {
-  const { companyId: t, onEvent: o } = A();
-  return /* @__PURE__ */ r(B, { companyId: i(t), onEvent: o });
+function ne() {
+  const { t: n } = C("Company.Management.PayScheduleAssignment"), { companyId: o, onEvent: s } = h();
+  return /* @__PURE__ */ r(
+    M,
+    {
+      variant: "management",
+      companyId: a(o),
+      onEvent: s,
+      copy: {
+        anchorEndOfPayPeriodDescription: n("scheduleForm.anchorEndOfPayPeriodDescription"),
+        payrollDeadline: n("scheduleForm.payrollDeadline")
+      }
+    }
+  );
 }
-function ee() {
+function te() {
   const {
-    companyId: t,
+    companyId: n,
     assignmentType: o,
-    defaultPayScheduleUuid: u,
+    defaultPayScheduleUuid: s,
     hourlyPayScheduleUuid: y,
     salariedPayScheduleUuid: p,
-    onEvent: s
-  } = A(), { baseSubmitHandler: d, error: a } = w(), [S, c] = C(null), { mutateAsync: e, isPending: h } = L(), { mutateAsync: f, isPending: g } = v(), E = _(() => {
-    if (o === l.HourlySalaried) {
-      const m = i(y), P = i(p);
-      return m === P ? {
-        type: l.Single,
-        defaultPayScheduleUuid: m
+    onEvent: i
+  } = h(), { baseSubmitHandler: d, error: u } = w(), [S, c] = _(null), { mutateAsync: e, isPending: A } = L(), { mutateAsync: f, isPending: g } = v(), E = U(() => {
+    if (o === m.HourlySalaried) {
+      const l = a(y), P = a(p);
+      return l === P ? {
+        type: m.Single,
+        defaultPayScheduleUuid: l
       } : {
-        type: l.HourlySalaried,
-        hourlyPayScheduleUuid: m,
+        type: m.HourlySalaried,
+        hourlyPayScheduleUuid: l,
         salariedPayScheduleUuid: P
       };
     }
     return {
-      type: l.Single,
-      defaultPayScheduleUuid: i(u)
+      type: m.Single,
+      defaultPayScheduleUuid: a(s)
     };
-  }, [o, u, y, p]);
-  return U(() => {
+  }, [o, s, y, p]);
+  return T(() => {
     d(void 0, async () => {
-      const m = await e({
-        request: { companyId: i(t), payScheduleAssignmentBody: E }
+      const l = await e({
+        request: { companyId: a(n), payScheduleAssignmentBody: E }
       });
-      c(m.payScheduleAssignmentPreview?.employeeChanges ?? []);
+      c(l.payScheduleAssignmentPreview?.employeeChanges ?? []);
     });
-  }, [t, E, e, d]), a ? null : h || !S ? /* @__PURE__ */ r(Y, { isLoading: !0 }) : /* @__PURE__ */ r(
-    I,
+  }, [n, E, e, d]), u ? null : A || !S ? /* @__PURE__ */ r(Y, { isLoading: !0 }) : /* @__PURE__ */ r(
+    B,
     {
       employeeChanges: S,
       isSubmitting: g,
       onBack: () => {
-        s(n.PAY_SCHEDULE_ASSIGNMENT_BACK);
+        i(t.PAY_SCHEDULE_ASSIGNMENT_BACK);
       },
       onSubmit: () => {
         d(void 0, async () => {
           await f({
             request: {
-              companyId: i(t),
+              companyId: a(n),
               payScheduleAssignmentBody: E
             }
-          }), s(n.PAY_SCHEDULE_ASSIGNED, { ...E, employeeChanges: S });
+          }), i(t.PAY_SCHEDULE_ASSIGNED, { ...E, employeeChanges: S });
         });
       }
     }
   );
 }
 export {
-  $ as AssignmentCreateScheduleStep,
-  ee as AssignmentReviewStep,
-  Z as AssignmentScheduleStep,
-  X as AssignmentTypeStep
+  ne as AssignmentCreateScheduleStep,
+  te as AssignmentReviewStep,
+  ee as AssignmentScheduleStep,
+  $ as AssignmentTypeStep
 };
 //# sourceMappingURL=PayScheduleAssignmentComponents.js.map