@bindu-dashing/dam-solution-v2 5.8.6

package/build/CreateClient/CreateClientForm.js

@@ -0,0 +1,165 @@
+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 { Button, Drawer, Form, Input, Select, Typography } from "antd";
+import { useEffect, useMemo, useState } from "react";
+import { ACCESS_TYPES, DAM_LOCATION_TYPES } from "../hocs/appConstants";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { CREATE_SUB_BRAND } from "../utilities/constants/apiUrls";
+import axios from "axios";
+import { createApiClient } from "../hocs/configureAxios";
+import { CREATE_SUCCESS, SOMETHING_WENT_WRONG, } from "../utilities/constants/messages";
+import { NotificationStatus } from "../utilities/constants/interface";
+import { showNotification } from "../common/notifications";
+import { get } from "lodash";
+const CreateClientForm = ({ teamsApi, username, password, toggleShow, onSuccess, clientSubdomain, }) => {
+    const damConfig = useDamConfig();
+    const { appType } = damConfig;
+    const [loading, setLoading] = useState(false);
+    const [damLocationType, setDamLocationType] = useState("external");
+    const [filteredTeams, setFilteredTeams] = useState([]);
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const [form] = Form.useForm();
+    const onChangeDamLocationType = (e) => {
+        setDamLocationType(e);
+        form.setFieldValue("dam_location_details", { type: e });
+    };
+    useEffect(() => {
+        if (clientSubdomain) {
+            form.setFieldValue("subdomain", clientSubdomain);
+        }
+    }, []);
+    const onFinish = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g;
+        try {
+            const values = Object.assign(Object.assign({}, data), { accessKey: appType == "reactJs"
+                    ? process.env.REACT_APP_MIXDRIVE_CLIENT_PARENT_ACCESS_KEY
+                    : process.env.NEXT_PUBLIC_MIXDRIVE_CLIENT_PARENT_ACCESS_KEY, secretKey: appType == "reactJs"
+                    ? process.env.REACT_APP_MIXDRIVE_CLIENT_PARENT_SECRET_KEY
+                    : process.env.NEXT_PUBLIC_MIXDRIVE_CLIENT_PARENT_SECRET_KEY, parentSubdomain: appType == "reactJs"
+                    ? process.env.REACT_APP_MIXDRIVE_CLIENT_PARENT_SUBDOMAIN
+                    : process.env.NEXT_PUBLIC_MIXDRIVE_CLIENT_PARENT_SUBDOMAIN, teamsApiDetails: {
+                    teamsApi: teamsApi,
+                    username: username,
+                    password: password,
+                }, damLocationDetails: damLocationType === "external"
+                    ? {
+                        bucket: (_a = data === null || data === void 0 ? void 0 : data.damLocationDetails) === null || _a === void 0 ? void 0 : _a.bucket,
+                        locationType: damLocationType === "external" ? "EXTERNAL" : "INTERNAL",
+                        rootPath: (_b = data === null || data === void 0 ? void 0 : data.damLocationDetails) === null || _b === void 0 ? void 0 : _b.rootPath,
+                        accessKeyId: (_c = data === null || data === void 0 ? void 0 : data.damLocationDetails) === null || _c === void 0 ? void 0 : _c.accessKeyId,
+                        secretAccessKey: (_d = data === null || data === void 0 ? void 0 : data.damLocationDetails) === null || _d === void 0 ? void 0 : _d.secretAccessKey,
+                        url: (_e = data === null || data === void 0 ? void 0 : data.damLocationDetails) === null || _e === void 0 ? void 0 : _e.url,
+                        region: (_f = data === null || data === void 0 ? void 0 : data.damLocationDetails) === null || _f === void 0 ? void 0 : _f.region,
+                    }
+                    : {
+                        locationType: damLocationType === "external" ? "EXTERNAL" : "INTERNAL",
+                    } });
+            setLoading(true);
+            const response = yield api.post(CREATE_SUB_BRAND, values);
+            setLoading(false);
+            showNotification((_g = response === null || response === void 0 ? void 0 : response.message) !== null && _g !== void 0 ? _g : (get(response, "message") || CREATE_SUCCESS), NotificationStatus.SUCCESS);
+            toggleShow();
+            if (onSuccess) {
+                onSuccess(response === null || response === void 0 ? void 0 : response.data);
+            }
+        }
+        catch (error) {
+            // console.error("Error creating client:", error);
+            setLoading(false);
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        }
+    });
+    useEffect(() => {
+        if (teamsApi && username && password) {
+            fetchTeams();
+        }
+    }, [teamsApi, username, password]);
+    const fetchTeams = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        try {
+            const response = yield axios.get(teamsApi, {
+                headers: {
+                    Authorization: "Basic " + btoa(username + ":" + password),
+                },
+            });
+            const options = (_b = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.map((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}`,
+                };
+            });
+            setFilteredTeams(options);
+        }
+        catch (err) {
+            console.log("Error while fetching external teams", err);
+        }
+    });
+    return (_jsx(Drawer, { open: true, title: "Create Client", onClose: toggleShow, width: 500, maskClosable: false, children: _jsxs(Form, { layout: "vertical", form: form, onFinish: onFinish, children: [_jsx(Form.Item, { label: "Name", name: "name", rules: [
+                        {
+                            required: true,
+                            message: "Name is required",
+                        },
+                    ], children: _jsx(Input, { placeholder: "Name" }) }), _jsx(Form.Item, { label: "Access Types", name: "accessTypes", rules: [
+                        {
+                            required: true,
+                            message: "Access type is required",
+                        },
+                    ], children: _jsx(Select, { options: ACCESS_TYPES, mode: "multiple", placeholder: "Select Access Type" }) }), _jsx(Form.Item, { label: "Admin Teams", name: "adminTeams", rules: [
+                        {
+                            required: true,
+                            message: "Team Ids is required",
+                        },
+                    ], children: _jsx(Select, { showSearch: true, mode: "multiple", placeholder: "Team Ids", options: filteredTeams, optionFilterProp: "key" }) }), _jsxs(Form.Item, { label: "DAM Location Details", name: "damLocationDetails", children: [_jsx(Form.Item, { label: "Type", name: ["damLocationDetails", "type"], rules: [
+                                {
+                                    required: true,
+                                    message: "Type is required",
+                                },
+                            ], children: _jsx(Select, { options: DAM_LOCATION_TYPES, onChange: (e) => {
+                                    onChangeDamLocationType(e);
+                                }, placeholder: "Type" }) }), damLocationType === "external" && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { label: "Bucket", name: ["damLocationDetails", "bucket"], rules: [
+                                        {
+                                            required: true,
+                                            message: "Bucket is required",
+                                        },
+                                    ], children: _jsx(Input, { placeholder: "Bucket" }) }), _jsx(Form.Item, { label: "Root Path", name: ["damLocationDetails", "rootPath"], rules: [
+                                        {
+                                            required: true,
+                                            message: "Root path is required",
+                                        },
+                                    ], children: _jsx(Input, { placeholder: "Root path" }) }), _jsx(Form.Item, { label: "Access Key", name: ["damLocationDetails", "accessKeyId"], rules: [
+                                        {
+                                            required: true,
+                                            message: "Access key is required",
+                                        },
+                                    ], children: _jsx(Input, { placeholder: "Access Key" }) }), _jsx(Form.Item, { label: "Secret Access Key", name: ["damLocationDetails", "secretAccessKey"], rules: [
+                                        {
+                                            required: true,
+                                            message: "Secret Access Key is required",
+                                        },
+                                    ], children: _jsx(Input, { placeholder: "Secret Key" }) }), _jsx(Form.Item, { label: "Url", name: ["damLocationDetails", "url"], rules: [
+                                        {
+                                            required: true,
+                                            message: "Url is required",
+                                        },
+                                    ], children: _jsx(Input, { placeholder: "Url" }) }), _jsx(Form.Item, { label: "Region", name: ["damLocationDetails", "region"], rules: [
+                                        {
+                                            required: true,
+                                            message: "Region is required",
+                                        },
+                                    ], children: _jsx(Input, { placeholder: "Region" }) })] }))] }), _jsx(Form.Item, { label: "Subdomain", name: "subdomain", rules: [
+                        {
+                            required: true,
+                            message: "Subdomain is required",
+                        },
+                    ], children: _jsx(Input, { placeholder: "Subdomain" }) }), _jsx(Form.Item, { children: _jsx(Button, { htmlType: "submit", type: "primary", block: true, loading: loading, children: "Submit" }) })] }) }));
+};
+export default CreateClientForm;

package/build/CreateClient/index.d.ts

@@ -0,0 +1,14 @@
+declare function App(props: {
+    accessKey: string;
+    secretKey: string;
+    subdomain: string;
+    clientSubdomain: string;
+    teamsApi: string;
+    username: string;
+    password: string;
+    onSuccess: (data: any) => void;
+    teamIds: string[] | number[];
+    styles: Record<string, any>;
+    appType: string;
+}): JSX.Element;
+export default App;

package/build/CreateClient/index.js

@@ -0,0 +1,18 @@
+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 CreateClient from "./CreateClientBtn";
+import ToastProvider from "../hocs/ToastProvider";
+function App(props) {
+    const config = {
+        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,
+    };
+    return (_jsx(DamConfigProvider, { config: config, children: _jsxs(ThemeProvider, { styles: props === null || props === void 0 ? void 0 : props.styles, sessionTheme: ThemeModes.LIGHT, children: [_jsx(CreateClient, { teamsApi: props === null || props === void 0 ? void 0 : props.teamsApi, username: props === null || props === void 0 ? void 0 : props.username, password: props === null || props === void 0 ? void 0 : props.password, clientSubdomain: props === null || props === void 0 ? void 0 : props.clientSubdomain, onSuccess: props === null || props === void 0 ? void 0 : props.onSuccess }), _jsx(ToastProvider, {})] }) }));
+}
+export default App;

package/build/ImagePicker/MetaFieldOptions.d.ts

@@ -0,0 +1,14 @@
+import { FormInstance } from "antd";
+import { MetaDataFieldEntity } from "../utilities/constants/interface";
+declare function MetaFieldOptions({ meta, imagePickerId, form, previousMetaFields, index, totalFields, onMetaFieldChange, nextFieldId, allFieldIds, }: {
+    meta: MetaDataFieldEntity;
+    imagePickerId: string;
+    form: FormInstance;
+    previousMetaFields: MetaDataFieldEntity[];
+    index: number;
+    totalFields: number;
+    onMetaFieldChange?: (filters: Record<string, any>, index: number) => void;
+    nextFieldId?: string;
+    allFieldIds: string[];
+}): JSX.Element;
+export default MetaFieldOptions;

package/build/ImagePicker/MetaFieldOptions.js

@@ -0,0 +1,75 @@
+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 { Form } from "antd";
+import { useEffect, useMemo, useState } from "react";
+import { find, get, map, pick, slice } from "lodash";
+import { FETCH_META_FIELD_OPTIONS_URL } from "../utilities/constants/apiUrls";
+import { InputTypes, NotificationStatus, } from "../utilities/constants/interface";
+import { CustomSelectFormItem } from "../common/RenderFormItem";
+import { showNotification } from "../common/notifications";
+import { SOMETHING_WENT_WRONG } from "../utilities/constants/messages";
+import { useQueryClient } from "react-query";
+import { getCurrentBrandUsers } from "../react-query/hooks/brand-hooks";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { createApiClient } from "../hocs/configureAxios";
+function MetaFieldOptions({ meta, imagePickerId, form, previousMetaFields, index, totalFields, onMetaFieldChange, nextFieldId, allFieldIds, }) {
+    const allFormValues = Form.useWatch([], form);
+    const filters = pick(allFormValues, slice(allFieldIds, 0, index));
+    const damConfig = useDamConfig();
+    const { brand } = damConfig;
+    const brandId = get(brand, "_id");
+    const queryClient = useQueryClient();
+    const users = getCurrentBrandUsers(queryClient, brandId);
+    const [state, setState] = useState({
+        loading: false,
+        options: [],
+    });
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const { loading, options } = state;
+    const currentValue = Form.useWatch(get(meta, "_id"), form);
+    const allValues = Form.useWatch([], form);
+    const fetchOptions = (...args_1) => __awaiter(this, [...args_1], void 0, function* (filters = {}) {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
+        try {
+            const payload = {
+                distinctValuesKey: get(meta, "_id"),
+                filters,
+            };
+            const response = yield api.put(FETCH_META_FIELD_OPTIONS_URL.replace(":id", imagePickerId), payload);
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false, options: get(meta, "defaultValue") === InputTypes.PERSON
+                    ? map(get(response, "data.values"), (id) => {
+                        const user = find(users, (u) => get(u, "_id") === id);
+                        return {
+                            label: get(user, "name", "Unknown"),
+                            value: get(user, "_id", id),
+                        };
+                    })
+                    : map(get(response, "data.values"), (text) => ({
+                        label: text,
+                        value: text,
+                    })) })));
+        }
+        catch (err) {
+            showNotification(get(err, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+            setState({ loading: false, options: [] });
+        }
+    });
+    useEffect(() => {
+        fetchOptions(filters);
+    }, [JSON.stringify(filters)]);
+    return (_jsx(CustomSelectFormItem, { name: get(meta, "_id"), label: get(meta, "name"), options: options, loading: loading, onChange: (value) => {
+            form.setFieldValue(get(meta, "_id"), value);
+            if (typeof onMetaFieldChange === "function") {
+                onMetaFieldChange(filters, index);
+            }
+        } }));
+}
+export default MetaFieldOptions;

package/build/ImagePicker/TestImagePickerModal.d.ts

@@ -0,0 +1,8 @@
+import { ImagePickerEntity } from "../utilities/constants/interface";
+declare function TestImagePickerModal({ imagePicker, open, toggleModal, setSelectedFile, }: {
+    imagePicker: ImagePickerEntity | {};
+    open: boolean;
+    toggleModal: () => void;
+    setSelectedFile: (thumbnailUrl: string, value: string) => void;
+}): JSX.Element;
+export default TestImagePickerModal;

package/build/ImagePicker/TestImagePickerModal.js

@@ -0,0 +1,61 @@
+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 { Modal } from "antd";
+import { get } from "lodash";
+import DriveContainer from "../MyDrive/DriveContainer";
+import { useMemo, useState } from "react";
+import CustomButton from "../common/Button";
+import TestImageFromMetalData from "./TestImgFromMetaData";
+import { getFormattedValue } from "../hocs/helpers";
+import { createApiClient } from "../hocs/configureAxios";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { FETCH_ASSET_URL, FETCH_SHARED_FILE_URL, } from "../utilities/constants/apiUrls";
+function TestImagePickerModal({ imagePicker, open, toggleModal, setSelectedFile, }) {
+    const [state, setState] = useState({
+        parentFolderId: get(imagePicker, "folderId"),
+        fileForConfirmation: {},
+    });
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const { parentFolderId, fileForConfirmation } = state;
+    const onSelectFile = () => __awaiter(this, void 0, void 0, function* () {
+        // console.log(fileForConfirmation);
+        const response = yield api.get(FETCH_SHARED_FILE_URL.replace(":fileId", get(fileForConfirmation, "_id")));
+        // console.log(response);
+        const fileData = get(response, "data");
+        const assetId = get(fileData, "assetId");
+        const assetTypeResponse = yield api.get(FETCH_ASSET_URL.replace(":assetId", assetId));
+        const imagePickerOutputFormat = get(assetTypeResponse, "data.imagePickerOutputFormat", []);
+        const metadataFields = get(assetTypeResponse, "data.metadataFields", []);
+        // console.log(imagePickerOutputFormat);
+        const formattedOutputFormat = imagePickerOutputFormat.map((field) => {
+            // console.log("field", field);
+            const metaField = metadataFields.find((item) => (item === null || item === void 0 ? void 0 : item.name) == (field === null || field === void 0 ? void 0 : field.name));
+            return Object.assign(Object.assign({}, field), { fieldId: get(metaField, "_id") });
+        });
+        // console.log(formattedOutputFormat);
+        const value = getFormattedValue(formattedOutputFormat, fileForConfirmation === null || fileForConfirmation === void 0 ? void 0 : fileForConfirmation.s3Url, get(fileData, "metadata", {}));
+        console.log(value);
+        setSelectedFile(fileForConfirmation === null || fileForConfirmation === void 0 ? void 0 : fileForConfirmation.thumbnailUrl, value);
+    });
+    return (_jsx(Modal, { title: `Test ${get(imagePicker, "name", "Image picker")}`, open: open, onCancel: toggleModal, okText: "Create", maskClosable: false, width: get(imagePicker, "assetId") ? 600 : 1000, footer: get(fileForConfirmation, "thumbnailUrl") ? (_jsx(CustomButton, { type: "primary", label: "Confirm", onClick: () => {
+                onSelectFile();
+            } }, "confirm")) : null, children: get(imagePicker, "assetId") ? (_jsx(TestImageFromMetalData, { imagePicker: imagePicker, selectedPickerFile: fileForConfirmation, setSelectedFile: (file) => {
+                setState((prevState) => (Object.assign(Object.assign({}, prevState), { fileForConfirmation: file })));
+            } })) : (_jsx(DriveContainer, { setSelectedFile: (file, localFile = false) => {
+                console.log("local file", file);
+                setState((prevState) => (Object.assign(Object.assign({}, prevState), { fileForConfirmation: file })));
+                if (localFile) {
+                    setSelectedFile(get(file, "s3Url", ""), get(file, "thumbnailUrl", ""));
+                }
+            }, parentFolderId: parentFolderId, setParentFolderId: (id) => setState((prevState) => (Object.assign(Object.assign({}, prevState), { parentFolderId: id, fileForConfirmation: {} }))), pickerFolderId: get(imagePicker, "folderId"), selectedPickerFile: fileForConfirmation, imagePicker: imagePicker })) }));
+}
+export default TestImagePickerModal;

package/build/ImagePicker/TestImgFromMetaData.d.ts

@@ -0,0 +1,7 @@
+import { FileEntity, ImagePickerEntity } from "../utilities/constants/interface";
+declare function TestImageFromMetalData({ imagePicker, selectedPickerFile, setSelectedFile, }: {
+    imagePicker: ImagePickerEntity;
+    selectedPickerFile: FileEntity;
+    setSelectedFile: (file: FileEntity) => void;
+}): JSX.Element;
+export default TestImageFromMetalData;

package/build/ImagePicker/TestImgFromMetaData.js

@@ -0,0 +1,82 @@
+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 { FETCH_ASSET_URL, FETCH_META_FIELD_FILES_URL, } from "../utilities/constants/apiUrls";
+import { NotificationStatus, } from "../utilities/constants/interface";
+import { get, map, reduce, slice } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+import { showNotification } from "../common/notifications";
+import { SOMETHING_WENT_WRONG } from "../utilities/constants/messages";
+import Loader from "../common/loader/loader";
+import { Form } from "antd";
+import PageTitle from "../ui/pageTitle";
+import MetaFieldOptions from "./MetaFieldOptions";
+import { FiImage } from "react-icons/fi";
+import { createApiClient } from "../hocs/configureAxios";
+import { useDamConfig } from "../hocs/DamConfigContext";
+const FiImageIcon = FiImage;
+function TestImageFromMetalData({ imagePicker, selectedPickerFile, setSelectedFile, }) {
+    const [form] = Form.useForm();
+    const [state, setState] = useState({
+        templateLoading: false,
+        assetTemplate: {},
+        loading: false,
+        files: [],
+    });
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const { templateLoading, assetTemplate, loading, files } = state;
+    const fetchTemplate = (assetId) => __awaiter(this, void 0, void 0, function* () {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { templateLoading: true })));
+        try {
+            const response = yield api.get(`${FETCH_ASSET_URL.replace(":assetId", assetId)}`);
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { assetTemplate: get(response, "data", {}), templateLoading: false })));
+        }
+        catch (error) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { assetTemplate: {}, templateLoading: false })));
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        }
+    });
+    const handleFinalFilterSelect = (filters) => __awaiter(this, void 0, void 0, function* () {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
+        try {
+            const response = yield api.put(FETCH_META_FIELD_FILES_URL.replace(":id", get(imagePicker, "_id")), { filters });
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false, files: get(response, "data", []) })));
+        }
+        catch (err) {
+            showNotification(SOMETHING_WENT_WRONG, NotificationStatus.ERROR);
+            setState((prev) => (Object.assign(Object.assign({}, prev), { images: [], loading: false })));
+        }
+    });
+    useEffect(() => {
+        if (get(imagePicker, "assetId")) {
+            fetchTemplate(get(imagePicker, "assetId"));
+        }
+    }, [imagePicker]);
+    const handleMetaFieldChange = (...args_1) => __awaiter(this, [...args_1], void 0, function* (filters = {}, index) {
+        const allFieldIds = map(get(assetTemplate, "metadataFields", []), "_id");
+        const succeedingFieldIds = slice(allFieldIds, index + 1);
+        form.setFieldsValue(reduce(succeedingFieldIds, (acc, id) => {
+            acc[id] = undefined;
+            return acc;
+        }, {}));
+        handleFinalFilterSelect(filters);
+    });
+    return (_jsx("div", { children: templateLoading ? (_jsx(Loader, {})) : (_jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-gap-3", children: [_jsx(PageTitle, { label: get(assetTemplate, "name", "Asset Template") }), _jsx(Form, { layout: "vertical", form: form, children: map(get(assetTemplate, "metadataFields", []), (meta, index) => {
+                        const metadataFields = get(assetTemplate, "metadataFields", []);
+                        const allFieldIds = map(metadataFields, "_id");
+                        const nextField = metadataFields[index + 1];
+                        const nextFieldId = get(nextField, "_id");
+                        return (_jsx(MetaFieldOptions, { meta: meta, imagePickerId: get(imagePicker, "_id"), form: form, previousMetaFields: slice(metadataFields, 0, index), index: index, totalFields: metadataFields.length, onMetaFieldChange: handleMetaFieldChange, nextFieldId: nextFieldId, allFieldIds: allFieldIds }, index));
+                    }) }), loading ? (_jsx(Loader, {})) : (_jsx(_Fragment, { children: get(files, "length") > 0 && (_jsx("div", { className: "md-lib-grid md-lib-grid-cols-1 sm:md-lib-grid-cols-2 md:md-lib-grid-cols-3 lg:md-lib-grid-cols-4 xl:md-lib-grid-cols-5 md-lib-gap-4 md-lib-p-4", children: map(files, (file) => (_jsxs("div", { onClick: () => setSelectedFile(file), className: `md-lib-flex md-lib-flex-col md-lib-items-center md-lib-border md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-rounded-md md-lib-p-3 dark:md-lib-bg-darkPrimaryBg ${get(file, "_id") === get(selectedPickerFile, "_id")
+                                ? "md-lib-bg-borderColor dark:md-lib-bg-darkBorderColor"
+                                : ""}`, children: [_jsx("div", { className: "md-lib-w-full md-lib-aspect-square md-lib-flex md-lib-items-center md-lib-justify-center md-lib-rounded md-lib-border md-lib-border-dashed md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-overflow-hidden", children: get(file, `${get(imagePicker, "_id")}.s3Url`) ? (_jsx("img", { src: get(file, `s3Url`), alt: get(file, `name`, "Unknown"), width: 200, height: 200, className: "md-lib-object-contain md-lib-w-full md-lib-h-full" })) : (_jsx(FiImageIcon, { className: "md-lib-text-4xl md-lib-text-borderColor dark:md-lib-text-darkBorderColor" })) }), _jsx("div", { className: "md-lib-font-medium md-lib-text-sm md-lib-mt-3 md-lib-text-center md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-truncate md-lib-w-[80px]", title: get(file, "name"), children: get(file, "name") })] }, get(file, "_id")))) })) }))] })) }));
+}
+export default TestImageFromMetalData;

package/build/ImagePicker/imagePickerComponent.d.ts

@@ -0,0 +1,6 @@
+declare function ImagePicker({ id, onSelect, url, }: {
+    id: string;
+    onSelect?: (url: string, value: any) => void;
+    url?: string;
+}): JSX.Element;
+export default ImagePicker;

package/build/ImagePicker/imagePickerComponent.js

@@ -0,0 +1,63 @@
+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 { useDamConfig } from "../hocs/DamConfigContext";
+import { createApiClient } from "../hocs/configureAxios";
+import { FETCH_IMAGEPICKER_URL } from "../utilities/constants/apiUrls";
+import { get } from "lodash";
+import { FiImage } from "react-icons/fi";
+import CustomButton from "../common/Button";
+import TestImagePickerModal from "./TestImagePickerModal";
+const FiImageIcon = FiImage;
+function ImagePicker({ id, onSelect, url, }) {
+    const damConfig = useDamConfig();
+    const { brand } = damConfig;
+    const [picker, setPicker] = useState({});
+    const [imagePickerUrl, setImagePickerUrl] = useState("");
+    const [show, setShow] = useState(false);
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        if (url) {
+            setImagePickerUrl(url);
+        }
+    }, [url]);
+    useEffect(() => {
+        if (brand) {
+            getImagePicker();
+        }
+    }, [brand]);
+    const getImagePicker = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setLoading(true);
+            const response = yield api.get(FETCH_IMAGEPICKER_URL.replace(":id", id));
+            setPicker(get(response, "data", {}));
+            setLoading(false);
+        }
+        catch (err) {
+            console.log("Error while fetching image picker", err);
+        }
+    });
+    const onImageSelect = (url, value) => {
+        setImagePickerUrl(url);
+        toggleShow();
+        if (onSelect) {
+            onSelect(url, value);
+        }
+    };
+    const toggleShow = () => {
+        setShow(!show);
+    };
+    return (_jsxs(_Fragment, { children: [" ", _jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-items-center md-lib-border md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-rounded-md md-lib-p-3 dark:md-lib-bg-darkPrimaryBg", children: [_jsx("div", { className: "md-lib-w-full md-lib-aspect-square md-lib-flex md-lib-items-center md-lib-justify-center md-lib-rounded md-lib-border md-lib-border-dashed md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-overflow-hidden", children: imagePickerUrl ? (_jsx("img", { src: imagePickerUrl, alt: get(picker, "name", "Unknown"), width: 200, height: 200, className: "md-lib-object-contain md-lib-w-full md-lib-h-full" })) : (_jsx(FiImageIcon, { className: "md-lib-text-4xl md-lib-text-borderColor dark:md-lib-text-darkBorderColor" })) }), _jsx("div", { className: "md-lib-font-medium md-lib-text-sm md-lib-mt-3 md-lib-text-center md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-truncate md-lib-w-[150px]", title: get(picker, "name"), children: get(picker, "name") }), _jsx("div", { className: "md-lib-flex md-lib-items-center md-lib-justify-between md-lib-w-full md-lib-mt-3", children: _jsx(CustomButton, { type: "primary", label: "Select", className: "md-lib-w-11/12", onClick: toggleShow }) })] }, get(picker, "_id")), show && (_jsx(TestImagePickerModal, { open: show, toggleModal: toggleShow, imagePicker: picker, setSelectedFile: (thumbnailUrl, value) => {
+                    onImageSelect(thumbnailUrl, value);
+                } }))] }));
+}
+export default ImagePicker;

package/build/ImagePicker/index.d.ts

@@ -0,0 +1,13 @@
+declare function App(props: {
+    accessKey?: string;
+    secretKey?: string;
+    subdomain?: string;
+    teamIds?: string[];
+    styles?: any;
+    appType?: string;
+    id: string;
+    onSelect?: (url: string, value: any) => void;
+    url?: string;
+    routerVersion: 4 | 5 | 6;
+}): JSX.Element;
+export default App;

package/build/ImagePicker/index.js

@@ -0,0 +1,24 @@
+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 AppProvider from "../hocs/AppProvider";
+import ToastProvider from "../hocs/ToastProvider";
+import { MemoryRouter } from "react-router-dom";
+import AppRoutes from "./routes";
+import process from "process";
+function App(props) {
+    const config = {
+        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,
+    };
+    if (typeof window !== "undefined" && !window.process) {
+        window.process = process;
+    }
+    return (_jsx(DamConfigProvider, { config: config, children: _jsx(ThemeProvider, { styles: props === null || props === void 0 ? void 0 : props.styles, sessionTheme: ThemeModes.LIGHT, children: _jsxs(AppProvider, { children: [_jsx(MemoryRouter, { initialEntries: ["/"], children: _jsx(AppRoutes, { id: props.id, onSelect: props === null || props === void 0 ? void 0 : props.onSelect, url: props === null || props === void 0 ? void 0 : props.url, routerVersion: (props === null || props === void 0 ? void 0 : props.routerVersion) || 6 }) }), _jsx(ToastProvider, {})] }) }) }));
+}
+export default App;

package/build/ImagePicker/routes.d.ts

@@ -0,0 +1,6 @@
+export default function AppRoutes(props: {
+    id: string;
+    onSelect?: (url: string, value: any) => void;
+    url?: string;
+    routerVersion: 4 | 5 | 6;
+}): JSX.Element;

package/build/ImagePicker/routes.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IMAGE_PICKER_SCREEN } from "../utilities/constants/routes";
+import ImagePicker from "./imagePickerComponent";
+import { NavigatorProvider } from "../utilities/NavigatorProvider";
+export default function AppRoutes(props) {
+    const { routerVersion } = props;
+    if (routerVersion === 6) {
+        // ✅ React Router v6
+        const { Routes, Route } = require("react-router-dom");
+        return (_jsx(Routes, { children: _jsx(Route, { path: IMAGE_PICKER_SCREEN, element: _jsx(ImagePicker, { id: props.id, onSelect: props === null || props === void 0 ? void 0 : props.onSelect, url: props === null || props === void 0 ? void 0 : props.url }) }, IMAGE_PICKER_SCREEN) }));
+    }
+    // ✅ React Router v4/v5
+    const { Switch, Route, withRouter } = require("react-router-dom");
+    const Wrapper = ({ history }) => (_jsx(NavigatorProvider, { history: history, children: _jsx(Switch, { children: _jsx(Route, { path: IMAGE_PICKER_SCREEN, render: (props) => (_jsx(ImagePicker, Object.assign({ id: props.id, onSelect: props === null || props === void 0 ? void 0 : props.onSelect, url: props === null || props === void 0 ? void 0 : props.url }, props))) }, IMAGE_PICKER_SCREEN) }) }));
+    const WithRouterWrapper = withRouter(Wrapper);
+    return _jsx(WithRouterWrapper, {});
+}

package/build/ImagePickerFilters/ImagePickerFiltersComponent.d.ts

@@ -0,0 +1,8 @@
+declare function ImagePickerFiltersComponent({ id, onSelect, url, value, fileId, }: {
+    id: string;
+    onSelect?: (url: string, value: any) => void;
+    url?: string;
+    value?: any;
+    fileId?: string;
+}): JSX.Element;
+export default ImagePickerFiltersComponent;