@scaleflex/widget-explorer 4.3.0 → 4.4.0

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/index.js

@@ -1,603 +0,0 @@
-var _excluded = ["variantUrl", "name", "desc"],
-  _excluded2 = ["variantUrl", "name"];
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import { useState, useEffect, useMemo, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { Button, InputGroup } from '@scaleflex/ui/core';
-import { PC } from '@scaleflex/widget-common';
-import { Download, Lock, Preset, Rename } from '@scaleflex/icons';
-import { useTheme } from '@scaleflex/ui/theme/hooks';
-import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
-import getFileNameAndExtension from '@scaleflex/widget-utils/lib/getFileNameAndExtension';
-import { useModal } from '@scaleflex/widget-core/lib/hooks';
-import { isVisibilityPublic } from '@scaleflex/widget-utils/lib/visibility';
-import getFileLink from '@scaleflex/widget-utils/lib/getFileLink';
-import isFunction from '@scaleflex/widget-utils/lib/isFunction';
-import cuid from 'cuid';
-import { useExplorer } from '../../../../hooks';
-import StyledVariants from './Variations.styled';
-import VariationsSearch from './VariationsSearch';
-import { createRemovedBackgroundVariantObject } from './Variations.utils';
-import { addNewVariant, deleteVariant, editVariant, getVariants, addNewPreset } from './Variations.thunks';
-import { fetchFileByUuid, filesVariationsUpdated, fileUpdated, selectFilesVariations } from '../../../../slices/files.slice';
-import { useTransformedDownloadModal } from '../../../Modals/TransformedDownload';
-import VariationsContent from './VariationsContent';
-import VariationsSkeleton from './VariationsSkeleton';
-import ErroredViewPlaceholder from '../../../Views/ErroredViewPlaceholder';
-import UrlBuilderModal from '../../../UrlBuilderModal';
-import getQueryStringFromUrl from '../../../../utils/getQueryStringFromUrl';
-import { VARIATIONS_TAB_IDS } from './Variations.constants';
-import { selectPresets } from '../../../../slices/metadata.slice';
-import VariationsTabNavigator from './VariationsTabNavigator';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-var _isUnMounting = false;
-var extractVariantQuery = function extractVariantQuery(variantUrl) {
-  return variantUrl.substr(variantUrl.indexOf('?') + 1);
-};
-var URL_BUILDER_OPENED_AS_MODE = {
-  PRESET: 'preset',
-  VARIANT: 'variant'
-};
-var VariationsTab = function VariationsTab(_ref) {
-  var originalFile = _ref.originalFile,
-    previewedFile = _ref.previewedFile,
-    setPreviewedFile = _ref.setPreviewedFile,
-    activeVariationsTabId = _ref.activeVariationsTabId,
-    setActiveVariationsTabId = _ref.setActiveVariationsTabId;
-  var dispatch = useDispatch();
-  var toggleModal = useModal();
-  var theme = useTheme();
-  var _useExplorer = useExplorer(),
-    i18n = _useExplorer.i18n,
-    info = _useExplorer.info,
-    _useExplorer$opts = _useExplorer.opts,
-    hideDownloadVariationsOption = _useExplorer$opts.hideDownloadVariationsOption,
-    variationsShowAddPresetButton = _useExplorer$opts.variationsShowAddPresetButton,
-    variationsHideManualSubTab = _useExplorer$opts.variationsHideManualSubTab;
-  var triggerTransformedDownloadModal = useTransformedDownloadModal();
-  var displayedFileVariant = useSelector(selectFilesVariations);
-  var presets = useSelector(selectPresets);
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    isLoading = _useState2[0],
-    setIsLoading = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    searchQuery = _useState4[0],
-    setSearchQuery = _useState4[1];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    originalVariants = _useState6[0],
-    setOriginalVariants = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    showUrlBuilderModal = _useState8[0],
-    setShowUrlBuilderModal = _useState8[1];
-  var _useState9 = useState(''),
-    _useState10 = _slicedToArray(_useState9, 2),
-    queryString = _useState10[0],
-    setQueryString = _useState10[1];
-  var _useState11 = useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    selectedVariant = _useState12[0],
-    setSelectedVariant = _useState12[1];
-  var urlBuilderSaveModeRef = useRef(URL_BUILDER_OPENED_AS_MODE.VARIANT);
-  var url = getFileLink(originalFile, 'cdn');
-  var isAutomaticTabActive = activeVariationsTabId === VARIATIONS_TAB_IDS.AUTOMATIC;
-  var customVariants = useMemo(function () {
-    return originalVariants.filter(function (variant) {
-      return !presets.includes(variant.name) && !variant.bgRemoved;
-    });
-  }, [originalVariants, presets]);
-  var presetsVariants = useMemo(function () {
-    var presetMappedVariants = presets.map(function (preset) {
-      // Handle case where preset might be an object with {name, desc} properties
-      var presetName = typeof preset === 'string' ? preset : (preset === null || preset === void 0 ? void 0 : preset.name) || (preset === null || preset === void 0 ? void 0 : preset.desc) || 'Unknown';
-      return {
-        url: "".concat(url, "&p=").concat(presetName),
-        name: presetName,
-        uuid: cuid()
-      };
-    });
-    var bgRemovedVariants = originalVariants.filter(function (variant) {
-      return variant.bgRemoved && !presets.some(function (preset) {
-        var presetName = typeof preset === 'string' ? preset : (preset === null || preset === void 0 ? void 0 : preset.name) || (preset === null || preset === void 0 ? void 0 : preset.desc);
-        return presetName === variant.name;
-      });
-    });
-    return [].concat(_toConsumableArray(bgRemovedVariants), _toConsumableArray(presetMappedVariants));
-  }, [url, presets, originalVariants]);
-  var nextVariants = isAutomaticTabActive ? presetsVariants : customVariants;
-  var searchedVariants = useMemo(function () {
-    if (!searchQuery) {
-      return nextVariants;
-    }
-    var loweredCaseValue = searchQuery.toLowerCase();
-    return nextVariants.filter(function (variant) {
-      return variant.name.toLowerCase().includes(loweredCaseValue);
-    });
-  }, [searchQuery, originalVariants, nextVariants]);
-  var triggerSaveRequest = function triggerSaveRequest(requestPromise, successFn) {
-    setIsLoading(true);
-    return handlePromise(requestPromise, function () {
-      if (_isUnMounting) {
-        return;
-      }
-      successFn.apply(void 0, arguments);
-    }, info, function () {
-      if (_isUnMounting) {
-        return;
-      }
-      setIsLoading(false);
-    });
-  };
-  var handleSavingNewPreset = function handleSavingNewPreset(_ref2) {
-    var variantUrl = _ref2.variantUrl,
-      name = _ref2.name,
-      desc = _ref2.desc,
-      moreProps = _objectWithoutProperties(_ref2, _excluded);
-    var _ref3 = moreProps || {},
-      onClose = _ref3.onClose;
-    if (isFunction(onClose)) {
-      onClose();
-    }
-    info(i18n('explorerFileWindowVariationSavedInfo', 3000));
-    var newPreset = {
-      name: name,
-      desc: desc,
-      params: extractVariantQuery(variantUrl).split('&').reduce(function (acc, curr) {
-        var _curr$split = curr.split('='),
-          _curr$split2 = _slicedToArray(_curr$split, 2),
-          key = _curr$split2[0],
-          value = _curr$split2[1];
-        acc[key] = value;
-        return acc;
-      }, {}),
-      sampleImgSrc: url
-    };
-    triggerSaveRequest(dispatch(addNewPreset({
-      preset: newPreset
-    })), function (_) {
-      info(i18n('explorerFileWindowPresetAddedInfo'), 'success');
-      setShowUrlBuilderModal(false);
-    }, setIsLoading);
-  };
-  var handleUrlBuilderNewSave = function handleUrlBuilderNewSave() {
-    if (urlBuilderSaveModeRef.current === URL_BUILDER_OPENED_AS_MODE.PRESET) {
-      triggerAddPresetModal.apply(void 0, arguments);
-      return;
-    }
-    triggerAddVariantModal.apply(void 0, arguments);
-  };
-  var handleSavingNewVariant = function handleSavingNewVariant(_ref4) {
-    var variantUrl = _ref4.variantUrl,
-      name = _ref4.name,
-      moreProps = _objectWithoutProperties(_ref4, _excluded2);
-    var _ref5 = moreProps || {},
-      onClose = _ref5.onClose;
-    if (isFunction(onClose)) {
-      onClose();
-    }
-    var _getFileNameAndExtens = getFileNameAndExtension(originalFile.name, originalFile.type),
-      extension = _getFileNameAndExtens.extension;
-    info(i18n('explorerFileWindowVariationSavedInfo', 3000));
-    var newVariantData = {
-      name: name,
-      url: variantUrl,
-      query: extractVariantQuery(variantUrl),
-      extension: extension
-    };
-    triggerSaveRequest(dispatch(addNewVariant({
-      fileUuid: originalFile.uuid,
-      data: newVariantData
-    })), function (newVariant) {
-      info(i18n('explorerFileWindowVariationAddedInfo'), 'success');
-      dispatch(filesVariationsUpdated(newVariant));
-      setShowUrlBuilderModal(false);
-      setOriginalVariants([].concat(_toConsumableArray(originalVariants), [newVariant]));
-    }, setIsLoading);
-  };
-  var triggerAddPresetModal = function triggerAddPresetModal(variantUrl, moreProps) {
-    var tmpData = {
-      name: '',
-      desc: '',
-      error: ''
-    };
-    var updateName = function updateName(e, setPrimaryButtonDisabled, updateData) {
-      var newName = e.target.value;
-      var isExistingName = presets.find(function (preset) {
-        var _preset$name;
-        return ((_preset$name = preset.name) === null || _preset$name === void 0 ? void 0 : _preset$name.toLowerCase()) === (newName === null || newName === void 0 ? void 0 : newName.toLowerCase());
-      });
-      tmpData.name = newName;
-      if (!newName) {
-        tmpData.error = i18n('mutualizedFieldRequired');
-      } else if (isExistingName) {
-        tmpData.error = i18n('explorerFileWindowVariationsNameExistsError');
-      } else if (/[{}|\\^~@`,\s]/.test(newName)) {
-        tmpData.error = i18n('explorerFileWindowAddPresetNameRegexError');
-      } else {
-        tmpData.error = '';
-      }
-      setPrimaryButtonDisabled(Boolean(tmpData.error) || !newName || isExistingName);
-      updateData(_objectSpread({}, tmpData));
-    };
-    var updateDescription = function updateDescription(e, updateData) {
-      var newDesc = e.target.value;
-      tmpData.desc = newDesc;
-      updateData(_objectSpread({}, tmpData));
-    };
-    var presetNameInputId = 'filerobotPresetNameModalInput';
-    toggleModal({
-      icon: /*#__PURE__*/_jsx(Preset, {
-        size: 29,
-        color: theme.palette[PC.AccentPrimary]
-      }),
-      showTitleLabel: true,
-      title: i18n('explorerFileWindowAddPresetTitle'),
-      content: function content(_ref6) {
-        var updateData = _ref6.updateData,
-          data = _ref6.data,
-          setPrimaryButtonDisabled = _ref6.setPrimaryButtonDisabled;
-        return /*#__PURE__*/_jsxs(StyledVariants.PresetInputsWrapper, {
-          children: [/*#__PURE__*/_jsx(InputGroup, {
-            onChange: function onChange(e) {
-              return updateName(e, setPrimaryButtonDisabled, updateData);
-            },
-            error: Boolean(data.error),
-            hint: data.error,
-            label: "".concat(i18n('mutualizedNameFieldLabel'), " *"),
-            placeholder: i18n('explorerFileWindowAddPresetNamePlaceholder'),
-            value: tmpData.name || data.name || '',
-            InputProps: {
-              fullWidth: true
-            },
-            fullWidth: true,
-            focusOnMount: true
-          }), /*#__PURE__*/_jsx(InputGroup, {
-            type: "textarea",
-            onChange: function onChange(e) {
-              return updateDescription(e, updateData);
-            },
-            label: i18n('explorerFileWindowAddPresetDescLabel'),
-            placeholder: i18n('explorerFileWindowAddPresetDescPlaceholder'),
-            value: tmpData.desc || data.desc || '',
-            fullWidth: true
-          })]
-        });
-      },
-      onButtonPrimaryClick: function onButtonPrimaryClick() {
-        return handleSavingNewPreset(_objectSpread(_objectSpread({
-          variantUrl: variantUrl
-        }, tmpData), moreProps));
-      },
-      inputToFocus: presetNameInputId,
-      enterKeySubmits: true,
-      disablePrimaryButton: true,
-      modalStyle: {
-        width: 450,
-        maxWidth: 'none'
-      },
-      rootModalStyles: {
-        zIndex: 1500
-      },
-      modalBodyStyle: {
-        textAlign: 'center',
-        padding: '12px 32px'
-      },
-      modalFooterStyle: {
-        flexDirection: 'row',
-        padding: '12px 32px 32px 32px'
-      },
-      primaryTitleStyle: {
-        textAlign: 'center'
-      },
-      modalSecondaryButtonColor: 'basic',
-      contentStyle: {
-        textAlign: 'center'
-      },
-      modalPrimaryButton: {
-        width: 187
-      },
-      modalSecondaryButton: {
-        width: 187
-      },
-      inlineActionButtons: true
-    });
-  };
-  var triggerAddVariantModal = function triggerAddVariantModal(variantUrl) {
-    var moreProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var _ref7 = moreProps || {},
-      ratioGroupKey = _ref7.ratioGroupKey,
-      ratioTitleKey = _ref7.ratioTitleKey;
-    var name = '';
-    if (ratioGroupKey && ratioTitleKey) {
-      name = "".concat(i18n(ratioGroupKey) || ratioGroupKey, " - ").concat(i18n(ratioTitleKey) || ratioTitleKey);
-    } else {
-      var _getFileNameAndExtens2 = getFileNameAndExtension(originalFile.name),
-        existingName = _getFileNameAndExtens2.name;
-      name = "".concat(existingName, " (").concat((customVariants.length || 1) + 1, ")");
-    }
-    var updateName = function updateName(e, setPrimaryButtonDisabled, updateData) {
-      var error = '';
-      var newName = e.target.value;
-      var isExistingName = presets.includes(newName) || customVariants.some(function (variant) {
-        return variant.name === newName;
-      });
-      name = newName;
-      if (!newName) {
-        error = i18n('mutualizedFieldRequired');
-      } else if (isExistingName) {
-        error = i18n('explorerFileWindowVariationsNameExistsError');
-      }
-      setPrimaryButtonDisabled(Boolean(error) || !newName || isExistingName);
-      updateData({
-        name: name,
-        error: error
-      });
-    };
-    var variantNameInputId = 'filerobotVariantNameModalInput';
-    toggleModal({
-      icon: /*#__PURE__*/_jsx(Rename, {
-        size: 29,
-        color: theme.palette[PC.AccentPrimary]
-      }),
-      showTitleLabel: true,
-      title: i18n('explorerFileWindowAddVariationTitle'),
-      content: function content(_ref8) {
-        var updateData = _ref8.updateData,
-          data = _ref8.data,
-          setPrimaryButtonDisabled = _ref8.setPrimaryButtonDisabled;
-        return /*#__PURE__*/_jsx(InputGroup, {
-          onChange: function onChange(e) {
-            return updateName(e, setPrimaryButtonDisabled, updateData);
-          },
-          error: Boolean(data.error),
-          hint: data.error,
-          label: "".concat(i18n('mutualizedNameFieldLabel'), " *"),
-          value: name || data.name || '',
-          fullWidth: true,
-          focusOnMount: true
-        });
-      },
-      onButtonPrimaryClick: function onButtonPrimaryClick() {
-        return handleSavingNewVariant(_objectSpread({
-          variantUrl: variantUrl,
-          name: name
-        }, moreProps));
-      },
-      inputToFocus: variantNameInputId,
-      enterKeySubmits: true,
-      modalStyle: {
-        width: 450,
-        maxWidth: 'none'
-      },
-      rootModalStyles: {
-        zIndex: 1500
-      },
-      modalBodyStyle: {
-        textAlign: 'center',
-        padding: '12px 32px'
-      },
-      modalFooterStyle: {
-        flexDirection: 'row',
-        padding: '12px 32px 32px 32px'
-      },
-      primaryTitleStyle: {
-        textAlign: 'center'
-      },
-      modalSecondaryButtonColor: 'basic',
-      contentStyle: {
-        textAlign: 'center'
-      },
-      modalPrimaryButton: {
-        width: 187
-      },
-      modalSecondaryButton: {
-        width: 187
-      },
-      inlineActionButtons: true
-    });
-  };
-  var addNewVariantFile = function addNewVariantFile() {
-    if (originalFile.uuid !== previewedFile.uuid) {
-      return;
-    }
-    urlBuilderSaveModeRef.current = URL_BUILDER_OPENED_AS_MODE.VARIANT;
-    setQueryString('');
-    setShowUrlBuilderModal(true);
-  };
-  var triggerAddNewPresetModal = function triggerAddNewPresetModal() {
-    urlBuilderSaveModeRef.current = URL_BUILDER_OPENED_AS_MODE.PRESET;
-    setQueryString('');
-    setShowUrlBuilderModal(true);
-  };
-  var downloadAllVariants = function downloadAllVariants() {
-    var variantsWithExtensions = searchedVariants.map(function (variant) {
-      var _ref9, _variant$info, _variant$info2;
-      return _objectSpread(_objectSpread({}, variant), {}, {
-        extension: variant.bgRemoved ? 'png' : getFileNameAndExtension(variant.name).extension || ((_ref9 = ((_variant$info = variant.info) === null || _variant$info === void 0 ? void 0 : _variant$info.ext) || ((_variant$info2 = variant.info) === null || _variant$info2 === void 0 ? void 0 : _variant$info2.img_type)) === null || _ref9 === void 0 ? void 0 : _ref9.toLowerCase())
-      });
-    });
-    triggerTransformedDownloadModal(variantsWithExtensions, {
-      isVariant: true,
-      hideResizeCropOptions: true
-    });
-  };
-  var submitVariantEdit = function submitVariantEdit(data) {
-    toggleModal(null);
-    triggerSaveRequest(dispatch(editVariant({
-      fileUuid: originalFile.uuid,
-      data: data
-    })), function (updatedVariant) {
-      setOriginalVariants(originalVariants.map(function (variant) {
-        return variant.uuid === data.uuid ? updatedVariant : variant;
-      }));
-      dispatch(filesVariationsUpdated(updatedVariant));
-      info(i18n('mutualizedVariantUpdatedInfo'), 'success');
-    });
-  };
-  var editVariantFile = function editVariantFile(variant) {
-    // order here is important as we must use the preview url if exists
-    var variantUrl = variant.preview || (_typeof(variant.url) === 'object' ? variant.url.cdn : variant.url);
-    var queryString = getQueryStringFromUrl(variantUrl);
-    setQueryString(queryString);
-    setShowUrlBuilderModal(true);
-  };
-  var deleteVariantFile = function deleteVariantFile(variantUuid) {
-    toggleModal(null);
-    if (variantUuid === originalFile.uuid) {
-      info(i18n('variantDeleteOriginalError'));
-      return;
-    }
-    triggerSaveRequest(dispatch(deleteVariant({
-      fileUuid: originalFile.uuid,
-      variantUuid: variantUuid
-    })), function (_) {
-      setOriginalVariants(originalVariants.filter(function (variant) {
-        return variant.uuid !== variantUuid;
-      }));
-      info(i18n('explorerFileWindowDeletePopupText'), 'success');
-      dispatch(filesVariationsUpdated(originalFile));
-    });
-  };
-  useEffect(function () {
-    _isUnMounting = false;
-    var mainFile = previewedFile || displayedFileVariant || originalFile;
-    if (previewedFile.uuid && !variationsHideManualSubTab) {
-      triggerSaveRequest(dispatch(getVariants(previewedFile.uuid)), function (loadedVariants) {
-        var mainVariants = [mainFile];
-        if (mainFile.info.remove_background) {
-          mainVariants.push(createRemovedBackgroundVariantObject(mainFile));
-        }
-        setOriginalVariants([].concat(mainVariants, _toConsumableArray(loadedVariants)));
-        dispatch(filesVariationsUpdated(mainVariants[0]));
-      }, setIsLoading);
-    } else {
-      setIsLoading(false);
-    }
-    if (mainFile.removedBackground && !mainFile.info.remove_background) {
-      triggerSaveRequest(dispatch(fetchFileByUuid(originalFile.uuid)), function (updatedFile) {
-        var originalVariantsWithRemovedBg = [mainFile];
-        if (updatedFile.info.remove_background) {
-          originalVariantsWithRemovedBg.push(createRemovedBackgroundVariantObject(updatedFile));
-          setOriginalVariants(originalVariantsWithRemovedBg);
-        }
-        dispatch(fileUpdated({
-          info: _objectSpread(_objectSpread({}, originalFile.info), {}, {
-            remove_background: updatedFile.info.remove_background
-          })
-        }));
-      }, setIsLoading);
-    }
-    return function () {
-      if (!variationsHideManualSubTab) {
-        dispatch(filesVariationsUpdated({}));
-      }
-      _isUnMounting = true;
-    };
-  }, [previewedFile.uuid]);
-  useEffect(function () {
-    setSearchQuery('');
-  }, [originalVariants]);
-  useEffect(function () {
-    var nextActiveTabId = !variationsHideManualSubTab && (presetsVariants.length === 0 || activeVariationsTabId === VARIATIONS_TAB_IDS.MANUAL) ? VARIATIONS_TAB_IDS.MANUAL : VARIATIONS_TAB_IDS.AUTOMATIC;
-    setActiveVariationsTabId(nextActiveTabId);
-    return function () {
-      setActiveVariationsTabId(null);
-    };
-  }, [presetsVariants, variationsHideManualSubTab]);
-  if (isLoading) {
-    return /*#__PURE__*/_jsx(VariationsSkeleton, {
-      i18n: i18n,
-      activeTabId: activeVariationsTabId
-    });
-  }
-  var isPublicFile = isVisibilityPublic(originalFile === null || originalFile === void 0 ? void 0 : originalFile.visibility);
-  if (!isPublicFile) {
-    return /*#__PURE__*/_jsx(ErroredViewPlaceholder, {
-      icon: /*#__PURE__*/_jsx(Lock, {
-        size: 60
-      }),
-      title: i18n('explorerFileWindowVariationsTabDisabledTitle'),
-      description: i18n('explorerFileWindowVariationsTabDisabledDesc')
-    });
-  }
-  var currentVariantsCount = searchedVariants.length;
-  var originalVariantsCount = nextVariants.length;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(VariationsTabNavigator, {
-      i18n: i18n,
-      activeTabId: activeVariationsTabId,
-      setActiveTabId: setActiveVariationsTabId,
-      customVariants: customVariants,
-      presetsVariants: presetsVariants
-    }), /*#__PURE__*/_jsxs(StyledVariants.Actions, {
-      children: [/*#__PURE__*/_jsx(StyledVariants.Title, {
-        children: isAutomaticTabActive ? i18n('explorerFileWindowVariationsPresetsTabLabel') : i18n('explorerFileWindowVariationsCustomTabLabel')
-      }), !hideDownloadVariationsOption && originalVariantsCount > 1 && currentVariantsCount > 0 && /*#__PURE__*/_jsx(Button, {
-        badge: "(".concat(currentVariantsCount, ")"),
-        startIcon: /*#__PURE__*/_jsx(Download, {}),
-        size: "sm",
-        color: "link-primary",
-        onClick: downloadAllVariants,
-        disabled: currentVariantsCount === 0,
-        children: i18n('explorerFileWindowVariationsDownloadAllButton')
-      })]
-    }), /*#__PURE__*/_jsx(VariationsSearch, {
-      originalVariants: originalVariants || [],
-      setSearchQuery: setSearchQuery,
-      isAutomaticTabActive: isAutomaticTabActive
-    }), /*#__PURE__*/_jsx(VariationsContent, {
-      variants: searchedVariants,
-      originalFile: originalFile,
-      previewedFile: previewedFile,
-      displayedFileVariant: displayedFileVariant,
-      setPreviewedFile: setPreviewedFile,
-      addNewVariant: addNewVariantFile,
-      editVariantFile: editVariantFile,
-      editVariantName: submitVariantEdit,
-      setSelectedVariant: setSelectedVariant,
-      deleteVariant: deleteVariantFile,
-      searchQuery: searchQuery,
-      originalVariantsCount: originalVariantsCount,
-      isLoading: isLoading,
-      i18n: i18n,
-      activeTabId: activeVariationsTabId,
-      addNewPreset: triggerAddNewPresetModal,
-      showAddPresetButton: variationsShowAddPresetButton
-    }), /*#__PURE__*/_jsx(UrlBuilderModal, {
-      queryString: queryString,
-      showUrlBuilderModal: showUrlBuilderModal,
-      setShowUrlBuilderModal: setShowUrlBuilderModal,
-      originalFile: originalFile,
-      onNewSave: handleUrlBuilderNewSave,
-      headerTitle: i18n('explorerFileWindowAddVariationButton'),
-      actionButtonLabel: i18n('mutualizedSaveButton'),
-      urlTitle: i18n('explorerFileWindowVariationsUrlBuilderModalTitle'),
-      i18n: i18n,
-      selectedVariant: selectedVariant,
-      extractVariantQuery: extractVariantQuery,
-      submitVariantEdit: submitVariantEdit,
-      info: info
-    })]
-  });
-};
-export default VariationsTab;