@zeniai/web-app-ui 4.14.36-qa → 4.14.38-dev

package/dist/assets/NotificationsPage-D41h0mS6-lOcsglza.js

@@ -0,0 +1,685 @@
+import{y as Q,X as v,P as ei,c8 as ti,V as t,a_ as ii,M as oi,a9 as si,o as i,I as $e,O as B,gz as ai,x as _,hv as ni,w as Ie,L as ri,A as st,bN as at,an as nt,cR as rt,bV as lt,iR as dt,j as w,a as li,cP as he,ah as di,N as ci,d as ct,e as S,C as hi,bg as z,cc as ue,fI as pe,iS as fe,v as ht,m as ut,cU as E,f5 as pt,E as me,ba as ui,l as Z,hJ as pi,H as U,fi,ad as je,au as ge,iT as mi,b8 as ft,iU as ze,aT as gi}from"./index-BocbTmE1.js";import{a as g}from"./sentry-DINNQYpi.js";import{n,c as P}from"./mui-C_CXevf3.js";import{GN as xi,GO as bi,bG as K,bs as y,F9 as mt}from"./zeni-epic-state-a7Sj5mjO.js";import{R as wi}from"./SubTabSwitcher-CzGiuhk3-C7cKUv_v.js";import{d as gt}from"./useLongPress-GCK2COYQ-CI59nlOM.js";import{A as xt,t as bt,a as wt,E as yt,L as $t,I as jt}from"./NotificationsListConfig-CylnViXd-DEcj9I_Q.js";import"./liveblocks-BsQBjN-0.js";import"./core-5sxMy3sZ.js";import"./lottie-C2R6rGxS.js";import"./pdf-DyB_VHQx.js";import"./dnd-Cfx_ai1S.js";import"./analytics-Buyhprzd.js";import"./plaid-Yyr3DBd8.js";import"./recharts-CTWfsY-L.js";import"./utils-DmE88LS_.js";(function(){try{var e=typeof window<"u"?window:typeof global<"u"?global:typeof globalThis<"u"?globalThis:typeof self<"u"?self:{},o=new e.Error().stack;o&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[o]="d83f0b42-c762-446f-8656-beb60ffd1b0d",e._sentryDebugIdIdentifier="sentry-dbid-d83f0b42-c762-446f-8656-beb60ffd1b0d")}catch{}})();function yi({tabs:e,selectedTab:o,subTabs:s,selectedSubTab:a,subTabRightComponent:r,tabStyle:l,subTabStyle:c,onTabChange:d,onSubTabChange:h}){const u=v(),f=Q(),p=g.useCallback(m=>{d(m.id)},[d]),x=g.useCallback(m=>{h(m.id)},[h]);return e.length===0?null:t.jsxs($i,{windowSize:u,children:[t.jsx(ni,{allTabs:e,selectedTab:o,containerStyle:{...l,borderBottom:`1px solid ${f.colors.grey3}`},onTabChange:p}),t.jsx(wi,{allTabs:s,selectedTab:a,containerStyle:{...c},rightComponent:r,onTabChange:x})]})}const $i=n.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`,{common:{timeStrings:kt,strings:ji},dateFormat:Le,timeFormat:ki}=B.getLocalizedStrings(),St=["today","yesterday","last_7_days_this_month","earlier_this_month","earlier_that_month"],le=e=>e.type.concat(ji.underscore).concat(e.start.format(Le.visual.DdashMMdashYYYYFormat)),xe=e=>{switch(e.type){case"today":case"yesterday":case"earlier_this_month":case"last_7_days_this_month":return kt[e.type];case"earlier_that_month":return e.start.format(Le.visual.MMMYYYYFormat)}},vt=e=>{const o=K(e.toUTCString()),s=y(),a=s.diff(o,"minutes");return s.diff(o,"seconds")<=60?kt.justNow:a<1440&&mi(o,0)?o.format(ki.hhmmAFormat):o.format(Le.visual.MMMDFormat)},De=e=>{switch(e.code){case"todo":return S.important;case"in_progress":return S.info;case"on_hold":return S.alert;case"done":return S.championLight;case"resolved":return S.successDark;default:return S.neutralGrey2Light}},{commentsAndNotifications:{notifications:{actionStrings:{comments:Si}}}}=B.getLocalizedStrings(),Ct=e=>{e.sort((r,l)=>K(r.inboxNotification.notifiedAt.toUTCString()).isAfter(K(l.inboxNotification.notifiedAt.toUTCString()))===!0?1:-1);let o=[...e];const s=[];let a={singleGroup:[],remainingData:[]};for(const r of St){let l=0,c=0,d=y().subtract(Math.min(y().date(),l),"d").startOf("d"),h=y().subtract(Math.min(y().date(),c),"d").endOf("d"),u=1;switch(r){case"today":case"yesterday":l=r==="today"?0:1,c=r==="today"?0:1,d=y().subtract(Math.min(y().date(),l),"d").startOf("d"),h=y().subtract(Math.min(y().date(),c),"d").endOf("d"),a=oe(o,d,h),o=a.remainingData,s.push({start:d,end:h,type:r,notifications:a.singleGroup});break;case"last_7_days_this_month":o.length>0&&y().date()>2&&(d=y().subtract(Math.min(y().date()-1,8),"d").startOf("d"),h=y().subtract(2,"d").endOf("d"),a=oe(o,d,h),o=a.remainingData,s.push({start:d,end:h,type:r,notifications:a.singleGroup}));break;case"earlier_this_month":o.length>0&&y().date()>9&&(d=y().startOf("M").startOf("d"),h=y().subtract(9,"d").endOf("d"),a=oe(o,d,h),o=a.remainingData,s.push({start:d,end:h,type:r,notifications:a.singleGroup}));break;case"earlier_that_month":for(;o.length>0;){const f=y().subtract(u,"month").startOf("M").startOf("d"),p=y().subtract(u,"month").endOf("M").endOf("d");u++,a=oe(o,f,p),o=a.remainingData,s.push({start:f,end:p,type:r,notifications:a.singleGroup})}}}return s},oe=(e,o,s)=>{const a=[],r=e.map(l=>dt(o,s,K(l.inboxNotification.notifiedAt.toUTCString()))?(a.push(l),null):l).filter(l=>!!l);return a.sort((l,c)=>K(l.inboxNotification.notifiedAt.toUTCString()).isAfter(K(c.inboxNotification.notifiedAt.toUTCString()))===!0?-1:1),{singleGroup:a,remainingData:r}},Tt=new _(3,2,1,1,1),Nt=new _(w[8],w[6],35,35,w[6]),de={lineClamp:Tt,sectionWidth:Nt},It="comments-notification-tile",{common:{texts:Me,timeStrings:vi,strings:ee},commentsAndNotifications:{notifications:{strings:{newMessage:Ci},actionStrings:{comments:{newCommentAdded:Ti}}}}}=B.getLocalizedStrings(),Ni=({sectionId:e,notificationData:o,users:s,isHighlighted:a=!1,style:r,onNotificationTileClick:l})=>{const c=ht(),d=ut().analytics,{inboxNotification:{id:h,readAt:u,notifiedAt:f},thread:p}=o,{setRequestToOpenThread:x}=g.useContext(ui),m=u!=null?"read":"unread",{metadata:{url:k,companyId:N,entityType:D},id:I}=p;return t.jsxs(zi,{readStatus:m,isClickable:!!k,isHighlighted:a,style:r,"data-testid":me(e,`${It}-${h}`),onClick:()=>{k&&(l(h,mt(k),m),(p.metadata.tab==="bill"||p.metadata.tab==="reimbursement")&&x({threadId:I,companyId:N,entityType:D})),p.metadata.application!=="cockpit"&&d.trackCommentActivity("notification","clicked",p.metadata.companyName,c.controllersList.controllers.map(b=>E(b)),p.resolved?"resolved":"open",{name:pt(c.loggedInUser),email:c.loggedInUser?.userEmail??""},"db notification")},children:[t.jsx(Ii,{notificationData:o,users:s}),t.jsx(Ri,{...o}),t.jsx(_i,{timestamp:f,readStatus:m})]})},Lt=({notificationData:e,users:o})=>{const{thread:s}=e,{comments:a}=s,r=a[0];return a.length===0||r.body==null?t.jsx(ke,{children:Ci}):t.jsx(ke,{children:r.body.content.map(l=>l.type==="paragraph"?l.children.map((c,d)=>{if(function(u){return"type"in u&&u.type==="mention"}(c)){const u=o.find(f=>f.userId===c.id);return c.id?t.jsx(Li,{notificationData:e,user:u},`${c.id}${ee.underscore}${d}`):null}if(function(u){return"type"in u&&u.type==="link"}(c)){const u=pi(c.url)??c.url;return t.jsx(Gi,{href:u,target:"_blank",rel:"noopener noreferrer nofollow",children:c.text??c.url},d)}let h=c.text;return c.bold===!0&&(h=t.jsx(Ai,{children:h},d)),c.italic===!0&&(h=t.jsx(Pi,{children:h},d)),c.strikethrough===!0&&(h=t.jsx(Bi,{children:h},d)),c.code===!0&&(h=t.jsx(Oi,{children:h},d)),t.jsx(Fi,{children:h},d)}):t.jsx(ke,{children:Ti}))})},Ii=({notificationData:e,users:o})=>{const s=v();return t.jsx(Ei,{windowSize:s,children:t.jsx(Lt,{notificationData:e,users:o})})},Li=({notificationData:e,user:o})=>{const{inboxNotification:{readAt:s}}=e,a=s!=null?"read":"unread";let r=t.jsxs(Ae,{className:"userText",readStatus:a,children:[ee.atTheRate,Me.zeniAI,ee.space]});if(o!=null){const l=E(o,!1);r=t.jsx(t.Fragment,{children:t.jsxs(Ae,{className:"userText",readStatus:a,children:[ee.atTheRate,l||Me.zeniAI,ee.space]})})}return r},Rt=e=>{const o=(s=>{const{thread:a}=s,{newRepliesAdded:r,newCommentAdded:l}=Si;return a.comments.length===1?l:r})(e);return t.jsx(t.Fragment,{children:o})},Ri=e=>{const o=v();return t.jsx(Mi,{windowSize:o,children:t.jsx(Rt,{...e})})},_t=e=>{const{timestamp:o,readStatus:s}=e,a=vt(o);return t.jsxs(t.Fragment,{children:[t.jsx(Ui,{isNewNotification:a===vi.justNow,children:a}),t.jsx(Hi,{readStatus:s})]})},_i=e=>{const o=v();return t.jsx(Di,{windowSize:o,children:t.jsx(_t,{...e})})},zi=n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  cursor: ${e=>e.isClickable?"pointer":"not-allowed"};
+
+  background-color: ${e=>e.readStatus==="read"&&e.isClickable?e.theme.colors.grey4:e.theme.colors.grey5};
+
+  color: ${e=>e.readStatus==="read"&&e.isClickable?e.theme.colors.grey1:e.theme.colors.hero};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${e=>`${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
+
+  padding: ${i.sp3} ${i.sp2} ${i.sp3} ${i.sp4};
+
+  .userText {
+    color: ${S.brandColorJade};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  ${e=>e.isHighlighted?P`
+          z-index: 1;
+          color: ${e.theme.colors.primary};
+          border: 1px solid ${e.theme.colors.primary};
+
+          .userText {
+            color: ${S.brandColorJade};
+          }
+        `:null};
+
+  ${e=>e.isClickable?P`
+          &:hover {
+            z-index: 1;
+            color: ${e.theme.colors.primary};
+            border: 1px solid ${e.theme.colors.primary};
+
+            .userText {
+              color: ${S.brandColorJade};
+            }
+          }
+        `:null};
+`,Di=n(U)`
+  width: ${e=>e.windowSize==="small"?"unset":"10%"};
+  gap: ${i.sp2};
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+`,Mi=n(Z)`
+  color: inherit;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: ${e=>de.lineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  width: ${e=>de.sectionWidth.valuePercentage(e.windowSize)};
+`,Ai=n.strong``,Oi=n.code``,Pi=n.em``,Bi=n.s``,Fi=n.span``,Gi=n.a``,Ei=n(Z)`
+  color: inherit;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: ${e=>de.lineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  width: ${e=>de.sectionWidth.valuePercentage(e.windowSize)};
+`,Ae=n(ge)`
+  color: ${e=>e.readStatus==="read"?e.theme.colors.grey1:S.brandColorJade};
+`,ke=n(ge)`
+  color: inherit;
+`,Ui=n(ft)`
+  flex-shrink: 0;
+  color: ${e=>e.isNewNotification?e.theme.colors.primary:"inherit"};
+`,Hi=n.div`
+  display: flex;
+  height: ${i.sp2};
+  width: ${i.sp2};
+  border-radius: ${i.sp2};
+  flex-shrink: 0;
+  background-color: ${e=>e.readStatus==="unread"?S.info:"transparent"};
+`,Se={emptyRowItemSectionWidth:new _(120,200,250,330,400),emptyLastRowItemSectionWidth:new _(w[6],50,60,w[11],120)},Vi=()=>{const e=v();return t.jsxs(Yi,{windowSize:e,children:[t.jsx(ve,{windowSize:e,isLastItem:!1,children:t.jsx(z,{width:Se.emptyRowItemSectionWidth.value(e),height:w[4]})}),t.jsx(ve,{windowSize:e,isLastItem:!1,children:t.jsx(z,{width:Se.emptyRowItemSectionWidth.value(e),height:w[4]})}),t.jsx(ve,{windowSize:e,isLastItem:!0,children:t.jsx(z,{width:Se.emptyLastRowItemSectionWidth.value(e),height:18})})]})},Yi=n.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: ${i.sp3} ${i.sp2} ${i.sp3} ${i.sp4};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${e=>`${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
+
+  :hover {
+    z-index: 1;
+    border: ${e=>`1px solid ${e.theme.colors.primary}`};
+  }
+
+  :first-of-type {
+    border-top-left-radius: ${i.sp2};
+    border-top-right-radius: ${i.sp2};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${i.sp2};
+    border-bottom-right-radius: ${i.sp2};
+  }
+`,ve=n.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex: 1 1 auto;
+  justify-content: ${e=>e.isLastItem?"flex-end":"start"};
+  width: ${e=>e.isLastItem?"10%":Nt.valuePercentage(e.windowSize)};
+`,Wi=()=>{const e=v();return t.jsxs(Ji,{windowSize:e,children:[t.jsxs(qi,{children:[t.jsx(z,{width:180,height:w[4]}),t.jsx(z,{width:180,height:w[4]})]}),t.jsx(Xi,{children:t.jsx(z,{width:60,height:18})})]})},Ji=n.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  flex-direction: row;
+  gap: ${i.sp4};
+
+  padding: ${i.sp3} ${i.sp2} ${i.sp3} ${i.sp3};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${e=>`${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
+
+  :hover {
+    z-index: 1;
+    border: ${e=>`1px solid ${e.theme.colors.primary}`};
+  }
+
+  :first-of-type {
+    border-top-left-radius: ${i.sp2};
+    border-top-right-radius: ${i.sp2};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${i.sp2};
+    border-bottom-right-radius: ${i.sp2};
+  }
+`,qi=n.div`
+  display: flex;
+  align-items: start;
+  flex-direction: column;
+  gap: ${i.sp2};
+  flex: 1 1 auto;
+  justify-content: start;
+`,Xi=n.div`
+  display: flex;
+  align-items: baseline;
+  flex-direction: row;
+  justify-content: end;
+`,Ki=()=>v()==="small"?t.jsx(Wi,{}):t.jsx(Vi,{}),Qi={marginLeft:new _(w[2],w[5],w[7])},Zi=()=>t.jsxs(eo,{children:[t.jsx(Ce,{numberOfRows:5}),t.jsx(Ce,{numberOfRows:3})]}),Ce=({numberOfRows:e})=>{const o=v();return t.jsxs(to,{windowSize:o,children:[t.jsx(oo,{children:t.jsx(z,{width:w[12],height:Ie.standardRegular.lineHeightValue})}),t.jsx(io,{children:[...Array(e)].map(s=>t.jsx(Ki,{},he()))})]})},eo=n.div`
+  display: block;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+`,to=n.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${i.sp5};
+  margin-left: ${e=>Qi.marginLeft.valuePx(e.windowSize)};
+`,io=n.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: ${i.sp2};
+`,oo=n.div`
+  display: flex;
+  padding: ${i.sp3} ${i.sp0};
+`,so=({sectionId:e,notificationData:o,users:s,isSelectionMode:a=!1,isHighlighted:r=!1,style:l,onNotificationTileClick:c,onNotificationTileLongPress:d})=>{const h=ht(),u=ut().analytics,{inboxNotification:{id:f,readAt:p,notifiedAt:x},thread:m}=o,k=p!=null?"read":"unread",N=m.metadata.url,D=g.useCallback(()=>{d?.()},[d]),I=g.useCallback(T=>{T.stopPropagation(),T.cancelable&&T.preventDefault(),a?d?.():N!=null&&(c(f,mt(m.metadata.url),k),m.metadata.application!=="cockpit"&&u.trackCommentActivity("notification","clicked",m.metadata.companyName,h.controllersList.controllers.map(j=>E(j)),m.resolved?"resolved":"open",{name:pt(h.loggedInUser),email:h.loggedInUser?.userEmail??""},"db notification"))},[a,N,d,c,f,m.metadata.url,m.metadata.application,k,h.controllersList,h.loggedInUser,u,m.metadata.companyName,m.resolved]),b=gt({onLongPress:D},{shouldPreventDefault:!1,delay:1e3});return t.jsxs(lo,{readStatus:k,isClickable:N!=null,isHighlighted:r,style:l,"data-testid":me(e,`${It}-${f}`),...b,onClick:I,children:[t.jsxs(ho,{children:[t.jsx(ao,{notificationData:o,users:s}),t.jsx(no,{...o})]}),t.jsx(ro,{timestamp:x,readStatus:k})]})},ao=({notificationData:e,users:o})=>t.jsx(zt,{children:t.jsx(Lt,{notificationData:e,users:o})}),no=e=>t.jsx(zt,{children:t.jsx(Rt,{...e})}),ro=e=>t.jsx(co,{children:t.jsx(_t,{...e})}),lo=n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  width: 100%;
+  gap: ${i.sp2};
+  cursor: ${e=>e.isClickable?"pointer":"not-allowed"};
+
+  background-color: ${e=>e.readStatus==="read"&&e.isClickable?e.theme.colors.grey4:e.theme.colors.grey5};
+
+  color: ${e=>e.readStatus==="read"&&e.isClickable?e.theme.colors.grey1:e.theme.colors.hero};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${e=>`${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
+
+  padding: ${i.sp3} ${i.sp2} ${i.sp3} ${i.sp3};
+
+  .userText {
+    color: ${S.brandColorJade};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  ${e=>e.isHighlighted?P`
+          z-index: 1;
+          color: ${e.theme.colors.primary};
+          border: 1px solid ${e.theme.colors.primary};
+
+          .userText {
+            color: ${S.brandColorJade};
+          }
+        `:null};
+
+  ${e=>e.isClickable?P`
+          &:hover {
+            z-index: 1;
+            color: ${e.theme.colors.primary};
+            border: 1px solid ${e.theme.colors.primary};
+
+            .userText {
+              color: ${S.brandColorJade};
+            }
+          }
+        `:null};
+`,co=n(U)`
+  width: 25%;
+  gap: ${i.sp2};
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+`,ho=n.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${i.sp2};
+`,zt=n(Z)`
+  color: inherit;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+`,Dt=e=>v()==="small"?t.jsx(so,{...e}):t.jsx(Ni,{...e}),{common:{all:Oe}}=B.getLocalizedStrings(),uo=({notificationGroup:e,users:o,sectionId:s,checkBoxMode:a,style:r,isDisabled:l,onNotificationTileClick:c})=>{const d=Q(),{getValues:h}=ue(),u=h(s);return t.jsx(po,{style:r,children:t.jsx(pe,{mode:a,checkBoxes:[{label:t.jsx(fo,{htmlFor:`${s}.${Oe.toLocaleLowerCase()}`,style:{color:d.colors.primary},children:xe(e)}),value:Oe.toLocaleLowerCase(),defaultChecked:!1,groupLabel:!0},...e.notifications.map((f,p)=>{const x=p===0,m=e.notifications.length-1===p;return{label:t.jsx(Dt,{sectionId:s,notificationData:f,users:o,style:{borderTopLeftRadius:x?i.sp2:void 0,borderTopRightRadius:x?i.sp2:void 0,borderBottomLeftRadius:m?i.sp2:void 0,borderBottomRightRadius:m?i.sp2:void 0},isHighlighted:u?.includes(f.inboxNotification.id)===!0,onNotificationTileClick:c}),value:f.inboxNotification.id,defaultChecked:!1,groupLabel:!1}})],name:s,isDisabled:l,style:{width:"100%"},checkBoxStyle:{padding:i.sp3},labelCheckBoxStyle:{padding:i.sp3}})})},po=n.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`,fo=n(fe)`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding: ${i.sp3} ${i.sp0} ${i.sp3} ${i.sp0};
+`,{common:{all:Pe}}=B.getLocalizedStrings(),mo=({notificationGroup:e,users:o,sectionId:s,checkBoxMode:a,style:r,isDisabled:l,onNotificationTileClick:c})=>{const d=Q(),{getValues:h}=ue(),u=h(s),f=g.useRef([]);return g.useEffect(()=>{f.current=f.current.slice(0,e.notifications.length)},[e.notifications.length]),t.jsx(go,{style:r,children:t.jsx(pe,{mode:a,checkBoxes:[{label:t.jsx(Be,{htmlFor:`${s}.${Pe.toLocaleLowerCase()}`,style:{color:d.colors.primary,marginLeft:i.sp2},children:xe(e)}),value:Pe.toLocaleLowerCase(),defaultChecked:!1,groupLabel:!0},...e.notifications.map((p,x)=>{const m=x===0,k=e.notifications.length-1===x;return{label:t.jsx(Be,{ref:N=>f.current[x]=N,htmlFor:`${s}.${p.inboxNotification.id}`,style:{padding:i.sp0},children:t.jsx(xo,{sectionId:s,notificationData:p,users:o,style:{borderTopLeftRadius:m?i.sp2:void 0,borderTopRightRadius:m?i.sp2:void 0,borderBottomLeftRadius:k?i.sp2:void 0,borderBottomRightRadius:k?i.sp2:void 0,marginLeft:i.sp2},isHighlighted:u?.includes(p.inboxNotification.id)===!0,isSelectionMode:a==="always_on",onNotificationTileClick:c,onNotificationTileLongPress:()=>{f.current[x]?.click()}})}),value:p.inboxNotification.id,defaultChecked:!1,groupLabel:!1}})],name:s,isDisabled:l,style:{width:"100%",position:"relative"},checkBoxStyle:{padding:i.sp1,zIndex:2,left:`-${i.sp1}`,position:"absolute"},checkBoxIconStyle:{backgroundColor:d.colors.grey5}})})},go=n.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`,Be=n(fe)`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding: ${i.sp3} ${i.sp0} ${i.sp3} ${i.sp0};
+`,xo=n(Dt)``,bo=e=>v()==="small"?t.jsx(mo,{...e}):t.jsx(uo,{...e}),{commentsAndNotifications:{notifications:{message:wo}}}=B.getLocalizedStrings(),Fe={rowGap:new _(w[0],w[5],w[5])},yo=({notificationGroups:e,users:o,isFetching:s,hasMore:a,sectionId:r,checkBoxMode:l,scrollYOffset:c,currentSubTab:d,isDisabled:h,onUpdateScrollYOffset:u,onFetchNotificationGroups:f,onNotificationClick:p})=>{const x=v(),m=g.useRef(null),k=g.useRef({});g.useEffect(()=>{m.current?.resetAfterIndex(0,!0)},[x,m,e]),g.useEffect(()=>{m.current?.scrollTo(c)},[d]);const N=g.useCallback(C=>{if(k.current?.[C]!=null){const F=x==="small"&&a===!1&&C===e.length-1?Fe.rowGap.value("medium-regular"):Fe.rowGap.value(x);return k.current[C]+F}return 3*(xt*Tt.value(x)+bt)+wt+yt},[x,k,e]),D=g.useCallback((C,F)=>{k.current={...k.current,[C]:F},m.current?.resetAfterIndex(0,!0)},[x,m,e]),I=g.useCallback(()=>{f()},[f]),b=g.useCallback(()=>{},[]),T=st(C=>u(C),1e3,{trailing:!0}),j=C=>!a||C<e.length,H=g.useCallback(()=>a&&!s?I():b(),[a,s,I,b]),R=a?e.length+1:e.length;return t.jsx(jo,{children:t.jsx(ko,{windowSize:x,children:s&&e.length===0?t.jsx(Zi,{}):s===!1&&e.length===0?t.jsx(at,{message:wo.noNotificationsMessage,style:{padding:i.sp0}}):t.jsx(So,{windowSize:x,children:t.jsx(nt,{children:({height:C,width:F})=>t.jsx(rt,{isItemLoaded:j,itemCount:$t,loadMoreItems:H,children:({onItemsRendered:V,ref:G})=>t.jsx(lt,{ref:Y=>{G(Y),m.current=Y},height:C,itemCount:R,itemData:{notificationGroups:e,users:o,sectionId:r,checkBoxMode:l,isDisabled:h,isItemLoaded:j,setRowHeight:D,onNotificationClick:p},onItemsRendered:V,itemSize:N,width:F,style:{willChange:"auto"},overscanCount:jt,onScroll:({scrollOffset:Y})=>{T(Y)},initialScrollOffset:c,children:$o})})})})})})},$o=({index:e,style:o,data:s})=>{const{notificationGroups:a,users:r,sectionId:l,checkBoxMode:c,isItemLoaded:d,isDisabled:h,setRowHeight:u,onNotificationClick:f}=s,p=g.useRef(null),x=v();if(g.useEffect(()=>{p.current?.firstElementChild!=null&&u(e,p.current.firstElementChild.clientHeight)},[e,p,x,a[e]?.notifications]),d(e)===!0){const m=a[e],k=le(m);return t.jsx(Ge,{style:{...o,paddingBottom:i.sp0,width:"100%"},ref:p,children:t.jsx(bo,{notificationGroup:m,sectionId:`${l}.${k}`,checkBoxMode:c,isDisabled:h,users:r,onNotificationTileClick:f})},k)}return t.jsx(Ge,{ref:p,style:{...o,paddingBottom:i.sp0},children:t.jsx(Ce,{numberOfRows:3})},he())},jo=n.div`
+  display: block;
+  background-color: ${e=>e.theme.colors.grey4};
+  height: 100%;
+  width: 100%;
+`,ko=n.div`
+  height: 100%;
+  width: 100%;
+`,So=n.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 99.9%;
+`,Ge=n.div`
+  top: ${i.sp0};
+  left: ${i.sp0};
+  box-sizing: border-box;
+`,{common:{in:vo,strings:Ee},dateFormat:Co,commentsAndNotifications:{notifications:{actionStrings:{notifications:O}}}}=B.getLocalizedStrings(),Mt=e=>{e.sort((r,l)=>r.createTime.isAfter(l.createTime)===!0?1:-1);let o=[...e];const s=[];let a={singleGroup:[],remainingData:[]};for(const r of St){let l=0,c=0,d=y().subtract(Math.min(y().date(),l),"d").startOf("d"),h=y().subtract(Math.min(y().date(),c),"d").endOf("d"),u=1;switch(r){case"today":case"yesterday":l=r==="today"?0:1,c=r==="today"?0:1,d=y().subtract(Math.min(y().date(),l),"d").startOf("d"),h=y().subtract(Math.min(y().date(),c),"d").endOf("d"),a=se(o,d,h),o=a.remainingData,s.push({start:d,end:h,type:r,notifications:a.singleGroup});break;case"last_7_days_this_month":o.length>0&&y().date()>2&&(d=y().subtract(Math.min(y().date()-1,8),"d").startOf("d"),h=y().subtract(2,"d").endOf("d"),a=se(o,d,h),o=a.remainingData,s.push({start:d,end:h,type:r,notifications:a.singleGroup}));break;case"earlier_this_month":o.length>0&&y().date()>9&&(d=y().startOf("M").startOf("d"),h=y().subtract(9,"d").endOf("d"),a=se(o,d,h),o=a.remainingData,s.push({start:d,end:h,type:r,notifications:a.singleGroup}));break;case"earlier_that_month":for(;o.length>0;){const f=y().subtract(u,"month").startOf("M").startOf("d"),p=y().subtract(u,"month").endOf("M").endOf("d");u++,a=se(o,f,p),o=a.remainingData,s.push({start:f,end:p,type:r,notifications:a.singleGroup})}}}return s},se=(e,o,s)=>{const a=[],r=e.map(l=>dt(o,s,l.createTime)?(a.push(l),null):l).filter(l=>!!l);return a.sort((l,c)=>l.createTime.isAfter(c.createTime)===!0?-1:1),{singleGroup:a,remainingData:r}},To=e=>{const{eventData:{activities:o}}=e;let s=O.newActivity;if(o.length>0){const a=o[0].activityType,r=o[0].metadata.eventStatus;switch(a){case"task_archived":s=O.archive;break;case"task_deleted":s=O.delete;break;case"task_activities":s=O.activities;break;case"task_assigned":s=O.assign;break;case"task_created":s=O.create;break;case"task_due":s=r!=null?(l=>{let c=O.newActivity;return c=l.code==="in_progress"?O.due.replace("__task_status__",ze(l.name.toLocaleLowerCase())):O.due.replace("__task_status__",vo.toLocaleLowerCase().concat(Ee.space,ze(l.name.toLocaleLowerCase()))),c})(r):O.dueTomorrow;break;case"task_overdue":s=O.overdue.replace("__date__",o[0].metadata.additionalInfo?.dueDate.format(Co.visual.MMMDFormat)??Ee.empty);break;case"task_status_updated":s=O.statusUpdate}}return s},At=new _(3,2,1,1,1),Ot=new _(w[8],33,33,33,35),ce={lineClamp:At,sectionWidth:Ot},Pt="notification-tile",{common:{and:Ue,other:No,others:Io,texts:Lo,timeStrings:Ro,strings:A,tags:_o}}=B.getLocalizedStrings(),zo=({sectionId:e,notificationData:o,isHighlighted:s=!1,style:a,onNotificationTileClick:r})=>{const{status:l,notificationId:c,eventData:{entitiyId:d,activities:h},createTime:u}=o;return t.jsxs(Fo,{notificationStatus:l,isHighlighted:s,style:a,"data-testid":me(e,`${Pt}-${c}`),onClick:()=>{r(c,d,l,h.length>0?h[0].activityType:void 0)},children:[t.jsx(Do,{...o}),t.jsx(Oo,{...o}),t.jsx(Bo,{...o}),t.jsx(Po,{createTime:u,notificationStatus:l})]})},Bt=e=>{const{status:o,eventData:{title:s}}=e;return t.jsx(Vo,{notificationStatus:o,children:s||A.hyphen})},Do=e=>{const o=v();return t.jsx(Ho,{windowSize:o,children:t.jsx(Bt,{...e})})},Mo=e=>{const{eventData:{activities:o}}=e;if(o.length>0&&o[0].activityType==="task_status_updated"){const s=o[0].metadata.updates.find(a=>a.type==="code_name_pair"&&a.field==="status");if(s?.oldValue.codeNamePair!=null&&s.newValue.codeNamePair!=null)return t.jsxs(Wo,{children:[t.jsx(He,{backgroundColor:De(s.oldValue.codeNamePair),children:s.oldValue.codeNamePair.name}),t.jsx(Jo,{}),t.jsx(He,{backgroundColor:De(s.newValue.codeNamePair),children:s.newValue.codeNamePair.name})]})}return null},Ao=e=>{const{status:o,eventData:{authors:s,activities:a}}=e,r=s.length;if(a[0].activityType==="task_due"||a[0].activityType==="task_overdue"||a[0].activityType==="task_status_updated")return null;let l=t.jsxs(J,{className:"userText",notificationStatus:o,children:[A.atTheRate,Lo.zeniAI,A.space]});return r>0&&(l=r>2?t.jsxs(t.Fragment,{children:[t.jsxs(J,{className:"userText",notificationStatus:o,children:[A.atTheRate,E(s[0],!1),A.space]}),Ue,t.jsxs(J,{className:"userText",notificationStatus:o,children:[A.space,r-1,A.space,Io,A.space]})]}):r===2?t.jsxs(t.Fragment,{children:[t.jsxs(J,{className:"userText",notificationStatus:o,children:[A.atTheRate,E(s[0],!1),A.space]}),Ue,t.jsxs(J,{className:"userText",notificationStatus:o,children:[A.space,s.length===2?A.atTheRate+E(s[1],!1):No,A.space]})]}):t.jsxs(J,{className:"userText",notificationStatus:o,children:[A.atTheRate,E(s[0],!1),A.space]})),l},Ft=e=>t.jsxs(t.Fragment,{children:[t.jsx(Ao,{...e}),To(e),t.jsx(Mo,{...e})]}),Oo=e=>{const o=v(),{eventData:{activities:s}}=e;return t.jsx(Uo,{windowSize:o,statusUpdate:s.length>0&&s[0].activityType==="task_status_updated"&&s[0].metadata.updates.find(a=>a.field==="status")!=null,children:t.jsx(Ft,{...e})})},Gt=e=>{const{createTime:o,notificationStatus:s}=e,a=vt(o.toDate());return t.jsxs(t.Fragment,{children:[t.jsx(Yo,{isNewNotification:a===Ro.justNow,children:a}),t.jsx(Xo,{notificationStatus:s})]})},Po=e=>{const o=v();return t.jsx(Go,{windowSize:o,children:t.jsx(Gt,{...e})})},Et=e=>{const{eventData:{activities:o}}=e;return o[0].activityType==="task_overdue"?t.jsx(fi,{tagTitle:_o.overdue,textColor:{color:new je(S.alert),backgroundColor:new je("transparent"),borderColor:new je(S.alert)},showLoader:!1}):t.jsx(qo,{})},Bo=e=>{const o=v();return t.jsx(Eo,{windowSize:o,children:t.jsx(Et,{...e})})},Fo=n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  cursor: pointer;
+
+  background-color: ${e=>e.notificationStatus==="read"?e.theme.colors.grey4:e.theme.colors.grey5};
+
+  color: ${e=>e.notificationStatus==="read"?e.theme.colors.grey1:e.theme.colors.hero};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${e=>`${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
+
+  padding: ${i.sp3} ${i.sp2} ${i.sp3} ${i.sp4};
+
+  .userText {
+    color: ${S.brandColorJade};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  ${e=>e.isHighlighted?P`
+          z-index: 1;
+          color: ${e.theme.colors.primary};
+          border: 1px solid ${e.theme.colors.primary};
+
+          .userText {
+            color: ${S.brandColorJade};
+          }
+        `:null};
+
+  &:hover {
+    z-index: 1;
+    color: ${e=>e.theme.colors.primary};
+    border: 1px solid ${e=>e.theme.colors.primary};
+
+    .userText {
+      color: ${S.brandColorJade};
+    }
+  }
+`,Go=n(U)`
+  width: ${e=>e.windowSize==="small"?"unset":"10%"};
+  gap: ${i.sp2};
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+`,Eo=n(U)`
+  width: ${e=>e.windowSize==="small"?"unset":"10%"};
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+`,Uo=n(Z)`
+  color: inherit;
+
+  ${e=>e.statusUpdate?P`
+          display: flex;
+          flex-wrap: wrap;
+          gap: ${i.sp1};
+        `:P`
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: ${ce.lineClamp.value(e.windowSize)};
+          gap: ${i.sp1};
+          -webkit-box-orient: vertical;
+        `};
+  width: ${e=>ce.sectionWidth.valuePercentage(e.windowSize)};
+`,Ho=n(Z)`
+  color: inherit;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: ${e=>ce.lineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  width: ${e=>ce.sectionWidth.valuePercentage(e.windowSize)};
+`,J=n(ge)`
+  color: ${e=>e.notificationStatus==="read"?e.theme.colors.grey1:S.brandColorJade};
+`,Vo=n(ge)`
+  color: inherit;
+`,Yo=n(ft)`
+  flex-shrink: 0;
+  color: ${e=>e.isNewNotification?e.theme.colors.primary:"inherit"};
+`,Wo=n.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: ${i.sp2};
+  flex-wrap: wrap;
+`,He=n(U)`
+  color: ${S.neutralGrey5Light};
+  background: ${e=>e.backgroundColor};
+  border: 1px solid ${e=>e.backgroundColor};
+  padding: ${i.sp0} 6px;
+  border-radius: ${i.sp1};
+`,Jo=n(gi)`
+  width: ${i.sp3};
+  height: ${i.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,qo=n.div`
+  display: flex;
+  flex: 1 1 auto;
+`,Xo=n.div`
+  display: flex;
+  height: ${i.sp2};
+  width: ${i.sp2};
+  border-radius: ${i.sp2};
+  flex-shrink: 0;
+  background-color: ${e=>e.notificationStatus==="unread"?S.info:"transparent"};
+`,ae={emptyRowItemSectionWidth:new _(120,200,280,330,400),emptyLastRowItemSectionWidth:new _(w[6],50,60,w[11],120)},Ko=()=>{const e=v();return t.jsxs(Qo,{windowSize:e,children:[t.jsx(ne,{windowSize:e,isLastItem:!1,children:t.jsx(z,{width:ae.emptyRowItemSectionWidth.value(e),height:w[4]})}),t.jsx(ne,{windowSize:e,isLastItem:!1,children:t.jsx(z,{width:ae.emptyRowItemSectionWidth.value(e),height:w[4]})}),t.jsx(ne,{windowSize:e,isLastItem:!0,children:t.jsx(z,{width:ae.emptyLastRowItemSectionWidth.value(e),height:18})}),t.jsx(ne,{windowSize:e,isLastItem:!0,children:t.jsx(z,{width:ae.emptyLastRowItemSectionWidth.value(e),height:18})})]})},Qo=n.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: ${i.sp3} ${i.sp2} ${i.sp3} ${i.sp4};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${e=>`${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
+
+  :hover {
+    z-index: 1;
+    border: ${e=>`1px solid ${e.theme.colors.primary}`};
+  }
+
+  :first-of-type {
+    border-top-left-radius: ${i.sp2};
+    border-top-right-radius: ${i.sp2};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${i.sp2};
+    border-bottom-right-radius: ${i.sp2};
+  }
+`,ne=n.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex: 1 1 auto;
+  justify-content: ${e=>e.isLastItem?"flex-end":"start"};
+  width: ${e=>e.isLastItem?"10%":Ot.valuePercentage(e.windowSize)};
+`,Zo=()=>{const e=v();return t.jsxs(es,{windowSize:e,children:[t.jsxs(Ve,{children:[t.jsx(z,{width:180,height:w[4]}),t.jsx(z,{width:60,height:18})]}),t.jsxs(Ve,{children:[t.jsx(z,{width:180,height:w[4]}),t.jsx(z,{width:60,height:18})]})]})},es=n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: ${i.sp4};
+
+  padding: ${i.sp3} ${i.sp2} ${i.sp3} ${i.sp3};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${e=>`${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
+
+  :hover {
+    z-index: 1;
+    border: ${e=>`1px solid ${e.theme.colors.primary}`};
+  }
+
+  :first-of-type {
+    border-top-left-radius: ${i.sp2};
+    border-top-right-radius: ${i.sp2};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${i.sp2};
+    border-bottom-right-radius: ${i.sp2};
+  }
+`,Ve=n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  justify-content: space-between;
+  gap: ${i.sp2};
+  flex: 1 1 auto;
+  width: 100%;
+`,ts=()=>v()==="small"?t.jsx(Zo,{}):t.jsx(Ko,{}),is={marginLeft:new _(w[2],w[5],w[7])},os=()=>t.jsxs(ss,{children:[t.jsx(Te,{numberOfRows:5}),t.jsx(Te,{numberOfRows:3})]}),Te=({numberOfRows:e})=>{const o=v();return t.jsxs(as,{windowSize:o,children:[t.jsx(rs,{children:t.jsx(z,{width:w[12],height:Ie.standardRegular.lineHeightValue})}),t.jsx(ns,{children:[...Array(e)].map(s=>t.jsx(ts,{},he()))})]})},ss=n.div`
+  display: block;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+`,as=n.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${i.sp5};
+  margin-left: ${e=>is.marginLeft.valuePx(e.windowSize)};
+`,ns=n.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: ${i.sp2};
+`,rs=n.div`
+  display: flex;
+  padding: ${i.sp3} ${i.sp0};
+`,ls=({sectionId:e,notificationData:o,isSelectionMode:s=!1,isHighlighted:a=!1,style:r,onNotificationTileClick:l,onNotificationTileLongPress:c})=>{const{status:d,createTime:h,eventData:{entitiyId:u,activities:f},notificationId:p}=o,x=g.useCallback(()=>{c?.()},[c]),m=g.useCallback(N=>{N.stopPropagation(),N.cancelable&&N.preventDefault(),s?c?.():l(p,u,d,f.length>0?f[0].activityType:void 0)},[p,u,d,f,s,c,l]),k=gt({onLongPress:x},{shouldPreventDefault:!1,delay:1e3});return t.jsxs(ps,{notificationStatus:d,isHighlighted:a,style:r,"data-testid":me(e,`${Pt}-${p}`),...k,onClick:m,children:[t.jsxs(Ye,{children:[t.jsx(ds,{...o}),t.jsx(hs,{createTime:h,notificationStatus:d})]}),t.jsxs(Ye,{children:[t.jsx(cs,{...o}),f.length>0&&f[0].activityType==="task_status_updated"?null:t.jsx(us,{...o})]})]})},ds=e=>t.jsx(Ut,{statusUpdate:!1,children:t.jsx(Bt,{...e})}),cs=e=>{const{eventData:{activities:o}}=e;return t.jsx(Ut,{statusUpdate:o.length>0&&o[0].activityType==="task_status_updated"&&o[0].metadata.updates.find(s=>s.field==="status")!=null,children:t.jsx(Ft,{...e})})},hs=e=>t.jsx(fs,{children:t.jsx(Gt,{...e})}),us=e=>t.jsx(ms,{children:t.jsx(Et,{...e})}),ps=n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  justify-content: space-between;
+  width: 100%;
+  gap: ${i.sp2};
+  cursor: pointer;
+
+  background-color: ${e=>e.notificationStatus==="read"?e.theme.colors.grey4:e.theme.colors.grey5};
+
+  color: ${e=>e.notificationStatus==="read"?e.theme.colors.grey1:e.theme.colors.hero};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${e=>`${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
+
+  padding: ${i.sp3} ${i.sp2} ${i.sp3} ${i.sp3};
+
+  .userText {
+    color: ${S.brandColorJade};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  ${e=>e.isHighlighted?P`
+          z-index: 1;
+          color: ${e.theme.colors.primary};
+          border: 1px solid ${e.theme.colors.primary};
+
+          .userText {
+            color: ${S.brandColorJade};
+          }
+        `:null};
+
+  &:hover {
+    z-index: 1;
+    color: ${e=>e.theme.colors.primary};
+    border: 1px solid ${e=>e.theme.colors.primary};
+
+    .userText {
+      color: ${S.brandColorJade};
+    }
+  }
+`,fs=n(U)`
+  width: 25%;
+  gap: ${i.sp2};
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+`,ms=n(U)`
+  width: 25%;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+`,Ye=n.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${i.sp3};
+  width: 100%;
+  justify-content: space-between;
+  align-items: start;
+`,Ut=n(Z)`
+  color: inherit;
+  ${e=>e.statusUpdate?P`
+          display: flex;
+          flex-wrap: wrap;
+          gap: ${i.sp2};
+        `:P`
+          display: -webkit-box;
+          -webkit-box-orient: horizontal;
+          gap: ${i.sp1};
+        `};
+`,Ht=e=>v()==="small"?t.jsx(ls,{...e}):t.jsx(zo,{...e}),{common:{all:We}}=B.getLocalizedStrings(),gs=({notificationGroup:e,sectionId:o,checkBoxMode:s,style:a,isDisabled:r,onNotificationTileClick:l})=>{const c=Q(),{getValues:d}=ue(),h=d(o);return t.jsx(xs,{style:a,children:t.jsx(pe,{mode:s,checkBoxes:[{label:t.jsx(bs,{htmlFor:`${o}.${We.toLocaleLowerCase()}`,style:{color:c.colors.primary},children:xe(e)}),value:We.toLocaleLowerCase(),defaultChecked:!1,groupLabel:!0},...e.notifications.map((u,f)=>{const p=f===0,x=e.notifications.length-1===f;return{label:t.jsx(Ht,{sectionId:o,notificationData:u,style:{borderTopLeftRadius:p?i.sp2:void 0,borderTopRightRadius:p?i.sp2:void 0,borderBottomLeftRadius:x?i.sp2:void 0,borderBottomRightRadius:x?i.sp2:void 0},isHighlighted:h?.includes(u.notificationId)===!0,onNotificationTileClick:l}),value:u.notificationId,defaultChecked:!1,groupLabel:!1}})],name:o,isDisabled:r,style:{width:"100%"},checkBoxStyle:{padding:i.sp3},labelCheckBoxStyle:{padding:i.sp3}})})},xs=n.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`,bs=n(fe)`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding: ${i.sp3} ${i.sp0} ${i.sp3} ${i.sp0};
+`,{common:{all:Je}}=B.getLocalizedStrings(),ws=({notificationGroup:e,sectionId:o,checkBoxMode:s,style:a,isDisabled:r,onNotificationTileClick:l})=>{const c=Q(),{getValues:d}=ue(),h=d(o),u=g.useRef([]);return g.useEffect(()=>{u.current=u.current.slice(0,e.notifications.length)},[e.notifications.length]),t.jsx(ys,{style:a,children:t.jsx(pe,{mode:s,checkBoxes:[{label:t.jsx(qe,{htmlFor:`${o}.${Je.toLocaleLowerCase()}`,style:{color:c.colors.primary,marginLeft:i.sp2},children:xe(e)}),value:Je.toLocaleLowerCase(),defaultChecked:!1,groupLabel:!0},...e.notifications.map((f,p)=>{const x=p===0,m=e.notifications.length-1===p;return{label:t.jsx(qe,{ref:k=>u.current[p]=k,htmlFor:`${o}.${f.notificationId}`,style:{padding:i.sp0},children:t.jsx($s,{sectionId:o,notificationData:f,style:{borderTopLeftRadius:x?i.sp2:void 0,borderTopRightRadius:x?i.sp2:void 0,borderBottomLeftRadius:m?i.sp2:void 0,borderBottomRightRadius:m?i.sp2:void 0,marginLeft:i.sp2},isHighlighted:h?.includes(f.notificationId)===!0,isSelectionMode:s==="always_on",onNotificationTileClick:l,onNotificationTileLongPress:()=>{u.current[p]?.click()}})}),value:f.notificationId,defaultChecked:!1,groupLabel:!1}})],name:o,isDisabled:r,style:{width:"100%",position:"relative"},checkBoxStyle:{padding:i.sp1,zIndex:2,left:`-${i.sp1}`,position:"absolute"},checkBoxIconStyle:{backgroundColor:c.colors.grey5}})})},ys=n.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`,qe=n(fe)`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding: ${i.sp3} ${i.sp0} ${i.sp3} ${i.sp0};
+`,$s=n(Ht)``,js=e=>v()==="small"?t.jsx(ws,{...e}):t.jsx(gs,{...e}),{commentsAndNotifications:{notifications:{message:ks}}}=B.getLocalizedStrings(),Xe={rowGap:new _(w[0],w[5],w[5])},Ss=({notificationGroups:e,isFetching:o,hasMore:s,sectionId:a,checkBoxMode:r,scrollYOffset:l,currentSubTab:c,isDisabled:d,onUpdateScrollYOffset:h,onFetchNotificationGroups:u,onNotificationClick:f})=>{const p=v(),x=g.useRef(null),m=g.useRef({});g.useEffect(()=>{x.current?.resetAfterIndex(0,!0)},[p,x,e]),g.useEffect(()=>{x.current?.scrollTo(l)},[c]);const k=g.useCallback(R=>{if(m.current?.[R]!=null){const C=p==="small"&&s===!1&&R===e.length-1?Xe.rowGap.value("medium-regular"):Xe.rowGap.value(p);return m.current[R]+C}return 3*(xt*At.value(p)+bt)+wt+yt},[p,m,e]),N=g.useCallback((R,C)=>{m.current={...m.current,[R]:C},x.current?.resetAfterIndex(0,!0)},[p,x,e]),D=g.useCallback(()=>{u()},[u]),I=g.useCallback(()=>{},[]),b=st(R=>h(R),1e3,{trailing:!0}),T=R=>!s||R<e.length,j=g.useCallback(()=>s&&!o?D():I(),[s,o,D,I]),H=s?e.length+1:e.length;return t.jsx(Cs,{children:t.jsx(Ts,{windowSize:p,children:o&&e.length===0?t.jsx(os,{}):o===!1&&e.length===0?t.jsx(at,{message:ks.noNotificationsMessage,style:{padding:i.sp0}}):t.jsx(Ns,{windowSize:p,children:t.jsx(nt,{children:({height:R,width:C})=>t.jsx(rt,{isItemLoaded:T,itemCount:$t,loadMoreItems:j,children:({onItemsRendered:F,ref:V})=>t.jsx(lt,{ref:G=>{V(G),x.current=G},height:R,itemCount:H,itemData:{notificationGroups:e,sectionId:a,checkBoxMode:r,isDisabled:d,isItemLoaded:T,setRowHeight:N,onNotificationClick:f},onItemsRendered:F,itemSize:k,width:C,style:{willChange:"auto"},overscanCount:jt,onScroll:({scrollOffset:G})=>{b(G)},initialScrollOffset:l,children:vs})})})})})})},vs=({index:e,style:o,data:s})=>{const{notificationGroups:a,sectionId:r,checkBoxMode:l,isItemLoaded:c,isDisabled:d,setRowHeight:h,onNotificationClick:u}=s,f=g.useRef(null),p=v();if(g.useEffect(()=>{f.current?.firstElementChild!=null&&h(e,f.current.firstElementChild.clientHeight)},[e,f,p,a[e]?.notifications]),c(e)===!0){const x=a[e],m=le(x);return t.jsx(Ke,{style:{...o,paddingBottom:i.sp0,width:"100%"},ref:f,children:t.jsx(js,{notificationGroup:x,sectionId:`${r}.${m}`,checkBoxMode:l,isDisabled:d,onNotificationTileClick:u})},m)}return t.jsx(Ke,{ref:f,style:{...o,paddingBottom:i.sp0},children:t.jsx(Te,{numberOfRows:3})},he())},Cs=n.div`
+  display: block;
+  background-color: ${e=>e.theme.colors.grey4};
+  height: 100%;
+  width: 100%;
+`,Ts=n.div`
+  height: 100%;
+  width: 100%;
+`,Ns=n.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 99.9%;
+`,Ke=n.div`
+  top: ${i.sp0};
+  left: ${i.sp0};
+  box-sizing: border-box;
+`,{common:{all:Ne,texts:re,footer:Is,strings:{plus:Ls},numbers:{maximumCount:Qe}},commentsAndNotifications:{notifications:{title:Rs,texts:Vt,strings:Ze}}}=B.getLocalizedStrings(),te={tableContainerLeftPadding:new _(w[2],w[2],w[2]),tableContainerRightPadding:new _(w[3],w[6],w[8]),tabsContainerLeftRightPadding:new _(w[3],w[6],w[8]),selectedNotificationsTextMarginLeft:new _(w[0],w[6],w[6])},_s={selectedNotificationsText:new ci("smallRegular","standardRegular")},et="notificationsPage",q="commentsNotificationsTable",X="notificationsTable",ua=({notificationView:e,users:o,isNotificationSettingsVisible:s,isDisabled:a,onNotificationClick:r,onCommentNotificationClick:l,onUpdateNotificationViewUIState:c,onUpdateNotificationTabState:d,onUpdateNotificationViewCurrentTabAndSubTab:h,onUpdateNotificationViewSubTab:u,onFetchMoreNotifications:f,onUpdateNotificationStatus:p,onSettingsClick:x,onBackClick:m,onMarkAllNotificationsAsRead:k})=>{const N=Q(),D=v(),I=ei({mode:"all",reValidateMode:"onChange",defaultValues:g.useMemo(()=>ot(e),[e]),values:g.useMemo(()=>ot(e),[e])}),{currentTab:b,currentSubTab:T,notificationDetailsByTab:j,allSubTabs:H,allNotifications:R,allExternalNotifications:C,notificationsForCurrentTabAndSubTab:F,externalNotificationsForCurrentTabAndSubTab:V}=e,G=g.useMemo(()=>Object.keys(j).map($=>({label:re[$],id:re[$].toLocaleLowerCase(),countDetails:{count:j[$].uiState.unreadCount,isFetching:j[$].fetchCountState.fetchState==="In-Progress"}})),[j]),Y=g.useMemo(()=>H.map($=>({label:$==="all"?Ne:re[$],id:$})),[H]),Yt=g.useMemo(()=>Ct(V).filter($=>$.notifications.length>0),[V]),Wt=g.useMemo(()=>Mt(F).filter($=>$.notifications.length>0),[F]);g.useEffect(()=>{const $=I.watch((L,{name:W})=>{W!=null&&L!=null&&ti(()=>(async(M,Kt)=>{const ie=M.split(".")[0],_e=[];ie!=null&&(ie===q||ie===X)&&(Object.values(Kt[ie]).forEach(Qt=>{_e.push(...Qt.filter(Zt=>Zt.includes(Ne.toLowerCase())===!1))}),d({selectedNotificationIds:_e},b))})(W,L))});return()=>{$.unsubscribe()}});const be=g.useCallback(()=>{const $=[],L=j[b].selectedNotificationIdsForSubTab;if(b==="comments"){const W=C.filter(M=>M.inboxNotification.readAt==null).map(M=>M.inboxNotification.id);L.forEach(M=>{W.includes(M)&&$.push(M)})}else{const W=R.filter(M=>M.status!=="read").map(M=>M.notificationId);L.forEach(M=>{W.includes(M)&&$.push(M)})}return $},[C,R,b,j]),Jt=be().length>20?"disabled":a,we=I.watch(q),ye=I.watch(X),Re=g.useCallback(()=>{f(b,T)},[f,b,T]),qt=g.useCallback(()=>{if(b==="comments"){const $={};Object.keys(we).forEach(L=>{$[L]=[]}),I.reset({[q]:$,[X]:ye},{keepDefaultValues:!1,keepDirty:!1,keepValues:!1})}else{const $={};Object.keys(ye).forEach(L=>{$[L]=[]}),I.reset({[X]:$,[q]:we},{keepDefaultValues:!1,keepDirty:!1,keepValues:!1})}d({selectedNotificationIds:[]},b)},[ye,we]),Xt=g.useCallback(()=>{const $=j[b].selectedNotificationIdsForSubTab,L=be();p(b,$,"read",L)},[b,j,be,p]);return t.jsxs(Ds,{children:[t.jsx(ii,{source:"NotificationsPage",title:Rs.notifications,backgroundColor:N.colors.grey4,onBackClick:m,rightSideComponent:s===!0?t.jsx(qs,{onClick:x}):t.jsx(Js,{})}),t.jsx(Os,{}),t.jsx(As,{windowSize:D,children:t.jsx(yi,{tabs:G,selectedTab:b,onTabChange:$=>{const L=bi($);L!=null&&h(L)},subTabs:Y,selectedSubTab:T,onSubTabChange:$=>{const L=xi($);L!=null&&u(L)},subTabRightComponent:t.jsx(zs,{notificationCount:j[b].uiState.unreadCount,markAsAllReadUpdateState:j[b].markAsAllReadState.fetchState,markAsReadUpdateState:j[b].markAsReadState.fetchState,onMarkAsAllReadClick:()=>{k(b)}})})}),t.jsx(Ms,{windowSize:D,children:t.jsx(oi,{...I,children:t.jsx("form",{id:it(et),onSubmit:I.handleSubmit(Xt),style:{width:"100%"},children:b==="comments"?t.jsx(yo,{users:o,hasMore:j[b].uiState.hasMore,isFetching:j[b].fetchState==="In-Progress",scrollYOffset:j[b].uiState.scrollYOffset[T],currentSubTab:T,checkBoxMode:j[b].selectedNotificationIdsForSubTab.length>0?"always_on":"checked_or_hover",notificationGroups:Yt,sectionId:q,onFetchNotificationGroups:Re,onUpdateScrollYOffset:$=>c({scrollYOffset:{...j[b].uiState.scrollYOffset,[T]:$}},b),onNotificationClick:l}):t.jsx(Ss,{hasMore:j[b].uiState.hasMore,isFetching:j[b].fetchState==="In-Progress",scrollYOffset:j[b].uiState.scrollYOffset[T],currentSubTab:T,checkBoxMode:j[b].selectedNotificationIdsForSubTab.length>0?"always_on":"checked_or_hover",notificationGroups:Wt,sectionId:X,onFetchNotificationGroups:Re,onUpdateScrollYOffset:$=>c({scrollYOffset:{...j[b].uiState.scrollYOffset,[T]:$}},b),onNotificationClick:r})})})}),j[b].selectedNotificationIdsForSubTab.length?t.jsx(si,{formId:it(et),primaryBtn:{label:Vt.markAsRead,isLoading:j[b].markAsReadState.fetchState==="In-Progress",style:{width:"135px"},isDisabled:Jt!=null},cancelBtn:{label:Is.cancel,isDisabled:j[b].markAsReadState.fetchState==="In-Progress",style:{width:"135px"},onClick:qt},helperContainerStyle:D==="small"?{width:"100%"}:{rowGap:i.sp0},footerContentStyle:{gap:i.sp2},leftSideComponent:t.jsx($e,{controller:D!=="small",children:t.jsx(tt,{selectedNotificationsCount:j[b].selectedNotificationIdsForSubTab.length})}),topComponent:t.jsx($e,{controller:D==="small",children:t.jsx(tt,{selectedNotificationsCount:j[b].selectedNotificationIdsForSubTab.length})}),rightSideComponent:t.jsx($e,{controller:D!=="small",children:t.jsx(Fs,{})})}):null]})},zs=({markAsAllReadUpdateState:e,markAsReadUpdateState:o,notificationCount:s,onMarkAsAllReadClick:a})=>{const r=s===0,l=g.useCallback(()=>{e!=="In-Progress"&&o!=="In-Progress"&&!r&&a()},[e,o,r,a]);return t.jsx(Ps,{variant:"tertiary",size:"small",label:Vt.markAllAsRead,onClick:l,prefixIcon:e==="In-Progress"?t.jsx(ri,{size:"Small",start:!0}):t.jsx(Bs,{className:"mark-as-read"}),disabled:r,textStyle:{fontWeight:Ie.smallRegular.fontWeight},style:{borderRadius:i.sp1,border:"none",backgroundColor:"transparent",flexShrink:0,padding:i.sp0,cursor:o==="In-Progress"||e==="In-Progress"||r?"default":"pointer"}})},tt=({selectedNotificationsCount:e})=>{const o=v();return t.jsxs(Gs,{windowSize:o,children:[t.jsx(Us,{children:t.jsx(Es,{isCircular:e<10,children:t.jsx(Hs,{children:e>Qe?`${Qe}${Ls}`:e})})}),t.jsxs(Ws,{windowSize:o,children:[t.jsx(Vs,{children:e>1?Ze.notificationsSelected:Ze.notificationSelected}),e>20?t.jsx(Ys,{children:re.maxLimit}):null]})]})},Ds=n.div`
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey4};
+`,Ms=n.div`
+  display: flex;
+  height: 100%;
+  overflow: auto;
+  padding-top: ${i.sp0};
+  padding-bottom: ${i.sp0};
+  padding-left: ${e=>te.tableContainerLeftPadding.valuePx(e.windowSize)};
+  padding-right: ${e=>te.tableContainerRightPadding.valuePx(e.windowSize)};
+`,As=n.div`
+  padding-top: ${i.sp0};
+  padding-bottom: ${i.sp0};
+  padding-left: ${e=>te.tabsContainerLeftRightPadding.valuePx(e.windowSize)};
+  padding-right: ${e=>te.tabsContainerLeftRightPadding.valuePx(e.windowSize)};
+`,Os=n.div`
+  min-height: ${i.sp3};
+  width: 100%;
+`,Ps=n(li)`
+  .mark-as-read {
+    color: ${e=>e.disabled===!0?e.theme.colors.grey2:e.theme.colors.hero};
+  }
+  :hover {
+    .mark-as-read {
+      color: ${e=>e.disabled===!0?e.theme.colors.grey2:e.theme.colors.primary};
+    }
+  }
+`,Bs=n(e=>g.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},g.createElement("rect",{x:3.16187,y:4.9248,width:16,height:16,rx:2,stroke:"currentColor",strokeWidth:1.5}),g.createElement("path",{d:"M9.75 1.9248H18.1619C20.371 1.9248 22.1619 3.71567 22.1619 5.9248V15",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round"}),g.createElement("path",{d:"M15.4644 10.7257L10.4607 15.494C10.3977 15.5542 10.3231 15.6009 10.2415 15.6314C10.1598 15.6619 10.0728 15.6754 9.98577 15.6712C9.8999 15.6671 9.81573 15.6459 9.73823 15.6087C9.66073 15.5715 9.59148 15.5191 9.53459 15.4546L7.2569 12.8672",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})))`
+  width: ${i.sp3};
+  height: ${i.sp3};
+`,Fs=n.div``,Gs=n.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: ${i.sp2};
+  margin-left: ${e=>te.selectedNotificationsTextMarginLeft.valuePx(e.windowSize)};
+`,Es=n.div`
+  ${e=>e.isCircular?P`
+          height: ${i.sp3};
+          width: ${i.sp3};
+          padding: ${i.sp0};
+        `:P`
+          height: 18px;
+          min-width: ${i.sp3};
+          padding: ${i.sp0} ${i.sp1};
+        `}
+  background-color: transparent;
+  border-radius: inherit;
+`,Us=n.div`
+  border: 1px solid ${e=>e.theme.colors.grey1};
+  border-radius: ${i.sp12};
+  padding: 2px;
+`,Hs=n(di)`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${e=>e.theme.colors.hero};
+`,Vs=n(ct)`
+  display: flex;
+`,Ys=n(hi)`
+  display: flex;
+  color: ${S.important};
+  margin-left: ${i.sp1};
+`,Ws=n(ct)`
+  ${e=>`${_s.selectedNotificationsText.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.primary};
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+`,Js=n.div`
+  width: ${i.sp4};
+  height: ${i.sp4};
+`,qs=n(ai)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${i.sp4};
+  height: ${i.sp4};
+  cursor: pointer;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,it=e=>`${e}_form`,ot=e=>{const{allNotifications:o,allExternalNotifications:s,notificationDetailsByTab:{tasks:{selectedNotificationIds:a},comments:{selectedNotificationIds:r}}}=e,l={};Mt(o).filter(d=>d.notifications.length>0).forEach(d=>{const h=d.notifications.map(u=>u.notificationId);l[le(d)]=a.filter(u=>h.includes(u))});const c={};return Ct(s).filter(d=>d.notifications.length>0).forEach(d=>{const h=d.notifications.map(u=>u.inboxNotification.id);c[le(d)]=r.filter(u=>h.includes(u))}),{[q]:c,[X]:l}},pa=(e,o)=>{const s=[];return Object.values(e).forEach(a=>{a.forEach(r=>{r.includes(Ne.toLocaleLowerCase())===!1&&o.includes(r)&&s.push(r)})}),s};export{ua as default,pa as getSelectedNotificationIds,it as uniqueFormName};