@anji-dashing/dam-solution-v2 5.8.173

package/build/AssetType/CreateAssetTemplate.js

@@ -0,0 +1,70 @@
+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 { ICON_SIZE } from "../hocs/appConstants";
+import { Form, Input, Modal } from "antd";
+import { useMemo, useState } from "react";
+import { CiCirclePlus } from "react-icons/ci";
+import CustomButton from "../common/Button";
+import { CustomInputFormItem, CustomTextAreaFormItem, } from "../common/RenderFormItem";
+import { CREATE_SUCCESS, ENTITY_REQUIRED, SOMETHING_WENT_WRONG, } from "../utilities/constants/messages";
+import { showNotification } from "../common/notifications";
+import { NotificationStatus } from "../utilities/constants/interface";
+import { get } from "lodash";
+import { CREATE_ASSETS_URL } from "../utilities/constants/apiUrls";
+import { ASSET_TEMPLATE_SCREEN } from "../utilities/constants/routes";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { createApiClient } from "../hocs/configureAxios";
+import useAppNavigate from "../utilities/useAppNavigate";
+const CiCirclePlusIcon = CiCirclePlus;
+const { TextArea } = Input;
+export default function CreateAssetTemplate({ label }) {
+    const navigate = useAppNavigate();
+    const [state, setState] = useState({ open: false, loading: false });
+    const { open, loading } = state;
+    const damConfig = useDamConfig();
+    const [form] = Form.useForm();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const { brand } = damConfig;
+    const handleOk = () => {
+        form.validateFields().then((values) => __awaiter(this, void 0, void 0, function* () {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
+            try {
+                const response = yield api.post(CREATE_ASSETS_URL, Object.assign(Object.assign({}, values), { brandId: get(brand, "_id") }));
+                // console.log("response", response);
+                showNotification(get(response, "data.message", CREATE_SUCCESS), NotificationStatus.SUCCESS);
+                toggleModal();
+                if (navigate) {
+                    navigate(ASSET_TEMPLATE_SCREEN.replace(":id", get(response, "data._id")));
+                }
+            }
+            catch (error) {
+                setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false })));
+                showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+            }
+        }));
+    };
+    const toggleModal = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { open: !prevState.open, loading: false })));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(CustomButton, { type: "primary", icon: _jsx(CiCirclePlusIcon, { size: ICON_SIZE }), onClick: toggleModal, size: "large", label: label }), _jsx(Modal, { title: "Create new template", open: open, onCancel: toggleModal, okText: "Create", width: 400, onOk: handleOk, okButtonProps: { loading }, children: _jsxs(Form, { layout: "vertical", form: form, 
+                    // requiredMark={false}
+                    scrollToFirstError: true, onFinish: handleOk, children: [_jsx(CustomInputFormItem, { label: "Template name", name: "name", rules: [
+                                {
+                                    required: true,
+                                    message: ENTITY_REQUIRED.replace(":entity", "Name"),
+                                },
+                            ], placeholder: "Enter template name", style: { width: "100%" } }), _jsx(CustomTextAreaFormItem, { label: "Template description", name: "description", rules: [
+                                {
+                                    required: true,
+                                    message: ENTITY_REQUIRED.replace(":entity", "Description"),
+                                },
+                            ], placeholder: "Enter template description", style: { width: "100%" }, rows: 3 })] }) })] }));
+}

package/build/AssetType/CreateOrEditAssetTemplate.d.ts

@@ -0,0 +1 @@
+export default function CreateOrEditAssetTemplate(): JSX.Element;

package/build/AssetType/CreateOrEditAssetTemplate.js

