\n`;
-
const preview = (
{config.id !== undefined ? (
- <>
-
-
+
) : (
{
);
- const code = (
-
-
- {`HTML ${t("CodeTitle")}`}
-
-
- {t("HtmlCodeDescription")}
-
-
-
- {`JavaScript ${t("CodeTitle")}`}
-
-
- {t("JavaScriptCodeDescription")}
-
-
-
- );
-
- const dataTabs = [
- {
- key: "preview",
- title: t("Common:Preview"),
- content: preview,
- },
- {
- key: "code",
- title: t("Code"),
- content: code,
- },
- ];
-
return (
-
-
- {t("ViewerDescription")}
-
- {t("CreateSampleViewer")}
+
- {showPreview && (
-
-
-
- )}
+ {t("FileId")}
@@ -310,58 +181,25 @@ const Viewer = (props) => {
{t("CustomizingDisplay")}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
{/*
@@ -370,14 +208,14 @@ const Viewer = (props) => {
className="checkbox"
label={t("TabPlugins")}
onChange={() => {}}
- isChecked={true}
+ isChecked
/>
- {}} isChecked={true} />
+ {}} isChecked />
({t("InLeftPanel")})
- {}} isChecked={true} />
+ {}} isChecked />
({t("InLeftPanel")})
@@ -398,7 +236,7 @@ const Viewer = (props) => {
{ key: "2", label: "50%" },
{ key: "3", label: "25%" },
]}
- scaled={true}
+ scaled
selectedOption={{ key: "1", label: "100%", default: true }}
displaySelectedOption
directionY="top"
@@ -412,7 +250,7 @@ const Viewer = (props) => {
{ key: "3", label: "90%" },
{ key: "4", label: "180%" },
]}
- scaled={true}
+ scaled
selectedOption={{ key: "1", label: "45%", default: true }}
displaySelectedOption
directionY="top"
@@ -428,29 +266,7 @@ const Viewer = (props) => {
/> */}
-
- {!showPreview && (
- <>
-
-
-
-
-
-
- )}
-
+
);
};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CancelTextInput.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CancelTextInput.js
new file mode 100644
index 0000000000..6065b90199
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CancelTextInput.js
@@ -0,0 +1,61 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { useState, useCallback } from "react";
+import { Label } from "@docspace/shared/components/label";
+import { TextInput } from "@docspace/shared/components/text-input";
+import debounce from "lodash.debounce";
+
+export const CancelTextInput = ({ t, config, setConfig }) => {
+ const [value, setValue] = useState(config.cancelButtonLabel);
+
+ const debouncedSetConfig = useCallback(
+ debounce((value) => {
+ setConfig((config) => {
+ return { ...config, cancelButtonLabel: value };
+ });
+ }, 500),
+ [setConfig],
+ );
+
+ const onChangeCancelLabel = (e) => {
+ setValue(e.target.value);
+ debouncedSetConfig(e.target.value);
+ };
+
+ return (
+ <>
+
+
+
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeToInsert.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeToInsert.js
new file mode 100644
index 0000000000..9cb4f8be61
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeToInsert.js
@@ -0,0 +1,53 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { Textarea } from "@docspace/shared/components/textarea";
+import { Text } from "@docspace/shared/components/text";
+import CodeBlock from "../sub-components/CodeBlock";
+
+import {
+ CategorySubHeader,
+ CodeWrapper,
+} from "../presets/StyledPresets";
+
+export const CodeToInsert = ({ t, theme, codeBlock, config }) => (
+
+
+ {`HTML ${t("CodeTitle")}`}
+
+
+ {t("HtmlCodeDescription")}
+
+
+
+ {`JavaScript ${t("CodeTitle")}`}
+
+
+ {t("JavaScriptCodeDescription")}
+
+
+
+);
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/DisplayPageBlock.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/DisplayPageBlock.js
new file mode 100644
index 0000000000..a4b2b93c44
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/DisplayPageBlock.js
@@ -0,0 +1,65 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { useState, useCallback } from "react";
+import debounce from "lodash.debounce";
+import { TextInput } from "@docspace/shared/components/text-input";
+import { Label } from "@docspace/shared/components/label";
+
+import { ControlsGroup } from "../presets/StyledPresets";
+
+export const DisplayPageBlock = ({ t, config, setConfig }) => {
+ const [value, setValue] = useState(config.filter.page);
+
+ const debouncedSetConfig = useCallback(
+ debounce((value) => {
+ setConfig((config) => ({
+ ...config,
+ filter: { ...config.filter, page: value },
+ }));
+ }, 500),
+ [setConfig],
+ );
+
+ const onChangePage = (e) => {
+ setValue(e.target.value);
+ debouncedSetConfig(e.target.page);
+ };
+
+ return (
+
+
+
+
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/FrameIdSetter.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/FrameIdSetter.js
new file mode 100644
index 0000000000..6885f8f613
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/FrameIdSetter.js
@@ -0,0 +1,65 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { useState, useCallback } from "react";
+import debounce from "lodash.debounce";
+import { TextInput } from "@docspace/shared/components/text-input";
+import { Label } from "@docspace/shared/components/label";
+
+import { ControlsGroup } from "../presets/StyledPresets";
+
+export const FrameIdSetter = (props) => {
+ const { t, defaultFrameId, setConfig } = props;
+
+ const [frameId, setFrameId] = useState(defaultFrameId);
+
+ const debouncedSetConfig = useCallback(
+ debounce((frameId) => {
+ setConfig((config) => {
+ return { ...config, frameId };
+ });
+ }, 500),
+ [setConfig],
+ );
+
+ const onChangeFrameId = (e) => {
+ setFrameId(e.target.value);
+ debouncedSetConfig(e.target.value);
+ };
+
+ return (
+
+
+
+
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/GetCodeBlock.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/GetCodeBlock.js
new file mode 100644
index 0000000000..415a6f4c2a
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/GetCodeBlock.js
@@ -0,0 +1,60 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+import { useState } from "react";
+import GetCodeDialog from "../sub-components/GetCodeDialog";
+import { Button } from "@docspace/shared/components/button";
+
+import { GetCodeButtonWrapper } from "../presets/StyledPresets";
+
+export const GetCodeBlock = ({ t, codeBlock, isDisabled }) => {
+ const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false);
+
+ const openGetCodeModal = () => setIsGetCodeDialogOpened(true);
+ const closeGetCodeModal = () => setIsGetCodeDialogOpened(false);
+
+ return (
+ <>
+
+
+
+
+
+
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/HeightSetter.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/HeightSetter.js
new file mode 100644
index 0000000000..b7382e75b3
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/HeightSetter.js
@@ -0,0 +1,87 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { useState, useCallback } from "react";
+import debounce from "lodash.debounce";
+import { TextInput } from "@docspace/shared/components/text-input";
+import { Label } from "@docspace/shared/components/label";
+import { ComboBox } from "@docspace/shared/components/combobox";
+
+import { ControlsGroup, RowContainer } from "../presets/StyledPresets";
+
+export const HeightSetter = (props) => {
+ const { t, setConfig, dataDimensions, defaultDimension, defaultHeight } =
+ props;
+
+ const [heightDimension, setHeightDimension] = useState(defaultDimension);
+ const [height, setHeight] = useState(defaultHeight);
+
+ const debouncedSetConfig = useCallback(
+ debounce((value, dimension) => {
+ setConfig((config) => {
+ return { ...config, height: `${value}${dimension}` };
+ });
+ }, 500),
+ [setConfig],
+ );
+
+ const onChangeHeight = (e) => {
+ setHeight(e.target.value);
+ debouncedSetConfig(e.target.value, heightDimension.label);
+ };
+
+ const onChangeHeightDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, height: `${height}${item.label}` };
+ });
+
+ setHeightDimension(item);
+ };
+
+ return (
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/ItemsCountBlock.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/ItemsCountBlock.js
new file mode 100644
index 0000000000..7ef707d5f6
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/ItemsCountBlock.js
@@ -0,0 +1,74 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { useState, useCallback } from "react";
+import debounce from "lodash.debounce";
+import { TextInput } from "@docspace/shared/components/text-input";
+import { HelpButton } from "@docspace/shared/components/help-button";
+import { Label } from "@docspace/shared/components/label";
+
+import { LabelGroup, ControlsGroup } from "../presets/StyledPresets";
+
+export const ItemsCountBlock = ({ t, count, setConfig }) => {
+ const [value, setValue] = useState(count);
+
+ const debouncedSetConfig = useCallback(
+ debounce((value) => {
+ setConfig((config) => ({
+ ...config,
+ filter: { ...config.filter, count: value },
+ }));
+ }, 500),
+ [setConfig],
+ );
+
+ const onChangeCount = (e) => {
+ debouncedSetConfig(e.target.value);
+ setValue(e.target.value);
+ };
+
+ return (
+
+
+
+ {t("ItemsCountDescription")}
+ }
+ />
+
+
+
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/MainElementParameter.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/MainElementParameter.js
new file mode 100644
index 0000000000..6459fbfc55
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/MainElementParameter.js
@@ -0,0 +1,143 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { useState, useCallback } from "react";
+import debounce from "lodash.debounce";
+
+import { RadioButtonGroup } from "@docspace/shared/components/radio-button-group";
+import { ColorInput } from "@docspace/shared/components/color-input";
+import { TextInput } from "@docspace/shared/components/text-input";
+import { Label } from "@docspace/shared/components/label";
+import { Text } from "@docspace/shared/components/text";
+import { Checkbox } from "@docspace/shared/components/checkbox";
+
+import {
+ CategorySubHeader,
+ ControlsGroup,
+ ControlsSection,
+ RowContainer,
+} from "../presets/StyledPresets";
+
+export const MainElementParameter = ({
+ t,
+ config,
+ setConfig,
+ isButtonMode = false,
+}) => {
+ const elementDisplayOptions = [
+ { value: "element", label: t("ElementItself") },
+ {
+ value: "button",
+ label: (
+
+ {t("Common:Button")}
+ {`(${t("ElementCalledAfterClicking")})`}
+
+ ),
+ },
+ ];
+
+ const [selectedElementType, setSelectedElementType] = useState(
+ elementDisplayOptions[Number(isButtonMode)].value,
+ );
+ const [buttonValue, setButtonValue] = useState(config.buttonText);
+
+ const debouncedSetConfig = useCallback(
+ debounce((key, value) => {
+ setConfig((config) => {
+ return { ...config, [key]: value };
+ });
+ }, 500),
+ [setConfig],
+ );
+
+ const toggleButtonMode = (e) => {
+ setSelectedElementType(e.target.value);
+ setConfig((config) => ({
+ ...config,
+ isButtonMode: e.target.value === "button",
+ }));
+ };
+
+ const setButtonColor = (color) => {
+ debouncedSetConfig("buttonColor", color);
+ };
+
+ const setButtonText = (e) => {
+ setButtonValue(e.target.value);
+ debouncedSetConfig("buttonText", e.target.value);
+ };
+
+ const toggleWithLogo = () => {
+ setConfig((config) => ({
+ ...config,
+ buttonWithLogo: !config.buttonWithLogo,
+ }));
+ };
+
+ return (
+
+ {t("MainElementParameter")}
+
+ {config.isButtonMode && (
+ <>
+ {t("ButtonCustomization")}
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetWrapper.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetWrapper.js
new file mode 100644
index 0000000000..4897f078ca
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetWrapper.js
@@ -0,0 +1,46 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+import { Text } from "@docspace/shared/components/text";
+
+import {
+ SDKContainer,
+ CategoryHeader,
+ CategoryDescription,
+} from "../presets/StyledPresets";
+
+export const PresetWrapper = (props) => {
+ const { children, description, header } = props;
+
+ return (
+
+
+ {description}
+
+ {header}
+ {children}
+
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PreviewBlock.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PreviewBlock.js
new file mode 100644
index 0000000000..7bf040ca31
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PreviewBlock.js
@@ -0,0 +1,94 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { useState, useEffect } from "react";
+import { objectToGetParams } from "@docspace/shared/utils/common";
+import { TabsContainer } from "@docspace/shared/components/tabs-container";
+
+import { CodeToInsert } from "./CodeToInsert";
+import { GetCodeBlock } from "./GetCodeBlock";
+
+import { Preview } from "../presets/StyledPresets";
+import { showPreviewThreshold } from "../constants";
+
+export const PreviewBlock = ({
+ t,
+ loadCurrentFrame,
+ preview,
+ theme,
+ frameId,
+ scriptUrl,
+ config,
+ isDisabled = false,
+}) => {
+ const [showPreview, setShowPreview] = useState(
+ window.innerWidth > showPreviewThreshold,
+ );
+ const params = objectToGetParams(config);
+
+ const codeBlock = `
Fallback text
\n`;
+
+ const code = (
+
+ );
+ const dataTabs = [
+ {
+ key: "preview",
+ title: t("Common:Preview"),
+ content: preview,
+ },
+ {
+ key: "code",
+ title: t("Code"),
+ content: code,
+ },
+ ];
+
+ const onResize = () => {
+ const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold;
+ if (isEnoughWidthForPreview !== showPreview)
+ setShowPreview(isEnoughWidthForPreview);
+ };
+
+ useEffect(() => {
+ window.addEventListener("resize", onResize);
+ return () => {
+ window.removeEventListener("resize", onResize);
+ };
+ }, [showPreview]);
+
+ return showPreview ? (
+
+
+
+ ) : (
+
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/SearchTerm.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/SearchTerm.js
new file mode 100644
index 0000000000..00c0c7fe3f
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/SearchTerm.js
@@ -0,0 +1,81 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { useState, useCallback } from "react";
+import debounce from "lodash.debounce";
+
+import { Label } from "@docspace/shared/components/label";
+import { TextInput } from "@docspace/shared/components/text-input";
+import { Checkbox } from "@docspace/shared/components/checkbox";
+
+import { ColumnContainer } from "../presets/StyledPresets";
+
+export const SearchTerm = ({ t, config, setConfig }) => {
+ const [value, setValue] = useState(config.filter.filterValue);
+
+ const debouncedSetConfig = useCallback(
+ debounce((value) => {
+ setConfig((config) => ({
+ ...config,
+ filter: { ...config.filter, filterValue: value },
+ }));
+ }, 500),
+ [setConfig],
+ );
+
+ const onChangeSearch = (e) => {
+ setValue(e.target.value);
+ debouncedSetConfig(e.target.value);
+ };
+
+ const onChangeWithSubfolders = () => {
+ setConfig((config) => ({
+ ...config,
+ withSubfolders: !config.withSubfolders,
+ }));
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/SelectTextInput.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/SelectTextInput.js
new file mode 100644
index 0000000000..00cdb8d230
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/SelectTextInput.js
@@ -0,0 +1,61 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { useState, useCallback } from "react";
+import { Label } from "@docspace/shared/components/label";
+import { TextInput } from "@docspace/shared/components/text-input";
+import debounce from "lodash.debounce";
+
+export const SelectTextInput = ({ t, config, setConfig }) => {
+ const [value, setValue] = useState(config.acceptButtonLabel);
+
+ const debouncedSetConfig = useCallback(
+ debounce((value) => {
+ setConfig((config) => {
+ return { ...config, acceptButtonLabel: value };
+ });
+ }, 500),
+ [setConfig],
+ );
+
+ const onChangeAcceptLabel = (e) => {
+ setValue(e.target.value);
+ debouncedSetConfig(e.target.value);
+ };
+
+ return (
+ <>
+
+
+
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/SharedLinkHint.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/SharedLinkHint.js
new file mode 100644
index 0000000000..388500f347
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/SharedLinkHint.js
@@ -0,0 +1,73 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { Link } from "@docspace/shared/components/link";
+import { Text } from "@docspace/shared/components/text";
+
+export const SharedLinkHint = ({
+ t,
+ linkSettings,
+ redirectToSelectedRoom,
+ currentColorScheme,
+}) => {
+ const settingsTranslations = {
+ password: t("Common:Password").toLowerCase(),
+ denyDownload: t("FileContentCopy").toLowerCase(),
+ expirationDate: t("LimitByTime").toLowerCase(),
+ };
+
+ return (
+ linkSettings.length > 0 && (
+
+ )
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/WidthSetter.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/WidthSetter.js
new file mode 100644
index 0000000000..078c13bc64
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/WidthSetter.js
@@ -0,0 +1,87 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { useState, useCallback } from "react";
+import debounce from "lodash.debounce";
+import { TextInput } from "@docspace/shared/components/text-input";
+import { Label } from "@docspace/shared/components/label";
+import { ComboBox } from "@docspace/shared/components/combobox";
+
+import { ControlsGroup, RowContainer } from "../presets/StyledPresets";
+
+export const WidthSetter = (props) => {
+ const { t, setConfig, dataDimensions, defaultDimension, defaultWidth } =
+ props;
+
+ const [widthDimension, setWidthDimension] = useState(defaultDimension);
+ const [width, setWidth] = useState(defaultWidth);
+
+ const debouncedSetConfig = useCallback(
+ debounce((value, dimension) => {
+ setConfig((config) => {
+ return { ...config, width: `${value}${dimension}` };
+ });
+ }, 500),
+ [setConfig],
+ );
+
+ const onChangeWidth = (e) => {
+ setWidth(e.target.value);
+ debouncedSetConfig(e.target.value, widthDimension.label);
+ };
+
+ const onChangeWidthDimension = (item) => {
+ setConfig((config) => {
+ return { ...config, width: `${width}${item.label}` };
+ });
+
+ setWidthDimension(item);
+ };
+
+ return (
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/utils/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/utils/index.js
new file mode 100644
index 0000000000..cff00ae0eb
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/utils/index.js
@@ -0,0 +1,41 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+import debounce from "lodash.debounce";
+import { objectToGetParams, loadScript } from "@docspace/shared/utils/common";
+
+export const loadFrame = debounce((config, scriptUrl) => {
+ const script = document.getElementById("integration");
+
+ if (script) {
+ script.remove();
+ }
+
+ const params = objectToGetParams(config);
+
+ loadScript(`${scriptUrl}${params}`, "integration", () =>
+ window.DocSpace.SDK.initFrame(config),
+ );
+}, 500);
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
index 3b27e7bf79..f39c275353 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
@@ -36,7 +36,6 @@ import TickSvgUrl from "PUBLIC_DIR/images/tick.svg?url";
const SessionsRow = (props) => {
const {
item,
- standalone,
sectionWidth,
currentSession,
setPlatformModalData,
@@ -88,19 +87,16 @@ const SessionsRow = (props) => {
ip={item.ip}
sectionWidth={sectionWidth}
showTickIcon={showTickIcon}
- standalone={standalone}
/>
);
};
-export default inject(({ setup, settingsStore }) => {
- const { standalone } = settingsStore;
+export default inject(({ setup }) => {
const { currentSession, setLogoutDialogVisible, setPlatformModalData } =
setup;
return {
- standalone,
currentSession,
setLogoutDialogVisible,
setPlatformModalData,
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
index 5802105237..dc39f35d65 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
@@ -47,7 +47,6 @@ const StyledRowContent = styled(RowContent)`
const SessionsRowContent = ({
id,
- standalone,
platform,
browser,
date,
@@ -70,10 +69,11 @@ const SessionsRowContent = ({
)}
{convertTime(date)}
- {!standalone && (
+ {(country || city) && (
{country}
- {` ${city}`}
+ {country && city && ", "}
+ {city}
)}
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
index edd6c7da49..6f472af87d 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
@@ -82,7 +82,6 @@ const SessionsTableRow = (props) => {
const {
item,
hideColumns,
- standalone,
currentSession,
setPlatformModalData,
setLogoutDialogVisible,
@@ -125,15 +124,15 @@ const SessionsTableRow = (props) => {
- {!standalone ? (
+ {(country || city) && (
<>
- {country}, {city}
+ {country}
+ {country && city && ", "}
+ {city}
- {ip}
- ) : (
- <>{ip}
)}
+ {ip}
@@ -153,13 +152,11 @@ const SessionsTableRow = (props) => {
);
};
-export default inject(({ setup, settingsStore }) => {
- const { standalone } = settingsStore;
+export default inject(({ setup }) => {
const { currentSession, setLogoutDialogVisible, setPlatformModalData } =
setup;
return {
- standalone,
currentSession,
setLogoutDialogVisible,
setPlatformModalData,