@zeniai/web-components 3.16.66 → 3.16.67

package/dist/BillPayApprovalRuleDetailPage-BKtro8T8.cjs

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

package/dist/BillPayApprovalRuleDetailPage-De1F5H5N.js

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

package/dist/BillPayApprovalRulesPage-BYIRXecX.js

@@ -0,0 +1,415 @@
+import { j as t } from "./vendor-.pnpm-DtFedGku.js";
+import o from "@emotion/styled";
+import { u as R, a as v, a5 as j, j as S, aN as M, aO as H, aP as U, R as i, S as r, y as E, av as P, af as G, C as b, z as O, a3 as q, t as _, D as s, aE as F, A as J, p as k, w as K } from "./index-BKbfwHLi.js";
+import { useState as Q } from "react";
+const n = {
+  sectionWidth: new i(343, 580, 726),
+  ruleWrapperPadding: new i(s[3], s[4]),
+  wrapperGap: new i(s[4], s[3]),
+  wrapperMarginBottom: new i(s[6], s[8]),
+  lastWrapperMarginBottom: new i(s[5], s[9]),
+  stepperWidthHeight: new i(20, s[5]),
+  stepperItemLeft: new i(-29, -23),
+  stepperItemTop: new i(2, s[0]),
+  stepperItemPaddingLeft: new i(s[0], 10),
+  stepperItemMinHeight: new i(22, 28),
+  stepperLeft: new i(11, 17),
+  stepperTop: new i(2, s[0]),
+  stepperContentTop: new i(-1, -s[1])
+}, W = {
+  stepper: new P("smallRegular", "standardRegular"),
+  amount: new P("standardRegular", "largeMedium")
+}, X = ({
+  showDeleteBtn: e = !1,
+  isLastSection: y = !1,
+  approvalRule: c,
+  onEditRuleClick: f,
+  onDeleteRuleClick: $
+}) => {
+  const [m, x] = Q(!1), a = R(), { range: h } = c.criteria[0], { steps: u, approvalRuleId: g } = c, l = v.getLocalizedStrings().commonSetUp.approval, B = () => {
+    x(!0);
+  }, L = {
+    onOkClick: () => {
+      x(!1), $?.(g);
+    },
+    onCancelClick: () => {
+      x(!1);
+    }
+  };
+  return /* @__PURE__ */ t.jsxs(
+    Y,
+    {
+      windowSize: a,
+      isLastSection: y,
+      children: [
+        /* @__PURE__ */ t.jsxs(Z, { windowSize: a, children: [
+          /* @__PURE__ */ t.jsxs(ne, { children: [
+            /* @__PURE__ */ t.jsxs(C, { windowSize: a, children: [
+              l.from,
+              " ",
+              j("0,0", h.min)
+            ] }),
+            /* @__PURE__ */ t.jsxs(V, { children: [
+              /* @__PURE__ */ t.jsx(z, {}),
+              /* @__PURE__ */ t.jsx(ee, {}),
+              /* @__PURE__ */ t.jsx(z, {})
+            ] }),
+            h.max == null ? /* @__PURE__ */ t.jsx(de, {}) : /* @__PURE__ */ t.jsx(C, { windowSize: a, children: j("0,0", { ...h.min, amount: h.max.amount }) })
+          ] }),
+          /* @__PURE__ */ t.jsxs(le, { className: "icons", children: [
+            e && /* @__PURE__ */ t.jsx(
+              ae,
+              {
+                onClick: B,
+                "data-testid": S(
+                  "delete-approval-rule-bill-pay",
+                  c.approvalRuleId
+                )
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              pe,
+              {
+                onClick: () => {
+                  f(g);
+                },
+                "data-testid": S(
+                  "edit-approval-rule-bill-pay",
+                  c.approvalRuleId
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ t.jsx(te, { windowSize: a, children: /* @__PURE__ */ t.jsx(oe, { isSingleStep: u.length === 1, windowSize: a, children: u.map((d, D) => /* @__PURE__ */ t.jsxs(
+          re,
+          {
+            isSingleStep: u.length === 1,
+            className: "stepperItem",
+            windowSize: a,
+            children: [
+              d.action === "require_approval" ? /* @__PURE__ */ t.jsx(ie, { children: l.requireText }) : /* @__PURE__ */ t.jsx(se, { children: l.notifyText }),
+              d.nonUserActors != null && d.nonUserActors.filter((p) => p.subType != null).map((p, N) => /* @__PURE__ */ t.jsxs(A, { children: [
+                /* @__PURE__ */ t.jsx(T, { children: p.subType != null ? l.nonUsers[p.subType].label : null }),
+                d.operator != "is" ? /* @__PURE__ */ t.jsx(I, { className: "operator", children: d.operator }) : null
+              ] }, `${p.subType}_${N}`)),
+              d.actors.map((p) => /* @__PURE__ */ t.jsxs(A, { children: [
+                /* @__PURE__ */ t.jsxs(T, { children: [
+                  p.firstName,
+                  " ",
+                  p.lastName
+                ] }),
+                d.operator != "is" ? /* @__PURE__ */ t.jsx(I, { className: "operator", children: d.operator }) : null
+              ] }, p.userId))
+            ]
+          },
+          D
+        )) }) }),
+        m ? /* @__PURE__ */ t.jsx(
+          M,
+          {
+            titleComponent: /* @__PURE__ */ t.jsx(U, { children: l.deleteApprovalRuleTitle }),
+            descriptionComponent: /* @__PURE__ */ t.jsx(H, { children: l.deleteApprovalRuleDesc }),
+            primaryButtonText: l.deleteTxt,
+            proceedButtonVariant: "danger",
+            secondaryButtonText: l.cancelBtnText,
+            action: L
+          }
+        ) : null
+      ]
+    }
+  );
+}, Y = o.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${(e) => n.wrapperGap.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => e.isLastSection ? n.lastWrapperMarginBottom.valuePx(e.windowSize) : n.wrapperMarginBottom.valuePx(e.windowSize)};
+  .icons {
+    display: none;
+  }
+  &:hover {
+    .icons {
+      display: flex;
+    }
+    > div:last-of-type {
+      border-color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, Z = o(E)`
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  width: ${(e) => n.sectionWidth.valuePx(e.windowSize)};
+  gap: ${r.sp2};
+`, V = o.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`, ee = o.div`
+  width: ${r.sp8};
+  height: 2px;
+  background-color: ${(e) => e.theme.colors.primary};
+`, z = o.div`
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: ${(e) => e.theme.colors.primary};
+`, te = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: ${(e) => n.ruleWrapperPadding.valuePx(e.windowSize)};
+  gap: 10px;
+
+  width: ${(e) => n.sectionWidth.valuePx(e.windowSize)};
+  background-color: ${(e) => e.theme.colors.grey5};
+
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+
+  box-shadow: ${(e) => `${r.sp0} 2px ${r.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${r.sp2};
+
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+  justify-content: center;
+  box-sizing: border-box;
+  position: relative;
+`, oe = o.ul`
+  ${(e) => `${W.stepper.style(e.windowSize)}`};
+  position: relative;
+  padding-left: ${r.sp6};
+  list-style: none;
+  box-sizing: initial;
+  margin: 0;
+  &::before {
+    display: inline-block;
+    content: "";
+    position: absolute;
+    top: ${(e) => n.stepperTop.valuePx(e.windowSize)};
+    left: ${(e) => n.stepperLeft.valuePx(e.windowSize)};
+    width: 10px;
+    height: ${(e) => e.isSingleStep ? "0%" : "100%"};
+    border-left: 2px solid ${(e) => e.theme.colors.grey1};
+  }
+`, re = o.li`
+  position: relative;
+  counter-increment: list;
+  min-height: ${(e) => n.stepperItemMinHeight.valuePx(e.windowSize)};
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: ${(e) => n.stepperItemPaddingLeft.valuePx(e.windowSize)};
+  gap: ${r.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) => n.stepperItemTop.valuePx(e.windowSize)};
+    left: ${(e) => n.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) => n.stepperWidthHeight.valuePx(e.windowSize)};
+      height: ${(e) => n.stepperWidthHeight.valuePx(e.windowSize)};
+      top: ${(e) => n.stepperContentTop.valuePx(e.windowSize)};
+      left: -${r.sp6};
+      ${_.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%;
+    }
+  }
+`, ie = o.span`
+  color: ${b.alertDark};
+`, se = o.span`
+  color: ${b.successDark};
+`, T = o.span`
+  color: ${(e) => e.theme.colors.primary};
+`, ne = o.div`
+  display: flex;
+  align-items: center;
+  gap: ${r.sp2};
+`, le = o.div`
+  display: flex;
+  gap: ${r.sp5};
+`, ae = o(O)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${b.important};
+  }
+`, pe = o(q)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, de = o(G)`
+  width: ${r.sp4};
+  height: ${r.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, I = o.span`
+  color: ${(e) => e.theme.colors.hero};
+`, A = o.div`
+  display: inherit;
+  gap: inherit;
+`, C = o.span`
+  ${(e) => `${W.amount.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.primary};
+  word-break: break-word;
+`, w = {
+  width: new i(343, 580, 726),
+  titleWidth: new i(343, 580, 780),
+  addApprovalGap: new i(6, s[2]),
+  subTitlePaddingTop: new i(12, s[3]),
+  subTitlePaddingBottom: new i(28, s[7])
+}, Se = ({
+  approvalView: e,
+  onBackClick: y,
+  onEditRuleClick: c,
+  onDeleteRuleClick: f
+}) => {
+  const $ = R(), { fetchState: m, deleteStatus: x } = e, a = v.getLocalizedStrings().commonSetUp.approval, h = v.getLocalizedStrings().spendManagement.billPay.billPayApproval, u = x.fetchState;
+  return /* @__PURE__ */ t.jsxs(ce, { children: [
+    /* @__PURE__ */ t.jsx(
+      F,
+      {
+        title: a.approvalPageHeader,
+        style: { zIndex: 4 },
+        onBackClick: () => {
+          y();
+        },
+        source: "BillPayApprovalRulesPage"
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(he, { children: [
+      /* @__PURE__ */ t.jsx(xe, { windowSize: $, children: h.approvalPageSubTitle }),
+      m === "In-Progress" || m === "Not-Started" || u === "In-Progress" ? /* @__PURE__ */ t.jsx(me, { children: /* @__PURE__ */ t.jsx(J, { size: "ExtraLarge", start: !0 }) }) : m === "Completed" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        e.allApprovalRules.map((g, l) => /* @__PURE__ */ t.jsx(
+          X,
+          {
+            showDeleteBtn: l !== 0,
+            approvalRule: g,
+            isLastSection: l === e.allApprovalRules.length - 1,
+            onEditRuleClick: c,
+            onDeleteRuleClick: f
+          },
+          g.approvalRuleId
+        )),
+        /* @__PURE__ */ t.jsxs(
+          ue,
+          {
+            windowSize: $,
+            onClick: () => {
+              c();
+            },
+            "data-testid": S("add-approval-rule-bill-pay"),
+            children: [
+              /* @__PURE__ */ t.jsx(ge, {}),
+              /* @__PURE__ */ t.jsx(we, { children: a.addApprovalText })
+            ]
+          }
+        )
+      ] }) : null
+    ] })
+  ] });
+}, ce = o.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, he = o.div`
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`, me = o.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};
+`, xe = o(k)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${(e) => w.titleWidth.valuePx(e.windowSize)};
+  padding-top: ${(e) => w.subTitlePaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => w.subTitlePaddingBottom.valuePx(e.windowSize)};
+`, ue = o(k)`
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: ${r.sp3} ${r.sp4};
+  gap: ${(e) => w.addApprovalGap.valuePx(e.windowSize)};
+
+  width: ${(e) => w.width.valuePx(e.windowSize)};
+  height: ${r.sp8};
+
+  background: ${(e) => e.theme.colors.grey5};
+
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+
+  box-shadow: ${(e) => `${r.sp0} 2px ${r.sp1}
+    ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${r.sp2};
+  box-sizing: border-box;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    div {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    border-color: ${(e) => e.theme.colors.primary};
+  }
+  margin-bottom: ${r.sp6};
+`, ge = o(K)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+`, we = o.div`
+  color: ${(e) => e.theme.colors.hero};
+`;
+export {
+  Se as default
+};