@crystaldesign/diva-seller 24.15.0-beta.8 → 24.15.0-rc.0

package/build/esm/index.js

@@ -17,7 +17,7 @@ import CardMedia from '@mui/material/CardMedia';
 import Typography$1 from '@mui/material/Typography';
 import createStyles from '@mui/styles/createStyles';
 import makeStyles from '@mui/styles/makeStyles';
-import { styled, Typography, Card as Card$1, CardActionArea as CardActionArea$1, CardMedia as CardMedia$1, Button as Button$1, TextField, ButtonGroup as ButtonGroup$1, Tooltip, Paper as Paper$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, IconButton as IconButton$1, Link, InputBase, Accordion, AccordionSummary, Tabs, Tab, AccordionDetails, Table as Table$1, TableBody as TableBody$1, TableRow as TableRow$1, TableCell as TableCell$1, CardHeader, CardContent, FormControl as FormControl$1, FormHelperText, TextareaAutosize, Box, Select as Select$1, MenuItem as MenuItem$1, ListItemButton, ListItemIcon } from '@mui/material';
+import { styled, Typography, Card as Card$1, CardActionArea as CardActionArea$1, CardMedia as CardMedia$1, Button as Button$1, TextField, ButtonGroup as ButtonGroup$1, Tooltip, Stack, Paper as Paper$1, Skeleton, IconButton as IconButton$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, Divider as Divider$1, Alert, AlertTitle, Link, InputBase, Accordion, AccordionSummary, Tabs, Tab, AccordionDetails, Table as Table$1, TableBody as TableBody$1, TableRow as TableRow$1, TableCell as TableCell$1, CardHeader, CardContent, FormControl as FormControl$1, FormHelperText, TextareaAutosize, Box as Box$1, Select as Select$1, MenuItem as MenuItem$1, ListItemButton, ListItemIcon } from '@mui/material';
 import { Histogram, useFilterState, FilterComponent, AnalyticsComponent } from '@crystaldesign/analytics';
 import Button from '@mui/material/Button';
 import ButtonGroup from '@mui/material/ButtonGroup';
@@ -55,7 +55,12 @@ import TextField$1 from '@mui/material/TextField';
 import Select from '@mui/material/Select';
 import Input from '@mui/material/Input';
 import OrderEntry, { apiSaveRenderJobs, VariantSelector } from '@crystaldesign/order-entry';
-import CloseIcon from '@mui/icons-material/Close';
+import _toArray from '@babel/runtime/helpers/toArray';
+import Box from '@mui/material/Box';
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+import EditIcon from '@mui/icons-material/Edit';
+import Alert$1 from '@mui/material/Alert';
+import AlertTitle$1 from '@mui/material/AlertTitle';
 import classnames from 'classnames';
 import { InfoRounded, Remove, Add, Delete } from '@mui/icons-material';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -68,7 +73,7 @@ import 'swiper/css/free-mode';
 import 'swiper/css/mousewheel';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import ProductsComponent, { useProductState as useProductState$1 } from '@crystaldesign/products-component';
-import Alert from '@mui/lab/Alert';
+import Alert$2 from '@mui/lab/Alert';
 import Tab$1 from '@mui/material/Tab';
 import Tabs$1 from '@mui/material/Tabs';
 import Autocomplete$1 from '@mui/material/Autocomplete';
@@ -91,7 +96,6 @@ import AssetEditor, { DivaFile } from '@crystaldesign/media-upload';
 import AddIcon$1 from '@mui/icons-material/NoteAdd';
 import DeleteIcon from '@mui/icons-material/Delete';
 import debounce from 'lodash/debounce';
-import Alert$1 from '@mui/material/Alert';
 import Settings from '@mui/icons-material/Settings';
 
 (function() {
@@ -654,8 +658,6 @@ function _apiLoadCatalogs() {
               // "Johann Jakob - CLASSICS"
               subCategory: data.RetailSubCategory ? data.RetailSubCategory : data.SubCategory ? data.SubCategory : undefined,
               retailArticleNr: data.RetailArticleNr ? data.RetailArticleNr : undefined,
-              fileBaseUrl: data.BaseURL ? data.BaseURL : undefined,
-              // "https://myCC3Retail.crystal-design.local/files"
               nArticles: data.Articles ? Number(data.Articles) : 0,
               // "236"
               nConfigurators: data.Configurators ? Number(data.Configurators) : 0,
@@ -3087,7 +3089,7 @@ var Wrapper = styled('div')({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  margin: '10px 10px 0 10px',
+  margin: '5px 5px 5px 5px',
   flexWrap: 'wrap',
   gap: '10px'
 });
@@ -3874,11 +3876,7 @@ function Articles(_ref) {
             component: "div",
             variant: "body1",
             color: "textSecondary",
-            children: DivaUtils$1.sizeFormatter({
-              width: row.values['width'],
-              depth: row.values['depth'],
-              height: row.values['height']
-            }, i18n)
+            children: DivaUtils$1.sizeFormatter(row.values, i18n)
           })]
         }), /*#__PURE__*/jsx("div", {
           style: {
@@ -3951,6 +3949,30 @@ function Articles(_ref) {
       }, {
         label: t('articles.header.depth'),
         accessor: 'depth'
+      }, {
+        label: t('articles.header.width'),
+        accessor: 'widthFrom',
+        hidden: true
+      }, {
+        label: t('articles.header.height'),
+        accessor: 'heightFrom',
+        hidden: true
+      }, {
+        label: t('articles.header.depth'),
+        accessor: 'depthFrom',
+        hidden: true
+      }, {
+        label: t('articles.header.width'),
+        accessor: 'widthTo',
+        hidden: true
+      }, {
+        label: t('articles.header.height'),
+        accessor: 'heightTo',
+        hidden: true
+      }, {
+        label: t('articles.header.depth'),
+        accessor: 'depthTo',
+        hidden: true
       }],
       groupBy: ['groupName'],
       expanded: true,
@@ -3994,8 +4016,10 @@ function Header$1(_ref) {
     enableVKPExportButton = _ref.enableVKPExportButton;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    organization = _useDivaCore.state.organization;
   var handleClick = function handleClick(event) {
-    if (event.currentTarget.name == 'Step1' || event.currentTarget.name == 'Step2' || event.currentTarget.name == 'Step3') {
+    if (event.currentTarget.name == 'Step1' || event.currentTarget.name == 'Step2' || event.currentTarget.name == 'Step3' || event.currentTarget.name == 'Step4') {
       setActBasketPage(event.currentTarget.name);
     }
   };
@@ -4006,7 +4030,7 @@ function Header$1(_ref) {
       zIndex: 1
     },
     children: /*#__PURE__*/jsxs(Title, {
-      text: t('data.' + status) + ' - Nr. ' + divaNr + '-' + documentVersion,
+      text: (actBasketPage === 'Step4' ? 'Marketing' : t('data.' + status)) + ' - Nr. ' + divaNr + '-' + documentVersion,
       children: [showVKPExportButton && /*#__PURE__*/jsx(Button, {
         color: 'primary',
         variant: 'contained',
@@ -4041,6 +4065,13 @@ function Header$1(_ref) {
           children: t('basket.navigation.checkoutNew', {
             step: (config === null || config === void 0 ? void 0 : config.clientData) != false ? 3 : 2
           })
+        }), organization.settings.enableVKMarketing && /*#__PURE__*/jsx(Button, {
+          name: "Step4",
+          onClick: handleClick,
+          variant: actBasketPage == 'Step4' ? 'contained' : 'outlined',
+          children: t('basket.navigation.checkoutMarketing', {
+            step: (config === null || config === void 0 ? void 0 : config.clientData) != false ? 4 : 3
+          })
         })]
       })]
     })
@@ -4101,12 +4132,12 @@ function MenuListComposition(_ref) {
     }
     prevOpen.current = open;
   }, [open]);
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsxs("div", {
     style: {
       "float": 'right',
       height: 'fit-content'
     },
-    children: /*#__PURE__*/jsxs(ButtonGroup, {
+    children: [/*#__PURE__*/jsxs(ButtonGroup, {
       color: "primary",
       "aria-label": "outlined primary button group",
       children: [/*#__PURE__*/jsx(Button, {
@@ -4128,61 +4159,61 @@ function MenuListComposition(_ref) {
         "aria-haspopup": "true",
         onClick: handleToggle,
         children: t('basket.priceOverview.actions.addtionalActions')
-      }), /*#__PURE__*/jsx(Popper, {
-        style: {
-          zIndex: 1
-        },
-        open: open,
-        anchorEl: anchorRef.current,
-        role: undefined,
-        transition: true,
-        disablePortal: true,
-        children: function children(_ref2) {
-          var TransitionProps = _ref2.TransitionProps,
-            placement = _ref2.placement;
-          return /*#__PURE__*/jsx(Grow, _objectSpread$w(_objectSpread$w({}, TransitionProps), {}, {
-            style: {
-              transformOrigin: placement === 'bottom' ? 'right top' : 'right bottom'
-            },
-            children: /*#__PURE__*/jsx(Paper, {
-              children: /*#__PURE__*/jsx(ClickAwayListener, {
-                onClickAway: handleClose,
-                children: /*#__PURE__*/jsxs(MenuList, {
-                  autoFocusItem: open,
-                  id: "menu-list-grow",
-                  onKeyDown: handleListKeyDown,
-                  children: [/*#__PURE__*/jsx(MenuItem, {
-                    style: {
-                      display: !visibile ? 'block' : 'none'
-                    },
-                    onClick: function onClick(e) {
-                      handleClose(e);
-                      setVisibile(true);
-                    },
-                    children: t('basket.priceOverview.actions.showOrder')
-                  }), /*#__PURE__*/jsx(MenuItem, {
-                    style: {
-                      display: visibile ? 'block' : 'none'
-                    },
-                    onClick: function onClick(e) {
-                      handleClose(e);
-                      setVisibile(false);
-                    },
-                    children: t('basket.priceOverview.actions.hideOrder')
-                  }), /*#__PURE__*/jsx(MenuItem, {
-                    onClick: function onClick(e) {
-                      handleClose(e);
-                      openInfo();
-                    },
-                    children: t('basket.priceOverview.actions.openInfo')
-                  })]
-                })
+      })]
+    }), /*#__PURE__*/jsx(Popper, {
+      sx: {
+        zIndex: 1
+      },
+      open: open,
+      anchorEl: anchorRef.current,
+      role: undefined,
+      transition: true,
+      disablePortal: true,
+      children: function children(_ref2) {
+        var TransitionProps = _ref2.TransitionProps,
+          placement = _ref2.placement;
+        return /*#__PURE__*/jsx(Grow, _objectSpread$w(_objectSpread$w({}, TransitionProps), {}, {
+          style: {
+            transformOrigin: placement === 'bottom' ? 'right top' : 'right bottom'
+          },
+          children: /*#__PURE__*/jsx(Paper, {
+            children: /*#__PURE__*/jsx(ClickAwayListener, {
+              onClickAway: handleClose,
+              children: /*#__PURE__*/jsxs(MenuList, {
+                autoFocusItem: open,
+                id: "menu-list-grow",
+                onKeyDown: handleListKeyDown,
+                children: [/*#__PURE__*/jsx(MenuItem, {
+                  style: {
+                    display: !visibile ? 'block' : 'none'
+                  },
+                  onClick: function onClick(e) {
+                    handleClose(e);
+                    setVisibile(true);
+                  },
+                  children: t('basket.priceOverview.actions.showOrder')
+                }), /*#__PURE__*/jsx(MenuItem, {
+                  style: {
+                    display: visibile ? 'block' : 'none'
+                  },
+                  onClick: function onClick(e) {
+                    handleClose(e);
+                    setVisibile(false);
+                  },
+                  children: t('basket.priceOverview.actions.hideOrder')
+                }), /*#__PURE__*/jsx(MenuItem, {
+                  onClick: function onClick(e) {
+                    handleClose(e);
+                    openInfo();
+                  },
+                  children: t('basket.priceOverview.actions.openInfo')
+                })]
               })
             })
-          }));
-        }
-      })]
-    })
+          })
+        }));
+      }
+    })]
   });
 }
 
@@ -5319,8 +5350,7 @@ function Step2ClientData(_ref) {
 function StatusMenu(_ref) {
   var visibleStatus = _ref.visibleStatus,
     status = _ref.status,
-    setStatus = _ref.setStatus,
-    productSaved = _ref.productSaved;
+    setStatus = _ref.setStatus;
   var handleClick = function handleClick(item) {
     setStatus(item);
   };
@@ -5345,7 +5375,6 @@ function StatusMenu(_ref) {
           onClick: function onClick() {
             return handleClick(item);
           },
-          disabled: productSaved && item !== 'BASE_CONFIGURATION',
           children: t('data.' + item, item)
         }, item);
       })
