@anji-dashing/dam-solution-v2 5.8.173

package/build/MyDrive/files/MapFile.js

@@ -0,0 +1,239 @@
+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 { CREATE_FILE_URL, FETCH_ASSETS_URL, } from "../../utilities/constants/apiUrls";
+import { InputSupportedTypes, InputTypes, NotificationStatus, } from "../../utilities/constants/interface";
+import { CREATE_SUCCESS, SOMETHING_WENT_WRONG, UPDATE_SUCCESS, } from "../../utilities/constants/messages";
+import { Button, DatePicker, Drawer, Form, Modal, Select, Typography, } from "antd";
+import { first, get, isArray, map, nth } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+import { showNotification } from "../../common/notifications";
+import { generateFoldersQueryKey, invalidateData, QueryKeys, } from "../../utilities/constants/queryKeys";
+import { useMutation, useQueryClient } from "react-query";
+import AssetSelectionFormItem from "./AssetSelectionFormItem";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+import { createApiClient } from "../../hocs/configureAxios";
+import useAppParams from "../../utilities/useAppParams";
+import Metadata from "../fileDetails/Metadata";
+import { updateFile } from "../../react-query/services/file-services";
+import { DATE_FORMAT, DATE_WITH_TIME_FORMAT } from "../../hocs/appConstants";
+import dayjs from "dayjs";
+import useAppNavigate from "../../utilities/useAppNavigate";
+import { addQueryParams } from "../../hocs/helpers";
+function MapFile({ open, handleCancel, filesList, fromUpload, parentFolderId, }) {
+    const { folderId, type } = useAppParams();
+    const damConfig = useDamConfig();
+    const externalTeams = (damConfig === null || damConfig === void 0 ? void 0 : damConfig.teams) || [];
+    const { rootFolderId, brand } = damConfig;
+    const brandId = get(brand, "_id");
+    const currentFolderId = parentFolderId || folderId || rootFolderId;
+    const queryClient = useQueryClient();
+    const [form] = Form.useForm();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const file = filesList === null || filesList === void 0 ? void 0 : filesList[0];
+    const navigate = useAppNavigate();
+    const [state, setState] = useState({
+        loading: false,
+        selectedAssetTemplate: null,
+        metadata: {},
+        selectedTeams: [],
+        assetsLoading: false,
+        assets: [],
+        assetOptions: [],
+    });
+    const { loading, selectedAssetTemplate, assets, assetsLoading, assetOptions, } = state;
+    useEffect(() => {
+        if (brandId) {
+            fetchAssets({});
+        }
+    }, [brandId]);
+    const fetchAssets = (params, isReset) => __awaiter(this, void 0, void 0, function* () {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { assetsLoading: true })));
+        try {
+            const response = yield api.get(`${FETCH_ASSETS_URL.replace(":brandId", brandId)}?${addQueryParams(Object.assign(Object.assign({}, params), { isActive: true, isPagination: false }))}`);
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { assetOptions: map(get(response, "data.data", []), (asset) => ({
+                    value: get(asset, "_id"),
+                    label: get(asset, "name", "N/A"),
+                })), assets: get(response, "data.data", []), assetsLoading: false })));
+        }
+        catch (error) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { assets: [], assetsLoading: false })));
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        }
+    });
+    const metaFields = useMemo(() => get(selectedAssetTemplate, "metadataFields", []), [selectedAssetTemplate]);
+    useEffect(() => {
+        if (file) {
+            form.setFieldsValue({
+                assetId: file === null || file === void 0 ? void 0 : file.assetId,
+                teamIds: file === null || file === void 0 ? void 0 : file.teamIds,
+                expiryDate: (file === null || file === void 0 ? void 0 : file.expiryDate) ? dayjs(file === null || file === void 0 ? void 0 : file.expiryDate) : null,
+            });
+            const selectedAsset = assets.find((asset) => asset._id === (file === null || file === void 0 ? void 0 : file.assetId));
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { selectedAssetTemplate: selectedAsset })));
+        }
+    }, [file, assets]);
+    const teamOptions = useMemo(() => {
+        return map(externalTeams, (team) => {
+            return {
+                label: (_jsxs(Typography.Text, { style: { display: "flex" }, children: [team === null || team === void 0 ? void 0 : team.id, " ", team === null || team === void 0 ? void 0 : team.name, " ", _jsx("span", { style: { marginLeft: "auto" }, children: team === null || team === void 0 ? void 0 : team.type })] })),
+                value: team === null || team === void 0 ? void 0 : team.id,
+                key: `${team === null || team === void 0 ? void 0 : team.id} - ${team === null || team === void 0 ? void 0 : team.name} - ${team === null || team === void 0 ? void 0 : team.type}`,
+            };
+        });
+    }, [externalTeams]);
+    const updateFileMutation = useMutation({
+        mutationFn: updateFile,
+        onSuccess: (response) => {
+            invalidateData(queryClient, QueryKeys.FILE, get(file, "_id"));
+            invalidateData(queryClient, generateFoldersQueryKey(type), currentFolderId);
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { editTemplate: false, editForm: false })));
+            showNotification(get(response, "data.message", UPDATE_SUCCESS), NotificationStatus.SUCCESS);
+        },
+        onError: (error) => {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { selectedAssetId: get(file, "assetId", undefined) })));
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        },
+    });
+    const onUpdateFile = (payload) => {
+        updateFileMutation.mutate({
+            fileId: get(file, "_id", ""),
+            payload,
+            api,
+        });
+    };
+    const handleSubmit = () => {
+        form.validateFields().then((values) => __awaiter(this, void 0, void 0, function* () {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
+            try {
+                const formattedValues = getFormattedMetadata(values);
+                const expiryDate = values.expiryDate || null;
+                delete values.expiryDate;
+                const response = yield api.post(CREATE_FILE_URL, Object.assign(Object.assign({}, values), { folderId: currentFolderId, files: map(filesList, (file) => {
+                        const fileData = {
+                            name: get(file, "name"),
+                            path: get(file, "filePath"),
+                            size: get(file, "size"),
+                            mimetype: get(file, "mimetype"),
+                            metadata: formattedValues,
+                            teamIds: values.teamIds || [],
+                        };
+                        if (expiryDate) {
+                            fileData["expiryDate"] = dayjs(expiryDate).format(DATE_FORMAT);
+                        }
+                        return fileData;
+                    }) }));
+                showNotification(get(response, "data.message", CREATE_SUCCESS), NotificationStatus.SUCCESS);
+                handleCancel && handleCancel(false);
+            }
+            catch (error) {
+                showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+            }
+            finally {
+                invalidateData(queryClient, QueryKeys.FILE, currentFolderId);
+                invalidateData(queryClient, QueryKeys.FOLDERS, currentFolderId);
+                setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false })));
+            }
+        }));
+    };
+    const getFormattedMetadata = (values) => {
+        const updatedMetadata = values.metadata || {};
+        const formattedValues = Object.assign({}, updatedMetadata);
+        metaFields.forEach((field) => {
+            const defaultName = get(field, "defaultName");
+            const allowTime = get(field, `inputTypeSettings.${InputSupportedTypes.ALLOW_TIME}.allow`, false);
+            const allowMultiple = get(field, `inputTypeSettings.${InputSupportedTypes.ALLOW_MULTIPLE}`, false);
+            const name = get(field, "_id");
+            switch (defaultName) {
+                case InputTypes.DATE_RANGE:
+                case InputTypes.DATE:
+                    const format = allowTime ? DATE_WITH_TIME_FORMAT : DATE_FORMAT;
+                    if (isArray(updatedMetadata[name]) &&
+                        get(updatedMetadata[name], "length") === 2) {
+                        formattedValues[name] = [
+                            first(updatedMetadata[name])
+                                ? dayjs(first(updatedMetadata[name])).format(format)
+                                : null,
+                            nth(updatedMetadata[name], 1)
+                                ? dayjs(nth(updatedMetadata[name], 1)).format(format)
+                                : null,
+                        ];
+                        break;
+                    }
+                    formattedValues[name] = updatedMetadata[name]
+                        ? dayjs(updatedMetadata[name]).format(format)
+                        : null;
+                    break;
+                case InputTypes.CHECKBOX:
+                    formattedValues[name] = updatedMetadata[name] || [];
+                    break;
+                case InputTypes.SELECT:
+                    formattedValues[name] = allowMultiple
+                        ? updatedMetadata[name] || []
+                        : updatedMetadata[name] || undefined;
+                    break;
+            }
+        });
+        // console.log("formateed", formattedValues);
+        return formattedValues;
+    };
+    const handleUpdate = (values) => {
+        // console.log("update", values, metaFields);
+        const formattedValues = getFormattedMetadata(values);
+        const data = {
+            metadata: formattedValues,
+            teamIds: values.teamIds || [],
+        };
+        if (values.assetId) {
+            data["assetId"] = values.assetId;
+        }
+        if (values.expiryDate) {
+            data["expiryDate"] = dayjs(values.expiryDate).format(DATE_FORMAT);
+        }
+        onUpdateFile(data);
+    };
+    const handleAssetTemplateChange = (value) => {
+        const selectedAsset = assets.find((asset) => asset._id === value);
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { selectedAssetTemplate: selectedAsset })));
+    };
+    const onChangeTeams = (value) => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { selectedTeams: value })));
+    };
+    const handleCancelWithConfirmation = () => {
+        if (!fromUpload) {
+            // If not from upload, just cancel without confirmation
+            if (handleCancel) {
+                handleCancel(false);
+            }
+            else if (navigate) {
+                window.history.back();
+            }
+            return;
+        }
+        // Show confirmation dialog for upload cancellation
+        Modal.confirm({
+            title: "Discard upload?",
+            content: "Are you sure you want to cancel? The uploaded file will be discarded.",
+            okText: "Yes, Discard",
+            cancelText: "No, Keep",
+            okButtonProps: { danger: true },
+            onOk: () => {
+                if (handleCancel) {
+                    handleCancel(true);
+                }
+            },
+        });
+    };
+    const getMetadataForm = (_jsxs(Form, { layout: "vertical", form: form, scrollToFirstError: true, onFinish: fromUpload ? handleSubmit : handleUpdate, className: "md-lib-m-2", children: [_jsx(AssetSelectionFormItem, { handleAssetTemplateChange: handleAssetTemplateChange, assetOptions: assetOptions, assetsLoading: assetsLoading }), selectedAssetTemplate && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { name: "teamIds", label: "Teams", children: _jsx(Select, { options: teamOptions, placeholder: "Select teams", mode: "multiple", onChange: (val) => onChangeTeams(val), style: { width: "100%" }, showSearch: true, optionFilterProp: "key" }) }), _jsx(Form.Item, { name: "expiryDate", label: "Expiry Date", children: _jsx(DatePicker, { placeholder: "Expiry Date", style: { width: "100%" } }) }), _jsx(Metadata, { asset: selectedAssetTemplate, form: form, file: (filesList === null || filesList === void 0 ? void 0 : filesList[0]) || null })] })), _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-justify-end md-lib-gap-3", children: [_jsx(Button, { onClick: handleCancelWithConfirmation, children: "Cancel" }), _jsx(Button, { disabled: !selectedAssetTemplate, type: "primary", 
+                        // onClick={handleSubmit}
+                        loading: loading || updateFileMutation.isLoading, htmlType: "submit", children: "Save" })] })] }));
+    return (_jsx(_Fragment, { children: fromUpload ? (_jsx(Drawer, { title: "Metadata", open: open, onClose: handleCancelWithConfirmation, maskClosable: false, children: getMetadataForm })) : (_jsxs("div", { className: "md-lib-p-2 md-lib-overflow-y-scroll md-lib-max-h-[calc(100vh-65px)]", children: [_jsx("p", { className: "md-lib-text-lg md-lib-font-semibold", children: "Metadata" }), getMetadataForm] })) }));
+}
+export default MapFile;

