@btst/stack 3.0.0-rc.1 → 3.0.0-rc.3

package/dist/packages/stack/src/plugins/comments/client/components/comment-thread.cjs

@@ -14,13 +14,13 @@ const utils = require('../utils.cjs');
 const commentForm = require('./comment-form.cjs');
 const useComments = require('../hooks/use-comments.cjs');
 const context = require('@btst/stack/context');
+const constants = require('../constants.cjs');
+const plugins_comments_permissions = require('../../../../../../../plugins/comments/permissions.cjs');
 
 const DEFAULT_RENDERER = ({ body }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm whitespace-pre-wrap wrap-break-word", children: body });
 function CommentCard({
   comment,
   currentUserId,
-  apiBaseURL,
-  apiBasePath,
   resourceId,
   resourceType,
   components,
@@ -31,12 +31,13 @@ function CommentCard({
   allowEditing
 }) {
   const t = context.useTranslate();
+  const notify = context.useNotify();
+  const { auth } = context.useStack();
   const [isEditing, setIsEditing] = React.useState(false);
   const Renderer = components?.Renderer ?? DEFAULT_RENDERER;
-  const config = { apiBaseURL, apiBasePath };
-  const updateMutation = useComments.useUpdateComment(config);
-  const deleteMutation = useComments.useDeleteComment(config);
-  const toggleLikeMutation = useComments.useToggleLike(config, {
+  const updateMutation = useComments.useUpdateComment();
+  const deleteMutation = useComments.useDeleteComment();
+  const toggleLikeMutation = useComments.useToggleLike({
     resourceId,
     resourceType,
     parentId: comment.parentId,
@@ -53,14 +54,17 @@ function CommentCard({
   const handleDelete = async () => {
     const confirmMessage = localization?.COMMENTS_DELETE_CONFIRM ?? t("comments.thread.deleteConfirm", "Delete this comment?");
     if (!window.confirm(confirmMessage)) return;
-    await deleteMutation.mutateAsync(comment.id);
+    try {
+      await deleteMutation.mutateAsync(comment.id);
+    } catch {
+      notify.error(
+        localization?.COMMENTS_THREAD_TOAST_DELETE_ERROR ?? t("comments.thread.toastDeleteError", "Failed to delete comment")
+      );
+    }
   };
   const handleLike = () => {
     if (!currentUserId) return;
-    toggleLikeMutation.mutate({
-      commentId: comment.id,
-      authorId: currentUserId
-    });
+    toggleLikeMutation.mutate({ commentId: comment.id });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -109,71 +113,107 @@ function CommentCard({
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx(Renderer, { body: comment.body }),
           !isEditing && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mt-2", children: [
-            currentUserId && isApproved && /* @__PURE__ */ jsxRuntime.jsxs(
-              button.Button,
+            currentUserId && isApproved && /* @__PURE__ */ jsxRuntime.jsx(
+              context.PermissionAccess,
+              {
+                permission: plugins_comments_permissions.commentsPermissions.comment.react({
+                  commentId: comment.id,
+                  status: comment.status
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-7 px-2 text-xs gap-1",
+                    onClick: handleLike,
+                    "aria-label": comment.isLikedByCurrentUser ? localization?.COMMENTS_UNLIKE_ARIA ?? t("comments.thread.unlikeAria", "Unlike") : localization?.COMMENTS_LIKE_ARIA ?? t("comments.thread.likeAria", "Like"),
+                    "data-testid": "like-button",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        LucideIcons.Heart,
+                        {
+                          className: `h-3.5 w-3.5 ${comment.isLikedByCurrentUser ? "fill-current text-red-500" : ""}`
+                        }
+                      ),
+                      comment.likes > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "like-count", children: comment.likes })
+                    ]
+                  }
+                )
+              }
+            ),
+            allowPosting && currentUserId && !comment.parentId && isApproved && /* @__PURE__ */ jsxRuntime.jsx(
+              context.PermissionAccess,
               {
-                variant: "ghost",
-                size: "sm",
-                className: "h-7 px-2 text-xs gap-1",
-                onClick: handleLike,
-                "aria-label": comment.isLikedByCurrentUser ? localization?.COMMENTS_UNLIKE_ARIA ?? t("comments.thread.unlikeAria", "Unlike") : localization?.COMMENTS_LIKE_ARIA ?? t("comments.thread.likeAria", "Like"),
-                "data-testid": "like-button",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    LucideIcons.Heart,
-                    {
-                      className: `h-3.5 w-3.5 ${comment.isLikedByCurrentUser ? "fill-current text-red-500" : ""}`
-                    }
-                  ),
-                  comment.likes > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "like-count", children: comment.likes })
-                ]
+                permission: plugins_comments_permissions.commentsPermissions.thread.createComment({
+                  resourceId,
+                  resourceType,
+                  parentId: comment.id
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-7 px-2 text-xs",
+                    onClick: () => onReplyClick(comment.id),
+                    "data-testid": "reply-button",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MessageSquare, { className: "h-3.5 w-3.5 mr-1" }),
+                      localization?.COMMENTS_REPLY_BUTTON ?? t("comments.thread.replyButton", "Reply")
+                    ]
+                  }
+                )
               }
             ),
-            allowPosting && currentUserId && !comment.parentId && isApproved && /* @__PURE__ */ jsxRuntime.jsxs(
-              button.Button,
+            allowEditing && isApproved && (isOwn || auth) && /* @__PURE__ */ jsxRuntime.jsx(
+              context.PermissionAccess,
               {
-                variant: "ghost",
-                size: "sm",
-                className: "h-7 px-2 text-xs",
-                onClick: () => onReplyClick(comment.id),
-                "data-testid": "reply-button",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MessageSquare, { className: "h-3.5 w-3.5 mr-1" }),
-                  localization?.COMMENTS_REPLY_BUTTON ?? t("comments.thread.replyButton", "Reply")
-                ]
+                permission: plugins_comments_permissions.commentsPermissions.comment.edit({
+                  commentId: comment.id,
+                  authorId: comment.authorId,
+                  status: comment.status
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-7 px-2 text-xs",
+                    onClick: () => setIsEditing(true),
+                    "data-testid": "edit-button",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "h-3.5 w-3.5 mr-1" }),
+                      localization?.COMMENTS_EDIT_BUTTON ?? t("comments.thread.editButton", "Edit")
+                    ]
+                  }
+                )
               }
             ),
