\\s*<\\/p>/g, \"\");\n var ua = navigator.userAgent.toLowerCase();\n if (ua.indexOf(\"safari\") <= -1) {\n content = content.replace(/\\s*
/g, \"\");\n content = content.replace(/\\s*
\n \n {getValues(\"content\").length}\n \n /\n \n
\n )}\n {/* emoij picker react */}\n \n {(errors.content?.type == \"required\" ||\n errors.content?.type == \"validate\") && (\n \n {t(\"message.input.errors.content.empty\")}\n
\n )}\n {errors.content?.type == \"maxLength\" && (\n\n {t(\"message.input.errors.content.tooLong\")}\n
\n )}\n\n
\n \n {t(\"message.input.errors.email.empty\")}\n
\n )}\n {errors.email?.type == \"pattern\" && (\n\n {t(\"message.input.errors.email.invalid\")}\n
\n )}\n\n {\n if (value.trim() == \"\") return false;\n return true;\n }\n })}\n style={{\n color:\n commentSetting?.version &&\n commentSetting?.version === \"2.0.0\" &&\n commentSetting.commentConfiguration\n .themeConfig.commentBlock\n .textInputColor\n }}\n className={`w-full border py-[5px] ${(errors\n .fullName?.type == \"required\" ||\n errors.fullName?.type == \"validate\") &&\n \"border-red-600\"} px-[10px] focus:outline-none rounded-[5px]`}\n type='text'\n placeholder={t(\"message.input.fullName\")}\n />\n {(errors.fullName?.type == \"required\" ||\n errors.fullName?.type == \"validate\") && (\n
\n \n {t(\"message.input.errors.fullName.empty\")}\n
\n )}\n\n {currentState.isEditUsername ? (\n \n {commentSetting.userInfo?.userId ? (\n \n {commentSetting.userInfo?.avatar ==\n \"\" && (\n \n {\n commentSetting.userInfo\n .shortName\n }\n \n )}\n
\n ) : (\n \n {\n if (value.trim() == \"\")\n return false;\n return true;\n }\n })}\n />\n {(errors.fullName?.type == \"required\" ||\n errors.fullName?.type == \"validate\") && (\n
\n ) : (\n \n {t(\n \"message.input.errors.fullName.empty\"\n )}\n
\n )}\n\n \n \n \n \n onHandleChangeUsername(false)\n }\n className='comment__active-closeBox cursor-pointer text-[16px] group'>\n \n \n
\n \n {/* font-weight-none */}\n \n onHandleChangeUsername(true)\n }\n style={{\n color:\n commentSetting?.version &&\n commentSetting?.version ===\n \"2.0.0\" &&\n commentSetting\n .commentConfiguration\n .themeConfig.commentBlock\n .textUsernameColor\n }}\n type='button'\n className='text-[13px] font-notosans-italic text-[#2d67ad] underline '>\n Sử dụng tên hiển thị khác?\n \n
\n \n )}\n \n )}\n {!currentState.isEditUsername && (\n \n {HtmlDecoded(\n commentSetting.userInfo.fullName\n )}\n
\n\n {isOpenEmojiList && (\n
\n \n );\n};\n\nexport default React.memo(Editors);\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { useSelector, useDispatch } from \"react-redux\";\nimport { setLogin } from \"./../_redux/commentSlice\";\nimport UserPicture from \"./common/UserPicture\";\nimport PopupOption from \"./common/PopupOption\";\nimport Editor from \"./common/Editor\";\nimport { useTranslation } from 'react-i18next';\n\nfunction WriteComment() {\n // __REDUX\n const { currentState } = useSelector(state => ({\n currentState: state.comment\n }));\n const { commentSetting } = currentState;\n const dispatch = useDispatch();\n // __REFERENCE\n const commentBox = useRef();\n // console.log(commentSetting);\n // __STATE\n // kiểm tra xem người dùng có click vào box viết bình luận hay không\n const [isWrite, setIsWrite] = useState(false);\n // state show 3 options(login,register,binh luan k can dang nhap);\n const [showOptions, setShowOptions] = useState(false);\n const { t } = useTranslation();\n // __EFFECT\n // effect postmessage and set clientHeight\n useEffect(() => {\n setTimeout(() => {\n window.parent.postMessage(\n { clientHeight: document.body.offsetHeight + 10 },\n \"*\"\n );\n },10);\n }, [showOptions, isWrite]);\n\n // __FUNCTION\n // mở options lựa chọn các chế độ (đăng nhập , đăng ký, or bình luận k cần đăng nhập)\n const onOpenAndCloseOverlayOptions = (isShowOption, isWrite) => {\n setShowOptions(isShowOption);\n setIsWrite(isWrite);\n setTimeout(() => {\n window.parent.postMessage(\n { clientHeight: document.body.offsetHeight + 10 },\n \"*\"\n );\n },10)\n };\n //Mở box comment khi không đăng nhập\n const onOpenCommentNotLogin = isWrite => {\n if (commentSetting.isNotLogin === false) {\n dispatch(setLogin(true));\n }\n setIsWrite(isWrite);\n };\n // console.log(commentSetting.userInfo);\n return (\n \n {[\"😀\",\"😍\",\"😄\",\"😁\",\"😆\",\"😅\",\"🤣\",\"😂\",\"😝\",\"🥰\",\"😘\",\"😰\",\"🤮\",\"😫\",\"😡\"].map(emoji => {\n return ;\n })}\n
\n )}\n \n {/*
\n \n );\n}\n\nexport default WriteComment;\n","import classNames from \"classnames\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Tooltip } from \"react-tippy\";\nimport * as actions from \"../../Comment/_redux/commentAction\";\nimport \"react-tippy/dist/tippy.css\";\nimport {\n getCommentActions,\n removeCommentActions,\n setCommentActions\n} from \"../helpers\";\n\nconst TippyAction = ({ children, data: propsData }) => {\n const [open, setOpen] = useState(false);\n const { currentState } = useSelector(state => ({\n currentState: state.comment\n }));\n const { commentSetting } = currentState;\n const dispatch = useDispatch();\n const dataActive = getCommentActions(propsData.commentId);\n const tooltipRef = useRef();\n const [refresh, setRefresh] = useState(false);\n const [test, setTest] = useState(false);\n const [data, setData] = useState({\n totalLike: {\n quantity:\n (propsData?.totalLike || 0) + (dataActive?.type == 1 ? 1 : 0),\n imageUrl: \"https://static.vnncdn.net/v1/icon/comment_like_icon.svg\",\n type: 1,\n title: \"Thích\",\n color: \"#2D67AD\",\n key: \"totalLike\"\n },\n totalVeryLike: {\n quantity:\n (propsData?.totalVeryLike || 0) +\n (dataActive?.type == 20 ? 1 : 0),\n imageUrl:\n \"https://static.vnncdn.net/v1/icon/comment_heart_icon.svg\",\n type: 20,\n title: \"Yêu thích\",\n color: \"#DB4B69\",\n key: \"totalVeryLike\"\n },\n totalHappy: {\n quantity:\n (propsData?.totalHappy || 0) + (dataActive?.type == 21 ? 1 : 0),\n imageUrl:\n \"https://static.vnncdn.net/v1/icon/comment_happy_icon.svg\",\n type: 21,\n title: \"Vui\",\n color: \"#ffa905\",\n key: \"totalHappy\"\n },\n totalSurprise: {\n quantity:\n (propsData?.totalSurprise || 0) +\n (dataActive?.type == 22 ? 1 : 0),\n imageUrl: \"https://static.vnncdn.net/v1/icon/comment_wow_icon.svg\",\n type: 22,\n title: \"Ngạc nhiên\",\n color: \"#ffa905\",\n key: \"totalSurprise\"\n },\n totalSad: {\n quantity:\n (propsData?.totalSad || 0) + (dataActive?.type == 23 ? 1 : 0),\n imageUrl: \"https://static.vnncdn.net/v1/icon/comment_sad_icon.svg\",\n type: 23,\n title: \"Buồn\",\n color: \"#ffa905\",\n key: \"totalSad\"\n }\n });\n useEffect(() => {\n // console.log(tooltipRef.current);\n if (window.innerWidth < 767) {\n tooltipRef.current.tippy.store[0].popper.style.display = \"none\";\n tooltipRef.current.showTooltip();\n setTimeout(() => {\n tooltipRef.current.hideTooltip();\n tooltipRef.current.tippy.store[0].popper.style.display =\n \"block\";\n }, 1000);\n }\n // tooltipRef.current.updateReactDom();\n // if(dataActive){\n // const cloneData = JSON.parse(JSON.stringify(data));\n // Object.values(cloneData).forEach(record => {\n // if(record.type == dataActive){\n // record.quantity++\n // }\n // });\n // setData(cloneData);\n // }\n }, []);\n const totalQuantityActions = useCallback(() => {\n return Object.values(data).reduce((pre, cur) => {\n return pre + cur.quantity;\n }, 0);\n }, []);\n const onHandleActions = async function(params) {\n setOpen(false);\n let request = {\n CommentId: propsData.commentId,\n categoryId: commentSetting.categoryId,\n objectId: commentSetting.objectId,\n websiteId: commentSetting.websiteId,\n Type: params.type\n };\n window.parent.postMessage(\n { onSetCookie: { [`vnn_cmt_${propsData.commentId}`]: true } },\n \"*\"\n );\n if(commentSetting.maxLimitedLikeAndUnlike[`vnn_cmt_${propsData.commentId}`]) return;\n if (dataActive) {\n if (params.type == dataActive.type) {\n // console.log(params);\n removeCommentActions(propsData.commentId);\n data[params.key].quantity--;\n await dispatch(actions.commentUnLike(request));\n } else {\n removeCommentActions(propsData.commentId);\n setCommentActions(propsData.commentId, params);\n data[dataActive.key].quantity--;\n data[params.key].quantity++;\n setRefresh(!refresh);\n // await dispatch(actions.commentUnLike(request));\n }\n } else {\n setCommentActions(propsData.commentId, params);\n data[params.key].quantity++;\n await dispatch(actions.commentLike(request));\n }\n // setData({...data,[data.type]: {...data[data.type],quantity}})\n };\n // console.log(dataActive);\n return (\n \n {/* hiển thị box 3 options (login,register,and bình luận k cần đăng nhập) khi click vào button */}\n {showOptions &&\n commentSetting.isNotLogin === false &&\n !commentSetting?.userInfo?.userId && (\n onOpenAndCloseOverlayOptions(true, true)}\n className='block h-[70px] w-full border border-[#CDE3FF] bg-[#EEF5FF] rounded-[5px] cursor-text '>\n
\n )}\n {/* khi bình luận mà k cần login show nội dung sau */}\n {commentSetting.isNotLogin &&\n isWrite &&\n !commentSetting?.userInfo?.userId && (\n \n setOpen(false)}\n // unmountHTMLWhenHide\n html={\n {\n // alert('touch')\n }}\n onClick={() => {\n onHandleActions({ type: 1, key: \"totalLike\" });\n }}\n // onMouseOver={() => setOpen(true)}\n // onMouseMove={() => {\n // console.log('running !');\n // // console.log(tooltipRef.current);\n // // tooltipRef.current.hideTooltip()\n // }}\n >\n {dataActive ? (\n (() => {\n const dataResult = Object.values(data).find(\n record => record.type === dataActive.type\n );\n if (!dataResult) return \"\";\n return (\n \n {dataResult?.title}\n \n );\n })()\n ) : (\n Thích\n )}\n \n \n \n {Object.values(data).map((record, index) => (\n \n
\n ))}\n \n }\n // boundary=\"viewport\"\n position='top-start'\n // arrow={true}\n trigger='click'\n className='cursor-pointer'\n // animation=\"fade\"\n interactive={false}\n // appendTo=\"parent\"\n // open={true}\n // unmountHTMLWhenHide={true}\n // delay={1000}\n popperOptions={{}}\n theme='light'>\n \n {Object.values(data).map((record, index) => (\n {\n onHandleActions(record);\n tooltipRef.current.hideTooltip();\n }}\n className='comment-tooltip transition-all mr-[10px] '>\n {record.title}\n
\n }\n interactive={true}\n position='top-start'\n // arrow={true}\n theme='light'\n hideOnClick={true}\n touchHold={true}\n className='font-notosans-regular mr-[25px] '>\n \n {Object.values(data)\n .reverse()\n .map(\n (record, index) =>\n // record.quantity > 0 && (\n //
\n \n {totalQuantityActions() > 0 && (\n \n {totalQuantityActions()}\n \n )}\n \n );\n};\n\nexport default TippyAction;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { setCommentLike } from \"./../_redux/commentSlice\";\nimport { timeFormatter, socialShare, htmlToText } from \"./../helpers\";\nimport { useTranslation } from \"react-i18next\";\nimport { setHeightLayout } from \"./../helpers\";\nimport HTMLEllipsis from \"react-lines-ellipsis/lib/html\";\nimport TippyAction from \"./TippyAction\";\n\nfunction CommentItem({\n data,\n onToggleReply,\n isReply,\n lastIndexItem,\n currentIndex\n}) {\n // __REDUX\n const { currentState } = useSelector(state => ({\n currentState: state.comment\n }));\n const { commentSetting } = currentState;\n // __STATE\n // const [isLike, setIsLike] = useState(false);\n // const [maxLimitLike, setMaxLimitLike] = useState(0);\n const [showMore, setShowMore] = useState(false);\n // console.log(lastIndexItem,currentIndex);\n // handle languages\n const { t } = useTranslation();\n // __FUNCTION HANDLE\n const onOpenAndCloseReply = () => {\n if (isReply) onToggleReply(false);\n else onToggleReply(true);\n };\n\n // effect handle active vote\n // useEffect(() => {\n // if (\n // localStorage.getItem(`vnn-active-vote-ID${commentSetting.objectId}`)\n // ) {\n // let isEmpty = true;\n // JSON.parse(\n // localStorage.getItem(\n // `vnn-active-vote-ID${commentSetting.objectId}`\n // )\n // ).forEach(item => {\n // if (item?.commentId == data.commentId) isEmpty = false;\n // });\n // if (!isEmpty) setIsLike(true);\n // }\n // }, []);\n // function handle active vote\n // const onHandleActiveVote = () => {\n // let totalVoteActive = localStorage.getItem(\n // `vnn-active-vote-ID${commentSetting.objectId}`\n // )\n // ? JSON.parse(\n // localStorage.getItem(\n // `vnn-active-vote-ID${commentSetting.objectId}`\n // )\n // )\n // : [];\n // if (!isLike) {\n // // console.log(data.commentId);\n // // console.log(commentSetting.objectId);\n // totalVoteActive.push({\n // objectId: commentSetting.objectId,\n // commentId: data.commentId\n // });\n // localStorage.setItem(\n // `vnn-active-vote-ID${commentSetting.objectId}`,\n // JSON.stringify(totalVoteActive)\n // );\n // } else {\n // totalVoteActive = totalVoteActive.filter(\n // item => item.commentId !== data.commentId\n // );\n // // console.log(totalVoteActive);\n // if (totalVoteActive.length > 0) {\n // localStorage.setItem(\n // `vnn-active-vote-ID${commentSetting.objectId}`,\n // JSON.stringify(totalVoteActive)\n // );\n // } else\n // localStorage.removeItem(\n // `vnn-active-vote-ID${commentSetting.objectId}`\n // );\n // }\n // };\n\n const onHandleSeemoreContent = () => {\n setTimeout(() => setHeightLayout(20));\n setShowMore(true);\n };\n // console.log(commentSetting);\n // __RENDER\n return (\n \n
\n )\n )}\n \n \n {data.userName.split(\"\")[0]}\n
\n )}\n \n \n {data.avatarUrl ? (\n
\n ) : (\n \n \n {data.userName}\n {data?.isPin && (\n
\n \n
\n \n {showMore ? (\n
\n ) : (\n \n
\n */}\n {/* . */}\n \n {timeFormatter(data.createdDate)}\n \n \n \n \n \n );\n}\n\nexport default CommentItem;\n","import React, { useState, useEffect } from \"react\";\nimport { useSelector, useDispatch } from \"react-redux\";\nimport { setLogin } from \"./../_redux/commentSlice\";\nimport { useForm } from \"react-hook-form\";\nimport * as actions from \"../../Comment/_redux/commentAction\";\nimport ClipLoader from \"react-spinners/ClipLoader\";\nimport EmojiMartGroup from \"./EmojiMartGroup\";\nimport UserPicture from \"./common/UserPicture\";\nimport PopupOption from \"./common/PopupOption\";\nimport Editor from './common/Editor';\nimport { uppercaseFirstLetter } from './../helpers';\nimport { useTranslation } from 'react-i18next';\n\nfunction ReplyComment({\n data,\n parentData,\n type,\n setIsShowReply,\n setIsReply,\n lastIndex\n}) {\n\n // Getting curret state of customers list from store (Redux)\n const { currentState } = useSelector(state => ({\n currentState: state.comment\n }));\n const { actionsLoading, commentSetting } = currentState;\n\n // init dispatch\n const dispatch = useDispatch();\n\n // người dùng có click hay không\n const [isWrite, setIsWrite] = useState(false);\n // translation\n const { t } = useTranslation();\n // show 3 options(login,register,binh luan k can dang nhap);\n const [showOptions, setShowOptions] = useState(false);\n\n // effect postmessage and set clientHeight\n useEffect(() => {\n window.parent.postMessage(\n { clientHeight: document.body.offsetHeight },\n \"*\"\n );\n }, [showOptions, commentSetting, isWrite]);\n\n const onOpenAndCloseOverlayOptions = (isShowOption, isWrite) => {\n setShowOptions(isShowOption);\n setIsWrite(isWrite);\n };\n\n const onOpenCommentNotLogin = isWrite => {\n if (commentSetting.isNotLogin == false) {\n dispatch(setLogin(true));\n }\n setIsWrite(isWrite);\n };\n \n // submit data\n const onSubmit = commentData => {\n // onSend({ ...commentData, parentId: data.commentId, answerId: parentComment?.commentId });\n let request = {\n emailOrMobile: commentData.email !== \"\"\n ? commentData.email\n : commentSetting.userInfo.userId,\n fullName: commentData.fullName !== \"\"\n ? uppercaseFirstLetter(commentData.fullName.trim().split(/^|\\*|@|&|-|'|\\(|\\)|<|>|#$/g).join(\"\").replace(\"*\",\"\"))\n : commentSetting.userInfo.fullName,\n parentId: parentData.commentId,\n content: commentData.content.trim(),\n answerId:\n type == \"replyChilren\" ? data.commentId : parentData.commentId,\n categoryId: commentSetting.categoryId,\n objectId: commentSetting.objectId,\n title: commentSetting.title,\n categoryName: commentSetting.categoryName,\n websiteId: commentSetting.websiteId,\n viewUrl: commentSetting.viewUrl\n };\n // has sourceType\n if(commentSetting?.sourceType) request.SourceType = commentSetting?.sourceType;\n dispatch(actions.commentAdd(request));\n setIsWrite(false);\n if (setIsShowReply) {\n setIsShowReply(false);\n } else {\n setIsReply(false);\n }\n };\n\n return (\n \n \n {t(\"message.actions.answer\")}\n \n {/* . */}\n {/* \n \n Thích\n \n */}\n
\n {/* . */}\n {/* \n \n
\n )}\n \n \n );\n}\n\nexport default ReplyComment;\n","import React, { useEffect, useState } from \"react\";\nimport ReplyComment from \"./ReplyComment\";\nimport * as actions from \"../../Comment/_redux/commentAction\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport {\n socialShare,\n timeFormatter,\n setHeightLayout,\n htmlToText\n} from \"./../helpers\";\nimport { useTranslation } from \"react-i18next\";\nimport HTMLEllipsis from \"react-lines-ellipsis/lib/html\";\nimport TippyAction from \"./TippyAction\";\n\nconst FeedbackItem = ({ data, parentData, totalReply, type, lastIndex }) => {\n // __REDUX\n const { currentState } = useSelector(state => ({\n currentState: state.comment\n }));\n const { commentSetting } = currentState;\n const [isLike, setIsLike] = useState(false);\n // initial dispatch\n const dispatch = useDispatch();\n\n // __STATE\n const [isShowReply, setIsShowReply] = useState(false);\n const [showMore, setShowMore] = useState(false);\n // tranlation\n const { t } = useTranslation();\n // __EFFECT\n // effect để change height của iframe mỗi khi có thay đổi dependency\n useEffect(() => {\n setHeightLayout(25);\n }, [isShowReply]);\n // FUNCTION HANDLE\n const onCloseAndOpenReyplyAnswer = () => {\n setIsShowReply(!isShowReply);\n };\n const onLike = function(data) {\n let request = {\n CommentId: data.commentId,\n categoryId: commentSetting.categoryId,\n objectId: commentSetting.objectId,\n websiteId: commentSetting.websiteId\n };\n dispatch(actions.commentLike(request));\n };\n const onUnLike = function(data) {\n let request = {\n CommentId: data.commentId,\n categoryId: commentSetting.categoryId,\n objectId: commentSetting.objectId,\n websiteId: commentSetting.websiteId\n };\n dispatch(actions.commentUnLike(request));\n };\n // const onHandleLikeAndUnlike = () => {\n // window.parent.postMessage(\n // { onSetCookie: { [`vnn_cmt_${data.commentId}`]: true } },\n // \"*\"\n // );\n // if (\n // !commentSetting.maxLimitedLikeAndUnlike[`vnn_cmt_${data.commentId}`]\n // ) {\n // if (isLike) {\n // setIsLike(false);\n // // data.totalLike = data.totalLike - 1;\n // onHandleActiveVote();\n // return onUnLike(data);\n // } else {\n // setIsLike(true);\n // // data.totalLike = data.totalLike + 1;\n // onHandleActiveVote();\n // return onLike(data);\n // }\n // }\n // };\n\n // effect handle active vote\n // useEffect(() => {\n // if (\n // localStorage.getItem(`vnn-active-vote-ID${commentSetting.objectId}`)\n // ) {\n // let isEmpty = true;\n // JSON.parse(\n // localStorage.getItem(\n // `vnn-active-vote-ID${commentSetting.objectId}`\n // )\n // ).forEach(item => {\n // if (item?.commentId == data.commentId) isEmpty = false;\n // });\n // if (!isEmpty) setIsLike(true);\n // }\n // }, []);\n // // function handle active vote\n // const onHandleActiveVote = () => {\n // let totalVoteActive = localStorage.getItem(\n // `vnn-active-vote-ID${commentSetting.objectId}`\n // )\n // ? JSON.parse(\n // localStorage.getItem(\n // `vnn-active-vote-ID${commentSetting.objectId}`\n // )\n // )\n // : [];\n // if (!isLike) {\n // // console.log(data.commentId);\n // // console.log(commentSetting.objectId);\n // totalVoteActive.push({\n // objectId: commentSetting.objectId,\n // commentId: data.commentId\n // });\n // localStorage.setItem(\n // `vnn-active-vote-ID${commentSetting.objectId}`,\n // JSON.stringify(totalVoteActive)\n // );\n // } else {\n // totalVoteActive = totalVoteActive.filter(\n // item => item.commentId !== data.commentId\n // );\n // // console.log(totalVoteActive);\n // if (totalVoteActive.length > 0) {\n // localStorage.setItem(\n // `vnn-active-vote-ID${commentSetting.objectId}`,\n // JSON.stringify(totalVoteActive)\n // );\n // } else\n // localStorage.removeItem(\n // `vnn-active-vote-ID${commentSetting.objectId}`\n // );\n // }\n // };\n\n const onHandleSeemoreContent = () => {\n setTimeout(() => setHeightLayout(20));\n setShowMore(true);\n };\n\n return (\n <>\n \n {/* hiển thị box 3 options (login,register,and bình luận k cần đăng nhập) khi click vào button */}\n {showOptions &&\n commentSetting.isNotLogin === false &&\n !commentSetting?.userInfo?.userId && (\n \n
\n )}\n {/* end box */}\n\n {/* box user da login */}\n {commentSetting.isNotLogin == false &&\n isWrite &&\n commentSetting?.userInfo?.userId && (\n \n {/* \n onOpenAndCloseOverlayOptions(true, true)\n }\n className='h-full w-full border rounded-[5px]'>\n
\n )}\n {/* khi bình luận mà k cần login show box sau */}\n {commentSetting.isNotLogin &&\n isWrite &&\n !commentSetting?.userInfo?.userId && (\n \n {t('message.actions.answering')} : \n
*/}\n \n {type == \"replyParent\"\n ? parentData.userName\n : data.userName}\n
\n\n {t('message.actions.answering')} : \n
\n \n {type == \"replyParent\"\n ? parentData.userName\n : data.userName}\n
\n\n {t('message.actions.answering')} : \n
\n \n {type == \"replyParent\"\n ? parentData.userName\n : data.userName}\n
\n\n \n {data.userName.split(\"\")[0]}\n
\n )}\n \n \n {data.avatarUrl ? (\n
\n ) : (\n \n
\n \n \n {data.userName}\n \n {/* {\n \n \n {totalReply.find(\n item => item.commentId == data.answerId\n )?.userName || parentData.userName}\n \n } */}\n
\n \n \n \n @\n {totalReply.find(\n item => item.commentId == data.answerId\n )?.userName || parentData.userName}\n \n {showMore ? (\n
\n ) : (\n \n
\n \n \n \n {isShowReply && (\n \n \n {t(\"message.actions.answer\")}\n \n
\n \n {timeFormatter(data.createdDate)}\n \n \n
\n )}\n \n );\n};\n\nexport default FeedbackItem;\n","import React from \"react\";\n\nexport const ReturnIcon = ({ color }) => (\n \n
\n );\n}\n\nexport default CommentBox;\n","import React from \"react\";\nimport Skeleton from \"react-loading-skeleton\";\n\nconst SkeletonGroup = () => {\n return (\n \n
\n )}\n {/* feedback */}\n - \n {dataComment?.comments?.map((item, key) => {\n return (\n
- \n
- \n
- \n
\n \n {showLoading ?
\n ) : null}\n \n
\n );\n};\n\nexport default SkeletonGroup;\n","import React from 'react';\nimport { Tabs, TabList, Tab, TabPanel } from 'react-tabs';\nimport 'react-tabs/style/react-tabs.css';\nimport { useState } from 'react';\nimport { useEffect } from 'react';\nimport { useDispatch, useSelector } from \"react-redux\";\nimport WriteComment from \"../components/WriteComment\";\nimport CommentBox from \"../components/CommentBox\";\nimport * as actions from \"../../Comment/_redux/commentAction\";\nimport ClipLoader from 'react-spinners/ClipLoader';\nimport { initCommentSetting, setAvoidSpamLikePost } from './../_redux/commentSlice';\nimport SkeletonGroup from './../components/SkeletonGroup';\nimport { setHeightLayout, createStyles } from './../helpers';\nimport { useTranslation } from 'react-i18next';\nimport queryString from 'query-string';\n\nconst CommentsPage = () => {\n // __REDUX\n const { currentState } = useSelector(\n (state) => ({ currentState: state.comment })\n );\n const { totalRow, pageSize, models, listLoading, commentSetting, actionsLoading, totalComment } = currentState;\n const dispatch = useDispatch();\n \n // __STATE\n const { t, i18n } = useTranslation();\n // current tab\n const [currentTab, setCurrentTab] = useState(2);\n // totalPage\n const [totalPage, setTotalPage] = useState(0);\n // currentPage\n const [currentPage, setCurrentPage] = useState(0);\n // setHeightLayout(0);\n // __EFFECT\n useEffect(() => {\n setTimeout(() => setHeightLayout(0), 100)\n }, [currentTab, listLoading]);\n\n // check models then post message to client\n useEffect(() => {\n if (models?.length == 0 || models == null) {\n window.parent.postMessage({ commentCounts: 'empty' }, '*');\n }\n }, [models]);\n // effect setTotalRow\n // console.log(totalRow);\n useEffect(() => {\n if (totalRow && totalRow > 0 && pageSize) {\n setTotalPage(Math.ceil(totalRow / Number(pageSize) - 1));\n }\n if (totalRow) {\n window.parent.postMessage({ commentCounts: totalComment }, '*');\n }\n }, [totalRow, pageSize]);\n\n // effect change language and change theme\n useEffect(() => {\n if (commentSetting?.locale) {\n i18n.changeLanguage(commentSetting?.locale);\n // console.log(commentSetting);\n } else {\n i18n.changeLanguage('vi');\n }\n // create style in react tabs\n createStyles(\".comment__box\", `\n .react-tabs__tab--selected {\n background: #fff ;\n border-color:unset !important;\n color: ${commentSetting?.version && commentSetting?.version === \"2.0.0\" ? commentSetting.commentConfiguration.themeConfig.tabBlock.activeColor : commentSetting?.theme?.backgroundColor} !important;\n }\n .react-tabs__tab--selected::after{\n content: \"\";\n position: absolute;\n width: 100%;\n height: 2px;\n background: ${commentSetting?.version && commentSetting?.version === \"2.0.0\" ? commentSetting.commentConfiguration.themeConfig.tabBlock.activeColor : commentSetting?.theme?.backgroundColor};\n bottom: -7px;\n left: 0px;\n }\n .react-tabs__tab>button:hover{\n color:${commentSetting?.version && commentSetting?.version === \"2.0.0\" ? commentSetting.commentConfiguration.themeConfig.tabBlock.hoverColor : commentSetting?.theme?.backgroundColor};\n }`\n );\n }, [commentSetting?.locale]);\n\n // effect này sẽ gọi request mỗi lần tab thay đổi\n useEffect(() => {\n if (commentSetting?.vnnSetting) {\n var request = {\n SortType: currentTab,\n objectId: commentSetting.objectId,\n pageIndex: 0,\n };\n const locationParser = queryString.parse(window.location.search);\n if (locationParser?.commentId) request.commentId = locationParser.commentId;\n // has sourceType\n if (commentSetting?.sourceType) request.SourceType = commentSetting?.sourceType;\n dispatch(actions.commentGets(request));\n // console.log(request);\n // console.log(commentSetting);\n }\n setCurrentPage(0);\n }, [currentTab, commentSetting?.vnnSetting])\n\n // effect này để lắng nghe message \n useEffect(() => {\n if (window.addEventListener) {\n window.addEventListener('message', onLoadData, false);\n } else {\n window.attachEvent('onmessage', onLoadData);\n }\n window.parent.postMessage({ commentIframeLoaded: true }, '*');\n // console.log(Math.round(Number(\"52.532\")));\n }, []);\n\n // __FUNCTION HANDLE\n const onLoadData = function (event) {\n if (event.data?.vnnSetting) {\n // all data from parent\n if (event.data?.websiteId?.length > 0 && event.data?.objectId?.length > 0) {\n // init all setting push to redux\n // console.log(event.data);\n // trường hợp không sử dụng User_info\n if (event.data.commentConfiguration.disableOverlayLogin === true) {\n event.data.userInfo = {}\n event.data.isNotLogin = true;\n }\n // if(event.data.commentConfiguration.disableOverlayLogin)\n dispatch(initCommentSetting(event.data))\n window.$websiteId = event.data.websiteId;\n }\n }\n //avoid spam like and unlike\n if (event.data.maxLimitLikeAndUnlike) {\n window.parent.postMessage({ maxLimitLikeAndUnlike: true }, \"*\");\n dispatch(setAvoidSpamLikePost(event.data.maxLimitLikeAndUnlike));\n }\n }\n\n // button seeMore\n const onSeeMoreComment = () => {\n const pageIndex = currentPage;\n var request = {\n SortType: currentTab,\n objectId: commentSetting.objectId,\n pageIndex: pageIndex + 1,\n };\n const locationParser = queryString.parse(window.location.search);\n if (locationParser?.commentId) request.commentId = locationParser.commentId;\n dispatch(actions.commentLoadMore(request));\n setCurrentPage(currentPage + 1);\n }\n // handle tab\n const onHandleTabs = (index) => {\n if (index == 1) return setCurrentTab(0);\n if (index == 2) return setCurrentTab(1);\n setCurrentTab(2);\n }\n // console.log(commentSetting);\n // __RENDER\n return (\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n \n \n \n {/* tab list for desktop */}\n \n \n \n \n \n \n \n \n \n \n
\n \n {\n listLoading == false &&\n <>\n \n {t(\"message.mainTitle\")} {models && models.length > 0 ? ({totalComment}) : null}\n
\n \n ![\"Hình](\"https://static.vnncdn.net/v1/icon/comment-gray.svg\")
\n
:\n {t(\"message.noComment\")}
\n - \n {models && models.map((commentItem, key) => {\n // check last Item de show box icon o vi tri thich hop\n if (key >= models.length - 3) {\n return
- \n {models && models.map((commentItem, key) => {\n // check last Item de show box icon o vi tri thich hop\n if (key >= models.length - 3) {\n return
- \n {models && models.map((commentItem, key) => {\n // check last Item de show box icon o vi tri thich hop\n if (key >= models.length - 3) {\n return