From 6ef143a8a203bc0ba5be95a1779705631bb06d64 Mon Sep 17 00:00:00 2001
From: Tomasz Puch <tomasz.puch1@tesco.com>
Date: Mon, 30 Aug 2021 18:23:46 +0200
Subject: [PATCH] feat: comments pre-moderation

feat: comments pre-moderation
---
 admin/src/components/Item/index.js            | 19 ++++++-
 admin/src/components/ItemDetails/index.js     | 30 ++++++++---
 .../ItemHeader/CardHeaderPending.js           | 11 ++++
 admin/src/components/ItemHeader/index.js      | 43 ++++++++++-----
 admin/src/components/ItemModeration/index.js  | 47 +++++++++++++++--
 .../containers/DataManagerProvider/actions.js |  4 ++
 .../containers/DataManagerProvider/index.js   | 52 +++++++++++++++++++
 admin/src/containers/DetailsView/index.js     | 14 +++--
 admin/src/permissions.js                      |  4 ++
 admin/src/translations/en.json                |  6 ++-
 admin/src/utils/constants.js                  |  9 ++++
 config/functions/bootstrap.js                 | 16 +++++-
 config/routes.json                            | 26 ++++++++++
 config/schema.graphql.js                      |  7 +++
 controllers/comments.js                       | 17 ++++++
 models/comment.settings.json                  |  4 ++
 services/comments.js                          | 26 ++++++++++
 services/utils/constants.js                   |  9 ++++
 18 files changed, 311 insertions(+), 33 deletions(-)
 create mode 100644 admin/src/components/ItemHeader/CardHeaderPending.js
 create mode 100644 admin/src/utils/constants.js
 create mode 100644 services/utils/constants.js

diff --git a/admin/src/components/Item/index.js b/admin/src/components/Item/index.js
index e471b93e..fa20c8a8 100644
--- a/admin/src/components/Item/index.js
+++ b/admin/src/components/Item/index.js
@@ -9,6 +9,7 @@ import CardItem from './CardItem';
 import ItemFooter from '../ItemFooter';
 import ItemHeader from '../ItemHeader';
 import useDataManager from '../../hooks/useDataManager';
