Merge branch 'MRM-7030' into 'release/v0.20'

fix: [MRM-7030]

Closes MRM-7030

See merge request mashroom/frontend/main-next!1101

src/features/public/blog/hooks/useCommentContext.tsx

+import React from "react";
+
+export type CommentCount = {
+  [level: string]:
+    | {
+        [parentId: string]: number | undefined;
+      }
+    | undefined;
+};
+
+export type PostCommentsContext = {
+  editCommentId: string | undefined;
+  setEditCommentId: (id: string | undefined) => void;
+  replyCommentId: string | undefined;
+  setReplyCommentId: (id: string | undefined) => void;
+  commentsCount: CommentCount;
+  setCommentsCount: (level: string, count: number, parentId: string) => void;
+};
+
+export const useCommentContext = () =>
+  React.createContext<PostCommentsContext>({
+    editCommentId: undefined,
+    setEditCommentId: () => {},
+    replyCommentId: undefined,
+    setReplyCommentId: () => {},
+    commentsCount: {},
+    setCommentsCount: () => {},
+  });

src/features/public/blog/molecules/GetFullAccess/GetFullAccess.tsx

@@ -13,12 +13,13 @@ export const GetFullAccess: FC = () => {
       <LogoRed />
       <h3 className={css.h3}>Get full access to&nbsp;all features</h3>
 
-      <p className={css.p}>
-        Free tenant find: from Rightmove, Zoopla ads to rent collection.
-      </p>
-      <p className={css.p}>
-        Free tenant find: from Rightmove, Zoopla ads to rent collection.
-      </p>
+      <ul className={css.list}>
+        <li>&bull; Free tenant find</li>
+        <li>&bull; Regulatory updates</li>
+        <li>&bull; Free mortgage advice</li>
+        <li>&bull; Landlord tools</li>
+        <li>&bull; Exclusive landlord community</li>
+      </ul>
 
       <Link href={`/auth/createaccount?redirectTo=${router?.asPath}`}>
         <a className={css.link}>

src/features/public/blog/molecules/GetFullAccess/index.module.css

@@ -21,6 +21,18 @@
   margin: 0 0 1em;
 }
 
+.list {
+  list-style: none;
+  font-size: 16px;
+  line-height: 1.25;
+  margin: 0.75em 0 1em;
+  padding: 0;
+}
+
+.list li {
+  margin: 0 0 0.5em;
+}
+
 .link {
   margin-top: 24px;
   display: block;

src/features/public/blog/molecules/PostComment/PostComment.tsx

 import { CommentAdd } from "../PostCommentAdd/PostCommentAdd";
 import { CommentEdit } from "../PostCommentEdit/PostCommentEdit";
-import { CommentsContext } from "../PostComments/PostComments";
 import { Comments_Api_CorrelationTypeEnum } from "../../../../../graphql-schema-types.generated";
 import { formatDateDayMonthYear } from "../../../../../lib/formatters/date";
+import { useCommentContext } from "../../hooks/useCommentContext";
 import { usePostFetchCommentsQuery } from "../../graphql/PostFetchComments.generated";
 import Avatar from "react-avatar";
 import React, { FC, useCallback, useContext, useEffect } from "react";
@@ -36,6 +36,7 @@ export const Comment: FC<Props> = React.memo(
     parentId,
     userId,
   }) => {
+    const CommentsContext = useCommentContext();
     const {
       replyCommentId,
       setReplyCommentId,

src/features/public/blog/molecules/PostComments/PostComments.tsx

 import { Comment } from "../PostComment/PostComment";
 import { CommentAdd } from "../PostCommentAdd/PostCommentAdd";
+import { CommentCount, useCommentContext } from "../../hooks/useCommentContext";
 import { Comments_Api_CorrelationTypeEnum } from "../../../../../graphql-schema-types.generated";
 import { Loading } from "../../../../../ui";
 import { usePostFetchCommentsQuery } from "../../graphql/PostFetchComments.generated";
@@ -13,33 +14,8 @@ type Props = {
   postId: number;
 };
 
-type CommentCount = {
-  [level: string]:
-    | {
-        [parentId: string]: number | undefined;
-      }
-    | undefined;
-};
-
-type PostCommentsContext = {
-  editCommentId: string | undefined;
-  setEditCommentId: (id: string | undefined) => void;
-  replyCommentId: string | undefined;
-  setReplyCommentId: (id: string | undefined) => void;
-  commentsCount: CommentCount;
-  setCommentsCount: (level: string, count: number, parentId: string) => void;
-};
-
-export const CommentsContext = React.createContext<PostCommentsContext>({
-  editCommentId: undefined,
-  setEditCommentId: () => {},
-  replyCommentId: undefined,
-  setReplyCommentId: () => {},
-  commentsCount: {},
-  setCommentsCount: () => {},
-});
-
 export const Comments: FC<Props> = ({ postId }) => {
+  const CommentsContext = useCommentContext();
   const [replyCommentId, setReplyCommentId] = useState<string | undefined>();
   const [editCommentId, setEditCommentId] = useState<string | undefined>();
   const [commentsCount, setCommentsCount] = useState<CommentCount>({});