@anji-dashing/dam-solution-v2 5.8.173

package/build/MyDrive/fileDetails/Comments.js

@@ -0,0 +1,65 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Pagination } from "antd";
+import { useEffect, useMemo, useState } from "react";
+import CreateComment from "./CreateComment";
+import { EntityType, NotificationStatus, } from "../../utilities/constants/interface";
+import { DEFAULT_PAGE } from "../../hocs/appConstants";
+import { showNotification } from "../../common/notifications";
+import { SOMETHING_WENT_WRONG } from "../../utilities/constants/messages";
+import { get, map } from "lodash";
+import { FETCH_COMMENTS_URL, FETCH_REPLIES_URL, } from "../../utilities/constants/apiUrls";
+import { addQueryParams } from "../../hocs/helpers";
+import CommentEntity from "./CommentEntity";
+import CustomLoader from "../../common/loader/CustomLoader";
+import { createApiClient } from "../../hocs/configureAxios";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+import { COMMENT_EMPTY_URL } from "../../utilities/constants/imageUrls";
+const Comments = ({ file, parentId, }) => {
+    const [state, setState] = useState({
+        loading: false,
+        comments: [],
+        totalPages: 0,
+        totalCount: 0,
+        currentPage: DEFAULT_PAGE,
+    });
+    const damConfig = useDamConfig();
+    const { brand } = damConfig;
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const { loading, comments, totalPages, totalCount, currentPage } = state;
+    const fetchComments = (...args_1) => __awaiter(void 0, [...args_1], void 0, function* (params = {}) {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
+        const options = parentId
+            ? params
+            : Object.assign(Object.assign({}, params), { referenceId: get(file, "_id"), referenceType: EntityType.FILE });
+        try {
+            const response = parentId
+                ? yield api.get(`${FETCH_REPLIES_URL.replace(":commentId", parentId)}?${addQueryParams(options)}`)
+                : yield api.get(`${FETCH_COMMENTS_URL.replace(":fileId", get(file, "_id"))}?${addQueryParams(options)}`);
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false, comments: parentId
+                    ? get(response, "data.replies", [])
+                    : get(response, "data.comments", []), totalCount: get(response, "data.totalCount", 0), totalPages: get(response, "data.totalPages", 0), currentPage: get(response, "data.currentPage", DEFAULT_PAGE) })));
+        }
+        catch (error) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false })));
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        }
+    });
+    useEffect(() => {
+        if (brand && (file || parentId)) {
+            fetchComments();
+        }
+    }, [file, parentId]);
+    return (_jsxs("div", { className: parentId ? "md-lib-px-2" : "md-lib-px-5 md-lib-min-h-[calc(100vh-135px)]", children: [loading ? (_jsx("div", { className: "md-lib-flex md-lib-justify-center md-lib-mt-8", children: _jsx(CustomLoader, {}) })) : (_jsxs(_Fragment, { children: [totalCount < 1 ? (_jsxs("div", { className: `md-lib-flex md-lib-flex-col md-lib-items-center md-lib-justify-center ${parentId ? "" : ""} `, children: [_jsx("img", { src: COMMENT_EMPTY_URL, alt: "No comments", width: 182, height: 114 }), _jsx("p", { className: "md-lib-pt-3 md-lib-font-semibold md-lib-text-textColor dark:md-lib-text-darkTextColor", children: parentId
+                                    ? "No replies has been added yet"
+                                    : "No comments has been added yet" })] })) : (_jsx("div", { className: "md-lib-space-y-6 md-lib-pb-6", children: map(comments, (comment) => (_jsx(CommentEntity, { comment: comment, refreshData: (params) => fetchComments(params), parentId: parentId, file: file }))) })), _jsx(CreateComment, { file: file, refreshData: () => fetchComments(), parentId: parentId })] })), totalPages > 1 && (_jsx(Pagination, { total: totalCount, showSizeChanger: false, onChange: (page) => fetchComments({ page }) }))] }));
+};
+export default Comments;

package/build/MyDrive/fileDetails/Compliance.d.ts

@@ -0,0 +1,2 @@
+declare const Compliance: () => JSX.Element;
+export default Compliance;