@@ -0,0 +1,100 @@
+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 { useEffect, useMemo, useState } from "react";
+import { FETCH_ASSET_URL, FETCH_INPUT_TYPES_URL, } from "../utilities/constants/apiUrls";
+import { get } from "lodash";
+import EditAssetTemplate from "./EditAssetTemplate";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { createApiClient } from "../hocs/configureAxios";
+import { useTheme } from "../hocs/ThemeContext";
+import { InputTypes } from "../utilities/constants/interface";
+import Loader from "../common/loader/loader";
+import useAppParams from "../utilities/useAppParams";
+let useParamsFallback = () => ({});
+try {
+    const rrd = require("react-router-dom");
+    if (rrd.useParams) {
+        useParamsFallback = rrd.useParams;
+    }
+}
+catch (_a) {
+}
+export default function CreateOrEditAssetTemplate() {
+    const [state, setState] = useState({
+        inputTypesLoading: false,
+        templatesDataLoading: false,
+        templateData: {},
+        inputTypesData: [],
+    });
+    const damConfig = useDamConfig();
+    const { styles } = damConfig;
+    const { variables } = useTheme();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const params = useAppParams();
+    const routeParams = useParamsFallback();
+    const mergedParams = useMemo(() => (Object.assign(Object.assign({}, params), routeParams)), [params, routeParams]);
+    useEffect(() => {
+        getInputTypesData();
+    }, []);
+    useEffect(() => {
+        getTemplateData();
+    }, [mergedParams]);
+    const getInputTypesData = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { inputTypesLoading: true });
+        });
+        try {
+            const response = yield api.get(FETCH_INPUT_TYPES_URL);
+            const filteredData = (_a = get(response, "data", [])) === null || _a === void 0 ? void 0 : _a.filter((input) => get(input, "defaultName") !== InputTypes.PERSON);
+            const sortedData = filteredData === null || filteredData === void 0 ? void 0 : filteredData.sort((a, b) => {
+                const nameA = get(a, "name", "").toLowerCase();
+                const nameB = get(b, "name", "").toLowerCase();
+                return nameA.localeCompare(nameB);
+            });
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { inputTypesData: sortedData || [], inputTypesLoading: false });
+            });
+        }
+        catch (err) {
+            console.log("Error while fetching input types", err);
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { inputTypesLoading: false });
+            });
+        }
+    });
+    const getTemplateData = () => __awaiter(this, void 0, void 0, function* () {
+        setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { templateData: true });
+        });
+        try {
+            const assetId = get(mergedParams, "id") || "";
+            if (!assetId) {
+                console.error("Asset ID is missing from route parameters");
+                setState((prevState) => (Object.assign(Object.assign({}, prevState), { templatesDataLoading: false })));
+                return;
+            }
+            const response = yield api.get(FETCH_ASSET_URL.replace(":assetId", assetId));
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { templateData: get(response, "data", []), templatesDataLoading: false });
+            });
+        }
+        catch (error) {
+            console.log("Error while fetching template data", error);
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { templatesDataLoading: false });
+            });
+        }
+    });
+    return (_jsx("div", { className: "md-lib-h-auto", style: {
+            backgroundColor: (styles === null || styles === void 0 ? void 0 : styles.secondaryColor) || (variables === null || variables === void 0 ? void 0 : variables.secondaryColor),
+        }, children: (state === null || state === void 0 ? void 0 : state.inputTypesLoading) || (state === null || state === void 0 ? void 0 : state.templatesDataLoading) ? (_jsx(Loader, {})) : (_jsx(EditAssetTemplate, { assetTemplate: get(state, "templateData", {}), inputTypes: get(state, "inputTypesData", []) })) }));
+}

package/build/AssetType/DraggedField.d.ts

@@ -0,0 +1,14 @@
+import { AddFieldNameFunc } from "../types/assetType";
+import { InputTypeEntity } from "../utilities/constants/interface";
+export default function DraggedField({ provided, field, onAddLabel, onDeleteField, setCurrentFieldIndex, currentFieldIndex, index, showOutputFormat, onUpdateOutputFormat, outputFormatField, }: {
+    provided: any;
+    field: InputTypeEntity;
+    onAddLabel: AddFieldNameFunc;
+    onDeleteField: (value: number) => void;
+    setCurrentFieldIndex: (value: number | null) => void;
+    currentFieldIndex: number | null;
+    index: number;
+    showOutputFormat: boolean;
+    onUpdateOutputFormat: (id: number, key: string, value: string | boolean) => void;
+    outputFormatField: InputTypeEntity;
+}): JSX.Element;

