@zeniai/web-components 3.16.50 → 3.16.51

package/dist/BillPayApprovalRuleDetailPage-BPtXueBv.cjs

@@ -1,27 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./vendor-.pnpm-DHyNpoQL.cjs"),B=require("react"),g=require("@emotion/styled"),t=require("./index-BQLTolbB.cjs"),d=require("./FollowStepsSection-Z7qxq32b.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-kAS0qP_b.js

@@ -1,247 +0,0 @@
-import { g as M, i as O, h as W, j as o, F as k } from "./vendor-.pnpm-BZbZ6JJC.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-D4BzzXbc.js";
-import { L as Q, F as Y, g as $, r as j } from "./FollowStepsSection-tuKW99KV.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-DUNR0TAP.cjs

@@ -1,235 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-DHyNpoQL.cjs"),s=require("@emotion/styled"),t=require("./index-BQLTolbB.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])},R={stepper:new t.ResponsiveSizedStyle("smallRegular","standardRegular"),amount:new t.ResponsiveSizedStyle("standardRegular","largeMedium")},I=({showDeleteBtn:e=!1,isLastSection:S=!1,approvalRule:a,onEditRuleClick:w,onDeleteRuleClick:g})=>{const[c,x]=T.useState(!1),n=t.useWindowSizeContext(),{range:d}=a.criteria[0],{steps:u,approvalRuleId:m}=a,r=t.appLocale.getLocalizedStrings().commonSetUp.approval,b=()=>{x(!0)},z={onOkClick:()=>{x(!1),g?.(m)},onCancelClick:()=>{x(!1)}};return o.jsxRuntimeExports.jsxs(A,{windowSize:n,isLastSection:S,children:[o.jsxRuntimeExports.jsxs(C,{windowSize:n,children:[o.jsxRuntimeExports.jsxs(H,{children:[o.jsxRuntimeExports.jsxs(f,{windowSize:n,children:[r.from," ",t.amountToString("0,0",d.min)]}),o.jsxRuntimeExports.jsxs(k,{children:[o.jsxRuntimeExports.jsx(v,{}),o.jsxRuntimeExports.jsx(W,{}),o.jsxRuntimeExports.jsx(v,{})]}),d.max==null?o.jsxRuntimeExports.jsx(O,{}):o.jsxRuntimeExports.jsx(f,{windowSize:n,children:t.amountToString("0,0",{...d.min,amount:d.max.amount})})]}),o.jsxRuntimeExports.jsxs(q,{className:"icons",children:[e&&o.jsxRuntimeExports.jsx(U,{onClick:b,"data-testid":t.generateDataTestId("delete-approval-rule-bill-pay",a.approvalRuleId)}),o.jsxRuntimeExports.jsx(G,{onClick:()=>{w(m)},"data-testid":t.generateDataTestId("edit-approval-rule-bill-pay",a.approvalRuleId)})]})]}),o.jsxRuntimeExports.jsx(B,{windowSize:n,children:o.jsxRuntimeExports.jsx(L,{isSingleStep:u.length===1,windowSize:n,children:u.map((l,P)=>o.jsxRuntimeExports.jsxs(D,{isSingleStep:u.length===1,className:"stepperItem",windowSize:n,children:[l.action==="require_approval"?o.jsxRuntimeExports.jsx(M,{children:r.requireText}):o.jsxRuntimeExports.jsx(N,{children:r.notifyText}),l.nonUserActors!=null&&l.nonUserActors.filter(p=>p.subType!=null).map((p,E)=>o.jsxRuntimeExports.jsxs(j,{children:[o.jsxRuntimeExports.jsx($,{children:p.subType!=null?r.nonUsers[p.subType].label:null}),l.operator!="is"?o.jsxRuntimeExports.jsx(y,{className:"operator",children:l.operator}):null]},`${p.subType}_${E}`)),l.actors.map(p=>o.jsxRuntimeExports.jsxs(j,{children:[o.jsxRuntimeExports.jsxs($,{children:[p.firstName," ",p.lastName]}),l.operator!="is"?o.jsxRuntimeExports.jsx(y,{className:"operator",children:l.operator}):null]},p.userId))]},P))})}),c?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]})},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};
-`,v=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=>`${R.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};
-`,$=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};
-`,y=s.span`
-  color: ${e=>e.theme.colors.hero};
-`,j=s.div`
-  display: inherit;
-  gap: inherit;
-`,f=s.span`
-  ${e=>`${R.amount.style(e.windowSize)}`};
-  color: ${e=>e.theme.colors.primary};
-  word-break: break-word;
-`,h={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:a,onDeleteRuleClick:w})=>{const g=t.useWindowSizeContext(),{fetchState:c,deleteStatus:x}=e,n=t.appLocale.getLocalizedStrings().commonSetUp.approval,d=t.appLocale.getLocalizedStrings().spendManagement.billPay.billPayApproval,u=x.fetchState;return o.jsxRuntimeExports.jsxs(F,{children:[o.jsxRuntimeExports.jsx(t.NavBar,{title:n.approvalPageHeader,style:{zIndex:4},onBackClick:()=>{S()},source:"BillPayApprovalRulesPage"}),o.jsxRuntimeExports.jsxs(J,{children:[o.jsxRuntimeExports.jsx(Q,{windowSize:g,children:d.approvalPageSubTitle}),c==="In-Progress"||c==="Not-Started"||u==="In-Progress"?o.jsxRuntimeExports.jsx(K,{children:o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"ExtraLarge",start:!0})}):c==="Completed"?o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[e.allApprovalRules.map((m,r)=>o.jsxRuntimeExports.jsx(I,{showDeleteBtn:r!==0,approvalRule:m,isLastSection:r===e.allApprovalRules.length-1,onEditRuleClick:a,onDeleteRuleClick:w},m.approvalRuleId)),o.jsxRuntimeExports.jsxs(X,{windowSize:g,onClick:()=>{a()},"data-testid":t.generateDataTestId("add-approval-rule-bill-pay"),children:[o.jsxRuntimeExports.jsx(Y,{}),o.jsxRuntimeExports.jsx(Z,{children:n.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%;
-  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=>h.titleWidth.valuePx(e.windowSize)};
-  padding-top: ${e=>h.subTitlePaddingTop.valuePx(e.windowSize)};
-  padding-bottom: ${e=>h.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=>h.addApprovalGap.valuePx(e.windowSize)};
-
-  width: ${e=>h.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};
-`,Y=s(t.SvgAddRound)`
-  width: ${t.Space.sp3};
-  height: ${t.Space.sp3};
-`,Z=s.div`
-  color: ${e=>e.theme.colors.hero};
-`;exports.default=_;