package/build/MyDrive/files/MoveToAnotherFolder.d.ts

@@ -0,0 +1,9 @@
+declare function MoveToAnotherFolder({ open, handleCancel, fileIds, entity, folderIds, onCloseSelection, }: {
+    open: boolean;
+    handleCancel: () => void;
+    fileIds?: string[];
+    entity: any;
+    folderIds?: string[];
+    onCloseSelection?: () => void;
+}): JSX.Element;
+export default MoveToAnotherFolder;

package/build/MyDrive/files/MoveToAnotherFolder.js

@@ -0,0 +1,67 @@
+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 } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Modal } from "antd";
+import { generateFoldersQueryKey, invalidateData, } from "../../utilities/constants/queryKeys";
+import { NotificationStatus, } from "../../utilities/constants/interface";
+import { get } from "lodash";
+import { MOVE_SUCCESS, SOMETHING_WENT_WRONG, } from "../../utilities/constants/messages";
+import { useMutation, useQueryClient } from "react-query";
+import { moveFiles } from "../../react-query/services/file-services";
+import { showNotification } from "../../common/notifications";
+import FolderTabs from "./FolderTabs";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+import { createApiClient } from "../../hocs/configureAxios";
+import useAppParams from "../../utilities/useAppParams";
+function MoveToAnotherFolder({ open, handleCancel, fileIds = [], entity, folderIds = [], onCloseSelection, }) {
+    const { folderId, type } = useAppParams();
+    const queryClient = useQueryClient();
+    const damConfig = useDamConfig();
+    const { rootFolderId } = damConfig;
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const [state, setState] = useState({
+        selectedFolderId: "",
+    });
+    const { selectedFolderId } = state;
+    const moveFileMutation = useMutation({
+        mutationFn: moveFiles,
+        onSuccess: (response) => __awaiter(this, void 0, void 0, function* () {
+            const foldersQueryKey = generateFoldersQueryKey(type);
+            const currentFolderId = folderId ? folderId : rootFolderId;
+            invalidateData(queryClient, foldersQueryKey, currentFolderId);
+            yield queryClient.refetchQueries({
+                queryKey: [foldersQueryKey, currentFolderId],
+            });
+            handleCancel();
+            onCloseSelection === null || onCloseSelection === void 0 ? void 0 : onCloseSelection();
+            showNotification(get(response, "data.message", MOVE_SUCCESS), NotificationStatus.SUCCESS);
+        }),
+        onError: (error) => {
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        },
+    });
+    const onMoveFile = () => {
+        moveFileMutation.mutate({
+            payload: {
+                fileIds,
+                folderIds,
+                destinationFolderId: selectedFolderId,
+            },
+            api,
+        });
+    };
+    return (_jsx(Modal, { open: open, onCancel: handleCancel, title: _jsx("div", { className: "md-lib-font-semibold md-lib-text-lg md-lib-truncate md-lib-max-w-7xl", title: get(entity, "name", "N/"), children: entity ? `Move “${get(entity, "name", "N/A")}”` : "Move Items" }), width: 600, okButtonProps: {
+            disabled: !selectedFolderId,
+            loading: moveFileMutation.isLoading,
+            type: selectedFolderId ? "primary" : "default",
+        }, okText: "Move", onOk: onMoveFile, children: _jsx(FolderTabs, { folderIds: folderIds, selectedFolderId: selectedFolderId, setSelectedFolderId: (value) => setState((prevState) => (Object.assign(Object.assign({}, prevState), { selectedFolderId: value }))) }) }));
+}
+export default MoveToAnotherFolder;