package/build/AssetType/DraggedField.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ICON_SIZE } from "../hocs/appConstants";
+import { Checkbox, DatePicker, Input, InputNumber, Radio, Select } from "antd";
+import { MdDragIndicator } from "react-icons/md";
+import { MdOutlineEdit } from "react-icons/md";
+import { IoMdClose } from "react-icons/io";
+import { get } from "lodash";
+import { InputTypes, } from "../utilities/constants/interface";
+import { getWidgetIcon } from "./FieldsSection";
+const { RangePicker } = DatePicker;
+const MdDragIndicatorIcon = MdDragIndicator;
+const MdOutlineEditIcon = MdOutlineEdit;
+const IoMdCloseIcon = IoMdClose;
+export default function DraggedField({ provided, field, onAddLabel, onDeleteField, setCurrentFieldIndex, currentFieldIndex, index, showOutputFormat, onUpdateOutputFormat, outputFormatField, }) {
+    // const [fieldName, setFieldName] = useState("");
+    // useEffect(() => {
+    //   const initialName = get(field, "name", "");
+    //   setFieldName(initialName);
+    // }, [field]);
+    const defaultName = get(field, "defaultName", null);
+    const id = get(field, "_id");
+    const IconComponent = getWidgetIcon(defaultName);
+    return (_jsxs("div", { className: `md-lib-flex md-lib-relative md-lib-gap-2 md-lib-border md-lib-h-100 md-lib-rounded-md md-lib-cursor-pointer md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor md-lib-mb-2 ${currentFieldIndex === index && !showOutputFormat
+            ? "md-lib-border-primaryColor"
+            : "md-lib-border-borderColor dark:md-lib-border-darkBorderColor"}`, 
+        // onBlur={() =>
+        //   onAddLabel(id, !!fieldName ? fieldName : get(field, "label", ""))
+        // }
+        onClick: () => {
+            if (!showOutputFormat) {
+                setCurrentFieldIndex(index);
+            }
+        }, children: [_jsx("div", Object.assign({ 
+                // style={{ backgroundColor: variables.secondaryColor }}
+                className: "md-lib-flex md-lib-items-center md-lib-rounded-s" }, provided.dragHandleProps, { children: _jsx(MdDragIndicatorIcon, { size: ICON_SIZE, className: "md-lib-h-100" }) })), _jsxs("div", { className: "md-lib-flex-1 md-lib-p-2 md-lib-w-100", children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-2 md-lib-mb-3", children: [IconComponent && _jsx(IconComponent, {}), _jsx("label", { className: "md-lib-font-semibold", children: get(field, "name", "Field Name") }), !showOutputFormat && (_jsxs("div", { className: `md-lib-flex md-lib-items-center md-lib-gap-2 md-lib-absolute md-lib-right-3 md-lib--top-3 md-lib-border md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-md md-lib-p-1 ${currentFieldIndex === index ? "md-lib-border-primaryColor" : "md-lib-hidden"}`, children: [_jsx(MdOutlineEditIcon, { size: ICON_SIZE, className: "md-lib-cursor-pointer", onClick: () => setCurrentFieldIndex(index), "aria-disabled": showOutputFormat }), _jsx(IoMdCloseIcon, { size: ICON_SIZE, className: "md-lib-cursor-pointer", onClick: (e) => {
+                                            e.stopPropagation();
+                                            onDeleteField(index);
+                                        }, "aria-disabled": showOutputFormat })] }))] }), _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-2", children: [(defaultName === InputTypes.TEXT || !defaultName) && (() => {
+                                const charLimitSettings = get(field, "inputTypeSettings.CHARACTER_LIMIT", {});
+                                const charLimitEnabled = get(charLimitSettings, "allow", false);
+                                const maxValue = get(charLimitSettings, "maxValue");
+                                const maxLength = charLimitEnabled && maxValue ? maxValue : 255; // Default to 255
+                                return (_jsx(Input, { placeholder: get(field, "placeholder", ""), style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none", maxLength: maxLength, showCount: true }));
+                            })(), defaultName === InputTypes.PARAGRAPH && (() => {
+                                const charLimitSettings = get(field, "inputTypeSettings.CHARACTER_LIMIT", {});
+                                const charLimitEnabled = get(charLimitSettings, "allow", false);
+                                const maxValue = get(charLimitSettings, "maxValue");
+                                const maxLength = charLimitEnabled && maxValue ? maxValue : 255; // Default to 255
+                                return (_jsx(Input.TextArea, { rows: 2, placeholder: get(field, "placeholder", ""), style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none", maxLength: maxLength, showCount: true }));
+                            })(), defaultName === InputTypes.NUMBERS && (_jsx(InputNumber, { placeholder: get(field, "placeholder", ""), style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none" })), defaultName === InputTypes.DATE && (_jsx(DatePicker, { style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none" })), defaultName === InputTypes.DATE_RANGE && (_jsx(RangePicker, { placeholder: ["Start", "End"], style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none" })), (defaultName === InputTypes.SELECT ||
+                                defaultName === InputTypes.TEAM) && (_jsx(Select, { placeholder: get(field, "placeholder", ""), style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none", disabled: true })), defaultName === InputTypes.LINK && (() => {
+                                const charLimitSettings = get(field, "inputTypeSettings.CHARACTER_LIMIT", {});
+                                const charLimitEnabled = get(charLimitSettings, "allow", false);
+                                const maxValue = get(charLimitSettings, "maxValue");
+                                const maxLength = charLimitEnabled && maxValue ? maxValue : 255; // Default to 255
+                                return (_jsx(Input, { placeholder: get(field, "placeholder", ""), style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none", maxLength: maxLength, showCount: true }));
+                            })(), defaultName === InputTypes.RADIO && (_jsx(Radio.Group, { options: [], style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none" })), defaultName === InputTypes.CHECKBOX && (_jsx(Checkbox.Group, { options: [], style: { width: "100%" }, className: "md-lib-pointer-events-none" })), showOutputFormat && (_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-2", children: [_jsx(Checkbox, { onChange: (e) => onUpdateOutputFormat(index, "required", e.target.checked), checked: get(outputFormatField, "required", false), children: "Required" }), _jsx(Input, { placeholder: "Separator", value: get(outputFormatField, "separator", ""), onChange: (e) => onUpdateOutputFormat(index, "separator", e.target.value) })] }))] })] })] }));
+}

