@bindu-dashing/dam-solution 1.0.0

package/dist/ImagePicker/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _imagePicker = _interopRequireDefault(require("./imagePicker"));
+var _react = _interopRequireDefault(require("react"));
+function App(props) {
+  var _props$styles, _props$styles2, _props$styles3;
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: {
+        colorPrimary: props === null || props === void 0 ? void 0 : (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.primaryColor,
+        colorLink: props === null || props === void 0 ? void 0 : (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.primaryColor,
+        colorLinkHover: props === null || props === void 0 ? void 0 : (_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.secondaryColor
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_imagePicker.default, Object.assign({}, props, {
+    damAccessKey: props === null || props === void 0 ? void 0 : props.accessKey
+  })));
+}
+var _default = App;
+exports.default = _default;

package/dist/ImagePicker/style.css

@@ -0,0 +1,128 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.empty-container {
+  display: flex;
+  height: calc(100vh - 60px);
+  align-items: center;
+  justify-content: center;
+}
+
+.image-pickers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.image-picker-container .image-selection {
+  position: relative;
+}
+
+.image-picker-container h5 {
+  margin: 0 !important;
+}
+
+.image-picker-container .actions {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.image-picker-container img {
+  border-radius: 6px;
+}
+
+.image-picker-container {
+  margin-top: 20px;
+  padding: 10px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid silver;
+  border-radius: 6px;
+  background-color: white;
+  width: 220px;
+  height: 285px;
+}
+
+.image-picker-modal {
+  height: calc(100vh - 60px);
+  top: 50px !important;
+}
+
+.image-picker-modal .ant-modal-content {
+  height: 100% !important;
+}
+
+.image-picker-files .right-container {
+  max-height: calc(100vh - 220px);
+  overflow-y: scroll;
+  padding: 10px 20px;
+}
+
+.image-picker-files .empty-container {
+  height: calc(100vh - 465px);
+}
+
+.image-picker-files .empty-files-container {
+  display: flex;
+  height: 300px;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-picker-files {
+  margin-top: 50px;
+}
+
+.file-selection .ant-image {
+  height: 190px;
+  overflow: hidden;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.file-selection .ant-image .ant-image-img {
+  /* height: 100% !important; */
+  width: fit-content;
+}
+
+@media (max-width: 767px) {
+  .image-pickers {
+    justify-content: center;
+  }
+
+  .image-picker-files .right-container .file-container {
+    width: 114px;
+    height: 150px;
+  }
+
+  .image-picker-files .right-container .file-selection .ant-image {
+    height: 100px;
+  }
+
+  .image-picker-files .right-container .file-selection .select-text {
+    top: 38px;
+    left: 20px;
+  }
+}
+
+@media (max-width: 992px) {
+  .image-picker-files .right-container {
+    max-height: 550px;
+    padding: 10px 5px;
+  }
+}
+
+.dam-loading {
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 150px);
+  justify-content: center;
+  align-items: center;
+}

package/dist/ImagePickerFilters/imagePickerFilters.js

@@ -0,0 +1,382 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+require("./style.css");
+var APIS = _interopRequireWildcard(require("../constants/apiEndpoints"));
+var _useFetch = _interopRequireDefault(require("../hocs/useFetch"));
+var _helpers = require("../hocs/helpers");
+var _icons = require("@ant-design/icons");
+function ImagePickerFilters(_ref) {
+  var _state$assetType, _state$imagePicker2, _state$files;
+  let {
+    id,
+    teamIds,
+    damAccessKey,
+    secretKey,
+    subdomain,
+    styles,
+    onSelect,
+    value,
+    fileId
+  } = _ref;
+  const {
+    fetchApi
+  } = (0, _useFetch.default)();
+  const [accessToken, setAccessToken] = (0, _react.useState)(null);
+  const [state, setState] = (0, _react.useState)({
+    assetType: null,
+    imagePicker: {},
+    loading: false,
+    fieldOptions: {},
+    filters: {},
+    fieldName: "",
+    files: [],
+    selectedFileUrl: null,
+    selectedFileId: null,
+    loaderType: "",
+    selectedFieldName: ""
+  });
+  (0, _react.useEffect)(() => {
+    if (subdomain) {
+      try {
+        setState(prevState => {
+          return {
+            ...prevState,
+            loading: true,
+            loaderType: "GENERATE_TOKENS"
+          };
+        });
+        fetchApi({
+          httpMethod: "post",
+          body: {
+            access_key: process.env.REACT_APP_DAM_ACCESS_KEY || damAccessKey,
+            secret_key: process.env.REACT_APP_DAM_SECRET_KEY || secretKey,
+            subdomain: process.env.REACT_APP_DAM_SUBDOMAIN || subdomain
+          },
+          route: APIS.GENERATE_TOKENS,
+          onSuccess: response => {
+            var _response$data;
+            setState(prevState => {
+              return {
+                ...prevState,
+                loading: false,
+                loaderType: ""
+              };
+            });
+            const token = response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.access_token;
+            setAccessToken(token);
+          },
+          onFailure: () => {
+            setState(prevState => {
+              return {
+                ...prevState,
+                loaderType: "",
+                loading: false
+              };
+            });
+            setAccessToken(null);
+          },
+          damAccessKey,
+          secretKey,
+          subdomain
+        });
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  }, [subdomain]);
+  (0, _react.useEffect)(() => {
+    if (id && accessToken) {
+      try {
+        setState(prevState => {
+          return {
+            ...prevState,
+            loading: true,
+            loaderType: "ASSET_TYPE"
+          };
+        });
+        fetchApi({
+          httpMethod: "get",
+          route: APIS.FETCH_IMAGE_PICKER.replace(":id", id),
+          onSuccess: response => {
+            var _response$data2, _response$data3;
+            if (response !== null && response !== void 0 && (_response$data2 = response.data) !== null && _response$data2 !== void 0 && _response$data2.has_filters && response !== null && response !== void 0 && (_response$data3 = response.data) !== null && _response$data3 !== void 0 && _response$data3.asset_type_id) {
+              var _response$data4;
+              fetchApi({
+                httpMethod: "get",
+                route: APIS.FETCH_ASSET_TYPE.replace(":id", response === null || response === void 0 ? void 0 : (_response$data4 = response.data) === null || _response$data4 === void 0 ? void 0 : _response$data4.asset_type_id),
+                onSuccess: assetTypeResponse => {
+                  setState(prevState => {
+                    return {
+                      ...prevState,
+                      loading: false,
+                      imagePicker: response === null || response === void 0 ? void 0 : response.data,
+                      assetType: assetTypeResponse === null || assetTypeResponse === void 0 ? void 0 : assetTypeResponse.data,
+                      loaderType: ""
+                    };
+                  });
+                },
+                onFailure: () => {
+                  setState(prevState => {
+                    return {
+                      ...prevState,
+                      loading: false,
+                      loaderType: ""
+                    };
+                  });
+                },
+                accessToken,
+                damAccessKey,
+                secretKey,
+                subdomain
+              });
+            } else {
+              setState(prevState => {
+                return {
+                  ...prevState,
+                  loading: false,
+                  loaderType: ""
+                };
+              });
+            }
+          },
+          accessToken,
+          damAccessKey,
+          secretKey,
+          subdomain
+        });
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  }, [id, accessToken]);
+  const fields = (state === null || state === void 0 ? void 0 : (_state$assetType = state.assetType) === null || _state$assetType === void 0 ? void 0 : _state$assetType.metadata_fields) || [];
+  const onFilter = function (filters, fieldOptions, nextField) {
+    var _state$imagePicker, _state$assetType2;
+    let fromValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    const filtersStr = Object.keys(filters).reduce((acc, key) => {
+      const value = (filters === null || filters === void 0 ? void 0 : filters[key]) || "";
+      if (value) {
+        acc = acc == "" ? acc + `${key}:${encodeURIComponent(value)}` : acc + `~${key}:${encodeURIComponent(value)}`;
+      }
+      return acc;
+    }, "");
+    setState(prevState => {
+      return {
+        ...prevState,
+        filters,
+        fieldOptions,
+        loading: true,
+        fieldName: nextField,
+        selectedFieldName: null
+      };
+    });
+    const params = {
+      filters: filtersStr,
+      return_distinct_values: true,
+      distinct_values_key: nextField,
+      folder_id_path: state === null || state === void 0 ? void 0 : (_state$imagePicker = state.imagePicker) === null || _state$imagePicker === void 0 ? void 0 : _state$imagePicker.folder_id,
+      team_ids: JSON.stringify(teamIds),
+      is_component: true,
+      asset_type_id: state === null || state === void 0 ? void 0 : (_state$assetType2 = state.assetType) === null || _state$assetType2 === void 0 ? void 0 : _state$assetType2.id
+    };
+    fetchApi({
+      httpMethod: "get",
+      route: `${APIS.IMAGE_PICKER_FILE_FILTERS_URL}?${(0, _helpers.addQueryParams)(params)}`,
+      onSuccess: response => {
+        var _response$data5, _response$data6, _response$data6$files;
+        const currentFieldOptions = {
+          ...fieldOptions,
+          [nextField]: (response === null || response === void 0 ? void 0 : (_response$data5 = response.data) === null || _response$data5 === void 0 ? void 0 : _response$data5.distinctValues) || []
+        };
+        const finalState = {
+          fieldOptions: currentFieldOptions,
+          files: (response === null || response === void 0 ? void 0 : (_response$data6 = response.data) === null || _response$data6 === void 0 ? void 0 : (_response$data6$files = _response$data6.files) === null || _response$data6$files === void 0 ? void 0 : _response$data6$files.items) || [],
+          loading: false,
+          fieldName: ""
+        };
+        if (!fromValue) {
+          finalState["selectedFileId"] = null;
+          finalState["selectedFileUrl"] = null;
+        } else if (nextField == "") {
+          var _response$data7, _response$data7$files, _response$data7$files2;
+          const selectedFile = response === null || response === void 0 ? void 0 : (_response$data7 = response.data) === null || _response$data7 === void 0 ? void 0 : (_response$data7$files = _response$data7.files) === null || _response$data7$files === void 0 ? void 0 : (_response$data7$files2 = _response$data7$files.items) === null || _response$data7$files2 === void 0 ? void 0 : _response$data7$files2.find(item => item.id == fileId);
+          finalState["selectedFileId"] = selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.id;
+          finalState["selectedFileUrl"] = selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.thumbnail_url;
+        }
+        setState(prevState => {
+          return {
+            ...prevState,
+            ...finalState
+          };
+        });
+        if (fromValue && nextField !== "") {
+          var _fields, _response$data8, _response$data8$files, _response$data8$files2;
+          const index = fields === null || fields === void 0 ? void 0 : fields.findIndex(field => {
+            return field.name == nextField;
+          });
+          const nextNextField = fields.length !== index + 1 ? (fields === null || fields === void 0 ? void 0 : (_fields = fields[index + 1]) === null || _fields === void 0 ? void 0 : _fields.name) || "" : "";
+          const prevFields = fields.slice(0, index + 1);
+          const allFilters = {};
+          const allFieldOptions = {};
+          prevFields.forEach(item => {
+            allFilters[item.name] = filters === null || filters === void 0 ? void 0 : filters[item.name];
+            allFieldOptions[item.name] = currentFieldOptions === null || currentFieldOptions === void 0 ? void 0 : currentFieldOptions[item.name];
+          });
+          allFilters[nextField] = value === null || value === void 0 ? void 0 : value[nextField];
+          if ((response === null || response === void 0 ? void 0 : (_response$data8 = response.data) === null || _response$data8 === void 0 ? void 0 : (_response$data8$files = _response$data8.files) === null || _response$data8$files === void 0 ? void 0 : (_response$data8$files2 = _response$data8$files.items) === null || _response$data8$files2 === void 0 ? void 0 : _response$data8$files2.length) == 0) {
+            onFilter(allFilters, allFieldOptions, nextNextField, true);
+          }
+        }
+      },
+      onFailure: () => {
+        setState(prevState => {
+          return {
+            ...prevState,
+            loading: false,
+            fieldName: ""
+          };
+        });
+      },
+      accessToken,
+      damAccessKey,
+      secretKey,
+      subdomain
+    });
+  };
+  (0, _react.useEffect)(() => {
+    try {
+      if (fields.length > 0) {
+        if (value) {
+          var _fields$;
+          const fieldName = (fields === null || fields === void 0 ? void 0 : (_fields$ = fields[0]) === null || _fields$ === void 0 ? void 0 : _fields$.name) || "";
+          const currentFilters = {
+            [fieldName]: ""
+          };
+          onFilter(currentFilters, {}, fieldName, true);
+        } else {
+          var _fields$2;
+          const fieldName = (fields === null || fields === void 0 ? void 0 : (_fields$2 = fields[0]) === null || _fields$2 === void 0 ? void 0 : _fields$2.name) || "";
+          const currentFilters = {
+            [fieldName]: ""
+          };
+          onFilter(currentFilters, {}, fieldName);
+        }
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  }, [fields, value]);
+
+  // console.log(state?.filters, state?.selectedFileUrl, state?.fieldOptions);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "image-picker-filters"
+  }, state !== null && state !== void 0 && state.loading && ((state === null || state === void 0 ? void 0 : state.loaderType) == "ASSET_TYPE" || (state === null || state === void 0 ? void 0 : state.loaderType) == "GENERATE_TOKENS") ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "dam-loading"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Spin, null)) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "image-picker-filters-container"
+  }, !(state !== null && state !== void 0 && state.assetType) ? /*#__PURE__*/_react.default.createElement(_antd.Empty, {
+    description: "Asset Type not found",
+    image: _antd.Empty.PRESENTED_IMAGE_SIMPLE
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, null, state === null || state === void 0 ? void 0 : (_state$imagePicker2 = state.imagePicker) === null || _state$imagePicker2 === void 0 ? void 0 : _state$imagePicker2.name), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    layout: "vertical"
+  }, fields.map((field, index) => {
+    var _fields2, _ref2, _state$fieldOptions, _state$filters;
+    const fieldName = (field === null || field === void 0 ? void 0 : field.name) || "";
+    const nextField = fields.length !== index + 1 ? (fields === null || fields === void 0 ? void 0 : (_fields2 = fields[index + 1]) === null || _fields2 === void 0 ? void 0 : _fields2.name) || "" : "";
+    return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      key: fieldName,
+      label: fieldName
+    }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+      placeholder: fieldName,
+      key: fieldName,
+      style: {
+        width: "100%"
+      },
+      options: (_ref2 = (state === null || state === void 0 ? void 0 : (_state$fieldOptions = state.fieldOptions) === null || _state$fieldOptions === void 0 ? void 0 : _state$fieldOptions[fieldName]) || []) === null || _ref2 === void 0 ? void 0 : _ref2.map(option => {
+        return {
+          label: option,
+          value: option
+        };
+      }),
+      showSearch: true,
+      value: (state === null || state === void 0 ? void 0 : (_state$filters = state.filters) === null || _state$filters === void 0 ? void 0 : _state$filters[fieldName]) || null,
+      onChange: val => {
+        const prevFields = fields.slice(0, index + 1);
+        const allFilters = {};
+        const allFieldOptions = {};
+        prevFields.forEach(item => {
+          var _state$filters2, _state$fieldOptions2;
+          allFilters[item.name] = state === null || state === void 0 ? void 0 : (_state$filters2 = state.filters) === null || _state$filters2 === void 0 ? void 0 : _state$filters2[item.name];
+          allFieldOptions[item.name] = state === null || state === void 0 ? void 0 : (_state$fieldOptions2 = state.fieldOptions) === null || _state$fieldOptions2 === void 0 ? void 0 : _state$fieldOptions2[item.name];
+        });
+        allFilters[fieldName] = val;
+        onFilter(allFilters, allFieldOptions, nextField);
+      },
+      loading: (state === null || state === void 0 ? void 0 : state.loading) && (state === null || state === void 0 ? void 0 : state.fieldName) == fieldName
+    }));
+  }), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: "Image"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    placeholder: "Select Image",
+    style: {
+      width: "100%"
+    },
+    key: "IMAGE_THUMBNAIL",
+    loading: (state === null || state === void 0 ? void 0 : state.loading) && (state === null || state === void 0 ? void 0 : state.fieldName) == "",
+    showSearch: true,
+    options: state === null || state === void 0 ? void 0 : (_state$files = state.files) === null || _state$files === void 0 ? void 0 : _state$files.map(file => {
+      return {
+        label: file === null || file === void 0 ? void 0 : file.name,
+        value: file === null || file === void 0 ? void 0 : file.id,
+        file
+      };
+    }),
+    optionLabelProp: "label",
+    value: state === null || state === void 0 ? void 0 : state.selectedFileId,
+    onChange: (val, option) => {
+      if (onSelect) {
+        var _state$assetType3, _option$file;
+        const value = (0, _helpers.getFormattedValue)(state === null || state === void 0 ? void 0 : (_state$assetType3 = state.assetType) === null || _state$assetType3 === void 0 ? void 0 : _state$assetType3.output_format, option === null || option === void 0 ? void 0 : (_option$file = option.file) === null || _option$file === void 0 ? void 0 : _option$file.file_url, option === null || option === void 0 ? void 0 : option.file);
+        // console.log(val, value, state?.filters);
+        onSelect(val, value, state === null || state === void 0 ? void 0 : state.filters);
+      }
+      setState(prevState => {
+        var _option$file2;
+        return {
+          ...prevState,
+          selectedFileId: val,
+          selectedFileUrl: option === null || option === void 0 ? void 0 : (_option$file2 = option.file) === null || _option$file2 === void 0 ? void 0 : _option$file2.thumbnail_url,
+          selectedFieldName: ""
+        };
+      });
+    }
+  }), (state === null || state === void 0 ? void 0 : state.selectedFileUrl) && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      backgroundImage: "linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)",
+      backgroundSize: "16px 16px",
+      backgroundPosition: "0 0, 0 8px, 8px -8px, -8px 0px",
+      display: "inline-block",
+      marginTop: "10px",
+      borderRadius: "10px"
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: state === null || state === void 0 ? void 0 : state.selectedFileUrl,
+    width: 200,
+    key: state === null || state === void 0 ? void 0 : state.selectedFileUrl,
+    style: {
+      borderRadius: "10px",
+      display: "block"
+    },
+    alt: "Selected file preview"
+  })))))));
+}
+var _default = ImagePickerFilters;
+exports.default = _default;

