@bindu-dashing/dam-solution-v2 5.9.251 → 5.9.252

package/build/MyDrive/FilesGridView.js

@@ -12,6 +12,7 @@ import { useState } from "react";
 import { useDamConfig } from "../hocs/DamConfigContext";
 import EditImageModal from "./ImageEditor/EditImageModal";
 import EditPdfModal from "./PdfEditor/EditPdfModal";
+import { withVersion } from "../utilities/helpers/cacheBust";
 const IconInprogress = GrInProgress;
 const AiOutlineEditIcon = AiOutlineEdit;
 const AiOutlineCheckCircleIcon = AiOutlineCheckCircle;
@@ -51,7 +52,7 @@ const FilesGridView = ({ files, handleClick, selectedFileIds, isImagePicker, sel
                                                 openEditor(file);
                                             }, children: _jsx(AiOutlineEditIcon, { className: "md-lib-text-[18px] md-lib-text-textColor dark:md-lib-text-darkTextColor hover:md-lib-text-primary md-lib-cursor-pointer" }) }) }))] }), _jsx("div", { className: "md-lib-mt-2 md-lib-h-28 md-lib-mx-2.5 md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-md md-lib-flex md-lib-justify-center", children: get(file, "fileUploadStatus") === ThumbnailStatus.PENDING ? (
                                 // <IconInprogress className="mt-10 text-[40px] text-imagesColor" />
-                                _jsx(Image, { src: UPLOAD_FILE_IN_PROGRESS_WHITE_IMAGE, width: 100, height: 100 })) : (_jsx("img", { src: get(file, "thumbnailUrl", ""), alt: get(file, "name", "N/A"), className: "md-lib-w-full md-lib-h-full md-lib-object-contain md-lib-p-1" })) }), _jsx("div", { children: _jsx("p", { className: "md-lib-text-xs md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-px-5 md-lib-pt-2.5 md-lib-truncate md-lib-max-w-40", title: get(file, "name", "N/A"), children: get(file, "assetName", "N/A") }) })] }, get(file, "_id")));
+                                _jsx(Image, { src: UPLOAD_FILE_IN_PROGRESS_WHITE_IMAGE, width: 100, height: 100 })) : (_jsx("img", { src: withVersion(get(file, "thumbnailUrl", ""), get(file, "updatedAt")), alt: get(file, "name", "N/A"), className: "md-lib-w-full md-lib-h-full md-lib-object-contain md-lib-p-1" })) }), _jsx("div", { children: _jsx("p", { className: "md-lib-text-xs md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-px-5 md-lib-pt-2.5 md-lib-truncate md-lib-max-w-40", title: get(file, "name", "N/A"), children: get(file, "assetName", "N/A") }) })] }, get(file, "_id")));
                 }) }), showEditModal && editFile && getEditorType(editFile) === "image" && (_jsx(EditImageModal, { open: showEditModal, handleClose: closeEditor, file: editFile })), showEditModal && editFile && getEditorType(editFile) === "pdf" && (_jsx(EditPdfModal, { open: showEditModal, handleClose: closeEditor, file: editFile }))] }));
 };
 export default FilesGridView;

package/build/MyDrive/ImageEditor/EditImage.js

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Modal } from "antd";
 import { GoArrowLeft } from "react-icons/go";
 import { PiFloppyDisk } from "react-icons/pi";
 import TuiImageEditor from "./TuiImageEditor";
@@ -18,7 +19,7 @@ import { get } from "lodash";
 import CustomButton from "../../common/Button";
 import { showNotification } from "../../common/notifications";
 import { FILE_UPLOAD_ERROR, SOMETHING_WENT_WRONG, UPDATE_SUCCESS, } from "../../utilities/constants/messages";
-import { SAVE_EDITED_FILE_THUMBNAIL_URL, SAVE_EDITED_FILE_URL, } from "../../utilities/constants/apiUrls";
+import { FILE_UPLOAD_URL, SAVE_EDITED_FILE_THUMBNAIL_URL, SAVE_EDITED_FILE_URL, } from "../../utilities/constants/apiUrls";
 import { generateFoldersQueryKey, invalidateData, QueryKeys, } from "../../utilities/constants/queryKeys";
 import { useQueryClient } from "react-query";
 import { useDamConfig } from "../../hocs/DamConfigContext";
