@gusto/embedded-react-sdk 0.25.0 → 0.26.0

package/dist/components/Payroll/RecoveryCases/RecoveryCasesList/RecoveryCasesList.js

@@ -1,73 +1,104 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { useTranslation as u } from "react-i18next";
-import l from "./RecoveryCasesList.module.scss.js";
-import { BaseComponent as h } from "../../../Base/Base.js";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { useTranslation as l } from "react-i18next";
+import { useRecoveryCasesGet as v } from "@gusto/embedded-api/react-query/recoveryCasesGet";
+import { useRecoveryCaseErrorCode as g } from "../useRecoveryCaseErrorCode.js";
+import R from "./RecoveryCasesList.module.scss.js";
+import { BaseComponent as L } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
-import { useComponentContext as f } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useComponentDictionary as p, useI18n as y } from "../../../../i18n/I18n.js";
-import { DataView as C } from "../../../Common/DataView/DataView.js";
-import { useDataView as v } from "../../../Common/DataView/useDataView.js";
-import { FlexItem as x, Flex as o } from "../../../Common/Flex/Flex.js";
-import "classnames";
-import { recoveryCasesEvents as g } from "../../../../shared/constants.js";
+import { useComponentContext as c } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useComponentDictionary as b, useI18n as u } from "../../../../i18n/I18n.js";
+import { DataView as E } from "../../../Common/DataView/DataView.js";
+import { useDataView as x } from "../../../Common/DataView/useDataView.js";
+import { FlexItem as D, Flex as d } from "../../../Common/Flex/Flex.js";
 import "react";
