@zeniai/web-components 3.16.84 → 3.16.85

package/dist/QBOSetupSection-DkEcQ1vG.js

@@ -0,0 +1,167 @@
+import { j as o, b as m } from "./vendor-.pnpm-DtFedGku.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, hQ as k, av as P, d as R, W as B, hN as E, G as $, D as n } from "./index-BrQvJ7aX.js";
+import G from "./QBOConnectionDialog-COIPjfUH.js";
+import { S as L } 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])
+}, D = {
+  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(Q, { windowSize: i, children: [
+    /* @__PURE__ */ o.jsxs(A, { windowSize: i, children: [
+      i === "small" ? /* @__PURE__ */ o.jsx(J, { children: c ? /* @__PURE__ */ o.jsx(K, {}) : /* @__PURE__ */ o.jsx(U, {}) }) : null,
+      /* @__PURE__ */ o.jsx(F, { windowSize: i, children: v })
+    ] }),
+    /* @__PURE__ */ o.jsxs(H, { windowSize: i, children: [
+      /* @__PURE__ */ o.jsxs(N, { windowSize: i, children: [
+        /* @__PURE__ */ o.jsxs(q, { children: [
+          /* @__PURE__ */ o.jsx(M, {}),
+          /* @__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(O, { 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(
+      G,
+      {
+        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)
+      }
+    }
+  );
+}, Q = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`, A = s.div`
+  display: flex;
+  align-items: center;
+  padding-top: ${t.sp3};
+  padding-bottom: ${t.sp3};
+  width: ${(e) => r.sectionWidth.valuePx(e.windowSize)};
+`, F = s.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.theme.colors.primary};
+  ${(e) => `${D.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};
+`, N = 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"};
+`, O = s($)`
+  display: flex;
+  margin-top: ${t.sp2};
+  color: ${(e) => e.theme.colors.hero};
+`, q = s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.sp4};
+  justify-content: left;
+  color: ${(e) => e.theme.colors.primary};
+`, M = 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(L)`
+  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-2rE38Jqr.cjs

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

package/dist/ReimbursementApprovalRuleDetailPage-OFskcW3o.js

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

package/dist/ReimbursementApprovalRulesPage-B4ZcA8ff.cjs

@@ -0,0 +1,237 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-CT-Z_-kn.cjs"),s=require("@emotion/styled"),t=require("./index-BOGO7v0l.cjs"),T=require("react"),i={sectionWidth:new t.ResponsiveSized(343,580,726),ruleWrapperPadding:new t.ResponsiveSized(t.sp[3],t.sp[4]),wrapperGap:new t.ResponsiveSized(t.sp[4],t.sp[3]),wrapperMarginBottom:new t.ResponsiveSized(t.sp[6],t.sp[8]),lastWrapperMarginBottom:new t.ResponsiveSized(t.sp[5],t.sp[9]),stepperWidthHeight:new t.ResponsiveSized(20,t.sp[5]),stepperItemLeft:new t.ResponsiveSized(-29,-23),stepperItemTop:new t.ResponsiveSized(2,t.sp[0]),stepperItemPaddingLeft:new t.ResponsiveSized(t.sp[0],10),stepperItemMinHeight:new t.ResponsiveSized(22,28),stepperLeft:new t.ResponsiveSized(11,17),stepperTop:new t.ResponsiveSized(2,t.sp[0]),stepperContentTop:new t.ResponsiveSized(t.sp[0],-t.sp[1])},b={stepper:new t.ResponsiveSizedStyle("smallRegular","standardRegular"),amount:new t.ResponsiveSizedStyle("standardRegular","largeRegular")},I=({showDeleteBtn:e=!1,isLastSection:S=!1,approvalRule:x,onEditRuleClick:w,onDeleteRuleClick:v})=>{const[h,a]=T.useState(!1),n=t.useWindowSizeContext(),{range:l}=x.criteria[0],{steps:u,approvalRuleId:c}=x,r=t.appLocale.getLocalizedStrings().commonSetUp.approval,g=()=>{a(!0)},z={onOkClick:()=>{a(!1),v?.(c)},onCancelClick:()=>{a(!1)}};return o.jsxRuntimeExports.jsxs(C,{windowSize:n,isLastSection:S,"data-testid":t.generateDataTestId("approval-rule-section",c),children:[o.jsxRuntimeExports.jsxs(A,{windowSize:n,children:[o.jsxRuntimeExports.jsxs(H,{children:[o.jsxRuntimeExports.jsxs(y,{windowSize:n,children:[r.from," ",t.amountToString("0,0",l.min)]}),o.jsxRuntimeExports.jsxs(k,{children:[o.jsxRuntimeExports.jsx($,{}),o.jsxRuntimeExports.jsx(W,{}),o.jsxRuntimeExports.jsx($,{})]}),l.max==null?o.jsxRuntimeExports.jsx(O,{}):o.jsxRuntimeExports.jsx(y,{windowSize:n,children:t.amountToString("0,0",{...l.min,amount:l.max.amount})})]}),o.jsxRuntimeExports.jsxs(q,{className:"icons",children:[e?o.jsxRuntimeExports.jsx(U,{onClick:g}):null,o.jsxRuntimeExports.jsx(G,{onClick:()=>{w(c)},"data-testid":t.generateDataTestId("edit-approval-rule",c)})]})]}),o.jsxRuntimeExports.jsx(L,{windowSize:n,children:o.jsxRuntimeExports.jsx(B,{isSingleStep:u.length===1,windowSize:n,children:u.map((d,E)=>o.jsxRuntimeExports.jsxs(D,{isSingleStep:u.length===1,className:"stepperItem",windowSize:n,children:[d.action==="require_approval"?o.jsxRuntimeExports.jsx(N,{children:r.requireText}):o.jsxRuntimeExports.jsx(M,{children:r.notifyText}),d.nonUserActors.filter(p=>p.subType!=null).map((p,P)=>o.jsxRuntimeExports.jsxs(f,{children:[o.jsxRuntimeExports.jsx(j,{children:p.subType!=null?r.nonUsers[p.subType].label:null}),d.operator!="is"?o.jsxRuntimeExports.jsx(R,{className:"operator",children:d.operator}):null]},`${p.subType}_${P}`)),d.actors.map(p=>o.jsxRuntimeExports.jsxs(f,{children:[o.jsxRuntimeExports.jsxs(j,{children:[p.firstName," ",p.lastName]}),d.operator!="is"?o.jsxRuntimeExports.jsx(R,{className:"operator",children:d.operator}):null]},p.userId))]},E))})}),h?o.jsxRuntimeExports.jsx(t.ConfirmationPopup,{titleComponent:o.jsxRuntimeExports.jsx(t.ConfirmationPopUpTitle,{children:r.deleteApprovalRuleTitle}),descriptionComponent:o.jsxRuntimeExports.jsx(t.ConfirmationPopUpDescription,{children:r.deleteApprovalRuleDesc}),primaryButtonText:r.deleteTxt,proceedButtonVariant:"danger",secondaryButtonText:r.cancelBtnText,action:z}):null]})},C=s.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${e=>i.wrapperGap.valuePx(e.windowSize)};
+  margin-bottom: ${e=>e.isLastSection?i.lastWrapperMarginBottom.valuePx(e.windowSize):i.wrapperMarginBottom.valuePx(e.windowSize)};
+  .icons {
+    display: none;
+  }
+  &:hover {
+    .icons {
+      display: flex;
+    }
+    > div:last-of-type {
+      border-color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,A=s(t.LargeMedium)`
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  width: ${e=>i.sectionWidth.valuePx(e.windowSize)};
+  gap: ${t.Space.sp2};
+`,k=s.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`,W=s.div`
+  width: ${t.Space.sp8};
+  height: 2px;
+  background-color: ${e=>e.theme.colors.primary};
+`,$=s.div`
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: ${e=>e.theme.colors.primary};
+`,L=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: ${e=>i.ruleWrapperPadding.valuePx(e.windowSize)};
+  gap: 10px;
+
+  width: ${e=>i.sectionWidth.valuePx(e.windowSize)};
+  background-color: ${e=>e.theme.colors.grey5};
+
+  border: 1px solid ${e=>e.theme.colors.grey3};
+
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.Space.sp2};
+
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+  justify-content: center;
+  box-sizing: border-box;
+  position: relative;
+`,B=s.ul`
+  ${e=>`${b.stepper.style(e.windowSize)}`};
+  position: relative;
+  padding-left: ${t.Space.sp6};
+  list-style: none;
+  box-sizing: initial;
+  margin: 0;
+  &::before {
+    display: inline-block;
+    content: "";
+    position: absolute;
+    top: ${e=>i.stepperTop.valuePx(e.windowSize)};
+    left: ${e=>i.stepperLeft.valuePx(e.windowSize)};
+    width: 10px;
+    height: ${e=>e.isSingleStep?"0%":"100%"};
+    border-left: 2px solid ${e=>e.theme.colors.grey1};
+  }
+`,D=s.li`
+  position: relative;
+  counter-increment: list;
+  min-height: ${e=>i.stepperItemMinHeight.valuePx(e.windowSize)};
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: ${e=>i.stepperItemPaddingLeft.valuePx(e.windowSize)};
+  gap: ${t.Space.sp1};
+
+  > div:last-of-type > span.operator:last-of-type {
+    visibility: hidden;
+  }
+
+  &:not(:last-child) {
+    padding-bottom: 20px;
+  }
+
+  &::before {
+    display: inline-block;
+    content: "";
+    position: absolute;
+    top: ${e=>i.stepperItemTop.valuePx(e.windowSize)};
+    left: ${e=>i.stepperItemLeft.valuePx(e.windowSize)};
+    height: ${e=>e.isSingleStep?"0%":"100%"};
+    width: 10px;
+  }
+
+  &.stepperItem {
+    flex-wrap: wrap;
+    &::before {
+      border-left: 2px solid ${e=>e.theme.colors.grey1};
+    }
+    &:last-child::before {
+      border-left: 2px solid ${e=>e.theme.colors.grey5};
+    }
+
+    &::after {
+      content: counter(list);
+      position: absolute;
+      width: ${e=>i.stepperWidthHeight.valuePx(e.windowSize)};
+      height: ${e=>i.stepperWidthHeight.valuePx(e.windowSize)};
+      top: ${e=>i.stepperContentTop.valuePx(e.windowSize)};
+      left: -${t.Space.sp6};
+      ${t.textStyles.standardMedium.css};
+      text-align: center;
+      color: ${e=>e.theme.colors.grey1};
+      border: 2px solid ${e=>e.theme.colors.grey1};
+      background-color: ${e=>e.theme.colors.grey5};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+    }
+  }
+`,N=s.span`
+  color: ${t.Colors.alertDark};
+`,M=s.span`
+  color: ${t.Colors.successDark};
+`,j=s.span`
+  color: ${e=>e.theme.colors.primary};
+`,H=s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp2};
+`,q=s.div`
+  display: flex;
+  gap: ${t.Space.sp5};
+`,U=s(t.SvgDelete)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${t.Colors.important};
+  }
+`,G=s(t.SvgEdit)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,O=s(t.SvgInfinite)`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,R=s.span`
+  color: ${e=>e.theme.colors.hero};
+`,f=s.div`
+  display: inherit;
+  gap: inherit;
+`,y=s.span`
+  ${e=>`${b.amount.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.primary};
+  word-break: break-word;
+`,m={width:new t.ResponsiveSized(343,580,726),titleWidth:new t.ResponsiveSized(343,580,780),addApprovalGap:new t.ResponsiveSized(6,t.sp[2]),subTitlePaddingTop:new t.ResponsiveSized(12,t.sp[3]),subTitlePaddingBottom:new t.ResponsiveSized(28,t.sp[7])},_=({approvalView:e,onBackClick:S,onEditRuleClick:x,onDeleteRuleClick:w})=>{const v=o.useTheme(),h=t.useWindowSizeContext(),{fetchState:a,deleteStatus:n}=e,l=t.appLocale.getLocalizedStrings().commonSetUp.approval,u=t.appLocale.getLocalizedStrings().spendManagement.reimbursement.reimbursementApproval,c=n.fetchState;return o.jsxRuntimeExports.jsxs(F,{children:[o.jsxRuntimeExports.jsx(t.NavBar,{title:l.approvalPageHeader,backgroundColor:v.colors.grey4,style:{zIndex:4},onBackClick:()=>{S()},source:"ReimbursementApprovalRulesPage"}),o.jsxRuntimeExports.jsxs(J,{children:[o.jsxRuntimeExports.jsx(Q,{windowSize:h,children:u.approvalPageSubTitle}),a==="In-Progress"||a==="Not-Started"||c==="In-Progress"?o.jsxRuntimeExports.jsx(K,{children:o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"ExtraLarge",start:!0})}):a==="Completed"?o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[e.allApprovalRules.map((r,g)=>o.jsxRuntimeExports.jsx(I,{showDeleteBtn:g!==0,approvalRule:r,isLastSection:g===e.allApprovalRules.length-1,onEditRuleClick:x,onDeleteRuleClick:w},r.approvalRuleId)),o.jsxRuntimeExports.jsxs(X,{windowSize:h,onClick:()=>{x()},"data-testid":t.generateDataTestId("add-approval-rule"),children:[o.jsxRuntimeExports.jsx(Y,{}),o.jsxRuntimeExports.jsx(Z,{children:l.addApprovalText})]})]}):null]})]})},F=s.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey4};
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1}
+    ${e.theme.colors.dropShadowNormal}`};
+`,J=s.div`
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`,K=s.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 110px);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${e=>e.theme.colors.grey4};
+`,Q=s(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${e=>m.titleWidth.valuePx(e.windowSize)};
+  padding-top: ${e=>m.subTitlePaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${e=>m.subTitlePaddingBottom.valuePx(e.windowSize)};
+`,X=s(t.StandardRegular)`
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: ${t.Space.sp3} ${t.Space.sp4};
+  gap: ${e=>m.addApprovalGap.valuePx(e.windowSize)};
+
+  width: ${e=>m.width.valuePx(e.windowSize)};
+  height: ${t.Space.sp8};
+
+  background: ${e=>e.theme.colors.grey5};
+
+  border: 1px solid ${e=>e.theme.colors.grey3};
+
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1}
+    ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.Space.sp2};
+  color: ${e=>e.theme.colors.hero};
+  box-sizing: border-box;
+  &:hover {
+    div {
+      color: ${e=>e.theme.colors.primary};
+    }
+    color: ${e=>e.theme.colors.primary};
+    border-color: ${e=>e.theme.colors.primary};
+  }
+  margin-bottom: ${t.Space.sp6};
+`,Y=s(t.SvgAddRound)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+`,Z=s.div`
+  color: ${e=>e.theme.colors.hero};
+`;exports.default=_;