feat(components): add an option to CommentsList to forbid replies

3 files changed, 56 insertions, 4 deletions

diff --git a/src/components/organisms/comments-list/comments-list.stories.tsx b/src/components/organisms/comments-list/comments-list.stories.tsx
index f6ad58e..afebfb7 100644
--- a/src/components/organisms/comments-list/comments-list.stories.tsx
+++ b/src/components/organisms/comments-list/comments-list.stories.tsx
@@ -175,3 +175,14 @@ WithReplies.args = {
   depth: 2,
   onSubmit: saveComment,
 };
+
+/**
+ * Layout Stories - With nested comments and forbidden replies
+ */
+export const WithForbiddenReplies = Template.bind({});
+WithForbiddenReplies.args = {
+  areRepliesForbidden: true,
+  comments,
+  depth: 3,
+  onSubmit: saveComment,
+};
diff --git a/src/components/organisms/comments-list/comments-list.test.tsx b/src/components/organisms/comments-list/comments-list.test.tsx
index 6706362..8feb97c 100644
--- a/src/components/organisms/comments-list/comments-list.test.tsx
+++ b/src/components/organisms/comments-list/comments-list.test.tsx
@@ -261,4 +261,30 @@ describe('CommentsList', () => {
 
     expect(rtlScreen.queryByRole('form')).not.toBeInTheDocument();
   });
+
+  it('does not render a reply button when replies are forbidden', () => {
+    const comments = [
+      {
+        author: { name: 'Milan0' },
+        content: 'Fugit veniam quas qui dolor explicabo.',
+        id: 1,
+        isApproved: true,
+        publicationDate: '2023-01-23',
+      },
+      {
+        author: { name: 'Haskell42' },
+        content: 'Error quas accusamus nesciunt enim quae a.',
+        id: 2,
+        isApproved: true,
+        publicationDate: '2023-02-04',
+      },
+    ] satisfies CommentData[];
+
+    render(<CommentsList areRepliesForbidden comments={comments} depth={2} />);
+
+    expect(rtlScreen.queryAllByRole('button', { name: /Reply/ })).toHaveLength(
+      0
+    );
+    expect(rtlScreen.queryByRole('form')).not.toBeInTheDocument();
+  });
 });
diff --git a/src/components/organisms/comments-list/comments-list.tsx b/src/components/organisms/comments-list/comments-list.tsx
index 0470f99..657c558 100644
--- a/src/components/organisms/comments-list/comments-list.tsx
+++ b/src/components/organisms/comments-list/comments-list.tsx
@@ -36,6 +36,12 @@ export type CommentsListProps = Omit<
 > &
   Pick<ReplyCommentFormProps, 'onSubmit'> & {
     /**
+     * Should we forbid replies on comments when depth is not exceed?
+     *
+     * @default false
+     */
+    areRepliesForbidden?: boolean;
+    /**
      * The comments.
      */
     comments: CommentData[];
@@ -50,7 +56,10 @@ export type CommentsListProps = Omit<
 const CommentsListWithRef: ForwardRefRenderFunction<
   HTMLOListElement,
   CommentsListProps
-> = ({ comments, depth = 0, onSubmit, ...props }, ref) => {
+> = (
+  { areRepliesForbidden = false, comments, depth = 0, onSubmit, ...props },
+  ref
+) => {
   const [replyingTo, setReplyingTo] = useState<Nullable<number>>(null);
   const intl = useIntl();
 
@@ -93,8 +102,14 @@ const CommentsListWithRef: ForwardRefRenderFunction<
               <>
                 <ApprovedComment
                   {...comment}
-                  onReply={toggleReply}
-                  replyBtn={isLastLevel ? undefined : replyBtnLabel}
+                  onReply={
+                    isLastLevel || areRepliesForbidden ? undefined : toggleReply
+                  }
+                  replyBtn={
+                    isLastLevel || areRepliesForbidden
+                      ? undefined
+                      : replyBtnLabel
+                  }
                 />
                 {replyingTo === comment.id ? (
                   <ReplyCommentForm
@@ -122,7 +137,7 @@ const CommentsListWithRef: ForwardRefRenderFunction<
         );
       });
     },
-    [depth, intl, onSubmit, replyingTo, toggleReply]
+    [areRepliesForbidden, depth, intl, onSubmit, replyingTo, toggleReply]
   );
 
   return (