@zeniai/web-cockpit-ui 1.14.82-dev → 1.14.83-dev

package/dist/assets/NotificationsPage-ZeNj-N6e-Bg1RwKL7.js

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