package/dist/ImagePickerFilters/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _imagePickerFilters = _interopRequireDefault(require("./imagePickerFilters"));
+function App(props) {
+  var _props$styles, _props$styles2, _props$styles3;
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: {
+        colorPrimary: props === null || props === void 0 ? void 0 : (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.primaryColor,
+        colorLink: props === null || props === void 0 ? void 0 : (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.primaryColor,
+        colorLinkHover: props === null || props === void 0 ? void 0 : (_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.secondaryColor
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_imagePickerFilters.default, Object.assign({}, props, {
+    damAccessKey: props === null || props === void 0 ? void 0 : props.accessKey
+  })));
+}
+var _default = App;
+exports.default = _default;

package/dist/ImagePickerFilters/style.css

@@ -0,0 +1,15 @@
+.image-picker-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.image-picker-filters-container {
+  width: 100%;
+  margin-top: 5px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid silver;
+  border-radius: 6px;
+  background-color: white;
+}

package/dist/RefreshKey/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _refreshKey = _interopRequireDefault(require("./refreshKey"));
+function App(props) {
+  var _props$styles, _props$styles2, _props$styles3;
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: {
+        colorPrimary: props === null || props === void 0 ? void 0 : (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.primaryColor,
+        colorLink: props === null || props === void 0 ? void 0 : (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.primaryColor,
+        colorLinkHover: props === null || props === void 0 ? void 0 : (_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.secondaryColor
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_refreshKey.default, Object.assign({}, props, {
+    damAccessKey: props === null || props === void 0 ? void 0 : props.accessKey
+  })));
+}
+var _default = App;
+exports.default = _default;

package/dist/RefreshKey/refreshKey.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var APIS = _interopRequireWildcard(require("../constants/apiEndpoints"));
+var _antd = require("antd");
+var _useFetch = _interopRequireDefault(require("../hocs/useFetch"));
+const RefreshKey = _ref => {
+  let {
+    damAccessKey,
+    secretKey,
+    subdomain
+  } = _ref;
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [refreshLoading, setRefreshLoading] = (0, _react.useState)(false);
+  const {
+    fetchApi
+  } = (0, _useFetch.default)();
+  const [accessToken, setAccessToken] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    if (subdomain) {
+      setLoading(true);
+      fetchApi({
+        httpMethod: "post",
+        body: {
+          access_key: process.env.REACT_APP_DAM_ACCESS_KEY || damAccessKey,
+          secret_key: process.env.REACT_APP_DAM_SECRET_KEY || secretKey,
+          subdomain: process.env.REACT_APP_DAM_SUBDOMAIN || subdomain
+        },
+        route: APIS.GENERATE_TOKENS,
+        onSuccess: response => {
+          var _response$data;
+          setLoading(false);
+          const token = response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.access_token;
+          setAccessToken(token);
+        },
+        onFailure: () => {
+          setLoading(false);
+          setAccessToken(null);
+        },
+        damAccessKey,
+        secretKey,
+        subdomain
+      });
+    }
+  }, [subdomain]);
+  const onRefreshKey = () => {
+    setRefreshLoading(true);
+    fetchApi({
+      httpMethod: "POST",
+      body: {
+        access_key: damAccessKey,
+        secret_key: secretKey,
+        subdomain: subdomain
+      },
+      damAccessKey,
+      secretKey,
+      subdomain,
+      route: APIS.REFRESH_CLIENT_KEYS,
+      onSuccess: () => {
+        setRefreshLoading(false);
+        _antd.notification.success({
+          message: "Client key refreshed successfully"
+        });
+      },
+      onFailure: () => {
+        setRefreshLoading(false);
+      },
+      accessToken
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "dam-loading"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Spin, null)) : /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "primary",
+    onClick: () => onRefreshKey(),
+    loading: refreshLoading
+  }, "Refresh Key"));
+};
+var _default = RefreshKey;
+exports.default = _default;