@popmenu/ordering-ui 0.89.0 → 0.90.0

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

@@ -21,4 +21,6 @@ export interface DishCheckoutCardProps {
     onQuantityChange: (id: number, value: number) => void;
     /** Special instructions text */
     specialInstructions?: string | null;
+    /** If item is in cart but is not unavailable */
+    warningMessage?: string;
 }

package/build/components/MenuDropdown/MenuDropdownProps.d.ts

@@ -1,6 +1,7 @@
 export declare type MenuDropdownOption = {
     id: number | string;
     name: string;
+    isUnavailable?: boolean;
 };
 export interface MenuDropdownProps {
     /** Callback for selecting active menu  */

package/build/index.es.js

@@ -1,14 +1,14 @@
-import { Button as Button$2, makeStyles as makeStyles$1, Box, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Avatar as Avatar$1, Card, CardActionArea, FormControl, Select, InputAdornment, MenuItem as MenuItem$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$2, Radio as Radio$2, Menu, TextField, Tabs, Chip, DialogTitle as DialogTitle$1, IconButton as IconButton$1, withStyles, Switch as Switch$2 } from '@material-ui/core';
+import { Button as Button$1, makeStyles as makeStyles$1, Box, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Avatar as Avatar$1, Card, CardActionArea, FormControl, Select, InputAdornment, MenuItem as MenuItem$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$2, Radio as Radio$2, Menu, TextField, Tabs, Chip, DialogTitle as DialogTitle$1, IconButton as IconButton$1, withStyles, Switch as Switch$2 } from '@material-ui/core';
 export * from '@material-ui/core';
 import * as React from 'react';
 import React__default, { forwardRef, createElement, createContext, useContext, useState } from 'react';
-import { makeStyles, useTheme, lighten } from '@material-ui/core/styles';
+import { makeStyles, lighten } from '@material-ui/core/styles';
 import '@material-ui/lab/Alert';
 import '@material-ui/core/AppBar';
 import MuiAvatar from '@material-ui/core/Avatar';
 import '@material-ui/core/Badge';
-import MuiButton from '@material-ui/core/Button';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import '@material-ui/core/Button';
+import '@material-ui/core/CircularProgress';
 import '@material-ui/core/ButtonGroup';
 import Card$1 from '@material-ui/core/Card';
 import CardActionArea$1 from '@material-ui/core/CardActionArea';
@@ -88,7 +88,7 @@ function __rest$1(s, e) {
     return t;
 }
 
-var Button$1 = forwardRef(function (props, ref) {
+var Button = forwardRef(function (props, ref) {
     var _a = props.variation, variation = _a === void 0 ? 'primary' : _a, muiProps = __rest$1(props, ["variation"]);
     var variationProps = {};
     switch (variation) {
@@ -101,9 +101,9 @@ var Button$1 = forwardRef(function (props, ref) {
             variationProps.color = 'primary';
             break;
     }
-    return React__default.createElement(Button$2, __assign$1({}, variationProps, muiProps, { ref: ref }));
+    return React__default.createElement(Button$1, __assign$1({}, variationProps, muiProps, { ref: ref }));
 });
-Button$1.displayName = 'Button';
+Button.displayName = 'Button';
 
 var useDishCardStyles = makeStyles(function (theme) {
     var _a, _b;
@@ -431,6 +431,24 @@ function SvgTag(props) {
   })));
 }
 
+var _path$K;
+
+function _extends$1I() { _extends$1I = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1I.apply(this, arguments); }
+
+function SvgWarning(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1I({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
+    d: "M6.86 2.573L1.213 12a1.334 1.334 0 001.14 2h11.294a1.332 1.332 0 001.14-2L9.14 2.573a1.333 1.333 0 00-2.28 0v0zM8 6v2.667m0 2.667h.007",
+    stroke: "currentColor"
+  })));
+}
+
 var _path$z;
 
 function _extends$1o() { _extends$1o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1o.apply(this, arguments); }
@@ -746,7 +764,7 @@ makeStyles(function (theme) { return ({
     },
 }); });
 
