@popmenu/ordering-ui 0.118.0 → 0.120.0

package/build/index.js

@@ -187,7 +187,7 @@ var useMenuItemStyles = styles.makeStyles(function (theme) {
             fontWeight: 400,
             fontSize: 14,
             lineHeight: '20px',
-            marginBottom: theme.spacing(1),
+            margin: theme.spacing(0.5, 0, 1, 0),
             color: theme.palette.grey[800],
             '-webkit-line-clamp': 2,
             display: '-webkit-box',
@@ -195,6 +195,12 @@ var useMenuItemStyles = styles.makeStyles(function (theme) {
             textOverflow: 'ellipsis',
             overflow: 'hidden',
         },
+        outOfStockTag: {
+            minWidth: '90px',
+            marginLeft: theme.spacing(1),
+            display: 'inline-block',
+            verticalAlign: 'bottom',
+        },
     });
 });
 
@@ -1540,8 +1546,9 @@ var MenuItem = React.forwardRef(function (props, ref) {
             React__default['default'].createElement(MenuItemInfo, null,
                 isFeatured && React__default['default'].createElement(StatusTag, { color: "highlight", label: "Featured", variant: "filled", size: "sm" }),
                 React__default['default'].createElement(core.Box, { display: "flex", gridGap: 8, alignItems: "center" },
-                    React__default['default'].createElement(core.Typography, { component: "h3", className: classes.cardTitle }, loading ? React__default['default'].createElement(lab.Skeleton, null) : title),
-                    isOutOfStock && React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "sm" })),
+                    React__default['default'].createElement(core.Typography, { component: "h3", className: classes.cardTitle },
+                        loading ? React__default['default'].createElement(lab.Skeleton, null) : title,
+                        React__default['default'].createElement("span", { className: classes.outOfStockTag }, isOutOfStock && React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "sm" })))),
                 React__default['default'].createElement(core.Typography, { className: classes.cardDescription, paragraph: true }, loading ? React__default['default'].createElement(lab.Skeleton, null) : description),
                 loading ? (React__default['default'].createElement(lab.Skeleton, null,
                     React__default['default'].createElement(MenuItemReactions, { likeCount: likeCount, reviewCount: reviewCount }))) : (React__default['default'].createElement(MenuItemReactions, { likeCount: likeCount, reviewCount: reviewCount })),
@@ -1622,6 +1629,10 @@ var useDishCheckoutCardStyles = styles.makeStyles(function (theme) { return ({
     selectPaper: {
         maxHeight: theme.spacing(37),
     },
+    ul: {
+        margin: 0,
+        paddingLeft: theme.spacing(3),
+    },
     warning: {
         color: theme.palette.error.main,
         display: 'flex',
@@ -1644,7 +1655,7 @@ var OrderingAppContextProvider = function (props) {
 
 var DishCheckoutCard = function (props) {
     var _a;
-    var id = props.id, name = props.name, quantity = props.quantity, modifiers = props.modifiers, onDelete = props.onDelete, onEdit = props.onEdit, onQuantityChange = props.onQuantityChange, price = props.price, specialInstructions = props.specialInstructions, disabled = props.disabled, warningMessage = props.warningMessage, _b = props.image, image = _b === void 0 ? {} : _b;
+    var id = props.id, name = props.name, quantity = props.quantity, modifierGroups = props.modifierGroups, onDelete = props.onDelete, onEdit = props.onEdit, onQuantityChange = props.onQuantityChange, price = props.price, specialInstructions = props.specialInstructions, disabled = props.disabled, warningMessage = props.warningMessage, _b = props.image, image = _b === void 0 ? {} : _b;
     var src = image.src, alt = image.alt;
     var classes = useDishCheckoutCardStyles(props);
     var appContext = useOrderingAppContext()[0];
@@ -1656,16 +1667,41 @@ var DishCheckoutCard = function (props) {
     var labelString = function (label) {
         return label.replace(/[^a-zA-Z\s]/g, '').toLowerCase();
     };
+    var formatModifiers = function (groups, nested) {
+        if (nested === void 0) { nested = false; }
+        return groups.map(function (group) {
+            // Get all selected modifiers for this group
+            var modifiers = group.selectedModifiers.map(function (modifier) { return modifier.modifierName; }).join(', ');
+            // Render nested groups recursively
+            var nestedGroups = group.selectedModifiers.flatMap(function (modifier) {
+                var _a;
+                return (modifier === null || modifier === void 0 ? void 0 : modifier.selectedModifierGroups) && ((_a = modifier === null || modifier === void 0 ? void 0 : modifier.selectedModifierGroups) === null || _a === void 0 ? void 0 : _a.length) > 0
+                    ? formatModifiers(modifier.selectedModifierGroups, true)
+                    : [];
+            });
+            // For top-level groups, we render without the list
+            if (!nested) {
+                return (React__default['default'].createElement(Typography, { key: group.id, variant: "body2" },
+                    group.menuItemModifierGroupName,
+                    ": ",
+                    modifiers,
+                    (nestedGroups === null || nestedGroups === void 0 ? void 0 : nestedGroups.length) > 0 && React__default['default'].createElement("ul", { className: classes.ul }, nestedGroups)));
+            }
+            // For nested groups, we use list items
+            return (React__default['default'].createElement("li", { key: group.id, className: classes.li },
+                React__default['default'].createElement(Typography, { variant: "body2" },
+                    group.menuItemModifierGroupName,
+                    ": ",
+                    modifiers,
+                    nestedGroups && nestedGroups.length > 0 && React__default['default'].createElement("ul", { className: classes.ul }, nestedGroups))));
+        });
+    };
     return (React__default['default'].createElement(core.Box, { className: classes.root },
         React__default['default'].createElement(core.Box, { display: "flex", gridGap: 3 },
             src && alt && React__default['default'].createElement("img", { src: src, alt: alt, className: classes.img }),
             React__default['default'].createElement(core.Box, { flexGrow: 1 },
                 React__default['default'].createElement(Typography, { variant: "h2", className: classes.name }, name),
-                modifiers &&
-                    modifiers.map(function (modifier, i) { return (React__default['default'].createElement(Typography, { key: i, variant: "body2" },
-                        modifier[0],
-                        ": ",
-                        modifier[1])); }),
+                modifierGroups && formatModifiers(modifierGroups),
                 specialInstructions && React__default['default'].createElement(Typography, { variant: "body2" },
                     "\"",
                     specialInstructions,
@@ -1996,8 +2032,10 @@ var getStatusTagProps = function (props) {
     switch (true) {
         case error:
             color = 'error';
+            break;
         case isOutOfStock:
             color = 'warning';
+            break;
     }
     var label = optionalText;
     switch (true) {