diff --git a/packages/client/public/locales/en/Translations.json b/packages/client/public/locales/en/Translations.json index 38b7d0ad8e..8ccc7ba1af 100644 --- a/packages/client/public/locales/en/Translations.json +++ b/packages/client/public/locales/en/Translations.json @@ -33,11 +33,14 @@ "RoleEditorDescription": "Operations with existing files: viewing, editing, form filling, reviewing, commenting.", "RoleFormFiller": "Form filler", "RoleFormFillerDescription": "Operations with existing files: viewing, form filling, reviewing, commenting.", + "RoleFormFillerFormRoomDescription": "Form fillers can fill out forms and view only their completed/started forms within the Complete and In Process folders.", "RolePortalAdminDescription": "{{productName}} admins can access {{productName}} settings, manage and archive rooms, invite new users and assign roles below their level. All admins have access to the Personal section.", "RolePowerUserDescription": "Power users can create and edit files in the room, but can't create rooms, manage users, or access settings.", + "RolePowerUserFormRoomDescription": "Power users can upload forms to the room and have full access to the Complete and In Process folders.", "RoleReviewer": "Reviewer", "RoleReviewerDescription": "Operations with existing files: viewing, reviewing, commenting.", "RoleRoomAdminDescription": "Room admins can create and manage the assigned rooms, invite new users, and assign roles of room admin and lower. All admins have access to the Personal section.", + "RoleRoomAdminFormRoomDescription": "Room admins can create and manage rooms, invite new users and assign roles of room admin or lower. Room admins can upload forms to the room and have full access to the Complete and In Process folders.", "RoleUserDescription": "Users can only access the rooms they are invited to by admins. They can't create own rooms, folders or files.", "RoleViewer": "Viewer", "RoleViewerDescription": "File viewing", diff --git a/packages/client/src/components/panels/InvitePanel/utils/index.js b/packages/client/src/components/panels/InvitePanel/utils/index.js index cc47ca63c7..951954fe6b 100644 --- a/packages/client/src/components/panels/InvitePanel/utils/index.js +++ b/packages/client/src/components/panels/InvitePanel/utils/index.js @@ -31,6 +31,50 @@ import { } from "@docspace/shared/enums"; import { checkIfAccessPaid } from "SRC_DIR/helpers"; +/** + * @param {RoomsType} roomType + * @param {(key: string) => string} t + * @returns {string} + */ +const getRoomAdminDescription = (roomType, t) => { + switch (roomType) { + case RoomsType.FormRoom: + return t("Translations:RoleRoomAdminFormRoomDescription"); + + default: + return t("Translations:RoleRoomAdminDescription"); + } +}; +/** + * @param {RoomsType} roomType + * @param {(key: string)=> string} t + * @returns {string} + */ +const getPowerUserDescription = (roomType, t) => { + switch (roomType) { + case RoomsType.FormRoom: + return t("Translations:RolePowerUserFormRoomDescription"); + + default: + return t("Translations:RolePowerUserDescription"); + } +}; + +/** + * @param {RoomsType} roomType + * @param {(key: string)=> string} t + * @returns {string} + */ +const getFormFillerDescription = (roomType, t) => { + switch (roomType) { + case RoomsType.FormRoom: + return t("Translations:RoleFormFillerFormRoomDescription"); + + default: + return t("Translations:RoleFormFillerDescription"); + } +}; + export const getAccessOptions = ( t, roomType = RoomsType.CustomRoom, @@ -56,7 +100,7 @@ export const getAccessOptions = ( roomAdmin: { key: "roomAdmin", label: t("Common:RoomAdmin"), - description: t("Translations:RoleRoomAdminDescription"), + description: getRoomAdminDescription(roomType, t), ...(!standalone && { quota: t("Common:Paid") }), color: "#EDC409", access: @@ -66,7 +110,7 @@ export const getAccessOptions = ( collaborator: { key: "collaborator", label: t("Common:PowerUser"), - description: t("Translations:RolePowerUserDescription"), + description: getPowerUserDescription(roomType, t), ...(!standalone && { quota: t("Common:Paid") }), color: "#EDC409", access: @@ -92,7 +136,7 @@ export const getAccessOptions = ( formFiller: { key: "formFiller", label: t("Translations:RoleFormFiller"), - description: t("Translations:RoleFormFillerDescription"), + description: getFormFillerDescription(roomType, t), access: ShareAccessRights.FormFilling, type: "user", }, diff --git a/packages/doceditor/src/components/completed-form/CompletedForm.styled.ts b/packages/doceditor/src/components/completed-form/CompletedForm.styled.ts index e63e06b173..e810bc9a19 100644 --- a/packages/doceditor/src/components/completed-form/CompletedForm.styled.ts +++ b/packages/doceditor/src/components/completed-form/CompletedForm.styled.ts @@ -27,33 +27,61 @@ import styled from "styled-components"; -import { mobile } from "@docspace/shared/utils"; +import { mobile, mobileMore } from "@docspace/shared/utils"; import type { CompletedFormLayoutProps } from "./CompletedForm.types"; -export const CompletedFormLayout = styled.section` - display: flex; - align-items: center; - flex-direction: column; - +export const ContainerCompletedForm = styled.section` box-sizing: border-box; * { box-sizing: border-box; } - width: 100%; - min-height: 100dvh; - padding: 100px 16px 16px; - background-image: ${(props) => props.bgPattern}; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center; + width: 100%; + min-height: 100dvh; + height: 100%; + + .scroller { + > .scroll-body { + display: flex; + flex-direction: column; + padding-inline-end: 16px !important; + } + } + + .completed-form__default-layout { + padding: clamp(42px, 8vh, 100px) 16px 16px; + + picture { + } + } + + @media ${mobile} { + .completed-form__default-layout { + padding: 0px 16px 16px; + } + + background-image: none; + } +`; + +export const CompletedFormLayout = styled.div` + display: flex; + align-items: center; + flex-direction: column; + + padding: clamp(42px, 8vh, 100px) 0px 16px 16px; + picture { - margin-bottom: clamp(40px, 10vh, 125px); + margin-bottom: clamp(40px, 8vh, 125px); + user-select: none; } .link { @@ -68,9 +96,14 @@ export const CompletedFormLayout = styled.section` margin-top: 24px; } - @media ${mobile} { - background-image: none; + @media ${mobileMore} and (max-height: 650px) { + padding-top: 42px; + .completed-form__logo { + margin-bottom: 40px; + } + } + @media ${mobile} { padding-top: 0px; .completed-form__icon { @@ -95,6 +128,11 @@ export const CompletedFormLayout = styled.section` align-self: center; } } + + .completed-form__empty { + gap: 20px; + margin-top: 24px; + } } `; @@ -228,6 +266,19 @@ export const FormNumberWrapper = styled.div` grid-area: form-number; + .form-number--big { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + @media ${mobileMore} { + .form-number--big { + font-size: 23px; + line-height: 28px; + } + } + > div { justify-content: center; flex-grow: 1; diff --git a/packages/doceditor/src/components/completed-form/CompletedForm.tsx b/packages/doceditor/src/components/completed-form/CompletedForm.tsx index fa36983c63..0bfb20af4a 100644 --- a/packages/doceditor/src/components/completed-form/CompletedForm.tsx +++ b/packages/doceditor/src/components/completed-form/CompletedForm.tsx @@ -46,10 +46,11 @@ import { isNullOrUndefined } from "@docspace/shared/utils/typeGuards"; import { Button, ButtonSize } from "@docspace/shared/components/button"; import { WhiteLabelLogoType } from "@docspace/shared/enums"; -import { mobile, mobileMore } from "@docspace/shared/utils"; +import { classNames, mobile, mobileMore } from "@docspace/shared/utils"; import { Heading, HeadingLevel } from "@docspace/shared/components/heading"; import { IconButton } from "@docspace/shared/components/icon-button"; import { copyShareLink } from "@docspace/shared/utils/copy"; +import { Scrollbar } from "@docspace/shared/components/scrollbar"; import { Avatar, @@ -69,10 +70,13 @@ import { FormNumberWrapper, ManagerWrapper, MainContent, + ContainerCompletedForm, } from "./CompletedForm.styled"; import type { CompletedFormProps } from "./CompletedForm.types"; +const BIG_FORM_NUMBER = 9_999_999; + export const CompletedForm = ({ session, share, @@ -92,25 +96,29 @@ export const CompletedForm = ({ if (!session) return ( - - - - - logo - - icon - - {t("CompletedForm:Title")} - {t("CompletedForm:Description")} - - + + + + + + logo + + icon + + + {t("CompletedForm:Title")} + + {t("CompletedForm:Description")} + + + ); const { @@ -172,85 +180,100 @@ export const CompletedForm = ({ }); return ( - - - - - logo - - - - {t("CompletedForm:FormCompletedSuccessfully")} - - - {isAnonim - ? t("CompletedForm:DescriptionForAnonymous") - : t("CompletedForm:DescriptionForRegisteredUser")} - - - - - - - {completedForm.title} - - - - - {t("CompletedForm:FormNumber")} - - {formNumber} - - - - {t("CompletedForm:FormOwner")} - - - - {decode(manager.displayName)} + + + + + + + logo + + + + {t("CompletedForm:FormCompletedSuccessfully")} - - - {manager.email} - - - - - -