-var useButtonStyles = makeStyles(function () { return ({
+makeStyles(function () { return ({
     root: {
         minWidth: 'unset',
     },
@@ -758,19 +776,6 @@ var useButtonStyles = makeStyles(function () { return ({
     },
 }); });
 
-var Button = forwardRef(function (props, ref) {
-    props.textTransform; var loading = props.loading, classesOverride = props.classes, className = props.className, muiProps = __rest(props, ["textTransform", "loading", "classes", "className"]);
-    props.classes; var styleProps = __rest(props, ["classes"]);
-    var classes = useButtonStyles(styleProps);
-    var typography = useTheme().typography;
-    var loadingIndicator = {
-        startIcon: React__default.createElement(CircularProgress, { color: "inherit", size: typography.button.fontSize }),
-        disabled: true,
-    };
-    return (React__default.createElement(MuiButton, __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames$1([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
-});
-Button.displayName = 'Button';
-
 var Checkbox$1 = forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
     var control = React__default.createElement(MuiCheckbox, __assign({ disabled: label ? undefined : disabled }, muiProps));
@@ -925,12 +930,12 @@ var useTypographyStyles = makeStyles(function (theme) {
     });
 });
 
-var Typography = forwardRef(function (props, ref) {
+var Typography = function (props) {
     props.weight; props.color; var restProps = __rest(props, ["weight", "color"]);
     var classes = useTypographyStyles(__assign({}, props));
     var variantMapping = { subtitle1: 'p' };
-    return React__default.createElement(Typography$1, __assign({ ref: ref, classes: classes, variantMapping: variantMapping }, restProps));
-});
+    return React__default.createElement(Typography$1, __assign({ classes: classes, variantMapping: variantMapping }, restProps));
+};
 Typography.displayName = 'Typography';
 Typography.defaultProps = defaultTypographyProps;
 
@@ -1457,6 +1462,11 @@ var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
     selectPaper: {
         maxHeight: theme.spacing(37),
     },
+    warning: {
+        color: theme.palette.error.main,
+        display: 'flex',
+        gridGap: theme.spacing(0.825),
+    },
 }); });
 
 var OrderingAppContext = createContext(null);
@@ -1474,7 +1484,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;
+    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;
     var classes = useDishCheckoutCardStyles(props);
     var appContext = useOrderingAppContext()[0];
     var _b = useState(false), open = _b[0], setOpen = _b[1];
@@ -1496,7 +1506,7 @@ var DishCheckoutCard = function (props) {
                     specialInstructions,
                     "\"")),
             React__default.createElement(Box, { display: "flex", gridGap: 1, height: "100%", alignItems: "center" },
-                React__default.createElement(Button$1, { disabled: disabled, className: classes.editButton, variant: "text", onClick: onEdit }, "Edit"),
+                React__default.createElement(Button, { disabled: disabled, className: classes.editButton, variant: "text", onClick: onEdit }, "Edit"),
                 React__default.createElement(IconButton, { disabled: disabled, onClick: onDelete, classes: { root: classes.deleteButton } },
                     React__default.createElement(Icon, { icon: SvgTrash, size: "large" })))),
         React__default.createElement(Box, { display: "flex", gridGap: 16, alignItems: "center" },
@@ -1515,7 +1525,11 @@ var DishCheckoutCard = function (props) {
                         getContentAnchorEl: null,
                         classes: { paper: classes.selectPaper },
                     }, className: classes.select }, Array.from({ length: 99 }, function (_, index) { return (React__default.createElement(MenuItem$1, { key: index + 1, value: index + 1 }, index + 1)); }))),
-            React__default.createElement(Typography, { className: classes.price }, formattedPrice))));
+            React__default.createElement(Typography, { className: classes.price }, formattedPrice)),
+        warningMessage && (React__default.createElement(Box, { className: classes.warning },
+            React__default.createElement(Box, { paddingTop: 0.25 },
+                React__default.createElement(Icon, { icon: SvgWarning, size: "medium" })),
+            React__default.createElement(Typography, { variant: "body2" }, warningMessage)))));
 };
 
 var DishDetailsReview = forwardRef(function (props) {
@@ -1544,15 +1558,8 @@ var useDishModifierCardStyles = makeStyles(function (theme) { return ({
         color: theme.palette.error.main,
     },
     name: {
-        fontSize: '18px',
-        width: 'max-content',
-    },
-    nameContainer: {
-        display: 'flex',
-        alignItems: 'center',
-    },
-    statusTagContainer: {
-        margin: theme.spacing(0, 2),
+        fontSize: theme.spacing(2.25),
+        marginBottom: theme.spacing(2),
     },
 }); });
 var useRadioModifierFormStyles = makeStyles(function (theme) { return ({
@@ -1673,12 +1680,10 @@ var DishModifierCard = function (props) {
             break;
     }
     return (React__default.createElement(Box, { className: classes.root },
-        React__default.createElement(Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content" },
-            React__default.createElement(Box, { className: classes.nameContainer },
-                React__default.createElement(Typography, { className: classes.name }, name),
-                React__default.createElement(Box, { className: classes.statusTagContainer },
-                    React__default.createElement(StatusTag, { variant: isRequired || isFullyOutOfStock ? 'outlined' : 'filled', label: label, color: color }))),
+        React__default.createElement(Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
+            React__default.createElement(StatusTag, { variant: isRequired || isFullyOutOfStock ? 'outlined' : 'filled', label: label, color: color }),
             !isFullyOutOfStock && (React__default.createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, helperText))),
+        React__default.createElement(Typography, { className: classes.name }, name),
         React__default.createElement(Box, null,
             React__default.createElement(FormControl, null,
                 React__default.createElement(ModifierOptionsControl, { type: type, modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isFullyOutOfStock })))));
@@ -1801,6 +1806,11 @@ var useMenuDropdownStyles = makeStyles(function (theme) {
                 alignSelf: 'start',
             },
             _a),
+        menuItem: {
+            alignItems: 'center',
+            display: 'flex',
+            gridGap: theme.spacing(1),
+        },
         select: {
             '& .MuiSelect-root': {
                 color: '#212121',
@@ -1808,6 +1818,9 @@ var useMenuDropdownStyles = makeStyles(function (theme) {
                 zIndex: 10,
             },
         },
+        unavailable: {
+            color: theme.palette.grey[700],
+        },
     });
 });
 
@@ -1829,7 +1842,9 @@ var MenuDropdown = function (props) {
                     horizontal: 'left',
                 },
                 getContentAnchorEl: null,
-            }, className: classes.select }, menuOptions.map(function (option, index) { return (React__default.createElement(MenuItem$1, { key: index, value: option.id }, option.name)); }))));
+            }, className: classes.select, renderValue: function (selected) { var _a; return (_a = menuOptions.find(function (menuOption) { return menuOption.id === selected; })) === null || _a === void 0 ? void 0 : _a.name; } }, menuOptions.map(function (option, index) { return (React__default.createElement(MenuItem$1, { key: index, value: option.id, className: classNames(classes.menuItem, option.isUnavailable ? classes.unavailable : '') },
+            option.name,
+            option.isUnavailable && React__default.createElement(Icon, { icon: SvgClock, size: "large" }))); }))));
 };
 
 var useMenuFilterStyles = makeStyles(function (theme) { return ({
@@ -1878,7 +1893,7 @@ var MenuFilter = function (props) {
         setAnchorEl(null);
     };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Button$2, { id: triggerId, "aria-controls": popoverId, "aria-haspopup": "true", "aria-expanded": open, onClick: handleTriggerClick, size: "small", startIcon: React__default.createElement(SvgLeafIcon, null), classes: { label: classes.triggerLabel } }, triggerLabel),
+        React__default.createElement(Button$1, { id: triggerId, "aria-controls": popoverId, "aria-haspopup": "true", "aria-expanded": open, onClick: handleTriggerClick, size: "small", startIcon: React__default.createElement(SvgLeafIcon, null), classes: { label: classes.triggerLabel } }, triggerLabel),
         React__default.createElement(Menu, { id: popoverId, anchorEl: anchorEl, open: open, onClose: handleClose },
             availableFilters.map(function (option, index) {
                 return (React__default.createElement(MenuItem$1, { key: index, value: option.id, onClick: function (event) { return handleChange(option, event); } },
@@ -2303,5 +2318,5 @@ var orderingTheme = {
     props: props,
 };
 
-export { Button$1 as Button, Checkbox, DialogSection, DialogTitle, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuDropdown, MenuFilter, MenuItem, MenuItemGroup, MenuSection, MenuSectionGroup, OrderingAppContext, OrderingAppContextProvider, PageSection, QuantityPicker, Radio, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, SelectedMenuFiltersList, StatusTag, Switch, orderingTheme, useOrderingAppContext };
+export { Button, Checkbox, DialogSection, DialogTitle, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuDropdown, MenuFilter, MenuItem, MenuItemGroup, MenuSection, MenuSectionGroup, OrderingAppContext, OrderingAppContextProvider, PageSection, QuantityPicker, Radio, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, SelectedMenuFiltersList, StatusTag, Switch, orderingTheme, useOrderingAppContext };
 //# sourceMappingURL=index.es.js.map