package/build/MyDrive/filesListView.d.ts

@@ -0,0 +1,2 @@
+declare const FilesListView: ({ data }: any) => JSX.Element;
+export default FilesListView;

package/build/MyDrive/filesListView.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Table, Tooltip, Typography } from "antd";
+import dayjs from "dayjs";
+const FilesListView = ({ data }) => {
+    const columns = [
+        {
+            title: "Name",
+            dataIndex: "name",
+            key: "name",
+            width: 150,
+            render: (props) => {
+                return (_jsx(Tooltip, { title: props, children: _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: props }) }));
+            },
+        },
+        {
+            title: "Folder name",
+            dataIndex: "folder_name",
+            key: "createdAt",
+            render: (props) => {
+                return (_jsx(Tooltip, { title: props, children: _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: props }) }));
+            },
+        },
+        {
+            title: "Type",
+            dataIndex: "type",
+            key: "type",
+        },
+        {
+            title: "Created at",
+            dataIndex: "created_at",
+            key: "createdAt",
+            render: (value) => {
+                return dayjs(value).format("MMM D, YYYY HH:MM a");
+            },
+            width: 200
+        },
+        {
+            title: "Updated at",
+            dataIndex: "updated_at",
+            key: "updatedAt",
+            render: (value) => {
+                return dayjs(value).format("MMM D, YYYY HH:MM a");
+            },
+            width: 200
+        },
+        {
+            title: "Thumbnail url",
+            dataIndex: "thumbnail_url",
+            key: "thumbnailUrl",
+            render: (props) => {
+                return (_jsx(Tooltip, { title: props, children: _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: props }) }));
+            },
+        },
+    ];
+    return (_jsx(_Fragment, { children: _jsx(Table, { columns: columns, dataSource: data, scroll: { x: true } }) }));
+};
+export default FilesListView;

