@bindu-dashing/dam-solution-v2 5.8.6

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,179 @@
+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";
+const { Paragraph } = Typography;
+const IoMdCloseIcon = IoMdClose;
+const FiEdit2Icon = FiEdit2;
+const FiSaveIcon = FiSave;
+export default function EditAssetTemplate({ assetTemplate, inputTypes, }) {
+    const { id } = useAppParams();
+    const navigate = useAppNavigate();
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const [state, setState] = useState({
+        name: get(assetTemplate, "name", ""),
+        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", ""), fields: get(assetTemplate, "metadataFields", []), imagePickerOutputFormat: get(assetTemplate, "imagePickerOutputFormat", []) });
+        });
+    }, [assetTemplate]);
+    const { name, currentFieldIndex, fields, loading, showOutputFormat, imagePickerOutputFormat, imagePickerOutputFormatError, } = state;
+    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 handleSaveTemplate = () => __awaiter(this, void 0, void 0, function* () {
+        const imagePickerOutputFormatHasErrors = validateImagePickerOutputFormat();
+        if (!imagePickerOutputFormatHasErrors) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
+            try {
+                const response = yield api.put(FETCH_ASSET_URL.replace(":assetId", id), {
+                    name: name,
+                    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;
+                    }),
+                });
+                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: () => navigate(ASSETS_SCREEN), className: "md-lib-cursor-pointer" }), _jsx(Paragraph, { className: "md-lib-text-xl md-lib-border-l md-lib-pl-4 md-lib-ml-4 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 })] })),
+                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 fix the errors in the Image Picker Output format" })), _jsx(CustomButton, { label: "Cancel", onClick: () => navigate(ASSETS_SCREEN) }), _jsx(CustomButton, { label: "Save", type: currentFieldIndex !== null ? "default" : "primary", icon: _jsx(FiSaveIcon, {}), disabled: currentFieldIndex !== null, 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) => 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;

package/build/AssetType/FieldsSection.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 { ICON_SIZE } from "../hocs/appConstants";
+import { Typography } from "antd";
+import { useMemo, useState } from "react";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import DraggedField from "./DraggedField";
+import AddFieldProperties from "./AddFieldProperties";
+import { InputTypes, NotificationStatus, } from "../utilities/constants/interface";
+import { filter, find, first, get, isEqual, map, reduce, toNumber, uniqueId, } from "lodash";
+import { CiCalendarDate, CiLink, CiText } from "react-icons/ci";
+import { BsTextParagraph } from "react-icons/bs";
+import { RiNumbersLine } from "react-icons/ri";
+import { MdOutlineDateRange, MdOutlineGroup } from "react-icons/md";
+import { GoSingleSelect } from "react-icons/go";
+import { IoIosRadioButtonOff } from "react-icons/io";
+import { IoCheckboxOutline } from "react-icons/io5";
+import { FaRegUser } from "react-icons/fa";
+import { showNotification } from "../common/notifications";
+import { DELETE_CONFIRMATION_MESSAGE, DELETE_MESSAGE_DESCRIPTION, DELETE_OK_TEXT, DELETE_SUCCESS, INPUT_SETTINGS_VALIDATION_ERROR, INPUT_SETTINGS_VALIDATION_ERROR_AT_SWITCH_INPUT, SOMETHING_WENT_WRONG, } from "../utilities/constants/messages";
+import { getInputTypeValidationErrors } from "../utilities/helpers/validators";
+import { DELETE_ASSET_FIELD_URL } from "../utilities/constants/apiUrls";
+import { DeleteConfirmationModal } from "../common/CustomElements";
+import { createApiClient } from "../hocs/configureAxios";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { EMPTY_ASSET_TEMPLATE_WIDGETS_URL } from "../utilities/constants/imageUrls";
+import _ from "lodash";
+import useAppParams from "../utilities/useAppParams";
+export const getWidgetIcon = (defaultName) => {
+    switch (defaultName.toUpperCase()) {
+        case InputTypes.TEXT:
+            return CiText;
+        case InputTypes.PARAGRAPH:
+            return BsTextParagraph;
+        case InputTypes.NUMBERS:
+            return RiNumbersLine;
+        case InputTypes.DATE:
+            return CiCalendarDate;
+        case InputTypes.DATE_RANGE:
+            return MdOutlineDateRange;
+        case InputTypes.SELECT:
+            return GoSingleSelect;
+        case InputTypes.LINK:
+            return CiLink;
+        case InputTypes.RADIO:
+            return IoIosRadioButtonOff;
+        case InputTypes.CHECKBOX:
+            return IoCheckboxOutline;
+        case InputTypes.PERSON:
+            return FaRegUser;
+        case InputTypes.TEAM:
+            return MdOutlineGroup;
+        default:
+            return null;
+    }
+};
+export default function FieldsSection({ name, inputTypes, transformInputTypePayload, currentFieldIndex, setCurrentFieldIndex, fields, setState, showOutputFormat, imagePickerOutputFormat, }) {
+    const { id } = useAppParams();
+    const [fieldState, setFieldState] = useState({
+        showConfirmModal: false,
+        selectedField: null,
+        loading: false,
+    });
+    const { showConfirmModal, selectedField, loading } = fieldState;
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const toggleConfirmModal = (field = null) => {
+        setFieldState((prevState) => (Object.assign(Object.assign({}, prevState), { showConfirmModal: !prevState.showConfirmModal, selectedField: field, loading: false })));
+    };
+    const onDragEnd = (result) => {
+        const source = get(result, "source");
+        const destination = get(result, "destination");
+        if (!destination)
+            return;
+        if (get(source, "droppableId") === "droppable1" &&
+            get(destination, "droppableId") === "droppable1")
+            return;
+        if (isEqual(source, "droppable2") && isEqual(destination, "droppable1"))
+            return;
+        if (get(source, "droppableId") === get(destination, "droppableId") &&
+            get(fields, "length", 0) > 0) {
+            const reorderedFields = showOutputFormat
+                ? [...imagePickerOutputFormat]
+                : [...fields];
+            const [moved] = reorderedFields.splice(get(source, "index"), 1);
+            reorderedFields.splice(get(destination, "index"), 0, moved);
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { fields: showOutputFormat ? fields : reorderedFields, imagePickerOutputFormat: showOutputFormat
+                    ? reorderedFields
+                    : imagePickerOutputFormat })));
+        }
+        else {
+            const draggedWidget = find(inputTypes, (type) => get(type, "_id") === get(result, "draggableId"));
+            if (draggedWidget) {
+                const maxIdField = reduce(fields, (prev, curr) => {
+                    return toNumber(get(curr, "_id")) > toNumber(get(prev, "_id"))
+                        ? curr
+                        : prev;
+                }, first(fields) || { _id: "0" });
+                const newWidget = Object.assign(Object.assign({}, draggedWidget), { label: get(draggedWidget, "name", ""), _id: null, mapId: uniqueId() });
+                const reorderedFields = [...fields];
+                const imagePickerOutputFormatFields = [...imagePickerOutputFormat];
+                reorderedFields.splice(get(destination, "index"), 0, newWidget);
+                imagePickerOutputFormatFields.splice(get(destination, "index"), 0, Object.assign(Object.assign({}, newWidget), { required: false, separator: "" }));
+                setState((prevState) => (Object.assign(Object.assign({}, prevState), { fields: reorderedFields, currentFieldIndex: get(destination, "index", null), imagePickerOutputFormat: imagePickerOutputFormatFields })));
+            }
+        }
+    };
+    const onAddLabel = (id, value) => {
+        const updatedFields = map(fields, (field) => {
+            if (get(field, "_id") === id) {
+                return Object.assign(Object.assign({}, field), { label: value });
+            }
+            return field;
+        });
+        const updatedImagePickerOutputFormat = map(imagePickerOutputFormat, (field) => {
+            if (get(field, "_id") === id) {
+                return Object.assign(Object.assign({}, field), { label: value });
+            }
+            return field;
+        });
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { fields: updatedFields, imagePickerOutputFormat: updatedImagePickerOutputFormat })));
+    };
+    const onUpdateOutputFormat = (id, key, value) => {
+        // console.log(id, key, value, "onUpdateOutputFormat");
+        const updatedImagePickerOutputFormat = map(imagePickerOutputFormat, (field, index) => {
+            if (index === id) {
+                return Object.assign(Object.assign({}, field), { [key]: value });
+            }
+            return field;
+        });
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { imagePickerOutputFormat: updatedImagePickerOutputFormat })));
+    };
+    // console.log(imagePickerOutputFormat, "imagePickerOutputFormat", fields);
+    const onDeleteField = (ind) => {
+        const currentField = fields.find((field, index) => index === ind);
+        const updatedFields = filter(fields, (field, index) => index !== ind);
+        const deleteField = find(fields, (field, index) => index === ind);
+        const updatedImagePickerOutputFormat = filter(imagePickerOutputFormat, (field, index) => get(currentField, "mapId") !== get(field, "mapId"));
+        if (get(deleteField, "_id")) {
+            toggleConfirmModal(deleteField);
+        }
+        else {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { fields: updatedFields, currentFieldIndex: null, imagePickerOutputFormat: updatedImagePickerOutputFormat })));
+        }
+    };
+    const onDeleteExistedField = () => __awaiter(this, void 0, void 0, function* () {
+        setFieldState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
+        try {
+            const response = yield api.delete(DELETE_ASSET_FIELD_URL.replace(":assetId", id).replace(":id", get(selectedField, "_id")));
+            const updatedFields = filter(fields, (field, index) => get(field, "_id") !== get(selectedField, "_id"));
+            const updatedImagePickerOutputFormat = filter(imagePickerOutputFormat, (field, index) => get(field, "mapId") !== get(selectedField, "mapId"));
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { fields: updatedFields, currentFieldIndex: null, imagePickerOutputFormat: updatedImagePickerOutputFormat })));
+            toggleConfirmModal();
+            showNotification(get(response, "data.message", DELETE_SUCCESS), NotificationStatus.SUCCESS);
+        }
+        catch (error) {
+            setFieldState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false })));
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        }
+    });
+    const currentField = useMemo(() => {
+        return find(fields, (field, index) => index === currentFieldIndex);
+    }, [currentFieldIndex, fields]);
+    const currentInputType = useMemo(() => {
+        return find(inputTypes, (input) => get(currentField, "defaultName") === get(input, "defaultName"));
+    }, [inputTypes, currentField]);
+    const onUpdateField = (updatedValues, existedField, index) => {
+        const currentField = index || index == 0 ? (fields === null || fields === void 0 ? void 0 : fields[index]) || null : null;
+        const data = transformInputTypePayload(updatedValues, existedField, get(currentField, "mapId", ""));
+        const updatedFields = map(fields, (field, i) => {
+            if (i === index) {
+                return data;
+            }
+            return field;
+        });
+        // console.log("imagepicker", imagePickerOutputFormat);
+        const updatedImagePickerOutputFormat = map(imagePickerOutputFormat, (field, i) => {
+            if (currentField &&
+                get(field, "mapId") &&
+                get(currentField, "mapId") === get(field, "mapId")) {
+                return Object.assign(Object.assign({}, field), { name: get(data, "name"), label: get(data, "label"), placeholder: get(data, "placeholder"), defaultName: get(data, "defaultName") });
+            }
+            return field;
+        });
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { fields: updatedFields, imagePickerOutputFormat: updatedImagePickerOutputFormat })));
+    };
+    const getFormattedValue = (data) => {
+        const sortedData = _.sortBy(data, "order");
+        const value = sortedData === null || sortedData === void 0 ? void 0 : sortedData.reduce((acc, field) => {
+            if (field === null || field === void 0 ? void 0 : field.required) {
+                // if (field?.name !== "File Url") {
+                acc = acc + (field === null || field === void 0 ? void 0 : field.name);
+                if (field === null || field === void 0 ? void 0 : field.separator) {
+                    acc = acc + (field === null || field === void 0 ? void 0 : field.separator);
+                }
+                // }
+            }
+            return acc;
+        }, "");
+        return value;
+    };
+    // console.log("imagepicker output format", imagePickerOutputFormat);
+    return (_jsxs(_Fragment, { children: [" ", _jsx(DragDropContext, { onDragEnd: currentFieldIndex === null || showOutputFormat
+                    ? onDragEnd
+                    : () => {
+                        !showOutputFormat &&
+                            showNotification(INPUT_SETTINGS_VALIDATION_ERROR, NotificationStatus.WARN);
+                    }, children: _jsxs("div", { className: `md-lib-grid ${showOutputFormat ? "md-lib-grid-cols-1" : "md-lib-grid-cols-4"} ${showOutputFormat ? "md-lib-h-screen" : ""}`, children: [showOutputFormat && (_jsxs("div", { className: "md-lib-p-8", children: [_jsx("p", { className: "md-lib-text-sm md-lib-text-orange-500", children: "Note: Please ensure that all required fields has separators" }), _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-2", children: [_jsx("p", { className: "md-lib-text-sm md-lib-font-semibold", children: "Sample File Format: " }), _jsx("pre", { children: getFormattedValue(imagePickerOutputFormat) })] })] })), !showOutputFormat && (_jsx(Droppable, { droppableId: "droppable1", children: (provided) => (_jsxs("div", Object.assign({}, provided.droppableProps, { ref: provided.innerRef, children: [_jsxs("div", { className: "md-lib-p-3 md-lib-col-span-1 md-lib-border-r dark:md-lib-border-darkBorderColor dark:md-lib-bg-darkPrimary", children: [_jsx(Typography.Title, { level: 4, children: "Form Widgets" }), _jsx("p", { className: "md-lib-text-sm md-lib-description md-lib-mb-3", children: "Drag and drop form elements in additional section" }), map(inputTypes, (type, index) => {
+                                                const IconComponent = getWidgetIcon(get(type, "defaultName"));
+                                                return (_jsx(Draggable, { draggableId: get(type, "_id"), index: index, children: (provided) => (_jsxs("div", Object.assign({ className: "md-lib-flex md-lib-items-center md-lib-gap-2 md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor md-lib-p-3 md-lib-mb-2 md-lib-rounded", ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { children: [IconComponent && (_jsx(IconComponent, { size: ICON_SIZE })), _jsx("p", { children: get(type, "name") })] }))) }, get(type, "_id")));
+                                            })] }), provided.placeholder] }))) })), _jsx("div", { className: `${!!currentField && !showOutputFormat ? "md-lib-col-span-2" : "md-lib-col-span-3"} dark:md-lib-bg-darkPrimary`, children: _jsx(Droppable, { droppableId: "droppable2", children: (provided) => (_jsxs("div", Object.assign({}, provided.droppableProps, { ref: provided.innerRef, className: "md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-[20px] md-lib-my-4 md-lib-mx-8", children: [_jsx("p", { className: "md-lib-text-xl md-lib-border-b md-lib-p-3 md-lib-asset-template-title md-lib-truncate", children: name }), _jsx("div", { className: "md-lib-p-4", children: get(fields, "length") === 0 ? (_jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-items-center md-lib-justify-center", children: [_jsx("img", { src: EMPTY_ASSET_TEMPLATE_WIDGETS_URL, alt: "Empty Asset Template Widgets", width: 250, height: 250 }), _jsx("p", { className: "md-lib-text-sm md-lib-description md-lib-mt-2", children: "Drag fields to create form" })] })) : (map(showOutputFormat ? imagePickerOutputFormat : fields, (field, index) => (_jsx(Draggable, { draggableId: `${(field === null || field === void 0 ? void 0 : field._id)
+                                                    ? `selected-${get(field, "_id")}`
+                                                    : `selected-${index}`}`, index: index, children: (provided) => (_jsx("div", Object.assign({ ref: provided.innerRef }, provided.draggableProps, { children: _jsx(DraggedField, { provided: provided, field: field, outputFormatField: imagePickerOutputFormat === null || imagePickerOutputFormat === void 0 ? void 0 : imagePickerOutputFormat[index], onAddLabel: onAddLabel, onDeleteField: onDeleteField, onUpdateOutputFormat: onUpdateOutputFormat, setCurrentFieldIndex: (val) => __awaiter(this, void 0, void 0, function* () {
+                                                            if (currentFieldIndex === null) {
+                                                                setCurrentFieldIndex(val);
+                                                                return;
+                                                            }
+                                                            const field = currentField;
+                                                            const currentInputType = find(inputTypes, (input) => get(field, "defaultName") ===
+                                                                get(input, "defaultName"));
+                                                            const validationErrors = getInputTypeValidationErrors(field, currentInputType);
+                                                            if (validationErrors.length > 0 &&
+                                                                !showOutputFormat) {
+                                                                showNotification(INPUT_SETTINGS_VALIDATION_ERROR_AT_SWITCH_INPUT, NotificationStatus.WARN);
+                                                                return;
+                                                            }
+                                                            setCurrentFieldIndex(val);
+                                                        }), currentFieldIndex: currentFieldIndex, index: index, showOutputFormat: showOutputFormat }) }))) }, `${(field === null || field === void 0 ? void 0 : field._id)
+                                                ? `selected-${get(field, "_id")}`
+                                                : `selected-${index}`}`)))) }), provided.placeholder] }))) }) }), !!currentField && !showOutputFormat && (_jsx("div", { className: "md-lib-col-span-1 md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor", children: _jsx(AddFieldProperties, { field: currentField, index: currentFieldIndex, setCurrentFieldIndex: (val) => setCurrentFieldIndex(val), onUpdateField: (updatedValues, field, index) => onUpdateField(updatedValues, field, index), currentInputType: currentInputType, allFields: fields }) }))] }) }), showConfirmModal && (_jsx(DeleteConfirmationModal, { showDeleteModal: showConfirmModal, toggleDeleteModal: toggleConfirmModal, okText: DELETE_OK_TEXT, onOk: onDeleteExistedField, loading: loading, description: DELETE_CONFIRMATION_MESSAGE.replace(":action", "Delete").replace(":entity", `${get(selectedField, "name", "this field")}`), subHeading: DELETE_MESSAGE_DESCRIPTION }))] }));
+}

package/build/AssetType/assetTemplatesContainer.d.ts

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

package/build/AssetType/assetTemplatesContainer.js

@@ -0,0 +1,71 @@
+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 { useEffect, useMemo, useState } from "react";
+import { get, includes } from "lodash";
+import { DEFAULT_PAGE } from "../hocs/appConstants";
+import AssetTemplatesTable from "./AssetTemplatesTable";
+import { NotificationStatus, SortOrders, } from "../utilities/constants/interface";
+import { showNotification } from "../common/notifications";
+import { SOMETHING_WENT_WRONG } from "../utilities/constants/messages";
+import { FETCH_ASSETS_URL } from "../utilities/constants/apiUrls";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import PageTitle from "../ui/pageTitle";
+import CreateAssetTemplate from "./CreateAssetTemplate";
+import { NOT_FOUND_IMAGE_URL } from "../utilities/constants/imageUrls";
+import { createApiClient } from "../hocs/configureAxios";
+import { addQueryParams } from "../hocs/helpers";
+import Loader from "../common/loader/loader";
+function AssetTemplatesContainer() {
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const [state, setState] = useState({
+        loading: false,
+        totalCount: 0,
+        totalPages: 0,
+        assetTemplates: [],
+        filters: {
+            sortBy: "createdAt",
+            sortOrder: SortOrders.DESCEND,
+            page: DEFAULT_PAGE,
+            name: "",
+        },
+    });
+    const { loading, totalCount, totalPages, assetTemplates, filters } = state;
+    const { brand } = damConfig;
+    useEffect(() => {
+        if (brand) {
+            onFetchAssetTemplates({});
+        }
+    }, [brand]);
+    const onFetchAssetTemplates = (...args_1) => __awaiter(this, [...args_1], void 0, function* (params = {}) {
+        setState((prev) => (Object.assign(Object.assign({}, prev), { loading: true })));
+        Object.keys(params).forEach((key) => {
+            if (includes(["name"], key) && params[key] && params[key].length > 2) {
+                return;
+            }
+            if (params[key] === undefined ||
+                params[key] === "" ||
+                params[key] === null) {
+                delete params[key];
+            }
+        });
+        try {
+            const response = yield api.get(`${FETCH_ASSETS_URL.replace(":brandId", get(brand, "_id"))}?${addQueryParams(params)}`);
+            setState((prev) => (Object.assign(Object.assign({}, prev), { assetTemplates: get(response, "data.data", []), totalCount: get(response, "data.total"), totalPages: get(response, "data.totalPages"), filters: params, loading: false })));
+        }
+        catch (error) {
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+            setState((prev) => (Object.assign(Object.assign({}, prev), { loading: false })));
+        }
+    });
+    return (_jsx("div", { className: "md-lib-p-4", children: loading ? (_jsx(Loader, {})) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center", children: [_jsx(PageTitle, { label: "Assets Templates" }), get(assetTemplates, "length") > 0 && (_jsx("div", { className: "md-lib-ml-auto md-lib-hidden md:md-lib-block", children: _jsx(CreateAssetTemplate, { label: "Create" }) }))] }), (get(assetTemplates, "length") > 0 || Object.keys(filters).length > 0) ? (_jsx("div", { className: "md-lib-mt-4", children: _jsx(AssetTemplatesTable, { assetTemplates: assetTemplates, totalCount: totalCount, totalPages: totalPages, onFetchAssetTemplates: onFetchAssetTemplates, filters: filters, loading: loading }) })) : (_jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-items-center md-lib-justify-center", children: [_jsx("img", { src: NOT_FOUND_IMAGE_URL, alt: "Not Found", width: 300, height: 300 }), _jsx("p", { className: "md-lib-mt-3 md-lib-text-sm md-lib-font-semibold", children: "No ticket template has been created yet" }), _jsx("div", { className: "md-lib-mt-4 md-lib-hidden md:md-lib-block", children: _jsx(CreateAssetTemplate, { label: "Add Template" }) })] }))] })) }));
+}
+export default AssetTemplatesContainer;

package/build/AssetType/fieldProperties/DateField.d.ts

@@ -0,0 +1,5 @@
+import { InputTypeEntity, InputTypeSupportedTypeEntity } from "../../utilities/constants/interface";
+export default function DateField({ field, supportedTypes, }: {
+    field: InputTypeEntity;
+    supportedTypes: InputTypeSupportedTypeEntity[];
+}): JSX.Element;

package/build/AssetType/fieldProperties/DateField.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { InputSupportedTypes, } from "../../utilities/constants/interface";
+import { Col, Form, Row, Switch } from "antd";
+import { get, isEqual, find, map } from "lodash";
+import { useEffect, useState } from "react";
+export default function DateField({ field, supportedTypes, }) {
+    const [allowTimeEnabled, setAllowTimeEnabled] = useState(false);
+    useEffect(() => {
+        const timeSupport = find(supportedTypes, (s) => get(s, "defaultName") === InputSupportedTypes.ALLOW_TIME);
+        setAllowTimeEnabled(!!timeSupport);
+    }, [supportedTypes]);
+    return (_jsx(_Fragment, { children: map(supportedTypes, (type) => {
+            const defaultName = get(type, "defaultName");
+            const name = get(type, "name");
+            const valueType = get(type, "valueType");
+            const id = get(type, "_id");
+            if (isEqual(defaultName, InputSupportedTypes.ALLOW_TIME) &&
+                isEqual(valueType, "boolean")) {
+                return (_jsxs(Row, { className: "md-lib-flex md-lib-items-center", children: [_jsx(Col, { span: 12, children: name }), _jsx(Col, { span: 12, push: 8, children: _jsx(Form.Item, { name: ["inputTypeSettings", defaultName, "allow"], className: "md-lib-mb-0", valuePropName: "checked", children: _jsx(Switch, { onChange: (val) => setAllowTimeEnabled(val) }) }) })] }, id));
+            }
+            return null;
+        }) }));
+}

package/build/AssetType/fieldProperties/NumberField.d.ts

@@ -0,0 +1,5 @@
+import { InputTypeEntity, InputTypeSupportedTypeEntity } from "../../utilities/constants/interface";
+export default function NumberField({ field, supportedTypes, }: {
+    field: InputTypeEntity;
+    supportedTypes: InputTypeSupportedTypeEntity[];
+}): JSX.Element;