package/build/MyDrive/fileDetails/Compliance.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Select } from "antd";
+import { useState } from "react";
+import { GoPlusCircle } from "react-icons/go";
+import { COMPLIANCE_EMPTY_URL } from "../../utilities/constants/imageUrls";
+const GoPlusCircleIcon = GoPlusCircle;
+const Compliance = () => {
+    const [metadata, setMetadata] = useState(true);
+    const options = [
+        { value: "basic_product", label: "Basic product" },
+        { value: "basic_product_test", label: "Basic product test" },
+        { value: "basic_details", label: "Basic details" },
+        { value: "basic_properties", label: "Basic properties" },
+        { value: "product_detail", label: "Product Detail" },
+    ];
+    return (_jsx("div", { children: !metadata ? (_jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-items-center md-lib-justify-center min-h-[calc(100vh-127px)]", children: [_jsx("img", { src: COMPLIANCE_EMPTY_URL, alt: "No comments", width: 182, height: 114 }), _jsx("p", { className: "md-lib-py-3 md-lib-pb-2 md-lib-font-semibold md-lib-text-textColor dark:md-lib-text-darkTextColor", children: "No brand guidelines has been created yet" }), _jsx(Button, { size: "large", type: "primary", icon: _jsx(GoPlusCircleIcon, { size: 24 }), children: "Add Guidelines" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-justify-between md-lib-pb-4 md-lib-gap-2 md-lib-border-b md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-px-5", children: [_jsx(Select, { options: options, placeholder: "Select Template", className: "md-lib-w-full md-lib-h-12", popupClassName: "custom-template-options" }), _jsx(Button, { size: "large", variant: "outlined", color: "primary", children: "Check" })] }), _jsx("div", { className: "md-lib-p-5" })] })) }));
+};
+export default Compliance;

package/build/MyDrive/fileDetails/CreateComment.d.ts

@@ -0,0 +1,7 @@
+import { FileEntity } from "../../utilities/constants/interface";
+declare function CreateComment({ file, refreshData, parentId, }: {
+    file: FileEntity;
+    refreshData: () => void;
+    parentId?: string;
+}): JSX.Element;
+export default CreateComment;

package/build/MyDrive/fileDetails/CreateComment.js

@@ -0,0 +1,48 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import CustomButton from "../../common/Button";
+import Editor from "./Editor";
+import { showNotification } from "../../common/notifications";
+import { CREATE_SUCCESS, SOMETHING_WENT_WRONG, } from "../../utilities/constants/messages";
+import { EntityType, NotificationStatus, } from "../../utilities/constants/interface";
+import { get, merge } from "lodash";
+import { FETCH_COMMENTS_URL } from "../../utilities/constants/apiUrls";
+import { createApiClient } from "../../hocs/configureAxios";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+function CreateComment({ file, refreshData, parentId, }) {
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const [state, setState] = useState({
+        editorState: "",
+        loading: false,
+    });
+    const { editorState, loading } = state;
+    const handleCreate = () => __awaiter(this, void 0, void 0, function* () {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
+        try {
+            const response = yield api.post(FETCH_COMMENTS_URL, merge({}, {
+                referenceId: get(file, "_id"),
+                referenceType: EntityType.FILE,
+                text: editorState,
+            }, parentId ? { parentId } : {}));
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false, editorState: "" })));
+            refreshData();
+            showNotification(get(response, "data.message", CREATE_SUCCESS), NotificationStatus.SUCCESS);
+        }
+        catch (error) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false })));
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        }
+    });
+    return (_jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-gap-2", children: [_jsx(Editor, { setEditorState: (state) => setState((prevState) => (Object.assign(Object.assign({}, prevState), { editorState: state }))), parentId: parentId }), _jsx("div", { className: "md-lib-flex md-lib-justify-end md-lib-pt-2", children: _jsx(CustomButton, { type: "primary", label: parentId ? "Reply" : "Comment", onClick: handleCreate, loading: loading }) })] }));
+}
+export default CreateComment;

package/build/MyDrive/fileDetails/Editor.d.ts

@@ -0,0 +1,6 @@
+declare const Editor: ({ setEditorState, editorState, parentId, }: {
+    setEditorState: (state: string) => void;
+    editorState?: string;
+    parentId?: string;
+}) => JSX.Element;
+export default Editor;