@@ -26,77 +27,123 @@ import { createApiClient } from "../../hocs/configureAxios";
 import useAppParams from "../../utilities/useAppParams";
 const GoArrowLeftIcon = GoArrowLeft;
 const PiFloppyDiskIcon = PiFloppyDisk;
+const buildEditedName = (originalName) => {
+    const dot = originalName.lastIndexOf(".");
+    if (dot <= 0)
+        return `${originalName} (edited)`;
+    return `${originalName.slice(0, dot)} (edited)${originalName.slice(dot)}`;
+};
 const ImageEditorComponent = ({ file, handleClose, }) => {
     const queryClient = useQueryClient();
     const damConfig = useDamConfig();
-    const { rootFolderId } = damConfig;
+    const { rootFolderId, brand } = damConfig;
+    const brandId = get(brand, "_id");
     const api = useMemo(() => createApiClient(damConfig), [damConfig]);
     const { type, folderId } = useAppParams();
+    const currentFolderId = folderId || rootFolderId;
     const [state, setState] = useState({
         loading: false,
+        confirmOpen: false,
     });
-    const { loading } = state;
+    const { loading, confirmOpen } = state;
     const editorRef = useRef(null);
-    const handleSave = () => __awaiter(void 0, void 0, void 0, function* () {
+    const invalidateAfterChange = () => {
+        invalidateData(queryClient, generateFoldersQueryKey(type), currentFolderId);
+        invalidateData(queryClient, QueryKeys.FILE, get(file, "_id"));
+    };
+    const handleOverwrite = () => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
         const editedFile = yield ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getEditedFile());
-        if (editedFile) {
-            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
-            try {
-                const response = yield api.put(SAVE_EDITED_FILE_URL, {
-                    path: get(file, "s3Path"),
-                });
-                const url = get(response, "data");
-                if (url) {
-                    try {
-                        // Use fetch instead of axios to avoid inheriting Authorization header
-                        // from host app - S3 presigned URLs reject requests with Bearer tokens
-                        const response = yield fetch(url, {
-                            method: "PUT",
-                            headers: {
-                                "Content-Type": editedFile.type || "image/png",
-                            },
-                            body: editedFile,
-                        });
-                        if (response.ok) {
-                            try {
-                                const result = yield api.put(SAVE_EDITED_FILE_THUMBNAIL_URL.replace(":fileId", get(file, "_id")), {});
-                                invalidateData(queryClient, generateFoldersQueryKey(type), folderId ? folderId : rootFolderId);
-                                invalidateData(queryClient, QueryKeys.FILE, get(file, "_id"));
-                                showNotification(UPDATE_SUCCESS, NotificationStatus.SUCCESS);
-                                handleClose();
-                            }
-                            catch (error) {
-                                showNotification(get(error, "message", FILE_UPLOAD_ERROR), NotificationStatus.ERROR);
-                            }
-                            finally {
-                                setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false })));
-                            }
-                        }
-                        else {
-                            showNotification(FILE_UPLOAD_ERROR, NotificationStatus.ERROR);
-                        }
-                    }
-                    catch (error) {
-                        showNotification(get(error, "message", FILE_UPLOAD_ERROR), NotificationStatus.ERROR);
-                    }
-                    finally {
-                        setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false })));
-                    }
-                }
-                else {
-                    showNotification(FILE_UPLOAD_ERROR, NotificationStatus.ERROR);
-                }
+        if (!editedFile) {
+            showNotification("Error while saving image", NotificationStatus.ERROR);
+            return;
+        }
+        setState((prev) => (Object.assign(Object.assign({}, prev), { loading: true, confirmOpen: false })));
+        try {
+            const response = yield api.put(SAVE_EDITED_FILE_URL, {
+                path: get(file, "s3Path"),
+            });
+            const url = get(response, "data");
+            if (!url) {
+                showNotification(FILE_UPLOAD_ERROR, NotificationStatus.ERROR);
+                setState((prev) => (Object.assign(Object.assign({}, prev), { loading: false })));
+                return;
+            }
+            // Use fetch instead of axios to avoid inheriting Authorization header
+            // from host app - S3 presigned URLs reject requests with Bearer tokens
+            const s3Resp = yield fetch(url, {
+                method: "PUT",
+                headers: {
+                    "Content-Type": editedFile.type || "image/png",
+                },
+                body: editedFile,
+            });
+            if (s3Resp.ok) {
+                yield api.put(SAVE_EDITED_FILE_THUMBNAIL_URL.replace(":fileId", get(file, "_id")), {});
+                invalidateAfterChange();
+                showNotification(UPDATE_SUCCESS, NotificationStatus.SUCCESS);
+                handleClose();
             }
-            catch (error) {
-                showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
-                setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false })));
+            else {
+                showNotification(FILE_UPLOAD_ERROR, NotificationStatus.ERROR);
             }
         }
