Web: Templates: added CreateRoomTemplateDialog

This commit is contained in:
Nikita Gopienko 2024-04-15 11:11:43 +03:00
parent 691e5b4021
commit 63f17aa4c8
21 changed files with 477 additions and 19 deletions

View File

@ -65,6 +65,7 @@ import {
PluginDialog,
DeletePluginDialog,
ShareFolderDialog,
CreateRoomTemplateDialog,
} from "../dialogs";
import ConvertPasswordDialog from "../dialogs/ConvertPasswordDialog";
import ArchiveDialog from "../dialogs/ArchiveDialog";
@ -127,6 +128,7 @@ const Panels = (props) => {
changeRoomOwnerIsVisible,
deletePluginDialogVisible,
shareFolderDialogVisible,
createRoomTemplateDialogVisible,
} = props;
const [createPDFFormFile, setCreatePDFFormFile] = useState({
@ -312,6 +314,9 @@ const Panels = (props) => {
{...createPDFFormFile}
/>
),
createRoomTemplateDialogVisible && (
<CreateRoomTemplateDialog key="create-room-template-dialog" />
),
];
};
@ -370,6 +375,7 @@ export default inject(
leaveRoomDialogVisible,
changeRoomOwnerIsVisible,
shareFolderDialogVisible,
createRoomTemplateDialogVisible,
} = dialogsStore;
const { preparationPortalDialogVisible } = backup;
@ -435,6 +441,7 @@ export default inject(
changeRoomOwnerIsVisible,
deletePluginDialogVisible,
shareFolderDialogVisible,
createRoomTemplateDialogVisible,
};
},
)(observer(Panels));

View File