package/build/MyDrive/index.d.ts

@@ -0,0 +1,16 @@
+declare function App(props: {
+    accessKey: string;
+    secretKey: string;
+    subdomain: string;
+    teamIds: string[] | number[];
+    styles: Record<string, any>;
+    appType: string;
+    routerVersion: 4 | 5 | 6;
+    id?: string;
+    folderId?: string;
+    parentId?: string;
+    showSubfolders?: boolean;
+    userEmail?: string;
+    onFolderChange?: (folderId: string) => void;
+}): JSX.Element;
+export default App;

package/build/MyDrive/index.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DamConfigProvider } from "../hocs/DamConfigContext";
+import { ThemeProvider } from "../hocs/ThemeContext";
+import { ThemeModes } from "../utilities/constants/interface";
+import AppRoutes from "./routes";
+import AppProvider from "../hocs/AppProvider";
+import ToastProvider from "../hocs/ToastProvider";
+import { useMemo, useState } from "react";
+import process from "process";
+import { ParamsProvider } from "../utilities/useAppParams";
+function App(props) {
+    var _a;
+    console.log('## receiver props', props);
+    const config = useMemo(() => ({
+        damAccessKey: props === null || props === void 0 ? void 0 : props.accessKey,
+        secretKey: props === null || props === void 0 ? void 0 : props.secretKey,
+        subdomain: props === null || props === void 0 ? void 0 : props.subdomain,
+        teamIds: props === null || props === void 0 ? void 0 : props.teamIds,
+        styles: props === null || props === void 0 ? void 0 : props.styles,
+        appType: props === null || props === void 0 ? void 0 : props.appType,
+        folderId: props === null || props === void 0 ? void 0 : props.folderId,
+        id: props === null || props === void 0 ? void 0 : props.id,
+        parentId: props === null || props === void 0 ? void 0 : props.parentId,
+        showSubfolders: props === null || props === void 0 ? void 0 : props.showSubfolders,
+        routerVersion: props === null || props === void 0 ? void 0 : props.routerVersion,
+    }), [
+        props === null || props === void 0 ? void 0 : props.accessKey,
+        props === null || props === void 0 ? void 0 : props.secretKey,
+        props === null || props === void 0 ? void 0 : props.subdomain,
+        props === null || props === void 0 ? void 0 : props.teamIds,
+        props === null || props === void 0 ? void 0 : props.styles,
+        props === null || props === void 0 ? void 0 : props.appType,
+        props === null || props === void 0 ? void 0 : props.routerVersion,
+        props === null || props === void 0 ? void 0 : props.folderId,
+        props === null || props === void 0 ? void 0 : props.id,
+        props === null || props === void 0 ? void 0 : props.parentId,
+        props === null || props === void 0 ? void 0 : props.showSubfolders,
+    ]);
+    const [folders, setFolders] = useState([]);
+    if (typeof window !== "undefined" && !window.process) {
+        window.process = process;
+    }
+    return (_jsx(AppProvider, { children: _jsx(DamConfigProvider, { config: config, children: _jsxs(ThemeProvider, { styles: props === null || props === void 0 ? void 0 : props.styles, sessionTheme: ThemeModes.LIGHT, children: [_jsxs("div", { className: "md-lib-grid md:md-lib-grid-cols-[auto,1fr] md-lib-h-[inherit]", children: [" ", _jsx(ParamsProvider, { initialParams: {
+                                    folderId: props === null || props === void 0 ? void 0 : props.folderId,
+                                    id: props === null || props === void 0 ? void 0 : props.id,
+                                    parentId: props === null || props === void 0 ? void 0 : props.parentId,
+                                    showSubfolders: (_a = props === null || props === void 0 ? void 0 : props.showSubfolders) === null || _a === void 0 ? void 0 : _a.toString(),
+                                }, children: _jsx(AppRoutes, { setFolders: setFolders, folders: folders, routerVersion: (props === null || props === void 0 ? void 0 : props.routerVersion) || 6, onFolderChange: props === null || props === void 0 ? void 0 : props.onFolderChange }) })] }), _jsx(ToastProvider, {})] }) }) }));
+}
+export default App;

