@popmenu/ordering-ui 0.119.0 → 0.120.0

package/build/index.js

@@ -1629,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',
@@ -1651,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];
@@ -1663,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,