-        else {
+        catch (error) {
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        }
+        finally {
+            setState((prev) => (Object.assign(Object.assign({}, prev), { loading: false })));
+        }
+    });
+    const handleSaveAsNew = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const editedFile = yield ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getEditedFile());
+        if (!editedFile) {
             showNotification("Error while saving image", NotificationStatus.ERROR);
+            return;
+        }
+        setState((prev) => (Object.assign(Object.assign({}, prev), { loading: true, confirmOpen: false })));
+        const newName = buildEditedName(get(file, "name", "edited.png"));
+        const mimetype = editedFile.type || get(file, "mimetype") || "image/png";
+        try {
+            const presigned = yield api.post(FILE_UPLOAD_URL, {
+                brandId,
+                folderId: currentFolderId,
+                files: [{ name: newName, size: editedFile.size }],
+            });
+            const uploadUrl = get(presigned, ["data", 0, "url"]);
+            if (!uploadUrl) {
+                showNotification(FILE_UPLOAD_ERROR, NotificationStatus.ERROR);
+                setState((prev) => (Object.assign(Object.assign({}, prev), { loading: false })));
+                return;
+            }
+            const s3Resp = yield fetch(uploadUrl, {
+                method: "PUT",
+                headers: { "Content-Type": mimetype },
+                body: editedFile,
+            });
+            if (s3Resp.ok) {
+                invalidateAfterChange();
+                showNotification(UPDATE_SUCCESS, NotificationStatus.SUCCESS);
+                handleClose();
+            }
+            else {
+                showNotification(FILE_UPLOAD_ERROR, NotificationStatus.ERROR);
+            }
+        }
+        catch (error) {
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        }
+        finally {
+            setState((prev) => (Object.assign(Object.assign({}, prev), { loading: false })));
         }
     });