package/build/MyDrive/routes.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { FolderTypes } from "../utilities/FoldersContext";
+type AppRoutesProps = {
+    folders: FolderTypes[];
+    setFolders: React.Dispatch<React.SetStateAction<FolderTypes[]>>;
+    routerVersion: 4 | 5 | 6;
+    onFolderChange?: (folderId: string) => void;
+};
+export default function AppRoutes({ folders, setFolders, routerVersion, onFolderChange, }: AppRoutesProps): JSX.Element;
+export {};

package/build/MyDrive/routes.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ImagePickerDrive from "./ImagePickerDrive";
+import MyDriveMainContainer from "./MyDriveMainContainer";
+import useAppParams from "../utilities/useAppParams";
+export default function AppRoutes({ folders, setFolders, routerVersion, onFolderChange, }) {
+    const params = useAppParams();
+    const { type, id } = params;
+    if (type && id) {
+        return _jsx(ImagePickerDrive, {});
+    }
+    return (_jsx(MyDriveMainContainer, { folders: folders, setFolders: setFolders, onFolderChange: onFolderChange }));
+}

package/build/PenView/PenDetails.d.ts

@@ -0,0 +1,4 @@
+declare const PenDetails: ({ id }: {
+    id: string;
+}) => JSX.Element;
+export default PenDetails;