package/build/MyDrive/fileDetails/Editor.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Strike from "@tiptap/extension-strike";
+import { Button } from "antd";
+import { BoldOutlined, ItalicOutlined, UnderlineOutlined, StrikethroughOutlined, SmileOutlined, } from "@ant-design/icons";
+import EmojiPicker from "./EmojiPicker";
+const Editor = ({ setEditorState, editorState, parentId, }) => {
+    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+    const [activeFormats, setActiveFormats] = useState({
+        bold: false,
+        italic: false,
+        underline: false,
+        strike: false,
+    });
+    const editor = useEditor({
+        extensions: [StarterKit.configure({}), Underline, Strike],
+        content: editorState || "",
+        immediatelyRender: false,
+        onUpdate: () => {
+            updateFormatStates();
+            if (setEditorState) {
+                setEditorState((editor === null || editor === void 0 ? void 0 : editor.getHTML()) || "");
+            }
+        },
+    });
+    const updateFormatStates = () => {
+        if (!editor)
+            return;
+        setActiveFormats({
+            bold: editor.isActive("bold"),
+            italic: editor.isActive("italic"),
+            underline: editor.isActive("underline"),
+            strike: editor.isActive("strike"),
+        });
+    };
+    useEffect(() => {
+        if (!editor)
+            return;
+        updateFormatStates();
+        editor.on("selectionUpdate", updateFormatStates);
+        editor.on("transaction", updateFormatStates);
+        return () => {
+            editor.off("selectionUpdate", updateFormatStates);
+            editor.off("transaction", updateFormatStates);
+        };
+    }, [editor]);
+    return (_jsxs("div", { className: "md-lib-w-full md-lib-max-w-2xl md-lib-mx-auto md-lib-mt-8 md-lib-p-2 md-lib-border md-lib-rounded md-lib-shadow-sm", children: [_jsxs("div", { className: "md-lib-flex md-lib-gap-2 mb-4", children: [_jsx(Button, { icon: _jsx(BoldOutlined, {}), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBold().run(), type: activeFormats.bold ? "primary" : "default" }), _jsx(Button, { icon: _jsx(ItalicOutlined, {}), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleItalic().run(), type: activeFormats.italic ? "primary" : "default" }), _jsx(Button, { icon: _jsx(UnderlineOutlined, {}), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleUnderline().run(), type: activeFormats.underline ? "primary" : "default" }), _jsx(Button, { icon: _jsx(StrikethroughOutlined, {}), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleStrike().run(), type: activeFormats.strike ? "primary" : "default" }), _jsx(Button, { icon: _jsx(SmileOutlined, {}), onClick: () => setShowEmojiPicker(!showEmojiPicker) })] }), showEmojiPicker && (_jsx(EmojiPicker, { onSelect: (emoji) => {
+                    editor === null || editor === void 0 ? void 0 : editor.chain().focus().insertContent(emoji).run();
+                    setShowEmojiPicker(false);
+                } })), _jsx(EditorContent, { editor: editor, className: `md-lib-prose dark:md-lib-prose-invert md-lib-border md-lib-rounded ${parentId ? "md-lib-min-h-14" : "md-lib-min-h-36"} md-lib-p-2 focus:md-lib-outline-none` })] }));
+};
+export default Editor;

package/build/MyDrive/fileDetails/EmojiPicker.d.ts

@@ -0,0 +1,5 @@
+interface EmojiPickerProps {
+    onSelect: (emoji: string) => void;
+}
+export default function EmojiPicker({ onSelect }: EmojiPickerProps): JSX.Element;
+export {};

package/build/MyDrive/fileDetails/EmojiPicker.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+export default function EmojiPicker({ onSelect }) {
+    return (_jsx("div", { className: "md-lib-absolute md-lib-z-50 md-lib-mt-2", children: _jsx(Picker, { data: data, onEmojiSelect: (emoji) => onSelect(emoji.native), theme: "light" }) }));
+}

package/build/MyDrive/fileDetails/FileDetails.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { FileEntity } from "../../utilities/constants/interface";
+declare const FileDetails: ({ open, handleClose, file, files, fileIds, onCloseSelection, }: {
+    handleClose?: () => void;
+    open: boolean;
+    file?: FileEntity;
+    files?: FileEntity[] | undefined;
+    fileIds?: string[];
+    onCloseSelection?: () => void;
+}) => React.ReactPortal | null;
+export default FileDetails;

