@zeniai/web-components 3.17.3 → 3.17.4

package/dist/LinkJETransactionPage-qDKVNyiN.js

@@ -0,0 +1,406 @@
+import { j as n, g as ue, h as me, F as pe } from "./vendor-.pnpm-B2klaOGU.js";
+import { useEffect as B } from "react";
+import i from "@emotion/styled";
+import { getQBOUrlForLink as W, getFirstControllerEmail as ge, getFirstControllerId as he } from "@zeniai/client-epic-state";
+import { a as q, u as Q, aS as M, R as u, k7 as xe, C as fe, S as t, t as D, aD as ye, k8 as P, jX as L, aG as Ce, ao as be, ai as we, b as ve, eF as $e, D as l } from "./index-CR2Dmphx.js";
+import { B as Se } from "./BusyIndication-DOn9iBRA.js";
+import je from "./TransactionDetailPage-CATJRpJM.js";
+const V = {
+  labelWidth: new u(120, 145, 160)
+}, Ee = i.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`, ke = i.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${t.sp3};
+`, Pe = i.div`
+  color: ${(e) => e.theme.colors.primary};
+  margin: ${t.sp3} ${t.sp1};
+  ${D.largeMedium.css};
+`, Le = i.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, U = (e, a) => `${e}.${a}`;
+function De({
+  sectionId: e,
+  jePostingDate: a,
+  qboURL: o,
+  isJELoading: r
+}) {
+  const m = q.getLocalizedStrings(), {
+    dateFormat: w,
+    jeSchedules: {
+      scheduleDetails: { linkJE: s, scheduleDetailsSection: v }
+    }
+  } = m, g = a.format(
+    w.visual.MMMDCommaYYYYformat
+  ), h = Q();
+  return /* @__PURE__ */ n.jsxs(Ee, { children: [
+    /* @__PURE__ */ n.jsx(Pe, { windowSize: h, children: v.header }),
+    /* @__PURE__ */ n.jsxs(ke, { children: [
+      /* @__PURE__ */ n.jsx(
+        M,
+        {
+          label: {
+            label: s.jePostingDate,
+            width: V.labelWidth.value(h)
+          },
+          style: {
+            width: "auto"
+          },
+          text: {
+            type: "text",
+            name: U(e, "jePostingDate"),
+            placeholder: s.jeLinkURLPlaceholder,
+            defaultValue: g,
+            autoComplete: "new-password"
+          },
+          isDisabled: "disabled"
+        }
+      ),
+      /* @__PURE__ */ n.jsx(Le, {}),
+      /* @__PURE__ */ n.jsx(
+        M,
+        {
+          label: {
+            label: s.jeLink,
+            width: V.labelWidth.value(h)
+          },
+          style: {
+            width: "auto"
+          },
+          text: {
+            type: "url",
+            name: U(e, "qboURL"),
+            placeholder: s.jeLinkURLPlaceholder,
+            defaultValue: o?.toString() ?? "",
+            autoComplete: "new-password",
+            style: {
+              color: fe.link
+            },
+            options: {
+              pattern: xe
+            }
+          },
+          isDisabled: r ? "disabled" : void 0
+        }
+      )
+    ] })
+  ] });
+}
+const y = {
+  containerPaddingLeft: new u(l[3], l[3], l[6]),
+  containerPaddingRight: new u(l[3], l[3], l[8]),
+  navbarContainerPaddingTop: new u(l[2], l[3]),
+  navbarContainerPaddingBottom: new u(l[4], l[5]),
+  sectionTitleMarginTop: new u(0, l[3]),
+  sectionTitleMarginLeft: new u(l[3], 0),
+  emptyScheduleHeight: new u(88, 88)
+}, T = "linkJETransactionPage", Z = "linkJETransaction", G = q.getLocalizedStrings(), {
+  common: { footer: Y },
+  dateFormat: Fe
+} = G, Ze = ({
+  analytics: e,
+  scheduleTab: a,
+  jeScheduledTransaction: o,
+  localData: r,
+  saveStatus: m,
+  isCOTEnabled: w,
+  transactionDetail: s,
+  firstMonthOfFY: v,
+  qboAppUrl: g,
+  authParams: h,
+  isDisabled: X,
+  controllerUserDetails: F,
+  isVendorBulkUpdateOnTransactionEnabled: K,
+  onUpdateLocalData: ee,
+  onBackClick: I,
+  onCancelClick: te,
+  onSaveClick: ne,
+  onFetchTransactionClick: oe
+}) => {
+  const p = Q(), A = ye(m), C = W(g.toString(), r.jeLink), $ = ge(
+    F.controllers
+  ), S = he(
+    F.controllerUserIds
+  ), J = () => {
+    const c = o.vendor, d = o.baseTransaction;
+    e.trackScheduleDetailsJournalEntryLinkCanceled({
+      scheduleType: a,
+      transaction: { ...L(d) },
+      scheduleExpenseCategoryAndClass: {
+        expenseCategory: o.jeDebit.account?.accountName ?? null,
+        expenseClass: o.jeDebit.accountingClass?.className ?? null
+      },
+      journalEntryDetails: {
+        ...P(r, C?.toString())
+      },
+      vendorName: c.name,
+      fixedAssetsDetails: a === "fixed_assets" ? {
+        accumulatedDepreciationCategory: o.jeCredit.account?.accountName ?? null,
+        assetId: o.otherAttributes.assetId ?? null
+      } : void 0,
+      controllerEmails: $,
+      controllerUserIds: S
+    }), te();
+  }, x = ue({
+    mode: "all",
+    reValidateMode: "onChange",
+    resetOptions: {
+      keepDirtyValues: !0,
+      keepErrors: !0
+    },
+    defaultValues: _(r, g),
+    values: _(r, g)
+  }), se = () => {
+    ne();
+  }, ie = async (c) => {
+    ee(c);
+  };
+  B(() => {
+    const c = x.watch((d, { name: de }) => {
+      de != null && d != null && me(() => ie(d));
+    });
+    return () => {
+      c.unsubscribe();
+    };
+  }), B(() => {
+    if (m === "Completed" && A === "In-Progress") {
+      const c = o.vendor, d = o.baseTransaction;
+      e.trackScheduleDetailsJournalEntryLinkedSaved({
+        scheduleType: a,
+        transaction: { ...L(d) },
+        scheduleExpenseCategoryAndClass: {
+          expenseCategory: o.jeDebit.account?.accountName ?? null,
+          expenseClass: o.jeDebit.accountingClass?.className ?? null
+        },
+        journalEntryDetails: {
+          ...P(r, C?.toString())
+        },
+        vendorName: c.name,
+        fixedAssetsDetails: a === "fixed_assets" ? {
+          accumulatedDepreciationCategory: o.jeCredit.account?.accountName ?? null,
+          assetId: o.otherAttributes.assetId ?? null
+        } : void 0,
+        controllerEmails: $,
+        controllerUserIds: S
+      }), I();
+    }
+  }, [m, A, I]);
+  const {
+    common: {
+      strings: { empty: N }
+    },
+    jeSchedules: {
+      scheduleDetails: { linkJE: f }
+    }
+  } = G, ae = () => {
+    if (r.jeLink?.transactionDetailID != null) {
+      const c = o.vendor, d = o.baseTransaction;
+      e.trackScheduleDetailsJournalEntryQBOFetched({
+        scheduleType: a,
+        transaction: { ...L(d) },
+        scheduleExpenseCategoryAndClass: {
+          expenseCategory: o.jeDebit.account?.accountName ?? null,
+          expenseClass: o.jeDebit.accountingClass?.className ?? null
+        },
+        journalEntryDetails: {
+          ...P(r, C?.toString())
+        },
+        vendorName: c.name,
+        fixedAssetsDetails: a === "fixed_assets" ? {
+          accumulatedDepreciationCategory: o.jeCredit.account?.accountName ?? null,
+          assetId: o.otherAttributes.assetId ?? null
+        } : void 0,
+        controllerEmails: $,
+        controllerUserIds: S
+      }), oe(r.jeLink.transactionDetailID);
+    }
+  }, re = s != null && s.fetchState === "In-Progress", le = s != null && s.fetchState === "Error", j = s != null && s.fetchState === "Completed", ce = s == null || s.fetchState === "Not-Started", R = r.jeLink.type === "recommended", z = Ce(x.formState.dirtyFields), E = x.formState.isValid, b = j && z && E || j && R && E, k = z && E;
+  return /* @__PURE__ */ n.jsxs(Ie, { children: [
+    /* @__PURE__ */ n.jsxs(Je, { windowSize: p, children: [
+      /* @__PURE__ */ n.jsx(Me, { windowSize: p, children: f.linkJE }),
+      /* @__PURE__ */ n.jsx(ze, { children: /* @__PURE__ */ n.jsx(Be, { onClick: J }) })
+    ] }),
+    /* @__PURE__ */ n.jsxs(Ae, { children: [
+      /* @__PURE__ */ n.jsx(Ne, { windowSize: p, children: /* @__PURE__ */ n.jsx(pe, { ...x, children: /* @__PURE__ */ n.jsx(
+        "form",
+        {
+          id: O(T),
+          onSubmit: x.handleSubmit(se),
+          children: /* @__PURE__ */ n.jsx(
+            De,
+            {
+              jePostingDate: r.postingDate,
+              sectionId: Z,
+              qboURL: C,
+              isJELoading: s?.fetchState === "In-Progress"
+            }
+          )
+        }
+      ) }) }),
+      R ? /* @__PURE__ */ n.jsxs(Ue, { windowSize: p, children: [
+        /* @__PURE__ */ n.jsx(Te, {}),
+        " ",
+        f.zeniRecommendation
+      ] }) : null,
+      j ? /* @__PURE__ */ n.jsx(Re, { children: /* @__PURE__ */ n.jsx(
+        je,
+        {
+          isCOTEnabled: w,
+          transactionDetail: s,
+          firstMonthOfFY: v,
+          transactionAttachmentEndpointToDownload: N,
+          transactionAttachmentsEndpointToFetch: N,
+          attachmentUploadEndpoint: "",
+          authParams: h,
+          isDisabled: X ?? "readonly",
+          isNavBarVisible: !1,
+          containerStyles: { boxShadow: "none", backgroundColor: "inherit" },
+          headerStyles: {
+            boxShadow: "none",
+            backgroundColor: "inherit"
+          },
+          autoCompleteData: {
+            entityAutoCompleteView: {
+              customer: [],
+              vendor: [],
+              fetchState: "Not-Started"
+            }
+          },
+          isVendorBulkUpdateOnTransactionEnabled: K,
+          onDeleteAttachment: () => {
+          },
+          autoCompleteActions: {
+            onAutoCompleteInputChange: () => null,
+            onCancelAutoComplete: () => null,
+            onAutoCompleteEntity: () => null,
+            onLoadOptions: () => null
+          },
+          onUploadAttachmentAttachment: () => null,
+          enableBackClickOnSave: !0,
+          saveLatestSelectedEntity: () => null,
+          updateVendorBulkRecommendationsFetchStatus: () => null,
+          setIsVendorUpdateAllChecked: () => null
+        }
+      ) }) : null,
+      /* @__PURE__ */ n.jsxs(Ve, { children: [
+        le ? /* @__PURE__ */ n.jsx(H, { windowSize: p, children: f.transactionFetchError }) : null,
+        ce ? /* @__PURE__ */ n.jsx(H, { windowSize: p, children: f.jeDetails }) : null
+      ] }),
+      re ? /* @__PURE__ */ n.jsx(Se, { fetchState: s?.fetchState }) : null
+    ] }),
+    b || k ? /* @__PURE__ */ n.jsx(
+      be,
+      {
+        formId: b ? O(T) : void 0,
+        primaryBtn: {
+          onClick: k && !b ? ae : void 0,
+          label: k && !b ? f.fetchJE : Y.save,
+          isLoading: m === "In-Progress",
+          isDisabled: m === "In-Progress" || s?.fetchState === "In-Progress" || s?.fetchState === "Error"
+        },
+        cancelBtn: {
+          label: Y.cancel,
+          shouldResetOnCancel: !0,
+          onClick: J
+        }
+      }
+    ) : null
+  ] });
+}, O = (e) => `${e}_form`, _ = (e, a) => ({
+  [Z]: {
+    qboURL: W(a.toString(), e.jeLink),
+    jePostingDate: e.postingDate.format(
+      Fe.visual.MMMDCommaYYYYformat
+    )
+  }
+}), Ie = i.div`
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  height: fit-content;
+  flex-direction: column;
+  justify-content: flex-start;
+  background-color: ${(e) => e.theme.colors.grey4};
+  box-shadow: ${(e) => `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}`};
+`, Ae = i.div`
+  padding: ${t.sp0} ${t.sp8};
+  flex-grow: 1;
+`, Je = i.div`
+  display: flex;
+  align-items: center;
+  top: ${t.sp0};
+  z-index: 2;
+  padding-left: ${(e) => y.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => y.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => y.navbarContainerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => y.navbarContainerPaddingBottom.valuePx(e.windowSize)};
+`, Ne = i.div`
+  max-width: 100%;
+  margin-bottom: ${t.sp5};
+`, Re = i.div`
+  width: 100%;
+  flex: 1;
+  margin-bottom: ${t.sp12};
+  background-color: inherit;
+`, ze = i.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: ${t.sp3} ${t.sp0};
+`, Be = i(ve)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${t.sp4};
+  height: ${t.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Me = i(we)`
+  display: flex;
+  width: 100%;
+  flex-grow: 1;
+  color: ${(e) => e.theme.colors.primary};
+  margin: auto;
+  justify-content: center;
+`, H = i.div`
+  height: ${(e) => y.emptyScheduleHeight.valuePx(e.windowSize)};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ${t.sp2};
+  padding: ${t.sp5} ${t.sp2};
+  background-color: ${(e) => e.theme.colors.background};
+  color: ${(e) => e.theme.colors.hero};
+  margin: ${t.sp3} ${t.sp1};
+  ${D.standardRegular.css};
+`, Ve = i.div`
+  flex-grow: 1;
+  width: 100%;
+`, Ue = i.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.sp1};
+  border-radius: ${t.sp2};
+  padding: ${t.sp3} ${t.sp2};
+  color: ${(e) => e.theme.colors.hero};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  margin: ${t.sp3} ${t.sp1};
+  ${D.standardRegular.css};
+`, Te = i($e)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+`;
+export {
+  Ze as default,
+  O as uniqueFormName
+};