@gusto/embedded-react-sdk 0.44.1 → 0.45.0

package/dist/components/TimeOff/PolicySettings/PolicySettingsPresentation.js

@@ -1,53 +1,57 @@
-import { jsx as e, jsxs as l, Fragment as S } from "react/jsx-runtime";
+import { jsx as e, jsxs as l, Fragment as L } from "react/jsx-runtime";
 import { useId as n } from "react";
-import { useForm as T, useWatch as o, FormProvider as D } from "react-hook-form";
-import { useTranslation as V } from "react-i18next";
+import { useForm as k, useWatch as s, FormProvider as R } from "react-hook-form";
+import { useTranslation as U } from "react-i18next";
 import a from "./PolicySettings.module.scss.js";
-import { Flex as x } from "../../Common/Flex/Flex.js";
+import { Flex as N } from "../../Common/Flex/Flex.js";
 import "classnames";
 import "../../../shared/constants.js";
-import { ActionsLayout as k } from "../../Common/ActionsLayout/ActionsLayout.js";
-import { Form as R } from "../../Common/Form/Form.js";
-import { useComponentContext as U } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as _ } from "../../../i18n/I18n.js";
-import { NumberInputField as s } from "../../Common/Fields/NumberInputField/NumberInputField.js";
+import { ActionsLayout as W } from "../../Common/ActionsLayout/ActionsLayout.js";
+import { Form as _ } from "../../Common/Form/Form.js";
+import { useComponentContext as j } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as A } from "../../../i18n/I18n.js";
+import { NumberInputField as c } from "../../Common/Fields/NumberInputField/NumberInputField.js";
 import { SwitchField as t } from "../../Common/Fields/SwitchField/SwitchField.js";