package/build/AssetType/EditAssetTemplate.d.ts

@@ -0,0 +1,5 @@
+import { AssetTemplateEntity, InputTypeEntity } from "../utilities/constants/interface";
+export default function EditAssetTemplate({ assetTemplate, inputTypes, }: {
+    inputTypes: InputTypeEntity[];
+    assetTemplate: AssetTemplateEntity;
+}): JSX.Element;

package/build/AssetType/EditAssetTemplate.js

@@ -0,0 +1,257 @@
+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 { ICON_SIZE } from "../hocs/appConstants";
+import { Tabs, Typography } from "antd";
+import { useEffect, useMemo, useState } from "react";
+import { IoMdClose } from "react-icons/io";
+// import "../../styles/styles.assetTemplates.scss";
+import { FiSave, FiEdit2 } from "react-icons/fi";
+import AddWidgets from "./FieldsSection";
+import { InputSupportedTypes, InputTypes, NotificationStatus, } from "../utilities/constants/interface";
+import { find, get, includes, map } from "lodash";
+import CustomButton from "../common/Button";
+import { showNotification } from "../common/notifications";
+import { SOMETHING_WENT_WRONG, UPDATE_SUCCESS, } from "../utilities/constants/messages";
+import { FETCH_ASSET_URL } from "../utilities/constants/apiUrls";
+import { ASSETS_SCREEN } from "../utilities/constants/routes";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { createApiClient } from "../hocs/configureAxios";
+import useAppNavigate from "../utilities/useAppNavigate";
+import useAppParams from "../utilities/useAppParams";
+let useParamsFallback = () => ({});
+try {
+    const rrd = require("react-router-dom");
+    if (rrd.useParams) {
+        useParamsFallback = rrd.useParams;
+    }
+}
+catch (_a) {
+}
+const { Paragraph } = Typography;
+const IoMdCloseIcon = IoMdClose;
+const FiEdit2Icon = FiEdit2;
+const FiSaveIcon = FiSave;
+export default function EditAssetTemplate({ assetTemplate, inputTypes, }) {
+    const params = useAppParams();
+    const routeParams = useParamsFallback();
+    const mergedParams = useMemo(() => (Object.assign(Object.assign({}, params), routeParams)), [params, routeParams]);
+    const id = mergedParams.id || params.id;
+    const navigate = useAppNavigate();
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const originalName = useMemo(() => get(assetTemplate, "name", ""), [assetTemplate]);
+    const originalDescription = useMemo(() => get(assetTemplate, "description", ""), [assetTemplate]);
+    const originalFields = useMemo(() => get(assetTemplate, "metadataFields", []), [assetTemplate]);
+    const originalImagePickerOutputFormat = useMemo(() => get(assetTemplate, "imagePickerOutputFormat", []), [assetTemplate]);
+    const [state, setState] = useState({
+        name: get(assetTemplate, "name", ""),
+        description: get(assetTemplate, "description", ""),
+        currentFieldIndex: null,
+        fields: get(assetTemplate, "metadataFields", []),
+        loading: false,
+        showOutputFormat: false,
+        imagePickerOutputFormat: get(assetTemplate, "imagePickerOutputFormat", []),
+        imagePickerOutputFormatError: false,
+        activeTab: "1",
+    });
+    useEffect(() => {
+        setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { name: get(assetTemplate, "name", ""), description: get(assetTemplate, "description", ""), fields: get(assetTemplate, "metadataFields", []), imagePickerOutputFormat: get(assetTemplate, "imagePickerOutputFormat", []) });
+        });
+    }, [assetTemplate]);
+    const { name, description, currentFieldIndex, fields, loading, showOutputFormat, imagePickerOutputFormat, imagePickerOutputFormatError, } = state;
+    const hasNameOrDescriptionChanges = useMemo(() => {
+        return name.trim() !== originalName.trim() ||
+            description.trim() !== originalDescription.trim();
+    }, [name, description, originalName, originalDescription]);
+    const hasFieldChanges = useMemo(() => {
+        if (fields.length !== originalFields.length)
+            return true;
+        return JSON.stringify(fields) !== JSON.stringify(originalFields);
+    }, [fields, originalFields]);
+    const hasImagePickerOutputFormatChanges = useMemo(() => {
+        return JSON.stringify(imagePickerOutputFormat) !== JSON.stringify(originalImagePickerOutputFormat);
+    }, [imagePickerOutputFormat, originalImagePickerOutputFormat]);
+    const canSave = hasNameOrDescriptionChanges || hasFieldChanges || hasImagePickerOutputFormatChanges;
+    const transformInputTypePayload = (updatedValues, field, mapId) => {
+        const supportedTypes = get(field, "supportedTypes", []);
+        const inputTypeSettings = {};
+        supportedTypes.forEach((type) => {
+            const defaultName = get(type, "defaultName");
+            const valueType = get(type, "valueType");
+            const typeValue = get(updatedValues, ["inputTypeSettings", defaultName]);
+            if (valueType === "boolean") {
+                inputTypeSettings[defaultName] = typeValue === true;
+            }
+            if (includes([
+                InputSupportedTypes.CHARACTER_LIMIT,
+                InputSupportedTypes.REGEX,
+                InputSupportedTypes.VALUE_RANGE,
+                InputSupportedTypes.ALLOW_TIME,
+            ], defaultName)) {
+                if (get(typeValue, "allow")) {
+                    inputTypeSettings[defaultName] = typeValue;
+                }
+                else {
+                    inputTypeSettings[defaultName] = { allow: false };
+                }
+            }
+        });
+        const payload = {
+            name: get(updatedValues, "name"),
+            placeholder: get(updatedValues, "placeholder"),
+            isMandatory: get(updatedValues, "isMandatory", false),
+            inputTypeSettings,
+            label: get(field, "label", get(field, "name", "")),
+            defaultName: get(field, "defaultName"),
+            mapId,
+            defaultValue: get(updatedValues, "defaultValue"),
+        };
+        if (get(updatedValues, "_id", null)) {
+            payload["_id"] = get(updatedValues, "_id");
+        }
+        if (includes([InputTypes.CHECKBOX, InputTypes.RADIO, InputTypes.SELECT], get(field, "defaultName"))) {
+            payload["options"] = get(updatedValues, "options", []);
+        }
+        return payload;
+    };
+    const validateImagePickerOutputFormat = () => {
+        const filteredOutput = imagePickerOutputFormat.filter((item) => item.required);
+        return filteredOutput.reduce((acc, curr, index) => {
+            if (index !== filteredOutput.length - 1 && !curr.separator) {
+                acc = true;
+            }
+            return acc;
+        }, false);
+    };
+    const validateFields = () => {
+        // Check if template name is provided
+        if (!name || name.trim() === "") {
+            showNotification("Template name is required", NotificationStatus.ERROR);
+            return false;
+        }
+        // Validate all fields have required properties
+        for (let i = 0; i < fields.length; i++) {
+            const field = fields[i];
+            if (!get(field, "name") || get(field, "name", "").trim() === "") {
+                showNotification(`Field ${i + 1}: Name is required`, NotificationStatus.ERROR);
+                return false;
+            }
+            if (!get(field, "placeholder") || get(field, "placeholder", "").trim() === "") {
+                showNotification(`Field ${i + 1}: Placeholder is required`, NotificationStatus.ERROR);
+                return false;
+            }
+        }
+        return true;
+    };
+    const handleSaveTemplate = () => __awaiter(this, void 0, void 0, function* () {
+        // Don't allow saving if a field is currently being edited
+        if (currentFieldIndex !== null) {
+            showNotification("Please finish editing the current field before saving", NotificationStatus.WARN);
+            return;
+        }
+        // Validate fields before saving
+        if (!validateFields()) {
+            return;
+        }
+        const imagePickerOutputFormatHasErrors = validateImagePickerOutputFormat();
+        if (!imagePickerOutputFormatHasErrors) {
+            if (!id) {
+                console.error("Asset ID is missing from route parameters");
+                showNotification("Asset ID is missing. Please navigate from the assets list.", NotificationStatus.ERROR);
+                return;
+            }
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
+            try {
+                const response = yield api.put(FETCH_ASSET_URL.replace(":assetId", id), {
+                    name: name,
+                    description: description,
+                    metadataFields: map(fields, (field) => {
+                        const currentInputType = find(inputTypes, (input) => get(field, "defaultName") === get(input, "defaultName"));
+                        return transformInputTypePayload(field, currentInputType, get(field, "mapId", ""));
+                    }),
+                    imagePickerOutputFormat: imagePickerOutputFormat.map((field) => {
+                        const finalField = {
+                            name: field.name,
+                            placeholder: field.placeholder,
+                            label: field.label,
+                            defaultName: field.defaultName,
+                            required: field.required,
+                            separator: field.separator,
+                            mapId: field.mapId,
+                        };
+                        if (field._id) {
+                            finalField["_id"] = field._id;
+                        }
+                        return finalField;
+                    }),
+                });
+                if (navigate) {
+                    navigate(ASSETS_SCREEN);
+                }
+                showNotification(get(response, "data.message", UPDATE_SUCCESS), NotificationStatus.SUCCESS);
+            }
+            catch (error) {
+                showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+            }
+            finally {
+                setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false })));
+            }
+        }
+        else {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { imagePickerOutputFormatError: true })));
+        }
+    });
+    const toggleShowOutputFormat = () => {
+        const hasErrors = validateImagePickerOutputFormat();
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { showOutputFormat: !prevState.showOutputFormat, imagePickerOutputFormatError: hasErrors })));
+    };
+    const tabs = [
+        {
+            key: "1",
+            label: "Fields",
+            children: (_jsx(AddWidgets, { name: name, inputTypes: inputTypes, transformInputTypePayload: transformInputTypePayload, currentFieldIndex: currentFieldIndex, setState: setState, fields: fields, imagePickerOutputFormat: imagePickerOutputFormat, setCurrentFieldIndex: (value) => setState((prevState) => (Object.assign(Object.assign({}, prevState), { currentFieldIndex: value }))), showOutputFormat: false })),
+        },
+        {
+            key: "2",
+            label: "Image picker output format",
+            disabled: fields.length === 0,
+            children: (_jsx(AddWidgets, { name: name, inputTypes: inputTypes, transformInputTypePayload: transformInputTypePayload, currentFieldIndex: currentFieldIndex, setState: setState, fields: fields, imagePickerOutputFormat: imagePickerOutputFormat, setCurrentFieldIndex: (value) => setState((prevState) => (Object.assign(Object.assign({}, prevState), { currentFieldIndex: value }))), showOutputFormat: true })),
+        },
+    ];
+    // console.log("edit asset template", fields, imagePickerOutputFormat);
+    return (_jsx(_Fragment, { children: _jsx(Tabs, { items: tabs, tabBarStyle: {
+                background: "white",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                marginBottom: 0,
+            }, centered: true, tabBarExtraContent: {
+                left: (_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-border-b md-lib-p-3 md-lib-border-borderColor dark:md-lib-border-darkBorderColor dark:md-lib-bg-darkPrimary md-lib-bg-white", children: [_jsx(IoMdCloseIcon, { size: ICON_SIZE, onClick: () => {
+                                if (navigate) {
+                                    navigate(ASSETS_SCREEN);
+                                }
+                            }, className: "md-lib-cursor-pointer" }), _jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-border-l md-lib-pl-4 md-lib-ml-4", children: [_jsx(Paragraph, { className: "md-lib-text-xl md-lib-asset-template-title", style: { marginBottom: "0px !important" }, editable: {
+                                        onChange: (val) => setState((prevState) => (Object.assign(Object.assign({}, prevState), { name: val }))),
+                                        icon: _jsx(FiEdit2Icon, { size: 15, className: "md-lib-ml-2" }),
+                                    }, children: name }), _jsx(Paragraph, { className: "md-lib-text-sm md-lib-text-gray-500 dark:md-lib-text-gray-400 md-lib-mt-1", style: { marginBottom: "0px !important" }, editable: {
+                                        onChange: (val) => setState((prevState) => (Object.assign(Object.assign({}, prevState), { description: val }))),
+                                        icon: _jsx(FiEdit2Icon, { size: 15, className: "md-lib-ml-2" }),
+                                    }, children: description || "Add description" })] })] })),
+                right: (_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-2 md-lib-ml-auto", children: [imagePickerOutputFormatError && (_jsx("p", { className: "md-lib-text-sm md-lib-text-red-500", children: "Please ensure that all required fields (except the last one) have separators configured" })), _jsx(CustomButton, { label: "Cancel", onClick: () => {
+                                if (navigate) {
+                                    navigate(ASSETS_SCREEN);
+                                }
+                            } }), _jsx(CustomButton, { label: "Save", type: currentFieldIndex !== null || !canSave ? "default" : "primary", icon: _jsx(FiSaveIcon, {}), disabled: currentFieldIndex !== null || !canSave, onClick: handleSaveTemplate, loading: loading })] })),
+            }, onChange: (key) => setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { activeTab: key, currentFieldIndex: key === "2" ? null : prevState.currentFieldIndex });
+            }) }) }));
+}

package/build/AssetType/FieldsSection.d.ts

@@ -0,0 +1,14 @@
+import { SetStateAction } from "react";
+import { InputTypeEntity } from "../utilities/constants/interface";
+export declare const getWidgetIcon: (defaultName: string | undefined | null) => import("react-icons").IconType | null;
+export default function FieldsSection({ name, inputTypes, transformInputTypePayload, currentFieldIndex, setCurrentFieldIndex, fields, setState, showOutputFormat, imagePickerOutputFormat, }: {
+    name: string;
+    inputTypes: InputTypeEntity[];
+    transformInputTypePayload: (values: any, field: InputTypeEntity, mapId: string) => void;
+    currentFieldIndex: number | null;
+    setCurrentFieldIndex: (value: number | null) => void;
+    fields: InputTypeEntity[];
+    setState: React.Dispatch<SetStateAction<any>>;
+    showOutputFormat: boolean;
+    imagePickerOutputFormat: InputTypeEntity[];
+}): JSX.Element;