@hhgtech/hhg-components 1.29.254 → 1.29.255-beta-2

package/build/esm/index-48212c81.js

@@ -1,913 +0,0 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-d473b5b7.js';
-import React__default, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react';
-import { Info, Ask } from '@hhgtech/icons/other';
-import { Checkbox, useMantineTheme, Popover } from '@mantine/core';
-import { D as Dropdown } from './index-86d20df3.js';
-import { u as useTranslations } from './index-6ca459c4.js';
-import innertext from 'innertext';
-import { theme } from './miscTheme.js';
-import './index-26c68038.js';
-import '@mantine/dates';
-import './index-7858930f.js';
-import './index-f07baf29.js';
-import { C as CommonGAssets } from './index-6164e1cd.js';
-import './useMantineLocale-a3e6c303.js';
-import { T as Text } from './index-1c7bf834.js';
-import { B as Button } from './index-99c11e8f.js';
-import './index.styles-6ff04d36.js';
-import '@mantine/hooks';
-import { M as MediaQueries } from './utils-4b182318.js';
-import './other-4bb614a8.js';
-import './index-171e610e.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath, b as callApiWithAuth } from './utils-2aa1807a.js';
-import { u as useImagePicker, d as IconCloseCircle, g as getDefaultFailNoti, e as getPostFormData, f as editPost, h as createPost } from './index-e346e77f.js';
-import styled from '@emotion/styled';
-import { B as BtnChoice } from './index-c85b7689.js';
-import { c as formatTopic, b as formatPost } from './dataTransform-6d723379.js';
-import { M as MAX_IMAGE_UPLOADS } from './constants-ac14ff62.js';
-import { h as highlightBadWords, d as decodeMention, a as decodePostUrl } from './post-cb43fea4.js';
-import { S as StyledCreatePostDescription, R as RichTextEditor } from './editor-4473d609.js';
-import { C as CardLink } from './index-bde06578.js';
-import { L as Loading } from './index-c8b991cd.js';
-import { I as Input } from './index-5c02cb77.js';
-import debounce from 'lodash/debounce';
-import ContentEditable from 'react-contenteditable';
-import { PATHS } from './togetherApiPaths.js';
-import { Close, Check } from '@hhgtech/icons/core';
-
-const StyledCreateNewPost = styled.div `
-  position: relative;
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  padding: 16px 24px;
-
-  .input-group-container {
-    flex: 1;
-    padding-right: 2px;
-    padding-left: 2px;
-    margin-bottom: 0.5rem;
-    -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 = styled.div `
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-radius: 8px;
-  background: ${theme.colors.primary50};
-
-  &[data-is-marry-baby='true'] {
-    background: ${theme.mbColors.tonePink};
-  }
-  .switch-label {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-  margin-bottom: 12px;
-`;
-const StyledError = styled.div `
-  margin-bottom: 12px;
-  color: ${theme.colors.red700};
-  svg {
-    margin-right: 5px;
-  }
-  svg,
-  span {
-    vertical-align: middle;
-  }
-`;
-styled.div `
-  // max-width: 680px;
-  // margin: 0 auto;
-  // padding: 0 24px;
-
-  ${MediaQueries.mbDown} {
-    padding: 0 16px;
-  }
-
-  .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;
-    }
-  }
-`;
-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;
-        }
-      }
-    }
-  }
-`;
-
-var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3e%3cpath fill='%232D87F3' d='M8 14.5a6 6 0 1 0 0-12 6 6 0 0 0 0 12'/%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 5.5v3M8 11.5h.007'/%3e%3c/svg%3e";
-var IconAlertCirclePrimary = img$1;
-
-var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3e%3cpath fill='%23FE921D' d='M8 14.5a6 6 0 1 0 0-12 6 6 0 0 0 0 12'/%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 5.5v3M8 11.5h.007'/%3e%3c/svg%3e";
-var IconAlertCircleWarning = img;
-
-const CreatePostDescription = ({ className, style, bannedWords = [], value, onChange, onPreviewUrlChange, onInvalidUrlsChange, onImageFilesChange, imageFiles: imageFilesProp, isReplying, }) => {
-    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, { 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, { 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 }))),
-        React__default.createElement(Text, { size: "p4", className: "count-string" },
-            t('character'),
-            ": ",
-            innertext(value || '').length),
-        (!imageSrcs || imageSrcs.length === 0) && 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", { src: IconCloseCircle, className: "icon-close", onClick: () => setPreviewUrl(null), loading: "lazy" }))))),
-        React__default.createElement("input", { ref: imagePicker, type: "file", accept: "image/png, image/gif, image/jpeg", multiple: true, style: { display: 'none' }, onChange: onSelectImages }),
-        imageSrcs.length > MAX_IMAGE_UPLOADS ? (React__default.createElement("div", { className: "input-notification" },
-            React__default.createElement("img", { src: IconAlertCircleWarning, loading: "lazy" }),
-            React__default.createElement(Text, { size: "p4", color: theme.colors.alertWarning }, t(`createPost.popup.warningImage`)))) : null,
-        imageSrcs.length > 0 && (React__default.createElement("div", { className: "image-gallery" }, imageSrcs.map((src, i) => (React__default.createElement("div", { key: i, className: "image-item" },
-            React__default.createElement("img", { src: src, loading: "lazy" }),
-            React__default.createElement("img", { className: "close-btn", src: IconCloseCircle, onClick: () => onRemoveImage(i), loading: "lazy" }))))))));
-};
-
-const StyledCreatePostTitle = 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: ${theme.colors.primaryBase};
-      box-shadow: 0px 0px 2px 2px ${theme.colors.primary200};
-    }
-    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 = 120;
-const inputModify = (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 = ({ className, style, bannedWords = [], value, onChange, }) => {
-    var _a;
-    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(titleRef.current.innerText, {
-                limit: TITLE_LIMIT,
-                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, { className: className, style: style },
-        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(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,
-        }))));
-};
-
-const StyledTopicSelectList = styled.div `
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-  margin-top: 1rem;
-
-  .tag-item {
-    min-height: 32px;
-    padding: 5px 12px;
-    border: 1px solid ${theme.colors.neutral100};
-    margin-right: 1rem;
-    margin-bottom: 8px;
-    border-radius: 1rem;
-    color: ${theme.colors.gray800};
-    cursor: pointer;
-    font-size: 13px;
-    line-height: 22px;
-    transition: all 0.2s;
-
-    &.--active {
-      border-color: ${theme.colors.primary50};
-      background: ${theme.colors.primary50};
-      color: ${theme.colors.primaryBase};
-    }
-    &[data-disabled='true'] {
-      background: ${theme.colors.gray100};
-      color: ${theme.colors.gray800};
-    }
-  }
-  .topic-spinner {
-    margin-right: auto;
-    margin-left: auto;
-    & > button {
-      width: 24px;
-      height: 24px;
-    }
-  }
-  &[data-is-marrybaby='true'] {
-    .tag-item {
-      border-color: transparent;
-      background: #f3f3f3;
-      color: #3e3f58;
-      &.--active {
-        border-color: #b6cdff;
-        background: #e0e9fb;
-        color: #3e3f58;
-      }
-    }
-  }
-`;
-
-const TopicSelectList = ({ className, style, topics: topicsProp, communityId, onChange, isLoading, disabled, forceTopics, selectedTopics: selectedTopicsProp, noFetch, dataEventCategory, dataEventAction, dataEventLabel, }) => {
-    const { data: { locale, env: { isMarryBaby }, }, } = useContext(TogetherComponentGlobalContext);
-    const [topics, setTopics] = useState(topicsProp ? [...topicsProp] : []);
-    const [selectedTopics, setSelectedTopics] = useState(selectedTopicsProp ? [...selectedTopicsProp] : []);
-    const [isLoadingTopics, setIsLoadingTopics] = useState(false);
-    const topicsPropRef = useRef(topicsProp);
-    topicsPropRef.current = topicsProp;
-    useEffect(() => {
-        var _a;
-        if (communityId && !noFetch && !((_a = topicsPropRef.current) === null || _a === void 0 ? void 0 : _a.length)) {
-            setTopics([]);
-            setIsLoadingTopics(true);
-            (() => __awaiter(void 0, void 0, void 0, function* () {
-                var _b;
-                try {
-                    const res = yield callApi(getApiPath(PATHS.TOPIC.LIST, {
-                        communityId: communityId,
-                        _locale: locale,
-                    }), 'GET');
-                    const topicRes = (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.topics;
-                    if (Array.isArray(topicRes)) {
-                        setTopics(() => (topicRes === null || topicRes === void 0 ? void 0 : topicRes.map(formatTopic).sort((t1, t2) => (t1.order || 0) - (t2.order || 0))) || []);
-                    }
-                }
-                catch (e) {
-                    console.log(e);
-                    setIsLoadingTopics(false);
-                }
-                setIsLoadingTopics(false);
-            }))();
-        }
-    }, [communityId, noFetch]);
-    const topicsPropString = topicsProp === null || topicsProp === void 0 ? void 0 : topicsProp.map((t) => t.id).join('-');
-    const topicsStateString = topics === null || topics === void 0 ? void 0 : topics.map((t) => t.id).join('-');
-    const forceTopicsPropString = forceTopics === null || forceTopics === void 0 ? void 0 : forceTopics.map((t) => t.id).join('-');
-    useEffect(() => {
-        if (topicsProp &&
-            typeof topicsPropString !== 'undefined' &&
-            topicsPropString !== topicsStateString) {
-            setTopics(topicsProp);
-        }
-    }, [topicsProp, topicsPropString, topicsStateString]);
-    const topicsWithoutForced = useMemo(() => topics.filter((t) => !(forceTopics === null || forceTopics === void 0 ? void 0 : forceTopics.some((ft) => (ft.id && ft.id === t.id) ||
-        (ft.mappedCategoryId &&
-            ft.mappedCategoryId === t.mappedCategoryId)))), [topicsStateString, forceTopicsPropString]);
-    return (React__default.createElement(StyledTopicSelectList, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
-        forceTopics.map((topic) => (React__default.createElement(TopicItem, { key: `${topic.id}-${topic.mappedCategoryId}`, topic: topic, disabled: true, selected: true, dataEventAction: dataEventAction, dataEventCategory: dataEventCategory, dataEventLabel: dataEventLabel }))),
-        topicsWithoutForced.map((topic) => (React__default.createElement(TopicItem, { key: `${topic.id}-${topic.mappedCategoryId}`, topic: topic, disabled: disabled, selected: (selectedTopicsProp || selectedTopics).some((t) => (t.id && t.id === topic.id) ||
-                (t.mappedCategoryId &&
-                    t.mappedCategoryId === topic.mappedCategoryId)), onClick: () => {
-                const _selected = selectedTopicsProp || selectedTopics;
-                const foundIndex = _selected.findIndex((_selected) => (_selected.id && _selected.id === topic.id) ||
-                    (_selected.mappedCategoryId &&
-                        _selected.mappedCategoryId === topic.mappedCategoryId));
-                if (foundIndex !== -1) {
-                    _selected.splice(foundIndex, 1);
-                }
-                else {
-                    _selected.push(topic);
-                }
-                if (onChange && selectedTopicsProp) {
-                    onChange(_selected.slice());
-                }
-                else {
-                    onChange && onChange(_selected.slice());
-                    setSelectedTopics(_selected.slice());
-                }
-            }, dataEventAction: dataEventAction, dataEventCategory: dataEventCategory, dataEventLabel: dataEventLabel }))),
-        (isLoading || isLoadingTopics) && React__default.createElement(Loading, { className: "topic-spinner" })));
-};
-const TopicItem = (_a) => {
-    var { topic, disabled, selected, onClick } = _a, rest = __rest(_a, ["topic", "disabled", "selected", "onClick"]);
-    return (React__default.createElement("div", Object.assign({ className: 'tag-item' + (selected ? ' --active' : ''), "data-disabled": disabled, onClick: !disabled ? onClick : undefined }, rest), topic.name));
-};
-
-const CreateNewPostContent = ({ className, style, onPostCreatedEdited, onClose, communities = [], forceSelectCommunity, forceSelectTopics, articleId, optionalTopic, editPostData, defaultCommunity, defaultTopics, noFetchTopic, hideTopicList, selectAskDoctor, showAskDoctorOptions, currentPageUrl, }) => {
-    const isInEditMode = !!(editPostData === null || editPostData === void 0 ? void 0 : editPostData.id);
-    const { data: { locale, env: { isMarryBaby }, }, action: { pushNotifications, sanitizeFunction }, } = useContext(TogetherComponentGlobalContext);
-    const { t } = useTranslations();
-    const [isAnonymous, setIsAnonymous] = useState(false);
-    const [isAskDoctor, setIsAskDoctor] = useState(selectAskDoctor);
-    const [showAskDoctorRequired, setShowAskDoctorRequired] = useState(false);
-    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 [imageFiles, setImageFiles] = useState([]);
-    const [bannedWords, setBannedWords] = useState([]);
-    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;
-    // 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(titleValue !== '' && !/[a-zA-Z]/.test(titleValue));
-    }, [titleValue]);
-    const onCreateEditSuccess = (res) => {
-        if (onPostCreatedEdited) {
-            onPostCreatedEdited(formatPost(res), isInEditMode);
-        }
-        onClose && onClose();
-    };
-    const submitPost = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (showAskDoctorOptions && typeof isAskDoctor === 'undefined') {
-            setShowAskDoctorRequired(true);
-            return false;
-        }
-        const bodyFormData = yield getPostFormData({
-            title: titleValue,
-            description: descriptionValue,
-            communityId: String((currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.id) || ''),
-            imageFiles,
-            previewUrl,
-            topicIds: selectedTopics === null || selectedTopics === void 0 ? void 0 : selectedTopics.map((topic) => String(topic.id || '')).filter(Boolean),
-            locale,
-            sanitizeFunction,
-            categoryCommunityId: String((currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.mappedCategoryId) || ''),
-            categoryTopicIds: selectedTopics === null || selectedTopics === void 0 ? void 0 : selectedTopics.map((topic) => String(topic.mappedCategoryId || '')).filter(Boolean),
-            isAnonymous: isAnonymous ? 1 : 0,
-            isAskDoctor: isAskDoctor ? 1 : 0,
-        });
-        if (articleId) {
-            bodyFormData.append('article_id', articleId);
-        }
-        let res;
-        if (isInEditMode) {
-            if (editPostData === null || editPostData === void 0 ? void 0 : editPostData.id) {
-                res = yield editPost({
-                    id: editPostData.id,
-                    formData: bodyFormData,
-                    locale,
-                });
-            }
-        }
-        else {
-            res = yield createPost({
-                formData: bodyFormData,
-                locale,
-                isArticleComment: !(currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.id) && !!(currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.mappedCategoryId),
-            });
-        }
-        const resData = res === null || res === void 0 ? void 0 : res.data;
-        if ((resData === null || resData === void 0 ? void 0 : resData.id) && !((_b = (_a = res === null || res === void 0 ? void 0 : res.messages) === null || _a === void 0 ? void 0 : _a.moderation) === null || _b === void 0 ? void 0 : _b.type)) {
-            pushNotifications({
-                message: t('createPost.popup.success'),
-                type: 'success',
-            });
-            onCreateEditSuccess(resData);
-        }
-        else {
-            if (((_d = (_c = res === null || res === void 0 ? void 0 : res.messages) === null || _c === void 0 ? void 0 : _c.moderation) === null || _d === void 0 ? void 0 : _d.type) === 'banned') {
-                pushNotifications({
-                    title: t('notification.post.blocked.title'),
-                    message: t('notification.post.blocked.message'),
-                    type: 'danger',
-                });
-                if (res.messages.moderation.words) {
-                    setBannedWords(res.messages.moderation.words);
-                }
-            }
-            else if (((_f = (_e = res === null || res === void 0 ? void 0 : res.messages) === null || _e === void 0 ? void 0 : _e.moderation) === null || _f === void 0 ? void 0 : _f.type) === 'suspect') {
-                pushNotifications({
-                    title: t('notification.post.suspect.title'),
-                    message: t('notification.post.suspect.message'),
-                    type: 'warning',
-                });
-                onClose && onClose();
-            }
-            else if ((_h = (_g = res === null || res === void 0 ? void 0 : res.messages) === null || _g === void 0 ? void 0 : _g.find) === null || _h === void 0 ? void 0 : _h.call(_g, (m) => { var _a; return !!((_a = m === null || m === void 0 ? void 0 : m.includes) === null || _a === void 0 ? void 0 : _a.call(m, 'suspend')); })) {
-                pushNotifications({
-                    message: t('notification.suspend.message'),
-                    type: 'danger',
-                });
-                onClose && onClose();
-            }
-            else {
-                pushNotifications({
-                    message: ((_j = res === null || res === void 0 ? void 0 : res.messages) === null || _j === void 0 ? void 0 : _j[0]) || t('notification.failure'),
-                    type: 'danger',
-                });
-            }
-        }
-    });
-    return (React__default.createElement(StyledCreateNewPost, { className: className, style: style },
-        React__default.createElement("div", { className: "input-group-container" },
-            React__default.createElement(CreatePostTitle, { className: "input-group", bannedWords: bannedWords, value: titleValue, onChange: setTitleValue }),
-            specialCharErr && (React__default.createElement(StyledError, null,
-                React__default.createElement(Info, { isSolid: true, color: theme.colors.red700, size: 14 }),
-                React__default.createElement(Text, { size: "p3", as: "span", color: theme.colors.red700 }, t('createPost.popup.specialCharErr')))),
-            React__default.createElement(CreatePostDescription, { className: "input-group", bannedWords: bannedWords, value: descriptionValue, onChange: setDescriptionValue, onPreviewUrlChange: setPreviewUrl, onInvalidUrlsChange: setInvalidUrls, onImageFilesChange: setImageFiles, imageFiles: imageFiles }),
-            showAskDoctorOptions && (React__default.createElement(StyledIsQuestion, { "data-is-marry-baby": isMarryBaby },
-                React__default.createElement("div", { className: "switch-label" },
-                    React__default.createElement(Ask, { isMarryBaby: isMarryBaby, size: isMarryBaby ? 32 : 24, color: theme.colors.primaryBase, className: "label-icon" }),
-                    React__default.createElement("span", { className: "label-txt" }, t('createPost.askDoctor'))),
-                React__default.createElement(BtnChoice, { value: isAskDoctor, choices: [
-                        {
-                            label: t('createPost.askDoctorChoice.yes'),
-                            value: true,
-                            dataEventCategory: 'Together',
-                            dataEventAction: 'Write Post Click - Ask Doctor',
-                            dataEventLabel: currentPageUrl,
-                        },
-                        {
-                            label: t('createPost.askDoctorChoice.no'),
-                            value: false,
-                        },
-                    ], onChange: (v) => {
-                        if (typeof v === 'boolean') {
-                            setShowAskDoctorRequired(false);
-                            setIsAskDoctor(v);
-                        }
-                    } }))),
-            showAskDoctorRequired && (React__default.createElement(StyledError, null,
-                React__default.createElement(Info, { isSolid: true, color: theme.colors.red700, size: 14 }),
-                React__default.createElement(Text, { size: "p3", as: "span", color: theme.colors.red700 }, t('createPost.message.askDoctorRequire')))),
-            React__default.createElement("div", { className: "input-group" },
-                React__default.createElement(Text, { size: "p4", className: "input-group-label" }, t('admin.community')),
-                React__default.createElement(Dropdown, { options: (communitiesList === null || communitiesList === void 0 ? void 0 : communitiesList.map((c) => ({
-                        label: c.name,
-                        value: `${c.id || ''}-${c.mappedCategoryId || ''}`,
-                    }))) || [], id: "community-picker", placeholder: t('community.choose'), value: communityValue, dropdownLabelTrackingAttributes: {
-                        'data-event-category': 'Together',
-                        'data-event-action': 'Write Post Click -  Choose Community/Topic',
-                        'data-event-label': currentPageUrl,
-                    }, onChange: (option) => {
-                        setCommunityValue({
-                            label: option.label,
-                            value: String(option.value),
-                        });
-                        setSelectedTopics([]);
-                    }, disabled: !!forceSelectCommunity }),
-                React__default.createElement(Text, { size: "sm", className: "warning", color: theme.colors.gray400 },
-                    "* ",
-                    t('commentPopup.warning.newPost'))),
-            !hideTopicList && (React__default.createElement("div", { className: "input-group" },
-                React__default.createElement(Text, { size: "p4", className: "input-group-label" }, t('tab.topic')),
-                React__default.createElement("div", { className: "input-notification" },
-                    React__default.createElement("img", { src: currentCommunity
-                            ? IconAlertCirclePrimary
-                            : IconAlertCircleWarning, loading: "lazy" }),
-                    React__default.createElement(Text, { size: "base", color: theme.colors.gray500 }, t(currentCommunity
-                        ? 'createPost.popup.primary'
-                        : 'createPost.popup.warning'))),
-                currentCommunity && (React__default.createElement(TopicSelectList, { className: "tag-list", communityId: currentCommunity.id, forceTopics: forceSelectTopics, onChange: setSelectedTopics, selectedTopics: selectedTopics, noFetch: noFetchTopic, dataEventCategory: "Together", dataEventAction: "Write Post Click -  Choose Community/Topic", dataEventLabel: currentPageUrl }))))),
-        React__default.createElement("div", { className: "form-action" },
-            React__default.createElement("div", { className: "input-group" },
-                React__default.createElement(Checkbox, { className: "swich-input-group", labelPosition: "left", name: "PostAnonymous", checked: isAnonymous, color: isMarryBaby ? 'pink' : undefined, "data-event-category": "Together", "data-event-action": "Write Post Click - Incognito", "data-event-label": currentPageUrl, label: React__default.createElement("div", { className: "switch-label" },
-                        React__default.createElement("img", { className: "label-icon", src: CommonGAssets.getAssetPath('anomyous-avatar.svg'), alt: "anomyous avatar", style: { marginRight: '10px', width: '24px' }, loading: "lazy" }),
-                        React__default.createElement("span", { className: "label-txt" }, t('createPost.postAnonymous'))), value: "Post Anonymous", onChange: (event) => setIsAnonymous(event.currentTarget.checked), styles: {
-                        body: {
-                            display: 'flex',
-                            width: '100%',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                        },
-                        label: {
-                            display: 'flex',
-                            alignItems: 'center',
-                        },
-                    } })),
-            React__default.createElement("div", { className: "input-group" },
-                React__default.createElement(Button, { className: "submit-btn pointer-event-child-none", size: "lg", "data-event-category": "Ask Doctor", "data-event-action": "Submit Question", "data-event-label": window.location.href, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
-                        if (isReadyToSubmit && !isSubmitting) {
-                            setIsSubmitting(true);
-                            try {
-                                yield submitPost();
-                            }
-                            catch (e) {
-                                console.error(e);
-                                pushNotifications(getDefaultFailNoti(t));
-                            }
-                            setIsSubmitting(false);
-                        }
-                    }), disabled: !isReadyToSubmit, loading: isSubmitting }, t('createPost.popup.submit'))))));
-};
-
-var styles = {"skipBtn":"KsWg8i6","alertHeading":"_9tS0EUN","alertDesc":"kyyRKlb","alertAction":"-Uqqka-"};
-
-const SkipQuestionOfExpertBtn = (_a) => {
-    var { post, onSkip, btnText, currentPageUrl } = _a, rest = __rest(_a, ["post", "onSkip", "btnText", "currentPageUrl"]);
-    const { t } = useTranslations();
-    const { data: { locale }, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
-    const [showAlert, setShowAlert] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const _theme = useMantineTheme();
-    const handleSkip = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
-        setLoading(true);
-        const res = yield callApiWithAuth(getApiPath(PATHS.USER.SKIP_QUESTION, {
-            _locale: locale,
-            id: post === null || post === void 0 ? void 0 : post.id,
-        }), 'PUT');
-        if ((res === null || res === void 0 ? void 0 : res.status) === 1) {
-            onSkip === null || onSkip === void 0 ? void 0 : onSkip({ id: (post === null || post === void 0 ? void 0 : post.id) || '', communityId: ((_b = post === null || post === void 0 ? void 0 : post.community) === null || _b === void 0 ? void 0 : _b.id) || '' });
-            setShowAlert(false);
-            pushNotifications({
-                title: '',
-                message: 'Skip success',
-                type: 'success',
-            });
-        }
-        else {
-            pushNotifications({
-                title: '',
-                message: res === null || res === void 0 ? void 0 : res.messages,
-                type: 'danger',
-            });
-        }
-        setLoading(false);
-    }), []);
-    return (React__default.createElement(Popover, { width: 327, withArrow: true, shadow: "md", opened: showAlert },
-        React__default.createElement(Popover.Target, null,
-            React__default.createElement("div", Object.assign({ className: `${styles.skipBtn} ${(rest === null || rest === void 0 ? void 0 : rest.className) || ''}`, onClick: () => setShowAlert(true) }, rest), btnText || t('profilePanel.questionNotClear'))),
-        React__default.createElement(Popover.Dropdown, null,
-            React__default.createElement("div", null,
-                React__default.createElement("div", { className: styles.alertHeading }, t('profilePanel.skipQuestion.heading')),
-                React__default.createElement("div", { className: styles.alertDesc }, t('profilePanel.skipQuestion.content')),
-                React__default.createElement("div", { className: styles.alertAction },
-                    React__default.createElement(Button, { size: "md", variant: "secondary", leftIcon: React__default.createElement(Close, { color: _theme.fn.primaryColor(), size: 24 }), onClick: () => setShowAlert(false), styles: () => ({
-                            leftIcon: {
-                                marginRight: 0,
-                            },
-                        }) }),
-                    React__default.createElement(Button, { variant: "primary", size: "md", leftIcon: React__default.createElement(Check, { color: 'white', size: 24 }), onClick: handleSkip, loading: loading, "data-event-category": "Together", "data-event-action": "Unclear Question Click", "data-event-label": currentPageUrl, styles: () => ({
-                            leftIcon: {
-                                marginRight: 0,
-                            },
-                        }) }))))));
-};
-
-export { CreateNewPostContent as C, SkipQuestionOfExpertBtn as S, TopicSelectList as T, CreatePostDescription as a, CreatePostTitle as b };