package/build/MyDrive/fileDetails/FileDetails.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import FileDetailsHeader from "./FileHeader";
+import FileViewer from "./FileViewer";
+import { get, nth } from "lodash";
+import { useFile } from "../../react-query/services/file-services";
+import Loader from "../../common/loader/loader";
+import { createApiClient } from "../../hocs/configureAxios";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+import useAppParams from "../../utilities/useAppParams";
+const FileDetails = ({ open, handleClose, file, files, fileIds, onCloseSelection, }) => {
+    // Get the initial file - prefer file prop, fallback to first item in files array
+    const initialFile = useMemo(() => {
+        if (file)
+            return file;
+        if (files && files.length > 0)
+            return nth(files, 0);
+        return undefined;
+    }, [file, files]);
+    // Get the initial file ID - from file, files array, or fileIds prop
+    const initialFileId = useMemo(() => {
+        if (file)
+            return get(file, "_id") || "";
+        if (files && files.length > 0)
+            return get(nth(files, 0), "_id") || "";
+        if (fileIds && fileIds.length > 0)
+            return fileIds[0];
+        return "";
+    }, [file, files, fileIds]);
+    console.log("## FileDetails - files:", files, "file:", file, "initialFile:", initialFile, "fileIds:", fileIds, "initialFileId:", initialFileId);
+    const { id } = useAppParams();
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const [state, setState] = useState({
+        visible: false,
+        currentIndex: 0,
+        currentFileId: initialFileId,
+    });
+    const { visible, currentIndex, currentFileId } = state;
+    // Update currentFileId when initialFileId changes (e.g., when props load)
+    useEffect(() => {
+        if (initialFileId && !currentFileId) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { currentFileId: initialFileId })));
+        }
+    }, [initialFileId, currentFileId]);
+    const { data: fileData, isFetching, refetch } = useFile(api, currentFileId);
+    console.log("fileData", fileData, "isFetching", isFetching);
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        return null;
+    }
+    const prevFileId = useRef();
+    useEffect(() => {
+        const prevFileState = prevFileId.current;
+        const shouldRefetch = prevFileState !== currentFileId;
+        if (shouldRefetch) {
+            refetch();
+        }
+        prevFileId.current = currentFileId;
+    }, [currentFileId]);
+    const currentFile = useMemo(() => {
+        // Priority: fileData (from API) > file prop > files array item > initialFile
+        if (fileData) {
+            return fileData;
+        }
+        else if (id) {
+            return file || initialFile;
+        }
+        else if (file) {
+            return file;
+        }
+        else if (files && files.length > 0) {
+            return nth(files, currentIndex);
+        }
+        else {
+            return initialFile;
+        }
+    }, [files, currentIndex, file, initialFile, fileData, isFetching, id]);
+    const handlePrevious = () => {
+        if (files && currentIndex > 0) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { currentIndex: prevState.currentIndex - 1, currentFileId: get(nth(files, currentIndex - 1), "_id") || get(currentFile, "prevFileId") || "" })));
+        }
+        else if (fileIds && fileIds.length > 1 && currentIndex > 0) {
+            const prevIndex = currentIndex - 1;
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { currentIndex: prevIndex, currentFileId: fileIds[prevIndex] || "" })));
+        }
+        else {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { currentFileId: get(currentFile, "prevFileId") || "" })));
+        }
+    };
+    const handleNext = () => {
+        if (files && currentIndex < get(files, "length", 0) - 1) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { currentIndex: prevState.currentIndex + 1, currentFileId: get(nth(files, currentIndex + 1), "_id") || get(currentFile, "nextFileId") || "" })));
+        }
+        else if (fileIds && fileIds.length > 1 && currentIndex < fileIds.length - 1) {
+            const nextIndex = currentIndex + 1;
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { currentIndex: nextIndex, currentFileId: fileIds[nextIndex] || "" })));
+        }
+        else {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { currentFileId: get(currentFile, "nextFileId") || "" })));
+        }
+    };
+    useEffect(() => {
+        if (open) {
+            setTimeout(() => setState((prevState) => (Object.assign(Object.assign({}, prevState), { visible: true }))), 10);
+        }
+        else {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { visible: false })));
+        }
+    }, [open]);
+    if (!open && !visible)
+        return null;
+    const modalContent = (_jsxs("div", { className: `md-lib-fixed md-lib-inset-0 md-lib-z-[1000] md-lib-w-screen md-lib-h-screen md-lib-bg-white dark:md-lib-bg-darkPrimary md-lib-text-black dark:md-lib-text-white md-lib-overflow-auto md-lib-transform md-lib-transition-all md-lib-duration-300 md-lib-ease-in-out ${open && visible
+            ? "md-lib-opacity-100 md-lib-translate-y-0"
+            : "md-lib-opacity-0 md-lib-translate-y-4"}`, onTransitionEnd: () => {
+            if (!open)
+                setState((prevState) => (Object.assign(Object.assign({}, prevState), { visible: false })));
+        }, children: [_jsx(FileDetailsHeader, { handleClose: handleClose, file: currentFile, onCloseSelection: onCloseSelection }), isFetching ? (_jsx(Loader, {})) : (_jsx(FileViewer, { file: currentFile, hasPrev: (!!files && currentIndex > 0) ||
+                    (!!fileIds && fileIds.length > 1 && currentIndex > 0) ||
+                    !!get(currentFile, "prevFileId"), hasNext: (!!files && currentIndex < get(files, "length", 0) - 1) ||
+                    (!!fileIds && fileIds.length > 1 && currentIndex < fileIds.length - 1) ||
+                    !!get(currentFile, "nextFileId"), onPrev: handlePrevious, onNext: handleNext, handleClose: handleClose }))] }));
+    return ReactDOM.createPortal(modalContent, document.body);
+};
+export default FileDetails;

