org notification quota

Author: DaveDarsa

src/components/pages/environments/_components/CardView.tsx

@@ -107,7 +107,11 @@ export const CardView: FC<Props> = ({
         <NewEnvironment projectName={projectName} refetch={refetch} />
       </StyledEnvironmentsWrapper>
 
-      {environments.length > slicedEnvsByCount.length ? <StyledEnvText $button onClick={handleShowMore}>Show more...</StyledEnvText> : null}
+      {environments.length > slicedEnvsByCount.length ? (
+        <StyledEnvText $button onClick={handleShowMore}>
+          Show more...
+        </StyledEnvText>
+      ) : null}
       <StyledEnvText>
         Showing {slicedEnvsByCount.length} of {environments.length} Environments
       </StyledEnvText>

src/components/pages/environments/styles.tsx

@@ -45,14 +45,16 @@ export const StyledToggle = styled.div`
   cursor: pointer;
 `;
 
-export const StyledEnvText = styled.div<{$button?: boolean}>`
+export const StyledEnvText = styled.div<{ $button?: boolean }>`
   font-family: 'ArabicPro-Regular', sans-serif;
   margin-top: 1rem;
 
-  ${props => props.$button && css`
-    cursor: pointer;
-    &:hover{
-      text-decoration: underline;
-    }
-  `}
+  ${props =>
+    props.$button &&
+    css`
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    `}
 `;

src/components/pages/organizations/organization/OrganizationPage.tsx

@@ -11,6 +11,7 @@ import { DetailedStats, Details, Head2 } from '@uselagoon/ui-library';
 import { Description } from './_components/Description';
 import { OrgActionsWrapper, OrgDeployTargets } from './_components/styles';
 
+type Notification = 'slacks' | 'rocketchats' | 'webhook' | 'teams' | 'emails';
 export default function OrganizationPage({
   queryRef,
   orgSlug,
@@ -32,6 +33,11 @@ export default function OrganizationPage({
 
   const groupCount = Object.values(organization.groups).filter(group => group.type !== 'project-default-group').length;
 
+  const totalNotificationCount = ['slacks', 'rocketchats', 'webhook', 'teams', 'emails'].reduce(
+    (acc, key) => acc + (organization[key as Notification] ? organization[key as Notification].length : 0),
+    0
+  );
+
   const orgDetailedItems = [
     {
       key: 'org_id',
@@ -67,7 +73,7 @@ export default function OrganizationPage({
       label: 'NOTIFICATIONS',
       children: (
         <>
-          Notification quota: {organization.quotaNotification} of{' '}
+          Notification quota: {totalNotificationCount} of{' '}
           {organization.quotaNotification === -1 ? 'unlimited' : organization.quotaNotification}
         </>
       ),