@ -54,6 +54,7 @@ export type FilesSelectorProps = {
isMove?: boolean;
isCopy?: boolean;
isRestore: boolean;
isTemplate: boolean;
isRestoreAll?: boolean;
isSelect?: boolean;
isFormRoom?: boolean;

View File

@ -75,6 +75,7 @@ const FilesSelectorWrapper = ({
isMove,
isCopy,
isRestore,
isTemplate,
isRestoreAll,
isSelect,
isFormRoom,
@ -277,6 +278,7 @@ const FilesSelectorWrapper = ({
isRestore,
isFormRoom,
isThirdParty,
isTemplate,
isSelectFolder,
);

View File

@ -44,6 +44,7 @@ export const getHeaderLabel = (
isFormRoom?: boolean,
isThirdParty?: boolean,
isSelectFolder?: boolean,
isTemplate?: boolean,
) => {
if (isRestore) return t("Common:RestoreTo");
if (isSelectFolder) return t("Common:SelectFolder");
@ -53,6 +54,9 @@ export const getHeaderLabel = (
if (isSelect) {
return filterParam ? t("Common:SelectFile") : t("Common:SelectAction");
}
if (isTemplate) {
return t("Files:FromTemplate");
}
if (isFormRoom) {
return t("Common:SelectFromDocSpace");

View File

@ -0,0 +1,63 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import React, { useState, useEffect, useCallback } from "react";
import { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import { toastr } from "@docspace/shared/components/toast";
import { CreateRoomTemplateDialog } from "../dialogs";
let timerId = null;
const CreateRoomTemplateEvent = (props) => {
const { visible, onClose, item, fetchTags } = props;
const [fetchedTags, setFetchedTags] = useState([]);
const fetchTagsAction = useCallback(async () => {
const tags = await fetchTags();
setFetchedTags(tags);
}, []);
useEffect(() => {
fetchTagsAction();
}, [fetchTagsAction]);
return (
<CreateRoomTemplateDialog
visible={visible}
item={item}
// onSaveClick={onSaveClick}
onClose={onClose}
fetchedTags={fetchedTags}
/>
);
};
export default inject(({ tagsStore }) => {
const { fetchTags } = tagsStore;
return { fetchTags };
})(observer(CreateRoomTemplateEvent));

View File

@ -40,6 +40,7 @@ import EditGroupEvent from "./GroupEvents/EditGroupEvent";
import ChangeUserTypeEvent from "./ChangeUserTypeEvent";
import CreatePluginFile from "./CreatePluginFileEvent";
import ChangeQuotaEvent from "./ChangeQuotaEvent";
import CreateRoomTemplateEvent from "./CreateRoomTemplateEvent";
const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => {
const [createDialogProps, setCreateDialogProps] = useState({
visible: false,
@ -96,6 +97,11 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => {
props: null,
onClose: null,
});
const [createRoomTemplateDialog, setCreateRoomTemplateDialog] = useState({
visible: false,
props: null,
onClose: null,
});
const eventHandlersList = useRef([]);
@ -250,6 +256,24 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => {
},
});
}, []);
const onCreateRoomTemplate = (e) => {
console.log("onCreateRoomTemplate", e);
const visible = e.item ? true : false;
setCreateRoomTemplateDialog({
visible: visible,
item: e.item,
onClose: () => {
setCreateRoomTemplateDialog({
visible: false,
item: null,
});
},
});
};
useEffect(() => {
window.addEventListener(Events.CREATE, onCreate);
window.addEventListener(Events.RENAME, onRename);
@ -259,6 +283,7 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => {
window.addEventListener(Events.GROUP_CREATE, onCreateGroup);
window.addEventListener(Events.GROUP_EDIT, onEditGroup);
window.addEventListener(Events.CHANGE_QUOTA, onChangeQuota);
window.addEventListener(Events.CREATE_ROOM_TEMPLATE, onCreateRoomTemplate);
if (enablePlugins) {
window.addEventListener(
Events.CREATE_PLUGIN_FILE,
@ -286,6 +311,10 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => {
window.removeEventListener(Events.CHANGE_USER_TYPE, onChangeUserType);
window.removeEventListener(Events.GROUP_CREATE, onCreateGroup);
window.removeEventListener(Events.GROUP_EDIT, onEditGroup);
window.addEventListener(
Events.CREATE_ROOM_TEMPLATE,
onCreateRoomTemplate,
);
if (enablePlugins) {
window.removeEventListener(
@ -346,6 +375,12 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => {
{...createPluginFileDialog}
/>
),
createRoomTemplateDialog.visible && (
<CreateRoomTemplateEvent
key={Events.CREATE_PLUGIN_FILE}
{...createRoomTemplateDialog}
/>
),
changeQuotaDialog.visible && (
<ChangeQuotaEvent key={Events.CHANGE_QUOTA} {...changeQuotaDialog} />
),

View File

@ -42,6 +42,8 @@ export const getRoomTypeTitleTranslation = (roomType = 1, t) => {
return t("Files:PublicRoom");
case RoomsType.FormRoom:
return t("CreateEditRoomDialog:FormFilingRoomTitle");
case RoomsType.TemplateRoom:
return t("Files:FromTemplate");
}
};
@ -61,6 +63,8 @@ export const getRoomTypeDescriptionTranslation = (roomType = 1, t) => {
return t("CreateEditRoomDialog:PublicRoomDescription");
case RoomsType.FormRoom:
return t("CreateEditRoomDialog:FormFilingRoomDescription");
case RoomsType.TemplateRoom:
return t("CreateEditRoomDialog:FromTemplateDescription");
}
};

View File

@ -0,0 +1,261 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import React, { useState } from "react";
import { inject, observer } from "mobx-react";
import styled, { css } from "styled-components";
import { useTranslation } from "react-i18next";
import { Button } from "@docspace/shared/components/button";
import { ModalDialog } from "@docspace/shared/components/modal-dialog";
import { Text } from "@docspace/shared/components/text";
import { Checkbox } from "@docspace/shared/components/checkbox";
import RoomType from "../CreateEditRoomDialog/sub-components/RoomType";
import InputParam from "../CreateEditRoomDialog/sub-components/Params/InputParam";
import TagInput from "../CreateEditRoomDialog/sub-components/TagInput";
import TagHandler from "../CreateEditRoomDialog/handlers/TagHandler";
import { ImageEditor } from "@docspace/shared/components/image-editor";
import ChangeRoomOwner from "../CreateEditRoomDialog/sub-components/ChangeRoomOwner";
import PreviewTile from "@docspace/shared/components/image-editor/PreviewTile";
import { getRoomTypeTitleTranslation } from "../CreateEditRoomDialog/data";
const StyledModalDialog = styled(ModalDialog)`
.create-room-template_body {
display: flex;
flex-direction: column;
width: 100%;
gap: 22px;
}
.icon-editor_text {
margin-bottom: 6px;
}
.icon-editor {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: start;
gap: 16px;
}
.modal-footer {
display: block;
}
`;
const StyledButtonContainer = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 16px;
`;
const CreateRoomTemplate = (props) => {
const { visible, onClose, item, fetchedTags, folderFormValidation } = props;
const { roomType, title, logo, createdBy } = item;
console.log("item", item);
const startTags = Object.values(item.tags);
const startObjTags = startTags.map((tag, i) => ({ id: i, name: tag }));
const [tags, setTags] = useState(startObjTags);
const { t } = useTranslation(["CreateEditRoomDialog", "Common", "Files"]);
const [roomName, setRoomName] = useState(title);
const [isValidTitle, setIsValidTitle] = useState(true);
const [isWrongTitle, setIsWrongTitle] = useState(false);
const [icon, setIcon] = useState({
uploadedFile: logo.original,
tmpFile: "",
x: 0.5,
y: 0.5,
zoom: 1,
});
const [previewIcon, setPreviewIcon] = useState(null);
const [openCreatedIsChecked, setOpenCreatedIsChecked] = useState(true);
const [isScrollLocked, setIsScrollLocked] = useState(false);
const onChangeName = (e) => {
setIsValidTitle(true);
if (e.target.value.match(folderFormValidation)) {
setIsWrongTitle(true);
} else {
setIsWrongTitle(false);
}
setRoomName(e.target.value);
};
const onKeyUp = (e) => {
if (isWrongTitle) return;
if (e.keyCode === 13) onCreateRoomTemplate();
};
const onCreateRoomTemplate = () => {
if (!roomName.trim()) {
setIsValidTitle(false);
return;
}
// onSave(roomParams);
console.log("onCreateRoomTemplate");
// onClose();
};
const setRoomTags = (newTags) => {
setTags(newTags);
};
const onChangeImage = (icon) => {
setIcon(icon);
};
const onChangeOpenCreated = () => {
setOpenCreatedIsChecked(!openCreatedIsChecked);
};
const tagHandler = new TagHandler(tags, setRoomTags, fetchedTags);
return (
<StyledModalDialog
displayType="aside"
withBodyScroll
visible={visible}
onClose={onClose}
withFooterBorder
>
<ModalDialog.Header>
<Text fontSize="21px" fontWeight={700}>
{t("Files:SaveAsTemplate")}
</Text>
</ModalDialog.Header>
<ModalDialog.Body>
<div className="create-room-template_body">
<RoomType t={t} roomType={roomType} type="displayItem" />
<InputParam
id="shared_room-name"
title={`${t("Files:TemplateName")}:`}
placeholder={t("Common:EnterName")}
value={roomName}
onChange={onChangeName}
// isDisabled={isDisabled}
isValidTitle={isValidTitle}
isWrongTitle={isWrongTitle}
errorMessage={
isWrongTitle
? t("Files:ContainsSpecCharacter")
: t("Common:RequiredField")
}
onKeyUp={onKeyUp}
isAutoFocussed
/>
<TagInput
t={t}
title={t("Files:RoomTags")}
tagHandler={tagHandler}
setIsScrollLocked={setIsScrollLocked}
tooltipLabel={t("Files:RoomTagsTooltip")}
// isDisabled={isDisabled}
/>
<ChangeRoomOwner
roomOwner={createdBy}
isTemplate
onOwnerChange={() => console.log("Access settings")}
/>
<div>
<Text fontWeight={600} className="icon-editor_text">
{t("Icon")}
</Text>
<ImageEditor
t={t}
// isDisabled={isDisabled}
image={icon}
setPreview={setPreviewIcon}
onChangeImage={onChangeImage}
classNameWrapperImageCropper={"icon-editor"}
Preview={
<PreviewTile
t={t}
title={roomName || t("Files:NewRoom")}
subtitle={getRoomTypeTitleTranslation(roomType, t)}
previewIcon={previewIcon}
// isDisabled={isDisabled}
/>
}
/>
</div>
</div>
</ModalDialog.Body>
<ModalDialog.Footer>
<Checkbox
label={t("Files:OpenCreatedTemplate")}
isChecked={openCreatedIsChecked}
onChange={onChangeOpenCreated}
/>
<StyledButtonContainer>
<Button
id="create-room-template-modal_submit"
tabIndex={5}
label={t("Files:CreateTemplate")}
size="normal"
primary
scale
onClick={onCreateRoomTemplate}
isDisabled={isWrongTitle}
// isLoading={isLoading}
/>
<Button
id="create-room-template-modal_cancel"
tabIndex={5}
label={t("Common:CancelButton")}
size="normal"
scale
// isDisabled={isLoading}
onClick={onClose}
/>
</StyledButtonContainer>
</ModalDialog.Footer>
</StyledModalDialog>
);
};
export default inject(({ settingsStore }) => {
const { folderFormValidation } = settingsStore;
return { folderFormValidation };
})(observer(CreateRoomTemplate));

View File

@ -69,6 +69,7 @@ import ShareFolderDialog from "./ShareFolderDialog";
import EditGroupMembersDialog from "./EditGroupMembersDialog";
import ChangeStorageQuotaDialog from "./ChangeStorageQuotaDialog";
import DeleteGroupDialog from "./DeleteGroupDialog";
import CreateRoomTemplateDialog from "./CreateRoomTemplate";
export {
EmptyTrashDialog,
@ -116,4 +117,5 @@ export {
ChangeQuotaDialog,
ChangeStorageQuotaDialog,
DeleteGroupDialog,
CreateRoomTemplateDialog,
};

View File

@ -64,6 +64,7 @@ import PluginActionsSvgUrl from "PUBLIC_DIR/images/plugin.actions.react.svg?url"
import LeaveRoomSvgUrl from "PUBLIC_DIR/images/logout.react.svg?url";
import CatalogRoomsReactSvgUrl from "PUBLIC_DIR/images/catalog.rooms.react.svg?url";
import RemoveOutlineSvgUrl from "PUBLIC_DIR/images/remove.react.svg?url";
import CreateTemplateSvgUrl from "PUBLIC_DIR/images/template.react.svg?url";
import { getCategoryUrl } from "@docspace/client/src/helpers/utils";
import { makeAutoObservable } from "mobx";
@ -664,6 +665,12 @@ class ContextOptionsStore {
window.dispatchEvent(event);
};
onCreateRoomTemplate = (item) => {
const event = new Event(Events.CREATE_ROOM_TEMPLATE);
event.item = item;
window.dispatchEvent(event);
};
// onLoadLinks = async (t, item) => {
// const promise = new Promise(async (resolve, reject) => {
// let linksArray = [];
@ -1362,6 +1369,15 @@ class ContextOptionsStore {
},
...pinOptions,
...muteOptions,
{
id: "option_save-as-template",
key: "save-as-template",
label: t("SaveAsTemplate"),
icon: CreateTemplateSvgUrl,
onClick: () => this.onCreateRoomTemplate(item),
badgeLabel: t("New").toUpperCase(),
disabled: false,
},
{
id: "option_owner-change",
key: "owner-change",

View File

@ -114,6 +114,7 @@ class DialogsStore {
shareFolderDialogVisible = false;
cancelUploadDialogVisible = false;
createRoomTemplateDialogVisible = false;
selectFileFormRoomFilterParam = FilesSelectorFilterTypes.DOCX;
@ -516,6 +517,10 @@ class DialogsStore {
setCancelUploadDialogVisible = (visible) => {
this.cancelUploadDialogVisible = visible;
};
setCreateRoomTemplateDialogVisible = (visible) => {
this.createRoomTemplateDialogVisible = visible;
};
}
export default DialogsStore;

View File

@ -2302,6 +2302,7 @@ class FilesStore {
"unpin-room",
"mute-room",
"unmute-room",
"save-as-template",
"separator1",
"download",
"archive-room",
@ -2313,6 +2314,7 @@ class FilesStore {
if (!canEditRoom) {
roomOptions = this.removeOptions(roomOptions, [
"edit-room",
"save-as-template",
"reconnect-storage",
]);
}

View File

@ -376,6 +376,10 @@ const StyledContextMenu = styled.div<{
}
}
.p-submenu-badge {
margin: 0;
}
.p-contextmenu-enter {
opacity: 0;
}

View File

@ -57,6 +57,7 @@ export type ContextMenuType = {
isOutsideLink?: boolean;
withToggle?: boolean;
checked?: boolean;
badgeLabel?: string;
};
export type SeparatorType = {

View File

@ -51,6 +51,7 @@ import {
ContextMenuType,
SeparatorType,
} from "../ContextMenu.types";
import { Badge } from "../../badge";
const SubMenu = (props: {
model: ContextMenuModel[];
@ -296,6 +297,18 @@ const SubMenu = (props: {
{item.isOutsideLink && (
<OutsdideIcon className={subMenuIconClassName} />
)}
{item.badgeLabel && (
<Badge
label={item.badgeLabel}
className={subMenuIconClassName + " p-submenu-badge"}
backgroundColor="#7757D9"
fontSize="9px"
fontWeight={700}
borderRadius="50px"
noHover
isHovered={false}
/>
)}
</a>
);

View File

@ -125,7 +125,10 @@ const StyledImageCropper = styled.div<{ disableImageRescaling?: boolean }>`
}
`;
const StyledPreviewTile = styled.div<{ isGeneratedPreview?: boolean }>`
const StyledPreviewTile = styled.div<{
isGeneratedPreview?: boolean;
isShorten: boolean;
}>`
background: ${(props) =>
props.theme.createEditRoomDialog.previewTile.background};
width: 214px;
@ -161,7 +164,9 @@ const StyledPreviewTile = styled.div<{ isGeneratedPreview?: boolean }>`
border-radius: 6px;
}
}
&-title {
&-title,
&-sub-title,
&-wrapper-title {
font-weight: 600;
font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
line-height: 22px;
@ -188,6 +193,20 @@ const StyledPreviewTile = styled.div<{ isGeneratedPreview?: boolean }>`
text-overflow: ellipsis;
}
}
${(props) =>
props.isShorten &&
css`
height: 68px;
.tile-header {
border: none;
}
.tile-header-sub-title {
font-size: 13px;
font-weight: 400;
}
`}
`;
StyledPreviewTile.defaultProps = { theme: Base };

View File

@ -32,34 +32,41 @@ import { StyledPreviewTile } from "../ImageEditor.styled";
const PreviewTile = ({
title,
subtitle,
previewIcon,
tags,
defaultTagLabel,
}: {
title: string;
subtitle: string;
previewIcon: string;
tags: string[];
defaultTagLabel: string;
}) => {
return (
<StyledPreviewTile>
<StyledPreviewTile isShorten={!tags}>
<div className="tile-header">
<img className="tile-header-icon" src={previewIcon} alt={title} />
<div className="tile-header-title">{title}</div>
</div>
<div className="tile-tags">
{tags.length ? (
<Tags columnCount={2} tags={tags} onSelectTag={() => {}} />
) : (
<Tag
className="type_tag"
tag="script"
label={defaultTagLabel}
isDefault
onClick={() => {}}
/>
)}
<div className="tile-header-wrapper-title">
<div className="tile-header-title">{title}</div>
<div className="tile-header-sub-title">{subtitle}</div>
</div>
</div>
{tags && (
<div className="tile-tags">
{tags.length ? (
<Tags columnCount={2} tags={tags} onSelectTag={() => {}} />
) : (
<Tag
className="type_tag"
tag="script"
label={defaultTagLabel}
isDefault
onClick={() => {}}
/>
)}
</div>
)}
</StyledPreviewTile>
);
};

View File

@ -36,6 +36,7 @@ import EditingSvg32Url from "PUBLIC_DIR/images/icons/32/room/editing.svg?url";
// import ViewOnlySvg32Url from "PUBLIC_DIR/images/icons/32/room/view.only.svg?url";
import PublicRoomSvg32Url from "PUBLIC_DIR/images/icons/32/room/public.svg?url";
import FormRoomSvg32Url from "PUBLIC_DIR/images/icons/32/room/form.svg?url";
import TemplateRoomsSvg32Url from "PUBLIC_DIR/images/icons/32/room/template.svg?url";
import { RoomsType } from "../../enums";
@ -76,6 +77,8 @@ const RoomLogoPure = ({
return PublicRoomSvg32Url;
case RoomsType.FormRoom:
return FormRoomSvg32Url;
case RoomsType.TemplateRoom:
return TemplateRoomsSvg32Url;
default:
return "";
}

View File

@ -339,6 +339,7 @@ export const enum Events {
CHANGE_QUOTA = "change_quota",
CREATE_PLUGIN_FILE = "create_plugin_file",
CREATE_PDF_FORM_FILE = "create_pdf_form_file",
CREATE_ROOM_TEMPLATE = "create_room_template",
}
/**
@ -479,6 +480,7 @@ export enum RoomsType {
// ReadOnlyRoom: 4, //TODO: Restore when certs will be done
PublicRoom = 6,
CustomRoom = 5,
TemplateRoom = 7,
}
export enum AccountsSearchArea {

View File

@ -46,4 +46,7 @@ export type RoomSelectorProps = TSelectorHeader &
setIsDataReady?: (value: boolean) => void;
submitButtonLabel?: string;
withSearch?: boolean;
emptyScreenHeader?: string;
emptyScreenDescription?: string;
};

View File

@ -70,6 +70,8 @@ const RoomSelector = ({
onCancel,
roomType,
emptyScreenHeader,
emptyScreenDescription,
}: RoomSelectorProps) => {
const { t }: { t: TTranslation } = useTranslation(["Common"]);
@ -217,8 +219,10 @@ const RoomSelector = ({
onSubmit={onSubmit}
isMultiSelect={isMultiSelect}
emptyScreenImage={EmptyScreenCorporateSvgUrl}
emptyScreenHeader={t("Common:EmptyRoomsHeader")}
emptyScreenDescription={t("Common:EmptyRoomsDescription")}
emptyScreenHeader={emptyScreenHeader ?? t("Common:EmptyRoomsHeader")}
emptyScreenDescription={
emptyScreenDescription ?? t("Common:EmptyRoomsDescription")
}
searchEmptyScreenImage={EmptyScreenCorporateSvgUrl}
searchEmptyScreenHeader={t("Common:NotFoundTitle")}
searchEmptyScreenDescription={t("Common:SearchEmptyRoomsDescription")}