@@ -5744,88 +5773,6 @@ var HQ_RenderingTypeSource = [{
   RenderPipeline: 'vRayNext'
 }];
 
-function ownKeys$s(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$s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$s(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function useProduct(basket) {
-  var _useState = useState(undefined),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentProduct = _useState2[0],
-    setCurrentProduct = _useState2[1];
-  var _useDivaCore = useDivaCore(),
-    productHandler = _useDivaCore.handler.productHandler;
-  var loadProduct = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _myProduct$baseData$p;
-      var myProduct;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return productHandler.loadProducts({
-              basket: new BasketData(basket),
-              divaNr: basket.DivaNr
-            });
-          case 2:
-            myProduct = _context.sent;
-            setCurrentProduct(_objectSpread$s(_objectSpread$s({}, myProduct.baseData), {}, {
-              parent: (_myProduct$baseData$p = myProduct.baseData.parent) !== null && _myProduct$baseData$p !== void 0 ? _myProduct$baseData$p : myProduct.baseData._id
-            }));
-            return _context.abrupt("return", myProduct);
-          case 5:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function loadProduct() {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  useEffect(function () {
-    loadProduct();
-  }, [basket]);
-  var saveProduct = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(favourite) {
-      var _myproduct$0$parent;
-      var myproduct;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.next = 2;
-            return productHandler.saveProducts({
-              products: [currentProduct]
-            });
-          case 2:
-            myproduct = _context2.sent;
-            setCurrentProduct(_objectSpread$s(_objectSpread$s({}, myproduct[0]), {}, {
-              parent: (_myproduct$0$parent = myproduct[0].parent) !== null && _myproduct$0$parent !== void 0 ? _myproduct$0$parent : myproduct[0]._id
-            }));
-            if (!favourite) {
-              _context2.next = 7;
-              break;
-            }
-            _context2.next = 7;
-            return productHandler.apiMarkAsFavorite(currentProduct._id, basket.OrganizationId);
-          case 7:
-            setCurrentProduct(currentProduct);
-            basket.DocumentVersion = basket.DocumentVersion + 1;
-          case 9:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function saveProduct(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  return {
-    currentProduct: currentProduct,
-    loadProduct: loadProduct,
-    saveProduct: saveProduct
-  };
-}
-
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -5853,15 +5800,243 @@ function styleInject(css, ref) {
   }
 }
 
-var paperContainer = "paperContainer-9grpT";
-var hqMediaHeaderContainer = "hqMediaHeaderContainer-PlXdo";
-var hqmediaContainer = "hqmediaContainer-sBjym";
-var hqMediaTitle = "hqMediaTitle-ugda8";
-var css_248z$a = ".paperContainer-9grpT {\n  height: 68vh;\n  margin-left: 50px;\n  margin-right: 50px;\n  margin-top: 10px;\n}\n\n.hqMediaHeaderContainer-PlXdo {\n  display: flex;\n  justify-content: space-between;\n  padding-left: 15px;\n}\n\n.hqmediaContainer-sBjym {\n  height: 90%;\n  border: 1px solid rgb(224, 224, 224);\n}\n.hqMediaTitle-ugda8 {\n  font-size: 20px;\n  font-weight: normal;\n  color: #333;\n  padding: 10px 0;\n}\n";
-styleInject(css_248z$a);
+var container$1 = "container-3kPdM";
+var mainStack = "mainStack-1xE4c";
+var productContainer = "productContainer-JcVn0";
+var productNameContainer = "productNameContainer-35ZZc";
+var productNameField = "productNameField-hPNbW";
+var productImage = "productImage-Vn0l-";
+var hidden$1 = "hidden-zZ8fS";
+var productDetailsContainer = "productDetailsContainer-5c-V9";
+var productDetailRow = "productDetailRow-9KtDG";
+var productDetailLabel = "productDetailLabel-t7Mn7";
+var favoriteContainer = "favoriteContainer-ka7lC";
+var favoriteCheckbox = "favoriteCheckbox-JYnH-";
+var actionButtonContainer = "actionButtonContainer-WfYfD";
+var productDetailsPaper = "productDetailsPaper-VsWfW";
+var productDetailText = "productDetailText-wkk6U";
+var productDetailSkeleton = "productDetailSkeleton-3-RLq";
+var productDetailDivider = "productDetailDivider-C1Cdh";
+var alertTitle = "alertTitle-Bm1NO";
+var css_248z$b = ".container-3kPdM {\n  padding-bottom: 10px;\n  margin-top: 2px;\n}\n\n.mainStack-1xE4c {\n  width: 100%;\n  margin-top: 16px;\n}\n\n.productContainer-JcVn0 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding-bottom: 16px;\n  width: 100%;\n}\n\n.productNameContainer-35ZZc {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.productNameField-hPNbW {\n  margin: 8px;\n  width: 70%;\n}\n\n.productImage-Vn0l- {\n  width: 70%;\n  display: block;\n}\n\n.productImage-Vn0l-.hidden-zZ8fS {\n  display: none;\n}\n\n.productDetailsContainer-5c-V9 {\n  margin: 20px;\n  max-height: 100%;\n}\n\n.productDetailRow-9KtDG {\n  display: flex;\n}\n\n.productDetailLabel-t7Mn7 {\n  font-weight: 600;\n  width: 40%;\n}\n\n.favoriteContainer-ka7lC {\n  display: flex;\n  align-items: center;\n  margin-top: 16px;\n}\n.favoriteCheckbox-JYnH- {\n  margin-left: 10px;\n}\n\n.actionButtonContainer-WfYfD {\n  display: flex;\n  gap: 16px;\n  margin-top: 16px;\n  justify-content: right;\n}\n@media (max-width: 768px) {\n  .actionButtonContainer-WfYfD {\n    display: flex;\n    justify-content: space-between;\n  }\n}\n\n.productDetailsPaper-VsWfW {\n  width: 100%;\n  max-height: 100%;\n  overflow: auto;\n}\n\n.productDetailText-wkk6U {\n  white-space: pre-wrap;\n}\n\n.productDetailSkeleton-3-RLq {\n  margin-left: 30px;\n  height: 28px;\n}\n\n.productDetailDivider-C1Cdh {\n  margin-bottom: 16px;\n}\n\n.alertTitle-Bm1NO {\n  font-weight: 600;\n}\n\n/* Responsive styles */\n@media (min-width: 900px) {\n  .productDetailsPaper-VsWfW {\n    width: 60%;\n  }\n}\n";
+styleInject(css_248z$b);
 
-function ownKeys$r(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$r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$r(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function Step3Product(_ref) {
+  var _currentProduct$techn;
+  var currentProduct = _ref.currentProduct,
+    startWithEmptyBasket = _ref.startWithEmptyBasket,
+    handleSave = _ref.handleSave,
+    updateProductData = _ref.updateProductData;
+  var _useDivaCore = useDivaCore(),
+    organization = _useDivaCore.state.organization;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    imgIsLoaded = _useState2[0],
+    setImgIsLoaded = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFavorite = _useState4[0],
+    setIsFavorite = _useState4[1];
+  var dataIsReady = !!currentProduct;
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    editProductName = _useState6[0],
+    setEditProductName = _useState6[1];
+  var handleEditProductName = function handleEditProductName() {
+    setEditProductName(true);
+  };
+  var handleBlur = function handleBlur() {
+    setEditProductName(false);
+  };
+  var handleChangeProductName = function handleChangeProductName(event) {
+    currentProduct.shortDescription = event.target.value;
+    updateProductData(currentProduct);
+  };
+  var handleFavoriteToggle = function handleFavoriteToggle() {
+    setIsFavorite(!isFavorite);
+  };
+  return /*#__PURE__*/jsxs(Box, {
+    className: container$1,
+    children: [organization.settings.enableVKMarketing && /*#__PURE__*/jsx(InfoAlert$1, {
+      type: "info",
+      content: /*#__PURE__*/jsx(Fragment, {
+        children: t('basket.checkout.step4.info')
+      })
+    }), /*#__PURE__*/jsxs(Stack, {
+      direction: {
+        xs: 'column',
+        md: 'row'
+      },
+      spacing: 2,
+      className: mainStack,
+      children: [/*#__PURE__*/jsxs(Box, {
+        sx: {
+          width: {
+            xs: '100%',
+            md: '40%'
+          }
+        },
+        children: [/*#__PURE__*/jsx(Paper$1, {
+          variant: "outlined",
+          children: /*#__PURE__*/jsxs("div", {
+            className: productContainer,
+            children: [/*#__PURE__*/jsxs("div", {
+              className: productNameContainer,
+              children: [editProductName ? /*#__PURE__*/jsx(TextField, {
+                variant: "standard",
+                value: currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.shortDescription,
+                onChange: handleChangeProductName,
+                onBlur: handleBlur,
+                autoFocus: true,
+                className: productNameField
+              }) : dataIsReady ? /*#__PURE__*/jsx("h2", {
+                children: currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.shortDescription
+              }) : /*#__PURE__*/jsx(Skeleton, {
+                animation: "wave",
+                variant: "text",
+                width: "50%",
+                height: 50
+              }), !editProductName && /*#__PURE__*/jsx(IconButton$1, {
+                size: "small",
+                onClick: handleEditProductName,
+                children: /*#__PURE__*/jsx(EditIcon, {
+                  fontSize: "small"
+                })
+              })]
+            }), /*#__PURE__*/jsx("img", {
+              src: (currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.image) || (currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.image2D),
+              className: "".concat(productImage, " ").concat(!imgIsLoaded ? hidden$1 : ''),
+              alt: "Product",
+              onLoad: function onLoad() {
+                return setImgIsLoaded(true);
+              }
+            }), !imgIsLoaded && /*#__PURE__*/jsx(Skeleton, {
+              animation: "wave",
+              variant: "text",
+              width: "75%",
+              height: 300
+            })]
+          })
+        }), /*#__PURE__*/jsx(Box, {
+          className: favoriteContainer,
+          children: /*#__PURE__*/jsx(InfoAlert$1, {
+            type: "warning",
+            icon: /*#__PURE__*/jsx(StarBorderIcon, {}),
+            title: t('basket.checkout.step4.favorite'),
+            content: /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx(Typography, {
+                mb: 1,
+                children: t('basket.checkout.step4.favoriteinfo')
+              }), /*#__PURE__*/jsx(FormControlLabel$1, {
+                disabled: !dataIsReady,
+                control: /*#__PURE__*/jsx(Checkbox$1, {
+                  className: favoriteCheckbox,
+                  checked: isFavorite,
+                  onChange: handleFavoriteToggle
+                }),
+                label: t('basket.checkout.step4.savemsg')
+              })]
+            })
+          })
+        }), /*#__PURE__*/jsxs(Box, {
+          className: actionButtonContainer,
+          children: [/*#__PURE__*/jsx(Button$1, {
+            variant: "contained",
+            onClick: function onClick() {
+              return handleSave(undefined, false, isFavorite);
+            },
+            disabled: !dataIsReady,
+            children: t('basket.checkout.step4.saveproduct')
+          }), /*#__PURE__*/jsx(Button$1, {
+            onClick: startWithEmptyBasket,
+            variant: "outlined",
+            disabled: !dataIsReady,
+            children: t('basket.checkout.step4.cancel')
+          })]
+        })]
+      }), /*#__PURE__*/jsx(Paper$1, {
+        variant: "outlined",
+        className: productDetailsPaper,
+        children: /*#__PURE__*/jsxs("div", {
+          className: productDetailsContainer,
+          children: [/*#__PURE__*/jsx("h2", {
+            children: t('basket.checkout.step3.productdetails')
+          }), !dataIsReady && /*#__PURE__*/jsx(Fragment, {
+            children: _toConsumableArray(Array(13)).map(function (_, index) {
+              return /*#__PURE__*/jsxs(Box, {
+                className: productDetailRow,
+                children: [/*#__PURE__*/jsx(Skeleton, {
+                  animation: "wave",
+                  variant: "text",
+                  width: "40%",
+                  className: productDetailSkeleton
+                }), /*#__PURE__*/jsx(Skeleton, {
+                  animation: "wave",
+                  variant: "text",
+                  width: "60%",
+                  className: productDetailSkeleton
+                }), index < 12 && /*#__PURE__*/jsx(Divider$1, {
+                  className: productDetailDivider
+                })]
+              }, index);
+            })
+          }), dataIsReady && (currentProduct === null || currentProduct === void 0 || (_currentProduct$techn = currentProduct.technicalDescription) === null || _currentProduct$techn === void 0 ? void 0 : _currentProduct$techn.split('\n').map(function (line, index) {
+            var _currentProduct$techn2;
+            var formattedLine = line.trim().endsWith(',') ? line.slice(0, -1) : line;
+            var _formattedLine$split = formattedLine.split(':'),
+              _formattedLine$split2 = _toArray(_formattedLine$split),
+              firstPart = _formattedLine$split2[0],
+              rest = _formattedLine$split2.slice(1);
+            var formattedFirstPart = firstPart.trim();
+            var formattedRest = rest.join(':').trim();
+            return /*#__PURE__*/jsxs("div", {
+              children: [/*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: {
+                    xs: '12px',
+                    md: '1rem'
+                  }
+                },
+                className: productDetailText,
+                children: /*#__PURE__*/jsxs(Box, {
+                  className: productDetailRow,
+                  children: [/*#__PURE__*/jsxs("span", {
+                    className: productDetailLabel,
+                    children: [formattedFirstPart, ":"]
+                  }), /*#__PURE__*/jsx("span", {
+                    children: formattedRest
+                  })]
+                })
+              }), index < (currentProduct === null || currentProduct === void 0 || (_currentProduct$techn2 = currentProduct.technicalDescription) === null || _currentProduct$techn2 === void 0 ? void 0 : _currentProduct$techn2.split('\n').length) - 1 && /*#__PURE__*/jsx(Divider$1, {
+                className: productDetailDivider
+              })]
+            }, index);
+          }))]
+        })
+      })]
+    })]
+  });
+}
+function InfoAlert$1(_ref2) {
+  var type = _ref2.type,
+    content = _ref2.content,
+    title = _ref2.title,
+    icon = _ref2.icon;
+  return /*#__PURE__*/jsxs(Alert, {
+    variant: "outlined",
+    severity: type,
+    icon: icon,
+    children: [title && /*#__PURE__*/jsx(AlertTitle, {
+      className: alertTitle,
+      children: title
+    }), content]
+  });
+}
+
+function ownKeys$s(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$s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$s(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function CheckOut(_ref) {
   var _basket$Client;
   var schema = _ref.schema,
@@ -5875,6 +6050,9 @@ function CheckOut(_ref) {
     updateBasket = _ref.updateBasket,
     statusArray = _ref.statusArray,
     configSaveButtons = _ref.configSaveButtons,
+    currentProduct = _ref.currentProduct,
+    saveProduct = _ref.saveProduct,
+    updateProductData = _ref.updateProductData,
     gdpr = _ref.gdpr;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -5882,16 +6060,8 @@ function CheckOut(_ref) {
     setIsSaving = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isSaved = _useState4[0],
-    setIsSaved = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    showRenderJobs = _useState6[0],
-    setShowRenderJobs = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    basket3DExportChecked = _useState8[0],
-    setBasket3DExportChecked = _useState8[1];
+    basket3DExportChecked = _useState4[0],
+    setBasket3DExportChecked = _useState4[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useSellerState = useSellerState(),
@@ -5901,117 +6071,41 @@ function CheckOut(_ref) {
     userHasPermission = _useDivaCore$actions.userHasPermission,
     toggleLoading = _useDivaCore$actions.toggleLoading,
     openModal = _useDivaCore$actions.openModal,
-    productHandler = _useDivaCore.handler.productHandler,
     _useDivaCore$state = _useDivaCore.state,
     apiConfig = _useDivaCore$state.apiConfig,
     jwt = _useDivaCore$state.jwt,
     organization = _useDivaCore$state.organization;
-  var _useProduct = useProduct(basket),
-    currentProduct = _useProduct.currentProduct,
-    loadProduct = _useProduct.loadProduct,
-    saveProduct = _useProduct.saveProduct;
-  useEffect(function () {
-    var fetchProduct = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!(status === 'BASE_CONFIGURATION' && !currentProduct)) {
-                _context.next = 3;
-                break;
-              }
-              _context.next = 3;
-              return loadProduct();
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function fetchProduct() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    fetchProduct();
-    setShowRenderJobs(false);
-  }, [status]);
-  var saveProductAndShowHqMedia = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var myProduct;
+  var handleSave = useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(openPDF, sendMail, isFav) {
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.next = 2;
-            return loadProduct();
-          case 2:
-            myProduct = _context2.sent;
-            if (!(!myProduct || myProduct.isNew)) {
-              _context2.next = 11;
-              break;
-            }
-            toggleLoading('saveProduct');
-            _context2.next = 7;
-            return saveProduct();
-          case 7:
-            toggleLoading('saveProduct');
-            setShowRenderJobs(true);
-            _context2.next = 12;
-            break;
-          case 11:
-            setShowRenderJobs(true);
-          case 12:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function saveProductAndShowHqMedia() {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-  var handleSave = useCallback(/*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(openPDF, sendMail, favourite, hqMedia) {
-      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
           case 0:
             if (!(status === 'BASE_CONFIGURATION')) {
-              _context4.next = 13;
-              break;
-            }
-            if (!hqMedia) {
-              _context4.next = 6;
+              _context2.next = 7;
               break;
             }
-            _context4.next = 4;
-            return saveProductAndShowHqMedia();
-          case 4:
-            _context4.next = 11;
-            break;
-          case 6:
             toggleLoading('saveProduct');
-            _context4.next = 9;
-            return saveProduct(favourite);
-          case 9:
+            _context2.next = 4;
+            return saveProduct(isFav);
+          case 4:
             toggleLoading('saveProduct');
             openModal({
               title: t('basket.checkout.productsavedtitle'),
               accept: true,
               text: t('basket.checkout.productsavedtext')
             });
-          case 11:
-            setIsSaved(true);
-            return _context4.abrupt("return");
-          case 13:
+            return _context2.abrupt("return");
+          case 7:
             if (!isSaving) {
               setIsSaving(true);
               onClickSave(openPDF, sendMail).then(/*#__PURE__*/function () {
-                var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(p) {
+                var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(p) {
                   var newRenderJob;
-                  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-                    while (1) switch (_context3.prev = _context3.next) {
+                  return _regeneratorRuntime.wrap(function _callee$(_context) {
+                    while (1) switch (_context.prev = _context.next) {
                       case 0:
                         if (!basket3DExportChecked) {
-                          _context3.next = 4;
+                          _context.next = 4;
                           break;
                         }
                         newRenderJob = {
@@ -6021,7 +6115,7 @@ function CheckOut(_ref) {
                           diva3DProject: basket.Diva3DProject ? atob(basket.Diva3DProject) : undefined,
                           hQRenderScript: basket.OrderSets[0].HQRenderScript
                         };
-                        _context3.next = 4;
+                        _context.next = 4;
                         return apiSaveRenderJobs({
                           serviceUrl: apiConfig.mediaService,
                           jobs: [newRenderJob],
@@ -6031,43 +6125,36 @@ function CheckOut(_ref) {
                         setIsSaving(false);
                       case 5:
                       case "end":
-                        return _context3.stop();
+                        return _context.stop();
                     }
-                  }, _callee3);
+                  }, _callee);
                 }));
-                return function (_x5) {
-                  return _ref5.apply(this, arguments);
+                return function (_x4) {
+                  return _ref3.apply(this, arguments);
                 };
               }())["catch"](function () {
                 return setIsSaving(false);
               });
             }
-          case 14:
+          case 8:
           case "end":
-            return _context4.stop();
+            return _context2.stop();
         }
-      }, _callee4);
+      }, _callee2);
     }));
-    return function (_x, _x2, _x3, _x4) {
-      return _ref4.apply(this, arguments);
+    return function (_x, _x2, _x3) {
+      return _ref2.apply(this, arguments);
     };
   }(), [isSaving, onClickSave, basket3DExportChecked]);
-  var onChangeForm = function onChangeForm(_ref6) {
-    var data = _ref6.data;
+  var onChangeForm = function onChangeForm(_ref4) {
+    var data = _ref4.data;
     for (var key in data) {
       basket[key] = data[key];
     }
   };
-  var onErrorHqMedia = function onErrorHqMedia(error) {
-    openModal({
-      title: t('Error'),
-      accept: true,
-      text: t('basket.checkout.errorhqmediatext')
-    });
-  };
 
   // for LEAFLET don't show printOptions, if there are any configured.
-  var finalSchema = _objectSpread$r(_objectSpread$r({}, uiSchema), {}, {
+  var finalSchema = _objectSpread$s(_objectSpread$s({}, uiSchema), {}, {
     elements: _toConsumableArray(uiSchema.elements)
   });
   if (status == 'LEAFLET') {
@@ -6099,63 +6186,15 @@ function CheckOut(_ref) {
       }), /*#__PURE__*/jsx(StatusMenu, {
         visibleStatus: statusArray,
         status: status,
-        setStatus: setStatus,
-        productSaved: isSaved
+        setStatus: setStatus
       })]
     }), /*#__PURE__*/jsxs("div", {
-      children: [showRenderJobs && /*#__PURE__*/jsxs(Paper$1, {
-        elevation: 4,
-        className: paperContainer,
-        children: [/*#__PURE__*/jsxs("div", {
-          className: hqMediaHeaderContainer,
-          children: [/*#__PURE__*/jsx("div", {
-            className: hqMediaTitle,
-            children: "HQ Medien"
-          }), /*#__PURE__*/jsx(Button$1, {
-            onClick: function onClick() {
-              return setShowRenderJobs(false);
-            },
-            children: /*#__PURE__*/jsx(CloseIcon, {})
-          })]
-        }), /*#__PURE__*/jsx("div", {
-          className: hqmediaContainer,
-          children: /*#__PURE__*/jsx(OrderEntry, {
-            variantData: [],
-            baseData: currentProduct,
-            basketData: basket,
-            onSave: function onSave() {
-              return productHandler.saveProducts({
-                products: [currentProduct]
-              }).then(function (r) {
-                return !!r.length;
-              });
-            },
-            saved: true,
-            onError: function onError() {
-              return onErrorHqMedia;
-            }
-          })
-        })]
-      }), status === 'BASE_CONFIGURATION' && !showRenderJobs && /*#__PURE__*/jsx(Fragment, {
-        children: /*#__PURE__*/jsxs("div", {
-          style: {
-            margin: '1rem',
-            marginLeft: '150px',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 25
-          },
-          children: [/*#__PURE__*/jsx("img", {
-            src: currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.image,
-            height: 250
-          }), /*#__PURE__*/jsx("div", {
-            style: {
-              whiteSpace: 'pre-wrap'
-            },
-            children: currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.technicalDescription
-          })]
-        })
-      }), status !== 'BASE_CONFIGURATION' && !showRenderJobs && /*#__PURE__*/jsxs(Fragment, {
+      children: [status === 'BASE_CONFIGURATION' && /*#__PURE__*/jsx(Step3Product, {
+        startWithEmptyBasket: startWithEmptyBasket,
+        currentProduct: currentProduct,
+        handleSave: handleSave,
+        updateProductData: updateProductData
+      }), status !== 'BASE_CONFIGURATION' && /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx("div", {
           style: {
             margin: '1rem',
@@ -6172,7 +6211,7 @@ function CheckOut(_ref) {
         }), !!renderService && permissionAnyHqRenderBox && (catalogData === null || catalogData === void 0 ? void 0 : catalogData[0].has3D) && /*#__PURE__*/jsx(HqRenderBox, {
           basket: basket,
           config: renderService
-        }), (catalogData === null || catalogData === void 0 ? void 0 : catalogData[0].has3D) && (catalogData === null || catalogData === void 0 ? void 0 : catalogData[0].arReady) && organization.settings.enable3DExport && /*#__PURE__*/jsxs("div", {
+        }), (catalogData === null || catalogData === void 0 ? void 0 : catalogData[0].has3D) && organization.settings.enable3DExport && /*#__PURE__*/jsxs("div", {
           style: {
             marginLeft: '50px',
             width: '700px'
@@ -6200,7 +6239,7 @@ function CheckOut(_ref) {
           })
         })]
       })]
-    }), !showRenderJobs && /*#__PURE__*/jsx(SaveButtonsGroup, {
+    }), status !== 'BASE_CONFIGURATION' && /*#__PURE__*/jsx(SaveButtonsGroup, {
       orderEmpty: !basket.OrderSets || basket.OrderSets.length == 0 || gdpr && !isEmpty(basket === null || basket === void 0 ? void 0 : basket.Client) && !basket.Gdpr,
       onClickSave: handleSave,
       startWithEmptyBasket: startWithEmptyBasket,
@@ -6224,12 +6263,12 @@ function isEmpty(data) {
   });
 }
 
-function ownKeys$q(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$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$r(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$r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$r(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var schema = function schema(hideWWSButton) {
   return {
     type: 'object',
-    properties: _objectSpread$q(_objectSpread$q({
+    properties: _objectSpread$r(_objectSpread$r({
       Salesperson: {
         type: 'string',
         title: 'basket.checkout.form.seller'
@@ -6464,7 +6503,10 @@ function Step3Checkout(_ref) {
     status = _ref.status,
     setStatus = _ref.setStatus,
     statusArray = _ref.statusArray,
-    config = _ref.config;
+    config = _ref.config,
+    currentProduct = _ref.currentProduct,
+    saveProduct = _ref.saveProduct,
+    updateProductData = _ref.updateProductData;
   var _useDivaCore = useDivaCore(),
     organization = _useDivaCore.state.organization;
   return /*#__PURE__*/jsx(CheckOut, {
@@ -6479,19 +6521,225 @@ function Step3Checkout(_ref) {
     updateBasket: updateBasket,
     renderService: config === null || config === void 0 || (_config$checkout3 = config.checkout) === null || _config$checkout3 === void 0 ? void 0 : _config$checkout3.renderService,
     configSaveButtons: (config === null || config === void 0 || (_config$checkout4 = config.checkout) === null || _config$checkout4 === void 0 ? void 0 : _config$checkout4.saveButtons) || ['SAVE', 'SAVE_AND_OPEN', 'SAVE_AND_SEND', 'NEW'],
-    gdpr: config === null || config === void 0 || (_config$checkout5 = config.checkout) === null || _config$checkout5 === void 0 ? void 0 : _config$checkout5.checkGdpr
+    gdpr: config === null || config === void 0 || (_config$checkout5 = config.checkout) === null || _config$checkout5 === void 0 ? void 0 : _config$checkout5.checkGdpr,
+    currentProduct: currentProduct,
+    saveProduct: saveProduct,
+    updateProductData: updateProductData
   });
 }
 
+var infocontainer = "infocontainer-ir9gv";
+var css_248z$a = ".infocontainer-ir9gv {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n";
+styleInject(css_248z$a);
+
+function Step4Checkout(_ref) {
+  var currentProduct = _ref.currentProduct,
+    basket = _ref.basket,
+    productSaved = _ref.productSaved,
+    is3dReady = _ref.is3dReady;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    openModal = _useDivaCore.actions.openModal,
+    productHandler = _useDivaCore.handler.productHandler;
+  var onErrorHqMedia = function onErrorHqMedia(error) {
+    openModal({
+      title: t('Error'),
+      accept: true,
+      text: t('basket.checkout.errorhqmediatext')
+    });
+  };
+  if (!is3dReady) {
+    return /*#__PURE__*/jsx("div", {
+      className: infocontainer,
+      children: /*#__PURE__*/jsx(InfoAlert, {
+        title: t('basket.checkout.step4.errortitle'),
+        content: /*#__PURE__*/jsx(Fragment, {
+          children: t('basket.checkout.step4.error3d')
+        })
+      })
+    });
+  }
+  if (!productSaved) {
+    return /*#__PURE__*/jsx("div", {
+      className: infocontainer,
+      children: /*#__PURE__*/jsx(InfoAlert, {
+        title: t('basket.checkout.step4.errortitle'),
+        content: /*#__PURE__*/jsx(Fragment, {
+          children: t('basket.checkout.step4.productNotSaved')
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/jsxs(Box, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 2,
+      height: '100%'
+    },
+    children: [/*#__PURE__*/jsx(InfoAlert, {
+      content: /*#__PURE__*/jsxs(Fragment, {
+        children: [t('basket.checkout.step4.hqmediainfo'), ":", ' ', /*#__PURE__*/jsx("a", {
+          href: "https://www.diva-portal.de/digitalisierungs-service",
+          target: "_blank",
+          children: "www.diva-portal.de/digitalisierungs-service"
+        })]
+      })
+    }), /*#__PURE__*/jsx(OrderEntry, {
+      variantData: [],
+      baseData: currentProduct,
+      basketData: basket,
+      onSave: function onSave() {
+        return productHandler.saveProducts({
+          products: [currentProduct]
+        }).then(function (r) {
+          return !!r.length;
+        });
+      },
+      saved: true,
+      onError: function onError() {
+        return onErrorHqMedia;
+      }
+    })]
+  });
+}
+function InfoAlert(_ref2) {
+  var title = _ref2.title,
+    content = _ref2.content;
+  return /*#__PURE__*/jsxs(Alert$1, {
+    variant: "outlined",
+    severity: "info",
+    children: [title && /*#__PURE__*/jsx(AlertTitle$1, {
+      children: title
+    }), content]
+  });
+}
+
+function ownKeys$q(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$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function useProduct(basket) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    productSaved = _useState2[0],
+    setProductSaved = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentProduct = _useState4[0],
+    setCurrentProduct = _useState4[1];
+  var _useDivaCore = useDivaCore(),
+    productHandler = _useDivaCore.handler.productHandler;
+  useEffect(function () {
+    var fetchProduct = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!((basket === null || basket === void 0 ? void 0 : basket.Status) === 'BASE_CONFIGURATION' && !currentProduct)) {
+                _context.next = 3;
+                break;
+              }
+              _context.next = 3;
+              return loadProduct(basket);
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function fetchProduct() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    fetchProduct();
+  }, [basket === null || basket === void 0 ? void 0 : basket.Status]);
+  var loadProduct = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(basket) {
+      var _myProduct$baseData$p;
+      var myProduct;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return productHandler.loadProducts({
+              basket: new BasketData(basket),
+              productData: currentProduct ? [currentProduct] : undefined,
+              getUniqueNewDivaNr: true
+            });
+          case 2:
+            myProduct = _context2.sent;
+            setCurrentProduct(_objectSpread$q(_objectSpread$q({}, myProduct.baseData), {}, {
+              parent: (_myProduct$baseData$p = myProduct.baseData.parent) !== null && _myProduct$baseData$p !== void 0 ? _myProduct$baseData$p : myProduct.baseData._id
+            }));
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function loadProduct(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var saveProduct = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(favourite) {
+      var _myproduct$0$parent;
+      var myproduct;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (currentProduct) {
+              _context3.next = 2;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 2:
+            _context3.next = 4;
+            return productHandler.saveProducts({
+              products: [currentProduct]
+            });
+          case 4:
+            myproduct = _context3.sent;
+            setCurrentProduct(_objectSpread$q(_objectSpread$q({}, myproduct[0]), {}, {
+              parent: (_myproduct$0$parent = myproduct[0].parent) !== null && _myproduct$0$parent !== void 0 ? _myproduct$0$parent : myproduct[0]._id
+            }));
+            if (!favourite) {
+              _context3.next = 9;
+              break;
+            }
+            _context3.next = 9;
+            return productHandler.apiMarkAsFavorite(currentProduct._id, currentProduct.organizationId);
+          case 9:
+            setProductSaved(true);
+          case 10:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function saveProduct(_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var updateProductData = function updateProductData(product) {
+    setCurrentProduct(_objectSpread$q({}, product));
+  };
+  return {
+    currentProduct: currentProduct,
+    saveProduct: saveProduct,
+    productSaved: productSaved,
+    updateProductData: updateProductData
+  };
+}
+
 function ownKeys$p(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$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$p(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOG$4 = getLogger('SellerBasket', 'Basket');
 function Basket(_ref) {
-  var _configurationData$Ch5;
+  var _currentProduct$divaN, _configurationData$Ch5, _currentBasket$OrderS5;
   var divaNr = _ref.divaNr,
     basket = _ref.basket,
     checkBasket = _ref.checkBasket;
-  //Hooks
   var _useState = useState('Step1'),
     _useState2 = _slicedToArray(_useState, 2),
     actBasketPage = _useState2[0],
@@ -6525,6 +6773,11 @@ function Basket(_ref) {
     openModal = _useSellerState$actio.openModal,
     sendEmail = _useSellerState$actio.sendEmail,
     resetBasketState = _useSellerState$actio.resetBasketState;
+  var _useProduct = useProduct(currentBasketState === null || currentBasketState === void 0 ? void 0 : currentBasketState.basket),
+    currentProduct = _useProduct.currentProduct,
+    saveProduct = _useProduct.saveProduct,
+    productSaved = _useProduct.productSaved,
+    updateProductData = _useProduct.updateProductData;
   var statusRef = useRef(basket !== null && basket !== void 0 && basket.StatusKey ? basket === null || basket === void 0 ? void 0 : basket.StatusKey : basket !== null && basket !== void 0 && basket.Status ? basket === null || basket === void 0 ? void 0 : basket.Status : '');
   useEffect(function () {
     if (!basket) DivaUtils$1.businessMetrics.setConfiguratorSessionId();
@@ -6701,6 +6954,7 @@ function Basket(_ref) {
                   message: t('basket.checkout.pdfqr'),
                   type: 'big',
                   clickable: true,
+                  qrCodeSize: 312,
                   autoHideDuration: (_configurationData$Ch3 = configurationData === null || configurationData === void 0 || (_configurationData$Ch4 = configurationData.Checkout) === null || _configurationData$Ch4 === void 0 ? void 0 : _configurationData$Ch4.pdfQRAutoHideDuration) !== null && _configurationData$Ch3 !== void 0 ? _configurationData$Ch3 : 1000 * 60 * 2
                 });
               }
@@ -6866,9 +7120,9 @@ function Basket(_ref) {
     },
     children: [/*#__PURE__*/jsx(Header$1, {
       config: configurationData === null || configurationData === void 0 ? void 0 : configurationData.Checkout,
-      status: statusRef.current,
+      status: currentBasket.Status,
       documentVersion: currentBasket.getDocumentVersion(),
-      divaNr: currentBasket.DivaNr,
+      divaNr: currentBasket.Status == 'BASE_CONFIGURATION' && currentProduct ? (_currentProduct$divaN = currentProduct.divaNr) !== null && _currentProduct$divaN !== void 0 ? _currentProduct$divaN : '' : currentBasket.DivaNr,
       actBasketPage: actBasketPage,
       setActBasketPage: setActBasketPage,
       showVKPExportButton: !!(vkpExportData !== null && vkpExportData !== void 0 && vkpExportData.callbackurl) || !!(configurationData !== null && configurationData !== void 0 && configurationData.VKPExportUrl),
@@ -6907,7 +7161,18 @@ function Basket(_ref) {
         onClickSave: onClickSave,
         statusArray: getBasketStatusArr(),
         updateBasket: update,
-        currentUser: currentUser
+        currentUser: currentUser,
+        currentProduct: currentProduct,
+        saveProduct: saveProduct,
+        updateProductData: updateProductData
+      }), actBasketPage == 'Step4' && organization.settings.enableVKMarketing && /*#__PURE__*/jsx(Step4Checkout, {
+        config: configurationData === null || configurationData === void 0 ? void 0 : configurationData.Checkout,
+        basket: currentBasket,
+        setActBasketPage: setActBasketPage,
+        startWithEmptyBasket: startWithEmptyBasket,
+        currentProduct: currentProduct,
+        productSaved: productSaved,
+        is3dReady: currentBasket !== null && currentBasket !== void 0 && (_currentBasket$OrderS5 = currentBasket.OrderSets[0]) !== null && _currentBasket$OrderS5 !== void 0 && _currentBasket$OrderS5.HQRenderScript ? true : false
       })]
     })]
   });
@@ -6920,7 +7185,7 @@ var modelTitle = "model-title-Sgm-0";
 var description = "description-GyPZq";
 var pdf = "pdf-oNnao";
 var hidden = "hidden-xYPOr";
-var css_248z$9 = ".wrapper-fSL18 {\n  display: flex;\n  flex-direction: column;\n  padding: 0 12px;\n  height: 100%;\n}\n\n.title-iTDPA {\n  padding: 16px 8px;\n  font-size: 36px;\n}\n\n.title-iTDPA .MuiButtonBase-root {\n  display: none;\n}\n\n.subTitle-4-0PW {\n  padding: 12px 18px;\n  font-size: 28px;\n}\n\n.description-container-k1vLT {\n  display: flex;\n  flex-direction: column;\n  background-color: #f2f2f2;\n  padding: 18px;\n  gap: 12px;\n  height: 100%;\n}\n\n.model-title-Sgm-0 {\n  font-size: 24px;\n  font-weight: 600;\n}\n.description-GyPZq {\n  font-size: 16px;\n  overflow: auto;\n  flex-grow: 3;\n}\n\n.pdf-oNnao {\n  display: 'flex';\n  flex: 1 1 10px;\n}\n\n.pdf-oNnao svg {\n  margin-right: 10px;\n}\n\n@media (max-width: 820px) {\n  .wrapper-fSL18 {\n    height: 75px;\n  }\n  .description-container-k1vLT {\n    position: fixed;\n    top: 22px;\n    width: 80%;\n    z-index: 101;\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n    margin-top: 135px;\n    margin-left: -10px;\n    transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  }\n  .title-iTDPA .MuiButtonBase-root {\n    display: inline-flex;\n  }\n  .hidden-xYPOr .description-container-k1vLT {\n    padding: 0;\n    width: 0;\n  }\n\n  .hidden-xYPOr .model-title-Sgm-0 {\n    display: none;\n  }\n\n  .hidden-xYPOr .description-GyPZq {\n    display: none;\n  }\n}\n";
+var css_248z$9 = ".wrapper-fSL18 {\n  display: flex;\n  flex-direction: column;\n  padding: 0 12px;\n  height: 100%;\n}\n\n.title-iTDPA {\n  padding: 16px 8px;\n  font-size: 36px;\n}\n\n.title-iTDPA .MuiButtonBase-root {\n  display: none;\n}\n\n.subTitle-4-0PW {\n  padding: 12px 18px;\n  font-size: 28px;\n}\n\n.description-container-k1vLT {\n  display: flex;\n  flex-direction: column;\n  background-color: #f2f2f2;\n  padding: 18px;\n  gap: 12px;\n  height: 100%;\n  overflow: auto;\n}\n\n.model-title-Sgm-0 {\n  font-size: 24px;\n  font-weight: 600;\n}\n.description-GyPZq {\n  font-size: 16px;\n  overflow: auto;\n  flex-grow: 3;\n  scrollbar-width: thin;\n}\n\n.pdf-oNnao {\n  display: 'flex';\n  flex: 1 1 10px;\n}\n\n.pdf-oNnao svg {\n  margin-right: 10px;\n}\n\n@media (max-width: 820px) {\n  .wrapper-fSL18 {\n    height: 75px;\n  }\n  .description-container-k1vLT {\n    position: fixed;\n    top: 22px;\n    width: 80%;\n    z-index: 101;\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n    margin-top: 135px;\n    margin-left: -10px;\n    transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    height: calc(100% - 195px);\n  }\n  .title-iTDPA .MuiButtonBase-root {\n    display: inline-flex;\n  }\n  .hidden-xYPOr .description-container-k1vLT {\n    padding: 0;\n    width: 0;\n  }\n\n  .hidden-xYPOr .pdf-oNnao {\n    display: none;\n  }\n\n  .hidden-xYPOr .model-title-Sgm-0 {\n    display: none;\n  }\n\n  .hidden-xYPOr .description-GyPZq {\n    display: none;\n  }\n}\n";
 styleInject(css_248z$9);
 
 var _excluded$6 = ["data", "text"];
@@ -6975,8 +7240,9 @@ function Description$1 (_ref) {
 }
 
 var container = "container-Sr3pC";
+var iconOnly = "icon-only-2SJ6e";
 var icon$1 = "icon-0h-39";
-var css_248z$8 = ".container-Sr3pC {\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n  padding: 8px;\n  flex-wrap: wrap;\n}\n.container-Sr3pC .MuiButton-root {\n  height: 45px;\n}\n\n.icon-0h-39 {\n  width: 24px;\n  height: 24px;\n}\n";
+var css_248z$8 = ".container-Sr3pC {\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n  padding: 8px;\n  flex-wrap: wrap;\n}\n.container-Sr3pC .MuiButton-root {\n  height: 45px;\n}\n\n.icon-only-2SJ6e span {\n  margin-right: 2px;\n}\n\n.icon-0h-39 {\n  width: 24px;\n  height: 24px;\n}\n";
 styleInject(css_248z$8);
 
 function ownKeys$n(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; }
@@ -7049,6 +7315,7 @@ function NavBar (buttons) {
   return /*#__PURE__*/jsxs("div", {
     className: container,
     children: [/*#__PURE__*/jsx(Button, {
+      className: iconOnly,
       variant: "outlined",
       color: "primary",
       startIcon: /*#__PURE__*/jsx(NavBackSvg, {
@@ -7100,7 +7367,7 @@ var leftSide = "left-side-10jmj";
 var rightSide$1 = "right-side-64-Yz";
 var catalogImages = "catalog-images-jJGqW";
 var footer = "footer-1ONIt";
-var css_248z$7 = ".layout-NhUpB {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n}\n\n.content-t8Rtl {\n  display: flex;\n  flex: 1;\n  overflow: auto;\n}\n\n.left-side-10jmj {\n  width: 25%;\n  min-width: 300px;\n}\n\n.right-side-64-Yz {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  flex: 1;\n  overflow: auto;\n}\n\n.catalog-images-jJGqW {\n  flex: 1;\n  padding: 12px;\n}\n\n.footer-1ONIt {\n  display: flex;\n  justify-content: flex-end;\n}\n\n@media (max-width: 820px) {\n  .content-t8Rtl {\n    flex-direction: column;\n  }\n}\n";
+var css_248z$7 = ".layout-NhUpB {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n}\n\n.content-t8Rtl {\n  display: flex;\n  flex: 1;\n  overflow: auto;\n}\n\n.left-side-10jmj {\n  width: 25%;\n  min-width: 300px;\n}\n\n.right-side-64-Yz {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  flex: 1;\n  overflow: auto;\n  justify-content: flex-end;\n}\n\n.catalog-images-jJGqW {\n  flex: 1;\n  padding: 12px;\n}\n\n.footer-1ONIt {\n  display: flex;\n  justify-content: flex-end;\n}\n\n@media (max-width: 820px) {\n  .content-t8Rtl {\n    flex-direction: column;\n  }\n}\n";
 styleInject(css_248z$7);
 
 var wrapper$5 = "wrapper-D5Cmc";
@@ -7192,9 +7459,10 @@ var CatalogImages = function CatalogImages(_ref) {
 };
 
 var wrapper$4 = "wrapper-3d2zl";
+var fullHeight = "full-height-CQ8Cy";
 var tabBar = "tab-bar-lQQ28";
 var nothingFound = "nothing-found-0eqZ5";
-var css_248z$5 = ".wrapper-3d2zl {\n  max-height: 50%;\n  overflow: hidden;\n}\n\n.wrapper-3d2zl.MuiAccordion-root.Mui-expanded {\n  height: 50%;\n}\n\n.wrapper-3d2zl .MuiAccordionSummary-root.Mui-expanded {\n  min-height: 0;\n}\n\n.wrapper-3d2zl .MuiAccordionSummary-root.Mui-focused {\n  background-color: #fff8f8;\n}\n\n.wrapper-3d2zl .MuiAccordionSummary-content {\n  justify-content: space-between;\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiTabs-root {\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiCollapse-root {\n  height: calc(100% - 46px) !important;\n}\n\n.wrapper-3d2zl .MuiCollapse-root {\n  scrollbar-width: thin;\n  overflow-y: scroll;\n}\n\n.wrapper-3d2zl .MuiCollapse-root .MuiCollapse-wrapper {\n  display: none;\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiCollapse-root.MuiCollapse-entered .MuiCollapse-wrapper {\n  display: flex;\n}\n\n.wrapper-3d2zl .MuiCollapse-root .MuiCollapse-wrapperInner {\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiCollapse-root .MuiCollapse-wrapperInner > div {\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiAccordionDetails-root {\n  height: calc(100% - 24px);\n  width: calc(100% - 32px);\n}\n\n.tab-bar-lQQ28 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  background-color: #f8f8f8;\n  height: 46px;\n}\n\n.nothing-found-0eqZ5 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  flex-direction: column;\n  gap: 15px;\n  margin: auto;\n}\n";
+var css_248z$5 = ".wrapper-3d2zl {\n  max-height: 50%;\n  overflow: hidden;\n}\n\n.wrapper-3d2zl.MuiAccordion-root.Mui-expanded {\n  height: 50%;\n}\n\n.wrapper-3d2zl.full-height-CQ8Cy {\n  max-height: 100%;\n}\n\n.wrapper-3d2zl.full-height-CQ8Cy.MuiAccordion-root.Mui-expanded {\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiAccordionSummary-root.Mui-expanded {\n  min-height: 0;\n}\n\n.wrapper-3d2zl .MuiAccordionSummary-root.Mui-focused {\n  background-color: #fff8f8;\n}\n\n.wrapper-3d2zl .MuiAccordionSummary-content {\n  justify-content: space-between;\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiTabs-root {\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiCollapse-root {\n  height: calc(100% - 46px) !important;\n}\n\n.wrapper-3d2zl .MuiCollapse-root {\n  scrollbar-width: thin;\n  overflow-y: scroll;\n}\n\n.wrapper-3d2zl .MuiCollapse-root .MuiCollapse-wrapper {\n  display: none;\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiCollapse-root.MuiCollapse-entered .MuiCollapse-wrapper {\n  display: flex;\n}\n\n.wrapper-3d2zl .MuiCollapse-root .MuiCollapse-wrapperInner {\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiCollapse-root .MuiCollapse-wrapperInner > div {\n  height: 100%;\n}\n\n.wrapper-3d2zl .MuiAccordionDetails-root {\n  height: calc(100% - 24px);\n  width: calc(100% - 32px);\n}\n\n.tab-bar-lQQ28 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  background-color: #f8f8f8;\n  height: 46px;\n}\n\n.nothing-found-0eqZ5 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  flex-direction: column;\n  gap: 15px;\n  margin: auto;\n}\n";
 styleInject(css_248z$5);
 
 var wrapper$3 = "wrapper-i9mNn";
@@ -7238,7 +7506,7 @@ function NothingFound (_ref) {
     children: [/*#__PURE__*/jsx(Typography$1, {
       variant: "body2",
       children: text
-    }), info && /*#__PURE__*/jsx(Alert, {
+    }), info && /*#__PURE__*/jsx(Alert$2, {
       variant: "outlined",
       severity: "info",
       children: info
@@ -7250,7 +7518,8 @@ var ProductsOrArticles = function ProductsOrArticles(_ref) {
   var _scroller$current, _scroller$current2;
   var catalogCodex = _ref.catalogCodex,
     onProductClick = _ref.onProductClick,
-    hideProducts = _ref.hideProducts;
+    hideProducts = _ref.hideProducts,
+    hideImages = _ref.hideImages;
   var _useSellerState = useSellerState(),
     configurationData = _useSellerState.state.configurationData;
   var _useState = useState(0),
@@ -7329,18 +7598,10 @@ var ProductsOrArticles = function ProductsOrArticles(_ref) {
       favoriteProductsState.search[1](search);
     }
   };
-  if (hideAll || vzProductsState.loading || favoriteProductsState.loading) return /*#__PURE__*/jsx(Fragment, {});
-  /*#__PURE__*/jsx(ProductsComponent, {
-    productState: vzProductsState,
-    onClickFunction: onProductClick,
-    groupVariantsByField: configurationData === null || configurationData === void 0 ? void 0 : configurationData.groupVariantsByField,
-    galleryConfig: {
-      hidePrices: true
-    }
-  });
-  var isEmpty = tab == 0 ? vzProductsState.groups.length == 0 : favoriteProductsState.groups.length == 0;
+  if (hideAll) return /*#__PURE__*/jsx(Fragment, {});
+  var isEmpty = selectedTab == 0 ? vzProductsState.groups.length == 0 : favoriteProductsState.groups.length == 0;
   return /*#__PURE__*/jsxs(Accordion, {
-    className: wrapper$4,
+    className: classnames(wrapper$4, _defineProperty({}, fullHeight, hideImages)),
     expanded: shouldExpand,
     onChange: function onChange(_, exp) {
       return setExpanded(exp);
@@ -7354,7 +7615,7 @@ var ProductsOrArticles = function ProductsOrArticles(_ref) {
         children: [showVZProducts && /*#__PURE__*/jsx(Tab, {
           label: t('info.products.shared'),
           value: 0
-        }), /*#__PURE__*/jsx(Tab, {
+        }), showFavoriteProducts && /*#__PURE__*/jsx(Tab, {
           label: t('info.products.favorite'),
           value: 1
         })]
@@ -7370,7 +7631,10 @@ var ProductsOrArticles = function ProductsOrArticles(_ref) {
         onClickFunction: onProductClick,
         groupVariantsByField: configurationData === null || configurationData === void 0 ? void 0 : configurationData.groupVariantsByField,
         galleryConfig: {
-          hidePrices: true
+          hidePrices: true,
+          imageWrapperStyle: {
+            maxHeight: '200px'
+          }
         }
       }), isEmpty && /*#__PURE__*/jsx(NothingFound, {
         text: selectedTab == 0 ? t('info.products.novzproducts') : t('info.products.nofavorites'),
@@ -7433,11 +7697,11 @@ function useModelInfoPage (_ref) {
               toggleLoading('seller-model-info', false, true);
               accountSessionId = undefined;
               if (!(organization.type === 'RETAILER')) {
-                _context.next = 13;
+                _context.next = 14;
                 break;
               }
               if (accountId) {
-                _context.next = 10;
+                _context.next = 11;
                 break;
               }
               LOG$3.errorTransaction('ON_OPEN_MODULE_INFO', 'SELLER_0001', 'Missing account ID', {
@@ -7446,33 +7710,46 @@ function useModelInfoPage (_ref) {
               });
               setLoading(false);
               toggleLoading('seller-model-info', false, false);
+              openComponent({
+                type: 'SELLER'
+              });
               return _context.abrupt("return");
-            case 10:
-              _context.next = 12;
+            case 11:
+              _context.next = 13;
               return checkAccountLogin({
                 accountId: accountId
               });
-            case 12:
-              accountSessionId = _context.sent;
             case 13:
+              accountSessionId = _context.sent;
+            case 14:
               if (!catalogCodex) {
-                _context.next = 21;
+                _context.next = 26;
                 break;
               }
-              _context.next = 16;
+              _context.next = 17;
               return loadCatalogInfo({
                 catalogCodex: catalogCodex,
                 accountSessionId: accountSessionId,
                 accountId: accountId,
                 language: i18n.language || 'en'
               });
-            case 16:
+            case 17:
               catalogInfoData = _context.sent;
+              if (catalogInfoData) {
+                _context.next = 22;
+                break;
+              }
+              toggleLoading('seller-model-info', false, false);
+              openComponent({
+                type: 'SELLER'
+              });
+              return _context.abrupt("return");
+            case 22:
               {
-                _context.next = 19;
+                _context.next = 24;
                 break;
               }
-            case 19:
+            case 24:
               setData(catalogInfoData === null || catalogInfoData === void 0 ? void 0 : catalogInfoData[0]);
 
               //if there is no relevant catalog information, as a normal seller continue directly to the planner
@@ -7482,14 +7759,14 @@ function useModelInfoPage (_ref) {
                   onOpenPlanner(accountSessionId);
                 }
               }
-            case 21:
+            case 26:
               LOG$3.successTransaction('ON_OPEN_MODULE_INFO', {
                 cat: catalogCodex,
                 accountId: accountId
               });
               setLoading(false);
               toggleLoading('seller-model-info', false, false);
-            case 24:
+            case 29:
             case "end":
               return _context.stop();
           }
@@ -7624,7 +7901,8 @@ function Info(props) {
           }), /*#__PURE__*/jsx(ProductsOrArticles, {
             catalogCodex: catalogData.codex,
             onProductClick: onOpenPlannerWithProduct,
-            hideProducts: hideProducts
+            hideProducts: hideProducts,
+            hideImages: hideImage
           })]
         })]
       }), /*#__PURE__*/jsx("div", {
@@ -7685,10 +7963,16 @@ function Priceedit (_ref) {
     discount.percentageDiscount = isPercentage ? value : undefined;
     var price = (_productData$addedPri = productData.addedPrice) !== null && _productData$addedPri !== void 0 ? _productData$addedPri : 0;
     if (isPercentage) {
-      var discountPrice = (discount.percentageDiscount || 0) / 100 * price;
-      discount = _objectSpread$i(_objectSpread$i({}, discount), {}, {
-        calcDiscountPrice: formatTwoDecimals(price - discountPrice)
-      });
+      if (discount.percentageDiscount == 0 || discount.percentageDiscount == undefined) {
+        discount = _objectSpread$i(_objectSpread$i({}, discount), {}, {
+          calcDiscountPrice: ''
+        });
+      } else {
+        var discountPrice = (discount.percentageDiscount || 0) / 100 * price;
+        discount = _objectSpread$i(_objectSpread$i({}, discount), {}, {
+          calcDiscountPrice: formatTwoDecimals(price - discountPrice)
+        });
+      }
     } else {
       discount = _objectSpread$i(_objectSpread$i({}, discount), {}, {
         percentageDiscount: formatOneDecimals((price - value || 0) / price * 100)
@@ -7696,8 +7980,8 @@ function Priceedit (_ref) {
     }
     setDiscount(discount);
     update(_objectSpread$i(_objectSpread$i({}, productData), {}, {
-      discountedPrice: isPercentage ? formatTwoDecimals(discount.calcDiscountPrice) : value,
-      percentageDiscount: discount.percentageDiscount
+      discountedPrice: isPercentage ? discount.calcDiscountPrice ? formatTwoDecimals(discount.calcDiscountPrice) : undefined : value,
+      percentageDiscount: discount.percentageDiscount > 0 ? discount.percentageDiscount : undefined
     }));
   }, [productData, update]);
   function formatTwoDecimals(value) {
@@ -8772,9 +9056,9 @@ var CustomDataFields = function CustomDataFields(_ref) {
     children: [/*#__PURE__*/jsx(CardHeader, {
       title: t('seller.productcreator.customfields') + (productData.variantId !== undefined ? ' (' + t('productvariant') + ':' + productData.variantId + ')' : '')
     }), /*#__PURE__*/jsx(CardContent, {
-      children: /*#__PURE__*/jsxs(Box, {
+      children: /*#__PURE__*/jsxs(Box$1, {
         children: [pairs.map(function (pair, index) {
-          return /*#__PURE__*/jsxs(Box, {
+          return /*#__PURE__*/jsxs(Box$1, {
             className: wrapper$2,
             children: [/*#__PURE__*/jsx(TextField, {
               style: {
@@ -9231,9 +9515,15 @@ function BaseDataForm (_ref) {
             children: [/*#__PURE__*/jsx(CardHeader, {
               title: t('productcreator.basedata.prices')
             }), /*#__PURE__*/jsx(CardContent, {
-              children: /*#__PURE__*/jsx(Priceedit, {
+              children: !hasVariants ? /*#__PURE__*/jsx(Priceedit, {
                 productData: productData,
                 update: update
+              }) : /*#__PURE__*/jsxs(Alert, {
+                variant: "outlined",
+                severity: "info",
+                children: [/*#__PURE__*/jsxs(AlertTitle, {
+                  children: [" ", t('productcreator.basedata.nopriceedittitle')]
+                }), t('productcreator.basedata.nopriceeditdesc')]
               })
             })]
           })]
@@ -9797,7 +10087,6 @@ function VariantTable (_ref) {
       sortBy: [{
         id: getSortByIdField()
       }],
-      expanded: true,
       views: ['Table'],
       defaultView: 'Table',
       selectable: false,
@@ -9910,8 +10199,14 @@ function _preUpdateData(field, value, row) {
       var calcedValue = (price - myValue || 0) / price * 100;
       if (fieldName === 'percentageDiscount') {
         calcedField = 'discountedPrice';
-        var discountedPrice = Math.round((myValue || 0) / 100 * price);
-        calcedValue = price - discountedPrice;
+        myValue = isNaN(myValue) ? 0 : myValue;
+        if (myValue > 0) {
+          var discountedPrice = Math.round(myValue / 100 * price);
+          calcedValue = price - discountedPrice;
+        } else {
+          myValue = 0;
+          calcedValue = undefined;
+        }
       }
       return _objectSpread$7(_objectSpread$7({}, row.original), {}, _defineProperty(_defineProperty({}, fieldName, myValue), calcedField, calcedValue));
     }
@@ -9929,7 +10224,7 @@ function _preUpdateData(field, value, row) {
 
 var wrapper$1 = "wrapper-I8eY4";
 var dataTable = "data-table-ImAxQ";
-var css_248z$2 = ".wrapper-I8eY4 {\n  display: flex;\n  height: 100%;\n  border-bottom: 1px solid rgb(224, 224, 224);\n}\n\n.data-table-ImAxQ {\n  position: relative;\n  height: 100%;\n  flex-grow: 1;\n  overflow: hidden;\n}\n";
+var css_248z$2 = ".wrapper-I8eY4 {\n  display: flex;\n  height: calc(100% - 67px);\n  border-bottom: 1px solid rgb(224, 224, 224);\n}\n\n.data-table-ImAxQ {\n  position: relative;\n  height: 100%;\n  flex-grow: 1;\n  overflow: hidden;\n}\n";
 styleInject(css_248z$2);
 
 function ownKeys$6(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; }
@@ -11354,6 +11649,12 @@ function updateVariants(prevState, currentState, configurationData, baseDataFiel
       if (field == 'shortDescription' || field == ' customData') {
         //updated shortDescription as last value
         continue;
+      } else if (field == 'discountedPrice' && (newVariant === null || newVariant === void 0 ? void 0 : newVariant['percentageDiscount']) === 0 && (newVariant === null || newVariant === void 0 ? void 0 : newVariant[field]) === undefined) {
+        finalVariant[field] = undefined;
+        newModified[field] = variant[field] !== undefined;
+      } else if (field == 'percentageDiscount' && (newVariant === null || newVariant === void 0 ? void 0 : newVariant[field]) === 0) {
+        finalVariant[field] = 0;
+        newModified[field] = variant[field] !== 0;
       } else if (field == 'addedPrice' || field == 'calculatedPrice') {
         var _currentState$modifie;
         var _ProductHandler$calcu = ProductHandler.calculateComputedValue(variant[field], newVariant === null || newVariant === void 0 ? void 0 : newVariant[field], currentState.baseData[field], (_currentState$modifie = currentState.modified.variantData[_i]) === null || _currentState$modifie === void 0 ? void 0 : _currentState$modifie[field]),