@zeniai/web-components 3.17.12 → 3.17.14

package/dist/BillPayApprovalRuleDetailPage-B8zFj9U6.js

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

package/dist/BillPayApprovalRuleDetailPage-UbBIlAkB.cjs

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

package/dist/BillPayApprovalRulesPage-CLpy21Ck.cjs

@@ -0,0 +1,241 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),s=require("@emotion/styled"),t=require("./index-DHSetD4K.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(-1,-t.sp[1])},b={stepper:new t.ResponsiveSizedStyle("smallRegular","standardRegular"),amount:new t.ResponsiveSizedStyle("standardRegular","largeMedium")},I=({showDeleteBtn:e=!1,isLastSection:w=!1,approvalRule:a,onEditRuleClick:v,onDeleteRuleClick:x})=>{const[u,m]=T.useState(!1),r=t.useWindowSizeContext(),{range:d}=a.criteria[0],{steps:h,approvalRuleId:c}=a,n=t.appLocale.getLocalizedStrings().commonSetUp.approval,S=()=>{m(!0)},z={onOkClick:()=>{m(!1),x?.(c)},onCancelClick:()=>{m(!1)}};return o.jsxRuntimeExports.jsxs(A,{windowSize:r,isLastSection:w,children:[o.jsxRuntimeExports.jsxs(C,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(H,{children:[o.jsxRuntimeExports.jsxs(f,{windowSize:r,children:[n.from," ",t.amountToString("0,0",d.min)]}),o.jsxRuntimeExports.jsxs(k,{children:[o.jsxRuntimeExports.jsx($,{}),o.jsxRuntimeExports.jsx(W,{}),o.jsxRuntimeExports.jsx($,{})]}),d.max==null?o.jsxRuntimeExports.jsx(G,{}):o.jsxRuntimeExports.jsx(f,{windowSize:r,children:t.amountToString("0,0",{...d.min,amount:d.max.amount})})]}),o.jsxRuntimeExports.jsxs(U,{className:"icons",children:[e&&o.jsxRuntimeExports.jsx(_,{onClick:S,"data-testid":t.generateDataTestId("delete-approval-rule-bill-pay",a.approvalRuleId)}),o.jsxRuntimeExports.jsx(q,{onClick:()=>{v(c)},"data-testid":t.generateDataTestId("edit-approval-rule-bill-pay",a.approvalRuleId)})]})]}),o.jsxRuntimeExports.jsx(B,{windowSize:r,children:o.jsxRuntimeExports.jsx(L,{isSingleStep:h.length===1,windowSize:r,children:h.map((l,P)=>o.jsxRuntimeExports.jsxs(D,{isSingleStep:h.length===1,className:"stepperItem",windowSize:r,children:[l.action==="require_approval"?o.jsxRuntimeExports.jsx(M,{children:n.requireText}):o.jsxRuntimeExports.jsx(N,{children:n.notifyText}),l.nonUserActors!=null&&l.nonUserActors.filter(p=>p.subType!=null).map((p,E)=>o.jsxRuntimeExports.jsxs(R,{children:[o.jsxRuntimeExports.jsx(y,{children:p.subType!=null?n.nonUsers[p.subType].label:null}),l.operator!="is"?o.jsxRuntimeExports.jsx(j,{className:"operator",children:l.operator}):null]},`${p.subType}_${E}`)),l.actors.map(p=>o.jsxRuntimeExports.jsxs(R,{children:[o.jsxRuntimeExports.jsxs(y,{children:[p.firstName," ",p.lastName]}),l.operator!="is"?o.jsxRuntimeExports.jsx(j,{className:"operator",children:l.operator}):null]},p.userId))]},P))})}),u?o.jsxRuntimeExports.jsx(t.ConfirmationPopup,{titleComponent:o.jsxRuntimeExports.jsx(t.ConfirmationPopUpTitle,{children:n.deleteApprovalRuleTitle}),descriptionComponent:o.jsxRuntimeExports.jsx(t.ConfirmationPopUpDescription,{children:n.deleteApprovalRuleDesc}),primaryButtonText:n.deleteTxt,proceedButtonVariant:"danger",secondaryButtonText:n.cancelBtnText,action:z}):null]})},A=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};
+    }
+  }
+`,C=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};
+`,B=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;
+`,L=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%;
+    }
+  }
+`,M=s.span`
+  color: ${t.Colors.alertDark};
+`,N=s.span`
+  color: ${t.Colors.successDark};
+`,y=s.span`
+  color: ${e=>e.theme.colors.primary};
+`,H=s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp2};
+`,U=s.div`
+  display: flex;
+  gap: ${t.Space.sp5};
+`,_=s(t.SvgDelete)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${t.Colors.important};
+  }
+`,q=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};
+  }
+`,G=s(t.SvgInfinite)`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,j=s.span`
+  color: ${e=>e.theme.colors.hero};
+`,R=s.div`
+  display: inherit;
+  gap: inherit;
+`,f=s.span`
+  ${e=>`${b.amount.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.primary};
+  word-break: break-word;
+`,g={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]),updatingApprovalRulesPaddingTop:new t.ResponsiveSized(12,t.sp[5])},O=({approvalView:e,onBackClick:w,onEditRuleClick:a,onDeleteRuleClick:v})=>{const x=t.useWindowSizeContext(),{fetchState:u,deleteStatus:m}=e,r=t.appLocale.getLocalizedStrings().commonSetUp.approval,d=t.appLocale.getLocalizedStrings().spendManagement.billPay.billPayApproval,h=m.fetchState,c=e.listeningToPusherEvent;return o.jsxRuntimeExports.jsxs(F,{children:[o.jsxRuntimeExports.jsx(t.NavBar,{title:r.approvalPageHeader,style:{zIndex:4},onBackClick:()=>{w()},source:"BillPayApprovalRulesPage"}),o.jsxRuntimeExports.jsxs(J,{children:[o.jsxRuntimeExports.jsx(Q,{windowSize:x,children:d.approvalPageSubTitle}),u==="In-Progress"||u==="Not-Started"||h==="In-Progress"||c===!0?o.jsxRuntimeExports.jsxs(K,{children:[o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:c===!0?"Large":"ExtraLarge",start:!0}),c===!0&&o.jsxRuntimeExports.jsx(X,{windowSize:x,children:r.updatingApprovalRules.replace("__entity__","bills")})]}):u==="Completed"?o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[e.allApprovalRules.map((n,S)=>o.jsxRuntimeExports.jsx(I,{showDeleteBtn:S!==0,approvalRule:n,isLastSection:S===e.allApprovalRules.length-1,onEditRuleClick:a,onDeleteRuleClick:v},n.approvalRuleId)),o.jsxRuntimeExports.jsxs(Y,{windowSize:x,onClick:()=>{a()},"data-testid":t.generateDataTestId("add-approval-rule-bill-pay"),children:[o.jsxRuntimeExports.jsx(Z,{}),o.jsxRuntimeExports.jsx(V,{children:r.addApprovalText})]})]}):null]})]})},F=s.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey4};
+`,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%;
+  min-height: calc(100vh - 150px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: ${t.Space.sp3};
+  background-color: ${e=>e.theme.colors.grey4};
+`,Q=s(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${e=>g.titleWidth.valuePx(e.windowSize)};
+  padding-top: ${e=>g.subTitlePaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${e=>g.subTitlePaddingBottom.valuePx(e.windowSize)};
+`,X=s(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  margin-top: ${t.Space.sp3};
+`,Y=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=>g.addApprovalGap.valuePx(e.windowSize)};
+
+  width: ${e=>g.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};
+  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: ${t.Space.sp6};
+`,Z=s(t.SvgAddRound)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+`,V=s.div`
+  color: ${e=>e.theme.colors.hero};
+`;exports.default=O;