package/build/MyDrive/fileDetails/FileHeader.d.ts

@@ -0,0 +1,7 @@
+import { FileEntity, FolderEntity } from "../../utilities/constants/interface";
+declare const FileDetailsHeader: ({ handleClose, file, onCloseSelection, }: {
+    handleClose?: () => void;
+    file: FileEntity & FolderEntity;
+    onCloseSelection?: () => void;
+}) => JSX.Element;
+export default FileDetailsHeader;

package/build/MyDrive/fileDetails/FileHeader.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "antd";
+import { IoIosClose } from "react-icons/io";
+import { BsDownload } from "react-icons/bs";
+import { DriveModes, NotificationStatus, } from "../../utilities/constants/interface";
+import { get } from "lodash";
+import { showNotification } from "../../common/notifications";
+import { INVALID_URL } from "../../utilities/constants/messages";
+import FileMenuOptions from "../FileMenuOptions";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+import useAppParams from "../../utilities/useAppParams";
+const IoIosCloseIcon = IoIosClose;
+const BsDownloadIcon = BsDownload;
+const FileDetailsHeader = ({ handleClose, file, onCloseSelection, }) => {
+    const damConfig = useDamConfig();
+    const { isAdmin } = damConfig;
+    const { id, type } = useAppParams();
+    return (_jsxs("div", { className: "md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor md-lib-py-3 md-lib-px-5 md-lib-border-b md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-flex md-lib-justify-between md-lib-items-center", children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-5", children: [!id && type !== DriveModes.FILE && (_jsx(IoIosCloseIcon, { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-cursor-pointer", size: 24, onClick: handleClose })), !!file && (_jsx("h4", { className: "md-lib-font-semibold md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-text-base md-lib-truncate md-lib-max-w-[calc(100vw-180px)]", title: get(file, "name", "N/A"), children: get(file, "name", "N/A") }))] }), !!file && (_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-4", children: [_jsx(FileMenuOptions, { file: file, fileIds: get(file, "_id") ? [get(file, "_id")] : [], onCloseSelection: onCloseSelection, fileModal: true }), _jsx(Button, { size: "large", className: "md-lib-bg-secondaryColor dark:md-lib-bg-darkSecondaryColor hover:md-lib-bg-secondaryHoverColor dark:hover:md-lib-bg-darkSecondaryColor md-lib-border-none", onClick: () => {
+                            const url = get(file, "downloadUrl") || get(file, "s3Url") || get(file, "thumbnailUrl");
+                            if (!url) {
+                                showNotification(INVALID_URL, NotificationStatus.ERROR);
+                                return;
+                            }
+                            window.open(url, "_blank");
+                        }, children: _jsx(BsDownloadIcon, { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor", size: 24 }) })] }))] }));
+};
+export default FileDetailsHeader;

package/build/MyDrive/fileDetails/FileViewer.d.ts

@@ -0,0 +1,10 @@
+import { FileEntity } from "../../utilities/constants/interface";
+declare const FileViewer: ({ file, onNext, onPrev, hasNext, hasPrev, handleClose, }: {
+    file: FileEntity;
+    hasPrev: boolean;
+    hasNext: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+    handleClose?: () => void;
+}) => JSX.Element;
+export default FileViewer;

package/build/MyDrive/fileDetails/FileViewer.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Layout, Button } from "antd";
+import { useState } from "react";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import PreviewDetails from "./Previewdetails";
+import MapFile from "../files/MapFile";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+import { get } from "lodash";
+const { Content } = Layout;
+const FileViewer = ({ file, onNext, onPrev, hasNext, hasPrev, handleClose, }) => {
+    const damConfig = useDamConfig();
+    const brand = damConfig === null || damConfig === void 0 ? void 0 : damConfig.brand;
+    const showFilePreview = get(brand, "showFilePreview", false);
+    const [metadataOpen, setMetadataOpen] = useState(showFilePreview);
+    return (_jsx(Layout, { className: "md-lib-h-full", children: _jsxs(Content, { className: "md-lib-flex md-lib-h-full md-lib-w-full", children: [_jsx("div", { className: `md-lib-flex md-lib-items-center md-lib-justify-center md-lib-relative md-lib-bg-textColorActive dark:md-lib-bg-darkSecondaryColor md-lib-min-h-full ${metadataOpen ? "md-lib-flex-1" : "md-lib-flex-1 md-lib-w-full"}`, children: _jsx(PreviewDetails, { file: file, hasNext: hasNext, hasPrev: hasPrev, onNext: onNext, onPrev: onPrev, showFilePreview: showFilePreview }) }), showFilePreview && (_jsxs(_Fragment, { children: [_jsx(Button, { type: "text", className: "md-lib-shrink-0 md-lib-flex md-lib-items-center md-lib-justify-center md-lib-w-10 md-lib-h-10 md-lib-rounded-none md-lib-bg-black/50 hover:md-lib-bg-black/70 dark:md-lib-bg-white/20 dark:hover:md-lib-bg-white/30 md-lib-text-white md-lib-border-0 md-lib-self-start md-lib-mt-4", onClick: () => setMetadataOpen((prev) => !prev), "aria-label": metadataOpen ? "Hide Metadata" : "Show Metadata", children: metadataOpen ? (_jsx(RightOutlined, { className: "md-lib-text-lg" })) : (_jsx(LeftOutlined, { className: "md-lib-text-lg" })) }), metadataOpen && (_jsx("div", { className: "md-lib-w-[400px] md-lib-min-w-[320px] md-lib-shrink-0 md-lib-border-l md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-bg-backgroundColor dark:md-lib-bg-darkPrimary md-lib-overflow-y-auto", children: _jsx(MapFile, { fromUpload: false, filesList: file ? [file] : [], handleCancel: handleClose ? () => handleClose() : undefined }) }))] }))] }) }));
+};
+export default FileViewer;

