@hhgtech/hhg-components 1.29.80 → 1.29.82

package/build/index-077bf48f.js

@@ -0,0 +1,803 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-bd3f8718.js');
+var React = require('react');
+var other = require('@hhgtech/icons/other');
+var core = require('@mantine/core');
+var index$5 = require('./index-4bc690c9.js');
+var useTranslations = require('./useTranslations-685f989b.js');
+var innertext = require('innertext');
+var theme = require('./theme-be20929b.js');
+require('./index-dff7ee1b.js');
+require('@mantine/dates');
+require('./index-e3bbd009.js');
+require('./index-1f3fc2e3.js');
+var index$6 = require('./index-64d8db08.js');
+require('./useMantineLocale-0d63dfea.js');
+var index$1 = require('./index-1fdf2f01.js');
+var index$7 = require('./index-3eb666e6.js');
+require('@mantine/hooks');
+require('./utils-15a9772e.js');
+var togetherComponentGlobalContext = require('./utils-169c6a7d.js');
+var index = require('./index-2afbeb3d.js');
+var styled = require('@emotion/styled');
+var index$4 = require('./index-dd074159.js');
+var dataTransform = require('./dataTransform-e39297c1.js');
+var constants = require('./constants-a78fa8b3.js');
+var index$2 = require('./index-4cdcdbbe.js');
+var index$3 = require('./index-7953fb8e.js');
+var debounce = require('lodash/debounce');
+var ContentEditable = require('react-contenteditable');
+var core$1 = require('@hhgtech/icons/core');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var innertext__default = /*#__PURE__*/_interopDefault(innertext);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var debounce__default = /*#__PURE__*/_interopDefault(debounce);
+var ContentEditable__default = /*#__PURE__*/_interopDefault(ContentEditable);
+
+const StyledCreateNewPost = styled__default["default"].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.theme.colors.gray600};
+      /* font-family: 'Open Sans', sans-serif; */
+      font-size: 13px;
+      font-weight: bold;
+    }
+
+    .input-group-label {
+      margin-bottom: 5px;
+      color: ${theme.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.theme.colors.neutral50};
+
+    &.askdoctor-switch {
+      background: ${theme.theme.colors.primary50};
+      &.mb-color {
+        background: ${theme.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.theme.colors.gray800};
+      margin-left: 10px;
+    }
+  }
+`;
+const StyledIsQuestion = styled__default["default"].div `
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-radius: 8px;
+  background: ${theme.theme.colors.primary50};
+
+  &[data-is-marry-baby='true'] {
+    background: ${theme.theme.mbColors.tonePink};
+  }
+  .switch-label {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  margin-bottom: 12px;
+`;
+const StyledError = styled__default["default"].div `
+  margin-bottom: 12px;
+  color: ${theme.theme.colors.red700};
+  svg {
+    margin-right: 5px;
+  }
+  svg,
+  span {
+    vertical-align: middle;
+  }
+`;
+
+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.useTranslations();
+    const [previewUrl, setPreviewUrl] = React.useState(null);
+    const imagePicker = React.useRef(null);
+    const { onSelectImages, onRemoveImage, imageSrcs,
+    // imageFiles,
+     } = index.useImagePicker(imageFilesProp, onImageFilesChange);
+    React.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["default"].createElement(index.StyledCreatePostDescription, { className: className, style: style },
+        React__default["default"].createElement(index$1.Text, { size: "p4", className: "description-label" }, t('createPost.popup.description')),
+        React__default["default"].createElement("div", { className: `textarea-control` },
+            React__default["default"].createElement("div", { className: "textarea-wrapper" },
+                React__default["default"].createElement(index.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["default"].createElement(index$1.Text, { size: "p4", className: "count-string" },
+            t('character'),
+            ": ",
+            innertext__default["default"](value || '').length),
+        (!imageSrcs || imageSrcs.length === 0) && previewUrl && (React__default["default"].createElement("div", { className: "link-preview-wrapper" }, previewUrl.isFetching ? (React__default["default"].createElement(index.Loading, null)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(index$2.CardLink, { title: previewUrl.title, url: previewUrl.url || '#', image: previewUrl.image, noRefetch: true }),
+            React__default["default"].createElement("img", { src: index.IconCloseCircle, className: "icon-close", onClick: () => setPreviewUrl(null), loading: "lazy" }))))),
+        React__default["default"].createElement("input", { ref: imagePicker, type: "file", accept: "image/png, image/gif, image/jpeg", multiple: true, style: { display: 'none' }, onChange: onSelectImages }),
+        imageSrcs.length > constants.MAX_IMAGE_UPLOADS ? (React__default["default"].createElement("div", { className: "input-notification" },
+            React__default["default"].createElement("img", { src: IconAlertCircleWarning, loading: "lazy" }),
+            React__default["default"].createElement(index$1.Text, { size: "p4", color: theme.theme.colors.alertWarning }, t(`createPost.popup.warningImage`)))) : null,
+        imageSrcs.length > 0 && (React__default["default"].createElement("div", { className: "image-gallery" }, imageSrcs.map((src, i) => (React__default["default"].createElement("div", { key: i, className: "image-item" },
+            React__default["default"].createElement("img", { src: src, loading: "lazy" }),
+            React__default["default"].createElement("img", { className: "close-btn", src: index.IconCloseCircle, onClick: () => onRemoveImage(i), loading: "lazy" }))))))));
+};
+
+const StyledCreatePostTitle = styled__default["default"].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.theme.borderRadius};
+    font-size: 16px;
+    line-height: 1.2;
+    white-space: nowrap;
+    :focus {
+      border-color: ${theme.theme.colors.primaryBase};
+      box-shadow: 0px 0px 2px 2px ${theme.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.theme.colors.gray600};
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  .count-string {
+    margin-top: 5px;
+    color: ${theme.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 = index.highlightBadWords(shorten, bannedWords);
+    return processedValue;
+};
+const CreatePostTitle = ({ className, style, bannedWords = [], value, onChange, }) => {
+    var _a;
+    const { t } = useTranslations.useTranslations();
+    const [titleValue, setTitleValue] = React.useState('');
+    const titleRef = React.useRef(null);
+    React.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(',')) || '';
+    React.useEffect(() => {
+        var _a;
+        if (bannedString) {
+            const titleText = (_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.innerText;
+            if (titleText) {
+                const titleValueWithBanned = index.highlightBadWords(titleText, bannedWords);
+                if (titleValueWithBanned !== titleText) {
+                    onChange && onChange(titleValueWithBanned);
+                    setTitleValue(titleValueWithBanned);
+                }
+            }
+        }
+    }, [bannedString]);
+    const debounceInputModify = React.useCallback(debounce__default["default"](() => {
+        if (titleRef.current) {
+            const shortenString = inputModify(titleRef.current.innerText, {
+                limit: TITLE_LIMIT,
+                bannedWords,
+            });
+            onChange && onChange(shortenString);
+            setTitleValue(shortenString);
+        }
+    }, 300), []);
+    React.useEffect(() => {
+        setTimeout(() => {
+            var _a;
+            (_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 500);
+    }, []);
+    return (React__default["default"].createElement(StyledCreatePostTitle, { className: className, style: style },
+        React__default["default"].createElement(index$3.Input, { name: "title", value: value || titleValue, size: "md", label: t('createPost.title'), CustomInput: React__default["default"].createElement(ContentEditable__default["default"], { 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["default"].createElement(index$1.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__default["default"].div `
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+
+  .tag-item {
+    min-height: 32px;
+    padding: 5px 12px;
+    border: 1px solid ${theme.theme.colors.neutral100};
+    margin-right: 1rem;
+    margin-bottom: 8px;
+    border-radius: 1rem;
+    color: ${theme.theme.colors.gray800};
+    cursor: pointer;
+    font-size: 13px;
+    line-height: 22px;
+    transition: all 0.2s;
+
+    &.--active {
+      border-color: ${theme.theme.colors.primary50};
+      background: ${theme.theme.colors.primary50};
+      color: ${theme.theme.colors.primaryBase};
+    }
+    &[data-disabled='true'] {
+      background: ${theme.theme.colors.gray100};
+      color: ${theme.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 }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [topics, setTopics] = React.useState(topicsProp ? [...topicsProp] : []);
+    const [selectedTopics, setSelectedTopics] = React.useState(selectedTopicsProp ? [...selectedTopicsProp] : []);
+    const [isLoadingTopics, setIsLoadingTopics] = React.useState(false);
+    const topicsPropRef = React.useRef(topicsProp);
+    topicsPropRef.current = topicsProp;
+    React.useEffect(() => {
+        var _a;
+        if (communityId && !noFetch && !((_a = topicsPropRef.current) === null || _a === void 0 ? void 0 : _a.length)) {
+            setTopics([]);
+            setIsLoadingTopics(true);
+            (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+                var _b;
+                try {
+                    const res = yield togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.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(dataTransform.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('-');
+    React.useEffect(() => {
+        if (topicsProp &&
+            typeof topicsPropString !== 'undefined' &&
+            topicsPropString !== topicsStateString) {
+            setTopics(topicsProp);
+        }
+    }, [topicsProp, topicsPropString, topicsStateString]);
+    const topicsWithoutForced = React.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["default"].createElement(StyledTopicSelectList, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
+        forceTopics.map((topic) => (React__default["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["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["default"].createElement(index.Loading, { className: "topic-spinner" })));
+};
+const TopicItem = (_a) => {
+    var { topic, disabled, selected, onClick } = _a, rest = tslib_es6.__rest(_a, ["topic", "disabled", "selected", "onClick"]);
+    return (React__default["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 }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { t } = useTranslations.useTranslations();
+    const [isAnonymous, setIsAnonymous] = React.useState(false);
+    const [isAskDoctor, setIsAskDoctor] = React.useState(selectAskDoctor);
+    const [showAskDoctorRequired, setShowAskDoctorRequired] = React.useState(false);
+    const [specialCharErr, setspecialCharErr] = React.useState(false);
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const [titleValue, setTitleValue] = React.useState('');
+    const [descriptionValue, setDescriptionValue] = React.useState('');
+    const [communityValue, setCommunityValue] = React.useState(forceSelectCommunity
+        ? {
+            label: forceSelectCommunity.name,
+            value: `${forceSelectCommunity.id || ''}-${forceSelectCommunity.mappedCategoryId || ''}`,
+        }
+        : {
+            label: t('community.choose'),
+            value: '',
+        });
+    const [selectedTopics, setSelectedTopics] = React.useState([...forceSelectTopics] || []);
+    const [imageFiles, setImageFiles] = React.useState([]);
+    const [bannedWords, setBannedWords] = React.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] = React.useState(null);
+    const [invalidUrls, setInvalidUrls] = React.useState([]);
+    const isReadyToSubmit = titleValue &&
+        !specialCharErr &&
+        innertext__default["default"](descriptionValue) &&
+        (optionalTopic || (!optionalTopic && selectedTopics.length > 0)) &&
+        currentCommunity &&
+        (!imageFiles || imageFiles.length <= constants.MAX_IMAGE_UPLOADS) &&
+        !(invalidUrls === null || invalidUrls === void 0 ? void 0 : invalidUrls.length) &&
+        !isSubmitting;
+    // HANDLE etra action when OPEN AND CLOSE
+    React.useEffect(() => {
+        if (editPostData) {
+            const post = editPostData;
+            setTitleValue(post.title || '');
+            setDescriptionValue(index.decodeMention(index.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);
+            }
+        }
+    }, []);
+    React.useEffect(() => {
+        setspecialCharErr(titleValue !== '' && !/[a-zA-Z]/.test(titleValue));
+    }, [titleValue]);
+    const onCreateEditSuccess = (res) => {
+        if (onPostCreatedEdited) {
+            onPostCreatedEdited(dataTransform.formatPost(res), isInEditMode);
+        }
+        onClose && onClose();
+    };
+    const submitPost = () => tslib_es6.__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 index.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 index.editPost({
+                    id: editPostData.id,
+                    formData: bodyFormData,
+                    locale,
+                });
+            }
+        }
+        else {
+            res = yield index.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["default"].createElement(StyledCreateNewPost, { className: className, style: style },
+        React__default["default"].createElement("div", { className: "input-group-container" },
+            React__default["default"].createElement(CreatePostTitle, { className: "input-group", bannedWords: bannedWords, value: titleValue, onChange: setTitleValue }),
+            specialCharErr && (React__default["default"].createElement(StyledError, null,
+                React__default["default"].createElement(other.Info, { isSolid: true, color: theme.theme.colors.red700, size: 14 }),
+                React__default["default"].createElement(index$1.Text, { size: "p3", as: "span", color: theme.theme.colors.red700 }, t('createPost.popup.specialCharErr')))),
+            React__default["default"].createElement(CreatePostDescription, { className: "input-group", bannedWords: bannedWords, value: descriptionValue, onChange: setDescriptionValue, onPreviewUrlChange: setPreviewUrl, onInvalidUrlsChange: setInvalidUrls, onImageFilesChange: setImageFiles, imageFiles: imageFiles }),
+            showAskDoctorOptions && (React__default["default"].createElement(StyledIsQuestion, { "data-is-marry-baby": isMarryBaby },
+                React__default["default"].createElement("div", { className: "switch-label" },
+                    React__default["default"].createElement(other.Ask, { isMarryBaby: isMarryBaby, size: isMarryBaby ? 32 : 24, color: theme.theme.colors.primaryBase, className: "label-icon" }),
+                    React__default["default"].createElement("span", { className: "label-txt" }, t('createPost.askDoctor'))),
+                React__default["default"].createElement(index$4.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["default"].createElement(StyledError, null,
+                React__default["default"].createElement(other.Info, { isSolid: true, color: theme.theme.colors.red700, size: 14 }),
+                React__default["default"].createElement(index$1.Text, { size: "p3", as: "span", color: theme.theme.colors.red700 }, t('createPost.message.askDoctorRequire')))),
+            React__default["default"].createElement("div", { className: "input-group" },
+                React__default["default"].createElement(index$1.Text, { size: "p4", className: "input-group-label" }, t('admin.community')),
+                React__default["default"].createElement(index$5.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["default"].createElement(index$1.Text, { size: "sm", className: "warning", color: theme.theme.colors.gray400 },
+                    "* ",
+                    t('commentPopup.warning.newPost'))),
+            !hideTopicList && (React__default["default"].createElement("div", { className: "input-group" },
+                React__default["default"].createElement(index$1.Text, { size: "p4", className: "input-group-label" }, t('tab.topic')),
+                React__default["default"].createElement("div", { className: "input-notification" },
+                    React__default["default"].createElement("img", { src: currentCommunity
+                            ? IconAlertCirclePrimary
+                            : IconAlertCircleWarning, loading: "lazy" }),
+                    React__default["default"].createElement(index$1.Text, { size: "base", color: theme.theme.colors.gray500 }, t(currentCommunity
+                        ? 'createPost.popup.primary'
+                        : 'createPost.popup.warning'))),
+                currentCommunity && (React__default["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["default"].createElement("div", { className: "form-action" },
+            React__default["default"].createElement("div", { className: "input-group" },
+                React__default["default"].createElement(core.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["default"].createElement("div", { className: "switch-label" },
+                        React__default["default"].createElement("img", { className: "label-icon", src: index$6.CommonGAssets.getAssetPath('anomyous-avatar.svg'), alt: "anomyous avatar", style: { marginRight: '10px', width: '24px' }, loading: "lazy" }),
+                        React__default["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["default"].createElement("div", { className: "input-group" },
+                React__default["default"].createElement(index$7.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: () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+                        if (isReadyToSubmit && !isSubmitting) {
+                            setIsSubmitting(true);
+                            try {
+                                yield submitPost();
+                            }
+                            catch (e) {
+                                console.error(e);
+                                pushNotifications(index.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 = tslib_es6.__rest(_a, ["post", "onSkip", "btnText", "currentPageUrl"]);
+    const { t } = useTranslations.useTranslations();
+    const { data: { locale }, action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [showAlert, setShowAlert] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
+    const _theme = core.useMantineTheme();
+    const handleSkip = React.useCallback(() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _b;
+        setLoading(true);
+        const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.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["default"].createElement(core.Popover, { width: 327, withArrow: true, shadow: "md", opened: showAlert },
+        React__default["default"].createElement(core.Popover.Target, null,
+            React__default["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["default"].createElement(core.Popover.Dropdown, null,
+            React__default["default"].createElement("div", null,
+                React__default["default"].createElement("div", { className: styles.alertHeading }, t('profilePanel.skipQuestion.heading')),
+                React__default["default"].createElement("div", { className: styles.alertDesc }, t('profilePanel.skipQuestion.content')),
+                React__default["default"].createElement("div", { className: styles.alertAction },
+                    React__default["default"].createElement(index$7.Button, { size: "md", variant: "secondary", leftIcon: React__default["default"].createElement(core$1.Close, { color: _theme.fn.primaryColor(), size: 24 }), onClick: () => setShowAlert(false), styles: () => ({
+                            leftIcon: {
+                                marginRight: 0,
+                            },
+                        }) }),
+                    React__default["default"].createElement(index$7.Button, { variant: "primary", size: "md", leftIcon: React__default["default"].createElement(core$1.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,
+                            },
+                        }) }))))));
+};
+
+exports.CreateNewPostContent = CreateNewPostContent;
+exports.CreatePostDescription = CreatePostDescription;
+exports.CreatePostTitle = CreatePostTitle;
+exports.SkipQuestionOfExpertBtn = SkipQuestionOfExpertBtn;
+exports.TopicSelectList = TopicSelectList;