@popmenu/ordering-ui 0.119.0 → 0.121.0

package/build/components/DishCheckoutCard/DishCheckoutCardProps.d.ts

@@ -1,8 +1,8 @@
 export interface DishCheckoutCardProps {
     /** Adds a border to the bottom of the card */
     borderBottom?: boolean;
-    /** Modifiers of the dish in tuple format */
-    modifiers?: [string, string][];
+    /** Modifier group object of the dish */
+    modifierGroups?: ModifierGroupsType[];
     /** Id of the dish */
     id: number;
     /** Dish image information */
@@ -29,3 +29,14 @@ export interface DishCheckoutCardProps {
     /** If item is in cart but is not unavailable */
     warningMessage?: string;
 }
+export declare type ModifierGroupsType = {
+    id: number;
+    menuItemModifierGroupName?: string | null;
+    selectedModifiers: ModifiersType[];
+};
+export declare type ModifiersType = {
+    id: number;
+    modifierName?: string | null;
+    quantity: number;
+    selectedModifierGroups?: ModifierGroupsType[];
+};

package/build/index.es.js

@@ -1592,6 +1592,10 @@ var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
     selectPaper: {
         maxHeight: theme.spacing(37),
     },
+    ul: {
+        margin: 0,
+        paddingLeft: theme.spacing(3),
+    },
     warning: {
         color: theme.palette.error.main,
         display: 'flex',
@@ -1614,7 +1618,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];
@@ -1626,16 +1630,45 @@ 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.quantity > 1 ? modifier.modifierName + " \u00D7 " + modifier.quantity : 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.createElement(Typography, { key: group.id, variant: "body2" },
+                    group.menuItemModifierGroupName,
+                    ": ",
+                    modifiers,
+                    (nestedGroups === null || nestedGroups === void 0 ? void 0 : nestedGroups.length) > 0 && React__default.createElement("ul", { className: classes.ul }, nestedGroups)));
+            }
+            // For nested groups, we use list items
+            return (React__default.createElement("li", { key: group.id, className: classes.li },
+                React__default.createElement(Typography, { variant: "body2" },
+                    group.menuItemModifierGroupName,
+                    ": ",
+                    modifiers,
+                    nestedGroups && nestedGroups.length > 0 && React__default.createElement("ul", { className: classes.ul }, nestedGroups))));
+        });
+    };
     return (React__default.createElement(Box, { className: classes.root },
         React__default.createElement(Box, { display: "flex", gridGap: 3 },
             src && alt && React__default.createElement("img", { src: src, alt: alt, className: classes.img }),
             React__default.createElement(Box, { flexGrow: 1 },
                 React__default.createElement(Typography, { variant: "h2", className: classes.name }, name),
-                modifiers &&
-                    modifiers.map(function (modifier, i) { return (React__default.createElement(Typography, { key: i, variant: "body2" },
-                        modifier[0],
-                        ": ",
-                        modifier[1])); }),
+                modifierGroups && formatModifiers(modifierGroups),
                 specialInstructions && React__default.createElement(Typography, { variant: "body2" },
                     "\"",
                     specialInstructions,