package/build/MyDrive/fileDetails/ImageOptions.d.ts

@@ -0,0 +1,2 @@
+declare const ImageOptions: ({ zoom, setZoom, zoomOptions, file }: any) => JSX.Element;
+export default ImageOptions;

package/build/MyDrive/fileDetails/ImageOptions.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AiOutlineInfoCircle, AiOutlineZoomIn, AiOutlineZoomOut, AiOutlineEdit, } from "react-icons/ai";
+import { FiChevronDown } from "react-icons/fi";
+import { useState } from "react";
+import { PiCameraRotate } from "react-icons/pi";
+import { MdOutlineCrop } from "react-icons/md";
+import { Dropdown, Popover, } from "antd";
+import EditImageModal from "../ImageEditor/EditImageModal";
+import ManageFile from "./ManageFile";
+import { FileInfoContent } from "../../common/CustomElements";
+const AiOutlineInfoCircleIcon = AiOutlineInfoCircle;
+const AiOutlineZoomOutIcon = AiOutlineZoomOut;
+const FiChevronDownIcon = FiChevronDown;
+const AiOutlineZoomInIcon = AiOutlineZoomIn;
+const PiCameraRotateIcon = PiCameraRotate;
+const MdOutlineCropIcon = MdOutlineCrop;
+const AiOutlineEditIcon = AiOutlineEdit;
+const ImageOptions = ({ zoom, setZoom, zoomOptions, file }) => {
+    const [state, setState] = useState({
+        showEditModal: false,
+        showFileAccess: false,
+    });
+    const { showEditModal, showFileAccess } = state;
+    const toggleFileAccess = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { showFileAccess: !prevState.showFileAccess })));
+    };
+    const toggleEditModal = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { showEditModal: !prevState.showEditModal })));
+    };
+    const zoomMenuItems = zoomOptions.map((value) => ({
+        key: value,
+        label: value,
+    }));
+    const handleZoomChange = ({ key }) => {
+        setZoom(key);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "md-lib-bg-white dark:md-lib-bg-darkPrimary md-lib-rounded-xl md-lib-shadow-md md-lib-px-4 md-lib-py-2 md-lib-flex md-lib-items-center md-lib-gap-4 md-lib-border md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-z-50", children: [_jsx(Popover, { content: _jsx(FileInfoContent, { file: file }), title: "File Info", placement: "top", children: _jsx("button", { className: "md-lib-p-2 hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg", onClick: toggleFileAccess, children: _jsx(AiOutlineInfoCircleIcon, { className: "md-lib-text-[20px]" }) }) }), _jsx("div", { className: "md-lib-w-[1px] md-lib-h-5 md-lib-bg-borderColor dark:md-lib-bg-darkBorderColor" }), _jsx("button", { className: "md-lib-p-2 hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg", onClick: () => setZoom((prev) => `${parseInt(prev) - 5}%`), disabled: zoom === "10%", children: _jsx(AiOutlineZoomOutIcon, { className: "md-lib-text-[20px]" }) }), _jsx(Dropdown, { menu: {
+                            items: zoomMenuItems,
+                            onClick: handleZoomChange,
+                            selectable: true,
+                            selectedKeys: [zoom],
+                        }, trigger: ["click"], placement: "top", children: _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-1 md-lib-px-3 md-lib-py-1 md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-md md-lib-cursor-pointer md-lib-text-sm md-lib-text-textColor dark:md-lib-text-darkTextColor", children: [zoom, _jsx(FiChevronDownIcon, { className: "md-lib-text-[16px]" })] }) }), _jsx("button", { className: "md-lib-p-2 hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg", onClick: () => setZoom((prev) => `${parseInt(prev) + 5}%`), disabled: zoom === "150%", children: _jsx(AiOutlineZoomInIcon, { className: "md-lib-text-[20px]" }) }), _jsx("div", { className: "md-lib-w-[1px] md-lib-h-5 md-lib-bg-borderColor dark:md-lib-bg-darkBorderColor" }), _jsx("button", { className: "md-lib-p-2 hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg md-lib-hidden md:md-lib-block", children: _jsx(PiCameraRotateIcon, { className: "md-lib-text-[20px]" }) }), _jsx("button", { className: "md-lib-p-2 hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg md-lib-hidden md:md-lib-block", onClick: toggleEditModal, children: _jsx(MdOutlineCropIcon, { className: "md-lib-text-[20px]" }) }), _jsx("button", { className: "md-lib-p-2 hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg md-lib-hidden md:md-lib-block", onClick: toggleEditModal, children: _jsx(AiOutlineEditIcon, { className: "md-lib-text-[20px]" }) })] }), showEditModal && (_jsx(EditImageModal, { open: showEditModal, handleClose: toggleEditModal, file: file })), showFileAccess && (_jsx(ManageFile, { open: showFileAccess, onClose: toggleFileAccess, file: file }))] }));
+};
+export default ImageOptions;

package/build/MyDrive/fileDetails/ImageViewer.d.ts

@@ -0,0 +1,6 @@
+import { FileEntity } from "../../utilities/constants/interface";
+declare const ImageViewer: ({ file, showFilePreview }: {
+    file: FileEntity;
+    showFilePreview?: boolean;
+}) => JSX.Element;
+export default ImageViewer;

package/build/MyDrive/fileDetails/ImageViewer.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { get } from "lodash";
+import ImageOptions from "./ImageOptions";
+import { useState } from "react";
+import { SAMPLE_IMAGE_URL } from "../../utilities/constants/imageUrls";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+const ImageViewer = ({ file, showFilePreview }) => {
+    const damConfig = useDamConfig();
+    const { isAdmin } = damConfig;
+    const [zoom, setZoom] = useState("100");
+    const zoomOptions = ["10", "25", "50", "75", "100"];
+    const imgWidth = 750 * (parseInt(zoom) / 100);
+    // const imgHeight = 333 * (parseInt(zoom) / 100);
+    return (_jsxs("div", { className: "md-lib-relative md-lib-flex md-lib-flex-col md-lib-h-[calc(100vh-65px)] md-lib-w-full md-lib-overflow-hidden", children: [_jsx("div", { className: "md-lib-flex-1 md-lib-flex md-lib-justify-center md-lib-items-center md-lib-w-full md-lib-overflow-auto md-lib-min-h-0", children: _jsx("img", { src: get(file, "s3Url") || get(file, "downloadUrl") || get(file, "thumbnailUrl", SAMPLE_IMAGE_URL), alt: get(file, "name", ""), width: imgWidth, height: "auto", className: "md-lib-max-w-full md-lib-max-h-full md-lib-object-contain" }) }), showFilePreview && (_jsx("div", { className: "md-lib-flex md-lib-justify-center md-lib-items-center md-lib-py-4 md-lib-shrink-0", children: _jsx(ImageOptions, { zoom: zoom, setZoom: setZoom, zoomOptions: zoomOptions, file: file }) }))] }));
+};
+export default ImageViewer;

package/build/MyDrive/fileDetails/ManageFile.d.ts

@@ -0,0 +1,7 @@
+import { FileEntity, FolderEntity } from "../../utilities/constants/interface";
+declare function ManageFile({ onClose, open, file, }: {
+    onClose: () => void;
+    open: boolean;
+    file: FileEntity & FolderEntity;
+}): JSX.Element;
+export default ManageFile;

package/build/MyDrive/fileDetails/ManageFile.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Divider, Drawer } from "antd";
+import { capitalize, get, slice } from "lodash";
+import { DriveModes, EntityType, } from "../../utilities/constants/interface";
+import { useMemo, useState } from "react";
+import { getReadableFileType } from "../../hocs/helpers";
+import moment from "moment-timezone";
+import { APP_DATE_TIME_FORMAT, LOCAL_TIMEZONE } from "../../hocs/appConstants";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+import InviteTeamModal from "../../settings/InviteTeamModal";
+function ManageFile({ onClose, open, file, }) {
+    const [state, setState] = useState({ showShareFile: false });
+    const { showShareFile } = state;
+    const toggleShareFile = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { showShareFile: !prevState.showShareFile })));
+    };
+    const damConfig = useDamConfig();
+    const { user, isAdmin } = damConfig;
+    const userId = get(user, "_id");
+    const displayedUsers = useMemo(() => slice(get(file, "users", []), 0, 5), [file]);
+    const extraUsers = useMemo(() => get(file, "users.length") > 5 ? slice(get(file, "users", []), 5) : [], [file]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Drawer, { title: `${capitalize(get(file, "type", EntityType.FOLDER))} Details`, onClose: onClose, open: open, width: 440, children: [_jsxs("div", { children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Download Permission" }), _jsx("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor", children: "Viewers can download" })] }), _jsx(Divider, { className: "md-lib-border-secondaryHoverColor" }), _jsxs("h5", { className: "md-lib-text-base md-lib-font-semibold md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-mb-5", children: [capitalize(get(file, "type", EntityType.FOLDER)), " Details"] }), _jsxs("div", { className: "md-lib-mb-5", children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Type" }), _jsx("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor", children: get(file, "type") === EntityType.FILE
+                                    ? getReadableFileType(file)
+                                    : capitalize(get(file, "type", EntityType.FOLDER)) })] }), _jsxs("div", { className: "md-lib-mb-5", children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Id" }), _jsx("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor", children: get(file, "_id") })] }), _jsxs("div", { className: "md-lib-mb-5", children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Owner" }), _jsx("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor md-lib-truncate", title: get(file, "createdBy.name", "Unknown"), children: get(file, "createdBy.name") })] }), _jsxs("div", { className: "md-lib-mb-5", children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Modified" }), _jsx("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor", children: moment
+                                    .utc(get(file, "updatedAt"))
+                                    .tz(LOCAL_TIMEZONE)
+                                    .format(APP_DATE_TIME_FORMAT) })] }), _jsxs("div", { className: "md-lib-mb-5", children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Opened" }), _jsxs("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor", children: [moment().format(APP_DATE_TIME_FORMAT), " by me"] })] }), _jsxs("div", { className: "md-lib-mb-5", children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Created" }), _jsxs("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor md-lib-truncate", title: get(file, "createdBy.name", "Unknown"), children: [moment
+                                        .utc(get(file, "createdAt"))
+                                        .tz(LOCAL_TIMEZONE)
+                                        .format(APP_DATE_TIME_FORMAT), " ", "by", " ", get(file, "createdBy._id") === userId
+                                        ? "me"
+                                        : get(file, "createdBy.name")] })] })] }), showShareFile && (_jsx(InviteTeamModal, { open: showShareFile, onClose: toggleShareFile, onFetchInvitations: () => { }, shareModal: true, fileIds: get(file, "type") === EntityType.FILE ? [get(file, "_id")] : [], folderIds: get(file, "type") !== EntityType.FILE ? [get(file, "_id")] : [], inviteType: DriveModes.FILE, file: file }))] }));
+}
+export default ManageFile;

package/build/MyDrive/fileDetails/MetaForm.d.ts

@@ -0,0 +1,15 @@
+import type { FormInstance } from "antd";
+import { BrandUserEntity, MetaDataFieldEntity } from "../../utilities/constants/interface";
+export declare const buildInitialValues: (formData: Record<string, any>, metaFields: MetaDataFieldEntity[], isEditMode: boolean) => {
+    [x: string]: any;
+};
+export declare const getFormItem: (item: MetaDataFieldEntity, fromDefaultValue: boolean, userOptions?: BrandUserEntity[]) => JSX.Element | null;
+declare const MetaForm: ({ metaFields, metaData, form, isEditMode, }: {
+    metaFields: MetaDataFieldEntity[];
+    metaData: {
+        [key: string]: any;
+    };
+    form: FormInstance;
+    isEditMode: boolean;
+}) => JSX.Element;
+export default MetaForm;