@zeniai/web-components 3.16.33 → 3.16.34

package/dist/CheckDepositDrawerPage-CtWXEXK-.js

@@ -0,0 +1,726 @@
+import { g as pe, h as me, j as t, F as he } from "./vendor-.pnpm-DxbX2tX4.js";
+import { useState as N, useEffect as I } from "react";
+import a from "@emotion/styled";
+import { u as ee, aD as ge, R as l, C as w, S as o, j as $, a5 as E, ia as xe, a as oe, aQ as fe, fQ as _, fi as Z, hP as be, D as s, hz as $e, _ as we, p as v, b as te, e_ as Se, am as ye, E as G, hR as ke, B as Q, ap as Le, aj as je, y as De, H as re, G as Pe } from "./index-rO5GHlOg.js";
+import { S as ve } from "./SuccessAnimation-q3kCz3fT.js";
+const Ce = "checkDepositDetailPage", g = "checkDepositDetails", Fe = "amount", Be = "depositTo", Te = "source", ae = "fileIds", O = "selectDocument", M = (e) => {
+  const u = [];
+  return e.checkFront != null && u.push(e.checkFront.fileId), e.checkBack != null && u.push(e.checkBack.fileId), {
+    [g]: {
+      [Fe]: e.checkDepositLocalData.amount.amount === 0 ? void 0 : e.checkDepositLocalData.amount.amount,
+      [Te]: e.checkDepositLocalData.source,
+      [Be]: {
+        allOptions: e.depositAccounts.depositAccounts.map(
+          (x) => ({
+            label: x.accountName,
+            value: x.id
+          })
+        ),
+        selectedOption: e.checkDepositLocalData.depositTo?.id
+      },
+      [ae]: u,
+      [O]: {
+        front: e.checkFront,
+        back: e.checkBack
+      }
+    }
+  };
+}, b = (e, u) => `${e}.${u}`, Ae = (e) => `${e}_form`, m = {
+  largeLabelWidth: new l(160, 160, 160),
+  rowContentPaddingLeft: new l(s[3], s[4]),
+  checkPicRowContentPaddingXAxis: new l(s[3], s[4]),
+  labeleMarginLeft: new l(s[0], s[0]),
+  labeleMarginBottom: new l(s[2], s[0]),
+  labelMarginRight: new l(s[3], s[3]),
+  labeledFieldPaddingLeft: new l(s[3], s[0]),
+  labeledFieldPaddingRight: new l(s[3], s[2]),
+  labeledFieldPaddingTop: new l(s[3], s[3]),
+  labeledFieldPaddingBottom: new l(s[3], s[2]),
+  infoLabelPaddingRight: new l(s[0], s[3]),
+  infoLabelMarginTop: new l(s[1], s[0])
+}, { spendManagement: ze, common: V } = oe.getLocalizedStrings(), n = ze.zeniAccounts.zeniAccountList, Ie = V.documents;
+function Me({
+  checkDeposit: e,
+  analytics: u,
+  filesEndPoint: x,
+  openPopup: S,
+  authParams: y,
+  onSaveChangesToLocalStore: C,
+  updateFilesEntity: k,
+  onDeleteFile: L,
+  onEditFileName: j,
+  onCheckDpositClick: F
+}) {
+  const i = ee(), d = e.fetchState, D = ge(d), [P, W] = N(!1), [ie, B] = N(!1), T = m.largeLabelWidth.value(i), f = pe({
+    mode: "all",
+    reValidateMode: "onBlur",
+    defaultValues: M(e),
+    // use "values" to get hot loaded selector view
+    values: M(e)
+  }), { isValid: ne } = f.formState, H = (r) => {
+    const c = {
+      amount: {
+        amount: r[g].amount ?? 0,
+        currencyCode: V.currency.currencyCode,
+        currencySymbol: V.currency.currencySymbol
+      },
+      source: r[g].source,
+      depositTo: e.depositAccounts.depositAccounts.find(
+        (p) => p.id === r[g].depositTo.selectedOption
+      ),
+      fileIds: r[g][ae]
+    };
+    C(c);
+  }, le = async (r, c) => {
+    if (r != null) {
+      if (r.includes("source") || r.includes("amount"))
+        return;
+      const p = Object.assign({}, c);
+      H(p);
+    }
+  };
+  I(() => {
+    const r = f.watch((c, { name: p }) => {
+      p != null && c != null && me(() => le(p, c));
+    });
+    return () => {
+      r.unsubscribe();
+    };
+  }), I(() => {
+    D === "Completed" && d === "Not-Started" && f.reset(M(e));
+  }, [D, d, f, e]), I(() => {
+    e.error != null ? B(!0) : B(!1);
+  }, [e.error]);
+  const ce = f.handleSubmit(() => {
+    if (ne) {
+      u.trackAccountsDepositCheckFormClicked(
+        "Deposit",
+        e.checkDepositLocalData.amount.amount,
+        e.checkDepositLocalData.source,
+        e.checkDepositLocalData.depositTo?.accountName,
+        e.checkFront != null,
+        e.checkBack != null
+      );
+      const r = f.getValues();
+      H(r), F?.();
+    }
+  }), de = (r, c) => {
+    if (!r)
+      return null;
+    const p = e.depositAccounts.depositAccounts.find(
+      (z) => z.id === r
+    ), A = e.depositAccounts.depositAccounts.findIndex(
+      (z) => z.id === r
+    );
+    return p ? /* @__PURE__ */ t.jsx(
+      Ve,
+      {
+        color: be(A),
+        isSelectedValue: c
+      }
+    ) : null;
+  }, ue = (r, c) => {
+    if (!r)
+      return null;
+    const p = e.depositAccounts.depositAccounts.find(
+      (A) => A.id === r
+    );
+    return p ? c === !0 ? /* @__PURE__ */ t.jsx(Oe, { children: p?.maskedAccountNumber }) : /* @__PURE__ */ t.jsxs(Ee, { children: [
+      /* @__PURE__ */ t.jsx(X, { children: p?.maskedAccountNumber }),
+      /* @__PURE__ */ t.jsx(ro, {}),
+      /* @__PURE__ */ t.jsx(X, { children: E("0,0[.]00", p?.accountBalance?.available) })
+    ] }) : null;
+  };
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    ie ? /* @__PURE__ */ t.jsx(qe, { children: /* @__PURE__ */ t.jsxs(Ge, { children: [
+      /* @__PURE__ */ t.jsxs(We, { children: [
+        /* @__PURE__ */ t.jsx(_e, {}),
+        /* @__PURE__ */ t.jsxs(Ze, { children: [
+          /* @__PURE__ */ t.jsx(Qe, { children: e.error?.title }),
+          /* @__PURE__ */ t.jsx(Xe, { children: e.error?.message })
+        ] })
+      ] }),
+      /* @__PURE__ */ t.jsx(He, { children: /* @__PURE__ */ t.jsx(
+        no,
+        {
+          "data-testid": $("check-deposit-form-close"),
+          onClick: () => {
+            u.trackAccountsDepositCheckFormClicked(
+              "Cross",
+              e.checkDepositLocalData.amount.amount,
+              e.checkDepositLocalData.source,
+              e.checkDepositLocalData.depositTo?.accountName,
+              e.checkFront != null,
+              e.checkBack != null
+            ), B(!1);
+          },
+          style: {
+            width: o.sp3,
+            height: o.sp3,
+            color: w.heroLight
+          }
+        }
+      ) })
+    ] }) }) : null,
+    /* @__PURE__ */ t.jsx(Ye, { children: E("0,0.[00]", e.checkDepositLocalData.amount) }),
+    /* @__PURE__ */ t.jsx(he, { ...f, children: /* @__PURE__ */ t.jsx("form", { id: Ae(Ce), onSubmit: ce, children: /* @__PURE__ */ t.jsxs(Ke, { children: [
+      /* @__PURE__ */ t.jsx(
+        xe,
+        {
+          showAdditionalInfoLabel: !1,
+          label: {
+            label: n.checkDepositDrawer.amountLabel,
+            width: T
+          },
+          formattedTextField: {
+            type: "number",
+            name: b(g, "amount"),
+            defaultValue: e.checkDepositLocalData.amount.amount === 0 ? void 0 : e.checkDepositLocalData.amount.amount,
+            placeholder: n.checkDepositDrawer.amountPlaceholder,
+            returnValueType: "floatValue",
+            prefix: "$",
+            allowNegative: !1,
+            isNumericString: !1,
+            registerOptions: {
+              required: !0,
+              validate: (r) => !!r && r > 0
+            },
+            autoComplete: "off",
+            decimalSeparator: ".",
+            decimalScale: 2,
+            fixedDecimalScale: !1,
+            thousandSeparator: !0,
+            allowLeadingZeros: !1
+          },
+          style: { width: "auto" }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(R, {}),
+      /* @__PURE__ */ t.jsx(
+        fe,
+        {
+          label: {
+            label: n.checkDepositDrawer.sourceLabel,
+            width: T
+          },
+          style: { width: "100%" },
+          text: {
+            type: "text",
+            name: b(g, "source"),
+            defaultValue: e.checkDepositLocalData.source,
+            placeholder: n.checkDepositDrawer.sourcePlaceholder,
+            options: {
+              required: !0,
+              validate: (r) => r != null
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(R, {}),
+      /* @__PURE__ */ t.jsx(se, { size: i, children: /* @__PURE__ */ t.jsx(oo, { size: i, children: /* @__PURE__ */ t.jsx(
+        Je,
+        {
+          label: {
+            label: n.checkDepositDrawer.depositToLabel,
+            width: T,
+            style: {
+              marginLeft: m.labeleMarginLeft.valuePx(i),
+              marginBottom: m.labeleMarginBottom.valuePx(i),
+              marginRight: m.labelMarginRight.valuePx(i)
+            }
+          },
+          style: {
+            paddingTop: m.labeledFieldPaddingTop.valuePx(i),
+            paddingBottom: m.labeledFieldPaddingBottom.valuePx(i),
+            paddingLeft: m.labeledFieldPaddingLeft.valuePx(i),
+            paddingRight: m.labeledFieldPaddingRight.valuePx(i),
+            border: "none",
+            width: "100%",
+            outline: "none",
+            padding: 0,
+            display: i === "small" ? "flex" : "inherit"
+          },
+          infoLabelStyle: {
+            textAlign: i === "small" ? "left" : "right",
+            paddingRight: m.infoLabelPaddingRight.valuePx(i),
+            marginTop: m.infoLabelMarginTop.valuePx(i)
+          },
+          singleSelectPickerField: {
+            valueToLogo: (r, c) => de(r, c),
+            valueToSubLabels: (r, c) => ue(r, c),
+            name: b(g, "depositTo"),
+            placeholder: n.checkDepositDrawer.depositToPlaceholder,
+            style: { position: "relative" },
+            defaultValue: {
+              selectedOption: e.checkDepositLocalData.depositTo?.id,
+              allOptions: e.depositAccounts.depositAccounts.map(
+                (r) => ({
+                  label: r.accountName,
+                  value: r.id
+                })
+              )
+            },
+            textAlignment: "right",
+            registerOptions: {
+              required: !0,
+              validate: (r) => !!(r != null && r.selectedOption)
+            }
+          }
+        }
+      ) }) }),
+      /* @__PURE__ */ t.jsx(R, {}),
+      /* @__PURE__ */ t.jsxs(Ue, { size: i, children: [
+        /* @__PURE__ */ t.jsxs(eo, { size: i, children: [
+          /* @__PURE__ */ t.jsx(Re, { children: n.checkDepositDrawer.checkPicLabel }),
+          /* @__PURE__ */ t.jsx(Y, { isLast: !1, children: n.checkDepositDrawer.frontSide }),
+          /* @__PURE__ */ t.jsx(
+            _,
+            {
+              name: `${b(
+                g,
+                O
+              )}.front`,
+              registerOptions: {
+                required: !0
+              },
+              file: e.checkFront,
+              isDisabled: !1,
+              deleteFileStatusById: e.deleteFileStatusById,
+              updateFileStatusById: e.updateFileStatusById,
+              filesEndPoint: x,
+              authParams: y,
+              acceptableTypes: ["image/jpg", "image/jpeg"],
+              supportedImageFileFormat: "image/jpeg",
+              sizeLimit: Z,
+              placeholderText: i === "small" ? n.checkDepositDrawer.uploadDocument : n.checkDepositDrawer.dragDropClickPlaceholder,
+              filemetadataPayload: {
+                documentType: "check",
+                purposeId: "others",
+                documentSide: "front"
+              },
+              hasError: P,
+              updateFilesEntity: k,
+              onDeleteFile: L,
+              onFileSizeError: (r) => W(r),
+              onEditFileName: j,
+              openPopup: S,
+              showPhotoPicker: !0,
+              errorInfoLabel: n.checkDepositDrawer.frontSideError,
+              useMobileCam: !0,
+              compressImage: !0
+            }
+          ),
+          /* @__PURE__ */ t.jsx(Y, { isLast: !0, children: n.checkDepositDrawer.backSide }),
+          /* @__PURE__ */ t.jsx(
+            _,
+            {
+              name: `${b(
+                g,
+                O
+              )}.back`,
+              registerOptions: {
+                required: !0
+              },
+              file: e.checkBack,
+              isDisabled: !1,
+              deleteFileStatusById: e.deleteFileStatusById,
+              updateFileStatusById: e.updateFileStatusById,
+              filesEndPoint: x,
+              authParams: y,
+              acceptableTypes: ["image/jpg", "image/jpeg"],
+              supportedImageFileFormat: "image/jpeg",
+              sizeLimit: Z,
+              placeholderText: i === "small" ? n.checkDepositDrawer.uploadDocument : n.checkDepositDrawer.dragDropClickPlaceholder,
+              filemetadataPayload: {
+                documentType: "check",
+                purposeId: "others",
+                documentSide: "back"
+              },
+              hasError: P,
+              updateFilesEntity: k,
+              onDeleteFile: L,
+              onFileSizeError: (r) => W(r),
+              onEditFileName: j,
+              openPopup: S,
+              showPhotoPicker: !0,
+              errorInfoLabel: n.checkDepositDrawer.backSideError,
+              useMobileCam: !0,
+              compressImage: !0
+            }
+          ),
+          /* @__PURE__ */ t.jsx(ao, { children: n.checkDepositDrawer.picGuides.map((r) => /* @__PURE__ */ t.jsxs(so, { children: [
+            /* @__PURE__ */ t.jsx(to, {}),
+            /* @__PURE__ */ t.jsx(Ne, { children: r })
+          ] }, r)) })
+        ] }),
+        /* @__PURE__ */ t.jsx(io, { windowSize: i, children: Ie.formatJPGText10MB })
+      ] })
+    ] }) }) })
+  ] });
+}
+const Re = a(v)`
+  color: ${(e) => e.theme.colors.hero};
+`, Ne = a(v)`
+  color: ${(e) => e.theme.colors.hero};
+  margin-left: ${o.sp3};
+`, Ee = a(G)`
+  color: ${(e) => e.theme.colors.grey1};
+  display: flex;
+  align-items: center;
+  gap: ${o.sp2};
+`, X = a.div``, Oe = a.span`
+  margin-left: ${o.sp2};
+`, Ve = a(ke)`
+  min-width: ${(e) => e.isSelectedValue ? o.sp4 : o.sp5};
+  width: ${(e) => e.isSelectedValue ? o.sp4 : o.sp5};
+  height: ${(e) => e.isSelectedValue ? o.sp4 : o.sp5};
+  margin-right: ${o.sp2};
+`, qe = a.div`
+  margin-top: ${o.sp3};
+  display: flex;
+  background-color: ${(e) => e.theme.colors.grey5};
+  justify-content: space-between;
+  padding: ${o.sp3} ${o.sp4};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  border-radius: ${o.sp2};
+  box-shadow: ${(e) => `${o.sp0} 2px 2px ${e.theme.colors.dropShadowNormal}`};
+`, Ge = a.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: ${o.sp3} ${o.sp4};
+  background-color: ${w.importantLight};
+  border-radius: ${o.sp2};
+`, We = a.div`
+  display: flex;
+  align-items: flex-start;
+`, He = a.div``, _e = a($e)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${w.important};
+`, Ze = a.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: ${o.sp2};
+`, Qe = a(we)`
+  color: ${w.important};
+`, Xe = a(v)`
+  color: ${w.important};
+`, Ye = a(Se)`
+  color: ${(e) => e.theme.colors.primary};
+  margin: ${o.sp5} ${o.sp0} ${o.sp3} ${o.sp0};
+`, Je = a(
+  ye
+)`
+  border-radius: ${o.sp2};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+`, Ke = a.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+  margin-bottom: ${o.sp3};
+`, R = a.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, se = a.div`
+  display: flex;
+  flex-direction: "row";
+  padding: ${o.sp2};
+  padding-left: ${(e) => m.rowContentPaddingLeft.valuePx(e.size)};
+  justify-content: space-between;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    .select-control {
+      background-color: ${(e) => e.theme.colors.background};
+    }
+  }
+  &:focus-within {
+    border-color: ${(e) => e.theme.colors.primary};
+    color: ${(e) => e.theme.colors.primary};
+    z-index: 2;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+  }
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`, Ue = a(se)`
+  flex-direction: column;
+  padding: ${o.sp0};
+`, eo = a.div`
+  padding: ${(e) => `${o.sp3} ${m.checkPicRowContentPaddingXAxis.valuePx(
+  e.size
+)}`};
+`, oo = a.div`
+  width: 100%;
+  display: flex;
+  flex-grow: ${(e) => e.size === "small" ? 1 : 0};
+  align-items: flex-start;
+`, Y = a(G)`
+  color: ${(e) => e.theme.colors.hero};
+  margin-bottom: ${o.sp2};
+  margin-top: ${(e) => e.isLast ? o.sp3 : o.sp0};
+`, to = a.div`
+  background-color: ${(e) => e.theme.colors.hero};
+  border-radius: 50%;
+  border-style: solid;
+  width: 2px;
+  height: 2px;
+  position: absolute;
+  top: 10px;
+`, ro = a.div`
+  width: ${o.sp1};
+  height: ${o.sp1};
+  min-width: ${o.sp1};
+  background-color: ${(e) => e.theme.colors.grey1};
+  border-radius: 50%;
+`, ao = a.div`
+  display: flex;
+  flex-direction: column;
+  margin: ${o.sp3} ${o.sp0};
+  margin-bottom: ${o.sp0};
+`, so = a.div`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+`, io = a(G)`
+  margin-top: ${o.sp2};
+  padding: ${o.sp1} ${o.sp4};
+  background: ${(e) => e.theme.colors.grey4};
+  border-radius: ${o.sp0} ${o.sp0} ${o.sp2} ${o.sp2};
+  width: 100%;
+  box-sizing: border-box;
+  text-align: ${(e) => e.windowSize === "small" ? "initial" : "right"};
+  color: ${(e) => e.theme.colors.grey1};
+`, no = a(te)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  min-height: ${o.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, lo = "checkDepositDetailPage", co = {
+  NavBarContainerPaddingYAxis: new l(10, s[3])
+}, uo = (e) => `${e}_form`, q = {
+  containerPaddingLeft: new l(s[3], s[6], s[8]),
+  containerPaddingRight: new l(s[3], s[6], s[8]),
+  successContentMargin: new l(s[3], s[12])
+}, { spendManagement: po } = oe.getLocalizedStrings(), h = po.zeniAccounts.zeniAccountList, Po = ({
+  checkDeposit: e,
+  analytics: u,
+  filesEndPoint: x,
+  authParams: S,
+  onSaveChangesToLocalStore: y,
+  onAnotherTransferClick: C,
+  updateFilesEntity: k,
+  onDeleteFile: L,
+  onEditFileName: j,
+  onCheckDpositClick: F,
+  onDismissClick: i
+}) => {
+  const d = ee(), [D, P] = N(!1);
+  return /* @__PURE__ */ t.jsx(xo, { windowSize: d, children: e.fetchState === "Completed" ? /* @__PURE__ */ t.jsxs(J, { windowSize: d, children: [
+    /* @__PURE__ */ t.jsx(K, { windowSize: d, children: /* @__PURE__ */ t.jsx(
+      U,
+      {
+        "data-testid": $("check-deposit-drawer-close"),
+        onClick: () => {
+          u.trackAccountsDepositCheckFormClicked(
+            "Cross",
+            e.checkDepositLocalData.amount.amount,
+            e.checkDepositLocalData.source,
+            e.checkDepositLocalData.depositTo?.accountName,
+            e.checkFront != null,
+            e.checkBack != null
+          ), i?.();
+        }
+      }
+    ) }),
+    /* @__PURE__ */ t.jsxs($o, { windowSize: d, children: [
+      /* @__PURE__ */ t.jsx(
+        ve,
+        {
+          width: 150,
+          height: 150,
+          shouldDisplay: !0,
+          animationInLoop: !0
+        }
+      ),
+      /* @__PURE__ */ t.jsxs(fo, { children: [
+        h.checkDepositDrawer.transferSuccessMsgPrefix,
+        /* @__PURE__ */ t.jsx(go, { children: E(
+          "0,0.[00]",
+          e.checkDepositLocalData.amount
+        ) }),
+        h.checkDepositDrawer.transferSuccessMsgSuffix
+      ] }),
+      /* @__PURE__ */ t.jsxs(bo, { children: [
+        /* @__PURE__ */ t.jsx(
+          Q,
+          {
+            variant: "secondary",
+            label: h.checkDepositDrawer.makeAnotherTransferBtn,
+            onClick: C,
+            "data-testid": $(
+              "check-deposit-drawer-another-transfer"
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          Q,
+          {
+            variant: "primary",
+            label: h.checkDepositDrawer.goToAccountBtn,
+            onClick: i,
+            style: {
+              marginLeft: d === "small" ? o.sp3 : o.sp5
+            },
+            "data-testid": $(
+              "check-deposit-drawer-go-to-account"
+            )
+          }
+        )
+      ] })
+    ] })
+  ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(J, { windowSize: d, children: [
+      /* @__PURE__ */ t.jsx(K, { windowSize: d, children: /* @__PURE__ */ t.jsx(
+        U,
+        {
+          "data-testid": $("check-deposit-drawer-close"),
+          onClick: () => {
+            u.trackAccountsDepositCheckFormClicked(
+              "Cross",
+              e.checkDepositLocalData.amount.amount,
+              e.checkDepositLocalData.source,
+              e.checkDepositLocalData.depositTo?.accountName,
+              e.checkFront != null,
+              e.checkBack != null
+            ), i?.();
+          }
+        }
+      ) }),
+      d === "small" ? /* @__PURE__ */ t.jsx(wo, { windowSize: d, children: h.checkDepositDrawer.title }) : /* @__PURE__ */ t.jsx(So, { children: h.checkDepositDrawer.title }),
+      d === "small" ? /* @__PURE__ */ t.jsx(ho, { children: h.checkDepositDrawer.subTitle }) : /* @__PURE__ */ t.jsx(mo, { children: h.checkDepositDrawer.subTitle }),
+      /* @__PURE__ */ t.jsx(
+        Me,
+        {
+          analytics: u,
+          authParams: S,
+          checkDeposit: e,
+          filesEndPoint: x,
+          onSaveChangesToLocalStore: y,
+          openPopup: P,
+          onCheckDpositClick: F,
+          onDeleteFile: L,
+          onEditFileName: j,
+          updateFilesEntity: k
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsx(
+      Le,
+      {
+        formId: uo(lo),
+        helperText: h.checkDepositDrawer.footNote,
+        helperStyle: { paddingTop: o.sp0, paddingBottom: o.sp0 },
+        style: {
+          zIndex: D ? 0 : 4,
+          paddingTop: o.sp3,
+          paddingBottom: o.sp3
+        },
+        primaryBtn: {
+          label: h.checkDepositDrawer.depositBtn,
+          isLoading: e.fetchState === "In-Progress"
+        },
+        cancelBtn: {
+          label: h.checkDepositDrawer.cancelBtn,
+          onClick: () => {
+            u.trackAccountsDepositCheckFormClicked(
+              "Cancel",
+              e.checkDepositLocalData.amount.amount,
+              e.checkDepositLocalData.source,
+              e.checkDepositLocalData.depositTo?.accountName,
+              e.checkFront != null,
+              e.checkBack != null
+            ), i?.();
+          }
+        }
+      }
+    )
+  ] }) });
+}, mo = a(v)`
+  color: ${(e) => e.theme.colors.hero};
+`, ho = a(Pe)`
+  color: ${(e) => e.theme.colors.hero};
+`, go = a(De)`
+  display: inline;
+`, xo = a.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+  overflow-x: hidden;
+  height: 100%;
+  width: 100%;
+`, fo = a(je)`
+  color: ${(e) => e.theme.colors.primary};
+  text-align: center;
+`, J = a.div`
+  height: ${(e) => e.windowSize === "small" ? "auto" : "100%"};
+  padding-left: ${(e) => `${q.containerPaddingLeft.valuePx(e.windowSize)}`};
+  padding-right: ${(e) => `${q.containerPaddingRight.valuePx(e.windowSize)}`};
+`, bo = a.div`
+  display: flex;
+  justify-content: center;
+  margin-top: ${o.sp7};
+`, $o = a.div`
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: ${(e) => `${o.sp0} ${q.successContentMargin.valuePx(
+  e.windowSize
+)} `};
+  align-items: center;
+`, K = a.div`
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  top: ${o.sp0};
+  padding: ${(e) => `${co.NavBarContainerPaddingYAxis.valuePx(e.windowSize)} ${o.sp0}`};
+  z-index: 2;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, U = a(te)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  min-height: ${o.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, wo = a(re)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${o.sp3};
+  margin-bottom: ${o.sp0};
+  margin-right: ${o.sp3};
+`, So = a(re)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${o.sp3};
+`;
+export {
+  Po as default,
+  uo as uniqueFormName
+};