+import { APPROVAL_STATUS } from '../../utils/constants';
 
 const Item = ({
   id,
@@ -26,6 +27,9 @@ const Item = ({
   createdAt,
   updatedAt,
   relatedContentTypes,
+  onApproveCommentClick,
+  onRejectCommentClick,
+  approvalStatus,
 }) => {
   const { push } = useHistory();
   const { getSearchParams } = useDataManager();
@@ -43,13 +47,17 @@ const Item = ({
   };
 
   const isAbuseReported = !isEmpty(reports);
-  const isItemHeaderDisplayed = blocked || blockedThread || isNew || removed || isAbuseReported;
+  const isPending =  approvalStatus === APPROVAL_STATUS.PENDING;
+  const isItemHeaderDisplayed = blocked || blockedThread || isNew || removed || isAbuseReported || isPending;
   const headerProps = {
     blocked,
     blockedThread,
     isNew,
     isAbuseReported,
     isRemoved: removed,
+    onApproveCommentClick,
+    onRejectCommentClick,
+    approvalStatus,
   };
 
   const footerProps = {
@@ -67,7 +75,7 @@ const Item = ({
         onClick={onClick}
         active={id === parsedId}
       >
-        { isItemHeaderDisplayed && (<ItemHeader { ...headerProps } />) }
+        {isItemHeaderDisplayed && (<ItemHeader { ...headerProps } />) }
         <p>{content}</p>
         <ItemFooter {...footerProps} />
       </CardItem>
@@ -87,6 +95,13 @@ Item.propTypes = {
   blocked: PropTypes.bool,
   blockedThread: PropTypes.bool,
   isNew: PropTypes.bool,
+  approvalStatus: PropTypes.oneOf([
+    APPROVAL_STATUS.APPROVED,
+    APPROVAL_STATUS.PENDING,
+    APPROVAL_STATUS
+  ]),
+  onApproveCommentClick: PropTypes.func,
+  onRejectCommentClick: PropTypes.func,
 };
 
 export default Item;
diff --git a/admin/src/components/ItemDetails/index.js b/admin/src/components/ItemDetails/index.js
index 75722806..537ef7f7 100644
--- a/admin/src/components/ItemDetails/index.js
+++ b/admin/src/components/ItemDetails/index.js
@@ -13,6 +13,7 @@ import ItemModeration from '../ItemModeration';
 import ItemHeader from '../ItemHeader';
 import AbuseReportsPopUp from '../AbuseReportsPopUp';
 import pluginId from '../../pluginId';
+import { APPROVAL_STATUS } from "../../utils/constants";
 
 const ItemDetails = ({
   id,
@@ -36,6 +37,9 @@ const ItemDetails = ({
   onBlockClick,
   onBlockThreadClick,
   onAbuseReportResolve,
+  onApproveCommentClick,
+  onRejectCommentClick,
+  approvalStatus,
 }) => {
   const [showPopUp, setPopUpVisibility] = useState(false);
 
@@ -58,14 +62,15 @@ const ItemDetails = ({
   };
   const hasThreads = (threadsCount !== undefined) && (threadsCount > 0);
   const isAbuseReported = !isEmpty(reports);
-  const isItemHeaderDisplayed = blocked || blockedThread || removed || isAbuseReported;
+  const isPending = approvalStatus === APPROVAL_STATUS.PENDING;
+  const isItemHeaderDisplayed = blocked || blockedThread || removed || isAbuseReported || isPending;
   const footerProps = {
     authorName,
     authorUser,
     related: isArray(related) ? first(related) : related,
     created_at: created_at || createdAt,
     updated_at: updated_at || updatedAt,
-    isDelailedView: true,
+    isDetailedView: true,
   };
   const headerProps = {
     active,
@@ -74,8 +79,9 @@ const ItemDetails = ({
     isRemoved: removed,
     abuseReports: reports || [],
     isAbuseReported: !isEmpty(reports),
-    isDelailedView: true,
+    isDetailedView: true,
     onReportsClick: onPopUpOpen,
+    approvalStatus,
   };
   const moderationProps = {
     id,
@@ -83,6 +89,9 @@ const ItemDetails = ({
     blockedThread,
     onBlockClick,
     onBlockThreadClick,
+    onApproveCommentClick,
+    onRejectCommentClick,
+    approvalStatus,
   };
   const reportsPopUpProps = {
     blocked,
@@ -105,11 +114,11 @@ const ItemDetails = ({
         clickable={clickable}
         root={root}
         active={active}>
-        { isItemHeaderDisplayed && (<ItemHeader { ...headerProps } />) }
+        {isItemHeaderDisplayed && (<ItemHeader { ...headerProps } />) }
         <p>{content}</p>
         <ItemFooter {...footerProps} />
       </CardItem>
-      { hasThreads && (<CardLevelCounter>
+      {hasThreads && (<CardLevelCounter>
           <FormattedMessage id={`${pluginId}.list.item.threads.count`} values={{ count: threadsCount }}/>
           <CardLevelCounterLink onClick={onClick}>
             <FormattedMessage id={`${pluginId}.list.item.threads.drilldown`} />
@@ -117,8 +126,8 @@ const ItemDetails = ({
           </CardLevelCounterLink>
         </CardLevelCounter>
       )}
-      { active && !removed && (<ItemModeration { ...moderationProps } />) }
-      { (!isEmpty(reports) && active) && (
+      {active && !removed && (<ItemModeration { ...moderationProps } />)}
+      {(!isEmpty(reports) && active) && (
         <AbuseReportsPopUp
           {...reportsPopUpProps}
         />
@@ -146,6 +155,13 @@ ItemDetails.propTypes = {
   onBlockClick: PropTypes.func,
   onBlockThreadClick: PropTypes.func,
   onAbuseReportResolve: PropTypes.func,
+  approvalStatus: PropTypes.oneOf([
+    APPROVAL_STATUS.APPROVED,
+    APPROVAL_STATUS.PENDING,
+    APPROVAL_STATUS
+  ]),
+  onApproveCommentClick: PropTypes.func,
+  onRejectCommentClick: PropTypes.func,
 };
 
 export default ItemDetails;
diff --git a/admin/src/components/ItemHeader/CardHeaderPending.js b/admin/src/components/ItemHeader/CardHeaderPending.js
new file mode 100644
index 00000000..1252f6b2
--- /dev/null
+++ b/admin/src/components/ItemHeader/CardHeaderPending.js
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import { colors } from 'strapi-helper-plugin';
+
+import CardHeaderBlocked from './CardHeaderBlocked';
+
+const CardHeaderPending = styled(CardHeaderBlocked)`
+  color: ${colors.blue};
+`;
+
+export default CardHeaderPending;
diff --git a/admin/src/components/ItemHeader/index.js b/admin/src/components/ItemHeader/index.js
index 64655d7a..7593d32e 100644
--- a/admin/src/components/ItemHeader/index.js
+++ b/admin/src/components/ItemHeader/index.js
@@ -3,24 +3,26 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useGlobalContext, CheckPermissions } from 'strapi-helper-plugin';
-import { faLock, faStream, faAsterisk, faFire } from '@fortawesome/free-solid-svg-icons';
+import { faLock, faStream, faAsterisk, faFire, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import Wrapper from './Wrapper';
 import CardHeaderBlocked from './CardHeaderBlocked';
+import CardHeaderPending from './CardHeaderPending';
 import pluginId from '../../pluginId';
 import CardHeaderIndicatorsContainer from './CardHeaderIndicatorsContainer';
 import CardHeaderIndicatorBlue from './CardHeaderIndicatorBlue';
 import CardHeaderIndicatorRed from './CardHeaderIndicatorRed';
 import CardHeaderReports from './CardHeaderReports';
 import pluginPermissions from '../../permissions';
+import { APPROVAL_STATUS } from "../../utils/constants";
 
-const ItemHeader = ({ active, isDelailedView, blocked, blockedThread, isNew, isAbuseReported, isRemoved, abuseReports, onReportsClick }) => {
+const ItemHeader = ({ active, isDetailedView, blocked, blockedThread, isNew, isAbuseReported, isRemoved, abuseReports, onReportsClick, approvalStatus }) => {
   const { formatMessage } = useGlobalContext();
   const isBlocked = blocked || blockedThread;
-  const hasAnyIndicators = isNew || (isAbuseReported && !isDelailedView);
+  const hasAnyIndicators = isNew || (isAbuseReported && !isDetailedView);
 
   return (
-    <Wrapper hasMargin={isBlocked || isRemoved || (isAbuseReported && isDelailedView)}>
-      { isBlocked && (
+    <Wrapper hasMargin={isBlocked || isRemoved || (isAbuseReported && isDetailedView)}>
+      {isBlocked && (
         <CheckPermissions permissions={pluginPermissions.moderate}>
           <CardHeaderBlocked>
             <FontAwesomeIcon icon={faLock} />
@@ -28,7 +30,7 @@ const ItemHeader = ({ active, isDelailedView, blocked, blockedThread, isNew, isA
             <FormattedMessage id={`${pluginId}.list.item.header.blocked${blockedThread ? '.thread' : ''}`} />
           </CardHeaderBlocked>
         </CheckPermissions>
-      ) }
+      )}
       {
         isRemoved && (
           <CheckPermissions permissions={pluginPermissions.moderate}>
@@ -40,8 +42,18 @@ const ItemHeader = ({ active, isDelailedView, blocked, blockedThread, isNew, isA
           </CheckPermissions>
         )
       }
-      { (isDelailedView && active) && (<>
-        { isAbuseReported && (
+      {
+        approvalStatus === APPROVAL_STATUS.PENDING && (
+          <CheckPermissions permissions={pluginPermissions.moderate}>
+            <CardHeaderPending>
+              <FontAwesomeIcon icon={faExclamationCircle} />
+              <FormattedMessage id={`${pluginId}.list.item.header.pending`} />
+            </CardHeaderPending>
+          </CheckPermissions>
+        )
+      }
+      {(isDetailedView && active) && (<>
+        {isAbuseReported && (
           <CheckPermissions permissions={pluginPermissions.moderateReports}>
             <CardHeaderReports href="#abuse-reports" onClick={onReportsClick}>
               <FontAwesomeIcon icon={faFire} />
@@ -51,13 +63,13 @@ const ItemHeader = ({ active, isDelailedView, blocked, blockedThread, isNew, isA
         )}
       </>)}
       {hasAnyIndicators && <CardHeaderIndicatorsContainer>
-          { isNew && (<CardHeaderIndicatorBlue title={formatMessage({ id: `${pluginId}.list.item.indication.new`})}>
+          {isNew && (<CardHeaderIndicatorBlue title={formatMessage({ id: `${pluginId}.list.item.indication.new`})}>
             <FontAwesomeIcon icon={faAsterisk} />
-          </CardHeaderIndicatorBlue>) }
+          </CardHeaderIndicatorBlue>)} 
           <CheckPermissions permissions={pluginPermissions.moderateReports}>
-            { isAbuseReported && (<CardHeaderIndicatorRed title={formatMessage({ id: `${pluginId}.list.item.indication.abuse`})}>
+            {isAbuseReported && (<CardHeaderIndicatorRed title={formatMessage({ id: `${pluginId}.list.item.indication.abuse`})}>
               <FontAwesomeIcon icon={faFire} />
-            </CardHeaderIndicatorRed>) }
+            </CardHeaderIndicatorRed>)}
           </CheckPermissions>
         </CardHeaderIndicatorsContainer>
       }
@@ -67,7 +79,7 @@ const ItemHeader = ({ active, isDelailedView, blocked, blockedThread, isNew, isA
 
 ItemHeader.propTypes = {
   active: PropTypes.bool,
-  isDelailedView: PropTypes.bool,
+  isDetailedView: PropTypes.bool,
   blocked: PropTypes.bool,
   blockedThread: PropTypes.bool,
   isNew: PropTypes.bool,
@@ -75,6 +87,11 @@ ItemHeader.propTypes = {
   isAbuseReported: PropTypes.bool,
   abuseReports: PropTypes.array,
   onReportsClick: PropTypes.func,
+  approvalStatus: PropTypes.oneOf([
+    APPROVAL_STATUS.APPROVED,
+    APPROVAL_STATUS.PENDING,
+    APPROVAL_STATUS
+  ])
 };
 
 export default ItemHeader;
diff --git a/admin/src/components/ItemModeration/index.js b/admin/src/components/ItemModeration/index.js
index 29f6b3d5..67a419a7 100644
--- a/admin/src/components/ItemModeration/index.js
+++ b/admin/src/components/ItemModeration/index.js
@@ -1,21 +1,51 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useGlobalContext, CheckPermissions } from 'strapi-helper-plugin';
 import { Button } from '@buffetjs/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faComment, faCommentSlash, faComments } from '@fortawesome/free-solid-svg-icons';
+import { faComment, faCommentSlash, faComments, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import Wrapper from './Wrapper';
 import pluginId from '../../pluginId';
 import pluginPermissions from '../../permissions';
+import { APPROVAL_STATUS } from '../../utils/constants';
 
-const ItemModeration = ({ id, blocked, blockedThread, onBlockClick, onBlockThreadClick }) => {
-
+const ItemModeration = ({ id, blocked, blockedThread, onBlockClick, onBlockThreadClick, onApproveCommentClick, onRejectCommentClick, approvalStatus }) => {
   const { formatMessage } = useGlobalContext();
+  const canBeApproved =
+    approvalStatus === APPROVAL_STATUS.PENDING ||
+    approvalStatus === APPROVAL_STATUS.REJECTED;
+  const approvalButtonProps = useMemo(
+    () =>
+      canBeApproved
+        ? {
+            onClick: onApproveCommentClick.bind(null, id),
+            color: 'primary',
+            label: formatMessage({
+              id: `${pluginId}.list.item.moderation.button.comment.approval.approve`,
+            }),
+          }
+        : {
+            onClick: onRejectCommentClick.bind(null, id),
+            color: 'delete',
+            label: formatMessage({
+              id: `${pluginId}.list.item.moderation.button.comment.approval.reject`,
+            }),
+          },
+    [canBeApproved, id],
+  );
 
   return (
     <CheckPermissions permissions={pluginPermissions.moderate}>
       <Wrapper>
-        { !blockedThread && (
+        {approvalStatus ? (
+          <CheckPermissions permissions={pluginPermissions.moderateComments}>
+            <Button
+              {...approvalButtonProps}
+              icon={<FontAwesomeIcon icon={faExclamationCircle} />}
+            />
+          </CheckPermissions>
+        ) : null}
+        {!blockedThread && (
           <CheckPermissions permissions={pluginPermissions.moderateComments}>
             <Button
               onClick={e => onBlockClick(id)}
@@ -42,6 +72,13 @@ ItemModeration.propTypes = {
   blockedThread: PropTypes.bool, 
   onBlockClick: PropTypes.func.isRequired, 
   onBlockThreadClick: PropTypes.func.isRequired,
+  approvalStatus: PropTypes.oneOf([
+    APPROVAL_STATUS.APPROVED,
+    APPROVAL_STATUS.PENDING,
+    APPROVAL_STATUS
+  ]),
+  onApproveCommentClick: PropTypes.func,
+  onRejectCommentClick: PropTypes.func,
 };
 
 export default ItemModeration;
\ No newline at end of file
diff --git a/admin/src/containers/DataManagerProvider/actions.js b/admin/src/containers/DataManagerProvider/actions.js
index c374d3e3..89860809 100644
--- a/admin/src/containers/DataManagerProvider/actions.js
+++ b/admin/src/containers/DataManagerProvider/actions.js
@@ -9,3 +9,7 @@ export const BLOCK_COMMENT_SUCCESS = 'BLOCK_COMMENT_SUCCESS';
 export const BLOCK_COMMENT_THREAD_SUCCESS = 'BLOCK_COMMENT_THREAD_SUCCESS';
 export const RESOLVE_ABUSE_REPORT = 'RESOLVE_ABUSE_REPORT';
 export const RESOLVE_ABUSE_REPORT_SUCCESS = 'RESOLVE_ABUSE_REPORT_SUCCESS';
+export const APPROVE_COMMENT = 'APPROVE_COMMENT';
+export const REJECT_COMMENT = 'REJECT_COMMENT';
+export const APPROVE_COMMENT_SUCCESS = 'APPROVE_COMMENT_SUCCESS';
+export const REJECT_COMMENT_SUCCESS = 'REJECT_COMMENT_SUCCESS';
\ No newline at end of file
diff --git a/admin/src/containers/DataManagerProvider/index.js b/admin/src/containers/DataManagerProvider/index.js
index c985de63..e8443fee 100644
--- a/admin/src/containers/DataManagerProvider/index.js
+++ b/admin/src/containers/DataManagerProvider/index.js
@@ -31,6 +31,10 @@ import {
   GET_SINGLE_DATA_SUCCEEDED,
   RESOLVE_ABUSE_REPORT,
   RESOLVE_ABUSE_REPORT_SUCCESS,
+  APPROVE_COMMENT,
+  APPROVE_COMMENT_SUCCESS,
+  REJECT_COMMENT,
+  REJECT_COMMENT_SUCCESS,
 } from './actions';
 
 const RECENTLY_VIEVEW_KEY = `${pluginId}-recently-viewed`;
@@ -203,6 +207,52 @@ const DataManagerProvider = ({ children }) => {
     }
   };
 
+  const approveComment = async (id) => {
+    try {
+      dispatch({ type: APPROVE_COMMENT });
+      emitEvent('willApprove');
+
+      await request(`/${pluginId}/moderation/approve/${id}`, {
+        method: 'PUT',
+      });
+
+      getCurrent(dispatch, getSearchParams());
+      getDetails(dispatch, activeId);
+
+      dispatch({ type: APPROVE_COMMENT_SUCCESS });
+      emitEvent('didApprove');
+
+      strapi.notification.success(`${pluginId}.notification.comment.approval`);
+    } catch (err) {
+      console.error({ err: err.response });
+      strapi.notification.error('notification.error');
+      emitEvent('didNotApprove');
+    }
+  };
+
+  const rejectComment = async (id) => {
+    try {
+      dispatch({ type: REJECT_COMMENT });
+      emitEvent('willReject');
+
+      await request(`/${pluginId}/moderation/reject/${id}`, {
+        method: 'PUT',
+      });
+
+      getCurrent(dispatch, getSearchParams());
+      getDetails(dispatch, activeId);
+
+      dispatch({ type: REJECT_COMMENT_SUCCESS });
+      emitEvent('didReject');
+
+      strapi.notification.success(`${pluginId}.notification.comment.approval`);
+    } catch (err) {
+      console.error({ err: err.response });
+      strapi.notification.error('notification.error');
+      emitEvent('didNotReject');
+    }
+  };
+
   const getSearchParams = useCallback(
     (updatedParams = {}) => {
       return {
@@ -252,6 +302,8 @@ const DataManagerProvider = ({ children }) => {
         resolveAbuseReport,
         isInDevelopmentMode,
         handleChangeParams,
+        approveComment,
+        rejectComment,
       }}
     >
       {isLoading ? (
diff --git a/admin/src/containers/DetailsView/index.js b/admin/src/containers/DetailsView/index.js
index 40e92383..5ca631f4 100644
--- a/admin/src/containers/DetailsView/index.js
+++ b/admin/src/containers/DetailsView/index.js
@@ -33,6 +33,8 @@ const DetailsView = () => {
     blockComment,
     blockCommentThread,
     resolveAbuseReport,
+    approveComment,
+    rejectComment,
   } = useDataManager();
 
   const { formatMessage } = useGlobalContext();
@@ -63,6 +65,8 @@ const DetailsView = () => {
               onBlockClick={blockComment}
               onBlockThreadClick={blockCommentThread}
               onClick={e => onCommentClick(e, hasThreads ? item.children[0].id : item.id)}
+              onApproveCommentClick={approveComment}
+              onRejectCommentClick={rejectComment}
               />)
           })
         }
@@ -73,19 +77,21 @@ const DetailsView = () => {
 
   return (
     <Wrapper className="col-md-8">
-      { isLoadingForDetailsDataToBeSet && <LoadingIndicatorPage />}
-      { !isLoadingForDetailsDataToBeSet && !activeItem && (<EmptyView fixPosition>
+      {isLoadingForDetailsDataToBeSet && <LoadingIndicatorPage />}
+      {!isLoadingForDetailsDataToBeSet && !activeItem && (<EmptyView fixPosition>
           <FontAwesomeIcon icon={faComments} size="5x" />
           <FormattedMessage id={getTrad('moderation.content.empty')} />
         </EmptyView>)}
-      { activeItem && (<>
-        { selected.threadOf && (<CardLevelWrapper>
+      {activeItem && (<>
+        {selected.threadOf && (<CardLevelWrapper>
             <ItemDetails
               {...selected.threadOf}
               clickable={true}
               root={true}
               onAbuseReportResolve={resolveAbuseReport}
               onClick={e => onCommentClick(e, selected.threadOf.id)}
+              onApproveCommentClick={approveComment}
+              onRejectCommentClick={rejectComment}
             />
             <CardWrapper root={true}>
               {renderCommentsTree(selected, level)}
diff --git a/admin/src/permissions.js b/admin/src/permissions.js
index 57c8acba..fc7c0ba3 100644
--- a/admin/src/permissions.js
+++ b/admin/src/permissions.js
@@ -16,10 +16,14 @@ const pluginPermissions = {
     { action: 'plugins::comments.read', subject: null },
     { action: 'plugins::comments.moderate.block.comment', subject: null },
     { action: 'plugins::comments.moderate.block.thread', subject: null },
+    { action: 'plugins::comments.moderate.approve.comment', subject: null },
+    { action: 'plugins::comments.moderate.reject.comment', subject: null },
   ],
   moderateComments: [
     { action: 'plugins::comments.read', subject: null },
     { action: 'plugins::comments.moderate.block.comment', subject: null },
+    { action: 'plugins::comments.moderate.approve.comment', subject: null },
+    { action: 'plugins::comments.moderate.reject.comment', subject: null },
   ],
   moderateThreads: [
     { action: 'plugins::comments.read', subject: null },
diff --git a/admin/src/translations/en.json b/admin/src/translations/en.json
index 79c9dd4e..5de30e81 100644
--- a/admin/src/translations/en.json
+++ b/admin/src/translations/en.json
@@ -5,6 +5,7 @@
     "list.header.description": "{count, plural, =0 {All available} one {# new comment} other {# new comments}}",
     "list.content.empty": "Nothing found, lift your search criteria and try again",
     "list.item.header.blocked": "This comment has been blocked",
+    "list.item.header.pending": "Pending",
     "list.item.header.blocked.thread": "This comment and thread have been blocked",
     "list.item.header.removed": "This comment and thread have been removed by author",
     "list.item.indication.new": "New comment",
@@ -16,6 +17,8 @@
     "list.item.moderation.button.comment.hide": "Hide comment",
     "list.item.moderation.button.thread.restore": "Restore thread",
     "list.item.moderation.button.thread.hide": "Hide thread",
+    "list.item.moderation.button.comment.approval.approve": "Approve",
+    "list.item.moderation.button.comment.approval.reject": "Reject",
     "moderation.header.title": "Moderation",
     "moderation.header.description": "Discussion thread",
     "moderation.content.empty": "Choose a comment to start moderating",
@@ -31,5 +34,6 @@
     "popup.reports.empty": "All good, no issues reported",
     "notification.comment.visibility": "Comment visibility has been changed",
     "notification.thread.visibility": "Comment thread visibility has been changed",
-    "notification.abuse-report.resolution": "Abuse report has been resolved"
+    "notification.abuse-report.resolution": "Abuse report has been resolved",
+    "notification.comment.approval": "Comment approval status has been changed"
 }
diff --git a/admin/src/utils/constants.js b/admin/src/utils/constants.js
new file mode 100644
index 00000000..1f49fafc
--- /dev/null
+++ b/admin/src/utils/constants.js
@@ -0,0 +1,9 @@
+const APPROVAL_STATUS = {
+  PENDING: 'PENDING',
+  APPROVED: 'APPROVED',
+  REJECTED: 'REJECTED',
+};
+
+module.exports = {
+  APPROVAL_STATUS,
+};
diff --git a/config/functions/bootstrap.js b/config/functions/bootstrap.js
index 3c37aa37..6cd66499 100755
--- a/config/functions/bootstrap.js
+++ b/config/functions/bootstrap.js
@@ -16,7 +16,7 @@ module.exports = async () => {
     },
     {
       section: 'plugins',
-      displayName: 'Modefation',
+      displayName: 'Moderation',
       uid: 'moderate',
       pluginName: 'comments',
     },
@@ -41,6 +41,20 @@ module.exports = async () => {
       subCategory: 'moderate',
       pluginName: 'comments',
     },
+    {
+      section: 'plugins',
+      displayName: 'Single comments',
+      uid: 'moderate.approve.comment',
+      subCategory: 'moderate',
+      pluginName: 'comments',
+    },
+    {
+      section: 'plugins',
+      displayName: 'Single comments',
+      uid: 'moderate.reject.comment',
+      subCategory: 'moderate',
+      pluginName: 'comments',
+    },
   ];
 
   const { actionProvider } = strapi.admin.services.permission;
diff --git a/config/routes.json b/config/routes.json
index b0c7c5e4..b91281ee 100644
--- a/config/routes.json
+++ b/config/routes.json
@@ -111,6 +111,32 @@
       "config": {
         "policies": [["admin::hasPermissions", ["plugins::comments.moderate.reports"]]]
       }
+    },
+    {
+      "method": "PUT",
+      "path": "/moderation/approve/:id",
+      "handler": "comments.approveComment",
+      "config": {
+        "policies": [
+          [
+            "admin::hasPermissions",
+            ["plugins::comments.moderate.approve.comment"]
+          ]
+        ]
+      }
+    },
+    {
+      "method": "PUT",
+      "path": "/moderation/reject/:id",
+      "handler": "comments.rejectComment",
+      "config": {
+        "policies": [
+          [
+            "admin::hasPermissions",
+            ["plugins::comments.moderate.reject.comment"]
+          ]
+        ]
+      }
     }
   ]
 }
diff --git a/config/schema.graphql.js b/config/schema.graphql.js
index 0283ca65..e80ff2d3 100644
--- a/config/schema.graphql.js
+++ b/config/schema.graphql.js
@@ -13,6 +13,7 @@ const BASE_COMMENTS = `
   removed: Boolean
   relatedSlug: String
   reports: [CommentReport]
+  approvalStatus: CommentApprovalStatus
 `;
 const jsonParse = (json) => {
   try {
@@ -35,6 +36,11 @@ module.exports = {
           DISCRIMINATION
           OTHER
       }
+      enum CommentApprovalStatus {
+          PENDING
+          APPROVED
+          REJECTED
+      }
       type CommentReport {
           id: ID!
           content: String
@@ -111,6 +117,7 @@ module.exports = {
         authorUsername: String
         threadOf: String
         related: [NewCommentRelated!]!
+        approvalStatus: CommentApprovalStatus
       }
   `,
   // language=GraphQL
diff --git a/controllers/comments.js b/controllers/comments.js
index 3f3470ac..c3c31ea8 100644
--- a/controllers/comments.js
+++ b/controllers/comments.js
@@ -163,6 +163,23 @@ module.exports = {
     }
   },
 
+  async approveComment(ctx) {
+    const { id } = parseParams(ctx.params || {});
+    try {
+      return await strapi.plugins.comments.services.comments.approveComment(id);
+    } catch (e) {
+      throwError(ctx, e);
+    }
+  },
+
+  async rejectComment(ctx) {
+    const { id } = parseParams(ctx.params || {});
+    try {
+      return await strapi.plugins.comments.services.comments.rejectComment(id);
+    } catch (e) {
+      throwError(ctx, e);
+    }
+  },
   async config(ctx) {
     const configRelatedContentTypes = _.get(strapi.config, ['plugins', 'comments', 'relatedContentTypes'], {});
     const contentsTypes = this.getContentsTypes();
diff --git a/models/comment.settings.json b/models/comment.settings.json
index 913bacf4..e51aed17 100644
--- a/models/comment.settings.json
+++ b/models/comment.settings.json
@@ -93,6 +93,10 @@
       "model": "comment",
       "plugin": "comments",
       "configurable": false
+    },
+    "approvalStatus": {
+      "type": "string",
+      "configurable": false
     }
   }
 }
diff --git a/services/comments.js b/services/comments.js
index 8c33476e..5e645c01 100644
--- a/services/comments.js
+++ b/services/comments.js
@@ -13,6 +13,7 @@ const {
     isValidUserContext,
     resolveUserContextError,
 } = require('./utils/functions');
+const { APPROVAL_STATUS } = require('./utils/constants')
 
 /**
  * comments.js service
@@ -255,6 +256,12 @@ module.exports = {
                 if (!rel) {
                     throw new PluginError(404, 'Related entity not found');
                 }
+                if (
+                    rel.requireCommentsApproval &&
+                    data.approvalStatus !== APPROVAL_STATUS.PENDING
+                ) {
+                    throw new PluginError(400, 'Invalid approval status');
+                }
             });
 
             const entity = await strapi.query( model.modelName, pluginName).create({
@@ -403,6 +410,25 @@ module.exports = {
         return this.sanitizeCommentEntity(changedEntity);
     },
 
+    // Approve comment
+    async approveComment(id) {
+        const { pluginName, model } = extractMeta(strapi.plugins);
+        const changedEntity = await strapi
+          .query(model.modelName, pluginName)
+          .update({ id }, { approvalStatus: APPROVAL_STATUS.APPROVED });
+    
+        return this.sanitizeCommentEntity(changedEntity);
+    },
+    
+    async rejectComment(id) {
+        const { pluginName, model } = extractMeta(strapi.plugins);
+        const changedEntity = await strapi
+            .query(model.modelName, pluginName)
+            .update({ id }, { approvalStatus: APPROVAL_STATUS.REJECTED });
+
+        return this.sanitizeCommentEntity(changedEntity);
+    },
+
     markAsRemovedNested(id, status){
         return this.modifiedNestedNestedComments(id, 'removed', status);
     },
diff --git a/services/utils/constants.js b/services/utils/constants.js
new file mode 100644
index 00000000..8d9115e1
--- /dev/null
+++ b/services/utils/constants.js
@@ -0,0 +1,9 @@
+const APPROVAL_STATUS = {
+  PENDING: "PENDING",
+  APPROVED: "APPROVED",
+  REJECTED: "REJECTED",
+};
+
+module.exports = {
+  APPROVAL_STATUS,
+};