Shared:Components:Selector Added empty screen

packages/shared/components/selector/Selector.styled.ts

@@ -349,6 +349,60 @@ const StyledEmptyScreen = styled.div<{ withSearch: boolean }>`
   }
 `;
 
+const StyledNewEmptyScreen = styled.section`
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  padding: 0 28px;
+
+  box-sizing: border-box;
+
+  .empty-image {
+    margin-top: 26px;
+  }
+
+  .empty-header {
+    font-size: 16px;
+    line-height: 22px;
+    font-weight: 700;
+    text-align: center;
+
+    margin: 0;
+
+    margin-top: 32px;
+  }
+
+  .empty-description {
+    font-size: 12px;
+    line-height: 16px;
+    text-align: center;
+
+    margin-top: 8px;
+
+    color: ${(props) => props.theme.selector.emptyScreen.pressedButtonColor};
+  }
+
+  .empty_button-wrapper {
+    display: flex;
+    justify-content: flex-start;
+
+    align-self: flex-start;
+
+    align-items: center;
+    gap: 16px;
+
+    padding: 12px 0;
+    margin-top: 16px;
+  }
+
+  .empty-button-label {
+    cursor: pointer;
+  }
+`;
+
 const StyledBreadCrumbs = styled.div<{
   itemsCount: number;
   gridTemplateColumns: string;
@@ -576,6 +630,7 @@ StyledBody.defaultProps = { theme: Base };
 StyledSelectAll.defaultProps = { theme: Base };
 StyledItem.defaultProps = { theme: Base };
 StyledEmptyScreen.defaultProps = { theme: Base };
+StyledNewEmptyScreen.defaultProps = { theme: Base };
 StyledArrowRightSvg.defaultProps = { theme: Base };
 StyledComboBox.defaultProps = { theme: Base };
 StyledInfo.defaultProps = { theme: Base };
@@ -602,4 +657,5 @@ export {
   StyledAccessSelector,
   StyledInputWrapper,
   StyledCreateDropDown,
+  StyledNewEmptyScreen,
 };

packages/shared/components/selector/Selector.types.ts

@@ -427,6 +427,9 @@ type TSelectorItemEmpty = {
   onAcceptInput?: undefined;
   onCancelInput?: undefined;
   placeholder?: undefined;
+
+  isRoomsOnly?: undefined;
+  createDefineRoomType?: undefined;
 };
 
 export type TSelectorItemUser = MergeTypes<
@@ -505,6 +508,9 @@ export type TSelectorItemNew = MergeTypes<
     onCreateClick?: VoidFunction;
 
     onBackClick: VoidFunction;
+
+    isRoomsOnly: boolean;
+    createDefineRoomType?: RoomsType;
   }
 >;
 

packages/shared/components/selector/sub-components/EmptyScreen.tsx

@@ -25,17 +25,23 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React from "react";
+import { useTheme } from "styled-components";
 import { useTranslation } from "react-i18next";
 
 import PlusSvgUrl from "PUBLIC_DIR/images/plus.svg?url";
 import UpSvgUrl from "PUBLIC_DIR/images/up.svg?url";
+import FormRoomEmptyDarkImageUrl from "PUBLIC_DIR/images/emptyview/selector.form.room.empty.screen.dark.svg?url";
+import FormRoomEmptyLightImageUrl from "PUBLIC_DIR/images/emptyview/selector.form.room.empty.screen.light.svg?url";
+
+import { RoomsType } from "../../../enums";
 
 import { Heading } from "../../heading";
 import { Text } from "../../text";
 import { IconButton } from "../../icon-button";
 import { Link, LinkType } from "../../link";
+import { SelectorAddButton } from "../../selector-add-button";
 
-import { StyledEmptyScreen } from "../Selector.styled";
+import { StyledEmptyScreen, StyledNewEmptyScreen } from "../Selector.styled";
 import { EmptyScreenProps } from "../Selector.types";
 import useCreateDropDown from "../hooks/useCreateDropDown";
 import NewItemDropDown from "./NewItemDropDown";
