@crystaldesign/diva-seller 24.15.0-beta.4 → 24.15.0-beta.40

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, 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);
       })
@@ -5746,7 +5775,7 @@ var HQ_RenderingTypeSource = [{
 
 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) {
+function useProduct() {
   var _useState = useState(undefined),
     _useState2 = _slicedToArray(_useState, 2),
     currentProduct = _useState2[0],
@@ -5754,7 +5783,7 @@ function useProduct(basket) {
   var _useDivaCore = useDivaCore(),
     productHandler = _useDivaCore.handler.productHandler;
   var loadProduct = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(basket) {
       var _myProduct$baseData$p;
       var myProduct;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -5763,7 +5792,8 @@ function useProduct(basket) {
             _context.next = 2;
             return productHandler.loadProducts({
               basket: new BasketData(basket),
-              divaNr: basket.DivaNr
+              productData: currentProduct !== null && currentProduct !== void 0 ? currentProduct : undefined,
+              getUniqueNewDivaNr: true
             });
           case 2:
             myProduct = _context.sent;
@@ -5777,13 +5807,10 @@ function useProduct(basket) {
         }
       }, _callee);
     }));
-    return function loadProduct() {
+    return function loadProduct(_x) {
       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;
@@ -5805,17 +5832,16 @@ function useProduct(basket) {
               break;
             }
             _context2.next = 7;
-            return productHandler.apiMarkAsFavorite(currentProduct._id, basket.OrganizationId);
+            return productHandler.apiMarkAsFavorite(currentProduct._id, currentProduct.organizationId);
           case 7:
             setCurrentProduct(currentProduct);
-            basket.DocumentVersion = basket.DocumentVersion + 1;
-          case 9:
+          case 8:
           case "end":
             return _context2.stop();
         }
       }, _callee2);
     }));
-    return function saveProduct(_x) {
+    return function saveProduct(_x2) {
       return _ref2.apply(this, arguments);
     };
   }();
@@ -5853,12 +5879,204 @@ 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 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: space-between;\n}\n\n.productDetailsPaper-VsWfW {\n  width: 100%;\n  max-height: 60vh;\n  overflow: auto;\n}\n\n.productDetailText-wkk6U {\n  white-space: pre-wrap;\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 Step3Product(_ref) {
+  var _currentProduct$short, _currentProduct$techn;
+  var currentProduct = _ref.currentProduct,
+    startWithEmptyBasket = _ref.startWithEmptyBasket,
+    handleSave = _ref.handleSave;
+  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];
+    _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    editProductName = _useState6[0],
+    setEditProductName = _useState6[1];
+  var _useState7 = useState((_currentProduct$short = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.shortDescription) !== null && _currentProduct$short !== void 0 ? _currentProduct$short : ''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    text = _useState8[0],
+    setText = _useState8[1];
+  useEffect(function () {
+    setText(currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.shortDescription);
+  }, [currentProduct]);
+  var handleEditProductName = function handleEditProductName() {
+    setEditProductName(true);
+  };
+  var handleBlur = function handleBlur() {
+    setEditProductName(false);
+  };
+  var handleChangeProductName = function handleChangeProductName(event) {
+    currentProduct.shortDescription = event.target.value;
+    setText(event.target.value);
+  };
+  return /*#__PURE__*/jsxs(Box, {
+    className: container$1,
+    children: [/*#__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: text,
+                onChange: handleChangeProductName,
+                onBlur: handleBlur,
+                autoFocus: true,
+                className: productNameField
+              }) : /*#__PURE__*/jsx("h2", {
+                children: text
+              }), !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,
+              className: "".concat(productImage, " ").concat(!imgIsLoaded ? hidden$1 : ''),
+              alt: "Product",
+              onLoad: function onLoad() {
+                return setImgIsLoaded(true);
+              }
+            })]
+          })
+        }), /*#__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, {
+                children: t('basket.checkout.step4.favoriteinfo')
+              }), /*#__PURE__*/jsx(FormControlLabel$1, {
+                control: /*#__PURE__*/jsx(Checkbox$1, {
+                  className: favoriteCheckbox
+                }),
+                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);
+            },
+            children: t('basket.checkout.step4.saveproduct')
+          }), /*#__PURE__*/jsx(Button$1, {
+            onClick: startWithEmptyBasket,
+            variant: "outlined",
+            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')
+          }), 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: '16px'
+                  }
+                },
+                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$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; }
@@ -5875,23 +6093,25 @@ function CheckOut(_ref) {
     updateBasket = _ref.updateBasket,
     statusArray = _ref.statusArray,
     configSaveButtons = _ref.configSaveButtons,
-    gdpr = _ref.gdpr;
+    gdpr = _ref.gdpr,
+    setCurrentProduct = _ref.setCurrentProduct,
+    setProductSaved = _ref.setProductSaved;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSaving = _useState2[0],
     setIsSaving = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isSaved = _useState4[0],
-    setIsSaved = _useState4[1];
+    isSaved = _useState4[0];
+    _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 = _useState6[0],
+    setBasket3DExportChecked = _useState6[1];
+  var _useProduct = useProduct(),
+    currentProduct = _useProduct.currentProduct,
+    loadProduct = _useProduct.loadProduct,
+    saveProduct = _useProduct.saveProduct;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useSellerState = useSellerState(),
@@ -5901,15 +6121,10 @@ 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() {
@@ -5921,7 +6136,7 @@ function CheckOut(_ref) {
                 break;
               }
               _context.next = 3;
-              return loadProduct();
+              return loadProduct(basket);
             case 3:
             case "end":
               return _context.stop();
@@ -5933,75 +6148,50 @@ function CheckOut(_ref) {
       };
     }();
     fetchProduct();
-    setShowRenderJobs(false);
   }, [status]);