-function ii({
-  accrualMethod: m,
-  onContinue: v,
-  onBack: O,
-  defaultValues: L
+function li({
+  accrualMethod: d,
+  onContinue: P,
+  onBack: E,
+  defaultValues: M,
+  mode: w,
+  editingPolicyName: u,
+  isPending: p = !1
 }) {
-  _("Company.TimeOff.CreateTimeOffPolicy");
-  const { t: i } = V("Company.TimeOff.CreateTimeOffPolicy"), { Heading: P, Button: d } = U(), u = n(), p = n(), b = n(), g = n(), y = n(), c = T({
+  A("Company.TimeOff.CreateTimeOffPolicy");
+  const { t: i } = U("Company.TimeOff.CreateTimeOffPolicy"), { Heading: H, Button: b } = j(), g = n(), y = n(), h = n(), f = n(), x = n(), m = k({
     defaultValues: {
       accrualMaximumEnabled: !1,
       balanceMaximumEnabled: !1,
       carryOverLimitEnabled: !1,
       waitingPeriodEnabled: !1,
       paidOutOnTermination: !1,
-      ...L
+      ...M
     }
-  }), { control: r } = c, E = o({ control: r, name: "accrualMaximumEnabled" }), M = o({ control: r, name: "balanceMaximumEnabled" }), N = o({ control: r, name: "carryOverLimitEnabled" }), w = o({ control: r, name: "waitingPeriodEnabled" }), h = m === "hours_worked", f = m === "fixed_per_pay_period", H = h || f, C = h || f, F = (I) => {
-    v(I);
+  }), { control: r } = m, C = s({ control: r, name: "accrualMaximumEnabled" }), F = s({ control: r, name: "balanceMaximumEnabled" }), I = s({ control: r, name: "carryOverLimitEnabled" }), S = s({ control: r, name: "waitingPeriodEnabled" }), v = d === "hours_worked", O = d === "fixed_per_pay_period", T = v || O, D = v || O, V = (o) => {
+    P(o);
   };
-  return /* @__PURE__ */ e(D, { ...c, children: /* @__PURE__ */ e(R, { "aria-labelledby": u, onSubmit: c.handleSubmit(F), children: /* @__PURE__ */ e("div", { className: a.policySettings, children: /* @__PURE__ */ l(x, { flexDirection: "column", gap: 32, children: [
-    /* @__PURE__ */ e(P, { as: "h2", id: u, children: i("policySettings.title") }),
-    /* @__PURE__ */ l(x, { flexDirection: "column", gap: 20, children: [
-      H && /* @__PURE__ */ l(S, { children: [
+  return /* @__PURE__ */ e(R, { ...m, children: /* @__PURE__ */ e(_, { "aria-labelledby": g, onSubmit: m.handleSubmit(V), children: /* @__PURE__ */ e("div", { className: a.policySettings, children: /* @__PURE__ */ l(N, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ e(H, { as: "h2", id: g, children: w === "edit" && u ? i("policySettings.editTitle", { name: u }) : i("policySettings.createTitle") }),
+    /* @__PURE__ */ l(N, { flexDirection: "column", gap: 20, children: [
+      T && /* @__PURE__ */ l(L, { children: [
         /* @__PURE__ */ l("div", { className: a.settingRow, children: [
           /* @__PURE__ */ e(
-            s,
+            c,
             {
               className: a.settingField,
-              id: p,
+              id: y,
               name: "accrualMaximum",
               label: i("policySettings.accrualMaximumLabel"),
               description: i("policySettings.accrualMaximumHint"),
               adornmentEnd: i("policySettings.hoursUnit"),
               placeholder: i("policySettings.numberOfHoursPlaceholder"),
-              isDisabled: !E,
-              min: 0
+              isDisabled: !C,
+              min: 0,
+              max: 2e4
             }
           ),
           /* @__PURE__ */ e("div", { className: a.toggleCell, children: /* @__PURE__ */ e(
@@ -56,7 +60,7 @@ function ii({
               name: "accrualMaximumEnabled",
               label: i("policySettings.accrualMaximumLabel"),
               shouldVisuallyHideLabel: !0,
-              "aria-controls": p
+              "aria-controls": y
             }
           ) })
         ] }),
@@ -64,17 +68,18 @@ function ii({
       ] }),
       /* @__PURE__ */ l("div", { className: a.settingRow, children: [
         /* @__PURE__ */ e(
-          s,
+          c,
           {
             className: a.settingField,
-            id: b,
+            id: h,
             name: "balanceMaximum",
             label: i("policySettings.balanceMaximumLabel"),
             description: i("policySettings.balanceMaximumHint"),
             adornmentEnd: i("policySettings.hoursUnit"),
             placeholder: i("policySettings.numberOfHoursPlaceholder"),
-            isDisabled: !M,
-            min: 0
+            isDisabled: !F,
+            min: 0,
+            max: 2e4
           }
         ),
         /* @__PURE__ */ e("div", { className: a.toggleCell, children: /* @__PURE__ */ e(
@@ -83,24 +88,25 @@ function ii({
             name: "balanceMaximumEnabled",
             label: i("policySettings.balanceMaximumLabel"),
             shouldVisuallyHideLabel: !0,
-            "aria-controls": b
+            "aria-controls": h
           }
         ) })
       ] }),
       /* @__PURE__ */ e("hr", { className: a.divider }),
       /* @__PURE__ */ l("div", { className: a.settingRow, children: [
         /* @__PURE__ */ e(
-          s,
+          c,
           {
             className: a.settingField,
-            id: g,
+            id: f,
             name: "carryOverLimit",
             label: i("policySettings.carryOverLimitLabel"),
             description: i("policySettings.carryOverLimitHint"),
             adornmentEnd: i("policySettings.hoursUnit"),
             placeholder: i("policySettings.numberOfHoursPlaceholder"),
-            isDisabled: !N,
-            min: 0
+            isDisabled: !I,
+            min: 0,
+            max: 2e4
           }
         ),
         /* @__PURE__ */ e("div", { className: a.toggleCell, children: /* @__PURE__ */ e(
@@ -109,25 +115,30 @@ function ii({
             name: "carryOverLimitEnabled",
             label: i("policySettings.carryOverLimitLabel"),
             shouldVisuallyHideLabel: !0,
-            "aria-controls": g
+            "aria-controls": f
           }
         ) })
       ] }),
       /* @__PURE__ */ e("hr", { className: a.divider }),
-      C && /* @__PURE__ */ l(S, { children: [
+      D && /* @__PURE__ */ l(L, { children: [
         /* @__PURE__ */ l("div", { className: a.settingRow, children: [
           /* @__PURE__ */ e(
-            s,
+            c,
             {
               className: a.settingField,
-              id: y,
+              id: x,
               name: "waitingPeriod",
               label: i("policySettings.waitingPeriodLabel"),
               description: i("policySettings.waitingPeriodHint"),
               adornmentEnd: i("policySettings.daysUnit"),
               placeholder: i("policySettings.numberOfDaysPlaceholder"),
-              isDisabled: !w,
-              min: 0
+              isDisabled: !S,
+              min: 0,
+              max: 2e4,
+              maximumFractionDigits: 0,
+              rules: {
+                validate: (o) => S && !isNaN(o) && !Number.isInteger(o) ? i("policySettings.errors.waitingPeriodMustBeWholeNumber") : !0
+              }
             }
           ),
           /* @__PURE__ */ e("div", { className: a.toggleCell, children: /* @__PURE__ */ e(
@@ -136,7 +147,7 @@ function ii({
               name: "waitingPeriodEnabled",
               label: i("policySettings.waitingPeriodLabel"),
               shouldVisuallyHideLabel: !0,
-              "aria-controls": y
+              "aria-controls": x
             }
           ) })
         ] }),
@@ -151,14 +162,14 @@ function ii({
         }
       ),
       /* @__PURE__ */ e("hr", { className: a.divider }),
-      /* @__PURE__ */ l(k, { children: [
-        /* @__PURE__ */ e(d, { variant: "secondary", onClick: O, children: i("backCta") }),
-        /* @__PURE__ */ e(d, { variant: "primary", type: "submit", children: i("policySettings.continueCta") })
+      /* @__PURE__ */ l(W, { children: [
+        /* @__PURE__ */ e(b, { variant: "secondary", onClick: E, isDisabled: p, children: i("backCta") }),
+        /* @__PURE__ */ e(b, { variant: "primary", type: "submit", isLoading: p, children: i("policySettings.continueCta") })
       ] })
     ] })
   ] }) }) }) });
 }
 export {
-  ii as PolicySettingsPresentation
+  li as PolicySettingsPresentation
 };
 //# sourceMappingURL=PolicySettingsPresentation.js.map

package/dist/components/TimeOff/PolicySettings/PolicySettingsPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PolicySettingsPresentation.js","sources":["../../../../src/components/TimeOff/PolicySettings/PolicySettingsPresentation.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { FormProvider, useForm, useWatch } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport type { PolicySettingsFormData, PolicySettingsPresentationProps } from './PolicySettingsTypes'\nimport styles from './PolicySettings.module.scss'\nimport { Flex, ActionsLayout, NumberInputField, SwitchField } from '@/components/Common'\nimport { Form as HtmlForm } from '@/components/Common/Form'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\n\nexport function PolicySettingsPresentation({\n  accrualMethod,\n  onContinue,\n  onBack,\n  defaultValues,\n}: PolicySettingsPresentationProps) {\n  useI18n('Company.TimeOff.CreateTimeOffPolicy')\n  const { t } = useTranslation('Company.TimeOff.CreateTimeOffPolicy')\n  const { Heading, Button } = useComponentContext()\n  const headingId = useId()\n\n  const accrualMaxInputId = useId()\n  const balanceMaxInputId = useId()\n  const carryOverInputId = useId()\n  const waitingPeriodInputId = useId()\n\n  const formMethods = useForm<PolicySettingsFormData>({\n    defaultValues: {\n      accrualMaximumEnabled: false,\n      balanceMaximumEnabled: false,\n      carryOverLimitEnabled: false,\n      waitingPeriodEnabled: false,\n      paidOutOnTermination: false,\n      ...defaultValues,\n    },\n  })\n\n  const { control } = formMethods\n  const accrualMaximumEnabled = useWatch({ control, name: 'accrualMaximumEnabled' })\n  const balanceMaximumEnabled = useWatch({ control, name: 'balanceMaximumEnabled' })\n  const carryOverLimitEnabled = useWatch({ control, name: 'carryOverLimitEnabled' })\n  const waitingPeriodEnabled = useWatch({ control, name: 'waitingPeriodEnabled' })\n\n  const isHoursWorked = accrualMethod === 'hours_worked'\n  const isFixedPerPayPeriod = accrualMethod === 'fixed_per_pay_period'\n  const showAccrualMaximum = isHoursWorked || isFixedPerPayPeriod\n  const showWaitingPeriod = isHoursWorked || isFixedPerPayPeriod\n\n  const handleSubmit = (data: PolicySettingsFormData) => {\n    onContinue(data)\n  }\n\n  return (\n    <FormProvider {...formMethods}>\n      <HtmlForm aria-labelledby={headingId} onSubmit={formMethods.handleSubmit(handleSubmit)}>\n        <div className={styles.policySettings}>\n          <Flex flexDirection=\"column\" gap={32}>\n            <Heading as=\"h2\" id={headingId}>\n              {t('policySettings.title')}\n            </Heading>\n\n            <Flex flexDirection=\"column\" gap={20}>\n              {showAccrualMaximum && (\n                <>\n                  <div className={styles.settingRow}>\n                    <NumberInputField\n                      className={styles.settingField}\n                      id={accrualMaxInputId}\n                      name=\"accrualMaximum\"\n                      label={t('policySettings.accrualMaximumLabel')}\n                      description={t('policySettings.accrualMaximumHint')}\n                      adornmentEnd={t('policySettings.hoursUnit')}\n                      placeholder={t('policySettings.numberOfHoursPlaceholder')}\n                      isDisabled={!accrualMaximumEnabled}\n                      min={0}\n                    />\n                    <div className={styles.toggleCell}>\n                      <SwitchField\n                        name=\"accrualMaximumEnabled\"\n                        label={t('policySettings.accrualMaximumLabel')}\n                        shouldVisuallyHideLabel\n                        aria-controls={accrualMaxInputId}\n                      />\n                    </div>\n                  </div>\n\n                  <hr className={styles.divider} />\n                </>\n              )}\n\n              <div className={styles.settingRow}>\n                <NumberInputField\n                  className={styles.settingField}\n                  id={balanceMaxInputId}\n                  name=\"balanceMaximum\"\n                  label={t('policySettings.balanceMaximumLabel')}\n                  description={t('policySettings.balanceMaximumHint')}\n                  adornmentEnd={t('policySettings.hoursUnit')}\n                  placeholder={t('policySettings.numberOfHoursPlaceholder')}\n                  isDisabled={!balanceMaximumEnabled}\n                  min={0}\n                />\n                <div className={styles.toggleCell}>\n                  <SwitchField\n                    name=\"balanceMaximumEnabled\"\n                    label={t('policySettings.balanceMaximumLabel')}\n                    shouldVisuallyHideLabel\n                    aria-controls={balanceMaxInputId}\n                  />\n                </div>\n              </div>\n\n              <hr className={styles.divider} />\n\n              <div className={styles.settingRow}>\n                <NumberInputField\n                  className={styles.settingField}\n                  id={carryOverInputId}\n                  name=\"carryOverLimit\"\n                  label={t('policySettings.carryOverLimitLabel')}\n                  description={t('policySettings.carryOverLimitHint')}\n                  adornmentEnd={t('policySettings.hoursUnit')}\n                  placeholder={t('policySettings.numberOfHoursPlaceholder')}\n                  isDisabled={!carryOverLimitEnabled}\n                  min={0}\n                />\n                <div className={styles.toggleCell}>\n                  <SwitchField\n                    name=\"carryOverLimitEnabled\"\n                    label={t('policySettings.carryOverLimitLabel')}\n                    shouldVisuallyHideLabel\n                    aria-controls={carryOverInputId}\n                  />\n                </div>\n              </div>\n\n              <hr className={styles.divider} />\n\n              {showWaitingPeriod && (\n                <>\n                  <div className={styles.settingRow}>\n                    <NumberInputField\n                      className={styles.settingField}\n                      id={waitingPeriodInputId}\n                      name=\"waitingPeriod\"\n                      label={t('policySettings.waitingPeriodLabel')}\n                      description={t('policySettings.waitingPeriodHint')}\n                      adornmentEnd={t('policySettings.daysUnit')}\n                      placeholder={t('policySettings.numberOfDaysPlaceholder')}\n                      isDisabled={!waitingPeriodEnabled}\n                      min={0}\n                    />\n                    <div className={styles.toggleCell}>\n                      <SwitchField\n                        name=\"waitingPeriodEnabled\"\n                        label={t('policySettings.waitingPeriodLabel')}\n                        shouldVisuallyHideLabel\n                        aria-controls={waitingPeriodInputId}\n                      />\n                    </div>\n                  </div>\n\n                  <hr className={styles.divider} />\n                </>\n              )}\n\n              <SwitchField\n                name=\"paidOutOnTermination\"\n                label={t('policySettings.paidOutOnTerminationLabel')}\n                description={t('policySettings.paidOutOnTerminationHint')}\n              />\n\n              <hr className={styles.divider} />\n\n              <ActionsLayout>\n                <Button variant=\"secondary\" onClick={onBack}>\n                  {t('backCta')}\n                </Button>\n                <Button variant=\"primary\" type=\"submit\">\n                  {t('policySettings.continueCta')}\n                </Button>\n              </ActionsLayout>\n            </Flex>\n          </Flex>\n        </div>\n      </HtmlForm>\n    </FormProvider>\n  )\n}\n"],"names":["PolicySettingsPresentation","accrualMethod","onContinue","onBack","defaultValues","useI18n","t","useTranslation","Heading","Button","useComponentContext","headingId","useId","accrualMaxInputId","balanceMaxInputId","carryOverInputId","waitingPeriodInputId","formMethods","useForm","control","accrualMaximumEnabled","useWatch","balanceMaximumEnabled","carryOverLimitEnabled","waitingPeriodEnabled","isHoursWorked","isFixedPerPayPeriod","showAccrualMaximum","showWaitingPeriod","handleSubmit","data","jsx","FormProvider","HtmlForm","styles","Flex","jsxs","Fragment","NumberInputField","SwitchField","ActionsLayout"],"mappings":"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"}
+{"version":3,"file":"PolicySettingsPresentation.js","sources":["../../../../src/components/TimeOff/PolicySettings/PolicySettingsPresentation.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { FormProvider, useForm, useWatch } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport type { PolicySettingsFormData, PolicySettingsPresentationProps } from './PolicySettingsTypes'\nimport styles from './PolicySettings.module.scss'\nimport { Flex, ActionsLayout, NumberInputField, SwitchField } from '@/components/Common'\nimport { Form as HtmlForm } from '@/components/Common/Form'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\n\nexport function PolicySettingsPresentation({\n  accrualMethod,\n  onContinue,\n  onBack,\n  defaultValues,\n  mode,\n  editingPolicyName,\n  isPending = false,\n}: PolicySettingsPresentationProps) {\n  useI18n('Company.TimeOff.CreateTimeOffPolicy')\n  const { t } = useTranslation('Company.TimeOff.CreateTimeOffPolicy')\n  const { Heading, Button } = useComponentContext()\n  const headingId = useId()\n\n  const accrualMaxInputId = useId()\n  const balanceMaxInputId = useId()\n  const carryOverInputId = useId()\n  const waitingPeriodInputId = useId()\n\n  const formMethods = useForm<PolicySettingsFormData>({\n    defaultValues: {\n      accrualMaximumEnabled: false,\n      balanceMaximumEnabled: false,\n      carryOverLimitEnabled: false,\n      waitingPeriodEnabled: false,\n      paidOutOnTermination: false,\n      ...defaultValues,\n    },\n  })\n\n  const { control } = formMethods\n  const accrualMaximumEnabled = useWatch({ control, name: 'accrualMaximumEnabled' })\n  const balanceMaximumEnabled = useWatch({ control, name: 'balanceMaximumEnabled' })\n  const carryOverLimitEnabled = useWatch({ control, name: 'carryOverLimitEnabled' })\n  const waitingPeriodEnabled = useWatch({ control, name: 'waitingPeriodEnabled' })\n\n  const isHoursWorked = accrualMethod === 'hours_worked'\n  const isFixedPerPayPeriod = accrualMethod === 'fixed_per_pay_period'\n  const showAccrualMaximum = isHoursWorked || isFixedPerPayPeriod\n  const showWaitingPeriod = isHoursWorked || isFixedPerPayPeriod\n\n  const handleSubmit = (data: PolicySettingsFormData) => {\n    onContinue(data)\n  }\n\n  return (\n    <FormProvider {...formMethods}>\n      <HtmlForm aria-labelledby={headingId} onSubmit={formMethods.handleSubmit(handleSubmit)}>\n        <div className={styles.policySettings}>\n          <Flex flexDirection=\"column\" gap={32}>\n            <Heading as=\"h2\" id={headingId}>\n              {mode === 'edit' && editingPolicyName\n                ? t('policySettings.editTitle', { name: editingPolicyName })\n                : t('policySettings.createTitle')}\n            </Heading>\n\n            <Flex flexDirection=\"column\" gap={20}>\n              {showAccrualMaximum && (\n                <>\n                  <div className={styles.settingRow}>\n                    <NumberInputField\n                      className={styles.settingField}\n                      id={accrualMaxInputId}\n                      name=\"accrualMaximum\"\n                      label={t('policySettings.accrualMaximumLabel')}\n                      description={t('policySettings.accrualMaximumHint')}\n                      adornmentEnd={t('policySettings.hoursUnit')}\n                      placeholder={t('policySettings.numberOfHoursPlaceholder')}\n                      isDisabled={!accrualMaximumEnabled}\n                      min={0}\n                      max={20000}\n                    />\n                    <div className={styles.toggleCell}>\n                      <SwitchField\n                        name=\"accrualMaximumEnabled\"\n                        label={t('policySettings.accrualMaximumLabel')}\n                        shouldVisuallyHideLabel\n                        aria-controls={accrualMaxInputId}\n                      />\n                    </div>\n                  </div>\n\n                  <hr className={styles.divider} />\n                </>\n              )}\n\n              <div className={styles.settingRow}>\n                <NumberInputField\n                  className={styles.settingField}\n                  id={balanceMaxInputId}\n                  name=\"balanceMaximum\"\n                  label={t('policySettings.balanceMaximumLabel')}\n                  description={t('policySettings.balanceMaximumHint')}\n                  adornmentEnd={t('policySettings.hoursUnit')}\n                  placeholder={t('policySettings.numberOfHoursPlaceholder')}\n                  isDisabled={!balanceMaximumEnabled}\n                  min={0}\n                  max={20000}\n                />\n                <div className={styles.toggleCell}>\n                  <SwitchField\n                    name=\"balanceMaximumEnabled\"\n                    label={t('policySettings.balanceMaximumLabel')}\n                    shouldVisuallyHideLabel\n                    aria-controls={balanceMaxInputId}\n                  />\n                </div>\n              </div>\n\n              <hr className={styles.divider} />\n\n              <div className={styles.settingRow}>\n                <NumberInputField\n                  className={styles.settingField}\n                  id={carryOverInputId}\n                  name=\"carryOverLimit\"\n                  label={t('policySettings.carryOverLimitLabel')}\n                  description={t('policySettings.carryOverLimitHint')}\n                  adornmentEnd={t('policySettings.hoursUnit')}\n                  placeholder={t('policySettings.numberOfHoursPlaceholder')}\n                  isDisabled={!carryOverLimitEnabled}\n                  min={0}\n                  max={20000}\n                />\n                <div className={styles.toggleCell}>\n                  <SwitchField\n                    name=\"carryOverLimitEnabled\"\n                    label={t('policySettings.carryOverLimitLabel')}\n                    shouldVisuallyHideLabel\n                    aria-controls={carryOverInputId}\n                  />\n                </div>\n              </div>\n\n              <hr className={styles.divider} />\n\n              {showWaitingPeriod && (\n                <>\n                  <div className={styles.settingRow}>\n                    <NumberInputField\n                      className={styles.settingField}\n                      id={waitingPeriodInputId}\n                      name=\"waitingPeriod\"\n                      label={t('policySettings.waitingPeriodLabel')}\n                      description={t('policySettings.waitingPeriodHint')}\n                      adornmentEnd={t('policySettings.daysUnit')}\n                      placeholder={t('policySettings.numberOfDaysPlaceholder')}\n                      isDisabled={!waitingPeriodEnabled}\n                      min={0}\n                      max={20000}\n                      maximumFractionDigits={0}\n                      rules={{\n                        validate: (value: number) => {\n                          if (waitingPeriodEnabled && !isNaN(value) && !Number.isInteger(value)) {\n                            return t('policySettings.errors.waitingPeriodMustBeWholeNumber')\n                          }\n                          return true\n                        },\n                      }}\n                    />\n                    <div className={styles.toggleCell}>\n                      <SwitchField\n                        name=\"waitingPeriodEnabled\"\n                        label={t('policySettings.waitingPeriodLabel')}\n                        shouldVisuallyHideLabel\n                        aria-controls={waitingPeriodInputId}\n                      />\n                    </div>\n                  </div>\n\n                  <hr className={styles.divider} />\n                </>\n              )}\n\n              <SwitchField\n                name=\"paidOutOnTermination\"\n                label={t('policySettings.paidOutOnTerminationLabel')}\n                description={t('policySettings.paidOutOnTerminationHint')}\n              />\n\n              <hr className={styles.divider} />\n\n              <ActionsLayout>\n                <Button variant=\"secondary\" onClick={onBack} isDisabled={isPending}>\n                  {t('backCta')}\n                </Button>\n                <Button variant=\"primary\" type=\"submit\" isLoading={isPending}>\n                  {t('policySettings.continueCta')}\n                </Button>\n              </ActionsLayout>\n            </Flex>\n          </Flex>\n        </div>\n      </HtmlForm>\n    </FormProvider>\n  )\n}\n"],"names":["PolicySettingsPresentation","accrualMethod","onContinue","onBack","defaultValues","mode","editingPolicyName","isPending","useI18n","t","useTranslation","Heading","Button","useComponentContext","headingId","useId","accrualMaxInputId","balanceMaxInputId","carryOverInputId","waitingPeriodInputId","formMethods","useForm","control","accrualMaximumEnabled","useWatch","balanceMaximumEnabled","carryOverLimitEnabled","waitingPeriodEnabled","isHoursWorked","isFixedPerPayPeriod","showAccrualMaximum","showWaitingPeriod","handleSubmit","data","jsx","FormProvider","HtmlForm","styles","Flex","jsxs","Fragment","NumberInputField","SwitchField","value","ActionsLayout"],"mappings":"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"}

package/dist/components/TimeOff/PolicySettings/PolicySettingsTypes.d.ts

@@ -15,4 +15,7 @@ export interface PolicySettingsPresentationProps {
     onContinue: (data: PolicySettingsFormData) => void;
     onBack: () => void;
     defaultValues?: Partial<PolicySettingsFormData>;
+    mode?: 'create' | 'edit';
+    editingPolicyName?: string;
+    isPending?: boolean;
 }

package/dist/components/TimeOff/PolicyTypeSelector/PolicyTypeSelectorPresentation.js

@@ -1,29 +1,29 @@
-import { jsx as i, jsxs as t } from "react/jsx-runtime";
-import { useId as h, useMemo as b } from "react";
-import { useForm as T, FormProvider as v } from "react-hook-form";
-import { useTranslation as x } from "react-i18next";
-import { Flex as p } from "../../Common/Flex/Flex.js";
+import { jsx as i, jsxs as n } from "react/jsx-runtime";
+import { useId as T, useMemo as b } from "react";
+import { useForm as v, useWatch as x, FormProvider as C } from "react-hook-form";
+import { useTranslation as L } from "react-i18next";
+import { Flex as c } from "../../Common/Flex/Flex.js";
 import "classnames";
 import "../../../shared/constants.js";
-import { ActionsLayout as C } from "../../Common/ActionsLayout/ActionsLayout.js";
-import { Form as L } from "../../Common/Form/Form.js";
-import { useComponentContext as S } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as g } from "../../../i18n/I18n.js";
-import { RadioGroupField as F } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
-function G({
-  onContinue: c,
-  onCancel: m,
-  defaultPolicyType: s,
-  holidayPolicyExists: n = !1
+import { ActionsLayout as g } from "../../Common/ActionsLayout/ActionsLayout.js";
+import { Form as S } from "../../Common/Form/Form.js";
+import { useComponentContext as F } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as H } from "../../../i18n/I18n.js";
+import { RadioGroupField as O } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
+function W({
+  onContinue: p,
+  onCancel: s,
+  defaultPolicyType: m,
+  holidayPolicyExists: r = !1
 }) {
-  g("Company.TimeOff.SelectPolicyType");
-  const { t: e } = x("Company.TimeOff.SelectPolicyType"), { Heading: d, Text: u, Button: r } = S(), l = h(), a = T({
+  H("Company.TimeOff.SelectPolicyType");
+  const { t: e } = L("Company.TimeOff.SelectPolicyType"), { Heading: d, Text: y, Button: l } = F(), a = T(), t = v({
     defaultValues: {
-      policyType: s
+      policyType: m
     }
-  }), y = b(() => {
+  }), u = x({ control: t.control, name: "policyType" }), f = b(() => {
     const o = [];
-    return n || o.push({
+    return r || o.push({
       value: "holiday",
       label: e("holidayLabel"),
       description: e("holidayHint")
@@ -39,30 +39,31 @@ function G({
         description: e("sickLeaveHint")
       }
     ), o;
-  }, [e, n]), f = (o) => {
-    c(o.policyType);
+  }, [e, r]), h = (o) => {
+    p(o.policyType);
   };
-  return /* @__PURE__ */ i(v, { ...a, children: /* @__PURE__ */ i(L, { "aria-labelledby": l, onSubmit: a.handleSubmit(f), children: /* @__PURE__ */ t(p, { flexDirection: "column", gap: 24, children: [
-    /* @__PURE__ */ t(p, { flexDirection: "column", gap: 4, children: [
-      /* @__PURE__ */ i(d, { as: "h2", id: l, children: e("title") }),
-      /* @__PURE__ */ i(u, { variant: "supporting", children: e("policyTypeHint") })
+  return /* @__PURE__ */ i(C, { ...t, children: /* @__PURE__ */ i(S, { "aria-labelledby": a, onSubmit: t.handleSubmit(h), children: /* @__PURE__ */ n(c, { flexDirection: "column", gap: 24, children: [
+    /* @__PURE__ */ n(c, { flexDirection: "column", gap: 4, children: [
+      /* @__PURE__ */ i(d, { as: "h2", id: a, children: e("title") }),
+      /* @__PURE__ */ i(y, { variant: "supporting", children: e("policyTypeHint") })
     ] }),
     /* @__PURE__ */ i(
-      F,
+      O,
       {
         name: "policyType",
         label: e("policyTypeLabel"),
-        options: y,
-        isRequired: !0
+        options: f,
+        isRequired: !0,
+        errorMessage: e("validations.policyTypeRequired")
       }
     ),
-    /* @__PURE__ */ t(C, { children: [
-      /* @__PURE__ */ i(r, { variant: "secondary", onClick: m, children: e("cancelCta") }),
-      /* @__PURE__ */ i(r, { variant: "primary", type: "submit", children: e("continueCta") })
+    /* @__PURE__ */ n(g, { children: [
+      /* @__PURE__ */ i(l, { variant: "secondary", onClick: s, children: e("cancelCta") }),
+      /* @__PURE__ */ i(l, { variant: "primary", type: "submit", isDisabled: !u, children: e("continueCta") })
     ] })
   ] }) }) });
 }
 export {
-  G as PolicyTypeSelectorPresentation
+  W as PolicyTypeSelectorPresentation
 };
 //# sourceMappingURL=PolicyTypeSelectorPresentation.js.map

package/dist/components/TimeOff/PolicyTypeSelector/PolicyTypeSelectorPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PolicyTypeSelectorPresentation.js","sources":["../../../../src/components/TimeOff/PolicyTypeSelector/PolicyTypeSelectorPresentation.tsx"],"sourcesContent":["import { useId, useMemo } from 'react'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport type { PolicyType, PolicyTypeSelectorPresentationProps } from './PolicyTypeSelectorTypes'\nimport { Flex, ActionsLayout, RadioGroupField } from '@/components/Common'\nimport { Form as HtmlForm } from '@/components/Common/Form'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\n\ninterface PolicyTypeSelectorFormData {\n  policyType: PolicyType\n}\n\nexport function PolicyTypeSelectorPresentation({\n  onContinue,\n  onCancel,\n  defaultPolicyType,\n  holidayPolicyExists = false,\n}: PolicyTypeSelectorPresentationProps) {\n  useI18n('Company.TimeOff.SelectPolicyType')\n  const { t } = useTranslation('Company.TimeOff.SelectPolicyType')\n  const { Heading, Text, Button } = useComponentContext()\n  const headingId = useId()\n\n  const formMethods = useForm<PolicyTypeSelectorFormData>({\n    defaultValues: {\n      policyType: defaultPolicyType as PolicyType,\n    },\n  })\n\n  const policyTypeOptions = useMemo(() => {\n    const options: Array<{ value: PolicyType; label: string; description: string }> = []\n    if (!holidayPolicyExists) {\n      options.push({\n        value: 'holiday',\n        label: t('holidayLabel'),\n        description: t('holidayHint'),\n      })\n    }\n    options.push(\n      {\n        value: 'vacation',\n        label: t('timeOffLabel'),\n        description: t('timeOffHint'),\n      },\n      {\n        value: 'sick',\n        label: t('sickLeaveLabel'),\n        description: t('sickLeaveHint'),\n      },\n    )\n    return options\n  }, [t, holidayPolicyExists])\n\n  const handleSubmit = (data: PolicyTypeSelectorFormData) => {\n    onContinue(data.policyType)\n  }\n\n  return (\n    <FormProvider {...formMethods}>\n      <HtmlForm aria-labelledby={headingId} onSubmit={formMethods.handleSubmit(handleSubmit)}>\n        <Flex flexDirection=\"column\" gap={24}>\n          <Flex flexDirection=\"column\" gap={4}>\n            <Heading as=\"h2\" id={headingId}>\n              {t('title')}\n            </Heading>\n            <Text variant=\"supporting\">{t('policyTypeHint')}</Text>\n          </Flex>\n\n          <RadioGroupField<PolicyType>\n            name=\"policyType\"\n            label={t('policyTypeLabel')}\n            options={policyTypeOptions}\n            isRequired\n          />\n\n          <ActionsLayout>\n            <Button variant=\"secondary\" onClick={onCancel}>\n              {t('cancelCta')}\n            </Button>\n            <Button variant=\"primary\" type=\"submit\">\n              {t('continueCta')}\n            </Button>\n          </ActionsLayout>\n        </Flex>\n      </HtmlForm>\n    </FormProvider>\n  )\n}\n"],"names":["PolicyTypeSelectorPresentation","onContinue","onCancel","defaultPolicyType","holidayPolicyExists","useI18n","t","useTranslation","Heading","Text","Button","useComponentContext","headingId","useId","formMethods","useForm","policyTypeOptions","useMemo","options","handleSubmit","data","FormProvider","jsx","HtmlForm","jsxs","Flex","RadioGroupField","ActionsLayout"],"mappings":";;;;;;;;;;;;AAaO,SAASA,EAA+B;AAAA,EAC7C,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC,IAAsB;AACxB,GAAwC;AACtC,EAAAC,EAAQ,kCAAkC;AAC1C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,kCAAkC,GACzD,EAAE,SAAAC,GAAS,MAAAC,GAAM,QAAAC,EAAA,IAAWC,EAAA,GAC5BC,IAAYC,EAAA,GAEZC,IAAcC,EAAoC;AAAA,IACtD,eAAe;AAAA,MACb,YAAYZ;AAAA,IAAA;AAAA,EACd,CACD,GAEKa,IAAoBC,EAAQ,MAAM;AACtC,UAAMC,IAA4E,CAAA;AAClF,WAAKd,KACHc,EAAQ,KAAK;AAAA,MACX,OAAO;AAAA,MACP,OAAOZ,EAAE,cAAc;AAAA,MACvB,aAAaA,EAAE,aAAa;AAAA,IAAA,CAC7B,GAEHY,EAAQ;AAAA,MACN;AAAA,QACE,OAAO;AAAA,QACP,OAAOZ,EAAE,cAAc;AAAA,QACvB,aAAaA,EAAE,aAAa;AAAA,MAAA;AAAA,MAE9B;AAAA,QACE,OAAO;AAAA,QACP,OAAOA,EAAE,gBAAgB;AAAA,QACzB,aAAaA,EAAE,eAAe;AAAA,MAAA;AAAA,IAChC,GAEKY;AAAA,EACT,GAAG,CAACZ,GAAGF,CAAmB,CAAC,GAErBe,IAAe,CAACC,MAAqC;AACzD,IAAAnB,EAAWmB,EAAK,UAAU;AAAA,EAC5B;AAEA,2BACGC,GAAA,EAAc,GAAGP,GAChB,UAAA,gBAAAQ,EAACC,GAAA,EAAS,mBAAiBX,GAAW,UAAUE,EAAY,aAAaK,CAAY,GACnF,UAAA,gBAAAK,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAH,EAACd,KAAQ,IAAG,MAAK,IAAII,GAClB,UAAAN,EAAE,OAAO,GACZ;AAAA,wBACCG,GAAA,EAAK,SAAQ,cAAc,UAAAH,EAAE,gBAAgB,EAAA,CAAE;AAAA,IAAA,GAClD;AAAA,IAEA,gBAAAgB;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOpB,EAAE,iBAAiB;AAAA,QAC1B,SAASU;AAAA,QACT,YAAU;AAAA,MAAA;AAAA,IAAA;AAAA,sBAGXW,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACZ,KAAO,SAAQ,aAAY,SAASR,GAClC,UAAAI,EAAE,WAAW,GAChB;AAAA,MACA,gBAAAgB,EAACZ,KAAO,SAAQ,WAAU,MAAK,UAC5B,UAAAJ,EAAE,aAAa,EAAA,CAClB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,GACF,GACF;AAEJ;"}
+{"version":3,"file":"PolicyTypeSelectorPresentation.js","sources":["../../../../src/components/TimeOff/PolicyTypeSelector/PolicyTypeSelectorPresentation.tsx"],"sourcesContent":["import { useId, useMemo } from 'react'\nimport { FormProvider, useForm, useWatch } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport type { PolicyType, PolicyTypeSelectorPresentationProps } from './PolicyTypeSelectorTypes'\nimport { Flex, ActionsLayout, RadioGroupField } from '@/components/Common'\nimport { Form as HtmlForm } from '@/components/Common/Form'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\n\ninterface PolicyTypeSelectorFormData {\n  policyType: PolicyType\n}\n\nexport function PolicyTypeSelectorPresentation({\n  onContinue,\n  onCancel,\n  defaultPolicyType,\n  holidayPolicyExists = false,\n}: PolicyTypeSelectorPresentationProps) {\n  useI18n('Company.TimeOff.SelectPolicyType')\n  const { t } = useTranslation('Company.TimeOff.SelectPolicyType')\n  const { Heading, Text, Button } = useComponentContext()\n  const headingId = useId()\n\n  const formMethods = useForm<PolicyTypeSelectorFormData>({\n    defaultValues: {\n      policyType: defaultPolicyType as PolicyType,\n    },\n  })\n\n  const selectedPolicyType = useWatch({ control: formMethods.control, name: 'policyType' })\n\n  const policyTypeOptions = useMemo(() => {\n    const options: Array<{ value: PolicyType; label: string; description: string }> = []\n    if (!holidayPolicyExists) {\n      options.push({\n        value: 'holiday',\n        label: t('holidayLabel'),\n        description: t('holidayHint'),\n      })\n    }\n    options.push(\n      {\n        value: 'vacation',\n        label: t('timeOffLabel'),\n        description: t('timeOffHint'),\n      },\n      {\n        value: 'sick',\n        label: t('sickLeaveLabel'),\n        description: t('sickLeaveHint'),\n      },\n    )\n    return options\n  }, [t, holidayPolicyExists])\n\n  const handleSubmit = (data: PolicyTypeSelectorFormData) => {\n    onContinue(data.policyType)\n  }\n\n  return (\n    <FormProvider {...formMethods}>\n      <HtmlForm aria-labelledby={headingId} onSubmit={formMethods.handleSubmit(handleSubmit)}>\n        <Flex flexDirection=\"column\" gap={24}>\n          <Flex flexDirection=\"column\" gap={4}>\n            <Heading as=\"h2\" id={headingId}>\n              {t('title')}\n            </Heading>\n            <Text variant=\"supporting\">{t('policyTypeHint')}</Text>\n          </Flex>\n\n          <RadioGroupField<PolicyType>\n            name=\"policyType\"\n            label={t('policyTypeLabel')}\n            options={policyTypeOptions}\n            isRequired\n            errorMessage={t('validations.policyTypeRequired')}\n          />\n\n          <ActionsLayout>\n            <Button variant=\"secondary\" onClick={onCancel}>\n              {t('cancelCta')}\n            </Button>\n            <Button variant=\"primary\" type=\"submit\" isDisabled={!selectedPolicyType}>\n              {t('continueCta')}\n            </Button>\n          </ActionsLayout>\n        </Flex>\n      </HtmlForm>\n    </FormProvider>\n  )\n}\n"],"names":["PolicyTypeSelectorPresentation","onContinue","onCancel","defaultPolicyType","holidayPolicyExists","useI18n","t","useTranslation","Heading","Text","Button","useComponentContext","headingId","useId","formMethods","useForm","selectedPolicyType","useWatch","policyTypeOptions","useMemo","options","handleSubmit","data","FormProvider","jsx","HtmlForm","jsxs","Flex","RadioGroupField","ActionsLayout"],"mappings":";;;;;;;;;;;;AAaO,SAASA,EAA+B;AAAA,EAC7C,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC,IAAsB;AACxB,GAAwC;AACtC,EAAAC,EAAQ,kCAAkC;AAC1C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,kCAAkC,GACzD,EAAE,SAAAC,GAAS,MAAAC,GAAM,QAAAC,EAAA,IAAWC,EAAA,GAC5BC,IAAYC,EAAA,GAEZC,IAAcC,EAAoC;AAAA,IACtD,eAAe;AAAA,MACb,YAAYZ;AAAA,IAAA;AAAA,EACd,CACD,GAEKa,IAAqBC,EAAS,EAAE,SAASH,EAAY,SAAS,MAAM,cAAc,GAElFI,IAAoBC,EAAQ,MAAM;AACtC,UAAMC,IAA4E,CAAA;AAClF,WAAKhB,KACHgB,EAAQ,KAAK;AAAA,MACX,OAAO;AAAA,MACP,OAAOd,EAAE,cAAc;AAAA,MACvB,aAAaA,EAAE,aAAa;AAAA,IAAA,CAC7B,GAEHc,EAAQ;AAAA,MACN;AAAA,QACE,OAAO;AAAA,QACP,OAAOd,EAAE,cAAc;AAAA,QACvB,aAAaA,EAAE,aAAa;AAAA,MAAA;AAAA,MAE9B;AAAA,QACE,OAAO;AAAA,QACP,OAAOA,EAAE,gBAAgB;AAAA,QACzB,aAAaA,EAAE,eAAe;AAAA,MAAA;AAAA,IAChC,GAEKc;AAAA,EACT,GAAG,CAACd,GAAGF,CAAmB,CAAC,GAErBiB,IAAe,CAACC,MAAqC;AACzD,IAAArB,EAAWqB,EAAK,UAAU;AAAA,EAC5B;AAEA,2BACGC,GAAA,EAAc,GAAGT,GAChB,UAAA,gBAAAU,EAACC,GAAA,EAAS,mBAAiBb,GAAW,UAAUE,EAAY,aAAaO,CAAY,GACnF,UAAA,gBAAAK,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAH,EAAChB,KAAQ,IAAG,MAAK,IAAII,GAClB,UAAAN,EAAE,OAAO,GACZ;AAAA,wBACCG,GAAA,EAAK,SAAQ,cAAc,UAAAH,EAAE,gBAAgB,EAAA,CAAE;AAAA,IAAA,GAClD;AAAA,IAEA,gBAAAkB;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOtB,EAAE,iBAAiB;AAAA,QAC1B,SAASY;AAAA,QACT,YAAU;AAAA,QACV,cAAcZ,EAAE,gCAAgC;AAAA,MAAA;AAAA,IAAA;AAAA,sBAGjDuB,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACd,KAAO,SAAQ,aAAY,SAASR,GAClC,UAAAI,EAAE,WAAW,GAChB;AAAA,MACA,gBAAAkB,EAACd,GAAA,EAAO,SAAQ,WAAU,MAAK,UAAS,YAAY,CAACM,GAClD,UAAAV,EAAE,aAAa,EAAA,CAClB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,GACF,GACF;AAEJ;"}

package/dist/components/TimeOff/TimeOffFlow/TimeOffFlowComponents.d.ts

@@ -10,16 +10,19 @@ export type TimeOffFlowAlert = {
     title: string;
     content?: ReactNode;
 };
+export type AddEmployeesSource = 'policySettings' | 'policyDetailsForm' | 'viewTimeOffPolicyDetail';
 export interface TimeOffFlowContextInterface extends FlowContextInterface {
     companyId: string;
     policyType?: TimeOffPolicyType;
     policyId?: string;
     alerts?: TimeOffFlowAlert[];
+    addEmployeesSource?: AddEmployeesSource;
 }
 export declare function PolicyListContextual(): import("react/jsx-runtime").JSX.Element;
 export declare function SelectPolicyTypeContextual(): import("react/jsx-runtime").JSX.Element;
 export declare function PolicyDetailsFormContextual(): import("react/jsx-runtime").JSX.Element;
 export declare function PolicySettingsContextual(): import("react/jsx-runtime").JSX.Element;
+export declare function EditPolicySettingsContextual(): import("react/jsx-runtime").JSX.Element;
 export declare function AddEmployeesToPolicyContextual(): import("react/jsx-runtime").JSX.Element;
 export declare function TimeOffPolicyDetailContextual(): import("react/jsx-runtime").JSX.Element;
 export declare function HolidaySelectionFormContextual(): import("react/jsx-runtime").JSX.Element;