Account Deletion - Remove Deleted Account Info from Comments

packages/components/modules/activity-log/web/ActivityLogComponent/LogGroups/index.tsx

@@ -35,6 +35,10 @@ const LogGroups: FC<LogGroupsProps> = ({
       />
     )
   }
+  const renderUserName = (group: LogGroup) => {
+    if (group.logs[0]?.user == null) return 'Deleted User'
+    return group.logs[0]?.user?.fullName
+  }
 
   const renderItemContent = (group: LogGroup) => (
     <Box
@@ -54,7 +58,7 @@ const LogGroups: FC<LogGroupsProps> = ({
           alt={group.logs[0]?.user?.fullName ?? 'User activity log avatar'}
         />
         <Typography variant="subtitle2" mb="6px">
-          {group.logs[0]?.user?.fullName}
+          {renderUserName(group)}
         </Typography>
       </Box>
       {group.logs.map((log: ActivityLogNode, index: number) =>

packages/components/modules/comments/web/CommentItem/index.tsx

@@ -64,6 +64,7 @@ const CommentItem: FC<CommentItemProps> = ({
   const [deleteComment, isDeletingComment] = useCommentDeleteMutation()
 
   const profileUrl = `${profilePath}/${comment?.user?.pk}`
+  const hasUser = Boolean(comment?.user)
 
   const showReplies = () => {
     if (isReplyExpanded) return
@@ -87,15 +88,26 @@ const CommentItem: FC<CommentItemProps> = ({
   }
 
   const replyToComment = () => {
-    onReplyClick?.()
-    setCommentReply({
-      commentItemRef,
-      inReplyToId: comment.id,
-      name: comment.user?.fullName,
-    })
+    if (hasUser) {
+      onReplyClick?.()
+      setCommentReply({
+        commentItemRef,
+        inReplyToId: comment.id,
+        name: comment.user?.fullName,
+      })
+    }
     showReplies()
   }
 
+  const renderUserName = () => {
+    if (!hasUser) return <Typography variant="subtitle2">Deleted User</Typography>
+
+    return (
+      <Link href={profileUrl}>
+        <Typography variant="subtitle2">{comment.user?.fullName}</Typography>
+      </Link>
+    )
+  }
   const renderCommentContent = () => {
     if (isEditMode)
       return (
@@ -143,18 +155,18 @@ const CommentItem: FC<CommentItemProps> = ({
         >
           <CommentContainer>
             <ClickableAvatar
+              deletedUser={!hasUser}
               width={40}
               height={40}
               alt={comment.user?.fullName ?? `Comment's user avatar`}
               src={comment.user?.avatar?.url}
               onClick={() => router.push(profileUrl)}
             />
+
             <div className="grid gap-3">
               <div className="grid grid-cols-1 justify-start">
                 <div className="grid grid-cols-[repeat(2,max-content)] items-center gap-2">
-                  <Link href={profileUrl}>
-                    <Typography variant="subtitle2">{comment.user?.fullName}</Typography>
-                  </Link>
+                  {renderUserName()}
                   <CommentPinnedBadge isPinned={comment.isPinned} />
                 </div>
                 {renderCommentContent()}

packages/design-system/components/web/avatars/ClickableAvatar/index.tsx

@@ -5,32 +5,44 @@ import { FC } from 'react'
 import { m } from 'framer-motion'
 
 import { varHover } from '../../animate/variants'
+import AvatarUploadFallbackIcon from '../../icons/AvatarUploadFallbackIcon'
 import AvatarWithPlaceholder from '../AvatarWithPlaceholder'
 import { IconButtonStyled } from './styled'
 import { ClickableAvatarProps } from './types'
 
 const ClickableAvatar: FC<ClickableAvatarProps> = ({
+  deletedUser = false,
   onClick,
   isOpen = false,
   width = 36,
   height = 36,
   children,
   ...props
-}) => (
-  <IconButtonStyled
-    component={m.button}
-    whileTap="tap"
-    whileHover="hover"
-    variants={varHover(1.05)}
-    onClick={onClick}
-    width={width}
-    height={height}
-    isOpen={isOpen}
-  >
-    <AvatarWithPlaceholder width={width} height={height} {...props}>
-      {children}
-    </AvatarWithPlaceholder>
-  </IconButtonStyled>
-)
+}) => {
+  if (deletedUser) {
+    return (
+      <AvatarWithPlaceholder width={width} height={height} {...props}>
+        <AvatarUploadFallbackIcon sx={{ fontSize: width }} titleAccess="Avatar Fallback" />
+      </AvatarWithPlaceholder>
+    )
+  }
+
+  return (
+    <IconButtonStyled
+      component={m.button}
+      whileTap="tap"
+      whileHover="hover"
+      variants={varHover(1.05)}
+      onClick={onClick}
+      width={width}
+      height={height}
+      isOpen={isOpen}
+    >
+      <AvatarWithPlaceholder width={width} height={height} {...props}>
+        {children}
+      </AvatarWithPlaceholder>
+    </IconButtonStyled>
+  )
+}
 
 export default ClickableAvatar

packages/design-system/components/web/avatars/ClickableAvatar/types.ts

@@ -7,6 +7,7 @@ export interface CustomIconButtonProps
     Required<Pick<ClickableAvatarProps, 'width' | 'height' | 'isOpen'>> {}
 
 export type ClickableAvatarProps = AvatarWithPlaceholderProps & {
+  deletedUser?: boolean
   isOpen?: boolean
   onClick?: (param: any) => void
 }