@zeniai/web-components 3.16.67 → 3.16.68

package/dist/AccountReconDetailsDrawerPage-CWTYmygA.js

@@ -0,0 +1,686 @@
+import { g as ge, aD as ye, j as t, F as je, u as Se } from "./vendor-.pnpm-DtFedGku.js";
+import { useState as g, useCallback as A, useRef as Ce, useEffect as S } from "react";
+import o from "@emotion/styled";
+import { zeniDate as X, toReconciliationAccountSource as $e, uploadAccountStatementIntoDocumentAI as we } from "@zeniai/client-epic-state";
+import { aN as ke, a as ve, aO as be, aP as De, S as a, K as Pe, L as ee, E as te, b as Te, aL as Ee, b9 as Ie, fS as Be, l0 as G, dZ as ne, p as c, a5 as Ae, eP as oe, gn as ae, aw as _e, C as se, ba as Le } from "./index-SJFqjz6R.js";
+import { a as Fe, S as Me, b as Oe, d as Ve } from "./AccountRow-BJJ8boGd.js";
+const h = {
+  containerPaddingLeft: a.sp4,
+  containerPaddingRight: a.sp4,
+  navBarHeight: a.sp10,
+  navBarPaddingRight: a.sp4,
+  navBarPaddingLeft: a.sp4,
+  balanceContainerWidth: 114,
+  sourceContainerWidth: 400
+}, Ue = o.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+  overflow-x: hidden;
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  gap: ${a.sp5};
+`, Ne = o.div`
+  display: flex;
+  flex: 0 0 auto;
+  width: ${a.sp4};
+`, Re = o.div`
+  min-height: ${h.navBarHeight};
+  position: sticky;
+  background-color: ${(e) => e.theme.colors.grey4};
+  border-bottom: 1px solid transparent;
+  z-index: 2;
+  top: ${a.sp0};
+  width: 100%;
+`, We = o(Te)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${a.sp4};
+  height: ${a.sp4};
+  min-height: ${a.sp3};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+  flex: 0 0 auto;
+`, Ye = o.div`
+  padding-left: ${h.containerPaddingLeft};
+  padding-right: ${h.containerPaddingRight};
+`, ze = o.div`
+  position: relative;
+  min-height: 62px;
+`, He = o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding-right: ${h.navBarPaddingRight};
+  padding-left: ${h.navBarPaddingLeft};
+  height: 100%;
+`, qe = o(Pe)`
+  display: flex;
+  flex: 1 1 0;
+  justify-content: center;
+  flex-direction: column;
+`, Ke = o(ee)`
+  display: flex;
+  color: ${(e) => e.theme.colors.primary};
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+`, re = o(te)`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+`, Ze = o.div`
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  align-items: center;
+`, Ge = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${a.sp5};
+`, Je = o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: ${a.sp2};
+  padding: ${a.sp3};
+  background-color: ${(e) => e.theme.colors.background};
+  border-radius: ${a.sp2};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+`, Qe = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  min-width: ${h.balanceContainerWidth}px;
+`, Y = o(te)`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  align-items: center;
+  justify-content: flex-end;
+`, Xe = o(c)`
+  color: ${(e) => e.theme.colors.primary};
+  text-align: left;
+`, et = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-width: ${h.balanceContainerWidth}px;
+`, tt = o(c)`
+  display: flex;
+  color: ${(e) => e.theme.colors.primary};
+  align-items: center;
+  justify-content: flex-start;
+`, nt = o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: ${a.sp1};
+`, ot = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-width: ${h.balanceContainerWidth}px;
+`, at = o(c)`
+  display: flex;
+  color: ${(e) => e.theme.colors.grey3};
+  align-items: center;
+  justify-content: flex-start;
+`, st = o(c)`
+  height: ${a.sp4};
+  border-radius: ${a.sp1};
+  color: ${(e) => e.textColor.hex()};
+  text-align: right;
+`, rt = o(c)`
+  border-radius: ${a.sp1};
+  padding: ${a.sp0} ${a.sp1};
+  justify-content: center;
+  text-align: center;
+  color: ${(e) => e.textColor.hex()};
+  background-color: ${(e) => e.bgColor.hex()};
+`, it = o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${a.sp1};
+`, ct = o(c)`
+  display: flex;
+  color: ${(e) => e.theme.colors.primary};
+  align-items: center;
+  justify-content: flex-end;
+`, lt = o(_e)`
+  margin-left: 2px;
+  width: 12px;
+  height: 12px;
+  color: ${(e) => e.theme.colors.primary};
+`, dt = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  min-width: ${h.sourceContainerWidth}px;
+  gap: ${a.sp2};
+`, ut = o(ee)`
+  display: flex;
+  color: ${(e) => e.theme.colors.primary};
+  align-items: center;
+  justify-content: flex-end;
+  padding-bottom: ${a.sp2};
+`, pt = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: ${a.sp2};
+  width: 100%;
+`, b = o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${a.sp2};
+  width: 100%;
+`, _ = o(c)`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  align-items: center;
+  justify-content: flex-end;
+`, L = o(c)`
+  display: flex;
+  color: ${(e) => e.theme.colors.primary};
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${a.sp1};
+`, y = o(c)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${a.sp1};
+`, z = o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${a.sp1};
+`, ht = o(Le)`
+  width: ${a.sp3};
+  height: ${a.sp3};
+  color: ${se.success};
+`, ie = o(oe)`
+  width: ${a.sp3};
+  height: ${a.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, ce = o(ae)`
+  width: ${a.sp3};
+  height: ${a.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, mt = o(oe)`
+  margin-top: 2px;
+  width: ${a.sp3};
+  height: ${a.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, xt = o(ae)`
+  margin-top: 2px;
+  width: ${a.sp3};
+  height: ${a.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, ft = o(c)`
+  display: flex;
+  color: ${se.success};
+  align-items: center;
+  justify-content: flex-end;
+`, gt = o(c)`
+  text-align: right;
+  color: ${(e) => e.status === "connected" ? e.theme.colors.success : e.status === "reconnect" ? e.theme.colors.important : e.theme.colors.link};
+  cursor: pointer;
+  text-decoration: underline;
+`, {
+  common: u,
+  dateFormat: J,
+  expenseAutomation: { accountRecon: s }
+} = ve.getLocalizedStrings(), yt = (e, n) => `${e}.${n}`, jt = "accountReconDrawerDetailsPage", le = "accountReconDrawerDetailsSection";
+function _t({
+  accountReconciliation: e,
+  plaidConnectionDetails: n,
+  monthYearPeriod: l,
+  openFilePicker: d,
+  filesEndPoint: f,
+  authParams: C,
+  onDismissClick: $,
+  onFetchLinkTokenClick: D,
+  onEstablishConnectionClick: P,
+  onSelectSourceType: F,
+  onDeleteFile: T,
+  onEditFileName: M,
+  onStatementUploadSuccess: O,
+  onUploadWindowOpenedOnce: V
+}) {
+  const m = ge({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: Q(e),
+    resetOptions: {
+      keepDirtyValues: !0,
+      keepErrors: !0
+    },
+    values: Q(e)
+  }), w = m.handleSubmit(() => {
+  }), [p, k] = g(
+    void 0
+  ), E = n.link_account_no_microdeposit, v = n.update_account, r = p === "update_account" ? v : E, [x, U] = g(r.linkToken ?? null), [j, i] = g(!1), [I, N] = g(!1), [R, W] = g(void 0), [de, H] = g(void 0), ue = A(() => {
+    k("link_account_no_microdeposit");
+  }, []), pe = A(() => {
+    k("update_account"), D(
+      "update_account",
+      e.paymentAccountId
+    );
+  }, [e.paymentAccountId]), he = {
+    onOkClick: () => {
+      R != null && (T(R), W(void 0)), H(void 0), N(!1);
+    },
+    onCancelClick: () => {
+      W(void 0), N(!1);
+    }
+  }, q = Ce(p);
+  S(() => {
+    q.current = p;
+  }, [p]);
+  const me = A(
+    (B) => {
+      P(
+        B,
+        e.accountReconEntity.account.accountId,
+        q.current
+      ), k(void 0), i(!1);
+    },
+    [
+      P,
+      e.accountReconEntity.account.accountId
+    ]
+  ), xe = A((B, fe) => {
+    B != null && console.log("Plaid Connection Error", B, fe), k(void 0), i(!1);
+  }, []), { open: K, ready: Z } = ye({
+    token: x,
+    onSuccess: me,
+    onExit: xe
+  });
+  return S(() => {
+    (X((/* @__PURE__ */ new Date()).toISOString()).isAfter(r.expiration) || r.linkToken == null) && r.fetchStatus.fetchState === "Not-Started" && D("link_account_no_microdeposit");
+  }, [r.fetchStatus.fetchState]), S(() => {
+    !j && p != null && r.linkToken === x && r.fetchStatus.fetchState === "Completed" && Z && i(!0);
+  }, [
+    Z,
+    x,
+    r.fetchStatus.fetchState,
+    r.linkToken,
+    p,
+    j
+  ]), S(() => {
+    r.fetchStatus.fetchState === "Completed" && r.linkToken != null && r.linkToken !== x && U(r.linkToken);
+  }, [r.fetchStatus.fetchState, r.linkToken, x]), S(() => {
+    j && K();
+  }, [j, K]), /* @__PURE__ */ t.jsxs(Ue, { children: [
+    /* @__PURE__ */ t.jsx(Re, { children: /* @__PURE__ */ t.jsx(ze, { children: /* @__PURE__ */ t.jsxs(He, { children: [
+      /* @__PURE__ */ t.jsx(Ne, {}),
+      /* @__PURE__ */ t.jsxs(qe, { children: [
+        /* @__PURE__ */ t.jsx(Ke, { children: e.accountReconEntity.account.accountName }),
+        /* @__PURE__ */ t.jsx(re, { children: /* @__PURE__ */ t.jsx(bt, { monthYearPeriod: l }) })
+      ] }),
+      /* @__PURE__ */ t.jsx(Ze, { children: /* @__PURE__ */ t.jsx(We, { onClick: $ }) })
+    ] }) }) }),
+    /* @__PURE__ */ t.jsxs(Ye, { children: [
+      /* @__PURE__ */ t.jsx(je, { ...m, children: /* @__PURE__ */ t.jsx(
+        "form",
+        {
+          style: { width: "100%" },
+          id: jt,
+          onSubmit: w,
+          children: /* @__PURE__ */ t.jsx(
+            St,
+            {
+              monthYearPeriod: l,
+              accountReconciliation: e,
+              filesEndPoint: f,
+              openFilePicker: d,
+              authParams: C,
+              onConnectClick: ue,
+              onReconnectClick: pe,
+              onSelectSourceType: F,
+              onDeleteFile: T,
+              onEditFileName: M,
+              onStatementUploadSuccess: O,
+              onUploadWindowOpenedOnce: V,
+              showConfirmationPopup: I,
+              setShowConfirmationPopup: N,
+              deleteFileId: R,
+              setDeleteFileId: W,
+              uploadErrorMessage: de,
+              setUploadErrorMessage: H
+            }
+          )
+        }
+      ) }),
+      I === !0 || e.statementDeleteStatus.fetchState === "In-Progress" ? /* @__PURE__ */ t.jsx(
+        ke,
+        {
+          titleComponent: /* @__PURE__ */ t.jsx(De, { children: s.reconciliation.drawer.deleteConfirmation.heading }),
+          descriptionComponent: /* @__PURE__ */ t.jsx(be, { children: s.reconciliation.drawer.deleteConfirmation.description }),
+          isLoading: e.statementDeleteStatus.fetchState === "In-Progress",
+          primaryButtonText: u.confirm,
+          secondaryButtonText: u.cancel,
+          action: he
+        }
+      ) : null
+    ] })
+  ] });
+}
+const St = ({
+  monthYearPeriod: e,
+  accountReconciliation: n,
+  filesEndPoint: l,
+  authParams: d,
+  openFilePicker: f,
+  onConnectClick: C,
+  onReconnectClick: $,
+  setDeleteFileId: D,
+  setShowConfirmationPopup: P,
+  onEditFileName: F,
+  onSelectSourceType: T,
+  onStatementUploadSuccess: M,
+  onUploadWindowOpenedOnce: O,
+  uploadErrorMessage: V,
+  setUploadErrorMessage: m
+}) => {
+  const [w, p] = g(!1), E = (n.localData?.accountSource ?? "plaid") === "plaid" ? n.accountReconEntity.reconciliationId != null ? n.accountReconEntity.reconUpdatedAt : n.accountReconEntity.accountUpdatedAt : n.accountReconEntity.reconUpdatedAt, v = [];
+  v.push({
+    label: s.reconciliation.menu.bankConnection,
+    value: "plaid"
+  }), v.push({
+    label: s.reconciliation.menu.statement,
+    value: "bank_statement"
+  });
+  const r = n.localData?.accountSource, x = n.accountConnectionStatus === "connected" || n.connectionInProgress === !0 ? "plaid" : n.accountReconEntity.statementStatus?.code === "uploaded" || n.statementParseInProgress === !0 || w ? "bank_statement" : void 0;
+  S(() => {
+    n.accountReconEntity.statementStatus.code === "uploaded" && (n.accountReconEntity.statementDataStatus?.code === "validation_failed" || n.accountReconEntity.statementDataStatus?.code === "parsing_failed" || n.accountReconEntity.statementDataStatus?.code === "processing_failed") && m(
+      Fe(
+        n.accountReconEntity.statementDataStatus?.code,
+        "drawer",
+        n.accountReconEntity.errorMessage?.errorShort
+      )
+    );
+  }, [
+    n.accountReconEntity.statementStatus.code,
+    n.accountReconEntity.statementDataStatus?.code,
+    n.accountReconEntity.errorMessage?.errorShort,
+    m
+  ]);
+  const U = ["reconciled", "in_progress", "reconciled_via_qbo"], j = n.accountReconEntity.reconciliationStatus != null && U.includes(
+    n.accountReconEntity.reconciliationStatus.code
+  );
+  return /* @__PURE__ */ t.jsxs(Ge, { children: [
+    /* @__PURE__ */ t.jsxs(Je, { children: [
+      /* @__PURE__ */ t.jsxs(Qe, { children: [
+        /* @__PURE__ */ t.jsx(Y, { children: s.reconciliation.headers.bankBalance }),
+        /* @__PURE__ */ t.jsx(Xe, { children: /* @__PURE__ */ t.jsx(
+          Me,
+          {
+            bankBalance: n.accountReconEntity.balance,
+            bankConnection: n.accountConnectionStatus,
+            isLoading: !1,
+            fromDrawer: !0,
+            accountId: n.accountReconEntity.account.accountId,
+            statementStatus: n.accountReconEntity.statementStatus.code,
+            onStatementAddClicked: () => {
+            },
+            setIsHovering: () => {
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ t.jsxs(et, { children: [
+        /* @__PURE__ */ t.jsx(Y, { children: s.reconciliation.headers.clearedBalance }),
+        /* @__PURE__ */ t.jsx(tt, { children: /* @__PURE__ */ t.jsx(
+          Oe,
+          {
+            clearedBalance: n.accountReconEntity.clearedBalance,
+            isLoading: !1
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ t.jsxs(ot, { children: [
+        /* @__PURE__ */ t.jsx(Y, { children: s.reconciliation.headers.variance }),
+        /* @__PURE__ */ t.jsx(at, { children: /* @__PURE__ */ t.jsx(
+          kt,
+          {
+            variance: n.accountReconEntity.variance,
+            variancePercentage: n.accountReconEntity.variancePercentage
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ t.jsxs(dt, { children: [
+      /* @__PURE__ */ t.jsxs(ut, { children: [
+        " ",
+        s.reconciliation.drawer.source,
+        " "
+      ] }),
+      /* @__PURE__ */ t.jsxs(pt, { children: [
+        /* @__PURE__ */ t.jsxs(b, { children: [
+          /* @__PURE__ */ t.jsx(_, { children: s.reconciliation.drawer.labels.type }),
+          /* @__PURE__ */ t.jsx(L, { children: x != null ? /* @__PURE__ */ t.jsx(y, { children: x === "plaid" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            /* @__PURE__ */ t.jsx(ie, {}),
+            s.reconciliation.menu.bankConnection
+          ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            /* @__PURE__ */ t.jsx(ce, {}),
+            s.reconciliation.menu.statement
+          ] }) }) : /* @__PURE__ */ t.jsx(Ee, { controller: !0, children: /* @__PURE__ */ t.jsx(
+            Ie,
+            {
+              moreIconType: "custom",
+              customIcon: /* @__PURE__ */ t.jsx(Ct, { selectedSourceType: r }),
+              options: v,
+              customStyleConfig: {
+                option: () => ({
+                  ".option-container": {
+                    justifyContent: "flex-start"
+                  }
+                }),
+                valueContainer: () => ({
+                  height: a.sp5,
+                  width: "180px"
+                })
+              },
+              menuPlacement: "bottom",
+              onOptionSelection: (i) => {
+                T($e(i));
+              },
+              valueToIcon: (i) => i === "plaid" ? /* @__PURE__ */ t.jsx(mt, {}) : i === "bank_statement" ? /* @__PURE__ */ t.jsx(xt, {}) : null
+            }
+          ) }) })
+        ] }),
+        r === "bank_statement" ? /* @__PURE__ */ t.jsx(b, { children: /* @__PURE__ */ t.jsx(
+          Be,
+          {
+            name: yt(le, "file"),
+            file: n.accountReconEntity.statementMetaData?.file,
+            showPhotoPicker: !1,
+            isDisabled: j,
+            sizeLimit: 1e7,
+            onFileSizeError: (i) => {
+              i && m(u.fileElementPicker.sizeLimit);
+            },
+            deleteFileStatusById: {},
+            updateFileStatusById: {},
+            filesEndPoint: l,
+            authParams: d,
+            acceptableTypes: ["application/pdf"],
+            placeholderText: s.reconciliation.drawer.downloadPlaceholder,
+            autoOpenFilePicker: f,
+            accountStatementUpload: {
+              uploadHelper: we,
+              metadataPayload: {
+                accountId: n.accountReconEntity.account.accountId,
+                monthYearPeriod: e
+              },
+              errorMessage: V,
+              onUploadError: (i) => {
+                m(i?.message);
+              },
+              onUploadSuccess: (i) => {
+                M(i), p(!1);
+              },
+              onUploadStart: () => {
+                p(!0), m(void 0);
+              },
+              onUploadWindowOpenedOnce: () => {
+                O();
+              }
+            },
+            onDeleteFile: (i) => {
+              D(i), P(!0);
+            },
+            onEditFileName: (i, I) => {
+              F(i, I);
+            }
+          }
+        ) }) : null,
+        /* @__PURE__ */ t.jsxs(b, { children: [
+          /* @__PURE__ */ t.jsx(_, { children: s.reconciliation.drawer.labels.status }),
+          /* @__PURE__ */ t.jsx(L, { children: r !== "bank_statement" ? /* @__PURE__ */ t.jsx(
+            $t,
+            {
+              status: n.accountConnectionStatus,
+              connectionInProgress: n.connectionInProgress,
+              onConnectClick: C,
+              onReconnectClick: $
+            }
+          ) : /* @__PURE__ */ t.jsx(
+            wt,
+            {
+              uploadInProgress: w,
+              status: n.accountReconEntity.statementDataStatus?.code
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ t.jsxs(b, { children: [
+          /* @__PURE__ */ t.jsx(_, { children: s.reconciliation.drawer.labels.accountType }),
+          /* @__PURE__ */ t.jsx(L, { children: /* @__PURE__ */ t.jsx(
+            vt,
+            {
+              accountSubType: G(
+                n.accountReconEntity.account.accountSubType ?? ""
+              )
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ t.jsxs(b, { children: [
+          /* @__PURE__ */ t.jsx(_, { children: s.reconciliation.drawer.labels.lastUpdated }),
+          /* @__PURE__ */ t.jsx(L, { children: /* @__PURE__ */ t.jsx(
+            ne,
+            {
+              isLoading: w,
+              customStyle: {
+                height: "20px",
+                width: "100px"
+              },
+              position: "left",
+              children: E != null ? /* @__PURE__ */ t.jsx(y, { children: G(E.utc(!0).fromNow()) }) : u.strings.hyphen
+            }
+          ) })
+        ] })
+      ] })
+    ] })
+  ] });
+}, Ct = ({
+  selectedSourceType: e
+}) => /* @__PURE__ */ t.jsxs(it, { children: [
+  e == null || e === "plaid" ? /* @__PURE__ */ t.jsx(ie, {}) : /* @__PURE__ */ t.jsx(ce, {}),
+  /* @__PURE__ */ t.jsx(ct, { children: e == null || e === "plaid" ? s.reconciliation.menu.bankConnection : s.reconciliation.menu.statement }),
+  /* @__PURE__ */ t.jsx(lt, {})
+] }), $t = ({
+  status: e,
+  connectionInProgress: n,
+  onConnectClick: l,
+  onReconnectClick: d
+}) => n ? /* @__PURE__ */ t.jsx(z, { children: s.reconciliation.drawer.values.connecting }) : e === "connected" ? /* @__PURE__ */ t.jsxs(z, { children: [
+  /* @__PURE__ */ t.jsx(ht, {}),
+  /* @__PURE__ */ t.jsx(ft, { children: s.reconciliation.drawer.values.connected })
+] }) : /* @__PURE__ */ t.jsx(
+  z,
+  {
+    onClick: e === "reconnect" ? d : l,
+    children: /* @__PURE__ */ t.jsx(gt, { status: e, children: e === "reconnect" ? s.reconciliation.drawer.values.reconnect : s.reconciliation.drawer.values.connect })
+  }
+), wt = ({
+  status: e,
+  uploadInProgress: n
+}) => n ? /* @__PURE__ */ t.jsx(
+  ne,
+  {
+    isLoading: n,
+    customStyle: {
+      height: "20px",
+      width: "100px"
+    },
+    position: "left",
+    children: /* @__PURE__ */ t.jsx(t.Fragment, {})
+  }
+) : e == null ? /* @__PURE__ */ t.jsx(y, { children: u.strings.hyphen }) : e === "parsing" ? /* @__PURE__ */ t.jsx(y, { children: s.reconciliation.drawer.values.statementParsing }) : e === "validated" ? /* @__PURE__ */ t.jsx(y, { children: s.reconciliation.drawer.values.uploaded }) : /* @__PURE__ */ t.jsx(y, { children: u.strings.hyphen }), kt = ({
+  variance: e,
+  variancePercentage: n,
+  reconciliationStatusCode: l
+}) => {
+  const d = Se(), {
+    varianceColor: f,
+    variancePercentageColor: C,
+    variancePercentageContainerColor: $
+  } = Ve(d, e, l, !0);
+  return /* @__PURE__ */ t.jsxs(nt, { children: [
+    /* @__PURE__ */ t.jsx(st, { textColor: f, children: Ae("0,0", e) ?? u.strings.hyphen }),
+    /* @__PURE__ */ t.jsxs(
+      rt,
+      {
+        textColor: C,
+        bgColor: $,
+        children: [
+          n != null ? n === 0 ? "0" : n.toFixed(2) : null,
+          n != null ? u.strings.percentage : null
+        ]
+      }
+    )
+  ] });
+}, vt = ({ accountSubType: e }) => {
+  const n = e != null ? e.replace("_", " ") : u.strings.hyphen;
+  return /* @__PURE__ */ t.jsx(y, { children: n });
+}, bt = ({
+  monthYearPeriod: e
+}) => /* @__PURE__ */ t.jsx(re, { children: Dt(e) }), Dt = (e) => {
+  const { month: n, year: l } = e, d = X(`${l}-${String(n).padStart(2, "0")}-01`);
+  let f = d.endOf("month");
+  return `${d.format(J.visual.DMMMYYYYFormat)} ${u.strings.hyphen} ${f.format(J.visual.DMMMYYYYFormat)}`;
+}, Q = (e) => ({
+  [le]: {
+    file: e.accountReconEntity.statementMetaData?.file,
+    selectedType: e.localData?.accountSource
+  }
+});
+export {
+  _t as default,
+  yt as uniqueName
+};