package/build/PenView/PenDetails.js

@@ -0,0 +1,114 @@
+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 { Image } from "antd";
+import { useEffect, useMemo, useState } from "react";
+import { LuTruck } from "react-icons/lu";
+import ProductDescription from "./ProductDescription";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { createApiClient } from "../hocs/configureAxios";
+import { FETCH_ASSET_URL, FETCH_FILE_URL, } from "../utilities/constants/apiUrls";
+import { get } from "lodash";
+import Loader from "../common/loader/loader";
+const PenDetails = ({ id }) => {
+    const Truck = LuTruck;
+    const [selectedBarrelColor, setSelectedBarrelColor] = useState("");
+    const [selectedInkColor, setSelectedInkColor] = useState("");
+    const [quantity, setQuantity] = useState(1);
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const [state, setState] = useState({
+        file: {},
+        loading: false,
+        assetTemplate: {},
+        isAssetLoading: false,
+    });
+    useEffect(() => {
+        if (id) {
+            getFile();
+        }
+    }, [id]);
+    const getAsset = (assetId) => __awaiter(void 0, void 0, void 0, function* () {
+        setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { isAssetLoading: true });
+        });
+        try {
+            const response = yield api.get(FETCH_ASSET_URL.replace(":assetId", assetId));
+            //   console.log(response);
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { isAssetLoading: false, assetTemplate: get(response, "data", {}) });
+            });
+        }
+        catch (err) {
+            console.log("Error while fetching the Asset Template", err);
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { isAssetLoading: false });
+            });
+        }
+    });
+    const getFile = () => __awaiter(void 0, void 0, void 0, function* () {
+        setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { loading: true });
+        });
+        try {
+            const response = yield api.get(FETCH_FILE_URL.replace(":fileId", id));
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { loading: false, file: get(response, "data", {}) });
+            });
+            getAsset(get(response, "data.assetId", ""));
+        }
+        catch (err) {
+            console.log("Error while fetching the file", err);
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { loading: false });
+            });
+        }
+    });
+    const { file, loading, isAssetLoading, assetTemplate } = state;
+    const metadata = get(file, "metadata", {});
+    const metadataFields = get(assetTemplate, "metadataFields", []);
+    const getValue = (fieldName) => {
+        const field = metadataFields.find((item) => get(item, "name") === fieldName);
+        const fieldId = get(field, "_id", "");
+        return (metadata === null || metadata === void 0 ? void 0 : metadata[fieldId]) || null;
+    };
+    const getOptions = (fieldName) => {
+        const field = metadataFields.find((item) => get(item, "name") === fieldName);
+        return get(field, "options", []);
+    };
+    const minDaysToShip = getValue("Minimum days to ship");
+    const maxDaysToShip = getValue("Maximum days to ship");
+    const barrelColors = getOptions("Barrel Colour");
+    const inkColors = getOptions("Ink Colour");
+    useEffect(() => {
+        const barrelColor = getValue("Barrel Colour");
+        const inkColor = getValue("Ink Colour");
+        if (barrelColor && barrelColor.length > 0) {
+            const color = barrelColors.find((item) => item.value === (barrelColor === null || barrelColor === void 0 ? void 0 : barrelColor[0]));
+            if (color) {
+                setSelectedBarrelColor(color === null || color === void 0 ? void 0 : color.label);
+            }
+        }
+        if (inkColor && inkColor.length > 0) {
+            const color = inkColors.find((item) => item.value === (inkColor === null || inkColor === void 0 ? void 0 : inkColor[0]));
+            if (color) {
+                setSelectedInkColor(color === null || color === void 0 ? void 0 : color.label);
+            }
+        }
+    }, [metadata, metadataFields]);
+    return (_jsx(_Fragment, { children: loading || isAssetLoading ? (_jsx(Loader, {})) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "md-lib-grid md-lib-grid-cols-2 md-lib-gap-4 md-lib-p-4", children: [_jsx("div", { children: _jsx(Image, { src: get(file, "s3Url", ""), alt: "Dummy Image", className: "md-lib-border md-lib-rounded" }) }), _jsxs("div", { className: "md-lib-max-w-md md-lib-mx-auto md-lib-bg-white md-lib-p-6 md-lib-font-sans", children: [_jsxs("div", { className: "md-lib-mb-6", children: [_jsx("h1", { className: "md-lib-text-xl md-lib-font-semibold md-lib-text-headingText md-lib-mb-4", children: getValue("Name") || "" }), _jsxs("div", { className: "md-lib-flex md-lib-items-start md-lib-gap-3 md-lib-mb-6", children: [_jsx(Truck, { className: "md-lib-w-5 md-lib-h-5 md-lib-text-textColor md-lib-mt-1 md-lib-flex-shrink-0" }), _jsxs("div", { children: [_jsxs("p", { className: "md-lib-font-medium md-lib-text-textColor", children: ["Ships in ", minDaysToShip, minDaysToShip && "-", maxDaysToShip, " business days"] }), _jsx("p", { className: "md-lib-text-sm md-lib-text-secondaryTextColor", children: "Production time begins once the order is confirmed and any artwork is approved" })] })] })] }), _jsxs("div", { className: "md-lib-mb-6", children: [_jsxs("h3", { className: "md-lib-text-base md-lib-font-medium md-lib-text-textColor md-lib-mb-3", children: ["Barrel Colour:", " ", _jsx("span", { className: "capitalize", children: selectedBarrelColor })] }), _jsx("div", { className: "md-lib-flex md-lib-gap-2 md-lib-flex-wrap", children: barrelColors.map((color) => (_jsx("button", { onClick: () => setSelectedBarrelColor(color.label), className: `md-lib-w-10 md-lib-h-10 md-lib-rounded md-lib-order-2 md-lib-transition-all ${color.label === selectedBarrelColor
+                                                    ? "md-lib-border-primaryColor md-lib-border-4 md-lib-shadow-md"
+                                                    : "md-lib-border-borderColor hover:md-lib-border-primaryColor"}`, style: {
+                                                    background: color.value,
+                                                }, "aria-label": `Select ${color.label} barrel color` }, color.label))) })] }), _jsxs("div", { className: "md-lib-mb-6", children: [_jsxs("h3", { className: "md-lib-text-base md-lib-font-medium md-lib-text-textColor md-lib-mb-3", children: ["Ink Colour:", " ", _jsx("span", { className: "capitalize", children: selectedInkColor })] }), _jsx("div", { className: "md-lib-flex md-lib-gap-2", children: inkColors.map((color) => (_jsx("button", { onClick: () => setSelectedInkColor(color.label), className: `md-lib-w-10 md-lib-h-10 md-lib-rounded md-lib-border-2 md-lib-transition-all ${color.label === selectedInkColor
+                                                    ? "md-lib-border-primaryColor md-lib-border-4 md-lib-shadow-md"
+                                                    : "md-lib-border-borderColor hover:md-lib-border-primaryColor"}`, style: { backgroundColor: color.value }, "aria-label": `Select ${color.label} ink color` }, color.label))) })] }), _jsxs("div", { className: "md-lib-mb-6", children: [_jsx("h3", { className: "md-lib-text-base md-lib-font-medium md-lib-text-textColor md-lib-mb-3", children: "Quantity" }), _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-3", children: [_jsx("button", { onClick: () => setQuantity(Math.max(1, quantity - 1)), className: "md-lib-w-10 md-lib-h-10 md-lib-border md-lib-border-borderColor md-lib-rounded hover:md-lib-bg-secondaryColor md-lib-transition-colors md-lib-flex md-lib-items-center md-lib-justify-center md-lib-text-lg md-lib-font-medium", disabled: quantity <= 1, children: "\u2212" }), _jsx("span", { className: "md-lib-text-lg md-lib-font-medium md-lib-min-w-[3rem] md-lib-text-center", children: quantity }), _jsx("button", { onClick: () => setQuantity(quantity + 1), className: "md-lib-w-10 md-lib-h-10 md-lib-border md-lib-border-borderColor md-lib-rounded hover:md-lib-bg-secondaryColor md-lib-transition-colors md-lib-flex md-lib-items-center md-lib-justify-center md-lib-text-lg md-lib-font-medium", children: "+" })] })] })] })] }), _jsx(ProductDescription, { getValue: getValue, getOptions: getOptions })] })) }));
+};
+export default PenDetails;

package/build/PenView/ProductDescription.d.ts

@@ -0,0 +1,5 @@
+declare const ProductDescription: ({ getValue, getOptions, }: {
+    getValue: (field: string) => any;
+    getOptions: (field: string) => any;
+}) => JSX.Element;
+export default ProductDescription;