;
+ updateProfileMenuItem?: (item: IProfileMenuItem) => void;
+};
diff --git a/packages/client/src/helpers/plugins/utils.js b/packages/client/src/helpers/plugins/utils.js
index 54a8181845..59ce2c6f8e 100644
--- a/packages/client/src/helpers/plugins/utils.js
+++ b/packages/client/src/helpers/plugins/utils.js
@@ -3,7 +3,7 @@ import { toastr } from "@docspace/shared/components/toast";
import config from "PACKAGE_FILE";
-import { PluginActions, PluginToastType } from "./constants";
+import { PluginActions, PluginToastType } from "./enums";
import { Events } from "@docspace/shared/enums";
export const messageActions = (
@@ -26,7 +26,7 @@ export const messageActions = (
updateEventListenerItems,
updateFileItems,
- updatePlugin
+ updatePlugin,
) => {
if (!message || !message.actions || message.actions.length === 0) return;
@@ -152,7 +152,7 @@ export const messageActions = (
if (frame) {
frame.contentWindow.postMessage(
JSON.stringify(postMessage.message),
- "*"
+ "*",
);
}
@@ -177,6 +177,6 @@ export const getPluginUrl = (url, file) => {
window.DocSpaceConfig?.proxy?.url,
config.homepage,
path,
- file
+ file,
);
};
diff --git a/packages/client/src/helpers/utils.js b/packages/client/src/helpers/utils.js
index 869c950300..a4c1baa72a 100644
--- a/packages/client/src/helpers/utils.js
+++ b/packages/client/src/helpers/utils.js
@@ -7,7 +7,7 @@ import { FolderType, ShareAccessRights } from "@docspace/shared/enums";
import { translations } from "./autoGeneratedTranslations";
// import router from "SRC_DIR/router";
-export const setDocumentTitle = (subTitle = null) => {
+export const setDocumentTitle = (subTitle = "") => {
const { isAuthenticated, product: currentModule } = authStore;
const { organizationName } = settingsStore;
diff --git a/packages/client/src/pages/Bonus/index.js b/packages/client/src/pages/Bonus/index.js
index fc5c5415aa..3ed9fd0fa3 100644
--- a/packages/client/src/pages/Bonus/index.js
+++ b/packages/client/src/pages/Bonus/index.js
@@ -32,8 +32,8 @@ const Bonus = ({ standaloneInit, isInitPaymentPage }) => {
);
};
-export default inject(({ payments }) => {
- const { standaloneInit, isInitPaymentPage } = payments;
+export default inject(({ paymentStore }) => {
+ const { standaloneInit, isInitPaymentPage } = paymentStore;
return {
standaloneInit,
diff --git a/packages/client/src/pages/Confirm/withLoader.js b/packages/client/src/pages/Confirm/withLoader.js
index d26f97ce5e..d48b49fd87 100644
--- a/packages/client/src/pages/Confirm/withLoader.js
+++ b/packages/client/src/pages/Confirm/withLoader.js
@@ -35,28 +35,26 @@ export default function withLoader(WrappedComponent) {
type === "EmpInvite") &&
!passwordSettings
) {
- axios
- .all([getSettings(), getPortalPasswordSettings(confirmHeader)])
- .catch((error) => {
- let errorMessage = "";
- if (typeof error === "object") {
- errorMessage =
- error?.response?.data?.error?.message ||
- error?.statusText ||
- error?.message ||
- "";
- } else {
- errorMessage = error;
- }
+ getPortalPasswordSettings(confirmHeader).catch((error) => {
+ let errorMessage = "";
+ if (typeof error === "object") {
+ errorMessage =
+ error?.response?.data?.error?.message ||
+ error?.statusText ||
+ error?.message ||
+ "";
+ } else {
+ errorMessage = error;
+ }
- console.error(errorMessage);
- navigate(
- combineUrl(
- window.DocSpaceConfig?.proxy?.url,
- `/login/error?message=${errorMessage}`
- )
- );
- });
+ console.error(errorMessage);
+ navigate(
+ combineUrl(
+ window.DocSpaceConfig?.proxy?.url,
+ `/login/error?message=${errorMessage}`,
+ ),
+ );
+ });
}
}, [passwordSettings]);
@@ -77,8 +75,8 @@ export default function withLoader(WrappedComponent) {
navigate(
combineUrl(
window.DocSpaceConfig?.proxy?.url,
- `/login/error?message=${errorMessage}`
- )
+ `/login/error?message=${errorMessage}`,
+ ),
);
});
}
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js
index 8fd99e1ea0..dde1304439 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js
@@ -10,6 +10,7 @@ import { ComboBox } from "@docspace/shared/components/combobox";
import { getUserStatus } from "SRC_DIR/helpers/people-helpers";
import { StyledAccountContent } from "../../styles/accounts";
+import { getUserTypeLabel } from "@docspace/shared/utils/common";
const Accounts = (props) => {
const {
@@ -46,21 +47,6 @@ const Accounts = (props) => {
}
}, [infoPanelSelection]);
- const getUserTypeLabel = React.useCallback((role) => {
- switch (role) {
- case "owner":
- return t("Common:Owner");
- case "admin":
- return t("Common:DocSpaceAdmin");
- case "manager":
- return t("Common:RoomAdmin");
- case "collaborator":
- return t("Common:PowerUser");
- case "user":
- return t("Common:User");
- }
- }, []);
-
const getTypesOptions = React.useCallback(() => {
const options = [];
@@ -128,10 +114,10 @@ const Accounts = (props) => {
setIsLoading(false);
}
},
- [infoPanelSelection, changeUserType, t]
+ [infoPanelSelection, changeUserType, t],
);
- const typeLabel = getUserTypeLabel(role);
+ const typeLabel = React.useCallback(() => getUserTypeLabel(role, t), [])();
const renderTypeData = () => {
const typesOptions = getTypesOptions();
@@ -248,7 +234,7 @@ export default inject(
getPeopleListItem: usersStore.getPeopleListItem,
setInfoPanelSelection,
};
- }
+ },
)(
withTranslation([
"People",
@@ -263,7 +249,7 @@ export default inject(
"Translations",
])(
withLoader(observer(Accounts))(
-
- )
- )
+ ,
+ ),
+ ),
);
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js
index feb5c56efd..fd2dc9f02d 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js
@@ -9,9 +9,8 @@ import { toastr } from "@docspace/shared/components/toast";
import { isMobileOnly, isMobile } from "react-device-detect";
import { decode } from "he";
import { filterUserRoleOptions } from "SRC_DIR/helpers";
-import { capitalize } from "lodash";
-import { getUserRole } from "@docspace/shared/utils/common";
+import { getUserRole, getUserTypeLabel } from "@docspace/shared/utils/common";
import { Text } from "@docspace/shared/components/text";
import EmailPlusReactSvgUrl from "PUBLIC_DIR/images/e-mail+.react.svg?url";
import { StyledUserTypeHeader } from "../../styles/members";
@@ -48,7 +47,7 @@ const User = ({
const fullRoomRoleOptions = membersHelper.getOptionsByRoomType(
infoPanelSelection.roomType,
- canChangeUserRole
+ canChangeUserRole,
);
const userRole = membersHelper.getOptionByUserAccess(user.access, user);
@@ -57,7 +56,7 @@ const User = ({
const onRepeatInvitation = async () => {
resendEmailInvitations(infoPanelSelection.id, true)
.then(() =>
- toastr.success(t("PeopleTranslations:SuccessSentMultipleInvitatios"))
+ toastr.success(t("PeopleTranslations:SuccessSentMultipleInvitatios")),
)
.catch((err) => toastr.error(err));
};
@@ -77,10 +76,10 @@ const User = ({
const newMembers = {
users: infoPanelMembers.users?.filter((m) => m.id !== user.id),
administrators: infoPanelMembers.administrators?.filter(
- (m) => m.id !== user.id
+ (m) => m.id !== user.id,
),
expected: infoPanelMembers.expected?.filter(
- (m) => m.id !== user.id
+ (m) => m.id !== user.id,
),
};
@@ -129,13 +128,13 @@ const User = ({
setInfoPanelMembers({
roomId: infoPanelSelection.id,
users: infoPanelMembers.users?.map((m) =>
- m.id === user.id ? { ...m, access: option.access } : m
+ m.id === user.id ? { ...m, access: option.access } : m,
),
administrators: infoPanelMembers.administrators?.map((m) =>
- m.id === user.id ? { ...m, access: option.access } : m
+ m.id === user.id ? { ...m, access: option.access } : m,
),
expected: infoPanelMembers.expected?.map((m) =>
- m.id === user.id ? { ...m, access: option.access } : m
+ m.id === user.id ? { ...m, access: option.access } : m,
),
});
}
@@ -182,6 +181,8 @@ const User = ({
const onToggle = (e, isOpen) => {
// setIsScrollLocked(isOpen);
};
+ const role = getUserRole(user);
+ const typeLabel = getUserTypeLabel(role, t);
const getTooltipContent = () => (
@@ -197,15 +198,13 @@ const User = ({
color="#A3A9AE !important"
dir="auto"
>
- {`${capitalize(role)} | ${user.email}`}
+ {`${typeLabel} | ${user.email}`}
);
const userAvatar = user.hasAvatar ? user.avatar : DefaultUserPhotoUrl;
- const role = getUserRole(user);
-
const withTooltip = user.isOwner || user.isAdmin;
const uniqueTooltipId = `userTooltip_${Math.random()}`;
@@ -269,7 +268,7 @@ const User = ({
color="#A3A9AE"
dir="auto"
>
- {`${capitalize(role)} | ${user.email}`}
+ {`${typeLabel} | ${user.email}`}
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Plugin/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Plugin/index.js
index 845b403b6b..8436b1e0a3 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Plugin/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Plugin/index.js
@@ -2,7 +2,7 @@ import React from "react";
import { inject, observer } from "mobx-react";
import WrappedComponent from "SRC_DIR/helpers/plugins/WrappedComponent";
-import { PluginComponents } from "SRC_DIR/helpers/plugins/constants";
+import { PluginComponents } from "SRC_DIR/helpers/plugins/enums";
const Plugin = ({ boxProps, pluginName }) => {
return (
diff --git a/packages/client/src/pages/Home/InfoPanel/Header/index.js b/packages/client/src/pages/Home/InfoPanel/Header/index.js
index c92dc4ef6f..26211372cf 100644
--- a/packages/client/src/pages/Home/InfoPanel/Header/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Header/index.js
@@ -15,7 +15,7 @@ import {
import { StyledInfoPanelHeader } from "./styles/common";
-import { PluginFileType } from "SRC_DIR/helpers/plugins/constants";
+import { PluginFileType } from "SRC_DIR/helpers/plugins/enums";
const InfoPanelHeaderContent = (props) => {
const {
@@ -245,12 +245,12 @@ export default inject(
enablePlugins,
};
- }
+ },
)(
withTranslation(["Common", "InfoPanel"])(
- InfoPanelHeaderContent
+ InfoPanelHeaderContent,
// withLoader(observer(InfoPanelHeaderContent))(
//
// )
- )
+ ),
);
diff --git a/packages/client/src/pages/Home/MediaViewer/index.js b/packages/client/src/pages/Home/MediaViewer/index.js
index 33ef18e672..87d0870ec5 100644
--- a/packages/client/src/pages/Home/MediaViewer/index.js
+++ b/packages/client/src/pages/Home/MediaViewer/index.js
@@ -4,7 +4,7 @@ import { withTranslation } from "react-i18next";
import { useNavigate, useLocation } from "react-router-dom";
import queryString from "query-string";
-import { PluginFileType } from "SRC_DIR/helpers/plugins/constants";
+import { PluginFileType } from "SRC_DIR/helpers/plugins/enums";
import { MEDIA_VIEW_URL } from "@docspace/shared/constants";
import { combineUrl } from "@docspace/shared/utils/combineUrl";
@@ -118,7 +118,7 @@ const FilesMediaViewer = (props) => {
setCurrentId(id);
navigate(url);
},
- [setCurrentId, navigate]
+ [setCurrentId, navigate],
);
const resetSelection = () => {
@@ -159,7 +159,7 @@ const FilesMediaViewer = (props) => {
// try to fix with one check later (see deleteAction)
const isActiveFile = activeFiles.find((elem) => elem.id === file.id);
const isActiveFolder = activeFolders.find(
- (elem) => elem.id === file.id
+ (elem) => elem.id === file.id,
);
if (isActiveFile || isActiveFolder) return;
@@ -169,7 +169,14 @@ const FilesMediaViewer = (props) => {
}
}
},
- [files, t, activeFiles, activeFolders, setRemoveMediaItem, deleteItemAction]
+ [
+ files,
+ t,
+ activeFiles,
+ activeFolders,
+ setRemoveMediaItem,
+ deleteItemAction,
+ ],
);
const onDownloadMediaFile = useCallback(
@@ -179,7 +186,7 @@ const FilesMediaViewer = (props) => {
return window.open(viewUrlFile, "_self");
}
},
- [playlist]
+ [playlist],
);
const onMediaViewerClose = useCallback(
@@ -227,7 +234,7 @@ const FilesMediaViewer = (props) => {
setToPreviewFile,
setMediaViewerData,
setBufferSelection,
- ]
+ ],
);
useEffect(() => {
if (playlist.length === 0 && isOpenMediaViewer) onMediaViewerClose();
@@ -422,5 +429,5 @@ export default inject(
pluginContextMenuItems,
currentDeviceType,
};
- }
+ },
)(withTranslation(["Files", "Translations"])(observer(FilesMediaViewer)));
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/Badges.js b/packages/client/src/pages/Home/Section/AccountsBody/Badges.js
index 1e5e57c7f0..c359ba81ee 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/Badges.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/Badges.js
@@ -20,6 +20,21 @@ const StyledBadgesContainer = styled.div`
display: flex;
align-items: center;
+
+ ${(props) =>
+ props.infoPanelVisible &&
+ css`
+ .accounts-badge:last-child {
+ ${(props) =>
+ props.theme.interfaceDirection === "rtl"
+ ? css`
+ margin-left: 12px;
+ `
+ : css`
+ margin-right: 12px;
+ `}
+ }
+ `}
`;
const StyledPaidBadge = styled(Badge)`
@@ -52,7 +67,7 @@ const Badges = ({
withoutPaid,
isPaid = false,
filter,
-
+ infoPanelVisible,
isSSO = false,
}) => {
const navigate = useNavigate();
@@ -74,9 +89,13 @@ const Badges = ({
};
return (
-
+
{isSSO && (
)}
{statusType === "pending" && (
-
+
)}
{statusType === "disabled" && (
-
+
)}
);
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js
index 235e4c3703..6e39bd8ab0 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js
@@ -123,6 +123,8 @@ const Table = ({
canChangeUserType,
isFiltered,
currentDeviceType,
+ typeAccountsColumnIsEnabled,
+ emailAccountsColumnIsEnabled,
}) => {
const ref = useRef(null);
const [hideColumns, setHideColumns] = React.useState(false);
@@ -173,6 +175,9 @@ const Table = ({
canChangeUserType={canChangeUserType}
hideColumns={hideColumns}
itemIndex={index}
+ typeAccountsColumnIsEnabled={typeAccountsColumnIsEnabled}
+ emailAccountsColumnIsEnabled={emailAccountsColumnIsEnabled}
+ infoPanelVisible={infoPanelVisible}
/>
))}
@@ -189,6 +194,7 @@ export default inject(
accessRightsStore,
infoPanelStore,
userStore,
+ tableStore,
}) => {
const {
usersStore,
@@ -205,6 +211,8 @@ export default inject(
const { isAdmin, isOwner, id: userId } = userStore.user;
const { canChangeUserType } = accessRightsStore;
+ const { typeAccountsColumnIsEnabled, emailAccountsColumnIsEnabled } =
+ tableStore;
return {
peopleList,
@@ -224,6 +232,8 @@ export default inject(
canChangeUserType,
isFiltered,
currentDeviceType,
+ typeAccountsColumnIsEnabled,
+ emailAccountsColumnIsEnabled,
};
- }
+ },
)(observer(Table));
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableHeader.js b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableHeader.js
index 83dbae1dbc..78839c9369 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableHeader.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableHeader.js
@@ -28,7 +28,7 @@ class PeopleTableHeader extends React.Component {
{
key: "Type",
title: t("Common:Type"),
- enable: true,
+ enable: props.typeAccountsColumnIsEnabled,
sortBy: "type",
resizable: true,
onChange: this.onColumnChange,
@@ -44,7 +44,7 @@ class PeopleTableHeader extends React.Component {
{
key: "Mail",
title: t("Common:Email"),
- enable: true,
+ enable: props.emailAccountsColumnIsEnabled,
resizable: true,
sortBy: "email",
onChange: this.onColumnChange,
@@ -52,38 +52,19 @@ class PeopleTableHeader extends React.Component {
},
];
- const columns = this.getColumns(defaultColumns);
+ const columns = props.getColumns(defaultColumns);
this.state = { columns };
}
- getColumns = (defaultColumns) => {
- const storageColumns = localStorage.getItem(
- `${TABLE_COLUMNS}=${this.props.userId}`
- );
- const columns = [];
-
- if (storageColumns) {
- const splitColumns = storageColumns.split(",");
-
- for (let col of defaultColumns) {
- const column = splitColumns.find((key) => key === col.key);
- column ? (col.enable = true) : (col.enable = false);
-
- columns.push(col);
- }
- return columns;
- } else {
- return defaultColumns;
- }
- };
-
onColumnChange = (key, e) => {
const { columns } = this.state;
const columnIndex = columns.findIndex((c) => c.key === key);
if (columnIndex === -1) return;
+ this.props.setColumnEnable(key);
+
columns[columnIndex].enable = !columns[columnIndex].enable;
this.setState({ columns });
@@ -179,6 +160,7 @@ export default inject(
infoPanelStore,
clientLoadingStore,
userStore,
+ tableStore
}) => {
const { filterStore } = peopleStore;
@@ -186,14 +168,25 @@ export default inject(
const { isVisible: infoPanelVisible } = infoPanelStore;
const { withPaging } = settingsStore;
+
+ const {
+ getColumns,
+ setColumnEnable,
+ typeAccountsColumnIsEnabled,
+ emailAccountsColumnIsEnabled,
+ } = tableStore;
return {
filter,
-
setIsLoading: clientLoadingStore.setIsSectionBodyLoading,
userId: userStore.user?.id,
infoPanelVisible,
withPaging,
+ getColumns,
+ setColumnEnable,
+ typeAccountsColumnIsEnabled,
+ emailAccountsColumnIsEnabled,
+
};
}
)(
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js
index 92573e80bf..1f367b79a6 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js
@@ -14,6 +14,7 @@ import withContent from "SRC_DIR/HOCs/withPeopleContent";
import Badges from "../Badges";
import { Base } from "@docspace/shared/themes";
+import { getUserTypeLabel } from "@docspace/shared/utils/common";
const StyledWrapper = styled.div`
display: contents;
@@ -229,6 +230,9 @@ const PeopleTableRow = (props) => {
hideColumns,
value,
standalone,
+ typeAccountsColumnIsEnabled,
+ emailAccountsColumnIsEnabled,
+ infoPanelVisible,
} = props;
const {
@@ -308,7 +312,7 @@ const PeopleTableRow = (props) => {
setIsLoading(false);
}
},
- [item, changeUserType]
+ [item, changeUserType],
);
// const getRoomsOptions = React.useCallback(() => {
@@ -328,22 +332,7 @@ const PeopleTableRow = (props) => {
// return <>{options.map((option) => option)};
// }, []);
- const getUserTypeLabel = React.useCallback((role) => {
- switch (role) {
- case "owner":
- return t("Common:Owner");
- case "admin":
- return t("Common:DocSpaceAdmin");
- case "manager":
- return t("Common:RoomAdmin");
- case "collaborator":
- return t("Common:PowerUser");
- case "user":
- return t("Common:User");
- }
- }, []);
-
- const typeLabel = getUserTypeLabel(role);
+ const typeLabel = React.useCallback(() => getUserTypeLabel(role, t), [])();
const isChecked = checkedProps.checked;
@@ -466,10 +455,19 @@ const PeopleTableRow = (props) => {
? displayName
: email}
-
+
- {typeCell}
+ {typeAccountsColumnIsEnabled ? (
+ {typeCell}
+ ) : (
+
+ )}
{/*
{!rooms?.length ? (
@@ -512,25 +510,29 @@ const PeopleTableRow = (props) => {
)}
*/}
-
-
- {email}
-
-
+ {emailAccountsColumnIsEnabled ? (
+
+
+ {email}
+
+
+ ) : (
+
+ )}
);
};
export default withTranslation(["People", "Common", "Settings"])(
- withContent(PeopleTableRow)
+ withContent(PeopleTableRow),
);
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js
index f63df259ca..aaff8b9e41 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js
@@ -422,6 +422,7 @@ class FilesTableHeader extends React.Component {
tagRef,
setHideColumns,
isFrame,
+ showSettings,
} = this.props;
const {
@@ -452,7 +453,7 @@ class FilesTableHeader extends React.Component {
tagRef={tagRef}
setHideColumns={setHideColumns}
settingsTitle={t("Files:TableSettingsTitle")}
- showSettings={!isFrame}
+ showSettings={isFrame ? showSettings : true}
/>
);
}
@@ -573,6 +574,7 @@ export default inject(
isFrame,
frameTableColumns: frameConfig?.viewTableColumns,
+ showSettings: frameConfig?.showSettings,
};
}
)(
diff --git a/packages/client/src/pages/Home/Section/Header/index.js b/packages/client/src/pages/Home/Section/Header/index.js
index ff69498710..f612165dc1 100644
--- a/packages/client/src/pages/Home/Section/Header/index.js
+++ b/packages/client/src/pages/Home/Section/Header/index.js
@@ -247,6 +247,8 @@ const SectionHeaderContent = (props) => {
moveToPublicRoom,
currentDeviceType,
isFrame,
+ showTitle,
+ hideInfoPanel,
onClickArchive,
setLeaveRoomDialogVisible,
inRoom,
@@ -1126,7 +1128,7 @@ const SectionHeaderContent = (props) => {
onPlusClick={onCreateRoom}
isEmptyPage={isEmptyPage}
isRoom={isCurrentRoom || isAccountsPage}
- hideInfoPanel={isSettingsPage || isPublicRoom}
+ hideInfoPanel={hideInfoPanel || isSettingsPage || isPublicRoom}
withLogo={isPublicRoom && logo}
burgerLogo={isPublicRoom && burgerLogo}
isPublicRoom={isPublicRoom}
@@ -1136,6 +1138,7 @@ const SectionHeaderContent = (props) => {
showRootFolderTitle={insideTheRoom}
currentDeviceType={currentDeviceType}
isFrame={isFrame}
+ showTitle={isFrame ? showTitle : true}
navigationButtonLabel={navigationButtonLabel}
onNavigationButtonClick={onNavigationButtonClick}
tariffBar={}
@@ -1271,6 +1274,7 @@ export default inject(
enablePlugins,
theme,
whiteLabelLogoUrls,
+ frameConfig,
isFrame,
currentDeviceType,
} = settingsStore;
@@ -1324,9 +1328,10 @@ export default inject(
folderPath = navigationPath.filter((item) => !item.isRootRoom);
}
- const isRoot = isFrame
- ? pathParts?.length === 1 || pathParts?.length === 2
- : pathParts?.length === 1;
+ const isRoot =
+ isFrame && frameConfig?.id
+ ? pathParts?.length === 1 || pathParts?.length === 2
+ : pathParts?.length === 1;
const haveLinksRight =
access === ShareAccessRights.RoomManager ||
@@ -1456,6 +1461,8 @@ export default inject(
theme,
whiteLabelLogoUrls,
isFrame,
+ showTitle: frameConfig?.showTitle,
+ hideInfoPanel: isFrame && !frameConfig?.infoPanelVisible,
currentDeviceType,
setLeaveRoomDialogVisible,
inRoom,
diff --git a/packages/client/src/pages/Home/index.js b/packages/client/src/pages/Home/index.js
index 8ddd252aee..3481bdb3ed 100644
--- a/packages/client/src/pages/Home/index.js
+++ b/packages/client/src/pages/Home/index.js
@@ -293,11 +293,7 @@ const PureHome = (props) => {
{(!isErrorRoomNotAvailable || isAccountsPage || isSettingsPage) && (
- {isFrame ? (
- showTitle &&
- ) : (
-
- )}
+
)}
diff --git a/packages/client/src/pages/PortalSettings/Layout/Article/Body/index.js b/packages/client/src/pages/PortalSettings/Layout/Article/Body/index.js
index ca447c5578..d525138ea0 100644
--- a/packages/client/src/pages/PortalSettings/Layout/Article/Body/index.js
+++ b/packages/client/src/pages/PortalSettings/Layout/Article/Body/index.js
@@ -320,6 +320,6 @@ export default inject(
}
)(
withLoading(
- withTranslation(["Settings", "Common"])(observer(ArticleBodyContent))
+ withTranslation(["Settings", "Common", "JavascriptSdk"])(observer(ArticleBodyContent))
)
);
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Branding/additionalResources.js b/packages/client/src/pages/PortalSettings/categories/common/Branding/additionalResources.js
index 9d0a35ad66..5a47fe3107 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Branding/additionalResources.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Branding/additionalResources.js
@@ -283,7 +283,7 @@ const AdditionalResources = (props) => {
);
};
-export default inject(({ filesSettingsStore, common, currentQuotaStore }) => {
+export default inject(({ settingsStore, common, currentQuotaStore }) => {
const { setIsLoadedAdditionalResources, isLoadedAdditionalResources } =
common;
@@ -292,7 +292,7 @@ export default inject(({ filesSettingsStore, common, currentQuotaStore }) => {
additionalResourcesData,
additionalResourcesIsDefault,
- } = filesSettingsStore;
+ } = settingsStore;
const { isBrandingAndCustomizationAvailable } = currentQuotaStore;
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js b/packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js
index e8e91b10d4..20fc4cec7c 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js
@@ -66,6 +66,14 @@ const CompanyInfoSettings = (props) => {
const navigate = useNavigate();
const location = useLocation();
+ const defaultCompanySettingsData = {
+ address: companyInfoSettingsData.address,
+ companyName: companyInfoSettingsData.companyName,
+ email: companyInfoSettingsData.email,
+ phone: companyInfoSettingsData.phone,
+ site: companyInfoSettingsData.site,
+ };
+
const defaultCompanySettingsError = {
hasErrorAddress: false,
hasErrorCompanyName: false,
@@ -74,9 +82,11 @@ const CompanyInfoSettings = (props) => {
hasErrorSite: false,
};
- const [companySettings, setCompanySettings] = useState({});
+ const [companySettings, setCompanySettings] = useState(
+ defaultCompanySettingsData,
+ );
const [companySettingsError, setCompanySettingsError] = useState(
- defaultCompanySettingsError
+ defaultCompanySettingsError,
);
const [showReminder, setShowReminder] = useState(false);
const [isLoading, setIsLoading] = useState(false);
@@ -114,18 +124,11 @@ const CompanyInfoSettings = (props) => {
setIsLoadedCompanyInfoSettingsData(true);
}, [companyInfoSettingsData, tReady]);
- const getSettings = () => {
+ const getSettings = async () => {
+ await getCompanyInfoSettings();
const companySettings = getFromSessionStorage("companySettings");
- const defaultData = {
- address: companyInfoSettingsData?.address,
- companyName: companyInfoSettingsData?.companyName,
- email: companyInfoSettingsData?.email,
- phone: companyInfoSettingsData?.phone,
- site: companyInfoSettingsData?.site,
- };
-
- saveToSessionStorage("defaultCompanySettings", defaultData);
+ saveToSessionStorage("defaultCompanySettings", defaultCompanySettingsData);
if (companySettings) {
setCompanySettings({
@@ -136,7 +139,7 @@ const CompanyInfoSettings = (props) => {
site: companySettings?.site,
});
} else {
- setCompanySettings(defaultData);
+ setCompanySettings(defaultCompanySettingsData);
}
};
@@ -146,7 +149,7 @@ const CompanyInfoSettings = (props) => {
useEffect(() => {
const defaultCompanySettings = getFromSessionStorage(
- "defaultCompanySettings"
+ "defaultCompanySettings",
);
const newSettings = {
@@ -182,7 +185,7 @@ const CompanyInfoSettings = (props) => {
const validateEmpty = (value, type) => {
const hasError = value.trim() === "";
- const phoneRegex = /^[\d\(\)\-+]+$/;
+ const phoneRegex = /^[\d\(\)\-\s+]+$/;
const hasErrorPhone = !phoneRegex.test(value);
if (type === "companyName") {
@@ -318,6 +321,13 @@ const CompanyInfoSettings = (props) => {
setShowModal(false);
};
+ const isDisabled =
+ hasErrorAddress ||
+ hasErrorCompanyName ||
+ hasErrorEmail ||
+ hasErrorPhone ||
+ hasErrorSite;
+
if (!isLoadedCompanyInfoSettingsData) return ;
return (
@@ -327,7 +337,7 @@ const CompanyInfoSettings = (props) => {
onClose={onCloseModal}
buildVersionInfo={buildVersionInfo}
personal={personal}
- previewData={companySettings}
+ previewData={defaultCompanySettingsData}
/>
@@ -444,6 +454,7 @@ const CompanyInfoSettings = (props) => {
cancelButtonLabel={t("Common:Restore")}
reminderText={t("YouHaveUnsavedChanges")}
displaySettings={true}
+ saveButtonDisabled={isDisabled}
hasScroll={true}
hideBorder={true}
showReminder={(isSettingPaid && showReminder) || isLoading}
@@ -488,6 +499,6 @@ export default inject(({ settingsStore, common, currentQuotaStore }) => {
};
})(
withLoading(
- withTranslation(["Settings", "Common"])(observer(CompanyInfoSettings))
- )
+ withTranslation(["Settings", "Common"])(observer(CompanyInfoSettings)),
+ ),
);
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js b/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
index 2a3c5f72ab..7a63f96a66 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
@@ -148,7 +148,7 @@ const WhiteLabel = (props) => {
const onRestoreDefault = async () => {
try {
- await restoreWhiteLabelSettings(true);
+ await restoreWhiteLabelSettings();
await onResetCompanyName();
toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
} catch (error) {
diff --git a/packages/client/src/pages/PortalSettings/categories/common/branding.js b/packages/client/src/pages/PortalSettings/categories/common/branding.js
index b593d32fb3..dddffd788c 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/branding.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/branding.js
@@ -16,7 +16,7 @@ import MobileView from "./Branding/MobileView";
import { UnavailableStyles } from "../../utils/commonSettingsStyles";
import { resetSessionStorage } from "../../utils";
-import { useIsMobileView } from "../../utils/useIsMobileView";
+import { DeviceType } from "@docspace/shared/enums";
const StyledComponent = styled.div`
max-width: 700px;
@@ -60,8 +60,9 @@ const Branding = ({
isLoadedCompanyInfoSettingsData,
isSettingPaid,
standalone,
+ currentDeviceType
}) => {
- const isMobileView = useIsMobileView();
+ const isMobileView = currentDeviceType === DeviceType.mobile;
useEffect(() => {
setDocumentTitle(t("Branding"));
@@ -104,11 +105,12 @@ const Branding = ({
export default inject(({ settingsStore, currentQuotaStore, common }) => {
const { isBrandingAndCustomizationAvailable } = currentQuotaStore;
const { isLoadedCompanyInfoSettingsData } = common;
- const { standalone } = settingsStore;
+ const { standalone, currentDeviceType } = settingsStore;
return {
isLoadedCompanyInfoSettingsData,
isSettingPaid: isBrandingAndCustomizationAvailable,
standalone,
+ currentDeviceType
};
})(withLoading(withTranslation(["Settings", "Common"])(observer(Branding))));
diff --git a/packages/client/src/pages/PortalSettings/categories/common/index.js b/packages/client/src/pages/PortalSettings/categories/common/index.js
index 029231ed0b..27021883a4 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/index.js
@@ -23,6 +23,7 @@ const SubmenuCommon = (props) => {
isLoadedSubmenu,
getWhiteLabelLogoUrls,
currentDeviceType,
+ isMobileView,
} = props;
const navigate = useNavigate();
@@ -41,7 +42,10 @@ const SubmenuCommon = (props) => {
}, [tReady, isLoadedSubmenu]);
const load = async () => {
- await loadBaseInfo();
+ const currentTab = getCurrentTab();
+ await loadBaseInfo(
+ !isMobileView ? (currentTab === 0 ? "general" : "branding") : ""
+ );
};
const data = [
@@ -111,13 +115,14 @@ export default inject(({ settingsStore, common }) => {
const isMobileView = currentDeviceType === DeviceType.mobile;
return {
- loadBaseInfo: async () => {
- await initSettings(!isMobileView ? "general" : "");
+ loadBaseInfo: async (page) => {
+ await initSettings(page);
},
isLoaded,
setIsLoadedSubmenu,
isLoadedSubmenu,
getWhiteLabelLogoUrls,
currentDeviceType,
+ isMobileView,
};
})(withLoading(withTranslation("Settings")(observer(SubmenuCommon))));
diff --git a/packages/client/src/pages/PortalSettings/categories/delete-data/portalDeletion.js b/packages/client/src/pages/PortalSettings/categories/delete-data/portalDeletion.js
index aa00ac3813..b4ca18674a 100644
--- a/packages/client/src/pages/PortalSettings/categories/delete-data/portalDeletion.js
+++ b/packages/client/src/pages/PortalSettings/categories/delete-data/portalDeletion.js
@@ -49,7 +49,7 @@ const PortalDeletion = (props) => {
try {
await sendDeletePortalEmail();
toastr.success(
- t("PortalDeletionEmailSended", { ownerEmail: owner.email })
+ t("PortalDeletionEmailSended", { ownerEmail: owner.email }),
);
} catch (error) {
toastr.error(error);
@@ -62,7 +62,7 @@ const PortalDeletion = (props) => {
};
const notActivatedEmail =
- owner.activationStatus === EmployeeActivationStatus.NotActivated;
+ owner?.activationStatus === EmployeeActivationStatus.NotActivated;
return (
@@ -115,5 +115,5 @@ export default inject(({ settingsStore, userStore }) => {
sendActivationLink,
};
})(
- withTranslation(["Settings", "MainBar", "People", "Common"])(PortalDeletion)
+ withTranslation(["Settings", "MainBar", "People", "Common"])(PortalDeletion),
);
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js
index dde02dcda1..3fd717897d 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js
@@ -1,29 +1,32 @@
-import { useState, useEffect } from "react";
+import React from "react";
import { withTranslation } from "react-i18next";
-import debounce from "lodash.debounce";
import styled, { css } from "styled-components";
-import { Box } from "@docspace/shared/components/box";
-import { TextInput } from "@docspace/shared/components/text-input";
-import { Textarea } from "@docspace/shared/components/textarea";
-import { Label } from "@docspace/shared/components/label";
-import { Text } from "@docspace/shared/components/text";
-import { Checkbox } from "@docspace/shared/components/checkbox";
-import { ComboBox } from "@docspace/shared/components/combobox";
-import { TabsContainer } from "@docspace/shared/components/tabs-container";
-import FilesSelectorInput from "SRC_DIR/components/FilesSelectorInput";
-import { mobile, tablet } from "@docspace/shared/utils";
-import { objectToGetParams, loadScript } from "@docspace/shared/utils/common";
+import { useNavigate } from "react-router-dom";
+import { RoomsType } from "@docspace/shared/constants";
import { inject, observer } from "mobx-react";
+
+import { mobile, tablet } from "@docspace/shared/utils/device";
import { isMobile } from "react-device-detect";
-import { HelpButton } from "@docspace/shared/components/help-button";
+import { Box } from "@docspace/shared/components/box";
import { Link } from "@docspace/shared/components/link";
+import { Text } from "@docspace/shared/components/text";
-import GetCodeDialog from "./sub-components/GetCodeDialog";
import CSP from "./sub-components/csp";
-import { Button } from "@docspace/shared/components/button";
+import PresetTile from "./sub-components/PresetTile";
-const showPreviewThreshold = 720;
+import SimpleRoomImg from "PUBLIC_DIR/images/sdk-presets_simple-room.react.svg?url";
+import ManagerImg from "PUBLIC_DIR/images/sdk-presets_manager.react.svg?url";
+import RoomSelectorImg from "PUBLIC_DIR/images/sdk-presets_room-selector.react.svg?url";
+import FileSelectorImg from "PUBLIC_DIR/images/sdk-presets_file-selector.react.svg?url";
+import EditorImg from "PUBLIC_DIR/images/sdk-presets_editor.react.svg?url";
+import ViewerImg from "PUBLIC_DIR/images/sdk-presets_viewer.react.svg?url";
+import SimpleRoomImgDark from "PUBLIC_DIR/images/sdk-presets_simple-room_dark.react.svg?url";
+import ManagerImgDark from "PUBLIC_DIR/images/sdk-presets_manager_dark.react.svg?url";
+import RoomSelectorImgDark from "PUBLIC_DIR/images/sdk-presets_room-selector_dark.react.svg?url";
+import FileSelectorImgDark from "PUBLIC_DIR/images/sdk-presets_file-selector_dark.react.svg?url";
+import EditorImgDark from "PUBLIC_DIR/images/sdk-presets_editor_dark.react.svg?url";
+import ViewerImgDark from "PUBLIC_DIR/images/sdk-presets_viewer_dark.react.svg?url";
const SDKContainer = styled(Box)`
@media ${tablet} {
@@ -36,35 +39,9 @@ const SDKContainer = styled(Box)`
`}
`;
-const Controls = styled(Box)`
- max-width: 350px;
- min-width: 350px;
- width: 100%;
- display: flex;
- flex-direction: column;
- gap: 16px;
-
- @media ${tablet} {
- min-width: 0;
- }
-
- ${isMobile &&
- css`
- min-width: 0;
- `}
-
- .label {
- min-width: fit-content;
- }
-
- .checkbox {
- max-width: fit-content;
- }
-`;
-
const CategoryHeader = styled.div`
margin-top: 40px;
- margin-bottom: 24px;
+ margin-bottom: 16px;
font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
font-style: normal;
font-weight: 700;
@@ -80,448 +57,81 @@ const CategoryHeader = styled.div`
`}
`;
-const CategorySubHeader = styled.div`
- margin-top: 8px;
- margin-bottom: 8px;
- font-size: ${(props) => props.theme.getCorrectFontSize("15px")};
- font-style: normal;
- font-weight: 600;
- line-height: 16px;
-
- @media ${tablet} {
- &:not(&.copy-window-code) {
- margin-bottom: 0;
- }
- }
-
- ${isMobile &&
- css`
- &:not(&.copy-window-code) {
- margin-bottom: 0;
- }
- `}
-
- @media ${mobile} {
- &:first-of-type {
- margin-top: 0;
- }
- }
-`;
-
const CategoryDescription = styled(Box)`
- margin-top: 5px;
+ margin-top: 2px;
max-width: 700px;
.sdk-description {
+ display: inline;
line-height: 20px;
color: ${(props) => props.theme.client.settings.common.descriptionColor};
}
`;
-const ControlsGroup = styled(Box)`
- display: flex;
- flex-direction: column;
- gap: 8px;
-
- @media ${tablet} {
- gap: 4px;
- }
-
- ${isMobile &&
- css`
- gap: 4px;
- `}
-`;
-
-const LabelGroup = styled(Box)`
- display: inline-flex;
- align-items: center;
- gap: 4px;
-`;
-
-const InterfaceElements = styled(Box)`
- display: flex;
- flex-direction: column;
+const PresetsContainer = styled.div`
+ display: grid;
+ grid-template-columns: repeat(2, minmax(min(200px, 100%), 1fr));
gap: 16px;
- margin-top: 24px;
-`;
-const Frame = styled(Box)`
+ max-width: fit-content;
+
margin-top: 16px;
- position: relative;
-
- border-radius: 6px;
- border: 1px solid #d0d5da;
-
- width: ${(props) => (props.width ? props.width : "100%")};
- height: calc(${(props) => (props.height ? props.height : "400px")} + 2px);
-
- @media ${tablet} {
- margin-top: 4px;
- }
-
- ${(props) =>
- props.targetId &&
- `
- #${props.targetId} {
- border-radius: 6px;
- }
- `}
-
- ${isMobile &&
- css`
- margin-top: 4px;
- `}
-`;
-
-const Container = styled(Box)`
- width: 100%;
- display: flex;
- flex-direction: row-reverse;
- justify-content: flex-end;
- gap: 16px;
-
- @media ${tablet} {
- flex-direction: column;
- }
-
- ${isMobile &&
- css`
- flex-direction: column;
- `}
-`;
-
-const RowContainer = styled(Box)`
- flex-direction: row;
- display: flex;
- gap: 8px;
-
- ${(props) =>
- props.combo &&
- `
- height: 32px;
- align-items: center;
- `}
-`;
-
-const ColumnContainer = styled(Box)`
- flex-direction: column;
- display: flex;
- gap: 8px;
-`;
-
-const Preview = styled(Box)`
- width: 100%;
- margin-top: 24px;
- min-width: 660px;
- flex-direction: row;
-
- @media ${tablet} {
- margin-top: 0;
- min-width: 0;
- }
- ${isMobile &&
- css`
- margin-top: 0;
- min-width: 0;
- `}
-`;
-
-const GetCodeButtonWrapper = styled.div`
- padding-block: 30px;
- position: sticky;
- bottom: 0;
- margin-top: 32px;
- background-color: ${({ theme }) => theme.backgroundColor};
@media ${mobile} {
- position: fixed;
- padding-inline: 16px;
- inset-inline: 0;
- }
-`;
-
-const FilesSelectorInputWrapper = styled.div`
- & > div {
- margin: 0;
+ display: flex;
+ flex-direction: column;
}
`;
const PortalIntegration = (props) => {
- const {
- t,
- setDocumentTitle,
- currentColorScheme,
- sdkLink,
- fetchExternalLinks,
- } = props;
+ const { t, setDocumentTitle, currentColorScheme, sdkLink, theme } = props;
setDocumentTitle(t("JavascriptSdk"));
- const scriptUrl = `${window.location.origin}/static/scripts/api.js`;
+ const navigate = useNavigate();
- const dataSortBy = [
- { key: "DateAndTime", label: t("Common:LastModifiedDate"), default: true },
- { key: "AZ", label: t("Common:Title") },
- { key: "Type", label: t("Common:Type") },
- { key: "Size", label: t("Common:Size") },
- { key: "DateAndTimeCreation", label: t("Files:ByCreation") },
- { key: "Author", label: t("Files:ByAuthor") },
- ];
+ const navigateToSimpleRoom = () => navigate("room");
+ const navigateToManager = () => navigate("manager");
+ const navigateToRoomSelector = () => navigate("room-selector");
+ const navigateToFileSelector = () => navigate("file-selector");
+ const navigateToEditor = () => navigate("editor");
+ const navigateToViewer = () => navigate("viewer");
- const dataSortOrder = [
- { key: "descending", label: t("Descending"), default: true },
- { key: "ascending", label: t("Ascending") },
- ];
-
- const dataDimensions = [
- { key: "percent", label: "%", default: true },
- { key: "pixel", label: "px" },
- ];
-
- const [sortBy, setSortBy] = useState(dataSortBy[0]);
- const [sortOrder, setSortOrder] = useState(dataSortOrder[0]);
- const [widthDimension, setWidthDimension] = useState(dataDimensions[0]);
- const [heightDimension, setHeightDimension] = useState(dataDimensions[1]);
- const [width, setWidth] = useState("100");
- const [height, setHeight] = useState("600");
- const [withSubfolders, setWithSubfolders] = useState(false);
- const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false);
- const [showPreview, setShowPreview] = useState(
- window.innerWidth > showPreviewThreshold
- );
- const [sharedLinks, setSharedLinks] = useState(null);
-
- const [config, setConfig] = useState({
- width: `${width}${widthDimension.label}`,
- height: `${height}${heightDimension.label}`,
- frameId: "ds-frame",
- showHeader: true,
- showTitle: true,
- showMenu: true,
- showFilter: true,
- init: true,
- });
-
- const params = objectToGetParams(config);
-
- const frameId = config.frameId || "ds-frame";
-
- const destroyFrame = () => {
- window.DocSpace?.SDK?.frames[frameId]?.destroyFrame();
- };
-
- const loadFrame = debounce(() => {
- const script = document.getElementById("integration");
-
- if (script) {
- script.remove();
- }
-
- const params = objectToGetParams(config);
-
- loadScript(`${scriptUrl}${params}`, "integration", () =>
- window.DocSpace.SDK.initFrame(config)
- );
- }, 500);
-
- useEffect(() => {
- loadFrame();
- return () => destroyFrame();
- });
-
- const onChangeTab = () => {
- loadFrame();
- };
-
- const onChangeWidth = (e) => {
- setConfig((config) => {
- return { ...config, width: `${e.target.value}${widthDimension.label}` };
- });
-
- setWidth(e.target.value);
- };
-
- const onChangeHeight = (e) => {
- setConfig((config) => {
- return { ...config, height: `${e.target.value}${heightDimension.label}` };
- });
-
- setHeight(e.target.value);
- };
-
- const onChangeFolderId = async (id, publicInPath) => {
- let newConfig = { id, requestToken: null, rootPath: "/rooms/shared/" };
-
- if (!!publicInPath) {
- const links = await fetchExternalLinks(publicInPath.id);
-
- if (links.length > 1) {
- const linksOptions = links.map((link) => {
- const { id, title, requestToken } = link.sharedTo;
-
- return {
- key: id,
- label: title,
- requestToken: requestToken,
- };
- });
-
- setSharedLinks(linksOptions);
- }
-
- newConfig.requestToken = links[0].sharedTo?.requestToken;
- newConfig.rootPath = "/rooms/share";
- } else {
- setSharedLinks(null);
- }
-
- setConfig((config) => {
- return { ...config, ...newConfig };
- });
- };
-
- const onChangeSharedLink = (link) => {
- setConfig((config) => {
- return { ...config, requestToken: link.requestToken };
- });
- };
-
- const onChangeFrameId = (e) => {
- setConfig((config) => {
- return { ...config, frameId: e.target.value };
- });
- };
-
- const onChangeWithSubfolders = (e) => {
- setConfig((config) => {
- return { ...config, withSubfolders: !withSubfolders };
- });
-
- setWithSubfolders(!withSubfolders);
- };
-
- const onChangeSortBy = (item) => {
- setConfig((config) => {
- return { ...config, sortby: item.key };
- });
-
- setSortBy(item);
- };
-
- const onChangeSortOrder = (item) => {
- setConfig((config) => {
- return { ...config, sortorder: item.key };
- });
-
- setSortOrder(item);
- };
-
- const onChangeWidthDimension = (item) => {
- setConfig((config) => {
- return { ...config, width: `${width}${item.label}` };
- });
-
- setWidthDimension(item);
- };
-
- const onChangeHeightDimension = (item) => {
- setConfig((config) => {
- return { ...config, height: `${height}${item.label}` };
- });
-
- setHeightDimension(item);
- };
-
- const onChangeShowHeader = (e) => {
- setConfig((config) => {
- return { ...config, showHeader: !config.showHeader };
- });
- };
-
- const onChangeShowTitle = () => {
- setConfig((config) => {
- return { ...config, showTitle: !config.showTitle };
- });
- };
-
- const onChangeShowMenu = (e) => {
- setConfig((config) => {
- return { ...config, showMenu: !config.showMenu };
- });
- };
-
- const onChangeShowFilter = (e) => {
- setConfig((config) => {
- return { ...config, showFilter: !config.showFilter };
- });
- };
-
- const onChangeCount = (e) => {
- setConfig((config) => {
- return { ...config, count: e.target.value };
- });
- };
-
- const onChangePage = (e) => {
- setConfig((config) => {
- return { ...config, page: e.target.value };
- });
- };
-
- const onChangeSearch = (e) => {
- setConfig((config) => {
- return { ...config, search: e.target.value };
- });
- };
-
- const openGetCodeModal = () => setIsGetCodeDialogOpened(true);
-
- const closeGetCodeModal = () => setIsGetCodeDialogOpened(false);
-
- const onResize = () => {
- const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold;
- if (isEnoughWidthForPreview !== showPreview)
- setShowPreview(isEnoughWidthForPreview);
- };
-
- useEffect(() => {
- window.addEventListener("resize", onResize);
- return () => {
- window.removeEventListener("resize", onResize);
- };
- }, [showPreview]);
-
- const codeBlock = `Fallback text
\n`;
-
- const preview = (
-
-
-
- );
-
- const code = (
- <>
-
- {t("CopyWindowCode")}
-
-
-
- );
-
- const dataTabs = [
+ const presetsData = [
{
- key: "preview",
- title: t("Common:Preview"),
- content: preview,
+ title: t("Common:Room"),
+ description: t("SimpleRoomDescription"),
+ image: theme.isBase ? SimpleRoomImg : SimpleRoomImgDark,
+ handleOnClick: navigateToSimpleRoom,
},
{
- key: "code",
- title: t("Code"),
- content: code,
+ title: t("Manager"),
+ description: t("ManagerDescription"),
+ image: theme.isBase ? ManagerImg : ManagerImgDark,
+ handleOnClick: navigateToManager,
+ },
+ {
+ title: t("Editor"),
+ description: t("EditorDescription"),
+ image: theme.isBase ? EditorImg : EditorImgDark,
+ handleOnClick: navigateToEditor,
+ },
+ {
+ title: t("Viewer"),
+ description: t("ViewerDescription"),
+ image: theme.isBase ? ViewerImg : ViewerImgDark,
+ handleOnClick: navigateToViewer,
+ },
+ {
+ title: t("RoomSelector"),
+ description: t("RoomSelectorDescription"),
+ image: theme.isBase ? RoomSelectorImg : RoomSelectorImgDark,
+ handleOnClick: navigateToRoomSelector,
+ },
+ {
+ title: t("FileSelector"),
+ description: t("FileSelectorDescription"),
+ image: theme.isBase ? FileSelectorImg : FileSelectorImgDark,
+ handleOnClick: navigateToFileSelector,
},
];
@@ -531,7 +141,7 @@ const PortalIntegration = (props) => {
{t("SDKDescription")}
window.open(sdkLink, "_blank")}
>
@@ -540,233 +150,21 @@ const PortalIntegration = (props) => {
{t("CreateSampleHeader")}
-
- {showPreview && (
-
-
-
- )}
-
- {t("CustomizingDisplay")}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {`(${t("MobileOnly")})`}
-
-
- {t("DataDisplay")}
-
-
-
- {t("RoomOrFolderDescription")}
- }
- />
-
-
-
-
-
- {sharedLinks && (
-
-
-
-
- {t("CreateEditRoomDialog:PublicRoomDescription")}
-
- }
- />
-
-
-
- )}
- {t("AdvancedDisplay")}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {t("ItemsCountDescription")}
- }
- />
-
-
-
-
-
-
-
-
-
-
- {!showPreview && (
- <>
-
-
-
-
-
+ {t("InitializeSDK")}
+
+
+ {presetsData.map((data) => (
+
-
- )}
+ ))}
+
);
};
@@ -774,14 +172,12 @@ const PortalIntegration = (props) => {
export default inject(({ settingsStore, authStore, publicRoomStore }) => {
const { setDocumentTitle } = authStore;
const { theme, currentColorScheme, sdkLink } = settingsStore;
- const { fetchExternalLinks } = publicRoomStore;
return {
theme,
setDocumentTitle,
currentColorScheme,
sdkLink,
- fetchExternalLinks,
};
})(
withTranslation([
@@ -791,5 +187,5 @@ export default inject(({ settingsStore, authStore, publicRoomStore }) => {
"CreateEditRoomDialog",
"SharingPanel",
"Common",
- ])(observer(PortalIntegration))
+ ])(observer(PortalIntegration)),
);
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js
new file mode 100644
index 0000000000..61247e131b
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js
@@ -0,0 +1,350 @@
+import { useState, useEffect } from "react";
+import { withTranslation } from "react-i18next";
+import debounce from "lodash.debounce";
+import { Box } from "@docspace/shared/components/box";
+import { TextInput } from "@docspace/shared/components/text-input";
+import { Textarea } from "@docspace/shared/components/textarea";
+import { Label } from "@docspace/shared/components/label";
+import { Text } from "@docspace/shared/components/text";
+import { Checkbox } from "@docspace/shared/components/checkbox";
+import { ComboBox } from "@docspace/shared/components/combobox";
+import { TabsContainer } from "@docspace/shared/components/tabs-container";
+import FilesSelectorInput from "SRC_DIR/components/FilesSelectorInput";
+import { objectToGetParams, loadScript } from "@docspace/shared/utils/common";
+import { inject, observer } from "mobx-react";
+import { FilesSelectorFilterTypes } from "@docspace/shared/enums";
+
+import { isTablet, isMobile } from "@docspace/shared/utils/device";
+
+import EmptyIframeContainer from "../sub-components/EmptyIframeContainer";
+
+import GetCodeDialog from "../sub-components/GetCodeDialog";
+import { Button } from "@docspace/shared/components/button";
+
+const showPreviewThreshold = 720;
+
+import {
+ SDKContainer,
+ Controls,
+ CategoryHeader,
+ CategorySubHeader,
+ CategoryDescription,
+ ControlsGroup,
+ LabelGroup,
+ ControlsSection,
+ Frame,
+ Container,
+ RowContainer,
+ Preview,
+ GetCodeButtonWrapper,
+ FilesSelectorInputWrapper,
+ CodeWrapper,
+} from "./StyledPresets";
+
+const Editor = (props) => {
+ const { t, setDocumentTitle } = props;
+
+ setDocumentTitle(t("JavascriptSdk"));
+
+ const scriptUrl = `${window.location.origin}/static/scripts/api.js`;
+
+ const dataDimensions = [
+ { key: "percent", label: "%", default: true },
+ { key: "pixel", label: "px" },
+ ];
+
+ const [widthDimension, setWidthDimension] = useState(dataDimensions[0]);
+ const [heightDimension, setHeightDimension] = useState(dataDimensions[0]);
+ const [width, setWidth] = useState("100");
+ const [height, setHeight] = useState("100");
+ const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false);
+ const [showPreview, setShowPreview] = useState(window.innerWidth > showPreviewThreshold);
+
+ const [config, setConfig] = useState({
+ mode: "editor",
+ width: `${width}${widthDimension.label}`,
+ height: `${height}${heightDimension.label}`,
+ frameId: "ds-frame",
+ init: false,
+ });
+
+ const params = objectToGetParams(config);
+
+ const frameId = config.frameId || "ds-frame";
+
+ const destroyFrame = () => {
+ window.DocSpace?.SDK?.frames[frameId]?.destroyFrame();
+ };
+
+ const loadFrame = debounce(() => {
+ const script = document.getElementById("integration");
+
+ if (script) {
+ script.remove();
+ }
+
+ const params = objectToGetParams(config);
+
+ loadScript(`${scriptUrl}${params}`, "integration", () => window.DocSpace.SDK.initFrame(config));
+ }, 500);
+
+ useEffect(() => {
+ loadFrame();
+ return () => destroyFrame();
+ });
+
+ const onChangeTab = () => {
+ loadFrame();
+ };
+
+ const onChangeWidth = (e) => {
+ setConfig((config) => {
+ return { ...config, width: `${e.target.value}${widthDimension.label}` };
+ });
+
+ setWidth(e.target.value);
+ };
+
+ const onChangeHeight = (e) => {
+ setConfig((config) => {
+ return { ...config, height: `${e.target.value}${heightDimension.label}` };
+ });
+
+ setHeight(e.target.value);
+ };
+
+ const onChangeFileId = (file) => {
+ setConfig((config) => {
+ return { ...config, id: file.id, init: true };
+ });
+ };
+
+ const onChangeFrameId = (e) => {
+ setConfig((config) => {
+ return { ...config, frameId: e.target.value };
+ });
+ };
+
+ const onChangeWidthDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, width: `${width}${item.label}` };
+ });
+
+ setWidthDimension(item);
+ };
+
+ const onChangeHeightDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, height: `${height}${item.label}` };
+ });
+
+ setHeightDimension(item);
+ };
+
+ const openGetCodeModal = () => setIsGetCodeDialogOpened(true);
+
+ const closeGetCodeModal = () => setIsGetCodeDialogOpened(false);
+
+ const onResize = () => {
+ const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold;
+ if (isEnoughWidthForPreview !== showPreview) setShowPreview(isEnoughWidthForPreview);
+ };
+
+ useEffect(() => {
+ window.addEventListener("resize", onResize);
+ return () => {
+ window.removeEventListener("resize", onResize);
+ };
+ }, [showPreview]);
+
+ const codeBlock = `Fallback text
\n`;
+
+ const preview = (
+
+ {config.id !== undefined ? (
+ <>
+
+
+ ) : (
+
+ )}
+
+ );
+
+ const code = (
+
+ {t("CopyWindowCode")}
+
+
+ );
+
+ const dataTabs = [
+ {
+ key: "preview",
+ title: t("Common:Preview"),
+ content: preview,
+ },
+ {
+ key: "code",
+ title: t("Code"),
+ content: code,
+ },
+ ];
+
+ return (
+
+
+ {t("EditorPresetDescription")}
+
+ {t("CreateSampleHeader")}
+
+ {showPreview && (
+
+
+
+ )}
+
+
+ {t("FileId")}
+
+
+
+
+
+
+
+
+
+
+
+ {t("CustomizingDisplay")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
+
+ {}}
+ isChecked={true}
+ />
+ {}}
+ isChecked={true}
+ />
+
+ {}} isChecked={true} />
+ ({t("InLeftPanel")})
+
+
+ {}} isChecked={true} />
+ ({t("InLeftPanel")})
+
+ */}
+
+
+
+ {!showPreview && (
+ <>
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default inject(({ authStore, settingsStore }) => {
+ const { setDocumentTitle } = authStore;
+ const { theme } = settingsStore;
+
+ return {
+ theme,
+ setDocumentTitle,
+ };
+})(withTranslation(["JavascriptSdk", "Files", "EmbeddingPanel", "Common"])(observer(Editor)));
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js
new file mode 100644
index 0000000000..b6fa8abd70
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js
@@ -0,0 +1,693 @@
+import { useState, useEffect } from "react";
+import { withTranslation } from "react-i18next";
+import debounce from "lodash.debounce";
+import { Box } from "@docspace/shared/components/box";
+import { TextInput } from "@docspace/shared/components/text-input";
+import { Textarea } from "@docspace/shared/components/textarea";
+import { Label } from "@docspace/shared/components/label";
+import { Text } from "@docspace/shared/components/text";
+import { Checkbox } from "@docspace/shared/components/checkbox";
+import { ComboBox } from "@docspace/shared/components/combobox";
+import { TabsContainer } from "@docspace/shared/components/tabs-container";
+import FilesSelectorInput from "SRC_DIR/components/FilesSelectorInput";
+import { RadioButtonGroup } from "@docspace/shared/components/radio-button-group";
+import { SelectedItem } from "@docspace/shared/components/selected-item";
+import { ColorInput } from "@docspace/shared/components/color-input";
+import { objectToGetParams, loadScript } from "@docspace/shared/utils/common";
+import { inject, observer } from "mobx-react";
+
+import { isTablet, isMobile } from "@docspace/shared/utils/device";
+
+import { HelpButton } from "@docspace/shared/components/help-button";
+import { Button } from "@docspace/shared/components/button";
+
+import GetCodeDialog from "../sub-components/GetCodeDialog";
+
+import { FilesSelectorFilterTypes } from "@docspace/shared/enums";
+import { TooltipContent } from "../sub-components/TooltipContent";
+
+import SubtitleUrl from "PUBLIC_DIR/images/sdk-presets_subtitle.react.svg?url";
+import SearchUrl from "PUBLIC_DIR/images/sdk-presets_files-search.react.svg?url";
+
+import { toastr } from "@docspace/shared/components/toast";
+
+const showPreviewThreshold = 720;
+
+import {
+ SDKContainer,
+ Controls,
+ CategoryHeader,
+ CategorySubHeader,
+ CategoryDescription,
+ ControlsGroup,
+ LabelGroup,
+ ControlsSection,
+ Frame,
+ Container,
+ RowContainer,
+ Preview,
+ GetCodeButtonWrapper,
+ FilesSelectorInputWrapper,
+ SelectedItemsContainer,
+ CodeWrapper,
+} from "./StyledPresets";
+
+const FileSelector = (props) => {
+ const { t, setDocumentTitle, fetchExternalLinks } = props;
+
+ setDocumentTitle(t("JavascriptSdk"));
+
+ const scriptUrl = `${window.location.origin}/static/scripts/api.js`;
+
+ const dataDimensions = [
+ { key: "percent", label: "%", default: true },
+ { key: "pixel", label: "px" },
+ ];
+
+ const elementDisplayOptions = [
+ { value: "element", label: t("ElementItself") },
+ {
+ value: "button",
+ label: (
+
+ {t("Common:Button")}
+ {`(${t("ElementCalledAfterClicking")})`}
+
+ ),
+ },
+ ];
+
+ const fileTypeDisplay = [
+ { value: FilesSelectorFilterTypes.ALL, label: t("AllTypes") },
+ { value: "custom-types", label: t("SelectTypes") },
+ ];
+
+ const [fileOptions, setFileOptions] = useState([
+ { key: FilesSelectorFilterTypes.DOCX, label: FilesSelectorFilterTypes.DOCX },
+ { key: FilesSelectorFilterTypes.IMG, label: FilesSelectorFilterTypes.IMG },
+ { key: FilesSelectorFilterTypes.BackupOnly, label: FilesSelectorFilterTypes.BackupOnly },
+ { key: FilesSelectorFilterTypes.DOCXF, label: FilesSelectorFilterTypes.DOCXF },
+ { key: FilesSelectorFilterTypes.XLSX, label: FilesSelectorFilterTypes.XLSX },
+ ]);
+
+ const [widthDimension, setWidthDimension] = useState(dataDimensions[1]);
+ const [heightDimension, setHeightDimension] = useState(dataDimensions[0]);
+ const [width, setWidth] = useState("600");
+ const [height, setHeight] = useState("100");
+ const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false);
+ const [showPreview, setShowPreview] = useState(window.innerWidth > showPreviewThreshold);
+ const [sharedLinks, setSharedLinks] = useState(null);
+ const [selectedElementType, setSelectedElementType] = useState(elementDisplayOptions[1].value);
+ const [typeDisplay, setTypeDisplay] = useState(fileTypeDisplay[0].value);
+ const [selectedType, setSelectedType] = useState(fileOptions[0]);
+ const [selectedFileTypes, setSelectedFileTypes] = useState([
+ { key: "file-type-documents", label: t("Common:Documents") },
+ { key: "file-type-folders", label: t("Translations:Folders") },
+ { key: "file-type-spreadsheets", label: t("Translations:Spreadsheets") },
+ { key: "file-type-archives", label: t("Files:Archives") },
+ { key: "file-type-presentations", label: t("Translations:Presentations") },
+ { key: "file-type-images", label: t("Filse:Images") },
+ { key: "file-type-media", label: t("Files:Media") },
+ { key: "file-type-forms-templates", label: t("Files:FormsTemplates") },
+ { key: "file-type-forms", label: t("Files:Forms") },
+ ]);
+
+ const [config, setConfig] = useState({
+ mode: "file-selector",
+ width: `${width}${widthDimension.label}`,
+ height: `${height}${heightDimension.label}`,
+ frameId: "ds-frame",
+ init: true,
+ showSelectorCancel: true,
+ showSelectorHeader: true,
+ withSearch: true,
+ acceptButtonLabel: t("Common:SelectAction"),
+ cancelButtonLabel: t("Common:CancelButton"),
+ // withBreadCrumbs: true,
+ withSubtitle: true,
+ filterParam: FilesSelectorFilterTypes.ALL,
+ isButtonMode: false,
+ buttonWithLogo: true,
+ events: {
+ onSelectCallback: (items) => {
+ toastr.success(items[0].label);
+ },
+ onCloseCallback: null,
+ onAppReady: null,
+ onAppError: (e) => console.log("onAppError", e),
+ onEditorCloseCallback: null,
+ onAuthSuccess: null,
+ onSignOut: null,
+ },
+ });
+
+ const params = objectToGetParams(config);
+
+ const frameId = config.frameId || "ds-frame";
+
+ const destroyFrame = () => {
+ window.DocSpace?.SDK?.frames[frameId]?.destroyFrame();
+ };
+
+ const loadFrame = debounce(() => {
+ const script = document.getElementById("integration");
+
+ if (script) {
+ script.remove();
+ }
+
+ const params = objectToGetParams(config);
+
+ loadScript(`${scriptUrl}${params}`, "integration", () => window.DocSpace.SDK.initFrame(config));
+ }, 500);
+
+ useEffect(() => {
+ loadFrame();
+ return () => destroyFrame();
+ });
+
+ const toggleButtonMode = (e) => {
+ setSelectedElementType(e.target.value);
+ setConfig((config) => ({ ...config, isButtonMode: e.target.value === "button" }));
+ };
+
+ const onChangeTab = (tab) => {
+ if (tab.key === "preview" && selectedElementType === "button") {
+ setConfig((config) => ({ ...config, isButtonMode: true }));
+ } else if (tab.key === "selector-preview") {
+ setConfig((config) => ({ ...config, isButtonMode: false }));
+ } else if (tab.key === "code") {
+ setConfig((config) => ({ ...config, isButtonMode: selectedElementType === "button" }));
+ }
+ };
+
+ const onChangeWidth = (e) => {
+ setConfig((config) => {
+ return { ...config, width: `${e.target.value}${widthDimension.label}` };
+ });
+
+ setWidth(e.target.value);
+ };
+
+ const onChangeHeight = (e) => {
+ setConfig((config) => {
+ return { ...config, height: `${e.target.value}${heightDimension.label}` };
+ });
+
+ setHeight(e.target.value);
+ };
+
+ const onChangeFolderId = async (id, publicInPath) => {
+ let newConfig = { id, requestToken: null, rootPath: "/rooms/shared/" };
+
+ if (!!publicInPath) {
+ const links = await fetchExternalLinks(publicInPath.id);
+
+ if (links.length > 1) {
+ const linksOptions = links.map((link) => {
+ const { id, title, requestToken } = link.sharedTo;
+
+ return {
+ key: id,
+ label: title,
+ requestToken: requestToken,
+ };
+ });
+
+ setSharedLinks(linksOptions);
+ }
+
+ newConfig.requestToken = links[0].sharedTo?.requestToken;
+ newConfig.rootPath = "/rooms/share";
+ } else {
+ setSharedLinks(null);
+ }
+
+ setConfig((config) => {
+ return { ...config, ...newConfig };
+ });
+ };
+
+ const onChangeSharedLink = (link) => {
+ setConfig((config) => {
+ return { ...config, requestToken: link.requestToken };
+ });
+ };
+
+ const onChangeFrameId = (e) => {
+ setConfig((config) => {
+ return { ...config, frameId: e.target.value };
+ });
+ };
+
+ const changeColumnsOption = (e) => {
+ setTypeDisplay(e.target.value);
+ setConfig((config) => {
+ return {
+ ...config,
+ filterParam:
+ e.target.value === FilesSelectorFilterTypes.ALL
+ ? FilesSelectorFilterTypes.ALL
+ : selectedType,
+ };
+ });
+ };
+
+ const onChangeWidthDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, width: `${width}${item.label}` };
+ });
+
+ setWidthDimension(item);
+ };
+
+ const onChangeHeightDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, height: `${height}${item.label}` };
+ });
+
+ setHeightDimension(item);
+ };
+
+ const openGetCodeModal = () => setIsGetCodeDialogOpened(true);
+
+ const closeGetCodeModal = () => setIsGetCodeDialogOpened(false);
+
+ const onTypeSelect = (option) => {
+ // setFileOptions((prevFileOptions) => prevFileOptions.filter((file) => file.key !== option.key));
+ setSelectedType(option);
+ setConfig((config) => {
+ return { ...config, filterParam: option.key };
+ });
+
+ // if (!selectedFileTypes.find((type) => type.key === option.key)) {
+ // setSelectedFileTypes((prevFileTypes) => [...prevFileTypes, option]);
+ // }
+ };
+
+ const deleteSelectedType = (option) => {
+ setFileOptions((prevFileOptions) => [option, ...prevFileOptions]);
+ const filteredTypes = selectedFileTypes.filter((type) => type.key !== option.key);
+ setSelectedFileTypes(filteredTypes);
+ };
+
+ const toggleWithSearch = () => {
+ setConfig((config) => ({ ...config, withSearch: !config.withSearch }));
+ };
+
+ // const toggleBreadCrumbs = () => {
+ // setConfig((config) => ({ ...config, withBreadCrumbs: !config.withBreadCrumbs }));
+ // };
+
+ const toggleWithSubtitle = () => {
+ setConfig((config) => ({ ...config, withSubtitle: !config.withSubtitle }));
+ };
+
+ const onChangeAcceptLabel = (e) => {
+ setConfig((config) => {
+ return { ...config, acceptButtonLabel: e.target.value };
+ });
+ };
+
+ const onChangeCancelLabel = (e) => {
+ setConfig((config) => {
+ return { ...config, cancelButtonLabel: e.target.value };
+ });
+ };
+
+ const onResize = () => {
+ const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold;
+ if (isEnoughWidthForPreview !== showPreview) setShowPreview(isEnoughWidthForPreview);
+ };
+
+ const setButtonColor = (color) => {
+ setConfig((config) => ({ ...config, buttonColor: color }));
+ };
+
+ useEffect(() => {
+ window.addEventListener("resize", onResize);
+ return () => {
+ window.removeEventListener("resize", onResize);
+ };
+ }, [showPreview]);
+
+ const codeBlock = `Fallback text
\n`;
+
+ const preview = (
+
+
+
+ );
+
+ const code = (
+
+ {t("CopyWindowCode")}
+
+
+ );
+
+ const dataTabs =
+ selectedElementType === "element"
+ ? [
+ {
+ key: "preview",
+ title: t("Common:Preview"),
+ content: preview,
+ },
+ {
+ key: "code",
+ title: t("Code"),
+ content: code,
+ },
+ ]
+ : [
+ {
+ key: "preview",
+ title: t("Common:Preview"),
+ content: preview,
+ },
+ {
+ key: "selector-preview",
+ title: t("SelectorPreview"),
+ content: preview,
+ },
+ {
+ key: "code",
+ title: t("Code"),
+ content: code,
+ },
+ ];
+
+ return (
+
+
+ {t("FileSelectorPresetDescription")}
+
+ {t("CreateSampleHeader")}
+
+ {showPreview && (
+
+
+
+ )}
+
+
+ {t("MainElementParameter")}
+
+ {config.isButtonMode && (
+ <>
+ {t("ButtonCustomization")}
+
+
+
+
+
+
+ {
+ setConfig((config) => ({ ...config, buttonText: e.target.value }));
+ }}
+ placeholder={t("SelectToDocSpace")}
+ value={config.buttonText}
+ tabIndex={3}
+ />
+ {
+ setConfig((config) => ({
+ ...config,
+ buttonWithLogo: !config.buttonWithLogo,
+ }));
+ }}
+ isChecked={config.buttonWithLogo}
+ />
+
+
+ )}
+
+
+
+ {t("CustomizingDisplay")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+
+
+
+
+ {t("DataDisplay")}
+
+
+
+ {t("RoomOrFolderDescription")}}
+ />
+
+
+
+
+
+ {sharedLinks && (
+
+
+
+ {t("CreateEditRoomDialog:PublicRoomDescription")}
+ }
+ />
+
+
+
+ )}
+
+
+
+ {t("AdvancedDisplay")}
+
+
+ {typeDisplay === "custom-types" && (
+ <>
+
+
+ {/*
+ {selectedFileTypes.map((type) => (
+ deleteSelectedType(type)}
+ label={type.label}
+ />
+ ))}
+ */}
+
+ )}
+
+
+
+
+ {!showPreview && (
+ <>
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default inject(({ authStore, settingsStore, publicRoomStore }) => {
+ const { setDocumentTitle } = authStore;
+ const { theme } = settingsStore;
+ const { fetchExternalLinks } = publicRoomStore;
+
+ return {
+ theme,
+ setDocumentTitle,
+ fetchExternalLinks,
+ };
+})(
+ withTranslation([
+ "JavascriptSdk",
+ "Files",
+ "EmbeddingPanel",
+ "Common",
+ "Translations",
+ "SharingPanel",
+ ])(observer(FileSelector)),
+);
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js
new file mode 100644
index 0000000000..7adeafe319
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js
@@ -0,0 +1,1234 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { withTranslation } from "react-i18next";
+import debounce from "lodash.debounce";
+import { Box } from "@docspace/shared/components/box";
+import { TextInput } from "@docspace/shared/components/text-input";
+import { Textarea } from "@docspace/shared/components/textarea";
+import { Label } from "@docspace/shared/components/label";
+import { Text } from "@docspace/shared/components/text";
+import { Checkbox } from "@docspace/shared/components/checkbox";
+import { ComboBox } from "@docspace/shared/components/combobox";
+import { RadioButtonGroup } from "@docspace/shared/components/radio-button-group";
+import { TabsContainer } from "@docspace/shared/components/tabs-container";
+import { SelectedItem } from "@docspace/shared/components/selected-item";
+import FilesSelectorInput from "SRC_DIR/components/FilesSelectorInput";
+import { objectToGetParams, loadScript } from "@docspace/shared/utils/common";
+import { inject, observer } from "mobx-react";
+
+import { isTablet, isMobile } from "@docspace/shared/utils/device";
+
+import { HelpButton } from "@docspace/shared/components/help-button";
+
+import GetCodeDialog from "../sub-components/GetCodeDialog";
+import { Button } from "@docspace/shared/components/button";
+import { TooltipContent } from "../sub-components/TooltipContent";
+
+import LeftMenuUrl from "PUBLIC_DIR/images/sdk-presets_left-menu.react.svg?url";
+import TitleUrl from "PUBLIC_DIR/images/sdk-presets_title.react.svg?url";
+import ColumnsUrl from "PUBLIC_DIR/images/sdk-presets_columns.react.svg?url";
+import ActionButtonUrl from "PUBLIC_DIR/images/sdk-presets_action-button.react.svg?url";
+import SearchUrl from "PUBLIC_DIR/images/sdk-presets_search.react.svg?url";
+import HeaderUrl from "PUBLIC_DIR/images/sdk-presets_header.react.svg?url";
+import LeftMenuDarkUrl from "PUBLIC_DIR/images/sdk-presets_left-menu_dark.react.svg?url";
+import TitleDarkUrl from "PUBLIC_DIR/images/sdk-presets_title_dark.react.svg?url";
+import ColumnsDarkUrl from "PUBLIC_DIR/images/sdk-presets_columns_dark.react.svg?url";
+import ActionButtonDarkUrl from "PUBLIC_DIR/images/sdk-presets_action-button_dark.react.svg?url";
+import SearchDarkUrl from "PUBLIC_DIR/images/sdk-presets_search_dark.react.svg?url";
+import HeaderDarkUrl from "PUBLIC_DIR/images/sdk-presets_header_dark.react.svg?url";
+
+const showPreviewThreshold = 720;
+
+// import { FilterType, RoomsType } from "@docspace/shared/enums";
+
+// import { ToggleButton } from "@docspace/shared/components/toggle-button";
+
+// import styled from "styled-components";
+// import { DropDown } from "@docspace/shared/components/drop-down";
+// import Filter from "@docspace/shared/api/people/filter";
+// import { getUserList, getMembersList } from "@docspace/shared/api/people";
+// import { DropDownItem } from "@docspace/shared/components/drop-down-item";
+// import { Avatar } from "@docspace/shared/components/avatar";
+// import Base from "@docspace/shared/themes/base";
+
+// const UserInputContainer = styled.div`
+// position: relative;
+// display: flex;
+// align-items: center;
+// width: 100%;
+
+// .header_aside-panel {
+// max-width: 100% !important;
+// }
+// `;
+
+// const UserInput = styled.div`
+// width: 100%;
+// width: -moz-available;
+// width: -webkit-fill-available;
+// width: fill-available;
+
+// .input-link {
+// height: 32px;
+
+// > input {
+// height: 30px;
+// }
+// }
+// `;
+
+// const StyledDropDown = styled(DropDown)`
+// ${(props) => props.width && `width: ${props.width}px`};
+// left: 0;
+
+// .list-item {
+// display: flex;
+// align-items: center;
+// gap: 8px;
+// height: 48px;
+
+// .list-item_content {
+// text-overflow: ellipsis;
+// overflow: hidden;
+// }
+// }
+// `;
+
+// const SearchItemText = styled(Text)`
+// line-height: 16px;
+
+// text-overflow: ellipsis;
+// overflow: hidden;
+// font-size: ${(props) =>
+// props.theme.getCorrectFontSize(props.primary ? "14px" : props.info ? "11px" : "12px")};
+// font-weight: ${(props) => (props.primary || props.info ? "600" : "400")};
+
+// color: ${(props) =>
+// (props.primary && !props.disabled) || props.info
+// ? props.theme.text.color
+// : props.theme.text.emailColor};
+// ${(props) => props.info && `margin-left: auto`}
+// `;
+
+// SearchItemText.defaultProps = { theme: Base };
+
+// const minSearchValue = 3;
+
+import {
+ SDKContainer,
+ Controls,
+ CategoryHeader,
+ CategorySubHeader,
+ CategoryDescription,
+ ControlsGroup,
+ LabelGroup,
+ ControlsSection,
+ Frame,
+ Container,
+ RowContainer,
+ ColumnContainer,
+ Preview,
+ GetCodeButtonWrapper,
+ FilesSelectorInputWrapper,
+ SelectedItemsContainer,
+ CheckboxGroup,
+ CodeWrapper,
+} from "./StyledPresets";
+
+const Manager = (props) => {
+ const { t, setDocumentTitle, fetchExternalLinks, theme } = props;
+
+ setDocumentTitle(t("JavascriptSdk"));
+
+ const scriptUrl = `${window.location.origin}/static/scripts/api.js`;
+
+ const dataSortBy = [
+ { key: "DateAndTime", label: t("Common:LastModifiedDate"), default: true },
+ { key: "AZ", label: t("Common:Title") },
+ { key: "Type", label: t("Common:Type") },
+ { key: "Size", label: t("Common:Size") },
+ { key: "DateAndTimeCreation", label: t("Files:ByCreation") },
+ { key: "Author", label: t("Files:ByAuthor") },
+ ];
+
+ const dataSortOrder = [
+ { key: "descending", label: t("Descending"), default: true },
+ { key: "ascending", label: t("Ascending") },
+ ];
+
+ const dataDimensions = [
+ { key: "percent", label: "%", default: true },
+ { key: "pixel", label: "px" },
+ ];
+
+ const columnDisplayOptions = [
+ { value: "default", label: t("DefaultColumnsOption") },
+ { value: "custom", label: t("SetItUp") },
+ ];
+
+ const [columnsOptions, setColumnsOptions] = useState([
+ { key: "Owner", label: t("Common:Owner") },
+ { key: "Activity", label: t("Files:ByLastModified") },
+ ]);
+
+ // const roomTypeOptions = [
+ // {
+ // key: "room-type-collaboration",
+ // label: t("CreateEditRoomDialog:CollaborationRoomTitle"),
+ // roomType: RoomsType.EditingRoom,
+ // },
+ // { key: "room-type-public", label: t("Files:PublicRoom"), roomType: RoomsType.PublicRoom },
+ // {
+ // key: "room-type-custom",
+ // label: t("CreateEditRoomDialog:CustomRoomTitle"),
+ // roomType: RoomsType.CustomRoom,
+ // },
+ // ];
+
+ // const filterOptions = [
+ // { key: "filter-type-all", label: t("Files:AllFiles"), typeKey: FilterType.FilesOnly },
+ // {
+ // key: "filter-type-documents",
+ // label: t("Common:Documents"),
+ // typeKey: FilterType.DocumentsOnly,
+ // },
+ // {
+ // key: "filter-type-folders",
+ // label: t("Translations:Folders"),
+ // typeKey: FilterType.FoldersOnly,
+ // },
+ // {
+ // key: "filter-type-spreadsheets",
+ // label: t("Translations:Spreadsheets"),
+ // typeKey: FilterType.SpreadsheetsOnly,
+ // },
+ // { key: "filter-type-archives", label: t("Files:Archives"), typeKey: FilterType.ArchiveOnly },
+ // {
+ // key: "filter-type-presentations",
+ // label: t("Translations:Presentations"),
+ // typeKey: FilterType.PresentationsOnly,
+ // },
+ // { key: "filter-type-images", label: t("Filse:Images"), typeKey: FilterType.ImagesOnly },
+ // { key: "filter-type-media", label: t("Files:Media"), typeKey: FilterType.MediaOnly },
+ // {
+ // key: "filter-type-forms-templates",
+ // label: t("Files:FormsTemplates"),
+ // typeKey: FilterType.OFormTemplateOnly,
+ // },
+ // { key: "filter-type-forms", label: t("Files:Forms"), typeKey: FilterType.OFormOnly },
+ // ];
+
+ const [sortBy, setSortBy] = useState(dataSortBy[0]);
+ const [sortOrder, setSortOrder] = useState(dataSortOrder[0]);
+ const [widthDimension, setWidthDimension] = useState(dataDimensions[0]);
+ const [heightDimension, setHeightDimension] = useState(dataDimensions[1]);
+ const [width, setWidth] = useState("100");
+ const [height, setHeight] = useState(isTablet() ? "400" : isMobile() ? "206" : "600");
+ const [withSubfolders, setWithSubfolders] = useState(false);
+ const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false);
+ const [showPreview, setShowPreview] = useState(window.innerWidth > showPreviewThreshold);
+ const [sharedLinks, setSharedLinks] = useState(null);
+ const [columnDisplay, setColumnDisplay] = useState(columnDisplayOptions[0].value);
+ const [selectedColumns, setSelectedColumns] = useState([
+ { key: "Name", label: t("Common:Name") },
+ { key: "Type", label: t("Common:Type") },
+ { key: "Tags", label: t("Common:Tags") },
+ ]);
+ // const [filterBy, setFilterBy] = useState({
+ // key: "filter-type-default",
+ // label: t("Common:SelectAction"),
+ // default: true,
+ // });
+ const [author, setAuthor] = useState("");
+
+ // const searchRef = useRef();
+ // const [searchPanelVisible, setSearchPanelVisible] = useState(false);
+ // const [usersList, setUsersList] = useState([]);
+ // const dropDownMaxHeight = usersList.length > 5 ? { maxHeight: 240 } : {};
+ // const [isUserFilterSet, setIsUserFilterSet] = useState(false);
+ // const [isTypeFilterSet, setIsTypeFilterSet] = useState(false);
+ // const [selectedUser, setSelectedUser] = useState(null);
+ // const [selectedType, setSelectedType] = useState(null);
+
+ const [config, setConfig] = useState({
+ mode: "manager",
+ width: `${width}${widthDimension.label}`,
+ height: `${height}${heightDimension.label}`,
+ frameId: "ds-frame",
+ showHeader: true,
+ showTitle: true,
+ showMenu: true,
+ showFilter: true,
+ disableActionButton: false,
+ init: true,
+ viewTableColumns: selectedColumns.map((column) => column.key).join(","),
+ filter: {
+ count: 100,
+ page: 1,
+ sortorder: "descending",
+ sortby: "DateAndTime",
+ search: "",
+ withSubfolders: false,
+ },
+ });
+
+ const params = objectToGetParams(config);
+
+ const frameId = config.frameId || "ds-frame";
+
+ const destroyFrame = () => {
+ window.DocSpace?.SDK?.frames[frameId]?.destroyFrame();
+ };
+
+ const loadFrame = debounce(() => {
+ const script = document.getElementById("integration");
+
+ if (script) {
+ script.remove();
+ }
+
+ const params = objectToGetParams(config);
+
+ loadScript(`${scriptUrl}${params}`, "integration", () => window.DocSpace.SDK.initFrame(config));
+ }, 500);
+
+ useEffect(() => {
+ loadFrame();
+ return () => destroyFrame();
+ });
+
+ const onChangeTab = () => {
+ loadFrame();
+ };
+
+ const onChangeWidth = (e) => {
+ setConfig((config) => {
+ return { ...config, width: `${e.target.value}${widthDimension.label}` };
+ });
+
+ setWidth(e.target.value);
+ };
+
+ const onChangeHeight = (e) => {
+ setConfig((config) => {
+ return { ...config, height: `${e.target.value}${heightDimension.label}` };
+ });
+
+ setHeight(e.target.value);
+ };
+
+ const onChangeFolderId = async (id, publicInPath) => {
+ let newConfig = { id, requestToken: null, rootPath: "/rooms/shared/" };
+
+ if (!!publicInPath) {
+ const links = await fetchExternalLinks(publicInPath.id);
+
+ if (links.length > 1) {
+ const linksOptions = links.map((link) => {
+ const { id, title, requestToken } = link.sharedTo;
+
+ return {
+ key: id,
+ label: title,
+ requestToken: requestToken,
+ };
+ });
+
+ setSharedLinks(linksOptions);
+ }
+
+ newConfig.requestToken = links[0].sharedTo?.requestToken;
+ newConfig.rootPath = "/rooms/share";
+ } else {
+ setSharedLinks(null);
+ }
+ // setAuthor("");
+ // setUsersList([]);
+ // setIsUserFilterSet(false);
+ // setIsTypeFilterSet(false);
+
+ setConfig((config) => {
+ return { ...config, ...newConfig };
+ });
+ };
+
+ const onChangeSharedLink = (link) => {
+ setConfig((config) => {
+ return { ...config, requestToken: link.requestToken };
+ });
+ };
+
+ const onChangeFrameId = (e) => {
+ setConfig((config) => {
+ return { ...config, frameId: e.target.value };
+ });
+ };
+
+ const onChangeWithSubfolders = (e) => {
+ setConfig((config) => {
+ return { ...config, withSubfolders: !withSubfolders };
+ });
+
+ setWithSubfolders(!withSubfolders);
+ };
+
+ const onChangeSortBy = (item) => {
+ setConfig((config) => {
+ return { ...config, sortby: item.key };
+ });
+
+ setSortBy(item);
+ };
+
+ const onChangeSortOrder = (item) => {
+ setConfig((config) => {
+ return { ...config, sortorder: item.key };
+ });
+
+ setSortOrder(item);
+ };
+
+ const onChangeWidthDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, width: `${width}${item.label}` };
+ });
+
+ setWidthDimension(item);
+ };
+
+ const onChangeHeightDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, height: `${height}${item.label}` };
+ });
+
+ setHeightDimension(item);
+ };
+
+ const onChangeShowHeader = (e) => {
+ setConfig((config) => {
+ return { ...config, showHeader: !config.showHeader };
+ });
+ };
+
+ const onChangeShowTitle = () => {
+ setConfig((config) => {
+ return { ...config, showTitle: !config.showTitle };
+ });
+ };
+
+ const toggleShowSettings = () => {
+ setConfig((config) => {
+ return { ...config, showSettings: !config.showSettings };
+ });
+ };
+
+ const toggleActionButton = () => {
+ setConfig((config) => {
+ return { ...config, disableActionButton: !config.disableActionButton };
+ });
+ };
+
+ const onChangeShowMenu = (e) => {
+ setConfig((config) => {
+ return { ...config, showMenu: !config.showMenu };
+ });
+ };
+
+ const onChangeShowFilter = (e) => {
+ setConfig((config) => {
+ return { ...config, showFilter: !config.showFilter };
+ });
+ };
+
+ const onChangeCount = (e) => {
+ setConfig((config) => {
+ return { ...config, count: e.target.value };
+ });
+ };
+
+ const onChangePage = (e) => {
+ setConfig((config) => {
+ return { ...config, page: e.target.value };
+ });
+ };
+
+ const onChangeSearch = (e) => {
+ setConfig((config) => {
+ return { ...config, search: e.target.value };
+ });
+ };
+
+ const changeColumnsOption = (e) => {
+ if (e.target.value === "default") {
+ setConfig((config) => ({
+ ...config,
+ viewTableColumns: "Name,Type,Tags",
+ }));
+ } else if (e.target.value === "custom") {
+ setConfig((config) => ({
+ ...config,
+ viewTableColumns: selectedColumns.map((column) => column.key).join(","),
+ }));
+ }
+ setColumnDisplay(e.target.value);
+ };
+
+ const openGetCodeModal = () => setIsGetCodeDialogOpened(true);
+
+ const closeGetCodeModal = () => setIsGetCodeDialogOpened(false);
+
+ const onColumnSelect = (option) => {
+ setColumnsOptions((prevColumnsOptions) =>
+ prevColumnsOptions.filter((column) => column.key !== option.key),
+ );
+ if (!selectedColumns.find((column) => column.key === option.key)) {
+ setConfig((config) => ({
+ ...config,
+ viewTableColumns: [...selectedColumns, option].map((column) => column.key).join(","),
+ }));
+ setSelectedColumns((prevSelectedColumns) => [...prevSelectedColumns, option]);
+ }
+ };
+
+ const deleteSelectedColumn = (option) => {
+ setColumnsOptions((prevColumnsOptions) => [option, ...prevColumnsOptions]);
+ const filteredColumns = selectedColumns.filter((column) => column.key !== option.key);
+ setConfig((config) => ({
+ ...config,
+ viewTableColumns: filteredColumns.map((column) => column.key).join(","),
+ }));
+ setSelectedColumns(filteredColumns);
+ };
+
+ const onResize = () => {
+ const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold;
+ if (isEnoughWidthForPreview !== showPreview) setShowPreview(isEnoughWidthForPreview);
+ };
+
+ // const onFilterSelect = (option) => {
+ // setFilterBy(option);
+ // setConfig((config) => ({
+ // ...config,
+ // filter: {
+ // ...config.filter,
+ // filterType: option.typeKey,
+ // },
+ // }));
+ // };
+
+ // const closeInviteInputPanel = (e) => {
+ // if (e?.target?.tagName?.toUpperCase() === "INPUT") return;
+
+ // setSearchPanelVisible(false);
+ // };
+
+ // const openInviteInputPanel = () => {
+ // setSearchPanelVisible(true);
+ // };
+
+ // const onKeyDown = (event) => {
+ // const keyCode = event.code;
+
+ // const isAcceptableEvents =
+ // keyCode === "ArrowUp" || keyCode === "ArrowDown" || keyCode === "Enter";
+
+ // if (isAcceptableEvents && author.length > 2) return;
+
+ // event.stopPropagation();
+ // };
+
+ // const searchByQuery = async (value) => {
+ // const query = value.trim();
+
+ // if (query.length >= minSearchValue) {
+ // const filter = Filter.getFilterWithOutDisabledUser();
+ // filter.search = query;
+
+ // // const users = await getMembersList(roomId, filter);
+ // const users = await getUserList(filter);
+
+ // setUsersList(users.items);
+ // }
+
+ // if (!query) {
+ // closeInviteInputPanel();
+ // setInputValue("");
+ // setUsersList([]);
+ // }
+ // };
+
+ // const debouncedSearch = useCallback(
+ // debounce((value) => searchByQuery(value), 300),
+ // [],
+ // );
+
+ // const onChangeAuthor = (e) => {
+ // const value = e.target.value;
+ // const clearValue = value.trim();
+
+ // setAuthor(value);
+
+ // if (clearValue.length < minSearchValue) {
+ // setUsersList([]);
+ // return;
+ // }
+
+ // if ((!!usersList.length || clearValue.length >= minSearchValue) && !searchPanelVisible) {
+ // openInviteInputPanel();
+ // }
+
+ // debouncedSearch(clearValue);
+ // };
+ // const getItemContent = (item) => {
+ // const { avatar, displayName, email, id } = item;
+
+ // const addUser = () => {
+ // closeInviteInputPanel();
+ // setAuthor("");
+ // setUsersList([]);
+ // setSelectedUser(displayName);
+ // setConfig((config) => ({
+ // ...config,
+ // filter:
+ // "id" in config
+ // ? { ...config.filter, authorType: `user_${item.id}` }
+ // : { ...config.filter, subjectId: item.id },
+ // }));
+ // };
+
+ // return (
+ //
+ //
+ //
+ // {displayName}
+ // {email}
+ //
+ //
+ // );
+ // };
+
+ // const foundUsers = usersList.map((user) => getItemContent(user));
+
+ // const toggleMembers = (e) => {
+ // if (!e.target.checked) {
+ // const filtered = { ...config.filter };
+ // delete filtered.subjectId;
+ // setConfig((config) => ({ ...config, filter: filtered }));
+ // }
+ // setIsUserFilterSet(e.target.checked);
+ // };
+
+ // const toggleAuthor = (e) => {
+ // if (!e.target.checked) {
+ // const filtered = { ...config.filter };
+ // delete filtered.authorType;
+ // setConfig((config) => ({ ...config, filter: filtered }));
+ // }
+ // setIsUserFilterSet(e.target.checked);
+ // };
+
+ useEffect(() => {
+ window.addEventListener("resize", onResize);
+ return () => {
+ window.removeEventListener("resize", onResize);
+ };
+ }, [showPreview]);
+
+ const codeBlock = `Fallback text
\n`;
+
+ const preview = (
+
+
+
+ );
+
+ const code = (
+
+ {t("CopyWindowCode")}
+
+
+ );
+
+ const dataTabs = [
+ {
+ key: "preview",
+ title: t("Common:Preview"),
+ content: preview,
+ },
+ {
+ key: "code",
+ title: t("Code"),
+ content: code,
+ },
+ ];
+
+ return (
+
+
+ {t("ManagerPresetDescription")}
+
+ {t("CreateSampleHeader")}
+
+ {showPreview && (
+
+
+
+ )}
+
+
+ {t("CustomizingDisplay")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t("InterfaceElements")}
+
+
+
+
+
+ }
+ />
+
+
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+ {`(${t("MobileOnly")})`}
+
+ }
+ />
+
+
+
+
+ {t("DataDisplay")}
+
+
+
+ {t("RoomOrFolderDescription")}}
+ />
+
+
+
+
+
+ {sharedLinks && (
+
+
+
+ {t("CreateEditRoomDialog:PublicRoomDescription")}
+ }
+ />
+
+
+
+ )}
+
+
+ {t("AdvancedDisplay")}
+ {/*
+ {"id" in config ? (
+ <>
+
+
+ {isUserFilterSet && (
+
+
+
+
+ {author.length >= minSearchValue && (
+
+ {!!usersList.length ? foundUsers : ""}
+
+ )}
+
+ )}
+ {
+ if (!e.target.checked) {
+ const filtered = { ...config.filter };
+ delete filtered.filterType;
+ setConfig((config) => ({ ...config, filter: filtered }));
+ }
+ setIsTypeFilterSet(e.target.checked);
+ }}
+ isChecked={isTypeFilterSet}
+ />
+ {isTypeFilterSet && (
+
+ )}
+
+ ) : (
+ <>
+
+
+ {isUserFilterSet && (
+ <>
+ {"subjectId" in config.filter ? (
+ {
+ const filtered = { ...config.filter };
+ delete filtered.subjectId;
+ setConfig((config) => ({ ...config, filter: filtered }));
+ }}
+ onClose={() => {}}
+ label={selectedUser}
+ />
+ ) : (
+
+
+
+
+ {author.length >= minSearchValue && (
+
+ {!!usersList.length ? foundUsers : ""}
+
+ )}
+
+ )}
+
+ {
+ setConfig((config) => ({
+ ...config,
+ filter: { ...config.filter, subjectFilter: e.target.checked ? 0 : 1 },
+ }));
+ }}
+ isChecked={false}
+ />
+
+ )}
+ {
+ if (!e.target.checked) {
+ const filtered = { ...config.filter };
+ delete filtered.type;
+ setConfig((config) => ({ ...config, filter: filtered }));
+ }
+ setIsTypeFilterSet(e.target.checked);
+ }}
+ isChecked={isTypeFilterSet}
+ />
+ {isTypeFilterSet &&
+ ("type" in config.filter ? (
+ {
+ const filtered = { ...config.filter };
+ delete filtered.type;
+ setConfig((config) => ({ ...config, filter: filtered }));
+ }}
+ onClose={() => {}}
+ label={selectedType}
+ />
+ ) : (
+ {
+ setConfig((config) => ({
+ ...config,
+ filter: { ...config.filter, type: option.roomType },
+ }));
+ setSelectedType(option.label);
+ }}
+ options={roomTypeOptions}
+ scaled={true}
+ selectedOption={filterBy}
+ displaySelectedOption
+ directionY="top"
+ />
+ ))}
+
+ )}
+ */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t("ItemsCountDescription")}}
+ />
+
+
+
+
+
+
+
+
+
+ {columnDisplay === "custom" && (
+
+
+
+
+ {selectedColumns.map((column) => (
+ deleteSelectedColumn(column)}
+ onClose={() => {}}
+ label={column.label}
+ />
+ ))}
+
+
+ )}
+
+
+
+
+ {!showPreview && (
+ <>
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default inject(({ authStore, settingsStore, publicRoomStore }) => {
+ const { setDocumentTitle } = authStore;
+ const { theme } = settingsStore;
+ const { fetchExternalLinks } = publicRoomStore;
+
+ return {
+ theme,
+ setDocumentTitle,
+ fetchExternalLinks,
+ };
+})(
+ withTranslation([
+ "JavascriptSdk",
+ "Files",
+ "EmbeddingPanel",
+ "Common",
+ "Files",
+ "Translations",
+ "SharingPanel",
+ ])(observer(Manager)),
+);
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js
new file mode 100644
index 0000000000..2a7d118b22
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js
@@ -0,0 +1,483 @@
+import { useState, useEffect } from "react";
+import { withTranslation } from "react-i18next";
+import debounce from "lodash.debounce";
+import { Box } from "@docspace/shared/components/box";
+import { TextInput } from "@docspace/shared/components/text-input";
+import { Textarea } from "@docspace/shared/components/textarea";
+import { Label } from "@docspace/shared/components/label";
+import { Text } from "@docspace/shared/components/text";
+import { Checkbox } from "@docspace/shared/components/checkbox";
+import { ComboBox } from "@docspace/shared/components/combobox";
+import { TabsContainer } from "@docspace/shared/components/tabs-container";
+import { RadioButtonGroup } from "@docspace/shared/components/radio-button-group";
+import { ColorInput } from "@docspace/shared/components/color-input";
+import { objectToGetParams, loadScript } from "@docspace/shared/utils/common";
+import { inject, observer } from "mobx-react";
+
+import { isTablet, isMobile } from "@docspace/shared/utils/device";
+
+import GetCodeDialog from "../sub-components/GetCodeDialog";
+import { Button } from "@docspace/shared/components/button";
+
+import { RoomsType } from "@docspace/shared/enums";
+
+import { toastr } from "@docspace/shared/components/toast";
+
+const showPreviewThreshold = 720;
+
+import {
+ SDKContainer,
+ Controls,
+ CategoryHeader,
+ CategorySubHeader,
+ CategoryDescription,
+ ControlsGroup,
+ ControlsSection,
+ Frame,
+ Container,
+ RowContainer,
+ Preview,
+ GetCodeButtonWrapper,
+ CodeWrapper,
+} from "./StyledPresets";
+
+const RoomSelector = (props) => {
+ const { t, setDocumentTitle } = props;
+
+ setDocumentTitle(t("JavascriptSdk"));
+
+ const scriptUrl = `${window.location.origin}/static/scripts/api.js`;
+
+ const dataDimensions = [
+ { key: "percent", label: "%", default: true },
+ { key: "pixel", label: "px" },
+ ];
+
+ const elementDisplayOptions = [
+ { value: "element", label: t("ElementItself") },
+ {
+ value: "button",
+ label: (
+
+ {t("Common:Button")}
+ {`(${t("ElementCalledAfterClicking")})`}
+
+ ),
+ },
+ ];
+
+ const roomTypeOptions = [
+ { key: "room-type-all", label: t("AllTypes"), roomType: undefined, default: true },
+ {
+ key: "room-type-collaboration",
+ label: t("CreateEditRoomDialog:CollaborationRoomTitle"),
+ roomType: RoomsType.EditingRoom,
+ },
+ { key: "room-type-public", label: t("Files:PublicRoom"), roomType: RoomsType.PublicRoom },
+ {
+ key: "room-type-custom",
+ label: t("CreateEditRoomDialog:CustomRoomTitle"),
+ roomType: RoomsType.CustomRoom,
+ },
+ ];
+
+ const [widthDimension, setWidthDimension] = useState(dataDimensions[1]);
+ const [heightDimension, setHeightDimension] = useState(dataDimensions[0]);
+ const [width, setWidth] = useState("600");
+ const [height, setHeight] = useState("100");
+ const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false);
+ const [showPreview, setShowPreview] = useState(window.innerWidth > showPreviewThreshold);
+ const [selectedElementType, setSelectedElementType] = useState(elementDisplayOptions[0].value);
+ const [roomType, setRoomType] = useState(roomTypeOptions[0]);
+
+ const debouncedOnSelect = debounce((items) => {
+ toastr.success(items[0].label);
+ }, 0);
+
+ const [config, setConfig] = useState({
+ mode: "room-selector",
+ width: `${width}${widthDimension.label}`,
+ height: `${height}${heightDimension.label}`,
+ frameId: "ds-frame",
+ init: true,
+ showSelectorCancel: true,
+ showSelectorHeader: true,
+ withSearch: true,
+ acceptButtonLabel: t("Common:SelectAction"),
+ cancelButtonLabel: t("Common:CancelButton"),
+ isButtonMode: false,
+ buttonWithLogo: true,
+ events: {
+ onSelectCallback: debouncedOnSelect,
+ onCloseCallback: null,
+ onAppReady: null,
+ onAppError: (e) => console.log("onAppError", e),
+ onEditorCloseCallback: null,
+ onAuthSuccess: null,
+ onSignOut: null,
+ },
+ });
+
+ const params = objectToGetParams(config);
+
+ const frameId = config.frameId || "ds-frame";
+
+ const destroyFrame = () => {
+ window.DocSpace?.SDK?.frames[frameId]?.destroyFrame();
+ };
+
+ const loadFrame = debounce(() => {
+ const script = document.getElementById("integration");
+
+ if (script) {
+ script.remove();
+ }
+
+ const params = objectToGetParams(config);
+
+ loadScript(`${scriptUrl}${params}`, "integration", () => window.DocSpace.SDK.initFrame(config));
+ }, 500);
+
+ useEffect(() => {
+ loadFrame();
+ return destroyFrame;
+ });
+
+ const toggleButtonMode = (e) => {
+ setSelectedElementType(e.target.value);
+ setConfig((config) => ({ ...config, isButtonMode: e.target.value === "button" }));
+ };
+
+ const changeRoomType = (option) => {
+ setRoomType(option);
+ setConfig((config) => ({ ...config, roomType: option.roomType }));
+ };
+
+ const onChangeTab = (tab) => {
+ if (tab.key === "preview" && selectedElementType === "button") {
+ setConfig((config) => ({ ...config, isButtonMode: true }));
+ } else if (tab.key === "selector-preview") {
+ setConfig((config) => ({ ...config, isButtonMode: false }));
+ } else if (tab.key === "code") {
+ setConfig((config) => ({ ...config, isButtonMode: selectedElementType === "button" }));
+ }
+ };
+
+ const onChangeWidth = (e) => {
+ setConfig((config) => {
+ return { ...config, width: `${e.target.value}${widthDimension.label}` };
+ });
+
+ setWidth(e.target.value);
+ };
+
+ const onChangeHeight = (e) => {
+ setConfig((config) => {
+ return { ...config, height: `${e.target.value}${heightDimension.label}` };
+ });
+
+ setHeight(e.target.value);
+ };
+
+ const onChangeFrameId = (e) => {
+ setConfig((config) => {
+ return { ...config, frameId: e.target.value };
+ });
+ };
+
+ const onChangeWidthDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, width: `${width}${item.label}` };
+ });
+
+ setWidthDimension(item);
+ };
+
+ const onChangeHeightDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, height: `${height}${item.label}` };
+ });
+
+ setHeightDimension(item);
+ };
+
+ const toggleWithSearch = () => {
+ setConfig((config) => ({ ...config, withSearch: !config.withSearch }));
+ };
+
+ const onChangeAcceptLabel = (e) => {
+ setConfig((config) => {
+ return { ...config, acceptButtonLabel: e.target.value };
+ });
+ };
+
+ const onChangeCancelLabel = (e) => {
+ setConfig((config) => {
+ return { ...config, cancelButtonLabel: e.target.value };
+ });
+ };
+
+ const openGetCodeModal = () => setIsGetCodeDialogOpened(true);
+
+ const closeGetCodeModal = () => setIsGetCodeDialogOpened(false);
+
+ const onResize = () => {
+ const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold;
+ if (isEnoughWidthForPreview !== showPreview) setShowPreview(isEnoughWidthForPreview);
+ };
+
+ const setButtonColor = (color) => {
+ setConfig((config) => ({ ...config, buttonColor: color }));
+ };
+
+ useEffect(() => {
+ window.addEventListener("resize", onResize);
+ return () => {
+ window.removeEventListener("resize", onResize);
+ };
+ }, [showPreview]);
+
+ const codeBlock = `Fallback text
\n`;
+
+ const preview = (
+
+
+
+ );
+
+ const code = (
+
+ {t("CopyWindowCode")}
+
+
+ );
+
+ const dataTabs =
+ selectedElementType === "element"
+ ? [
+ {
+ key: "preview",
+ title: t("Common:Preview"),
+ content: preview,
+ },
+ {
+ key: "code",
+ title: t("Code"),
+ content: code,
+ },
+ ]
+ : [
+ {
+ key: "preview",
+ title: t("Common:Preview"),
+ content: preview,
+ },
+ {
+ key: "selector-preview",
+ title: t("SelectorPreview"),
+ content: preview,
+ },
+ {
+ key: "code",
+ title: t("Code"),
+ content: code,
+ },
+ ];
+
+ return (
+
+
+ {t("RoomSelectorPresetDescription")}
+
+ {t("CreateSampleHeader")}
+
+ {showPreview && (
+
+
+
+ )}
+
+
+ {t("MainElementParameter")}
+
+ {config.isButtonMode && (
+ <>
+ {t("ButtonCustomization")}
+
+
+
+
+
+
+ {
+ setConfig((config) => ({ ...config, buttonText: e.target.value }));
+ }}
+ placeholder={t("SelectToDocSpace")}
+ value={config.buttonText}
+ tabIndex={3}
+ />
+ {
+ setConfig((config) => ({
+ ...config,
+ buttonWithLogo: !config.buttonWithLogo,
+ }));
+ }}
+ isChecked={config.buttonWithLogo}
+ />
+
+
+ )}
+
+
+
+ {t("CustomizingDisplay")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t("AdvancedDisplay")}
+
+
+
+
+
+
+
+ {!showPreview && (
+ <>
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default inject(({ authStore, settingsStore }) => {
+ const { setDocumentTitle } = authStore;
+ const { theme } = settingsStore;
+
+ return {
+ theme,
+ setDocumentTitle,
+ };
+})(
+ withTranslation(["JavascriptSdk", "Files", "EmbeddingPanel", "Common", "CreateEditRoomDialog"])(
+ observer(RoomSelector),
+ ),
+);
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js
new file mode 100644
index 0000000000..4ba57c280e
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js
@@ -0,0 +1,407 @@
+import { useState, useEffect } from "react";
+import { withTranslation } from "react-i18next";
+import debounce from "lodash.debounce";
+import { Box } from "@docspace/shared/components/box";
+import { TextInput } from "@docspace/shared/components/text-input";
+import { Textarea } from "@docspace/shared/components/textarea";
+import { Label } from "@docspace/shared/components/label";
+import { Text } from "@docspace/shared/components/text";
+import { ComboBox } from "@docspace/shared/components/combobox";
+import { TabsContainer } from "@docspace/shared/components/tabs-container";
+import FilesSelectorInput from "SRC_DIR/components/FilesSelectorInput";
+import { objectToGetParams, loadScript } from "@docspace/shared/utils/common";
+import { inject, observer } from "mobx-react";
+
+import { isTablet, isMobile } from "@docspace/shared/utils/device";
+
+import { HelpButton } from "@docspace/shared/components/help-button";
+
+import GetCodeDialog from "../sub-components/GetCodeDialog";
+import { Button } from "@docspace/shared/components/button";
+
+import EmptyIframeContainer from "../sub-components/EmptyIframeContainer";
+
+const showPreviewThreshold = 720;
+
+import {
+ SDKContainer,
+ Controls,
+ CategoryHeader,
+ CategorySubHeader,
+ CategoryDescription,
+ ControlsGroup,
+ LabelGroup,
+ Frame,
+ Container,
+ RowContainer,
+ Preview,
+ GetCodeButtonWrapper,
+ FilesSelectorInputWrapper,
+ ControlsSection,
+ CodeWrapper,
+} from "./StyledPresets";
+
+const SimpleRoom = (props) => {
+ const { t, setDocumentTitle, fetchExternalLinks } = props;
+
+ setDocumentTitle(t("JavascriptSdk"));
+
+ const scriptUrl = `${window.location.origin}/static/scripts/api.js`;
+
+ const dataDimensions = [
+ { key: "percent", label: "%", default: true },
+ { key: "pixel", label: "px" },
+ ];
+
+ const [widthDimension, setWidthDimension] = useState(dataDimensions[0]);
+ const [heightDimension, setHeightDimension] = useState(dataDimensions[1]);
+ const [width, setWidth] = useState("100");
+ const [height, setHeight] = useState(isTablet() ? "400" : isMobile() ? "206" : "600");
+ const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false);
+ const [showPreview, setShowPreview] = useState(window.innerWidth > showPreviewThreshold);
+ const [sharedLinks, setSharedLinks] = useState(null);
+
+ const [config, setConfig] = useState({
+ mode: "manager",
+ width: `${width}${widthDimension.label}`,
+ height: `${height}${heightDimension.label}`,
+ frameId: "ds-frame",
+ showHeader: false,
+ showTitle: true,
+ showMenu: false,
+ showFilter: true,
+ disableActionButton: false,
+ infoPanelVisible: false,
+ init: false,
+ filter: {
+ count: 100,
+ page: 1,
+ sortorder: "descending",
+ sortby: "DateAndTime",
+ search: "",
+ withSubfolders: false,
+ },
+ });
+
+ const params = objectToGetParams(config);
+
+ const frameId = config.frameId || "ds-frame";
+
+ const destroyFrame = () => {
+ window.DocSpace?.SDK?.frames[frameId]?.destroyFrame();
+ };
+
+ const loadFrame = debounce(() => {
+ const script = document.getElementById("integration");
+
+ if (script) {
+ script.remove();
+ }
+
+ const params = objectToGetParams(config);
+
+ loadScript(`${scriptUrl}${params}`, "integration", () => window.DocSpace.SDK.initFrame(config));
+ }, 500);
+
+ useEffect(() => {
+ loadFrame();
+ return () => destroyFrame();
+ });
+
+ const onChangeTab = () => {
+ loadFrame();
+ };
+
+ const onChangeWidth = (e) => {
+ setConfig((config) => {
+ return { ...config, width: `${e.target.value}${widthDimension.label}` };
+ });
+
+ setWidth(e.target.value);
+ };
+
+ const onChangeHeight = (e) => {
+ setConfig((config) => {
+ return { ...config, height: `${e.target.value}${heightDimension.label}` };
+ });
+
+ setHeight(e.target.value);
+ };
+
+ const onChangeFolderId = async (id, publicInPath) => {
+ let newConfig = { id, requestToken: null, rootPath: "/rooms/shared/" };
+
+ if (!!publicInPath) {
+ const links = await fetchExternalLinks(publicInPath.id);
+
+ if (links.length > 1) {
+ const linksOptions = links.map((link) => {
+ const { id, title, requestToken } = link.sharedTo;
+
+ return {
+ key: id,
+ label: title,
+ requestToken: requestToken,
+ };
+ });
+
+ setSharedLinks(linksOptions);
+ }
+
+ newConfig.requestToken = links[0].sharedTo?.requestToken;
+ newConfig.rootPath = "/rooms/share";
+ } else {
+ setSharedLinks(null);
+ }
+
+ setConfig((config) => {
+ return { ...config, ...newConfig, init: true };
+ });
+ };
+
+ const onChangeSharedLink = (link) => {
+ setConfig((config) => {
+ return { ...config, requestToken: link.requestToken };
+ });
+ };
+
+ const onChangeFrameId = (e) => {
+ setConfig((config) => {
+ return { ...config, frameId: e.target.value };
+ });
+ };
+
+ const onChangeWidthDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, width: `${width}${item.label}` };
+ });
+
+ setWidthDimension(item);
+ };
+
+ const onChangeHeightDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, height: `${height}${item.label}` };
+ });
+
+ setHeightDimension(item);
+ };
+
+ const openGetCodeModal = () => setIsGetCodeDialogOpened(true);
+
+ const closeGetCodeModal = () => setIsGetCodeDialogOpened(false);
+
+ const onResize = () => {
+ const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold;
+ if (isEnoughWidthForPreview !== showPreview) setShowPreview(isEnoughWidthForPreview);
+ };
+
+ useEffect(() => {
+ window.addEventListener("resize", onResize);
+ return () => {
+ window.removeEventListener("resize", onResize);
+ };
+ }, [showPreview]);
+
+ const codeBlock = `Fallback text
\n`;
+
+ const preview = (
+
+ {config.id !== undefined ? (
+ <>
+
+
+ ) : (
+
+ )}
+
+ );
+
+ const code = (
+
+ {t("CopyWindowCode")}
+
+
+ );
+
+ const dataTabs = [
+ {
+ key: "preview",
+ title: t("Common:Preview"),
+ content: preview,
+ },
+ {
+ key: "code",
+ title: t("Code"),
+ content: code,
+ },
+ ];
+
+ return (
+
+
+ {t("SimpleRoomPresetDescription")}
+
+ {t("CreateSampleHeader")}
+
+ {showPreview && (
+
+
+
+ )}
+
+
+ {t("DataDisplay")}
+
+
+
+ {t("RoomOrFolderDescription")}}
+ />
+
+
+
+
+
+ {sharedLinks && (
+
+
+
+ {t("CreateEditRoomDialog:PublicRoomDescription")}
+ }
+ />
+
+
+
+ )}
+
+
+
+ {t("CustomizingDisplay")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!showPreview && (
+ <>
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default inject(({ authStore, settingsStore, publicRoomStore }) => {
+ const { setDocumentTitle } = authStore;
+ const { theme } = settingsStore;
+ const { fetchExternalLinks } = publicRoomStore;
+
+ return {
+ theme,
+ setDocumentTitle,
+ fetchExternalLinks,
+ };
+})(
+ withTranslation([
+ "JavascriptSdk",
+ "Files",
+ "EmbeddingPanel",
+ "Common",
+ "Files",
+ "Translations",
+ "SharingPanel",
+ ])(observer(SimpleRoom)),
+);
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js
new file mode 100644
index 0000000000..f4b9ba01df
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js
@@ -0,0 +1,264 @@
+import styled, { css } from "styled-components";
+import { isMobile, mobile, tablet } from "@docspace/shared/utils/device";
+import { Box } from "@docspace/shared/components/box";
+import Base from "@docspace/shared/themes/base";
+
+export const SDKContainer = styled(Box)`
+ @media ${tablet} {
+ width: 100%;
+ }
+
+ ${isMobile() &&
+ css`
+ width: 100%;
+ `}
+
+ .tabs_body {
+ height: calc(100lvh - 260px);
+ }
+`;
+
+export const Controls = styled(Box)`
+ max-width: 350px;
+ min-width: 350px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ margin-top: 16px;
+
+ @media ${tablet} {
+ min-width: 0;
+ }
+
+ ${isMobile() &&
+ css`
+ min-width: 0;
+ `}
+
+ .label {
+ min-width: fit-content;
+ }
+
+ .checkbox {
+ max-width: fit-content;
+ }
+`;
+
+export const CategoryHeader = styled.div`
+ margin-top: 24px;
+ margin-bottom: 24px;
+ font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
+ font-style: normal;
+ font-weight: 700;
+ line-height: 22px;
+
+ @media ${tablet} {
+ margin-top: 24px;
+ }
+
+ ${isMobile() &&
+ css`
+ margin-top: 24px;
+ `}
+`;
+
+export const CategorySubHeader = styled.div`
+ font-size: ${(props) => props.theme.getCorrectFontSize("15px")};
+ font-style: normal;
+ font-weight: 600;
+ line-height: 16px;
+
+ @media ${tablet} {
+ &:not(&.copy-window-code) {
+ margin-bottom: 0;
+ }
+ }
+
+ ${isMobile() &&
+ css`
+ &:not(&.copy-window-code) {
+ margin-bottom: 0;
+ }
+ `}
+
+ @media ${mobile} {
+ &:first-of-type {
+ margin-top: 0;
+ }
+ }
+`;
+
+export const CategoryDescription = styled(Box)`
+ max-width: 700px;
+ .sdk-description {
+ line-height: 20px;
+ color: ${(props) => props.theme.client.settings.common.descriptionColor};
+ }
+`;
+
+export const ControlsGroup = styled(Box)`
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+
+ .toggle {
+ position: relative;
+ }
+
+ @media ${tablet} {
+ gap: 4px;
+ }
+
+ ${isMobile() &&
+ css`
+ gap: 4px;
+ `}
+`;
+
+export const CheckboxGroup = styled(Box)`
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+`;
+
+export const LabelGroup = styled(Box)`
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+`;
+
+export const ControlsSection = styled(Box)`
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+`;
+
+export const Frame = styled(Box)`
+ margin-top: 16px;
+ position: relative;
+
+ border-radius: 6px;
+ border: 1px solid ${(props) => props.theme.sdkPresets.borderColor};
+
+ width: calc(${(props) => (props.width ? props.width : "100%")} + 2px);
+ height: calc(${(props) => (props.height ? props.height : "400px")} + 2px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ @media ${tablet} {
+ margin-top: 4px;
+ }
+
+ ${(props) =>
+ props.targetId &&
+ `
+ #${props.targetId} {
+ border-radius: 6px;
+ }
+ `}
+
+ ${isMobile() &&
+ css`
+ margin-top: 4px;
+ `}
+
+ .frame-container {
+ height: 100% !important;
+
+ & > iframe {
+ height: 100% !important;
+ }
+ }
+`;
+
+Frame.defaultProps = { theme: Base };
+
+export const Container = styled(Box)`
+ width: 100%;
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: flex-end;
+ gap: 48px;
+
+ @media ${tablet} {
+ flex-direction: column;
+ }
+
+ ${isMobile() &&
+ css`
+ flex-direction: column;
+ `}
+`;
+
+export const RowContainer = styled(Box)`
+ flex-direction: row;
+ display: flex;
+ gap: 8px;
+
+ ${(props) =>
+ props.combo &&
+ `
+ height: 32px;
+ align-items: center;
+ `}
+`;
+
+export const ColumnContainer = styled(Box)`
+ flex-direction: column;
+ display: flex;
+ gap: 8px;
+`;
+
+export const Preview = styled(Box)`
+ width: 100%;
+ min-width: 660px;
+ flex-direction: row;
+
+ @media ${tablet} {
+ margin-top: 0;
+ min-width: 0;
+ }
+ ${isMobile() &&
+ css`
+ margin-top: 0;
+ min-width: 0;
+ `}
+`;
+
+export const GetCodeButtonWrapper = styled.div`
+ padding-block: 30px;
+ position: sticky;
+ bottom: 0;
+ margin-top: 32px;
+ background-color: ${({ theme }) => theme.backgroundColor};
+
+ @media ${mobile} {
+ position: fixed;
+ padding-inline: 16px;
+ inset-inline: 0;
+ }
+`;
+
+export const FilesSelectorInputWrapper = styled.div`
+ & > div {
+ margin: 0;
+ }
+`;
+
+export const SelectedItemsContainer = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+`;
+
+export const CodeWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ margin-top: 16px;
+
+ width: calc(${(props) => (props.width ? props.width : "100%")} + 2px);
+ height: calc(${(props) => (props.height ? props.height : "400px")} + 2px);
+`;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js
new file mode 100644
index 0000000000..7b6696f562
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js
@@ -0,0 +1,395 @@
+import { useState, useEffect } from "react";
+import { withTranslation } from "react-i18next";
+import debounce from "lodash.debounce";
+import { Box } from "@docspace/shared/components/box";
+import { TextInput } from "@docspace/shared/components/text-input";
+import { Textarea } from "@docspace/shared/components/textarea";
+import { Label } from "@docspace/shared/components/label";
+import { Text } from "@docspace/shared/components/text";
+import { Checkbox } from "@docspace/shared/components/checkbox";
+import { ComboBox } from "@docspace/shared/components/combobox";
+import { TabsContainer } from "@docspace/shared/components/tabs-container";
+import FilesSelectorInput from "SRC_DIR/components/FilesSelectorInput";
+import { objectToGetParams, loadScript } from "@docspace/shared/utils/common";
+import { inject, observer } from "mobx-react";
+import { ImageEditor } from "@docspace/shared/components/image-editor";
+import { FilesSelectorFilterTypes } from "@docspace/shared/enums";
+
+import { isTablet, isMobile } from "@docspace/shared/utils/device";
+
+import EmptyIframeContainer from "../sub-components/EmptyIframeContainer";
+
+import GetCodeDialog from "../sub-components/GetCodeDialog";
+import { Button } from "@docspace/shared/components/button";
+
+const showPreviewThreshold = 720;
+
+import {
+ SDKContainer,
+ Controls,
+ CategoryHeader,
+ CategorySubHeader,
+ CategoryDescription,
+ ControlsGroup,
+ LabelGroup,
+ ControlsSection,
+ Frame,
+ Container,
+ RowContainer,
+ ColumnContainer,
+ Preview,
+ GetCodeButtonWrapper,
+ FilesSelectorInputWrapper,
+ CodeWrapper,
+} from "./StyledPresets";
+
+const Viewer = (props) => {
+ const { t, setDocumentTitle } = props;
+
+ setDocumentTitle(t("JavascriptSdk"));
+
+ const scriptUrl = `${window.location.origin}/static/scripts/api.js`;
+
+ const dataDimensions = [
+ { key: "percent", label: "%", default: true },
+ { key: "pixel", label: "px" },
+ ];
+
+ const [widthDimension, setWidthDimension] = useState(dataDimensions[0]);
+ const [heightDimension, setHeightDimension] = useState(dataDimensions[0]);
+ const [width, setWidth] = useState("100");
+ const [height, setHeight] = useState("100");
+ const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false);
+ const [showPreview, setShowPreview] = useState(window.innerWidth > showPreviewThreshold);
+
+ const [config, setConfig] = useState({
+ mode: "viewer",
+ width: `${width}${widthDimension.label}`,
+ height: `${height}${heightDimension.label}`,
+ frameId: "ds-frame",
+ init: false,
+ });
+
+ const params = objectToGetParams(config);
+
+ const frameId = config.frameId || "ds-frame";
+
+ const destroyFrame = () => {
+ window.DocSpace?.SDK?.frames[frameId]?.destroyFrame();
+ };
+
+ const loadFrame = debounce(() => {
+ const script = document.getElementById("integration");
+
+ if (script) {
+ script.remove();
+ }
+
+ const params = objectToGetParams(config);
+
+ loadScript(`${scriptUrl}${params}`, "integration", () => window.DocSpace.SDK.initFrame(config));
+ }, 500);
+
+ useEffect(() => {
+ loadFrame();
+ return () => destroyFrame();
+ });
+
+ const onChangeTab = () => {
+ loadFrame();
+ };
+
+ const onChangeWidth = (e) => {
+ setConfig((config) => {
+ return { ...config, width: `${e.target.value}${widthDimension.label}` };
+ });
+
+ setWidth(e.target.value);
+ };
+
+ const onChangeHeight = (e) => {
+ setConfig((config) => {
+ return { ...config, height: `${e.target.value}${heightDimension.label}` };
+ });
+
+ setHeight(e.target.value);
+ };
+
+ const onChangeFileId = (file) => {
+ setConfig((config) => {
+ return { ...config, id: file.id };
+ });
+ };
+
+ const onChangeFrameId = (e) => {
+ setConfig((config) => {
+ return { ...config, frameId: e.target.value, init: true };
+ });
+ };
+
+ const onChangeWidthDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, width: `${width}${item.label}` };
+ });
+
+ setWidthDimension(item);
+ };
+
+ const onChangeHeightDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, height: `${height}${item.label}` };
+ });
+
+ setHeightDimension(item);
+ };
+
+ const openGetCodeModal = () => setIsGetCodeDialogOpened(true);
+
+ const closeGetCodeModal = () => setIsGetCodeDialogOpened(false);
+
+ const onResize = () => {
+ const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold;
+ if (isEnoughWidthForPreview !== showPreview) setShowPreview(isEnoughWidthForPreview);
+ };
+
+ useEffect(() => {
+ window.addEventListener("resize", onResize);
+ return () => {
+ window.removeEventListener("resize", onResize);
+ };
+ }, [showPreview]);
+
+ const codeBlock = `Fallback text
\n`;
+
+ const preview = (
+
+ {config.id !== undefined ? (
+ <>
+
+
+ ) : (
+
+ )}
+
+ );
+
+ const code = (
+
+ {t("CopyWindowCode")}
+
+
+ );
+
+ const dataTabs = [
+ {
+ key: "preview",
+ title: t("Common:Preview"),
+ content: preview,
+ },
+ {
+ key: "code",
+ title: t("Code"),
+ content: code,
+ },
+ ];
+
+ return (
+
+
+ {t("ViewerPresetDescription")}
+
+ {t("CreateSampleHeader")}
+
+ {showPreview && (
+
+
+
+ )}
+
+
+ {t("FileId")}
+
+
+
+
+
+
+
+
+
+
+
+ {t("CustomizingDisplay")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
+
+ {}}
+ isChecked={true}
+ />
+
+ {}} isChecked={true} />
+ ({t("InLeftPanel")})
+
+
+ {}} isChecked={true} />
+ ({t("InLeftPanel")})
+
+
+ {t("AddWatermarks")}
+
+
+
+
+
+
+
+
+
+ {}}
+ options={[
+ { key: "1", label: "100%", default: true },
+ { key: "2", label: "50%" },
+ { key: "3", label: "25%" },
+ ]}
+ scaled={true}
+ selectedOption={{ key: "1", label: "100%", default: true }}
+ displaySelectedOption
+ directionY="top"
+ />
+
+ {}}
+ options={[
+ { key: "1", label: "45%", default: true },
+ { key: "2", label: "75%" },
+ { key: "3", label: "90%" },
+ { key: "4", label: "180%" },
+ ]}
+ scaled={true}
+ selectedOption={{ key: "1", label: "45%", default: true }}
+ displaySelectedOption
+ directionY="top"
+ />
+
+ {}}
+ onChangeImage={() => {}}
+ /> */}
+
+
+
+ {!showPreview && (
+ <>
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default inject(({ authStore, settingsStore }) => {
+ const { setDocumentTitle } = authStore;
+ const { theme } = settingsStore;
+
+ return {
+ theme,
+ setDocumentTitle,
+ };
+})(
+ withTranslation(["JavascriptSdk", "Files", "EmbeddingPanel", "Common", "CreateEditRoomDialog"])(
+ observer(Viewer),
+ ),
+);
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/EmptyIframeContainer.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/EmptyIframeContainer.js
new file mode 100644
index 0000000000..522777148b
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/EmptyIframeContainer.js
@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+
+import { RectangleSkeleton } from "@docspace/shared/skeletons/rectangle";
+import { Base } from "@docspace/shared/themes";
+
+const StyledContainer = styled.div`
+ width: ${(props) => props.width};
+ height: ${(props) => props.height};
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ border: 1px solid ${(props) => props.theme.plugins.borderColor};
+ border-radius: 6px;
+
+ overflow: hidden;
+
+ .emptyIframeText {
+ position: absolute;
+ font-size: 44px;
+ font-weight: 700;
+ line-height: 59.92px;
+ color: ${(props) => props.theme.text.emailColor};
+ }
+`;
+StyledContainer.defaultProps = { theme: Base };
+
+const EmptyIframeContainer = ({ text, width, height }) => {
+ return (
+
+
+ {text}
+
+ );
+};
+
+export default EmptyIframeContainer;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetTile.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetTile.js
new file mode 100644
index 0000000000..9d8fa0b14b
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetTile.js
@@ -0,0 +1,82 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { Base } from "@docspace/shared/themes";
+
+import { Text } from "@docspace/shared/components/text";
+import { Button } from "@docspace/shared/components/button";
+
+import ArrowIcon from "PUBLIC_DIR/images/arrow-left.react.svg";
+
+const TileContainer = styled.div`
+ box-sizing: border-box;
+
+ width: 100%;
+ max-width: 342px;
+ height: 354px;
+
+ padding: 12px 16px;
+
+ border-radius: 6px;
+ border: 1px solid ${(props) => props.theme.sdkPresets.borderColor};
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 12px;
+
+ .tileContent {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ .navigationButton {
+ border: none;
+
+ .button-content {
+ flex-direction: row-reverse;
+ }
+
+ .icon {
+ transform: scale(-1, 1);
+ }
+
+ :hover {
+ ${() =>
+ css`
+ border: ${(props) => props.theme.button.border.baseHover};
+ box-sizing: ${(props) => props.theme.button.boxSizing};
+ `}
+ }
+ }
+`;
+
+TileContainer.defaultProps = { theme: Base };
+
+const PresetTile = (props) => {
+ const { t, title, description, image, handleOnClick } = props;
+
+ return (
+
+
+
+ {title}
+
+
+
{description}
+
+
+
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
index 566ba30d5c..c87ef4a03d 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
@@ -8,6 +8,7 @@ import { Text } from "@docspace/shared/components/text";
import { SelectorAddButton } from "@docspace/shared/components/selector-add-button";
import { SelectedItem } from "@docspace/shared/components/selected-item";
import { tablet } from "@docspace/shared/utils";
+import Base from "@docspace/shared/themes/base";
const CategoryHeader = styled.div`
margin-top: 24px;
@@ -23,6 +24,7 @@ const Container = styled.div`
&.description-holder {
display: block;
+ color: ${(props) => props.theme.sdkPresets.secondaryColor};
}
&.description-holder > div {
@@ -41,6 +43,8 @@ const Container = styled.div`
}
`;
+Container.defaultProps = { theme: Base };
+
const ChipsContainer = styled.div`
display: flex;
align-items: center;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
index 3d201d1368..087efe8dc5 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
@@ -129,7 +129,9 @@ const DeliveryDatePicker = ({
const SelectedDateTime = () => {
const formattedTime = isTimeEqual
? ""
- : ` ${filters.deliveryFrom.format("HH:mm")} - ${moment(filters.deliveryTo)
+ : ` ${moment(filters.deliveryFrom).tz(window.timezone).format("HH:mm")} - ${moment(
+ filters.deliveryTo,
+ )
.tz(window.timezone)
.format("HH:mm")}`;
@@ -210,6 +212,7 @@ const DeliveryDatePicker = ({
hasError={!isTimeValid}
tabIndex={1}
locale={i18n.language}
+ initialTime={filters.deliveryFrom}
/>
@@ -219,10 +222,11 @@ const DeliveryDatePicker = ({
) : (
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/StatusPicker.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/StatusPicker.js
index 0037452d97..312bdb330b 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/StatusPicker.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/StatusPicker.js
@@ -37,6 +37,7 @@ const StatusBadgeSelector = ({
label={label}
onClick={handleOnClick}
primary={isStatusSelected(statusCode)}
+ size="extraSmall"
/>
);
};
@@ -77,7 +78,7 @@ const StatusPicker = ({ filters, setFilters }) => {
handleStatusClick={handleStatusClick}
key={code}
/>
- )
+ ),
);
return (
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/index.js
index 5d45cf6af6..d2f46c77e7 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/index.js
@@ -178,6 +178,7 @@ const FilterDialog = (props) => {
size="normal"
primary={true}
onClick={handleApplyFilters}
+ isDisabled={filters.deliveryTo <= filters.deliveryFrom}
/>