-  var saveProductAndShowHqMedia = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var myProduct;
-      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);
-    };
-  }();
+  useEffect(function () {
+    var fetchProduct = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (currentProduct) {
+                setCurrentProduct(currentProduct);
+              }
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function fetchProduct() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    fetchProduct();
+  }, [currentProduct]);
   var handleSave = useCallback(/*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(openPDF, sendMail, favourite, hqMedia) {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(openPDF, sendMail, isFav) {
       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;
+              _context4.next = 8;
               break;
             }
+            toggleLoading('saveProduct');
             _context4.next = 4;
-            return saveProductAndShowHqMedia();
+            return saveProduct(isFav);
           case 4:
-            _context4.next = 11;
-            break;
-          case 6:
-            toggleLoading('saveProduct');
-            _context4.next = 9;
-            return saveProduct(favourite);
-          case 9:
             toggleLoading('saveProduct');
             openModal({
               title: t('basket.checkout.productsavedtitle'),
               accept: true,
               text: t('basket.checkout.productsavedtext')
             });
-          case 11:
-            setIsSaved(true);
+            setProductSaved(true);
             return _context4.abrupt("return");
-          case 13:
+          case 8:
             if (!isSaving) {
               setIsSaving(true);
               onClickSave(openPDF, sendMail).then(/*#__PURE__*/function () {
@@ -6035,20 +6225,20 @@ function CheckOut(_ref) {
                     }
                   }, _callee3);
                 }));
-                return function (_x5) {
+                return function (_x4) {
                   return _ref5.apply(this, arguments);
                 };
               }())["catch"](function () {
                 return setIsSaving(false);
               });
             }
-          case 14:
+          case 9:
           case "end":
             return _context4.stop();
         }
       }, _callee4);
     }));
-    return function (_x, _x2, _x3, _x4) {
+    return function (_x, _x2, _x3) {
       return _ref4.apply(this, arguments);
     };
   }(), [isSaving, onClickSave, basket3DExportChecked]);
@@ -6058,13 +6248,6 @@ function CheckOut(_ref) {
       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), {}, {
@@ -6103,59 +6286,11 @@ function CheckOut(_ref) {
         productSaved: isSaved
       })]
     }), /*#__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
+      }), status !== 'BASE_CONFIGURATION' && /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx("div", {
           style: {
             margin: '1rem',
@@ -6172,7 +6307,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 +6335,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,
@@ -6464,7 +6599,10 @@ function Step3Checkout(_ref) {
     status = _ref.status,
     setStatus = _ref.setStatus,
     statusArray = _ref.statusArray,
-    config = _ref.config;
+    config = _ref.config,
+    currentProduct = _ref.currentProduct,
+    setCurrentProduct = _ref.setCurrentProduct,
+    setProductSaved = _ref.setProductSaved;
   var _useDivaCore = useDivaCore(),
     organization = _useDivaCore.state.organization;
   return /*#__PURE__*/jsx(CheckOut, {
@@ -6479,7 +6617,98 @@ 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,
+    setCurrentProduct: setCurrentProduct,
+    setProductSaved: setProductSaved
+  });
+}
+
+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]
   });
 }
 
@@ -6487,7 +6716,7 @@ function ownKeys$p(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 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 _configurationData$Ch5, _currentBasket$OrderS5;
   var divaNr = _ref.divaNr,
     basket = _ref.basket,
     checkBasket = _ref.checkBasket;
@@ -6496,6 +6725,14 @@ function Basket(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     actBasketPage = _useState2[0],
     setActBasketPage = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentProduct = _useState4[0],
+    setCurrentProduct = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    productSaved = _useState6[0],
+    setProductSaved = _useState6[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t,
     i18n = _useTranslation.i18n;
@@ -6701,6 +6938,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
                 });
               }
@@ -6868,7 +7106,7 @@ function Basket(_ref) {
       config: configurationData === null || configurationData === void 0 ? void 0 : configurationData.Checkout,
       status: statusRef.current,
       documentVersion: currentBasket.getDocumentVersion(),
-      divaNr: currentBasket.DivaNr,
+      divaNr: statusRef.current == 'BASE_CONFIGURATION' && currentProduct ? currentProduct.divaNr : currentBasket.DivaNr,
       actBasketPage: actBasketPage,
       setActBasketPage: setActBasketPage,
       showVKPExportButton: !!(vkpExportData !== null && vkpExportData !== void 0 && vkpExportData.callbackurl) || !!(configurationData !== null && configurationData !== void 0 && configurationData.VKPExportUrl),
@@ -6907,7 +7145,18 @@ function Basket(_ref) {
         onClickSave: onClickSave,
         statusArray: getBasketStatusArr(),
         updateBasket: update,
-        currentUser: currentUser
+        currentUser: currentUser,
+        currentProduct: currentProduct,
+        setCurrentProduct: setCurrentProduct,
+        setProductSaved: setProductSaved
+      }), 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 +7169,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 +7224,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 +7299,7 @@ function NavBar (buttons) {
   return /*#__PURE__*/jsxs("div", {
     className: container,
     children: [/*#__PURE__*/jsx(Button, {
+      className: iconOnly,
       variant: "outlined",
       color: "primary",
       startIcon: /*#__PURE__*/jsx(NavBackSvg, {
@@ -7238,7 +7489,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
@@ -7330,14 +7581,6 @@ var ProductsOrArticles = function ProductsOrArticles(_ref) {
     }
   };
   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;
   return /*#__PURE__*/jsxs(Accordion, {
     className: wrapper$4,
@@ -7354,7 +7597,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 +7613,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'),
@@ -8772,9 +9018,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: {