-    return (_jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-h-screen", children: [_jsxs("div", { className: "md-lib-shrink-0 md-lib-bg-darkPrimaryBg md-lib-py-3 md-lib-px-5 md-lib-flex md-lib-justify-between md-lib-items-center md-lib-relative md-lib-z-[100]", children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-5", children: [_jsx(GoArrowLeftIcon, { className: "md-lib-text-darkTextColor md-lib-cursor-pointer", size: 24, onClick: handleClose }), _jsx("h4", { className: "md-lib-font-semibold md-lib-text-darkTextColor md-lib-text-base md-lib-truncate md-lib-w-96", title: get(file, "name", "N/A"), children: get(file, "name", "N/A") })] }), _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-4", children: [_jsx(CustomButton, { size: "large", onClick: handleClose, label: "Cancel", type: "default", className: "md-lib-bg-secondaryColor md-lib-hover:bg-secondaryHoverColor md-lib-border-none" }), _jsx(CustomButton, { size: "large", type: "primary", icon: _jsx(PiFloppyDiskIcon, { size: 24 }), onClick: handleSave, label: "Save", loading: loading })] })] }), _jsx("div", { className: "md-lib-flex-1 md-lib-overflow-hidden md-lib-relative", children: _jsx(TuiImageEditor, { ref: editorRef, file: file, path: get(file, "s3Path") }) })] }));
+    const openConfirm = () => setState((prev) => (Object.assign(Object.assign({}, prev), { confirmOpen: true })));
+    const closeConfirm = () => setState((prev) => (Object.assign(Object.assign({}, prev), { confirmOpen: false })));
+    return (_jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-h-screen", children: [_jsxs("div", { className: "md-lib-shrink-0 md-lib-bg-darkPrimaryBg md-lib-py-3 md-lib-px-5 md-lib-flex md-lib-justify-between md-lib-items-center md-lib-relative md-lib-z-[100]", children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-5", children: [_jsx(GoArrowLeftIcon, { className: "md-lib-text-darkTextColor md-lib-cursor-pointer", size: 24, onClick: handleClose }), _jsx("h4", { className: "md-lib-font-semibold md-lib-text-darkTextColor md-lib-text-base md-lib-truncate md-lib-w-96", title: get(file, "name", "N/A"), children: get(file, "name", "N/A") })] }), _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-4", children: [_jsx(CustomButton, { size: "large", onClick: handleClose, label: "Cancel", type: "default", className: "md-lib-bg-secondaryColor md-lib-hover:bg-secondaryHoverColor md-lib-border-none" }), _jsx(CustomButton, { size: "large", type: "primary", icon: _jsx(PiFloppyDiskIcon, { size: 24 }), onClick: openConfirm, label: "Save", loading: loading })] })] }), _jsx("div", { className: "md-lib-flex-1 md-lib-overflow-hidden md-lib-relative", children: _jsx(TuiImageEditor, { ref: editorRef, file: file, path: get(file, "s3Path") }) }), _jsx(Modal, { open: confirmOpen, onCancel: closeConfirm, title: "Save edited image", maskClosable: !loading, closable: !loading, footer: [
+                    _jsx(Button, { onClick: closeConfirm, disabled: loading, children: "Cancel" }, "cancel"),
+                    _jsx(Button, { onClick: handleOverwrite, disabled: loading, children: "Overwrite" }, "overwrite"),
+                    _jsx(Button, { type: "primary", onClick: handleSaveAsNew, loading: loading, children: "Save as new" }, "new"),
+                ], children: _jsx("p", { children: "Do you want to replace the original file, or save your edits as a new file in this folder?" }) })] }));
 };
 export default ImageEditorComponent;

package/build/MyDrive/fileDetails/ImageViewer.js

@@ -4,6 +4,7 @@ import ImageOptions from "./ImageOptions";
 import { useState } from "react";
 import { SAMPLE_IMAGE_URL } from "../../utilities/constants/imageUrls";
 import { useDamConfig } from "../../hocs/DamConfigContext";
+import { withVersion } from "../../utilities/helpers/cacheBust";
 const ImageViewer = ({ file, showFilePreview }) => {
     const damConfig = useDamConfig();
     const { isAdmin } = damConfig;
@@ -11,6 +12,6 @@ const ImageViewer = ({ file, showFilePreview }) => {
     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 }) }))] }));
+    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: withVersion(get(file, "s3Url") || get(file, "downloadUrl") || get(file, "thumbnailUrl", SAMPLE_IMAGE_URL), get(file, "updatedAt")), 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/utilities/helpers/cacheBust.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Append a version query param so the browser refetches when a file is
+ * edited in place (same S3 key, same URL — without this the cached binary
+ * is shown after Save). Derived from the file's updatedAt timestamp so the
+ * URL only changes when the asset actually changes.
+ */
+export declare const withVersion: (url: string | undefined | null, updatedAt: string | number | Date | null | undefined) => string;

package/build/utilities/helpers/cacheBust.js

@@ -0,0 +1,20 @@
+/**
+ * Append a version query param so the browser refetches when a file is
+ * edited in place (same S3 key, same URL — without this the cached binary
+ * is shown after Save). Derived from the file's updatedAt timestamp so the
+ * URL only changes when the asset actually changes.
+ */
+export const withVersion = (url, updatedAt) => {
+    if (!url)
+        return "";
+    if (!updatedAt)
+        return url;
+    const v = updatedAt instanceof Date
+        ? updatedAt.getTime()
+        : typeof updatedAt === "number"
+            ? updatedAt
+            : new Date(updatedAt).getTime();
+    if (!v || Number.isNaN(v))
+        return url;
+    return url.includes("?") ? `${url}&v=${v}` : `${url}?v=${v}`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bindu-dashing/dam-solution-v2",
-  "version": "5.9.251",
+  "version": "5.9.252",
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@emoji-mart/data": "^1.2.1",