@popmenu/ordering-ui 0.118.0 → 0.120.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,13 @@ 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;
+    selectedModifierGroups?: ModifierGroupsType[];
+};

package/build/components/MenuItem/MenuItem.styles.d.ts

@@ -1 +1 @@
-export declare const useMenuItemStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"cardActionArea" | "card" | "cardTitle" | "cardDescription">;
+export declare const useMenuItemStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"cardActionArea" | "card" | "cardTitle" | "cardDescription" | "outOfStockTag">;

package/build/index.es.js

@@ -150,7 +150,7 @@ var useMenuItemStyles = 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',
@@ -158,6 +158,12 @@ var useMenuItemStyles = makeStyles(function (theme) {
             textOverflow: 'ellipsis',
             overflow: 'hidden',
         },
+        outOfStockTag: {
+            minWidth: '90px',
+            marginLeft: theme.spacing(1),
+            display: 'inline-block',
+            verticalAlign: 'bottom',
+        },
     });
 });
 
@@ -1503,8 +1509,9 @@ var MenuItem = forwardRef(function (props, ref) {
             React__default.createElement(MenuItemInfo, null,
                 isFeatured && React__default.createElement(StatusTag, { color: "highlight", label: "Featured", variant: "filled", size: "sm" }),
                 React__default.createElement(Box, { display: "flex", gridGap: 8, alignItems: "center" },
-                    React__default.createElement(Typography$1, { component: "h3", className: classes.cardTitle }, loading ? React__default.createElement(Skeleton, null) : title),
-                    isOutOfStock && React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "sm" })),
+                    React__default.createElement(Typography$1, { component: "h3", className: classes.cardTitle },
+                        loading ? React__default.createElement(Skeleton, null) : title,
+                        React__default.createElement("span", { className: classes.outOfStockTag }, isOutOfStock && React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "sm" })))),
                 React__default.createElement(Typography$1, { className: classes.cardDescription, paragraph: true }, loading ? React__default.createElement(Skeleton, null) : description),
                 loading ? (React__default.createElement(Skeleton, null,
                     React__default.createElement(MenuItemReactions, { likeCount: likeCount, reviewCount: reviewCount }))) : (React__default.createElement(MenuItemReactions, { likeCount: likeCount, reviewCount: reviewCount })),
@@ -1585,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',
@@ -1607,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];
@@ -1619,16 +1630,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.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,
@@ -1959,8 +1995,10 @@ var getStatusTagProps = function (props) {
     switch (true) {
         case error:
             color = 'error';
+            break;
         case isOutOfStock:
             color = 'warning';
+            break;
     }
     var label = optionalText;
     switch (true) {