@gusto/embedded-react-sdk 0.46.0 → 0.46.3

package/dist/components/Employee/HomeAddress/management/HomeAddressView.js

@@ -1,39 +1,40 @@
-import { jsxs as r, jsx as e, Fragment as V } from "react/jsx-runtime";
-import { useState as I, useRef as Re, useLayoutEffect as ke, useMemo as A } from "react";
-import { useTranslation as O, Trans as w } from "react-i18next";
-import { useWatch as Te } from "react-hook-form";
-import { getPendingFutureHomeAddress as Pe, formatPendingHomeAddressLine as z } from "./getPendingFutureHomeAddress.js";
-import Ie from "../../../../assets/icons/house.svg.js";
-import Ae from "../../../../assets/icons/pencil.svg.js";
-import we from "../../../../assets/icons/trashcan.svg.js";
+import { jsxs as r, jsx as e, Fragment as z } from "react/jsx-runtime";
+import { useState as I, useRef as Te, useLayoutEffect as Pe, useMemo as A } from "react";
+import { useTranslation as Z, Trans as L } from "react-i18next";
+import { useWatch as Ie } from "react-hook-form";
+import { getPendingFutureHomeAddress as Ae, formatPendingHomeAddressLine as j } from "./getPendingFutureHomeAddress.js";
+import Le from "../../../../assets/icons/house.svg.js";
+import we from "../../../../assets/icons/pencil.svg.js";
+import Fe from "../../../../assets/icons/trashcan.svg.js";
 import { HomeAddressErrorCodes as a } from "../../Profile/shared/useHomeAddressForm/homeAddressSchema.js";