@@ -59,10 +65,15 @@ const EmptyScreen = ({
   items,
   inputItemVisible,
 }: EmptyScreenProps) => {
+  const theme = useTheme();
   const { t } = useTranslation(["Common"]);
   const { isOpenDropDown, setIsOpenDropDown, onCloseDropDown } =
     useCreateDropDown();
 
+  const formRoomEmptyScreenImage = theme.isBase
+    ? FormRoomEmptyLightImageUrl
+    : FormRoomEmptyDarkImageUrl;
+
   const currentImage = withSearch ? searchImage : image;
   const currentHeader = withSearch ? searchHeader : header;
   const currentDescription = withSearch ? searchDescription : description;
@@ -83,6 +94,37 @@ const EmptyScreen = ({
     createItem.onCreateClick?.();
   };
 
+  if (
+    !withSearch &&
+    createItem?.isRoomsOnly &&
+    createItem.createDefineRoomType === RoomsType.FormRoom
+  )
+    return (
+      <StyledNewEmptyScreen>
+        <img
+          className="empty-image"
+          src={formRoomEmptyScreenImage}
+          alt="empty-screen"
+        />
+        <Heading level={3} className="empty-header">
+          {t("Common:NoRoomsFound")}
+        </Heading>
+        <Text className="empty-description" noSelect>
+          {t("Common:SelectorFormRoomEmptyScreenDescription")}
+        </Text>
+        <div className="empty_button-wrapper" onClick={onCreateClickAction}>
+          <SelectorAddButton
+            isAction
+            className="empty-button"
+            title={t("Common:CreateFormFillingRoom")}
+          />
+          <Text className="empty-button-label" noSelect>
+            {t("Common:CreateFormFillingRoom")}
+          </Text>
+        </div>
+      </StyledNewEmptyScreen>
+    );
+
   return (
     <StyledEmptyScreen withSearch={withSearch}>
       <img className="empty-image" src={currentImage} alt="empty-screen" />

packages/shared/selectors/Files/hooks/useRoomsHelper.tsx

@@ -155,7 +155,8 @@ const useRoomsHelper = ({
             id: "create-room-item",
             key: "create-room-item",
             hotkey: "r",
-
+            isRoomsOnly,
+            createDefineRoomType,
             dropDownItems: createDefineRoomType
               ? undefined
               : createDropDownItems,

public/locales/en/Common.json

@@ -73,6 +73,7 @@
   "CreateCopy": "Create copy",
   "CreateDescription": "There will be two different files in the folder.",
   "CreateFileCopy": "Create file copy",
+  "CreateFormFillingRoom": "Create Form filling room",
   "CreateMasterFormFromFile": "Create Form Template from file",
   "CreatePDFForm": "Create PDF Form",
   "Culture_ar-SA": "عربي (المملكة العربية السعودية)",
@@ -286,6 +287,7 @@
   "NewVersionAvailable": "A new version of the website available",
   "Next": "Next",
   "No": "No",
+  "NoRoomsFound": "No rooms found",
   "NotFoundGroups": "No groups found",
   "NotFoundGroupsDescription": "No groups match your search. Please adjust your search parameters or clear the search field to view the full list of groups.",
   "NotFoundLanguage": "Can't find your language? Contact us at <1>{{supportEmail}}</1> to take part in the translation program and get rewards.",
@@ -294,8 +296,8 @@
   "NotFoundUsersDescription": "No users match your search. Please adjust your search parameters or clear the search field to view the full list of users.",
   "NotSupportedFormat": "Sorry, this file format isn't supported",
   "OFORMsGallery": "Form Gallery",
-  "OKButton": "OK",
   "OkButton": "Ok",
+  "OKButton": "OK",
   "Or": "or",
   "orContinueWith": "or continue with",
   "OtherLabel": "Other",
@@ -388,6 +390,7 @@
   "SelectFolder": "Select folder",
   "SelectFromPortal": "Select from {{productName}}",
   "SelectorEmptyScreenHeader": "No files and folders here yet",
+  "SelectorFormRoomEmptyScreenDescription": "To share your form and collect responses, please create the Form filling room.",
   "SelectPDFFormat": "Select .PDF file",
   "SelectRoom": "Select room",
   "SelectTypeFiles": "Select {{type}}",