-            isOwn && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              allowEditing && isApproved && /* @__PURE__ */ jsxRuntime.jsxs(
-                button.Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  className: "h-7 px-2 text-xs",
-                  onClick: () => setIsEditing(true),
-                  "data-testid": "edit-button",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "h-3.5 w-3.5 mr-1" }),
-                    localization?.COMMENTS_EDIT_BUTTON ?? t("comments.thread.editButton", "Edit")
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                button.Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  className: "h-7 px-2 text-xs text-destructive hover:text-destructive",
-                  onClick: handleDelete,
-                  disabled: deleteMutation.isPending,
-                  "data-testid": "delete-button",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-3.5 w-3.5 mr-1" }),
-                    localization?.COMMENTS_DELETE_BUTTON ?? t("comments.thread.deleteButton", "Delete")
-                  ]
-                }
-              )
-            ] })
+            (isOwn || auth) && /* @__PURE__ */ jsxRuntime.jsx(
+              context.PermissionAccess,
+              {
+                permission: plugins_comments_permissions.commentsPermissions.comment.delete({
+                  commentId: comment.id,
+                  authorId: comment.authorId
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-7 px-2 text-xs text-destructive hover:text-destructive",
+                    onClick: handleDelete,
+                    disabled: deleteMutation.isPending,
+                    "data-testid": "delete-button",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-3.5 w-3.5 mr-1" }),
+                      localization?.COMMENTS_DELETE_BUTTON ?? t("comments.thread.deleteButton", "Delete")
+                    ]
+                  }
+                )
+              }
+            )
           ] })
         ] })
       ]
