UNPKG

@hhgtech/hhg-components

Version:
1,140 lines (1,071 loc) • 189 kB
import { a as __awaiter, _ as __rest } from './tslib.es6-00ab44b2.js'; import React__default, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react'; import { Info, Ask } from '@hhgtech/icons/other'; import { D as Dropdown } from './index-17533356.js'; import { u as useTranslations } from './index-09d9e570.js'; import innertext from 'innertext'; import { theme } from './miscTheme.js'; import { I as Input$1 } from './index-bd44bcb2.js'; import { useMantineTheme, SegmentedControl, Popover } from '@mantine/core'; import '@mantine/dates'; import './index-8c40504a.js'; import './index-fe4471f4.js'; import './index-7adf994c.js'; import './index-3f09210d.js'; import { T as Text } from './index-0b67696c.js'; import { B as Button } from './index-2d25b0f0.js'; import './index-17c85f76.js'; import './index.styles-3adef5f6.js'; import '@mantine/hooks'; import { M as MediaQueries } from './utils-538169b3.js'; import './index-04505e35.js'; import { u as useImagePicker, a as PopupFrame, c as IconCloseCircle, g as getDefaultFailNoti, d as getPostFormData, e as editPost, f as createPost } from './index-127396f0.js'; import { T as TogetherComponentGlobalContext, c as callApi, f as getApiPath, p as getCurrentHref, e as callApiWithAuth, q as callApiWithAdminAuth, r as getChatbotAiApiPath } from './utils-5e9c89a7.js'; import styled from '@emotion/styled'; import { a as formatPost, f as formatCommunity, e as formatTopic } from './dataTransform-60f9d527.js'; import { M as MAX_IMAGE_UPLOADS, B as BEARER_TOKEN_COOKIE } from './constants-367949ba.js'; import { h as highlightBadWords, f as fixMalformedMention, r as removeFontFormat, a as removeEdittedBannedWord, w as wrapAnchorAroundUrls, g as getUrlsFromEditorString, A as ALLOW_DOMAIN_URL, e as escapeRegExp, d as decodeMention, b as decodePostUrl, c as reformatUrl, i as getMentionIdsFromString, L as LIMIT_MENTION } from './post-e5fb69aa.js'; import { C as CardAuthor } from './index-677d3a78.js'; import { S as StyledCreatePostDescription$1, R as RichTextEditor$1, I as IconLink } from './editor-3abefb5e.js'; import { I as Input } from './index-5e2dff13.js'; import debounce from 'lodash/debounce'; import ContentEditable from 'react-contenteditable'; import { PATHS, ADMIN_PATHS } from './togetherApiPaths.js'; import { L as Loading } from './index-55273f7d.js'; import { C as CardLink } from './index-3965f9f7.js'; import { B as BtnChoice } from './index-51582a7c.js'; import { L as LOCALE } from './Locale-dc1237b9.js'; import * as ReactDOM from 'react-dom'; import { L as Loading$1 } from './index-4144308c.js'; import { b as IconArrowLeft } from './index-d3d4090c.js'; import { B as Button$1 } from './index-67429eb2.js'; import { getCookie } from './miscCookieHelper.js'; import { a as useUniqueId } from './useUniqueId-38cdf062.js'; import { U as UserAvatar } from './index-a6a9fbc0.js'; import { P as PopoverMenu } from './index-dabea9d9.js'; import { Close, Check } from '@hhgtech/icons/core'; const StyledCreateNewPost$1 = styled.div ` position: relative; display: flex; height: 100%; flex-direction: column; padding: 16px 24px; ${MediaQueries.mbDown} { padding: 16px 16px; } .input-group-container { flex: 1; padding-right: 2px; padding-left: 2px; margin-bottom: 24px; -ms-overflow-style: none; /* IE and Edge */ overflow-y: auto; scrollbar-width: none; /* Firefox */ &::-webkit-scrollbar { display: none; } } .input-group { :not(:last-child) { margin-bottom: 0.6rem; } input:focus, textarea:focus, [contenteditable='true'] { outline: none; } label { margin-bottom: 5px; color: ${theme.colors.gray600}; /* font-family: 'Open Sans', sans-serif; */ font-size: 13px; font-weight: bold; } .input-group-label { margin-bottom: 5px; color: ${theme.colors.gray600}; /* font-family: 'Open Sans', sans-serif; */ font-size: 13px; font-weight: bold; } .input-notification { display: flex; & > img { width: 16px; height: 16px; margin-top: 1.5px; margin-right: 8px; } } .tag-list { } } .warning { margin-top: 16px; } .submit-btn { width: 100%; } .switch-label { display: flex; align-items: center; } .swich-input-group { padding: 12px 16px; border-radius: 8px; background: ${theme.colors.neutral50}; &.askdoctor-switch { background: ${theme.colors.primary50}; &.mb-color { background: ${theme.mbColors.tonePink}; } } .mantine-Switch-labelWrapper { flex-grow: 1; } .mantine-Checkbox-body { display: flex; width: 100%; align-items: center; justify-content: space-between; } .mantine-Switch-track { margin-bottom: 0; } .label-txt { font-weight: normal; font-size: 14px; color: ${theme.colors.gray800}; margin-left: 10px; } } `; const StyledIsQuestion$1 = styled.div ` display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 0 0 8px 8px; background: ${theme.colors.neutral50}; border: 1px solid ${theme.colors.gray200}; gap: 12px; &.has-error { border: 1px solid ${theme.colors.red600}; } &.error-description { border: 1px solid ${theme.colors.red600}; border-top: none; } &[data-is-marry-baby='true'] { background: ${theme.mbColors.tonePink}; } .switch-label { display: flex; gap: 4px; align-items: flex-start; svg { margin-top: 2px; } .wrapper-text { .label-txt { color: ${theme.colors.gray800}; font-size: 14px; font-weight: 600; line-height: 22px; } .description-txt { color: ${theme.colors.gray700}; font-size: 12px; font-weight: 400; line-height: 18px; } } } button { height: 40px; &:hover, &.primary { border-radius: 16px; border: 1px solid ${theme.colors.blue100}; background: ${theme.colors.blue50}; color: ${theme.colors.primaryBase}; } } `; const StyledError$1 = styled.div ` margin-bottom: 12px; color: ${theme.colors.red700}; svg { margin-right: 5px; } svg, span { vertical-align: middle; } `; const StyledFormGroupInner$1 = styled.div ` .swich-input-group { padding: 12px 16px; border-radius: 8px; background: ${theme.colors.neutral50}; &.askdoctor-switch { background: ${theme.colors.blue50}; } .switch-label { display: flex; align-items: center; } .mantine-Switch-labelWrapper { flex-grow: 1; } .mantine-Checkbox-body { display: flex; width: 100%; align-items: center; justify-content: space-between; } .mantine-Switch-track { margin-bottom: 0; } .label-txt { font-weight: normal; font-size: 14px; color: ${theme.colors.gray800}; margin-left: 14px; } } `; const StylePostAction$1 = styled.div ` display: flex; gap: 12px; .avatar { width: 40px; height: 40px; border-radius: 100%; img { border-radius: 100%; } .author-avatar { .col-left { display: none; } } } .post-action-form { display: flex; flex-direction: column; gap: 4px; } .post-action-by { color: ${theme.colors.gray800}; font-size: 16px; font-weight: 600; line-height: 24px; } .post-action-result { display: flex; position: relative; &:after { content: ''; display: inline-block; width: 5px; height: 5px; background-color: ${theme.colors.error}; border-radius: 100%; position: absolute; right: 7px; } } .dropdown-post-action { background: ${theme.colors.white} !important; border-radius: 2px; border: 1px solid ${theme.colors.neutral200} !important; > div { padding: 3px 8px; } span { flex: 1; color: ${theme.colors.gray600}; font-size: 12px; font-weight: 600; line-height: 18px; } ul { width: 130px; li { img { flex: 0 0 16px; width: 16px; } } } } `; const StyleSessionRow$1 = styled.div ` display: inline-flex; gap: 8px; align-items: center; cursor: pointer; .session-title { color: ${theme.colors.gray700}; font-size: 14px; font-weight: 400; line-height: 22px; flex: 1; } `; var img$7 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M8.78785 10.7863H7.21084C5.77572 10.237 4.20739 10.237 2.77223 10.7863H1.55404V11.6457H2.41467V11.6537C2.41802 13.0707 3.57408 14.2238 4.99111 14.2238C6.4069 14.2238 7.56293 13.072 7.56797 11.6566L7.56803 11.6457H8.4303V11.6537C8.43365 13.0707 9.58971 14.2238 11.0067 14.2238C12.4225 14.2238 13.5786 13.072 13.5836 11.6566L13.5837 11.6457H14.4447V10.7863H13.2265C11.7913 10.237 10.223 10.237 8.78785 10.7863Z' fill='%238C8C8C'/%3e%3cpath d='M0.666016 6.48926V6.91895C0.666016 8.10354 1.62986 9.06738 2.81445 9.06738H13.1842C14.3688 9.06738 15.3327 8.10354 15.3327 6.91895V6.48926H0.666016Z' fill='%238C8C8C'/%3e%3cpath d='M12.36 3.18227C11.9916 2.07614 10.961 1.33301 9.7953 1.33301C9.13524 1.33301 8.48902 1.58185 7.99935 2.01991C7.50965 1.58185 6.86346 1.33301 6.2034 1.33301C5.03772 1.33301 4.00712 2.07614 3.63871 3.18184L2.8207 5.62988H13.1779L12.36 3.18227Z' fill='%238C8C8C'/%3e%3c/svg%3e"; var IconAnonymous = img$7; var img$6 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M8.00045 14.3336C7.12449 14.3336 6.30114 14.1674 5.53038 13.835C4.75962 13.5025 4.08916 13.0513 3.51902 12.4815C2.94886 11.9116 2.49749 11.2414 2.1649 10.471C1.83231 9.70056 1.66602 8.87738 1.66602 8.00143C1.66602 7.12547 1.83224 6.30211 2.16468 5.53136C2.49713 4.76059 2.94829 4.09014 3.51818 3.51999C4.08808 2.94984 4.75824 2.49847 5.52867 2.16588C6.29908 1.83329 7.12226 1.66699 7.99822 1.66699C8.87417 1.66699 9.69753 1.83322 10.4683 2.16566C11.239 2.4981 11.9095 2.94927 12.4796 3.51916C13.0498 4.08906 13.5012 4.75922 13.8338 5.52964C14.1664 6.30005 14.3327 7.12324 14.3327 7.99919C14.3327 8.87515 14.1664 9.6985 13.834 10.4693C13.5015 11.24 13.0504 11.9105 12.4805 12.4806C11.9106 13.0508 11.2404 13.5022 10.47 13.8347C9.69959 14.1673 8.8764 14.3336 8.00045 14.3336ZM7.99933 13.3336C9.48822 13.3336 10.7493 12.817 11.7827 11.7836C12.816 10.7503 13.3327 9.4892 13.3327 8.00031C13.3327 7.92253 13.331 7.84304 13.3275 7.76184C13.3241 7.68065 13.3203 7.608 13.316 7.54389C13.2733 7.85329 13.1393 8.10928 12.9141 8.31184C12.6889 8.51441 12.4181 8.61569 12.1019 8.61569H10.5891C10.2506 8.61569 9.96087 8.49527 9.71985 8.25441C9.47883 8.01357 9.35832 7.72403 9.35832 7.38581V6.77088H6.89678V5.54099C6.89678 5.20277 7.01729 4.91272 7.25832 4.67084C7.49935 4.42896 7.78909 4.30803 8.12755 4.30803H8.74293V4.05159C8.74293 3.76185 8.83054 3.52189 9.00575 3.33173C9.18097 3.14155 9.39209 3.00885 9.6391 2.93364C9.37841 2.84818 9.11262 2.78236 8.84173 2.73621C8.57084 2.69005 8.29004 2.66698 7.99933 2.66698C6.51044 2.66698 5.24933 3.18364 4.216 4.21698C3.18267 5.25031 2.666 6.51142 2.666 8.00031V8.09648C2.666 8.12639 2.66814 8.15844 2.67242 8.19263H5.83265C6.5147 8.19263 7.09547 8.43237 7.57495 8.91186C8.05444 9.39134 8.29418 9.97114 8.29418 10.6513V11.2695H6.44803V13.0965C6.6959 13.1734 6.94847 13.2321 7.20573 13.2727C7.463 13.3133 7.72753 13.3336 7.99933 13.3336Z' fill='%238C8C8C'/%3e%3c/svg%3e"; var IconPublic = img$6; styled.div ` background-color: white; z-index: 1000; top: 0; left: 0; height: 100%; position: absolute; width: 100%; .drawer-header { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid ${theme.colors.gray200}; .input-group-label { flex: 1; } img { cursor: pointer; } p { flex: 1; } } .drawer-content { padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; height: calc(100% - 49px); .input-field-label { margin-bottom: 8px; } &.drawer-content-full-screen { max-width: 680px; margin: 0 auto; padding: 16px 24px; } } `; const StyleCommunityReivew = styled.div ` display: flex; flex-direction: column; gap: 8px; margin-top: 8px; .topic-review { display: flex; gap: 4px; flex-wrap: wrap; } .community-review { .tag-item { background-color: ${theme.colors.neutral50}; img { border-radius: 50%; margin-right: 8px; } } } `; var img$5 = "data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.86019 13.3957C4.98735 13.5229 5.14492 13.5865 5.33291 13.5865H13.3233L15.9771 16.2403V5.91343C15.9771 5.72546 15.9135 5.56789 15.7864 5.44072C15.6592 5.31356 15.5016 5.24998 15.3136 5.24998H14.1887V12.036L13.9507 11.798H4.66944V12.923C4.66944 13.111 4.73302 13.2686 4.86019 13.3957ZM2.01562 3.28847V12.9519L4.66944 10.298H12.0252C12.2132 10.298 12.3708 10.2345 12.4979 10.1073C12.6251 9.98014 12.6887 9.82257 12.6887 9.63459V3.28847C12.6887 3.10048 12.6251 2.94291 12.4979 2.81574C12.3708 2.68858 12.2132 2.625 12.0252 2.625H2.67909C2.49111 2.625 2.33353 2.68858 2.20637 2.81574C2.07921 2.94291 2.01562 3.10048 2.01562 3.28847Z' fill='%232D87F3'/%3e%3c/svg%3e"; var IconCommunity = img$5; const PostCommunityReview = ({ selectedTopics, currentCommunity }) => { return (React__default.createElement(StyleCommunityReivew, null, React__default.createElement("div", { className: "community-review" }, React__default.createElement(Button, { skipHover: true, size: "md", radius: "xl", className: "tag-item", variant: "tertiary" }, React__default.createElement(Text, { size: "p4", as: "span", color: "inherit" }, currentCommunity.name))), React__default.createElement("div", { className: "topic-review", style: { display: 'none' } }, selectedTopics.map((topic) => { return (React__default.createElement(Button, { skipHover: true, size: "sm", radius: "xl", className: "tag-item", key: topic.id, variant: "tertiary" }, React__default.createElement(Text, { size: "p4", as: "span", color: "inherit" }, topic.name))); })))); }; const CreatePostCommunity$1 = ({ communitiesList, currentCommunity, selectedTopics, forceTopics, communityValue, // error, isFullscreen, isInEditMode, setSelectedTopics, setCommunityValue, removeKeyError, }) => { const { t } = useTranslations(); const props = { communitiesList, currentCommunity, selectedTopics, communityValue, isFullscreen, isInEditMode, forceTopics, setSelectedTopics, setCommunityValue, removeKeyError, }; console.log(props); return (React__default.createElement("div", { className: "input-group" }, React__default.createElement(StyleSessionRow$1, null, React__default.createElement("img", { alt: "anonymous-icon", src: IconCommunity, style: { width: '18px', height: '18px', objectFit: 'contain', marginLeft: 'auto', } }), React__default.createElement("div", { className: "session-title" }, t('createPost.communityAndTopic'))), React__default.createElement(PostCommunityReview, { selectedTopics: selectedTopics, currentCommunity: currentCommunity }))); }; const CreatePostDescription$1 = ({ className, style, bannedWords = [], value, onChange, onPreviewUrlChange, onInvalidUrlsChange, // onImageFilesChange, // imageFiles: imageFilesProp, isReplying, footerEditor, }) => { const { t } = useTranslations(); const [previewUrl, setPreviewUrl] = useState(null); const imagePicker = useRef(null); // const { // onSelectImages, // onRemoveImage, // imageSrcs, // // imageFiles, // } = useImagePicker(imageFilesProp, onImageFilesChange) useEffect(() => { if (onPreviewUrlChange) { if (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url) onPreviewUrlChange({ title: previewUrl.title || '', url: previewUrl.url || '', image: previewUrl.image || '', description: previewUrl.description || '', }); else onPreviewUrlChange(null); } }, [previewUrl]); return (React__default.createElement(StyledCreatePostDescription$1, { className: className, style: style }, React__default.createElement(Text, { size: "p4", className: "description-label" }, t('createPost.popup.description')), React__default.createElement("div", { className: `textarea-control` }, React__default.createElement("div", { className: "textarea-wrapper" }, React__default.createElement(RichTextEditor$1, { html: value || '', onChange: onChange, bannedWords: bannedWords, onImagePickerClick: () => { var _a; return (_a = imagePicker.current) === null || _a === void 0 ? void 0 : _a.click(); }, onPreviewUrlChange: setPreviewUrl, onInvalidUrlsChange: onInvalidUrlsChange, isReplying: isReplying }))), footerEditor, React__default.createElement(Text, { size: "p4", className: "count-string" }, t('character'), ": ", innertext(value || '').length))); }; var img$4 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3e%3cpath d='M5.3077 20.5C4.80257 20.5 4.375 20.325 4.025 19.975C3.675 19.625 3.5 19.1974 3.5 18.6923V5.3077C3.5 4.80257 3.675 4.375 4.025 4.025C4.375 3.675 4.80257 3.5 5.3077 3.5H18.6923C19.1974 3.5 19.625 3.675 19.975 4.025C20.325 4.375 20.5 4.80257 20.5 5.3077V18.6923C20.5 19.1974 20.325 19.625 19.975 19.975C19.625 20.325 19.1974 20.5 18.6923 20.5H5.3077ZM7.65388 16.75H16.423C16.6038 16.75 16.7377 16.6679 16.8249 16.5038C16.9121 16.3397 16.8987 16.1807 16.7845 16.0269L14.4 12.8327C14.3064 12.7122 14.1859 12.6519 14.0384 12.6519C13.891 12.6519 13.7705 12.7122 13.6769 12.8327L11.2308 16.0192L9.5923 13.9192C9.49872 13.8051 9.37981 13.7481 9.23558 13.7481C9.09134 13.7481 8.97243 13.8083 8.87885 13.9289L7.30195 16.0269C7.18143 16.1807 7.16477 16.3397 7.25195 16.5038C7.33913 16.6679 7.47311 16.75 7.65388 16.75Z' fill='%232D87F3'/%3e%3c/svg%3e"; var IconPhone = img$4; const CreatePostPhotos$1 = ({ imageFiles: imageFilesInit, setImageFiles, }) => { const imageRef = useRef(null); const { t } = useTranslations(); const { onSelectImages } = useImagePicker(imageFilesInit, setImageFiles); const handleClick = () => { var _a; (_a = imageRef === null || imageRef === void 0 ? void 0 : imageRef.current) === null || _a === void 0 ? void 0 : _a.click(); }; return (React__default.createElement("div", { className: "input-group" }, React__default.createElement(StyleSessionRow$1, { onClick: handleClick }, React__default.createElement("img", { alt: "anonymous-icon", src: IconPhone, style: { width: '18px', height: '18px', objectFit: 'contain', marginLeft: 'auto', } }), React__default.createElement("div", { className: "session-title" }, t('createPost.photos'))), React__default.createElement("input", { ref: imageRef, type: "file", accept: "image/png, image/gif, image/jpeg", multiple: true, style: { display: 'none' }, onChange: (e) => onSelectImages(e) }))); }; const StyledCreatePostTitle$1 = styled.div ` input:focus, textarea:focus, [contenteditable='true'] { outline: none; } .title-input { overflow: hidden; width: 100%; padding: 12px 16px; border: solid 1px #d9d9d9; border-radius: ${theme.borderRadius}; font-size: 16px; line-height: 1.2; white-space: nowrap; :focus { border-color: ${(props) => props.color}; box-shadow: 0px 0px 2px 2px ${(props) => props.colorShadow}; } br { display: none; } * { display: inline; white-space: nowrap; } mocka { padding: 2px 6px; border-radius: 1rem; &[data-error='true'] { background-color: #ffeeee; color: red; text-decoration: underline; font-style: bold; } } ol, ul { padding-left: 1rem; } } label { display: block; margin-bottom: 5px; color: ${theme.colors.gray600}; font-size: 13px; font-weight: bold; } .count-string { margin-top: 5px; color: ${theme.colors.gray500}; font-size: 11px; text-align: right; } `; const TITLE_LIMIT$1 = 120; const inputModify$3 = (value, opts) => { if (!opts) return value; const { limit, bannedWords = [] } = opts; const shorten = typeof limit === 'number' && limit >= 0 ? value.substring(0, limit) : value; const processedValue = highlightBadWords(shorten, bannedWords); return processedValue; }; const CreatePostTitle$1 = ({ className, style, bannedWords = [], value, onChange, }) => { var _a; const _theme = useMantineTheme(); const { t } = useTranslations(); const [titleValue, setTitleValue] = useState(''); const titleRef = useRef(null); useEffect(() => { if (titleRef.current) { const pasteHandler = (e) => { var _a; e.preventDefault(); const text = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/plain'); document.execCommand('insertHTML', false, text); }; const contentDiv = titleRef.current; contentDiv.addEventListener('paste', pasteHandler, { passive: true, }); return () => contentDiv.removeEventListener('paste', pasteHandler); } }, [titleRef]); const bannedString = (bannedWords === null || bannedWords === void 0 ? void 0 : bannedWords.join(',')) || ''; useEffect(() => { var _a; if (bannedString) { const titleText = (_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.innerText; if (titleText) { const titleValueWithBanned = highlightBadWords(titleText, bannedWords); if (titleValueWithBanned !== titleText) { onChange && onChange(titleValueWithBanned); setTitleValue(titleValueWithBanned); } } } }, [bannedString]); const debounceInputModify = useCallback(debounce(() => { if (titleRef.current) { const shortenString = inputModify$3(titleRef.current.innerText, { limit: TITLE_LIMIT$1, bannedWords, }); onChange && onChange(shortenString); setTitleValue(shortenString); } }, 300), []); useEffect(() => { setTimeout(() => { var _a; (_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 500); }, []); return (React__default.createElement(StyledCreatePostTitle$1, { className: className, style: style, color: _theme.colors[_theme.primaryColor][0], colorShadow: _theme.colors[_theme.primaryColor][2] }, React__default.createElement(Input, { name: "title", value: value || titleValue, size: "md", label: t('createPost.title'), CustomInput: React__default.createElement(ContentEditable, { innerRef: titleRef, html: value || titleValue, onChange: () => { if (titleRef.current && titleRef.current.innerText !== (value || titleValue)) { const initialValue = inputModify$3(titleRef.current.innerText, { bannedWords, }); onChange && onChange(initialValue); setTitleValue(initialValue); debounceInputModify(); } }, className: "title-input" }) }), React__default.createElement(Text, { size: "p4", className: "count-string" }, t('createPost.popup.wordCount', { count: ((_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.innerText.length) || 0, max: TITLE_LIMIT$1, })))); }; const StyledPopupFrame = styled(PopupFrame) ` & > div[data-open]:first-child { z-index: 1000; height: auto; max-width: 448px; } .custom-media-dialog { padding: 1rem; .image-gallery { display: none; .image-item { &.no-image { cursor: pointer; } .camera-btn { position: absolute; top: calc(100% - 32px); right: 8px; left: unset; width: 24px; height: 24px; } } } .custom-media-add-btn { margin-left: auto; display: block; } } `; const StyledInput = styled(Input$1) ` margin-bottom: 10px; `; const StyleWrapperInfo = styled.div ` display: flex; gap: 4px; align-items: flex-start; margin-bottom: 14px; img { margin-top: 2px; max-width: 16px; } `; var img$3 = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.0026 1.33334C4.3206 1.33334 1.33594 4.31801 1.33594 8.00001C1.33594 11.682 4.3206 14.6667 8.0026 14.6667C11.6846 14.6667 14.6693 11.682 14.6693 8.00001C14.6693 4.31801 11.6846 1.33334 8.0026 1.33334ZM8.0026 11.3333C7.6346 11.3333 7.33594 11.0347 7.33594 10.6667V8.00001C7.33594 7.63201 7.6346 7.33334 8.0026 7.33334C8.3706 7.33334 8.66927 7.63201 8.66927 8.00001V10.6667C8.66927 11.0347 8.3706 11.3333 8.0026 11.3333ZM8.33594 6.00001H7.66927C7.48527 6.00001 7.33594 5.85068 7.33594 5.66668V5.00001C7.33594 4.81601 7.48527 4.66668 7.66927 4.66668H8.33594C8.51994 4.66668 8.66927 4.81601 8.66927 5.00001V5.66668C8.66927 5.85068 8.51994 6.00001 8.33594 6.00001Z' fill='%232D87F3'/%3e%3c/svg%3e"; var IconInfo = img$3; const SocialLinkPopup = ({ isOpen, onClose, onSocialLinkChanged, socialLinkData, }) => { const { t } = useTranslations(); const imagePickerRef = useRef(null); const [socialLink, setSocialLinkUrl] = useState(''); const { onSelectImages, onRemoveImage, imageSrcs, imageFiles } = useImagePicker(); useEffect(() => { if (isOpen) { setSocialLinkUrl((socialLinkData === null || socialLinkData === void 0 ? void 0 : socialLinkData.url) || ''); } }, [isOpen]); const isAcceptedLink = socialLink.includes('youtu.be') || socialLink.includes('youtube.com') || socialLink.includes('facebook.com') || socialLink.includes('fb.watch') || socialLink.includes('tiktok.com'); const isValid = !!socialLink && isAcceptedLink; return (React__default.createElement(React__default.Fragment, null, React__default.createElement("input", { ref: imagePickerRef, type: "file", accept: "image/png, image/gif, image/jpeg", style: { display: 'none' }, onChange: onSelectImages }), React__default.createElement(StyledPopupFrame, { isOpen: isOpen, onClose: onClose, heading: "Insert", style: { zIndex: 3, } }, React__default.createElement("div", { className: "custom-media-dialog", onClick: (e) => e.stopPropagation() }, React__default.createElement(StyledInput, { size: "md", name: "custom-media-url", placeholder: "URL", value: socialLink, onChange: (v) => setSocialLinkUrl(v), label: "" }), React__default.createElement(StyleWrapperInfo, null, React__default.createElement("img", { src: IconInfo, alt: "" }), React__default.createElement(Text, { size: "c2", color: "#737373" }, t('editor.addSocialLink.warningDomain'))), !imageSrcs[0] ? (React__default.createElement("div", { className: "image-gallery" }, React__default.createElement("div", { className: "image-item no-image", onClick: () => { var _a; return (_a = imagePickerRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }))) : (React__default.createElement("div", { className: "image-gallery" }, React__default.createElement("div", { className: "image-item" }, React__default.createElement("img", { src: imageSrcs[0], alt: "" }), React__default.createElement("img", { className: "close-btn", alt: "", onClick: () => onRemoveImage(0) })))), React__default.createElement(Button, { color: "primary", size: "md", variant: "primary", type: "button", className: "custom-media-add-btn", onClick: (e) => { e === null || e === void 0 ? void 0 : e.preventDefault(); e === null || e === void 0 ? void 0 : e.stopPropagation(); if (isValid) { onSocialLinkChanged === null || onSocialLinkChanged === void 0 ? void 0 : onSocialLinkChanged({ url: !socialLink.includes('http') ? 'https://' + socialLink : socialLink, banner: imageFiles[0], }); onClose === null || onClose === void 0 ? void 0 : onClose(); } }, disabled: !isValid }, t('editor.addSocialLink.addLink')))))); }; var img$2 = "data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.23078 14.625C2.85193 14.625 2.53125 14.4937 2.26875 14.2312C2.00625 13.9687 1.875 13.648 1.875 13.2692V4.73078C1.875 4.35193 2.00625 4.03125 2.26875 3.76875C2.53125 3.50625 2.85193 3.375 3.23078 3.375H14.7692C15.148 3.375 15.4687 3.50625 15.7312 3.76875C15.9937 4.03125 16.125 4.35193 16.125 4.73078V10.315C15.8029 10.1922 15.4534 10.125 15.0882 10.125H11.9117C10.3036 10.125 8.99998 11.4286 8.99998 13.0368C8.99998 13.6227 9.17304 14.1682 9.47085 14.625H3.23078ZM7.83606 11.6899L11.5846 9.28988C11.6875 9.21969 11.7389 9.12306 11.7389 8.99998C11.7389 8.87691 11.6875 8.78028 11.5846 8.71009L7.83606 6.31011C7.72067 6.23222 7.60456 6.22597 7.48774 6.29136C7.37091 6.35673 7.3125 6.45721 7.3125 6.59278V11.4072C7.3125 11.5428 7.37091 11.6432 7.48774 11.7086C7.60456 11.774 7.72067 11.7677 7.83606 11.6899ZM10.7181 14.6953C11.1136 15.0907 11.5889 15.2884 12.1442 15.2884H12.8099C12.9325 15.2884 13.0352 15.247 13.1182 15.1642C13.2011 15.0813 13.2426 14.9786 13.2426 14.856C13.2426 14.7333 13.2011 14.6305 13.1182 14.5475C13.0352 14.4646 12.9325 14.4231 12.8099 14.4231H12.1442C11.8269 14.4231 11.5553 14.3101 11.3293 14.0841C11.1033 13.8582 10.9903 13.5865 10.9903 13.2692C10.9903 12.9519 11.1033 12.6803 11.3293 12.4543C11.5553 12.2284 11.8269 12.1154 12.1442 12.1154H12.8099C12.9325 12.1154 13.0352 12.074 13.1182 11.9911C13.2011 11.9083 13.2426 11.8055 13.2426 11.6829C13.2426 11.5602 13.2011 11.4574 13.1182 11.3745C13.0352 11.2915 12.9325 11.25 12.8099 11.25H12.1442C11.5889 11.25 11.1136 11.4477 10.7181 11.8432C10.3227 12.2386 10.125 12.7139 10.125 13.2692C10.125 13.8245 10.3227 14.2999 10.7181 14.6953ZM12.2686 13.5775C12.3515 13.6604 12.4543 13.7019 12.5769 13.7019H15.1731C15.2957 13.7019 15.3984 13.6605 15.4814 13.5776C15.5643 13.4948 15.6058 13.3921 15.6058 13.2694C15.6058 13.1468 15.5643 13.044 15.4814 12.961C15.3984 12.878 15.2957 12.8365 15.1731 12.8365H12.5769C12.4543 12.8365 12.3515 12.878 12.2686 12.9608C12.1857 13.0436 12.1442 13.1464 12.1442 13.269C12.1442 13.3917 12.1857 13.4945 12.2686 13.5775ZM14.9401 15.2884H15.6058C16.161 15.2884 16.6364 15.0911 17.0318 14.6966C17.4273 14.3019 17.625 13.8268 17.625 13.271C17.625 12.7068 17.4273 12.2289 17.0318 11.8374C16.6364 11.4458 16.161 11.25 15.6058 11.25H14.9401C14.8175 11.25 14.7147 11.2914 14.6318 11.3743C14.5488 11.4571 14.5074 11.5598 14.5074 11.6825C14.5074 11.8051 14.5488 11.908 14.6318 11.9909C14.7147 12.0739 14.8175 12.1154 14.9401 12.1154H15.6058C15.9231 12.1154 16.1947 12.2284 16.4207 12.4543C16.6466 12.6803 16.7596 12.9519 16.7596 13.2692C16.7596 13.5865 16.6466 13.8582 16.4207 14.0841C16.1947 14.3101 15.9231 14.4231 15.6058 14.4231H14.9401C14.8175 14.4231 14.7147 14.4645 14.6318 14.5473C14.5488 14.6302 14.5074 14.7329 14.5074 14.8556C14.5074 14.9782 14.5488 15.081 14.6318 15.164C14.7147 15.247 14.8175 15.2884 14.9401 15.2884Z' fill='%23F44D2C'/%3e%3c/svg%3e"; var IconVideo = img$2; const CreatePostVideo = ({ socialLinkData, setSocialLinkData, }) => { const { t } = useTranslations(); const [activeModal, setActiveModal] = useState(false); const handleClick = () => { setActiveModal(true); }; return (React__default.createElement("div", { className: "input-group" }, React__default.createElement(StyleSessionRow$1, { onClick: handleClick }, React__default.createElement("img", { alt: "anonymous-icon", src: IconVideo, style: { width: '18px', height: '18px', objectFit: 'contain', marginLeft: 'auto', } }), React__default.createElement("div", { className: "session-title" }, t('createPost.videoOrLink'))), React__default.createElement(SocialLinkPopup, { isOpen: activeModal, onClose: () => setActiveModal(false), onSocialLinkChanged: setSocialLinkData, socialLinkData: socialLinkData }))); }; const StyleReviewPhoto$1 = styled.div ` .mantine-Text-root { margin-bottom: 4px; } .preview-images-container { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; .image-src-wrapper { flex: 0 0 140px; width: 140px; height: 96px; border-radius: 4px; position: relative; img { border-radius: 4px; } .icon-close { position: absolute; top: 6px; right: 6px; cursor: pointer; z-index: 10; max-height: 24px; max-width: 24px; } } } `; const PostPhotosReview$1 = ({ error, imageFiles: imageFilesInit, setImageFiles, removeKeyError, }) => { const { t } = useTranslations(); const { imageSrcs, onRemoveImage } = useImagePicker(imageFilesInit, setImageFiles); return (React__default.createElement(StyleReviewPhoto$1, { className: "input-group" }, React__default.createElement(Text, { size: "p5", weight: "semiBold" }, t('createPost.photos')), React__default.createElement("div", { className: "preview-images-container" }, imageSrcs === null || imageSrcs === void 0 ? void 0 : imageSrcs.map((src, index) => { return (React__default.createElement("div", { className: "image-src-wrapper", key: index }, React__default.createElement("img", { src: src, className: "preview-image", alt: "", style: { width: '100%', height: '100%', objectFit: 'cover', } }), React__default.createElement("img", { alt: "", className: "icon-close", src: IconCloseCircle, onClick: () => { removeKeyError && removeKeyError('photos'); onRemoveImage(index); } }))); })), error && (error === null || error === void 0 ? void 0 : error.photos) && (React__default.createElement(StyledError$1, null, React__default.createElement(Text, { size: "p5", color: theme.colors.red600 }, error.photos))))); }; const inputModify$2 = (value, opts) => { var _a; const { formatUrl, bannedWords = [] } = opts || {}; const removedFormat = fixMalformedMention(removeFontFormat(value)); if (!formatUrl) return { value: highlightBadWords(removedFormat, bannedWords), }; let descriptionWithWrappedAnchor = removeEdittedBannedWord(wrapAnchorAroundUrls(removedFormat)); const urls = getUrlsFromEditorString(removedFormat); if (urls) { const invalidUrls = []; let previewUrl = ''; urls.forEach((url) => { if (!url) return; try { const jsUrl = new URL(url); // Check url has must into domain hellohealthgroup if (!ALLOW_DOMAIN_URL.some((o) => jsUrl.origin.endsWith(o))) { invalidUrls.push('notification.limitUrlDomain'); return; } // Check url have special character if (url.endsWith('&')) { invalidUrls.push('notification.urlWrongFormat'); return; } } catch (_a) { invalidUrls.push(url); } }); if (invalidUrls.length > 0) { descriptionWithWrappedAnchor = descriptionWithWrappedAnchor .replace(new RegExp(`data-url="true">(${invalidUrls.map(escapeRegExp).join('|')})<`, 'gi'), 'data-error="true" data-url="true">$1<') .replace(new RegExp(`data-href="(${invalidUrls .map(escapeRegExp) .join('|')})" data-url="true">`, 'gi'), 'data-href="$1" data-error="true" data-url="true">'); } previewUrl = (_a = urls.filter((u) => invalidUrls.indexOf(u) === -1)) === null || _a === void 0 ? void 0 : _a[0]; return { invalidUrls, previewUrl, value: highlightBadWords(descriptionWithWrappedAnchor, bannedWords), }; } return { value: highlightBadWords(descriptionWithWrappedAnchor, bannedWords), }; }; const usePreviewUrl = (bannedWords, onChange) => { const { data: { locale }, } = useContext(TogetherComponentGlobalContext); const [previewUrl, setPreviewUrl] = useState(null); const bannedWordsRef = useRef([]); bannedWordsRef.current = bannedWords; const fetchPreviewData = (url) => { if (!previewUrl || previewUrl.url !== url) { setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl({ url, isFetching: true, }); callApi(getApiPath(PATHS.FETCH_PREVIEW, { _locale: locale, }), 'POST', { data: { link: url, }, headers: { 'Content-Type': 'application/json', }, }) .then((res) => { var _a, _b, _c, _d; setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl({ title: (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.title, description: (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.description, image: ((_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.image) || ((_d = res === null || res === void 0 ? void 0 : res.data) === null || _d === void 0 ? void 0 : _d.logo), url, }); }) .catch(() => { setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl(null); }); } }; const fetchPreviewDataRef = useRef(fetchPreviewData); fetchPreviewDataRef.current = fetchPreviewData; const [invalidUrls, setInvalidUrls] = useState([]); const debounceInputModify = useCallback(debounce((v) => { if (v) { const processedInput = inputModify$2(v, { bannedWords: bannedWordsRef.current, formatUrl: true, }); const { invalidUrls: _invalidUrls, previewUrl: _previewUrl, value, } = processedInput; if (_invalidUrls && (_invalidUrls === null || _invalidUrls === void 0 ? void 0 : _invalidUrls.length)) { setInvalidUrls(_invalidUrls); setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl(null); } else { setInvalidUrls([]); if (_previewUrl) { fetchPreviewDataRef.current(_previewUrl); } else setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl(null); if (value !== v) { onChange === null || onChange === void 0 ? void 0 : onChange(value); } } } }, 500), []); return { previewUrl, setPreviewUrl, invalidUrls, debounceInputModify, fetchPreviewData, }; }; const StyleReviewVideo = styled.div ` .link-preview-wrapper { position: relative; .icon-close { position: absolute; top: 6px; right: 6px; cursor: pointer; z-index: 10; max-width: 24px; max-height: 24px; } } .mantine-Text-root { margin-bottom: 4px; } `; const PostVideoReview = ({ socialLinkData, bannedWords, onChange, onInvalidUrlsChange, onSocialLinkChanged, }) => { const { t } = useTranslations(); const { invalidUrls, previewUrl, fetchPreviewData, setPreviewUrl } = usePreviewUrl(bannedWords || [], onChange); useEffect(() => { if (socialLinkData && socialLinkData.url) { fetchPreviewData(socialLinkData.url); } }, [socialLinkData, fetchPreviewData]); useEffect(() => { if (invalidUrls) { onInvalidUrlsChange === null || onInvalidUrlsChange === void 0 ? void 0 : onInvalidUrlsChange(invalidUrls); } }, [invalidUrls]); return (React__default.createElement(StyleReviewVideo, { className: "input-group" }, React__default.createElement(Text, { size: "p5", weight: "semiBold" }, t('createPost.video')), React__default.createElement("div", { className: "link-preview-wrapper" }, (socialLinkData === null || socialLinkData === void 0 ? void 0 : socialLinkData.url) && previewUrl && (React__default.createElement("div", { className: "link-preview-wrapper" }, previewUrl.isFetching ? (React__default.createElement(Loading, null)) : (React__default.createElement(React__default.Fragment, null, React__default.createElement(CardLink, { title: previewUrl.title, url: previewUrl.url || '#', image: previewUrl.image, noRefetch: true }), React__default.createElement("img", { alt: "", src: IconCloseCircle, className: "icon-close", onClick: () => { setPreviewUrl(null); onSocialLinkChanged && onSocialLinkChanged(null); } })))))))); }; const MAX_SIZE_FILE_UPLOAD$1 = 10 * 1024 * 1024; const applySpecialCharSite$1 = [ LOCALE.PhilippinesEnglish, LOCALE.PhilippinesTagalog, LOCALE.Indonesia, LOCALE.Malaysia, LOCALE.Vietnam, ]; const CreateNewPostContent = ({ className, style, onPostCreatedEdited, onClose, communities = [], forceSelectCommunity, forceSelectTopics, articleId, optionalTopic, editPostData, defaultCommunity, defaultTopics, selectAskDoctor, showAskDoctorOptions, userInfo, isMarryBaby = false, }) => { const isInEditMode = !!(editPostData === null || editPostData === void 0 ? void 0 : editPostData.id); const { data: { locale, router, env: { togetherBasePath }, }, action: { pushNotifications, sanitizeFunction }, } = useContext(TogetherComponentGlobalContext); const { asPath } = router || {}; const { t } = useTranslations(); // const [isAnonymous, setIsAnonymous] = useState<boolean>(false) const [isAskDoctor, setIsAskDoctor] = useState(selectAskDoctor); const [specialCharErr, setspecialCharErr] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); const [titleValue, setTitleValue] = useState(''); const [descriptionValue, setDescriptionValue] = useState(''); const [communityValue, setCommunityValue] = useState(forceSelectCommunity ? { label: forceSelectCommunity.name, value: `${forceSelectCommunity.id || ''}-${forceSelectCommunity.mappedCategoryId || ''}`, } : { label: t('community.choose'), value: '', }); const [selectedTopics, setSelectedTopics] = useState([...forceSelectTopics] || []); const [socialLinkData, setSocialLinkData] = useState(); const [error, setError] = useState({}); const [imageFiles, setImageFiles] = useState([]); const [bannedWords, setBannedWords] = useState([]); const [postActionValue, setPostActionValue] = useState({ label: t('cardPost.public'), value: 'public', }); const { imageSrcs = [] } = useImagePicker(imageFiles); const currentCommunity = forceSelectCommunity || communities.find((c) => `${c.id || ''}-${c.mappedCategoryId || ''}` === communityValue.value); const communitiesList = forceSelectCommunity ? [forceSelectCommunity] : communities .filter((c) => c.isActive) .sort((a, b) => { if (a.name > b.name) return 1; if (a.name < b.name) return -1; return 0; }); const [previewUrl, setPreviewUrl] = useState(null); const [invalidUrls, setInvalidUrls] = useState([]); const isReadyToSubmit = titleValue && !specialCharErr && innertext(descriptionValue) && (optionalTopic || (!optionalTopic && selectedTopics.length > 0)) && currentCommunity && (!imageFiles || imageFiles.length <= MAX_IMAGE_UPLOADS) && !(invalidUrls === null || invalidUrls === void 0 ? void 0 : invalidUrls.length) && !isSubmitting; const postActionType = [ { label: t('cardPost.public'), value: 'public', icon: (React__default.createElement("img", { alt: "anonymous-icon", src: IconPublic, style: { width: '100%', height: '100%', objectFit: 'contain', marginLeft: 'auto', } })), }, { label: t('cardPost.anonymous'), value: 'anonymous', icon: (React__default.createElement("img", { alt: "anonymous-icon", src: IconAnonymous, style: { width: '100%', height: '100%', objectFit: 'contain', marginLeft: 'auto', } })), }, ]; // HANDLE etra action when OPEN AND CLOSE useEffect(() => { if (editPostData) { const post = editPostData; setTitleValue(post.title || ''); setDescriptionValue(decodeMention(decodePostUrl(post.description || '', 'edit'), post.mentions)); setCommunityValue({ label: post.community.name, value: `${post.community.id || ''}-${post.community.mappedCategoryId || ''}`, }); setSelectedTopics(post.topics || []); setImageFiles(post.photos || []); // setIsAnonymous(!!post.isAnonymous || false) setIsAskDoctor(!!post.isAskDoctor || false); } else { if (defaultCommunity) { setCommunityValue({ label: defaultCommunity.name, value: `${defaultCommunity.id || ''}-${defaultCommunity.mappedCategoryId || ''}`, }); } if (defaultTopics) { setSelectedTopics(defaultTopics); } } }, []); useEffect(() => { setspecialCharErr(applySpecialCharSite$1.includes(locale) && titleValue !== '' && !/[a-zA-Z]/.test(titleValue)); setError({}); }, [titleValue]); const onCreateEditSuccess = (res) => { if (onPostCreatedEdited) { onPostCreatedEdited(formatPost(res), isInEditMode); } onClose && onClose(); }; const validationUploadPhoto = (files) => { const errorMessage = Object.assign({}, error); if (files && files.length > 10) { errorMessage.photos = t('createPost.message.photoMaxium'); } if (files && files.length) { const inValidSizeFile = files.some((file) => (file === null || file === void 0 ? void 0 : file.size) > MAX_SIZE_FILE_UPLOAD$1); if (inValidSizeFile) { errorMessage.photos = t('createPost.message.photoSize'); } } setError(errorMessage); }; const validationPost = () => { let hasError = false; const errorMessage = {}; const description = innertext(descriptionValue); if (!description) {