@zeniai/web-components 3.17.11 → 3.17.13

package/dist/QBOSetupSection-DZE1Ioks.js

@@ -0,0 +1,167 @@
+import { j as o, b as m } from "./vendor-.pnpm-B2klaOGU.js";
+import s from "@emotion/styled";
+import { u as I, a as u, B as W, S as t, R as l, C as a, i0 as k, aw as P, j as R, W as B, hS as E, F as $, D as n } from "./index-BveTtfdM.js";
+import L from "./QBOConnectionDialog-BmJqUNhA.js";
+import { S as D } from "./intuit-quick-books-logo-qyL3_3cm.js";
+const r = {
+  containerPadding: new l(n[3], n[4]),
+  sectionWidth: new l(343, 580, 726),
+  rowGap: new l(n[2], n[3]),
+  topElementsRowGap: new l(n[3], n[0]),
+  arrowIconWidthHeight: new l(n[3], n[4])
+}, G = {
+  title: new P("standardMedium", "largeMedium")
+}, te = ({
+  isAdmin: e,
+  hasError: d = !1,
+  isValid: c,
+  saveConnectionState: p,
+  isQBOPopupOpen: S,
+  companyName: y,
+  updateQBOPopupState: h,
+  handleOnConnectClick: j
+}) => {
+  const i = I(), { qbo_connection: f } = u.getLocalizedStrings().customerOnboardingPage.sections, { title: v, sucessText: b, button: z, errorText: T, requiredText: C } = f;
+  return /* @__PURE__ */ o.jsxs(F, { windowSize: i, children: [
+    /* @__PURE__ */ o.jsxs(Q, { windowSize: i, children: [
+      i === "small" ? /* @__PURE__ */ o.jsx(J, { children: c ? /* @__PURE__ */ o.jsx(K, {}) : /* @__PURE__ */ o.jsx(U, {}) }) : null,
+      /* @__PURE__ */ o.jsx(A, { windowSize: i, children: v })
+    ] }),
+    /* @__PURE__ */ o.jsxs(H, { windowSize: i, children: [
+      /* @__PURE__ */ o.jsxs(O, { windowSize: i, children: [
+        /* @__PURE__ */ o.jsxs(M, { children: [
+          /* @__PURE__ */ o.jsx(N, {}),
+          /* @__PURE__ */ o.jsx(Z, { windowSize: i }),
+          /* @__PURE__ */ o.jsx(_, {})
+        ] }),
+        c ? i !== "small" ? /* @__PURE__ */ o.jsx(x, {}) : null : /* @__PURE__ */ o.jsx(
+          W,
+          {
+            variant: "primary",
+            size: i !== "small" ? "standard" : "xs-small",
+            label: z.connect,
+            style: { width: "fit-content" },
+            onClick: () => h(!0),
+            loading: p === "In-Progress"
+          }
+        )
+      ] }),
+      c ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+        /* @__PURE__ */ o.jsx(q, { children: b }),
+        i === "small" ? /* @__PURE__ */ o.jsx(x, {}) : null
+      ] }) : null,
+      p === "Error" ? /* @__PURE__ */ o.jsx(g, { children: /* @__PURE__ */ o.jsx(w, { windowSize: i, children: T }) }) : null,
+      d && !c ? /* @__PURE__ */ o.jsx(g, { children: /* @__PURE__ */ o.jsx(w, { windowSize: i, children: C }) }) : null
+    ] }),
+    /* @__PURE__ */ o.jsx(
+      L,
+      {
+        isAdmin: e,
+        isGoBackAllowed: !0,
+        isQBOPopupOpen: S,
+        companyName: y,
+        saveConnectionState: p,
+        handleOnConnectClick: j,
+        handleGoBack: () => h(!1)
+      }
+    )
+  ] });
+}, x = () => {
+  const { tags: e } = u.getLocalizedStrings().customerOnboardingPage, { connected: d } = e;
+  return /* @__PURE__ */ o.jsx(
+    E,
+    {
+      style: {
+        width: "max-content",
+        padding: 0,
+        marginTop: t.sp2
+      },
+      tagTitle: d,
+      textColor: {
+        color: new m(a.successDark),
+        borderColor: new m(a.successDark)
+      }
+    }
+  );
+}, F = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`, Q = s.div`
+  display: flex;
+  align-items: center;
+  padding-top: ${t.sp3};
+  padding-bottom: ${t.sp3};
+  width: ${(e) => r.sectionWidth.valuePx(e.windowSize)};
+`, A = s.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.theme.colors.primary};
+  ${(e) => `${G.title.style(e.windowSize)}`};
+`, H = s.div`
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => r.sectionWidth.valuePx(e.windowSize)};
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.sp2};
+  fill: ${(e) => e.theme.colors.grey1};
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: ${(e) => r.containerPadding.valuePx(e.windowSize)};
+  &:hover {
+    border: 1px solid ${(e) => e.theme.colors.primary};
+    fill: ${(e) => e.theme.colors.primary};
+  }
+`, g = s.div`
+  width: 100%;
+  display: flex;
+  margin-top: ${t.sp4};
+`, w = s($)`
+  display: flex;
+  color: ${a.important};
+`, O = s.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  row-gap: ${(e) => r.topElementsRowGap.valuePx(e.windowSize)};
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+`, q = s($)`
+  display: flex;
+  margin-top: ${t.sp2};
+  color: ${(e) => e.theme.colors.hero};
+`, M = s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.sp4};
+  justify-content: left;
+  color: ${(e) => e.theme.colors.primary};
+`, N = s(R)`
+  height: 20px;
+  width: auto;
+  color: ${(e) => e.theme.colors.primary};
+  cursor: pointer;
+`, Z = s(B)`
+  height: ${(e) => r.arrowIconWidthHeight.valuePx(e.windowSize)};
+  width: ${(e) => r.arrowIconWidthHeight.valuePx(e.windowSize)};
+  color: ${(e) => e.theme.colors.hero};
+`, _ = s(D)`
+  height: ${t.sp4};
+  color: ${(e) => e.theme.colors.primary};
+`, J = s.div`
+  margin-right: ${t.sp2};
+`, K = s(k)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${a.success};
+`, U = s.div`
+  height: ${t.sp3};
+  width: ${t.sp3};
+  border: 1px solid ${(e) => e.theme.colors.primary};
+  border-radius: 50%;
+`;
+export {
+  te as Q
+};

package/dist/ReimbursementApprovalRuleDetailPage-BE9OKhWj.cjs

@@ -0,0 +1,32 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./vendor-.pnpm-D0ILHvHB.cjs"),C=require("react"),x=require("@emotion/styled"),s=require("./index-DoK40ULp.cjs"),d=require("./FollowStepsSection-NhD0S5W9.cjs"),U="reimbursementApprovalRuleDetailPage",q="lowerBound",B="upperBound",R="steps",g="applyToExistingReimbursements",T={footerPadding:new s.ResponsiveSized(s.sp[2],s.sp[3])};function V({localData:e,approvalUpdateActionType:o,isLowerBoundDisabled:r=!1,isUpperBoundDisabled:l=!0,hideUpperBoundField:i=!1,onBackClick:j,onApprovalRuleDataUpdated:c,onResetClick:b,onSaveRuleClick:_,onSaveRuleSuccess:w}){const F=t.useTheme(),A=s.useWindowSizeContext(),n=s.appLocale.getLocalizedStrings().commonSetUp.approval,P=s.appLocale.getLocalizedStrings().spendManagement.reimbursement.reimbursementApproval,v=z(e,o==="approval_create"&&!r),y=t.useForm({mode:"all",reValidateMode:"onChange",defaultValues:v}),m=e.remiSetupApproverViewUpdateData?.updateStatus,E=s.usePrevious(m?.fetchState),{upperBound:N}=v,{allApprovalRules:p,allAccountingClasses:$,remiSetupApproverViewUpdateData:f}=e;let h=p.length>1?p.length-1:0,S=p.length>0?p[h].criteria[0].range.min.amount:0;if(f!=null&&f.type==="approval_update"&&f.data!=null){const{approvalRuleId:a}=f.data;h=p.findIndex(u=>u.approvalRuleId===a),S=h>0?p[h-1].criteria[0].range.min.amount:0}const k=y.handleSubmit(()=>{_()}),D=async(a,u)=>{c(u)};return C.useEffect(()=>{const a=y.watch((u,{name:L})=>{if(L!=null&&u!=null){const O=t.cloneDeep(u);t.defer(()=>D(L,O))}});return()=>{a.unsubscribe()}}),C.useEffect(()=>{E==="In-Progress"&&m?.fetchState==="Completed"&&w()},[E,m?.fetchState,w]),t.jsxRuntimeExports.jsxs(X,{children:[t.jsxRuntimeExports.jsx(s.NavBar,{title:o==="approval_create"?n.newApproval:n.editApproval,backgroundColor:F.colors.grey4,style:{zIndex:4},onBackClick:()=>{j()},source:"ReimbursementApprovalRuleDetailPage"}),t.jsxRuntimeExports.jsx(J,{children:t.jsxRuntimeExports.jsxs(t.FormProvider,{...y,children:[t.jsxRuntimeExports.jsx(Q,{children:t.jsxRuntimeExports.jsx("form",{id:I(U),onSubmit:k,children:t.jsxRuntimeExports.jsxs(K,{children:[t.jsxRuntimeExports.jsx(d.LabeledMultiTextField,{label:{label:i?P.amountPerRemiGreaterLabel:P.amountPerRemiLabel},firstText:{type:"number",name:q,placeholder:"$0",options:{required:!0,max:N===1/0?Number.MAX_SAFE_INTEGER-1:N-1,min:S,validate:a=>r?!0:a!=null&&a>S},isDisabled:r,additionalInfoLabel:n.firstRuleLowerBoundInfoLabel,additionalErrorLabel:n.firstRuleErrorInfoLabel},secondText:{type:"number",name:B,placeholder:"Infinity",isDisabled:l,hideField:i,additionalInfoLabel:n.upperBoundInfoLabel}}),t.jsxRuntimeExports.jsx(Y,{}),t.jsxRuntimeExports.jsx(d.FollowStepsSection,{sectionId:R,label:{label:n.followStepsLabel},approversPlaceholder:n.approversPlaceholder,notifiersPlaceholder:n.notifiersPlaceholder,allUserWithRoles:e.allApprovers,filteredApprovers:e.filteredApprovers.map(a=>a.user),allAttributes:e.allAttributes,filteredAttributes:e.filteredAttributes,allAccountingClasses:$,stepsInfo:v[R],userSelectPlaceholder:n.userSelectPlaceholder,approveNotifyPlaceholder:n.approveNotifyPlaceholder,productType:"zeni_reimbursements"})]})})}),t.jsxRuntimeExports.jsx(s.Footer,{formId:I(U),primaryBtn:{label:n.saveBtnText,isLoading:m?.fetchState==="In-Progress",isDisabled:m?.fetchState==="In-Progress",style:{width:"85px",minWidth:"auto"}},topComponent:o==="approval_create"?null:t.jsxRuntimeExports.jsx(s.LabeledGroupedCheckBoxField,{name:g,mode:"always_on",checkBoxes:[{value:g,label:n.applyToExistingReimbursements,defaultChecked:!0,groupLabel:!1}],style:{width:"100%"}}),showCancel:!0,cancelBtn:{label:n.cancelBtnText,isLoading:!1,style:{width:"85px",minWidth:"auto"},onClick:b},containerStyle:{justifyContent:A==="small"?"space-between":"center"},style:{padding:T.footerPadding.valuePx(A)},separatorStyle:{marginRight:s.Space.sp4}})]})})]})}const z=(e,o)=>{const{criteria:r,steps:l}=e.remiSetupApproverViewUpdateData?.data??{};return{[g]:[g],[R]:M(e.allApprovers.map(i=>i.user),e.filteredApprovers.map(i=>i.user),d.getNonUserOptions(e.allAttributes),d.getNonUserOptions(e.filteredAttributes),l??[])??[],[q]:o?void 0:r!=null?r.range.min.amount??0:0,[B]:r!=null?r.range.max==null?1/0:r.range.max.amount:1/0}},M=(e,o,r,l,i)=>i&&i.length>0?i.map((c,b)=>({stepIndex:b,stepType:{selectedOption:c.action,allOptions:d.requireAndNotifyOptions},actors:{allUsers:o,selectedUsers:W(e,c.actors),allNonUsers:l,selectedNonUsers:G(r,c.actors)}})):[{stepIndex:0,stepType:{selectedOption:"require_approval",allOptions:d.requireAndNotifyOptions},actors:{allUsers:o,selectedUsers:[],allNonUsers:l,selectedNonUsers:[]}}],W=(e,o)=>e.filter(r=>r.userId!=null&&o.findIndex(l=>l.userId===r.userId)>-1),G=(e,o)=>e.filter(r=>o.findIndex(l=>l.subType===r.value)>-1),I=e=>`${e}_form`,H=e=>`${e}`,X=x.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey4};
+`,J=x.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+`,K=x.div`
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  box-shadow: ${e=>`${s.Space.sp0} 2px ${s.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${s.Space.sp2};
+`,Q=x.div`
+  display: flex;
+  justify-content: flex-start;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`,Y=x.div`
+  display: flex;
+  flex: 1;
+  background-color: ${e=>e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`;exports.D=T;exports.default=V;exports.uniqueFormName=I;exports.uniqueName=H;

package/dist/ReimbursementApprovalRuleDetailPage-D7gKrP67.js

@@ -0,0 +1,272 @@
+import { u as M, g as O, i as G, h as H, j as o, F as X } from "./vendor-.pnpm-B2klaOGU.js";
+import { useEffect as N } from "react";
+import c from "@emotion/styled";
+import { R as J, D as C, u as K, a as B, aD as Q, aE as Y, ao as Z, S as h, fN as ee } from "./index-BveTtfdM.js";
+import { L as te, F as re, g as U, r as E } from "./FollowStepsSection-Ddg6p5Kx.js";
+const F = "reimbursementApprovalRuleDetailPage", _ = "lowerBound", $ = "upperBound", S = "steps", x = "applyToExistingReimbursements", se = {
+  footerPadding: new J(C[2], C[3])
+};
+function be({
+  localData: e,
+  approvalUpdateActionType: s,
+  isLowerBoundDisabled: t = !1,
+  isUpperBoundDisabled: n = !0,
+  hideUpperBoundField: l = !1,
+  onBackClick: I,
+  onApprovalRuleDataUpdated: d,
+  onResetClick: g,
+  onSaveRuleClick: D,
+  onSaveRuleSuccess: w
+}) {
+  const k = M(), A = K(), r = B.getLocalizedStrings().commonSetUp.approval, R = B.getLocalizedStrings().spendManagement.reimbursement.reimbursementApproval, b = oe(
+    e,
+    s === "approval_create" && !t
+  ), v = O({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: b
+  }), u = e.remiSetupApproverViewUpdateData?.updateStatus, P = Q(u?.fetchState), { upperBound: L } = b, {
+    allApprovalRules: i,
+    allAccountingClasses: V,
+    remiSetupApproverViewUpdateData: m
+  } = e;
+  let f = i.length > 1 ? i.length - 1 : 0, y = i.length > 0 ? i[f].criteria[0].range.min.amount : 0;
+  if (m != null && m.type === "approval_update" && m.data != null) {
+    const { approvalRuleId: a } = m.data;
+    f = i.findIndex(
+      (p) => p.approvalRuleId === a
+    ), y = f > 0 ? i[f - 1].criteria[0].range.min.amount : 0;
+  }
+  const z = v.handleSubmit(() => {
+    D();
+  }), W = async (a, p) => {
+    d(p);
+  };
+  return N(() => {
+    const a = v.watch((p, { name: j }) => {
+      if (j != null && p != null) {
+        const q = G(p);
+        H(
+          () => W(
+            j,
+            q
+          )
+        );
+      }
+    });
+    return () => {
+      a.unsubscribe();
+    };
+  }), N(() => {
+    P === "In-Progress" && u?.fetchState === "Completed" && w();
+  }, [P, u?.fetchState, w]), /* @__PURE__ */ o.jsxs(ie, { children: [
+    /* @__PURE__ */ o.jsx(
+      Y,
+      {
+        title: s === "approval_create" ? r.newApproval : r.editApproval,
+        backgroundColor: k.colors.grey4,
+        style: { zIndex: 4 },
+        onBackClick: () => {
+          I();
+        },
+        source: "ReimbursementApprovalRuleDetailPage"
+      }
+    ),
+    /* @__PURE__ */ o.jsx(pe, { children: /* @__PURE__ */ o.jsxs(X, { ...v, children: [
+      /* @__PURE__ */ o.jsx(ue, { children: /* @__PURE__ */ o.jsx(
+        "form",
+        {
+          id: T(F),
+          onSubmit: z,
+          children: /* @__PURE__ */ o.jsxs(de, { children: [
+            /* @__PURE__ */ o.jsx(
+              te,
+              {
+                label: {
+                  label: l ? R.amountPerRemiGreaterLabel : R.amountPerRemiLabel
+                },
+                firstText: {
+                  type: "number",
+                  name: _,
+                  placeholder: "$0",
+                  options: {
+                    required: !0,
+                    max: L === 1 / 0 ? Number.MAX_SAFE_INTEGER - 1 : L - 1,
+                    min: y,
+                    validate: (a) => t ? !0 : a != null && a > y
+                  },
+                  isDisabled: t,
+                  additionalInfoLabel: r.firstRuleLowerBoundInfoLabel,
+                  additionalErrorLabel: r.firstRuleErrorInfoLabel
+                },
+                secondText: {
+                  type: "number",
+                  name: $,
+                  placeholder: "Infinity",
+                  isDisabled: n,
+                  hideField: l,
+                  additionalInfoLabel: r.upperBoundInfoLabel
+                }
+              }
+            ),
+            /* @__PURE__ */ o.jsx(ce, {}),
+            /* @__PURE__ */ o.jsx(
+              re,
+              {
+                sectionId: S,
+                label: {
+                  label: r.followStepsLabel
+                },
+                approversPlaceholder: r.approversPlaceholder,
+                notifiersPlaceholder: r.notifiersPlaceholder,
+                allUserWithRoles: e.allApprovers,
+                filteredApprovers: e.filteredApprovers.map(
+                  (a) => a.user
+                ),
+                allAttributes: e.allAttributes,
+                filteredAttributes: e.filteredAttributes,
+                allAccountingClasses: V,
+                stepsInfo: b[S],
+                userSelectPlaceholder: r.userSelectPlaceholder,
+                approveNotifyPlaceholder: r.approveNotifyPlaceholder,
+                productType: "zeni_reimbursements"
+              }
+            )
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ o.jsx(
+        Z,
+        {
+          formId: T(F),
+          primaryBtn: {
+            label: r.saveBtnText,
+            isLoading: u?.fetchState === "In-Progress",
+            isDisabled: u?.fetchState === "In-Progress",
+            style: {
+              width: "85px",
+              minWidth: "auto"
+            }
+          },
+          topComponent: s === "approval_create" ? null : /* @__PURE__ */ o.jsx(
+            ee,
+            {
+              name: x,
+              mode: "always_on",
+              checkBoxes: [
+                {
+                  value: x,
+                  label: r.applyToExistingReimbursements,
+                  defaultChecked: !0,
+                  groupLabel: !1
+                }
+              ],
+              style: { width: "100%" }
+            }
+          ),
+          showCancel: !0,
+          cancelBtn: {
+            label: r.cancelBtnText,
+            isLoading: !1,
+            style: {
+              width: "85px",
+              minWidth: "auto"
+            },
+            onClick: g
+          },
+          containerStyle: {
+            justifyContent: A === "small" ? "space-between" : "center"
+          },
+          style: { padding: se.footerPadding.valuePx(A) },
+          separatorStyle: { marginRight: h.sp4 }
+        }
+      )
+    ] }) })
+  ] });
+}
+const oe = (e, s) => {
+  const { criteria: t, steps: n } = e.remiSetupApproverViewUpdateData?.data ?? {};
+  return {
+    [x]: [x],
+    [S]: ne(
+      e.allApprovers.map((l) => l.user),
+      e.filteredApprovers.map((l) => l.user),
+      U(e.allAttributes),
+      U(e.filteredAttributes),
+      n ?? []
+    ) ?? [],
+    [_]: s ? void 0 : t != null ? t.range.min.amount ?? 0 : 0,
+    [$]: t != null ? t.range.max == null ? 1 / 0 : t.range.max.amount : 1 / 0
+  };
+}, ne = (e, s, t, n, l) => l && l.length > 0 ? l.map((d, g) => ({
+  stepIndex: g,
+  stepType: {
+    selectedOption: d.action,
+    allOptions: E
+  },
+  actors: {
+    allUsers: s,
+    selectedUsers: le(e, d.actors),
+    allNonUsers: n,
+    selectedNonUsers: ae(t, d.actors)
+  }
+})) : [
+  {
+    stepIndex: 0,
+    stepType: {
+      selectedOption: "require_approval",
+      allOptions: E
+    },
+    actors: {
+      allUsers: s,
+      selectedUsers: [],
+      allNonUsers: n,
+      selectedNonUsers: []
+    }
+  }
+], le = (e, s) => e.filter(
+  (t) => t.userId != null && s.findIndex(
+    (n) => n.userId === t.userId
+  ) > -1
+), ae = (e, s) => e.filter(
+  (t) => s.findIndex(
+    (n) => n.subType === t.value
+  ) > -1
+), T = (e) => `${e}_form`, ve = (e) => `${e}`, ie = c.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, pe = c.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+`, de = c.div`
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${h.sp0} 2px ${h.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${h.sp2};
+`, ue = c.div`
+  display: flex;
+  justify-content: flex-start;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`, ce = c.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`;
+export {
+  se as D,
+  be as default,
+  T as uniqueFormName,
+  ve as uniqueName
+};