@@ -186,8 +226,6 @@ const OPTIMISTIC_ID_PREFIX = "optimistic-";
 function CommentThreadInner({
   resourceId,
   resourceType,
-  apiBaseURL,
-  apiBasePath,
   currentUserId,
   loginHref,
   components,
@@ -198,7 +236,7 @@ function CommentThreadInner({
   sort: sortProp
 }) {
   const t = context.useTranslate();
-  const overrides = context.usePluginOverrides("comments", {});
+  const overrides = context.usePluginOverrides(constants.COMMENTS_PLUGIN_ID, {});
   const pageSize = pageSizeProp ?? overrides.defaultCommentPageSize ?? DEFAULT_PAGE_SIZE;
   const allowPosting = allowPostingProp ?? overrides.allowPosting ?? true;
   const allowEditing = allowEditingProp ?? overrides.allowEditing ?? true;
@@ -209,7 +247,6 @@ function CommentThreadInner({
     /* @__PURE__ */ new Set()
   );
   const [replyOffsets, setReplyOffsets] = React.useState({});
-  const config = { apiBaseURL, apiBasePath };
   const {
     comments,
     total,
@@ -218,7 +255,7 @@ function CommentThreadInner({
     hasMore,
     isLoadingMore,
     queryKey: threadQueryKey
-  } = useComments.useInfiniteComments(config, {
+  } = useComments.useInfiniteComments({
     resourceId,
     resourceType,
     status: "approved",
@@ -227,7 +264,7 @@ function CommentThreadInner({
     sort,
     pageSize
   });
-  const postMutation = useComments.usePostComment(config, {
+  const postMutation = useComments.usePostComment({
     resourceId,
     resourceType,
     currentUserId,
@@ -275,8 +312,6 @@ function CommentThreadInner({
         {
           comment,
           currentUserId,
-          apiBaseURL,
-          apiBasePath,
           resourceId,
           resourceType,
           components,
@@ -295,8 +330,6 @@ function CommentThreadInner({
           parentId: comment.id,
           resourceId,
           resourceType,
-          apiBaseURL,
-          apiBasePath,
           currentUserId,
           components,
           localization,
@@ -326,15 +359,25 @@ function CommentThreadInner({
         }
       ),
       allowPosting && replyingTo === comment.id && currentUserId && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-11 pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-        commentForm.CommentForm,
+        context.PermissionAccess,
         {
-          authorId: currentUserId,
-          parentId: comment.id,
-          submitLabel: localization?.COMMENTS_FORM_POST_REPLY ?? t("comments.form.postReply", "Post reply"),
-          InputComponent: components?.Input,
-          localization,
-          onSubmit: (body) => handleReply(body, comment.id),
-          onCancel: () => setReplyingTo(null)
+          permission: plugins_comments_permissions.commentsPermissions.thread.createComment({
+            resourceId,
+            resourceType,
+            parentId: comment.id
+          }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            commentForm.CommentForm,
+            {
+              authorId: currentUserId,
+              parentId: comment.id,
+              submitLabel: localization?.COMMENTS_FORM_POST_REPLY ?? t("comments.form.postReply", "Post reply"),
+              InputComponent: components?.Input,
+              localization,
+              onSubmit: (body) => handleReply(body, comment.id),
+              onCancel: () => setReplyingTo(null)
+            }
+          )
         }
       ) })
     ] }, comment.id)) }),
@@ -353,13 +396,23 @@ function CommentThreadInner({
     allowPosting && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(separator.Separator, { className: "my-4" }),
       currentUserId ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "comment-form-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
-        commentForm.CommentForm,
+        context.PermissionAccess,
         {
-          authorId: currentUserId,
-          submitLabel: localization?.COMMENTS_FORM_POST_COMMENT ?? t("comments.form.postComment", "Post comment"),
-          InputComponent: components?.Input,
-          localization,
-          onSubmit: handlePost
+          permission: plugins_comments_permissions.commentsPermissions.thread.createComment({
+            resourceId,
+            resourceType,
+            parentId: null
+          }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            commentForm.CommentForm,
+            {
+              authorId: currentUserId,
+              submitLabel: localization?.COMMENTS_FORM_POST_COMMENT ?? t("comments.form.postComment", "Post comment"),
+              InputComponent: components?.Input,
+              localization,
+              onSubmit: handlePost
+            }
+          )
         }
       ) }) : /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -391,8 +444,6 @@ function RepliesSection({
   parentId,
   resourceId,
   resourceType,
-  apiBaseURL,
-  apiBasePath,
   currentUserId,
   components,
   localization,
@@ -403,7 +454,6 @@ function RepliesSection({
   allowEditing
 }) {
   const t = context.useTranslate();
-  const config = { apiBaseURL, apiBasePath };
   const [replyOffset, setReplyOffset] = React.useState(0);
   const [loadedReplies, setLoadedReplies] = React.useState([]);
   const {
@@ -411,7 +461,6 @@ function RepliesSection({
     total: repliesTotal,
     isFetching: isFetchingReplies
   } = useComments.useComments(
-    config,
     {
       resourceId,
       resourceType,
@@ -482,8 +531,6 @@ function RepliesSection({
             {
               comment: reply,
               currentUserId,
-              apiBaseURL,
-              apiBasePath,
               resourceId,
               resourceType,
               components,
@@ -541,16 +588,25 @@ function CommentThreadSkeleton() {
   ] });
 }
 function CommentThread(props) {
-  const { api, auth } = context.useStack();
+  const { auth } = context.useStack();
   const { currentUserId, isPending: isIdentityPending } = utils.useCurrentUserId();
   const resolvedProps = {
     ...props,
-    apiBaseURL: api?.baseURL ?? "",
-    apiBasePath: api?.basePath ?? "",
     currentUserId,
-    loginHref: auth?.loginPath
+    loginHref: props.loginHref ?? auth?.loginPath
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { id: "comments", className: props.className, children: /* @__PURE__ */ jsxRuntime.jsx(whenVisible.WhenVisible, { fallback: /* @__PURE__ */ jsxRuntime.jsx(CommentThreadSkeleton, {}), rootMargin: "300px", children: isIdentityPending ? /* @__PURE__ */ jsxRuntime.jsx(CommentThreadSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(CommentThreadInner, { ...resolvedProps }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id: "comments", className: props.className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    context.PermissionAccess,
+    {
+      permission: plugins_comments_permissions.commentsPermissions.thread.read({
+        scope: "public",
+        resourceId: props.resourceId,
+        resourceType: props.resourceType
+      }),
+      loading: /* @__PURE__ */ jsxRuntime.jsx(CommentThreadSkeleton, {}),
+      children: /* @__PURE__ */ jsxRuntime.jsx(whenVisible.WhenVisible, { fallback: /* @__PURE__ */ jsxRuntime.jsx(CommentThreadSkeleton, {}), rootMargin: "300px", children: isIdentityPending ? /* @__PURE__ */ jsxRuntime.jsx(CommentThreadSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(CommentThreadInner, { ...resolvedProps }) })
+    }
+  ) });
 }
 
 exports.CommentThread = CommentThread;