@zeniai/web-components 3.17.10 → 3.17.11

package/dist/AccountReconDetailsDrawerPage-B4cHIFJ6.js

@@ -0,0 +1,689 @@
+import { g as ge, j as t, F as ye, u as je } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as g, useCallback as _, useRef as Se, useEffect as S } from "react";
+import o from "@emotion/styled";
+import { usePlaidLink as Ce } from "react-plaid-link";
+import { zeniDate as Z, toReconciliationAccountSource as ke, uploadAccountStatementIntoDocumentAI as $e } from "@zeniai/client-epic-state";
+import { aP as we, a as ve, aQ as be, aR as De, S as a, J as Te, k as ee, E as te, b as Ee, aL as Pe, b9 as Ie, fT as Be, fs as G, d$ as ne, o as i, a2 as _e, eP as oe, go as ae, ax as Ae, C as se, bc as Le } from "./index-Dg4HzhKR.js";
+import { a as Fe, S as Me, b as Ve, d as Oe } from "./AccountRow-BpMNeyry.js";
+const m = {
+  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};
+`, Re = o.div`
+  display: flex;
+  flex: 0 0 auto;
+  width: ${a.sp4};
+`, Ne = o.div`
+  min-height: ${m.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(Ee)`
+  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: ${m.containerPaddingLeft};
+  padding-right: ${m.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: ${m.navBarPaddingRight};
+  padding-left: ${m.navBarPaddingLeft};
+  height: 100%;
+`, qe = o(Te)`
+  display: flex;
+  flex: 1 1 0;
+  justify-content: center;
+  flex-direction: column;
+`, Je = 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;
+`, Qe = 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};
+`, Ke = 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};
+`, Xe = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  min-width: ${m.balanceContainerWidth}px;
+`, Y = o(te)`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  align-items: center;
+  justify-content: flex-end;
+`, Ze = o(i)`
+  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: ${m.balanceContainerWidth}px;
+`, tt = o(i)`
+  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: ${m.balanceContainerWidth}px;
+`, at = o(i)`
+  display: flex;
+  color: ${(e) => e.theme.colors.grey3};
+  align-items: center;
+  justify-content: flex-start;
+`, st = o(i)`
+  height: ${a.sp4};
+  border-radius: ${a.sp1};
+  color: ${(e) => e.textColor.hex()};
+  text-align: right;
+`, rt = o(i)`
+  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()};
+`, ct = o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${a.sp1};
+`, it = o(i)`
+  display: flex;
+  color: ${(e) => e.theme.colors.primary};
+  align-items: center;
+  justify-content: flex-end;
+`, lt = o(Ae)`
+  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: ${m.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%;
+`, A = o(i)`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  align-items: center;
+  justify-content: flex-end;
+`, L = o(i)`
+  display: flex;
+  color: ${(e) => e.theme.colors.primary};
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${a.sp1};
+`, y = o(i)`
+  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};
+`, ce = o(oe)`
+  width: ${a.sp3};
+  height: ${a.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, ie = 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(i)`
+  display: flex;
+  color: ${se.success};
+  align-items: center;
+  justify-content: flex-end;
+`, gt = o(i)`
+  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: K,
+  expenseAutomation: { accountRecon: s }
+} = ve.getLocalizedStrings(), yt = (e, n) => `${e}.${n}`, jt = "accountReconDrawerDetailsPage", le = "accountReconDrawerDetailsSection";
+function Lt({
+  accountReconciliation: e,
+  plaidConnectionDetails: n,
+  monthYearPeriod: l,
+  openFilePicker: d,
+  filesEndPoint: f,
+  authParams: C,
+  onDismissClick: k,
+  onFetchLinkTokenClick: D,
+  onEstablishConnectionClick: T,
+  onSelectSourceType: F,
+  onDeleteFile: E,
+  onEditFileName: M,
+  onStatementUploadSuccess: V,
+  onUploadWindowOpenedOnce: O
+}) {
+  const x = ge({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: X(e),
+    resetOptions: {
+      keepDirtyValues: !0,
+      keepErrors: !0
+    },
+    values: X(e)
+  }), $ = x.handleSubmit(() => {
+  }), [p, w] = g(
+    void 0
+  ), P = n.link_account_no_microdeposit, v = n.update_account, r = p === "update_account" ? v : P, [h, U] = g(r.linkToken ?? null), [j, c] = g(!1), [I, R] = g(!1), [N, W] = g(void 0), [de, H] = g(void 0), ue = _(() => {
+    w("link_account_no_microdeposit");
+  }, []), pe = _(() => {
+    w("update_account"), D(
+      "update_account",
+      e.paymentAccountId
+    );
+  }, [e.paymentAccountId]), he = {
+    onOkClick: () => {
+      N != null && (E(N), W(void 0)), H(void 0), R(!1);
+    },
+    onCancelClick: () => {
+      W(void 0), R(!1);
+    }
+  }, q = Se(p);
+  S(() => {
+    q.current = p;
+  }, [p]);
+  const me = _(
+    (B) => {
+      T(
+        B,
+        e.accountReconEntity.account.accountId,
+        q.current
+      ), w(void 0), c(!1);
+    },
+    [
+      T,
+      e.accountReconEntity.account.accountId
+    ]
+  ), xe = _((B, fe) => {
+    B != null && console.log("Plaid Connection Error", B, fe), w(void 0), c(!1);
+  }, []), { open: J, ready: Q } = Ce({
+    token: h,
+    onSuccess: me,
+    onExit: xe
+  });
+  return S(() => {
+    (Z((/* @__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 === h && r.fetchStatus.fetchState === "Completed" && Q && c(!0);
+  }, [
+    Q,
+    h,
+    r.fetchStatus.fetchState,
+    r.linkToken,
+    p,
+    j
+  ]), S(() => {
+    r.fetchStatus.fetchState === "Completed" && r.linkToken != null && r.linkToken !== h && U(r.linkToken);
+  }, [r.fetchStatus.fetchState, r.linkToken, h]), S(() => {
+    j && J();
+  }, [j, J]), /* @__PURE__ */ t.jsxs(Ue, { children: [
+    /* @__PURE__ */ t.jsx(Ne, { children: /* @__PURE__ */ t.jsx(ze, { children: /* @__PURE__ */ t.jsxs(He, { children: [
+      /* @__PURE__ */ t.jsx(Re, {}),
+      /* @__PURE__ */ t.jsxs(qe, { children: [
+        /* @__PURE__ */ t.jsx(Je, { children: e.accountReconEntity.account.accountName }),
+        /* @__PURE__ */ t.jsx(re, { children: /* @__PURE__ */ t.jsx(bt, { monthYearPeriod: l }) })
+      ] }),
+      /* @__PURE__ */ t.jsx(Qe, { children: /* @__PURE__ */ t.jsx(We, { onClick: k }) })
+    ] }) }) }),
+    /* @__PURE__ */ t.jsxs(Ye, { children: [
+      /* @__PURE__ */ t.jsx(ye, { ...x, children: /* @__PURE__ */ t.jsx(
+        "form",
+        {
+          style: { width: "100%" },
+          id: jt,
+          onSubmit: $,
+          children: /* @__PURE__ */ t.jsx(
+            St,
+            {
+              monthYearPeriod: l,
+              accountReconciliation: e,
+              filesEndPoint: f,
+              openFilePicker: d,
+              authParams: C,
+              onConnectClick: ue,
+              onReconnectClick: pe,
+              onSelectSourceType: F,
+              onDeleteFile: E,
+              onEditFileName: M,
+              onStatementUploadSuccess: V,
+              onUploadWindowOpenedOnce: O,
+              showConfirmationPopup: I,
+              setShowConfirmationPopup: R,
+              deleteFileId: N,
+              setDeleteFileId: W,
+              uploadErrorMessage: de,
+              setUploadErrorMessage: H
+            }
+          )
+        }
+      ) }),
+      I === !0 || e.statementDeleteStatus.fetchState === "In-Progress" ? /* @__PURE__ */ t.jsx(
+        we,
+        {
+          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: k,
+  setDeleteFileId: D,
+  setShowConfirmationPopup: T,
+  onEditFileName: F,
+  onSelectSourceType: E,
+  onStatementUploadSuccess: M,
+  onUploadWindowOpenedOnce: V,
+  uploadErrorMessage: O,
+  setUploadErrorMessage: x
+}) => {
+  const [$, p] = g(!1), P = (n.localData?.accountSource ?? "plaid") === "plaid" ? n.accountReconEntity.reconciliationId != null ? n.accountReconEntity.reconUpdatedAt : n.accountReconEntity.accountUpdatedAt : n.accountReconEntity.reconUpdatedAt, v = [];
+  n.accountReconEntity.account.accountType === "bank" && v.push({
+    label: s.reconciliation.menu.bankConnection,
+    value: "plaid"
+  }), v.push({
+    label: s.reconciliation.menu.statement,
+    value: "bank_statement"
+  });
+  const r = n.accountReconEntity.account.accountType === "credit_card" ? "bank_statement" : n.localData?.accountSource;
+  let h = n.accountConnectionStatus === "connected" || n.connectionInProgress === !0 ? "plaid" : n.accountReconEntity.statementStatus?.code === "uploaded" || n.statementParseInProgress === !0 || $ ? "bank_statement" : void 0;
+  n.accountReconEntity.account.accountType === "credit_card" && (h = "bank_statement"), S(() => {
+    n.accountReconEntity.statementStatus.code === "uploaded" && (n.accountReconEntity.statementDataStatus?.code === "validation_failed" || n.accountReconEntity.statementDataStatus?.code === "parsing_failed" || n.accountReconEntity.statementDataStatus?.code === "processing_failed") && x(
+      Fe(
+        n.accountReconEntity.statementDataStatus?.code,
+        "drawer",
+        n.accountReconEntity.errorMessage?.errorShort
+      )
+    );
+  }, [
+    n.accountReconEntity.statementStatus.code,
+    n.accountReconEntity.statementDataStatus?.code,
+    n.accountReconEntity.errorMessage?.errorShort,
+    x
+  ]);
+  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(Ke, { children: [
+      /* @__PURE__ */ t.jsxs(Xe, { children: [
+        /* @__PURE__ */ t.jsx(Y, { children: s.reconciliation.headers.bankBalance }),
+        /* @__PURE__ */ t.jsx(Ze, { 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(
+          Ve,
+          {
+            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(
+          wt,
+          {
+            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(A, { children: s.reconciliation.drawer.labels.type }),
+          /* @__PURE__ */ t.jsx(L, { children: h != null ? /* @__PURE__ */ t.jsx(y, { children: h === "plaid" && n.accountReconEntity.account.accountType === "bank" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            /* @__PURE__ */ t.jsx(ce, {}),
+            s.reconciliation.menu.bankConnection
+          ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            /* @__PURE__ */ t.jsx(ie, {}),
+            s.reconciliation.menu.statement
+          ] }) }) : /* @__PURE__ */ t.jsx(Pe, { 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: (c) => {
+                E(ke(c));
+              },
+              valueToIcon: (c) => c === "plaid" ? /* @__PURE__ */ t.jsx(mt, {}) : c === "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: (c) => {
+              c && x(u.fileElementPicker.sizeLimit);
+            },
+            deleteFileStatusById: {},
+            updateFileStatusById: {},
+            filesEndPoint: l,
+            authParams: d,
+            acceptableTypes: ["application/pdf"],
+            placeholderText: s.reconciliation.drawer.downloadPlaceholder,
+            autoOpenFilePicker: f,
+            accountStatementUpload: {
+              uploadHelper: $e,
+              metadataPayload: {
+                accountId: n.accountReconEntity.account.accountId,
+                accountType: n.accountReconEntity.account.accountType ?? "bank",
+                monthYearPeriod: e
+              },
+              errorMessage: O,
+              onUploadError: (c) => {
+                x(c?.message);
+              },
+              onUploadSuccess: (c) => {
+                M(c), p(!1);
+              },
+              onUploadStart: () => {
+                p(!0), x(void 0);
+              },
+              onUploadWindowOpenedOnce: () => {
+                V();
+              }
+            },
+            onDeleteFile: (c) => {
+              D(c), T(!0);
+            },
+            onEditFileName: (c, I) => {
+              F(c, I);
+            }
+          }
+        ) }) : null,
+        /* @__PURE__ */ t.jsxs(b, { children: [
+          /* @__PURE__ */ t.jsx(A, { children: s.reconciliation.drawer.labels.status }),
+          /* @__PURE__ */ t.jsx(L, { children: r !== "bank_statement" ? /* @__PURE__ */ t.jsx(
+            kt,
+            {
+              status: n.accountConnectionStatus,
+              connectionInProgress: n.connectionInProgress,
+              onConnectClick: C,
+              onReconnectClick: k
+            }
+          ) : /* @__PURE__ */ t.jsx(
+            $t,
+            {
+              uploadInProgress: $,
+              status: n.accountReconEntity.statementDataStatus?.code
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ t.jsxs(b, { children: [
+          /* @__PURE__ */ t.jsx(A, { 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(A, { children: s.reconciliation.drawer.labels.lastUpdated }),
+          /* @__PURE__ */ t.jsx(L, { children: /* @__PURE__ */ t.jsx(
+            ne,
+            {
+              isLoading: $,
+              customStyle: {
+                height: "20px",
+                width: "100px"
+              },
+              position: "left",
+              children: P != null ? /* @__PURE__ */ t.jsx(y, { children: G(P.utc(!0).fromNow()) }) : u.strings.hyphen
+            }
+          ) })
+        ] })
+      ] })
+    ] })
+  ] });
+}, Ct = ({
+  selectedSourceType: e
+}) => /* @__PURE__ */ t.jsxs(ct, { children: [
+  e == null || e === "plaid" ? /* @__PURE__ */ t.jsx(ce, {}) : /* @__PURE__ */ t.jsx(ie, {}),
+  /* @__PURE__ */ t.jsx(it, { children: e == null || e === "plaid" ? s.reconciliation.menu.bankConnection : s.reconciliation.menu.statement }),
+  /* @__PURE__ */ t.jsx(lt, {})
+] }), kt = ({
+  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 })
+  }
+), $t = ({
+  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 }), wt = ({
+  variance: e,
+  variancePercentage: n,
+  reconciliationStatusCode: l
+}) => {
+  const d = je(), {
+    varianceColor: f,
+    variancePercentageColor: C,
+    variancePercentageContainerColor: k
+  } = Oe(d, e, l, !0);
+  return /* @__PURE__ */ t.jsxs(nt, { children: [
+    /* @__PURE__ */ t.jsx(st, { textColor: f, children: _e("0,0", e) ?? u.strings.hyphen }),
+    /* @__PURE__ */ t.jsxs(
+      rt,
+      {
+        textColor: C,
+        bgColor: k,
+        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 = Z(`${l}-${String(n).padStart(2, "0")}-01`);
+  let f = d.endOf("month");
+  return `${d.format(K.visual.DMMMYYYYFormat)} ${u.strings.hyphen} ${f.format(K.visual.DMMMYYYYFormat)}`;
+}, X = (e) => ({
+  [le]: {
+    file: e.accountReconEntity.statementMetaData?.file,
+    selectedType: e.localData?.accountSource
+  }
+});
+export {
+  Lt as default,
+  yt as uniqueName
+};