@scaleflex/widget-explorer 4.4.0 → 4.5.1

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

@@ -0,0 +1,606 @@
+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 {
+      var activeVariant = activeVariationsTabId === VARIATIONS_TAB_IDS.AUTOMATIC ? selectedVariant && (presetsVariants === null || presetsVariants === void 0 ? void 0 : presetsVariants.find(function (variant) {
+        return variant.name === selectedVariant.name;
+      })) || (presetsVariants === null || presetsVariants === void 0 ? void 0 : presetsVariants[0]) : mainFile;
+      dispatch(filesVariationsUpdated(activeVariant));
+      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 () {
+      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,
+      selectedVariant: selectedVariant
+    }), /*#__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;