Untitled
/** @format */ import React from "react"; import { useParams } from "react-router-dom"; import { useSelector, useDispatch } from "react-redux"; import { selectToken } from "../../../../redux/_user/userSelectors"; import { useTranslation } from "react-i18next"; import { handleBlockcastPrivacySettings } from "../../../../redux/_blockcast/blockcastSlice"; import { Menu, MenuItem, MenuButton, SubMenu } from "@szhsin/react-menu"; import { AiFillCaretDown } from "react-icons/ai"; import CommonHeader from "../../../../components/Headers/CommonHeader"; import { errorAlert, successAlert } from "../../../../redux/_alert/alertSlice"; import { BlockcastFeed, GroupChatBlockcast, MessageTimeBlockcast, OnlineStatusBlockcast, } from "../../../../Assets/icons"; const BlockcastPrivacy = ({ group, setOpenSettings }) => { const { t } = useTranslation(["common"]); const token = useSelector(selectToken); const { id } = useParams(); const dispatch = useDispatch(); const [feedView, setFeedView] = React.useState("all"); const [msgChannel, setMsgChannel] = React.useState("all"); const [msgBlockcast, setMsgBlockcast] = React.useState("all"); const [onlineStatus, setOnlineStatus] = React.useState("all"); const [msgTime, setMsgTime] = React.useState(0); React.useEffect(() => { if (group) { setFeedView(group.feed_view); setMsgChannel(group.msg_channel); setMsgBlockcast(group.msg_blockcast); setOnlineStatus(group.online_status); setMsgTime(group.msg_time); } }, []); // *** Handle update group policy const handlePrivacySettings = React.useCallback( async ({ name, value }) => { try { if (name === "feed_view") { setFeedView(value); } else if (name === "msg_channel") { setMsgChannel(value); } else if (name === "msg_blockcast") { setMsgBlockcast(value); } else if (name === "online_status") { setOnlineStatus(value); } else { setMsgTime(value); } await dispatch( handleBlockcastPrivacySettings({ id, token, name, value }) ); dispatch(successAlert("Privacy settings updated successfully.")); } catch (error) { dispatch(errorAlert(error.message)); setFeedView(group?.feed_view || "all"); setMsgChannel(group?.msg_channel || "all"); setMsgBlockcast(group?.msg_blockcast || "all"); setOnlineStatus(group?.online_status || "all"); setMsgTime(group?.msg_time || 0); } }, [dispatch, group, id, token] ); const handleCloseMenu = () => { setOpenSettings(false); }; return ( <> <CommonHeader goBack={handleCloseMenu} title={t("Blockcast Privacy")} /> <div className="block_cast_settings_page"> <h3 className="prvacy_settings_header"> {t("Message privacy settings")} </h3> {/* Who can see your blockcast feed */} <div className="privacy_box"> <div className="blockcast_privacy_section"> <div className="privacy_header_box"> <BlockcastFeed style={{ fill: "var(--more-strongText-color)" }} /> <span className="privacy_box_title">{t("blockcast_feed")}</span> <br /> <span className="privacy_box_description"> {t("Only selected user can see your blockcast feed.")} </span> </div> <Menu menuButton={ <MenuButton className={"__privacy_settings_menu_btn "}> <span> <> {feedView === "all" ? ( <>{t("Everyone")}</> ) : ( <> {feedView === "none" ? ( <>{t("None")}</> ) : ( <> {feedView === "mem" ? ( <>{t("Members")}</> ) : ( <>{t("Choose")}</> )} </> )} </> )} </> </span> <AiFillCaretDown className="menu_icon" /> </MenuButton> } > <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "feed_view", value: "all" }) } > {t("Everyone")} </MenuItem> <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "feed_view", value: "mem" }) } > {t("Members")} </MenuItem> <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "feed_view", value: "none" }) } > {t("None")} </MenuItem> </Menu> </div> </div> {/* Who can send messages in blockcast channel */} <div className="privacy_box"> <div className="blockcast_privacy_section"> <div className="privacy_header_box"> <GroupChatBlockcast style={{ fill: "var(--more-strongText-color)" }} /> <span className="privacy_box_title">{t("Group_chat")}</span> <br /> <span className="privacy_box_description"> {t("Only selected user can send messages in group chat.")} </span> </div> <Menu menuButton={ <MenuButton className={"__privacy_settings_menu_btn "}> <span> <> {msgChannel === "all" ? ( <>{t("Everyone")}</> ) : ( <> {msgChannel === "none" ? ( <>{t("None")}</> ) : ( <> {msgChannel === "mem" ? ( <>{t("Members")}</> ) : ( <>{t("Choose")}</> )} </> )} </> )} </> </span> <AiFillCaretDown className="menu_icon" /> </MenuButton> } > <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "msg_channel", value: "all" }) } > {t("Everyone")} </MenuItem> <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "msg_channel", value: "mem" }) } > {t("Members")} </MenuItem> <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "msg_channel", value: "none" }) } > {t("None")} </MenuItem> </Menu> </div> </div> {/* Who can send private messages to blockcast? */} <div className="privacy_box"> <div className="blockcast_privacy_section"> <div className="privacy_header_box"> <BlockcastPrivacy style={{ fill: "var(--more-strongText-color)" }} /> <span className="privacy_box_title"> {t("blockcast_Private_Message")} </span> <br /> <span className="privacy_box_description"> {t( "Only selected user can send private messages to blockcast." )} </span> </div> <Menu menuButton={ <MenuButton className={"__privacy_settings_menu_btn "}> <span> {msgBlockcast === "sub" ? ( <>{t("Subscribers")}</> ) : ( <> {msgBlockcast === "all" ? ( <>{t("Everyone")}</> ) : ( <> {msgBlockcast === "none" ? ( <>{t("None")}</> ) : ( <> {msgBlockcast === "mem" ? ( <>{t("Members")}</> ) : ( <>{t("Choose")}</> )} </> )} </> )} </> )} </span> <AiFillCaretDown className="menu_icon" /> </MenuButton> } > <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "msg_blockcast", value: "all" }) } > {t("Everyone")} </MenuItem> <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "msg_blockcast", value: "sub" }) } > {t("Subscribers")} </MenuItem> <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "msg_blockcast", value: "mem" }) } > {t("Members")} </MenuItem> <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "msg_blockcast", value: "none", }) } > {t("None")} </MenuItem> </Menu> </div> </div> <div className="privacy_box"> <div className="blockcast_privacy_section"> <div className="privacy_header_box"> <OnlineStatusBlockcast style={{ fill: "var(--more-strongText-color)" }} /> <span className="privacy_box_title">{t("Online_status")}</span> <br /> <span className="privacy_box_description"> {t("Only selected user can see your online status.")} </span> </div> <Menu menuButton={ <MenuButton className={"__privacy_settings_menu_btn "}> <span> {onlineStatus === "sub" ? ( <>{t("Subscribers")}</> ) : ( <> {onlineStatus === "all" ? ( <>{t("Everyone")}</> ) : ( <> {onlineStatus === "none" ? ( <>{t("None")}</> ) : ( <> {onlineStatus === "mem" ? ( <>{t("Members")}</> ) : ( <>{t("Choose")}</> )} </> )} </> )} </> )} </span> <AiFillCaretDown className="menu_icon" /> </MenuButton> } > <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "online_status", value: "all" }) } > {t("Everyone")} </MenuItem> <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "online_status", value: "sub" }) } > {t("Subscribers")} </MenuItem> <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "online_status", value: "mem" }) } > {t("Members")} </MenuItem> <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "online_status", value: "none", }) } > {t("None")} </MenuItem> </Menu> </div> </div> {/* Message send time */} <div className="privacy_box"> <div className="blockcast_privacy_section"> <div className="privacy_header_box"> <MessageTimeBlockcast style={{ fill: "var(--more-strongText-color)" }} /> <span className="privacy_box_title"> {t("Message_send_time")} </span> <br /> <span className="privacy_box_description"> {t("User can send you message after selected time interval.")} </span> </div> <Menu menuButton={ <MenuButton className={"__privacy_settings_menu_btn "}> <span> {msgTime === 1 ? ( <>{t("1 min")}</> ) : ( <> {msgTime === 60 ? ( <>{t("1 hr")}</> ) : ( <> {msgTime === 1440 ? ( <>{t("1 day")}</> ) : ( <> {msgTime === 0 ? ( <>{t("None")}</> ) : ( <>{t("Choose")}</> )} </> )} </> )} </> )} </span> <AiFillCaretDown className="menu_icon" /> </MenuButton> } > <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "msg_time", value: 1 }) } > {t("1 min")} </MenuItem> <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "msg_time", value: 60 }) } > {t("1 hr")} </MenuItem> <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "msg_time", value: 1440 }) } > {t("1 day")} </MenuItem> <MenuItem className="_settings_menu_item" onClick={() => handlePrivacySettings({ name: "msg_time", value: 0 }) } > {t("None")} </MenuItem> </Menu> </div> </div> </div> </> ); }; export default BlockcastPrivacy;
Leave a Comment