@crystaldesign/diva-seller 24.15.0-beta.42 → 24.15.0-beta.44

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, 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 { 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';
@@ -5894,13 +5894,14 @@ 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: 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";
+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 Step3Product(_ref) {
-  var _currentProduct$short, _currentProduct$techn;
+  var _currentProduct$short, _currentProduct$image, _currentProduct$techn;
   var currentProduct = _ref.currentProduct,
     startWithEmptyBasket = _ref.startWithEmptyBasket,
     handleSave = _ref.handleSave;
@@ -5912,16 +5913,20 @@ function Step3Product(_ref) {
     setImgIsLoaded = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isFavorite = _useState4[0];
-    _useState4[1];
+    isFavorite = _useState4[0],
+    setIsFavorite = _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 : ''),
+    dataIsReady = _useState6[0],
+    setDataIsReady = _useState6[1];
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    text = _useState8[0],
-    setText = _useState8[1];
+    editProductName = _useState8[0],
+    setEditProductName = _useState8[1];
+  var _useState9 = useState((_currentProduct$short = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.shortDescription) !== null && _currentProduct$short !== void 0 ? _currentProduct$short : ''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    text = _useState10[0],
+    setText = _useState10[1];
   useEffect(function () {
     setText(currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.shortDescription);
   }, [currentProduct]);
@@ -5935,6 +5940,12 @@ function Step3Product(_ref) {
     currentProduct.shortDescription = event.target.value;
     setText(event.target.value);
   };
+  var handleFavoriteToggle = function handleFavoriteToggle() {
+    setIsFavorite(!isFavorite);
+  };
+  useEffect(function () {
+    setDataIsReady(currentProduct && imgIsLoaded);
+  }, [currentProduct, imgIsLoaded]);
   return /*#__PURE__*/jsxs(Box, {
     className: container$1,
     children: [/*#__PURE__*/jsx(InfoAlert$1, {
@@ -5969,8 +5980,13 @@ function Step3Product(_ref) {
                 onBlur: handleBlur,
                 autoFocus: true,
                 className: productNameField
-              }) : /*#__PURE__*/jsx("h2", {
+              }) : dataIsReady ? /*#__PURE__*/jsx("h2", {
                 children: text
+              }) : /*#__PURE__*/jsx(Skeleton, {
+                animation: "wave",
+                variant: "text",
+                width: "50%",
+                height: 50
               }), !editProductName && /*#__PURE__*/jsx(IconButton$1, {
                 size: "small",
                 onClick: handleEditProductName,
@@ -5979,12 +5995,17 @@ function Step3Product(_ref) {
                 })
               })]
             }), /*#__PURE__*/jsx("img", {
-              src: currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.image,
-              className: "".concat(productImage, " ").concat(!imgIsLoaded ? hidden$1 : ''),
+              src: (_currentProduct$image = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.image) !== null && _currentProduct$image !== void 0 ? _currentProduct$image : currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.image2D,
+              className: "".concat(productImage, " ").concat(!dataIsReady ? hidden$1 : ''),
               alt: "Product",
               onLoad: function onLoad() {
                 return setImgIsLoaded(true);
               }
+            }), !dataIsReady && /*#__PURE__*/jsx(Skeleton, {
+              animation: "wave",
+              variant: "text",
+              width: "75%",
+              height: 300
             })]
           })
         }), /*#__PURE__*/jsx(Box, {
@@ -5995,10 +6016,14 @@ function Step3Product(_ref) {
             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
+                  className: favoriteCheckbox,
+                  checked: isFavorite,
+                  onChange: handleFavoriteToggle
                 }),
                 label: t('basket.checkout.step4.savemsg')
               })]
@@ -6011,10 +6036,12 @@ function Step3Product(_ref) {
             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')
           })]
         })]
@@ -6025,7 +6052,26 @@ function Step3Product(_ref) {
           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) {
+          }), !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(':'),
@@ -6039,7 +6085,7 @@ function Step3Product(_ref) {
                 sx: {
                   fontSize: {
                     xs: '12px',
-                    md: '16px'
+                    md: '1rem'
                   }
                 },
                 className: productDetailText,
@@ -6056,7 +6102,7 @@ function Step3Product(_ref) {
                 className: productDetailDivider
               })]
             }, index);
-          })]
+          }))]
         })
       })]
     })]

package/build/types/seller/src/ui/Basket/CheckOut/components/Step3Product.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step3Product.d.ts","sourceRoot":"","sources":["../../../../../../../../src/ui/Basket/CheckOut/components/Step3Product.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAwBnD,UAAU,KAAK;IACb,cAAc,EAAE,GAAG,CAAC;IACpB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,UAAU,EAAE,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/F;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,cAAc,EAAE,oBAAoB,EAAE,UAAU,EAAE,EAAE,KAAK,qBAiH/F"}
+{"version":3,"file":"Step3Product.d.ts","sourceRoot":"","sources":["../../../../../../../../src/ui/Basket/CheckOut/components/Step3Product.tsx"],"names":[],"mappings":"AAeA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAyBnD,UAAU,KAAK;IACb,cAAc,EAAE,GAAG,CAAC;IACpB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,UAAU,EAAE,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/F;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,cAAc,EAAE,oBAAoB,EAAE,UAAU,EAAE,EAAE,KAAK,qBA0I/F"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/diva-seller",
-  "version": "24.15.0-beta.42",
+  "version": "24.15.0-beta.44",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -29,9 +29,9 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@crystaldesign/analytics": "24.15.0-beta.42",
-    "@crystaldesign/products-component": "24.15.0-beta.42",
-    "@crystaldesign/real-time-viewer": "24.15.0-beta.42",
+    "@crystaldesign/analytics": "24.15.0-beta.44",
+    "@crystaldesign/products-component": "24.15.0-beta.44",
+    "@crystaldesign/real-time-viewer": "24.15.0-beta.44",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@mui/icons-material": "^6.1.5",
@@ -43,5 +43,5 @@
   },
   "types": "./build/types/seller/src/index.d.ts",
   "module": "build/esm/index.js",
-  "gitHead": "ed7ed9c457b7d34d8900c496ff608d60990d8ecd"
+  "gitHead": "8c0bebe70a221fed0ce3760ba491696fad6fb4ad"
 }