-function F(n) {
-  return /* @__PURE__ */ e(h, { ...n, children: /* @__PURE__ */ e(R, { ...n, children: n.children }) });
+import { recoveryCasesEvents as P } from "../../../../shared/constants.js";
+import { formatNumberAsCurrency as y } from "../../../../helpers/formattedStrings.js";
+function z(t) {
+  return /* @__PURE__ */ e(L, { ...t, children: /* @__PURE__ */ e(S, { ...t, children: t.children }) });
 }
-function R({ dictionary: n, onEvent: s }) {
-  p("Payroll.RecoveryCasesList", n), y("Payroll.RecoveryCasesList");
-  const { t } = u("Payroll.RecoveryCasesList"), { Heading: c, Text: r, Button: a, Badge: d } = f(), m = v({
-    data: [{ id: "placeholder" }],
-    columns: [
-      {
-        title: t("columns.originalDebitDate"),
-        render: () => /* @__PURE__ */ e(x, { flexGrow: 1, children: /* @__PURE__ */ e(r, { children: "2025-10-11" }) })
+function A(t) {
+  return t === "open" ? "info" : "warning";
+}
+function k({ errorCode: t }) {
+  u("Payroll.RecoveryCasesList");
+  const { t: n } = l("Payroll.RecoveryCasesList"), { Text: s } = c(), { title: r, subtitle: i } = g(t);
+  return !r && !i ? /* @__PURE__ */ e("span", { "aria-label": n("labels.noLatestErrorCodeAriaLabel"), "aria-live": "polite", children: n("labels.noLatestErrorCode") }) : /* @__PURE__ */ m(d, { flexDirection: "column", gap: 4, children: [
+    r && /* @__PURE__ */ e(s, { weight: "semibold", children: r }),
+    i && /* @__PURE__ */ e(s, { children: i })
+  ] });
+}
+function w({ status: t }) {
+  u("Payroll.RecoveryCasesList");
+  const { t: n } = l("Payroll.RecoveryCasesList"), { Badge: s } = c();
+  if (!t)
+    return null;
+  const r = A(t), i = n(`status.${t}`);
+  return /* @__PURE__ */ e(s, { status: r, children: i });
+}
+function O({
+  recoveryCase: t,
+  onEvent: n
+}) {
+  u("Payroll.RecoveryCasesList");
+  const { t: s } = l("Payroll.RecoveryCasesList"), { Button: r } = c();
+  return t.status !== "open" ? null : /* @__PURE__ */ e(
+    r,
+    {
+      variant: "secondary",
+      onClick: () => {
+        n(P.RECOVERY_CASE_RESOLVE, {
+          recoveryCaseId: t.uuid
+        });
       },
+      children: s("cta.resolve")
+    }
+  );
+}
+function S({ companyId: t, dictionary: n, onEvent: s }) {
+  b("Payroll.RecoveryCasesList", n), u("Payroll.RecoveryCasesList");
+  const { t: r } = l("Payroll.RecoveryCasesList"), { Heading: i, Text: a } = c(), { data: C, isFetching: f } = v({
+    companyUuid: t
+  }), p = (C?.recoveryCaseList ?? []).filter((o) => o.status !== "recovered"), h = x({
+    data: p,
+    isFetching: f,
+    columns: [
       {
-        title: t("columns.totalAmount"),
-        render: () => /* @__PURE__ */ e(r, { children: "$30,093.45" })
+        key: "originalDebitDate",
+        title: r("columns.originalDebitDate"),
+        render: (o) => /* @__PURE__ */ e(D, { flexGrow: 1, children: /* @__PURE__ */ e(a, { children: o.originalDebitDate ?? "-" }) })
       },
       {
-        title: t("columns.amountOutstanding"),
-        render: () => /* @__PURE__ */ e(r, { children: "$30,093.45" })
+        key: "totalAmount",
+        title: r("columns.totalAmount"),
+        render: (o) => /* @__PURE__ */ e(a, { children: o.eventTotalAmount ? y(parseFloat(o.eventTotalAmount)) : "-" })
       },
       {
-        title: t("columns.latestErrorCode"),
-        render: () => /* @__PURE__ */ i(o, { flexDirection: "column", gap: 4, children: [
-          /* @__PURE__ */ e(r, { weight: "semibold", children: "R01: Insufficient funds" }),
-          /* @__PURE__ */ e(r, { children: "Ensure sufficient funds to unblock your account" })
-        ] })
+        key: "amountOutstanding",
+        title: r("columns.amountOutstanding"),
+        render: (o) => /* @__PURE__ */ e(a, { children: o.amountOutstanding ? y(parseFloat(o.amountOutstanding)) : "-" })
       },
       {
-        title: t("columns.status"),
-        render: () => /* @__PURE__ */ e(o, { gap: 8, alignItems: "center", children: /* @__PURE__ */ e(d, { status: "info", children: "Open" }) })
+        key: "latestErrorCode",
+        title: r("columns.latestErrorCode"),
+        render: (o) => /* @__PURE__ */ e(k, { errorCode: o.latestErrorCode })
       },
       {
-        title: "",
-        render: () => /* @__PURE__ */ e(o, { justifyContent: "flex-end", alignItems: "center", children: /* @__PURE__ */ e(
-          a,
-          {
-            variant: "secondary",
-            onClick: () => {
-              s(g.RECOVERY_CASE_RESOLVE, {
-                recoveryCaseId: "placeholder-id"
-              });
-            },
-            children: t("cta.resolve")
-          }
-        ) })
+        key: "status",
+        title: r("columns.status"),
+        render: (o) => /* @__PURE__ */ e(w, { status: o.status })
       }
-    ]
+    ],
+    itemMenu: (o) => /* @__PURE__ */ e(O, { recoveryCase: o, onEvent: s })
   });
-  return /* @__PURE__ */ e("div", { className: l.root, children: /* @__PURE__ */ i(o, { flexDirection: "column", gap: 24, children: [
-    /* @__PURE__ */ i("div", { className: l.header, children: [
-      /* @__PURE__ */ e(c, { as: "h2", styledAs: "h3", children: t("title") }),
-      /* @__PURE__ */ e(r, { children: t("description") })
+  return /* @__PURE__ */ e("div", { className: R.root, children: /* @__PURE__ */ m(d, { flexDirection: "column", gap: 20, children: [
+    /* @__PURE__ */ m(d, { flexDirection: "column", gap: 2, children: [
+      /* @__PURE__ */ e(i, { as: "h2", styledAs: "h4", children: r("title") }),
+      /* @__PURE__ */ e(a, { children: r("description") })
     ] }),
-    /* @__PURE__ */ e(C, { ...m, label: t("title") })
+    /* @__PURE__ */ e(E, { ...h, label: r("title") })
   ] }) });
 }
 export {
-  F as RecoveryCasesList
+  z as RecoveryCasesList
 };
 //# sourceMappingURL=RecoveryCasesList.js.map

package/dist/components/Payroll/RecoveryCases/RecoveryCasesList/RecoveryCasesList.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecoveryCasesList.js","sources":["../../../../../src/components/Payroll/RecoveryCases/RecoveryCasesList/RecoveryCasesList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport styles from './RecoveryCasesList.module.scss'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { Flex, FlexItem } from '@/components/Common'\nimport { recoveryCasesEvents } from '@/shared/constants'\n\ninterface RecoveryCasesListProps extends BaseComponentInterface<'Payroll.RecoveryCasesList'> {\n  companyId: string\n  onEvent: BaseComponentInterface['onEvent']\n}\n\nexport function RecoveryCasesList(props: RecoveryCasesListProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nfunction Root({ dictionary, onEvent }: RecoveryCasesListProps) {\n  useComponentDictionary('Payroll.RecoveryCasesList', dictionary)\n  useI18n('Payroll.RecoveryCasesList')\n  const { t } = useTranslation('Payroll.RecoveryCasesList')\n  const { Heading, Text, Button, Badge } = useComponentContext()\n\n  // TODO: Replace with actual recovery cases data from API\n\n  const dataViewProps = useDataView({\n    data: [{ id: 'placeholder' }],\n    columns: [\n      {\n        title: t('columns.originalDebitDate'),\n        render: () => (\n          <FlexItem flexGrow={1}>\n            <Text>2025-10-11</Text>\n          </FlexItem>\n        ),\n      },\n      {\n        title: t('columns.totalAmount'),\n        render: () => <Text>$30,093.45</Text>,\n      },\n      {\n        title: t('columns.amountOutstanding'),\n        render: () => <Text>$30,093.45</Text>,\n      },\n      {\n        title: t('columns.latestErrorCode'),\n        render: () => (\n          <Flex flexDirection=\"column\" gap={4}>\n            <Text weight=\"semibold\">R01: Insufficient funds</Text>\n            <Text>Ensure sufficient funds to unblock your account</Text>\n          </Flex>\n        ),\n      },\n      {\n        title: t('columns.status'),\n        render: () => (\n          <Flex gap={8} alignItems=\"center\">\n            <Badge status=\"info\">Open</Badge>\n          </Flex>\n        ),\n      },\n      {\n        title: '',\n        render: () => (\n          <Flex justifyContent=\"flex-end\" alignItems=\"center\">\n            <Button\n              variant=\"secondary\"\n              onClick={() => {\n                onEvent(recoveryCasesEvents.RECOVERY_CASE_RESOLVE, {\n                  recoveryCaseId: 'placeholder-id',\n                })\n              }}\n            >\n              {t('cta.resolve')}\n            </Button>\n          </Flex>\n        ),\n      },\n    ],\n  })\n\n  return (\n    <div className={styles.root}>\n      <Flex flexDirection=\"column\" gap={24}>\n        <div className={styles.header}>\n          <Heading as=\"h2\" styledAs=\"h3\">\n            {t('title')}\n          </Heading>\n          <Text>{t('description')}</Text>\n        </div>\n\n        <DataView {...dataViewProps} label={t('title')} />\n      </Flex>\n    </div>\n  )\n}\n"],"names":["RecoveryCasesList","props","jsx","BaseComponent","Root","dictionary","onEvent","useComponentDictionary","useI18n","useTranslation","Heading","Text","Button","Badge","useComponentContext","dataViewProps","useDataView","FlexItem","jsxs","Flex","recoveryCasesEvents","styles","DataView"],"mappings":";;;;;;;;;;;;;AAeO,SAASA,EAAkBC,GAA+B;AAC/D,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,SAASG,EAAK,EAAE,YAAAC,GAAY,SAAAC,KAAmC;AAC7D,EAAAC,EAAuB,6BAA6BF,CAAU,GAC9DG,EAAQ,2BAA2B;AACnC,QAAM,EAAE,EAAA,IAAMC,EAAe,2BAA2B,GAClD,EAAE,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,OAAAC,EAAA,IAAUC,EAAA,GAInCC,IAAgBC,EAAY;AAAA,IAChC,MAAM,CAAC,EAAE,IAAI,eAAe;AAAA,IAC5B,SAAS;AAAA,MACP;AAAA,QACE,OAAO,EAAE,2BAA2B;AAAA,QACpC,QAAQ,MACN,gBAAAd,EAACe,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAf,EAACS,GAAA,EAAK,UAAA,aAAA,CAAU,EAAA,CAClB;AAAA,MAAA;AAAA,MAGJ;AAAA,QACE,OAAO,EAAE,qBAAqB;AAAA,QAC9B,QAAQ,MAAM,gBAAAT,EAACS,GAAA,EAAK,UAAA,aAAA,CAAU;AAAA,MAAA;AAAA,MAEhC;AAAA,QACE,OAAO,EAAE,2BAA2B;AAAA,QACpC,QAAQ,MAAM,gBAAAT,EAACS,GAAA,EAAK,UAAA,aAAA,CAAU;AAAA,MAAA;AAAA,MAEhC;AAAA,QACE,OAAO,EAAE,yBAAyB;AAAA,QAClC,QAAQ,MACN,gBAAAO,EAACC,KAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,UAAA,gBAAAjB,EAACS,GAAA,EAAK,QAAO,YAAW,UAAA,2BAAuB;AAAA,UAC/C,gBAAAT,EAACS,KAAK,UAAA,kDAAA,CAA+C;AAAA,QAAA,EAAA,CACvD;AAAA,MAAA;AAAA,MAGJ;AAAA,QACE,OAAO,EAAE,gBAAgB;AAAA,QACzB,QAAQ,MACN,gBAAAT,EAACiB,GAAA,EAAK,KAAK,GAAG,YAAW,UACvB,UAAA,gBAAAjB,EAACW,GAAA,EAAM,QAAO,QAAO,kBAAI,EAAA,CAC3B;AAAA,MAAA;AAAA,MAGJ;AAAA,QACE,OAAO;AAAA,QACP,QAAQ,MACN,gBAAAX,EAACiB,KAAK,gBAAe,YAAW,YAAW,UACzC,UAAA,gBAAAjB;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,MAAM;AACb,cAAAN,EAAQc,EAAoB,uBAAuB;AAAA,gBACjD,gBAAgB;AAAA,cAAA,CACjB;AAAA,YACH;AAAA,YAEC,YAAE,aAAa;AAAA,UAAA;AAAA,QAAA,EAClB,CACF;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF,CACD;AAED,SACE,gBAAAlB,EAAC,OAAA,EAAI,WAAWmB,EAAO,MACrB,4BAACF,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWG,EAAO,QACrB,UAAA;AAAA,MAAA,gBAAAnB,EAACQ,KAAQ,IAAG,MAAK,UAAS,MACvB,UAAA,EAAE,OAAO,GACZ;AAAA,MACA,gBAAAR,EAACS,GAAA,EAAM,UAAA,EAAE,aAAa,EAAA,CAAE;AAAA,IAAA,GAC1B;AAAA,sBAECW,GAAA,EAAU,GAAGP,GAAe,OAAO,EAAE,OAAO,EAAA,CAAG;AAAA,EAAA,EAAA,CAClD,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"RecoveryCasesList.js","sources":["../../../../../src/components/Payroll/RecoveryCases/RecoveryCasesList/RecoveryCasesList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type {\n  RecoveryCase,\n  RecoveryCaseStatus,\n} from '@gusto/embedded-api/models/components/recoverycase'\nimport { useRecoveryCasesGet } from '@gusto/embedded-api/react-query/recoveryCasesGet'\nimport { useRecoveryCaseErrorCode } from '../useRecoveryCaseErrorCode'\nimport styles from './RecoveryCasesList.module.scss'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { Flex, FlexItem } from '@/components/Common'\nimport { recoveryCasesEvents } from '@/shared/constants'\nimport type { BadgeProps } from '@/components/Common/UI/Badge/BadgeTypes'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\n\ninterface RecoveryCasesListProps extends BaseComponentInterface<'Payroll.RecoveryCasesList'> {\n  companyId: string\n  onEvent: BaseComponentInterface['onEvent']\n}\n\nexport function RecoveryCasesList(props: RecoveryCasesListProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nfunction getStatusBadgeStatus(status: RecoveryCaseStatus | undefined): BadgeProps['status'] {\n  if (status === 'open') {\n    return 'info'\n  }\n  return 'warning'\n}\n\nfunction ErrorCodeCell({ errorCode }: { errorCode: string | null | undefined }) {\n  useI18n('Payroll.RecoveryCasesList')\n  const { t } = useTranslation('Payroll.RecoveryCasesList')\n  const { Text } = useComponentContext()\n  const { title, subtitle } = useRecoveryCaseErrorCode(errorCode)\n\n  if (!title && !subtitle) {\n    return (\n      <span aria-label={t('labels.noLatestErrorCodeAriaLabel')} aria-live=\"polite\">\n        {t('labels.noLatestErrorCode')}\n      </span>\n    )\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={4}>\n      {title && <Text weight=\"semibold\">{title}</Text>}\n      {subtitle && <Text>{subtitle}</Text>}\n    </Flex>\n  )\n}\n\nfunction StatusCell({ status }: { status: RecoveryCaseStatus | undefined }) {\n  useI18n('Payroll.RecoveryCasesList')\n  const { t } = useTranslation('Payroll.RecoveryCasesList')\n  const { Badge } = useComponentContext()\n\n  if (!status) {\n    return null\n  }\n\n  const badgeStatus = getStatusBadgeStatus(status)\n  const statusLabel = t(`status.${status}`)\n\n  return <Badge status={badgeStatus}>{statusLabel}</Badge>\n}\n\nfunction ResolveButton({\n  recoveryCase,\n  onEvent,\n}: {\n  recoveryCase: RecoveryCase\n  onEvent: BaseComponentInterface['onEvent']\n}) {\n  useI18n('Payroll.RecoveryCasesList')\n  const { t } = useTranslation('Payroll.RecoveryCasesList')\n  const { Button } = useComponentContext()\n\n  if (recoveryCase.status !== 'open') {\n    return null\n  }\n\n  return (\n    <Button\n      variant=\"secondary\"\n      onClick={() => {\n        onEvent(recoveryCasesEvents.RECOVERY_CASE_RESOLVE, {\n          recoveryCaseId: recoveryCase.uuid,\n        })\n      }}\n    >\n      {t('cta.resolve')}\n    </Button>\n  )\n}\n\nfunction Root({ companyId, dictionary, onEvent }: RecoveryCasesListProps) {\n  useComponentDictionary('Payroll.RecoveryCasesList', dictionary)\n  useI18n('Payroll.RecoveryCasesList')\n  const { t } = useTranslation('Payroll.RecoveryCasesList')\n  const { Heading, Text } = useComponentContext()\n\n  const { data, isFetching } = useRecoveryCasesGet({\n    companyUuid: companyId,\n  })\n\n  const recoveryCases = (data?.recoveryCaseList ?? []).filter(rc => rc.status !== 'recovered')\n\n  const dataViewProps = useDataView({\n    data: recoveryCases,\n    isFetching,\n    columns: [\n      {\n        key: 'originalDebitDate',\n        title: t('columns.originalDebitDate'),\n        render: recoveryCase => (\n          <FlexItem flexGrow={1}>\n            <Text>{recoveryCase.originalDebitDate ?? '-'}</Text>\n          </FlexItem>\n        ),\n      },\n      {\n        key: 'totalAmount',\n        title: t('columns.totalAmount'),\n        render: recoveryCase => (\n          <Text>\n            {recoveryCase.eventTotalAmount\n              ? formatNumberAsCurrency(parseFloat(recoveryCase.eventTotalAmount))\n              : '-'}\n          </Text>\n        ),\n      },\n      {\n        key: 'amountOutstanding',\n        title: t('columns.amountOutstanding'),\n        render: recoveryCase => (\n          <Text>\n            {recoveryCase.amountOutstanding\n              ? formatNumberAsCurrency(parseFloat(recoveryCase.amountOutstanding))\n              : '-'}\n          </Text>\n        ),\n      },\n      {\n        key: 'latestErrorCode',\n        title: t('columns.latestErrorCode'),\n        render: recoveryCase => <ErrorCodeCell errorCode={recoveryCase.latestErrorCode} />,\n      },\n      {\n        key: 'status',\n        title: t('columns.status'),\n        render: recoveryCase => <StatusCell status={recoveryCase.status} />,\n      },\n    ],\n    itemMenu: recoveryCase => <ResolveButton recoveryCase={recoveryCase} onEvent={onEvent} />,\n  })\n\n  return (\n    <div className={styles.root}>\n      <Flex flexDirection=\"column\" gap={20}>\n        <Flex flexDirection=\"column\" gap={2}>\n          <Heading as=\"h2\" styledAs=\"h4\">\n            {t('title')}\n          </Heading>\n          <Text>{t('description')}</Text>\n        </Flex>\n\n        <DataView {...dataViewProps} label={t('title')} />\n      </Flex>\n    </div>\n  )\n}\n"],"names":["RecoveryCasesList","props","jsx","BaseComponent","Root","getStatusBadgeStatus","status","ErrorCodeCell","errorCode","useI18n","t","useTranslation","Text","useComponentContext","title","subtitle","useRecoveryCaseErrorCode","jsxs","Flex","StatusCell","Badge","badgeStatus","statusLabel","ResolveButton","recoveryCase","onEvent","Button","recoveryCasesEvents","companyId","dictionary","useComponentDictionary","Heading","data","isFetching","useRecoveryCasesGet","recoveryCases","rc","dataViewProps","useDataView","FlexItem","formatNumberAsCurrency","styles","DataView"],"mappings":"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"}

package/dist/components/Payroll/RecoveryCases/RecoveryCasesList/RecoveryCasesList.module.scss.js

@@ -1,10 +1,8 @@
-const o = "_root_5swl6_1", e = "_header_5swl6_7", t = {
-  root: o,
-  header: e
+const o = "_root_whd9a_1", t = {
+  root: o
 };
 export {
   t as default,
-  e as header,
   o as root
 };
 //# sourceMappingURL=RecoveryCasesList.module.scss.js.map

package/dist/components/Payroll/RecoveryCases/RecoveryCasesList/RecoveryCasesList.module.scss.js.map

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

package/dist/components/Payroll/RecoveryCases/RecoveryCasesResubmit/RecoveryCasesResubmit.js

@@ -1,46 +1,69 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { useTranslation as u } from "react-i18next";
-import { BaseComponent as R } from "../../../Base/Base.js";
-import { useBase as C } from "../../../Base/useBase.js";
-import { Flex as y } from "../../../Common/Flex/Flex.js";
-import "classnames";
-import { recoveryCasesEvents as s } from "../../../../shared/constants.js";
-import { ActionsLayout as h } from "../../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as c } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { useTranslation as h } from "react-i18next";
+import { useIsMutating as g } from "@tanstack/react-query";
+import { useRecoveryCasesRedebitMutation as _, mutationKeyRecoveryCasesRedebit as M } from "@gusto/embedded-api/react-query/recoveryCasesRedebit";
+import { useRecoveryCasesGet as S } from "@gusto/embedded-api/react-query/recoveryCasesGet";
+import { useRecoveryCaseErrorCode as x } from "../useRecoveryCaseErrorCode.js";
+import { BaseComponent as D } from "../../../Base/Base.js";
+import { useBase as B } from "../../../Base/useBase.js";
+import { Flex as d } from "../../../Common/Flex/Flex.js";
+import { useComponentContext as C } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import "react";
-import { Form as b } from "../../../Common/Form/Form.js";
-import { useComponentDictionary as E, useI18n as a } from "../../../../i18n/I18n.js";
-const m = "gusto-sdk-recovery-cases-resubmit-form";
-function f(o) {
-  return /* @__PURE__ */ e(R, { ...o, children: /* @__PURE__ */ e(p, { ...o, children: o.children }) });
+import { Form as F } from "../../../Common/Form/Form.js";
+import { useFlow as A } from "../../../Flow/useFlow.js";
+import { useComponentDictionary as I, useI18n as O } from "../../../../i18n/I18n.js";
+import { recoveryCasesEvents as y } from "../../../../shared/constants.js";
+const R = "gusto-sdk-recovery-cases-resubmit-form";
+function T(e) {
+  return /* @__PURE__ */ t(D, { ...e, children: /* @__PURE__ */ t(U, { ...e, children: e.children }) });
 }
-function p({ dictionary: o, recoveryCaseId: n }) {
-  E("Payroll.RecoveryCasesResubmit", o), a("Payroll.RecoveryCasesResubmit");
-  const { Heading: r, Text: t } = c(), { onEvent: l, baseSubmitHandler: d } = C();
-  return /* @__PURE__ */ i(y, { flexDirection: "column", gap: 16, children: [
-    /* @__PURE__ */ e(r, { as: "h2", children: "[Placeholder title based on R code]" }),
-    /* @__PURE__ */ e(t, { children: "[Placeholder subtitle based on R code]" }),
-    /* @__PURE__ */ e(t, { children: "[Placeholder body based on R code]" }),
-    /* @__PURE__ */ e(t, { children: "[Placeholder instruction based on R code]" }),
-    /* @__PURE__ */ e(b, { id: m, onSubmit: async () => {
-      await d({}, async () => {
-        l(s.RECOVERY_CASE_RESUBMIT_DONE);
+function U({ dictionary: e, recoveryCaseId: o }) {
+  I("Payroll.RecoveryCasesResubmit", e);
+  const { Heading: r, Text: i } = C(), { onEvent: n, baseSubmitHandler: a } = B(), { companyId: f } = A(), { data: p } = S({
+    companyUuid: f
+  }), v = p?.recoveryCaseList?.find((s) => s.uuid === o), { title: c, subtitle: m, description: u } = x(
+    v?.latestErrorCode ?? void 0
+  ), E = _(), b = async (s) => {
+    s.preventDefault(), await a({}, async () => {
+      await E.mutateAsync({
+        request: {
+          recoveryCaseUuid: o
+        }
+      }), n(y.RECOVERY_CASE_RESUBMIT_DONE, {
+        recoveryCaseId: o
       });
-    }, "aria-hidden": "true" })
+    });
+  };
+  return /* @__PURE__ */ l(d, { flexDirection: "column", gap: 16, children: [
+    c && /* @__PURE__ */ t(r, { as: "h2", children: c }),
+    m && /* @__PURE__ */ t(i, { children: m }),
+    u.length > 0 && u,
+    /* @__PURE__ */ t(F, { id: R, onSubmit: b, "aria-hidden": "true" })
   ] });
 }
-const v = ({ onEvent: o }) => {
-  a("Payroll.RecoveryCasesResubmit");
-  const { t: n } = u("Payroll.RecoveryCasesResubmit"), { Button: r } = c();
-  return /* @__PURE__ */ i(h, { children: [
-    /* @__PURE__ */ e(r, { variant: "secondary", onClick: () => {
-      o(s.RECOVERY_CASE_RESUBMIT_CANCEL);
-    }, children: n("cta.cancel") }),
-    /* @__PURE__ */ e(r, { variant: "primary", type: "submit", form: m, children: n("cta.resubmit") })
+const P = ({ onEvent: e }) => {
+  O("Payroll.RecoveryCasesResubmit");
+  const { t: o } = h("Payroll.RecoveryCasesResubmit"), { Button: r } = C(), n = g({
+    mutationKey: M()
+  }) > 0;
+  return /* @__PURE__ */ l(d, { justifyContent: "flex-end", gap: 12, children: [
+    /* @__PURE__ */ t(r, { variant: "secondary", onClick: () => {
+      e(y.RECOVERY_CASE_RESUBMIT_CANCEL);
+    }, isDisabled: n, children: o("cta.cancel") }),
+    /* @__PURE__ */ t(
+      r,
+      {
+        variant: "primary",
+        type: "submit",
+        form: R,
+        isLoading: n,
+        children: o("cta.resubmit")
+      }
+    )
   ] });
 };
-f.Footer = v;
+T.Footer = P;
 export {
-  f as RecoveryCasesResubmit
+  T as RecoveryCasesResubmit
 };
 //# sourceMappingURL=RecoveryCasesResubmit.js.map

package/dist/components/Payroll/RecoveryCases/RecoveryCasesResubmit/RecoveryCasesResubmit.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecoveryCasesResubmit.js","sources":["../../../../../src/components/Payroll/RecoveryCases/RecoveryCasesResubmit/RecoveryCasesResubmit.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { ActionsLayout, Flex } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { recoveryCasesEvents, type EventType } from '@/shared/constants'\n\nconst RECOVERY_CASES_RESUBMIT_FORM_ID = 'gusto-sdk-recovery-cases-resubmit-form'\n\ninterface RecoveryCasesResubmitProps extends BaseComponentInterface<'Payroll.RecoveryCasesResubmit'> {\n  recoveryCaseId: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport function RecoveryCasesResubmit(props: RecoveryCasesResubmitProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nfunction Root({ dictionary, recoveryCaseId }: RecoveryCasesResubmitProps) {\n  useComponentDictionary('Payroll.RecoveryCasesResubmit', dictionary)\n  useI18n('Payroll.RecoveryCasesResubmit')\n  const { Heading, Text } = useComponentContext()\n  const { onEvent, baseSubmitHandler } = useBase()\n\n  // TODO: Wire up resubmit API call\n  const onSubmit = async () => {\n    // TODO: remove this lint ignore once we wire this up and await the api call\n    // eslint-disable-next-line @typescript-eslint/require-await\n    await baseSubmitHandler({}, async () => {\n      // TODO: Call API resubmit payment endpoint here\n      onEvent(recoveryCasesEvents.RECOVERY_CASE_RESUBMIT_DONE)\n    })\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      <Heading as=\"h2\">[Placeholder title based on R code]</Heading>\n      <Text>[Placeholder subtitle based on R code]</Text>\n      <Text>[Placeholder body based on R code]</Text>\n      <Text>[Placeholder instruction based on R code]</Text>\n      {/*\n        This empty form is used to connect the Footer's submit button to the submission logic\n        via the form attribute. This is semantically incorrect and hidden from assistive tech.\n      */}\n      <Form id={RECOVERY_CASES_RESUBMIT_FORM_ID} onSubmit={onSubmit} aria-hidden=\"true\">\n        {/* Empty form - submission triggered by footer button via form attribute */}\n      </Form>\n    </Flex>\n  )\n}\n\nconst Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {\n  useI18n('Payroll.RecoveryCasesResubmit')\n  const { t } = useTranslation('Payroll.RecoveryCasesResubmit')\n  const { Button } = useComponentContext()\n\n  const handleCancel = () => {\n    onEvent(recoveryCasesEvents.RECOVERY_CASE_RESUBMIT_CANCEL)\n  }\n\n  return (\n    <ActionsLayout>\n      <Button variant=\"secondary\" onClick={handleCancel}>\n        {t('cta.cancel')}\n      </Button>\n      <Button variant=\"primary\" type=\"submit\" form={RECOVERY_CASES_RESUBMIT_FORM_ID}>\n        {t('cta.resubmit')}\n      </Button>\n    </ActionsLayout>\n  )\n}\n\nRecoveryCasesResubmit.Footer = Footer\n"],"names":["RECOVERY_CASES_RESUBMIT_FORM_ID","RecoveryCasesResubmit","props","jsx","BaseComponent","Root","dictionary","recoveryCaseId","useComponentDictionary","useI18n","Heading","Text","useComponentContext","onEvent","baseSubmitHandler","useBase","jsxs","Flex","Form","recoveryCasesEvents","Footer","t","useTranslation","Button","ActionsLayout"],"mappings":";;;;;;;;;;;;AASA,MAAMA,IAAkC;AAOjC,SAASC,EAAsBC,GAAmC;AACvE,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,SAASG,EAAK,EAAE,YAAAC,GAAY,gBAAAC,KAA8C;AACxE,EAAAC,EAAuB,iCAAiCF,CAAU,GAClEG,EAAQ,+BAA+B;AACvC,QAAM,EAAE,SAAAC,GAAS,MAAAC,EAAA,IAASC,EAAA,GACpB,EAAE,SAAAC,GAAS,mBAAAC,EAAA,IAAsBC,EAAA;AAYvC,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAd,EAACO,GAAA,EAAQ,IAAG,MAAK,UAAA,uCAAmC;AAAA,IACpD,gBAAAP,EAACQ,KAAK,UAAA,yCAAA,CAAsC;AAAA,IAC5C,gBAAAR,EAACQ,KAAK,UAAA,qCAAA,CAAkC;AAAA,IACxC,gBAAAR,EAACQ,KAAK,UAAA,4CAAA,CAAyC;AAAA,sBAK9CO,GAAA,EAAK,IAAIlB,GAAiC,UAnB9B,YAAY;AAG3B,YAAMc,EAAkB,CAAA,GAAI,YAAY;AAEtC,QAAAD,EAAQM,EAAoB,2BAA2B;AAAA,MACzD,CAAC;AAAA,IACH,GAYmE,eAAY,OAAA,CAE3E;AAAA,EAAA,GACF;AAEJ;AAEA,MAAMC,IAAS,CAAC,EAAE,SAAAP,QAA4D;AAC5E,EAAAJ,EAAQ,+BAA+B;AACvC,QAAM,EAAE,GAAAY,EAAA,IAAMC,EAAe,+BAA+B,GACtD,EAAE,QAAAC,EAAA,IAAWX,EAAA;AAMnB,2BACGY,GAAA,EACC,UAAA;AAAA,IAAA,gBAAArB,EAACoB,KAAO,SAAQ,aAAY,SANX,MAAM;AACzB,MAAAV,EAAQM,EAAoB,6BAA6B;AAAA,IAC3D,GAKO,UAAAE,EAAE,YAAY,GACjB;AAAA,IACA,gBAAAlB,EAACoB,GAAA,EAAO,SAAQ,WAAU,MAAK,UAAS,MAAMvB,GAC3C,UAAAqB,EAAE,cAAc,EAAA,CACnB;AAAA,EAAA,GACF;AAEJ;AAEApB,EAAsB,SAASmB;"}
+{"version":3,"file":"RecoveryCasesResubmit.js","sources":["../../../../../src/components/Payroll/RecoveryCases/RecoveryCasesResubmit/RecoveryCasesResubmit.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useIsMutating } from '@tanstack/react-query'\nimport {\n  useRecoveryCasesRedebitMutation,\n  mutationKeyRecoveryCasesRedebit,\n} from '@gusto/embedded-api/react-query/recoveryCasesRedebit'\nimport { useRecoveryCasesGet } from '@gusto/embedded-api/react-query/recoveryCasesGet'\nimport type { RecoveryCasesContextInterface } from '../RecoveryCasesComponents'\nimport { useRecoveryCaseErrorCode } from '../useRecoveryCaseErrorCode'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { Flex } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { recoveryCasesEvents, type EventType } from '@/shared/constants'\n\nconst RECOVERY_CASES_RESUBMIT_FORM_ID = 'gusto-sdk-recovery-cases-resubmit-form'\n\ninterface RecoveryCasesResubmitProps extends BaseComponentInterface<'Payroll.RecoveryCasesResubmit'> {\n  recoveryCaseId: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport function RecoveryCasesResubmit(props: RecoveryCasesResubmitProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nfunction Root({ dictionary, recoveryCaseId }: RecoveryCasesResubmitProps) {\n  useComponentDictionary('Payroll.RecoveryCasesResubmit', dictionary)\n  const { Heading, Text } = useComponentContext()\n  const { onEvent, baseSubmitHandler } = useBase()\n  const { companyId } = useFlow<RecoveryCasesContextInterface>()\n\n  const { data: recoveryCasesData } = useRecoveryCasesGet({\n    companyUuid: companyId,\n  })\n\n  const recoveryCase = recoveryCasesData?.recoveryCaseList?.find(rc => rc.uuid === recoveryCaseId)\n\n  const { title, subtitle, description } = useRecoveryCaseErrorCode(\n    recoveryCase?.latestErrorCode ?? undefined,\n  )\n\n  const redebitMutation = useRecoveryCasesRedebitMutation()\n\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    await baseSubmitHandler({}, async () => {\n      await redebitMutation.mutateAsync({\n        request: {\n          recoveryCaseUuid: recoveryCaseId,\n        },\n      })\n      onEvent(recoveryCasesEvents.RECOVERY_CASE_RESUBMIT_DONE, {\n        recoveryCaseId,\n      })\n    })\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {title && <Heading as=\"h2\">{title}</Heading>}\n      {subtitle && <Text>{subtitle}</Text>}\n      {description.length > 0 && description}\n      {/*\n        This empty form is used to connect the Footer's submit button to the submission logic\n        via the form attribute. This is semantically incorrect and hidden from assistive tech.\n      */}\n      <Form id={RECOVERY_CASES_RESUBMIT_FORM_ID} onSubmit={onSubmit} aria-hidden=\"true\">\n        {/* Empty form - submission triggered by footer button via form attribute */}\n      </Form>\n    </Flex>\n  )\n}\n\nconst Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {\n  useI18n('Payroll.RecoveryCasesResubmit')\n  const { t } = useTranslation('Payroll.RecoveryCasesResubmit')\n  const { Button } = useComponentContext()\n\n  const isMutating = useIsMutating({\n    mutationKey: mutationKeyRecoveryCasesRedebit(),\n  })\n  const isPending = isMutating > 0\n\n  const handleCancel = () => {\n    onEvent(recoveryCasesEvents.RECOVERY_CASE_RESUBMIT_CANCEL)\n  }\n\n  return (\n    <Flex justifyContent=\"flex-end\" gap={12}>\n      <Button variant=\"secondary\" onClick={handleCancel} isDisabled={isPending}>\n        {t('cta.cancel')}\n      </Button>\n      <Button\n        variant=\"primary\"\n        type=\"submit\"\n        form={RECOVERY_CASES_RESUBMIT_FORM_ID}\n        isLoading={isPending}\n      >\n        {t('cta.resubmit')}\n      </Button>\n    </Flex>\n  )\n}\n\nRecoveryCasesResubmit.Footer = Footer\n"],"names":["RECOVERY_CASES_RESUBMIT_FORM_ID","RecoveryCasesResubmit","props","jsx","BaseComponent","Root","dictionary","recoveryCaseId","useComponentDictionary","Heading","Text","useComponentContext","onEvent","baseSubmitHandler","useBase","companyId","useFlow","recoveryCasesData","useRecoveryCasesGet","recoveryCase","rc","title","subtitle","description","useRecoveryCaseErrorCode","redebitMutation","useRecoveryCasesRedebitMutation","onSubmit","e","recoveryCasesEvents","jsxs","Flex","Form","Footer","useI18n","t","useTranslation","Button","isPending","useIsMutating","mutationKeyRecoveryCasesRedebit"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAMA,IAAkC;AAOjC,SAASC,EAAsBC,GAAmC;AACvE,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,SAASG,EAAK,EAAE,YAAAC,GAAY,gBAAAC,KAA8C;AACxE,EAAAC,EAAuB,iCAAiCF,CAAU;AAClE,QAAM,EAAE,SAAAG,GAAS,MAAAC,EAAA,IAASC,EAAA,GACpB,EAAE,SAAAC,GAAS,mBAAAC,EAAA,IAAsBC,EAAA,GACjC,EAAE,WAAAC,EAAA,IAAcC,EAAA,GAEhB,EAAE,MAAMC,EAAA,IAAsBC,EAAoB;AAAA,IACtD,aAAaH;AAAA,EAAA,CACd,GAEKI,IAAeF,GAAmB,kBAAkB,KAAK,CAAAG,MAAMA,EAAG,SAASb,CAAc,GAEzF,EAAE,OAAAc,GAAO,UAAAC,GAAU,aAAAC,EAAA,IAAgBC;AAAA,IACvCL,GAAc,mBAAmB;AAAA,EAAA,GAG7BM,IAAkBC,EAAA,GAElBC,IAAW,OAAOC,MAAwC;AAC9D,IAAAA,EAAE,eAAA,GACF,MAAMf,EAAkB,CAAA,GAAI,YAAY;AACtC,YAAMY,EAAgB,YAAY;AAAA,QAChC,SAAS;AAAA,UACP,kBAAkBlB;AAAA,QAAA;AAAA,MACpB,CACD,GACDK,EAAQiB,EAAoB,6BAA6B;AAAA,QACvD,gBAAAtB;AAAA,MAAA,CACD;AAAA,IACH,CAAC;AAAA,EACH;AAEA,SACE,gBAAAuB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,IAAAV,KAAS,gBAAAlB,EAACM,GAAA,EAAQ,IAAG,MAAM,UAAAY,GAAM;AAAA,IACjCC,KAAY,gBAAAnB,EAACO,GAAA,EAAM,UAAAY,EAAA,CAAS;AAAA,IAC5BC,EAAY,SAAS,KAAKA;AAAA,sBAK1BS,GAAA,EAAK,IAAIhC,GAAiC,UAAA2B,GAAoB,eAAY,OAAA,CAE3E;AAAA,EAAA,GACF;AAEJ;AAEA,MAAMM,IAAS,CAAC,EAAE,SAAArB,QAA4D;AAC5E,EAAAsB,EAAQ,+BAA+B;AACvC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,+BAA+B,GACtD,EAAE,QAAAC,EAAA,IAAW1B,EAAA,GAKb2B,IAHaC,EAAc;AAAA,IAC/B,aAAaC,EAAA;AAAA,EAAgC,CAC9C,IAC8B;AAM/B,SACE,gBAAAV,EAACC,GAAA,EAAK,gBAAe,YAAW,KAAK,IACnC,UAAA;AAAA,IAAA,gBAAA5B,EAACkC,GAAA,EAAO,SAAQ,aAAY,SANX,MAAM;AACzB,MAAAzB,EAAQiB,EAAoB,6BAA6B;AAAA,IAC3D,GAIuD,YAAYS,GAC5D,UAAAH,EAAE,YAAY,EAAA,CACjB;AAAA,IACA,gBAAAhC;AAAA,MAACkC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,MAAMrC;AAAA,QACN,WAAWsC;AAAA,QAEV,YAAE,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACF;AAEJ;AAEArC,EAAsB,SAASgC;"}

package/dist/components/Payroll/RecoveryCases/useRecoveryCaseErrorCode.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface RecoveryCaseErrorCodeContent {
+    title: string | null;
+    subtitle: string | null;
+    description: ReactNode[];
+}
+export declare function useRecoveryCaseErrorCode(errorCode: string | null | undefined): RecoveryCaseErrorCodeContent;

package/dist/components/Payroll/RecoveryCases/useRecoveryCaseErrorCode.js

@@ -0,0 +1,65 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { useTranslation as a, Trans as c } from "react-i18next";
+import p from "./RecoveryCaseErrorCode.module.scss.js";
+import { Flex as C } from "../../Common/Flex/Flex.js";
+import { useComponentContext as R } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "react";
+import { useI18n as f } from "../../../i18n/I18n.js";
+function h(s) {
+  switch (s) {
+    case "R01":
+      return "R01";
+    case "R02":
+      return "R02";
+    case "R16":
+      return "R16";
+    case "R29":
+      return "R29";
+    default:
+      return "bankError";
+  }
+}
+function g(s) {
+  f("Payroll.RecoveryCasesResubmit");
+  const { t: r } = a("Payroll.RecoveryCasesResubmit"), { Text: o } = R();
+  if (!s)
+    return {
+      title: null,
+      subtitle: null,
+      description: []
+    };
+  const t = h(s), n = {
+    medium: /* @__PURE__ */ e(o, { as: "span", weight: "medium" })
+  }, i = [
+    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(c, { t: r, i18nKey: `errorCodes.${t}.body`, components: n }) }, "body")
+  ];
+  if (t === "R29") {
+    const u = Object.values(r("errorCodes.R29.achCodes", { returnObjects: !0 }));
+    i.push(
+      /* @__PURE__ */ d(C, { flexDirection: "column", gap: 16, children: [
+        /* @__PURE__ */ e(o, { children: r("errorCodes.R29.listDescription") }),
+        /* @__PURE__ */ e("ul", { className: p.compactList, children: u.map((l, m) => /* @__PURE__ */ e("li", { children: l }, m)) }),
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(c, { t: r, i18nKey: "errorCodes.R29.instruction", components: n }) })
+      ] }, "instruction")
+    );
+  } else
+    r(`errorCodes.${t}.instruction`) && i.push(
+      /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+        c,
+        {
+          t: r,
+          i18nKey: `errorCodes.${t}.instruction`,
+          components: n
+        }
+      ) }, "instruction")
+    );
+  return {
+    title: r(`errorCodes.${t}.title`),
+    subtitle: r(`errorCodes.${t}.subtitle`),
+    description: i
+  };
+}
+export {
+  g as useRecoveryCaseErrorCode
+};
+//# sourceMappingURL=useRecoveryCaseErrorCode.js.map

package/dist/components/Payroll/RecoveryCases/useRecoveryCaseErrorCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRecoveryCaseErrorCode.js","sources":["../../../../src/components/Payroll/RecoveryCases/useRecoveryCaseErrorCode.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { Trans, useTranslation } from 'react-i18next'\nimport styles from './RecoveryCaseErrorCode.module.scss'\nimport { Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\n\nexport interface RecoveryCaseErrorCodeContent {\n  title: string | null\n  subtitle: string | null\n  description: ReactNode[]\n}\n\ntype ErrorCodeKey = 'R01' | 'R02' | 'R16' | 'R29' | 'bankError'\n\nfunction getErrorCodeKey(errorCode: string | null | undefined): ErrorCodeKey {\n  switch (errorCode) {\n    case 'R01':\n      return 'R01'\n    case 'R02':\n      return 'R02'\n    case 'R16':\n      return 'R16'\n    case 'R29':\n      return 'R29'\n    default:\n      return 'bankError'\n  }\n}\n\nexport function useRecoveryCaseErrorCode(\n  errorCode: string | null | undefined,\n): RecoveryCaseErrorCodeContent {\n  useI18n('Payroll.RecoveryCasesResubmit')\n  const { t } = useTranslation('Payroll.RecoveryCasesResubmit')\n  const { Text } = useComponentContext()\n\n  if (!errorCode) {\n    return {\n      title: null,\n      subtitle: null,\n      description: [],\n    }\n  }\n\n  const errorCodeKey = getErrorCodeKey(errorCode)\n\n  const transComponents = {\n    medium: <Text as=\"span\" weight=\"medium\" />,\n  }\n\n  const description: ReactNode[] = [\n    <Text key=\"body\">\n      <Trans t={t} i18nKey={`errorCodes.${errorCodeKey}.body`} components={transComponents} />\n    </Text>,\n  ]\n\n  if (errorCodeKey === 'R29') {\n    const achCodes = Object.values(t('errorCodes.R29.achCodes', { returnObjects: true }))\n    description.push(\n      <Flex key=\"instruction\" flexDirection=\"column\" gap={16}>\n        <Text>{t('errorCodes.R29.listDescription')}</Text>\n        <ul className={styles.compactList}>\n          {achCodes.map((code, index) => (\n            <li key={index}>{code}</li>\n          ))}\n        </ul>\n        <Text>\n          <Trans t={t} i18nKey=\"errorCodes.R29.instruction\" components={transComponents} />\n        </Text>\n      </Flex>,\n    )\n  } else {\n    const instruction = t(`errorCodes.${errorCodeKey}.instruction`)\n    if (instruction) {\n      description.push(\n        <Text key=\"instruction\">\n          <Trans\n            t={t}\n            i18nKey={`errorCodes.${errorCodeKey}.instruction`}\n            components={transComponents}\n          />\n        </Text>,\n      )\n    }\n  }\n\n  return {\n    title: t(`errorCodes.${errorCodeKey}.title`),\n    subtitle: t(`errorCodes.${errorCodeKey}.subtitle`),\n    description,\n  }\n}\n"],"names":["getErrorCodeKey","errorCode","useRecoveryCaseErrorCode","useI18n","t","useTranslation","Text","useComponentContext","errorCodeKey","transComponents","jsx","description","Trans","achCodes","jsxs","Flex","styles","code","index"],"mappings":";;;;;;;AAeA,SAASA,EAAgBC,GAAoD;AAC3E,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EAAA;AAEb;AAEO,SAASC,EACdD,GAC8B;AAC9B,EAAAE,EAAQ,+BAA+B;AACvC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,+BAA+B,GACtD,EAAE,MAAAC,EAAA,IAASC,EAAA;AAEjB,MAAI,CAACN;AACH,WAAO;AAAA,MACL,OAAO;AAAA,MACP,UAAU;AAAA,MACV,aAAa,CAAA;AAAA,IAAC;AAIlB,QAAMO,IAAeR,EAAgBC,CAAS,GAExCQ,IAAkB;AAAA,IACtB,QAAQ,gBAAAC,EAACJ,GAAA,EAAK,IAAG,QAAO,QAAO,SAAA,CAAS;AAAA,EAAA,GAGpCK,IAA2B;AAAA,IAC/B,gBAAAD,EAACJ,GAAA,EACC,UAAA,gBAAAI,EAACE,GAAA,EAAM,GAAAR,GAAM,SAAS,cAAcI,CAAY,SAAS,YAAYC,EAAA,CAAiB,EAAA,GAD9E,MAEV;AAAA,EAAA;AAGF,MAAID,MAAiB,OAAO;AAC1B,UAAMK,IAAW,OAAO,OAAOT,EAAE,2BAA2B,EAAE,eAAe,GAAA,CAAM,CAAC;AACpF,IAAAO,EAAY;AAAA,MACV,gBAAAG,EAACC,GAAA,EAAuB,eAAc,UAAS,KAAK,IAClD,UAAA;AAAA,QAAA,gBAAAL,EAACJ,GAAA,EAAM,UAAAF,EAAE,gCAAgC,EAAA,CAAE;AAAA,QAC3C,gBAAAM,EAAC,MAAA,EAAG,WAAWM,EAAO,aACnB,UAAAH,EAAS,IAAI,CAACI,GAAMC,MACnB,gBAAAR,EAAC,MAAA,EAAgB,UAAAO,KAARC,CAAa,CACvB,GACH;AAAA,QACA,gBAAAR,EAACJ,KACC,UAAA,gBAAAI,EAACE,GAAA,EAAM,GAAAR,GAAM,SAAQ,8BAA6B,YAAYK,EAAA,CAAiB,EAAA,CACjF;AAAA,MAAA,EAAA,GATQ,aAUV;AAAA,IAAA;AAAA,EAEJ;AAEE,IADoBL,EAAE,cAAcI,CAAY,cAAc,KAE5DG,EAAY;AAAA,wBACTL,GAAA,EACC,UAAA,gBAAAI;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,GAAAR;AAAA,UACA,SAAS,cAAcI,CAAY;AAAA,UACnC,YAAYC;AAAA,QAAA;AAAA,MAAA,KAJN,aAMV;AAAA,IAAA;AAKN,SAAO;AAAA,IACL,OAAOL,EAAE,cAAcI,CAAY,QAAQ;AAAA,IAC3C,UAAUJ,EAAE,cAAcI,CAAY,WAAW;AAAA,IACjD,aAAAG;AAAA,EAAA;AAEJ;"}

package/dist/components/Payroll/UNSTABLE_PayrollHooks/PayrollConfiguration/PayrollConfigurationContext.d.ts

@@ -1,4 +1,4 @@
-import { PayrollShow } from '@gusto/embedded-api/models/components/payrollshow';
+import { PayrollShow } from '@gusto/embedded-api/models/components/payroll';
 export interface PayrollConfigurationContextValue {
     payrollData: {
         payrollShow?: PayrollShow | null;

package/dist/components/Payroll/UNSTABLE_PayrollHooks/PayrollConfiguration/PayrollConfigurationContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollConfigurationContext.js","sources":["../../../../../src/components/Payroll/UNSTABLE_PayrollHooks/PayrollConfiguration/PayrollConfigurationContext.ts"],"sourcesContent":["import { createContext } from 'react'\nimport type { PayrollShow } from '@gusto/embedded-api/models/components/payrollshow'\n\nexport interface PayrollConfigurationContextValue {\n  payrollData: {\n    payrollShow?: PayrollShow | null\n  }\n}\n\nexport const PayrollConfigurationContext = createContext<\n  PayrollConfigurationContextValue | undefined\n>(undefined)\n"],"names":["PayrollConfigurationContext","createContext"],"mappings":";AASO,MAAMA,IAA8BC,EAEzC,MAAS;"}
+{"version":3,"file":"PayrollConfigurationContext.js","sources":["../../../../../src/components/Payroll/UNSTABLE_PayrollHooks/PayrollConfiguration/PayrollConfigurationContext.ts"],"sourcesContent":["import { createContext } from 'react'\nimport type { PayrollShow } from '@gusto/embedded-api/models/components/payroll'\n\nexport interface PayrollConfigurationContextValue {\n  payrollData: {\n    payrollShow?: PayrollShow | null\n  }\n}\n\nexport const PayrollConfigurationContext = createContext<\n  PayrollConfigurationContextValue | undefined\n>(undefined)\n"],"names":["PayrollConfigurationContext","createContext"],"mappings":";AASO,MAAMA,IAA8BC,EAEzC,MAAS;"}