-import { SDKFormProvider as Z } from "../../../../partner-hook-utils/form/SDKFormProvider.js";
-import { Flex as s, FlexItem as Le } from "../../../Common/Flex/Flex.js";
-import { Grid as j } from "../../../Common/Grid/Grid.js";
-import { EmptyData as Fe } from "../../../Common/EmptyData/EmptyData.js";
-import { useComponentContext as Y } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { formatDateLongWithYear as E, normalizeToDate as Ue, addDays as We } from "../../../../helpers/dateFormatting.js";
-import { formatStreetForDisplay as K, getCityStateZip as $ } from "../../../../helpers/formattedStrings.js";
-import { HamburgerMenu as He } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
-import { useDataView as Be } from "../../../Common/DataView/useDataView.js";
-import { DataView as Qe } from "../../../Common/DataView/DataView.js";
-function q({
+import { SDKFormProvider as K } from "../../../../partner-hook-utils/form/SDKFormProvider.js";
+import { Flex as s, FlexItem as He } from "../../../Common/Flex/Flex.js";
+import { Grid as $ } from "../../../Common/Grid/Grid.js";
+import { EmptyData as Ue } from "../../../Common/EmptyData/EmptyData.js";
+import { ActionsLayout as We } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { useComponentContext as N } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { formatDateLongWithYear as x, normalizeToDate as Be, addDays as Ve } from "../../../../helpers/dateFormatting.js";
+import { formatStreetForDisplay as q, getCityStateZip as Y } from "../../../../helpers/formattedStrings.js";
+import { HamburgerMenu as Qe } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useDataView as Oe } from "../../../Common/DataView/useDataView.js";
+import { DataView as ze } from "../../../Common/DataView/DataView.js";
+function G({
   CourtesyWithholding: u,
   formHook: m,
-  tHa: c
+  tHa: d
 }) {
-  const y = Y(), { control: L } = m.form.hookFormInternals.formMethods, f = Te({ control: L, name: "courtesyWithholding" });
-  return /* @__PURE__ */ r(V, { children: [
+  const y = N(), { control: w } = m.form.hookFormInternals.formMethods, f = Ie({ control: w, name: "courtesyWithholding" });
+  return /* @__PURE__ */ r(z, { children: [
     /* @__PURE__ */ e(
       u,
       {
-        label: c("courtesyWithholdingLabel"),
-        description: /* @__PURE__ */ r(V, { children: [
-          c("courtesyWithholdingDescription"),
+        label: d("courtesyWithholdingLabel"),
+        description: /* @__PURE__ */ r(z, { children: [
+          d("courtesyWithholdingDescription"),
           /* @__PURE__ */ e(
-            w,
+            L,
             {
-              t: c,
+              t: d,
               i18nKey: "learnMoreCta",
               components: {
                 LearnMoreLink: /* @__PURE__ */ e(y.Link, {})
@@ -43,111 +44,113 @@ function q({
         ] })
       }
     ),
-    f ? /* @__PURE__ */ e(y.Alert, { label: c("withholdingTitle"), status: "warning", children: /* @__PURE__ */ e(w, { t: c, i18nKey: "withholdingNote" }) }) : null
+    f ? /* @__PURE__ */ e(y.Alert, { label: d("withholdingTitle"), status: "warning", children: /* @__PURE__ */ e(L, { t: d, i18nKey: "withholdingNote" }) }) : null
   ] });
 }
-function at({
+function ct({
   editHomeAddressForm: u,
   createHomeAddressForm: m,
-  employeeHomeAddresses: c,
+  employeeHomeAddresses: d,
   employeeDisplayName: y,
-  editingHomeAddressUuid: L,
+  editingHomeAddressUuid: w,
   onEditAddressTargetChange: f,
-  onSaved: G,
-  onConfirmDelete: N,
-  isDeletePending: _ = !1
+  onSaved: _,
+  onConfirmDelete: J,
+  onBack: X,
+  isDeletePending: ee = !1
 }) {
-  const { t } = O("Employee.HomeAddress.Management"), { t: o } = O("Employee.HomeAddress"), n = Y(), [l, C] = I(null), [h, S] = I(null), R = Re(null), [k, F] = I(void 0);
-  ke(() => {
+  const { t } = Z("Employee.HomeAddress.Management"), { t: o } = Z("Employee.HomeAddress"), n = N(), [l, C] = I(null), [h, S] = I(null), k = Te(null), [M, F] = I(void 0);
+  Pe(() => {
     if (!l) {
       F(void 0);
       return;
     }
     const i = () => {
-      F(R.current ?? void 0);
+      F(k.current ?? void 0);
     };
-    if (i(), R.current == null) {
-      const d = requestAnimationFrame(i);
+    if (i(), k.current == null) {
+      const c = requestAnimationFrame(i);
       return () => {
-        cancelAnimationFrame(d);
+        cancelAnimationFrame(c);
       };
     }
   }, [l]);
   const {
-    data: { homeAddress: g },
+    data: { homeAddress: p },
+    status: H,
+    actions: { onSubmit: te },
+    form: ie
+  } = u, g = d, {
     status: U,
-    actions: { onSubmit: J },
-    form: X
-  } = u, p = c, {
-    status: W,
-    actions: { onSubmit: ee },
-    form: te
+    actions: { onSubmit: ne },
+    form: oe
   } = m, {
     Fields: {
-      Street1: ie,
-      Street2: ne,
-      City: oe,
-      State: re,
-      Zip: ae,
-      CourtesyWithholding: se
+      Street1: re,
+      Street2: ae,
+      City: se,
+      State: le,
+      Zip: de,
+      CourtesyWithholding: ce,
+      EffectiveDate: W
     }
-  } = X, {
+  } = ie, {
     Fields: {
-      Street1: le,
-      Street2: de,
-      City: ce,
-      State: ue,
-      Zip: me,
-      CourtesyWithholding: fe,
-      EffectiveDate: H
+      Street1: ue,
+      Street2: me,
+      City: fe,
+      State: he,
+      Zip: pe,
+      CourtesyWithholding: ge,
+      EffectiveDate: B
     }
-  } = te, B = {
+  } = oe, V = {
     [a.REQUIRED]: o("validations.zip"),
     [a.INVALID_ZIP]: o("validations.zip")
-  }, he = {
+  }, Q = {
     [a.REQUIRED]: t("form.startDateRequired")
-  }, M = A(
-    () => Pe(p),
-    [p]
-  ), Q = A(() => {
-    if (!(!h || !p))
-      return p.find((i) => i.uuid === h);
-  }, [h, p]), ge = A(() => {
+  }, b = A(
+    () => Ae(g),
+    [g]
+  ), O = A(() => {
+    if (!(!h || !g))
+      return g.find((i) => i.uuid === h);
+  }, [h, g]), ve = A(() => {
     const i = y.trim();
     return i ? `${i}'s` : t("changePendingPossessiveFallback");
-  }, [y, t]), b = [...p ?? []].sort((i, d) => {
-    const v = i.effectiveDate?.toString() ?? "", D = d.effectiveDate?.toString() ?? "";
+  }, [y, t]), E = [...g ?? []].sort((i, c) => {
+    const v = i.effectiveDate?.toString() ?? "", D = c.effectiveDate?.toString() ?? "";
     return !v && !D ? 0 : v ? D ? v.localeCompare(D) : -1 : 1;
-  }), pe = [...b.filter((i) => i.active !== !0)].reverse(), ve = (i) => {
-    const d = b.findIndex((Ee) => Ee.uuid === i.uuid);
-    if (d === -1 || d >= b.length - 1) return "—";
-    const v = b[d + 1]?.effectiveDate;
+  }), De = [...E.filter((i) => i.active !== !0)].reverse(), ye = (i) => {
+    const c = E.findIndex((Re) => Re.uuid === i.uuid);
+    if (c === -1 || c >= E.length - 1) return "—";
+    const v = E[c + 1]?.effectiveDate;
     if (!v) return "—";
-    const D = Ue(v.toString());
+    const D = Be(v.toString());
     if (!D) return "—";
-    const P = We(D, -1), Me = P.getFullYear(), be = String(P.getMonth() + 1).padStart(2, "0"), xe = String(P.getDate()).padStart(2, "0");
-    return E(`${Me}-${be}-${xe}`);
-  }, De = Be({
-    data: pe,
+    const P = Ve(D, -1), Ee = P.getFullYear(), xe = String(P.getMonth() + 1).padStart(2, "0"), ke = String(P.getDate()).padStart(2, "0");
+    return x(`${Ee}-${xe}-${ke}`);
+  }, Ce = Oe({
+    data: De,
     columns: [
       {
         title: t("columns.address"),
         render: (i) => /* @__PURE__ */ r(s, { flexDirection: "column", gap: 0, children: [
-          /* @__PURE__ */ e(n.Text, { weight: "medium", children: K(i) }),
-          /* @__PURE__ */ e(n.Text, { variant: "supporting", children: $(i) })
+          /* @__PURE__ */ e(n.Text, { weight: "medium", children: q(i) }),
+          /* @__PURE__ */ e(n.Text, { variant: "supporting", children: Y(i) })
         ] })
       },
       {
         title: t("columns.startDate"),
-        render: (i) => i.effectiveDate ? E(i.effectiveDate.toString()) : "—"
+        render: (i) => i.effectiveDate ? x(i.effectiveDate.toString()) : "—"
       },
       {
         title: t("columns.endDate"),
-        render: (i) => ve(i)
+        render: (i) => ye(i)
       }
     ],
     itemMenu: (i) => /* @__PURE__ */ e(
-      He,
+      Qe,
       {
         triggerLabel: t("rowMenuAriaLabel"),
         items: [
@@ -156,48 +159,48 @@ function at({
             onClick: () => {
               f(i.uuid), C("edit");
             },
-            icon: /* @__PURE__ */ e(Ae, { "aria-hidden": !0 })
+            icon: /* @__PURE__ */ e(we, { "aria-hidden": !0 })
           },
           {
             label: t("rowDelete"),
             onClick: () => {
               i.active !== !0 && S(i.uuid);
             },
-            icon: /* @__PURE__ */ e(we, { "aria-hidden": !0 })
+            icon: /* @__PURE__ */ e(Fe, { "aria-hidden": !0 })
           }
         ]
       }
     ),
     emptyState: () => /* @__PURE__ */ e("div", { "data-testid": "home-address-history-empty", children: /* @__PURE__ */ e(
-      Fe,
+      Ue,
       {
-        icon: /* @__PURE__ */ e(Ie, { "aria-hidden": !0 }),
+        icon: /* @__PURE__ */ e(Le, { "aria-hidden": !0 }),
         title: t("historyEmptyTitle"),
         description: t("historyEmptyDescription")
       }
     ) })
-  }), T = () => {
-    C(null), f(void 0);
-  }, ye = async () => {
+  }), R = () => {
+    C(null), f(void 0), u.form.hookFormInternals.formMethods.reset(void 0, {
+      keepDirtyValues: !1
+    }), m.form.hookFormInternals.formMethods.reset(void 0, {
+      keepDirtyValues: !1
+    });
+  }, Se = async () => {
     if (!h)
       return;
-    await N(h) && S(null);
-  }, x = l === "edit" ? {
-    onSubmit: J,
-    formMethods: u.form.hookFormInternals.formMethods,
-    isPending: U.isPending
+    await J(h) && S(null);
+  }, T = l === "edit" ? {
+    onSubmit: te,
+    isPending: H.isPending
   } : l === "create" ? {
-    onSubmit: ee,
-    formMethods: m.form.hookFormInternals.formMethods,
-    isPending: W.isPending
-  } : null, Ce = async () => {
-    if (!x)
+    onSubmit: ne,
+    isPending: U.isPending
+  } : null, Me = async () => {
+    if (!T)
       return;
-    const i = await x.onSubmit();
-    i && G(i);
-    const d = Object.keys(x.formMethods.formState.errors).length > 0;
-    (i || !d) && T();
-  }, Se = x?.isPending ?? !1;
+    const i = await T.onSubmit();
+    i && (_(i), R());
+  }, be = T?.isPending ?? !1;
   return /* @__PURE__ */ r(s, { flexDirection: "column", gap: 24, children: [
     /* @__PURE__ */ r(s, { flexDirection: "column", gap: 4, alignItems: "flex-start", children: [
       /* @__PURE__ */ e(n.Heading, { as: "h1", styledAs: "h2", children: t("title") }),
@@ -210,14 +213,14 @@ function at({
           n.BoxHeader,
           {
             title: t("currentSectionTitle"),
-            action: g ? /* @__PURE__ */ e(
+            action: p ? /* @__PURE__ */ e(
               n.Button,
               {
                 variant: "secondary",
                 onClick: () => {
                   f(void 0), C("edit");
                 },
-                isLoading: U.isPending,
+                isLoading: H.isPending,
                 children: t("editCta")
               }
             ) : void 0
@@ -230,24 +233,24 @@ function at({
             onClick: () => {
               f(void 0), C("create");
             },
-            isLoading: W.isPending,
+            isLoading: U.isPending,
             children: t("changeCta")
           }
         ),
         children: /* @__PURE__ */ r(s, { flexDirection: "column", gap: 16, children: [
-          g ? /* @__PURE__ */ r(s, { flexDirection: "column", gap: 4, children: [
-            /* @__PURE__ */ r(Le, { children: [
-              /* @__PURE__ */ e(n.Text, { weight: "medium", children: K(g) }),
-              /* @__PURE__ */ e(n.Text, { weight: "medium", children: $(g) })
+          p ? /* @__PURE__ */ r(s, { flexDirection: "column", gap: 4, children: [
+            /* @__PURE__ */ r(He, { children: [
+              /* @__PURE__ */ e(n.Text, { weight: "medium", children: q(p) }),
+              /* @__PURE__ */ e(n.Text, { weight: "medium", children: Y(p) })
             ] }),
-            g.effectiveDate ? /* @__PURE__ */ e(n.Text, { variant: "supporting", children: t("currentSince", {
-              date: E(g.effectiveDate.toString())
+            p.effectiveDate ? /* @__PURE__ */ e(n.Text, { variant: "supporting", children: t("currentSince", {
+              date: x(p.effectiveDate.toString())
             }) }) : null
           ] }) : /* @__PURE__ */ e(n.Text, { children: o("formTitle") }),
-          M ? /* @__PURE__ */ e(n.Alert, { status: "warning", label: t("changePendingTitle"), children: /* @__PURE__ */ e(n.Text, { variant: "supporting", children: t("changePendingDescription", {
-            possessiveLabel: ge,
-            newAddress: z(M),
-            effectiveDate: M.effectiveDate ? E(M.effectiveDate.toString()) : "—",
+          b ? /* @__PURE__ */ e(n.Alert, { status: "warning", label: t("changePendingTitle"), children: /* @__PURE__ */ e(n.Text, { variant: "supporting", children: t("changePendingDescription", {
+            possessiveLabel: ve,
+            newAddress: j(b),
+            effectiveDate: b.effectiveDate ? x(b.effectiveDate.toString()) : "—",
             interpolation: { escapeValue: !1 }
           }) }) }) : null
         ] })
@@ -255,22 +258,23 @@ function at({
     ),
     /* @__PURE__ */ r(s, { flexDirection: "column", gap: 12, children: [
       /* @__PURE__ */ e(n.Heading, { as: "h2", styledAs: "h4", children: t("historySectionTitle") }),
-      /* @__PURE__ */ e(Qe, { label: t("historySectionTitle"), ...De })
+      /* @__PURE__ */ e(ze, { label: t("historySectionTitle"), ...Ce })
     ] }),
+    /* @__PURE__ */ e(We, { children: /* @__PURE__ */ e(n.Button, { variant: "secondary", onClick: X, children: t("backCta") }) }),
     /* @__PURE__ */ e(
       n.Modal,
       {
         isOpen: l !== null,
-        onClose: T,
+        onClose: R,
         shouldCloseOnBackdropClick: !1,
-        containerRef: R,
+        containerRef: k,
         footer: /* @__PURE__ */ r(s, { flexDirection: "row", gap: 12, justifyContent: "flex-end", children: [
           /* @__PURE__ */ e(
             n.Button,
             {
               variant: "secondary",
               onClick: () => {
-                T();
+                R();
               },
               children: t("cancelCta")
             }
@@ -280,9 +284,9 @@ function at({
             {
               variant: "primary",
               onClick: () => {
-                Ce();
+                Me();
               },
-              isLoading: Se,
+              isLoading: be,
               children: t("submitCta")
             }
           )
@@ -292,8 +296,8 @@ function at({
             /* @__PURE__ */ e(n.Heading, { as: "h2", children: t(l === "edit" ? "editModalTitle" : "createModalTitle") }),
             /* @__PURE__ */ e(n.Text, { variant: "supporting", children: t(l === "edit" ? "editModalDescription" : "createModalDescription") })
           ] }),
-          l === "edit" ? /* @__PURE__ */ e(Z, { formHookResult: u, children: /* @__PURE__ */ r(
-            j,
+          l === "edit" ? /* @__PURE__ */ e(K, { formHookResult: u, children: /* @__PURE__ */ r(
+            $,
             {
               gridTemplateColumns: {
                 base: "1fr",
@@ -301,8 +305,17 @@ function at({
               },
               gap: 20,
               children: [
+                W ? /* @__PURE__ */ e(
+                  W,
+                  {
+                    label: t("columns.startDate"),
+                    description: t("startDateHelper"),
+                    validationMessages: Q,
+                    portalContainer: M
+                  }
+                ) : null,
                 /* @__PURE__ */ e(
-                  ie,
+                  re,
                   {
                     label: o("street1"),
                     validationMessages: {
@@ -311,7 +324,7 @@ function at({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  ne,
+                  ae,
                   {
                     label: o("street2"),
                     validationMessages: {
@@ -320,7 +333,7 @@ function at({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  oe,
+                  se,
                   {
                     label: o("city"),
                     validationMessages: {
@@ -329,20 +342,20 @@ function at({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  re,
+                  le,
                   {
                     label: o("state"),
                     validationMessages: {
                       [a.REQUIRED]: o("validations.state")
                     },
-                    portalContainer: k
+                    portalContainer: M
                   }
                 ),
-                /* @__PURE__ */ e(ae, { label: o("zip"), validationMessages: B }),
+                /* @__PURE__ */ e(de, { label: o("zip"), validationMessages: V }),
                 /* @__PURE__ */ e(
-                  q,
+                  G,
                   {
-                    CourtesyWithholding: se,
+                    CourtesyWithholding: ce,
                     formHook: u,
                     tHa: o
                   }
@@ -350,8 +363,8 @@ function at({
               ]
             }
           ) }) : null,
-          l === "create" ? /* @__PURE__ */ e(Z, { formHookResult: m, children: /* @__PURE__ */ r(
-            j,
+          l === "create" ? /* @__PURE__ */ e(K, { formHookResult: m, children: /* @__PURE__ */ r(
+            $,
             {
               gridTemplateColumns: {
                 base: "1fr",
@@ -359,17 +372,17 @@ function at({
               },
               gap: 20,
               children: [
-                H ? /* @__PURE__ */ e(
-                  H,
+                B ? /* @__PURE__ */ e(
+                  B,
                   {
                     label: t("columns.startDate"),
                     description: t("startDateHelper"),
-                    validationMessages: he,
-                    portalContainer: k
+                    validationMessages: Q,
+                    portalContainer: M
                   }
                 ) : null,
                 /* @__PURE__ */ e(
-                  le,
+                  ue,
                   {
                     label: o("street1"),
                     validationMessages: {
@@ -378,7 +391,7 @@ function at({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  de,
+                  me,
                   {
                     label: o("street2"),
                     validationMessages: {
@@ -387,7 +400,7 @@ function at({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  ce,
+                  fe,
                   {
                     label: o("city"),
                     validationMessages: {
@@ -396,20 +409,20 @@ function at({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  ue,
+                  he,
                   {
                     label: o("state"),
                     validationMessages: {
                       [a.REQUIRED]: o("validations.state")
                     },
-                    portalContainer: k
+                    portalContainer: M
                   }
                 ),
-                /* @__PURE__ */ e(me, { label: o("zip"), validationMessages: B }),
+                /* @__PURE__ */ e(pe, { label: o("zip"), validationMessages: V }),
                 /* @__PURE__ */ e(
-                  q,
+                  G,
                   {
-                    CourtesyWithholding: fe,
+                    CourtesyWithholding: ge,
                     formHook: m,
                     tHa: o
                   }
@@ -444,22 +457,22 @@ function at({
             {
               variant: "error",
               onClick: () => {
-                ye();
+                Se();
               },
-              isLoading: _,
+              isLoading: ee,
               children: t("deleteModalConfirmCta")
             }
           )
         ] }),
         children: /* @__PURE__ */ r(s, { flexDirection: "column", gap: 16, children: [
           /* @__PURE__ */ e(n.Heading, { as: "h2", children: t("deleteModalTitle") }),
-          /* @__PURE__ */ e(n.Text, { variant: "supporting", children: Q ? /* @__PURE__ */ e(
-            w,
+          /* @__PURE__ */ e(n.Text, { variant: "supporting", children: O ? /* @__PURE__ */ e(
+            L,
             {
               t,
               i18nKey: "deleteModalDescription",
               values: {
-                address: z(Q)
+                address: j(O)
               },
               components: {
                 strong: /* @__PURE__ */ e(n.Text, { weight: "medium", as: "span" })
@@ -473,6 +486,6 @@ function at({
   ] });
 }
 export {
-  at as HomeAddressView
+  ct as HomeAddressView
 };
 //# sourceMappingURL=HomeAddressView.js.map