@popmenu/ordering-ui 0.89.0 → 0.90.0

package/build/index.js

@@ -9,8 +9,8 @@ require('@material-ui/lab/Alert');
 require('@material-ui/core/AppBar');
 var MuiAvatar = require('@material-ui/core/Avatar');
 require('@material-ui/core/Badge');
-var MuiButton = require('@material-ui/core/Button');
-var CircularProgress = require('@material-ui/core/CircularProgress');
+require('@material-ui/core/Button');
+require('@material-ui/core/CircularProgress');
 require('@material-ui/core/ButtonGroup');
 var Card = require('@material-ui/core/Card');
 var CardActionArea = require('@material-ui/core/CardActionArea');
@@ -77,8 +77,6 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var MuiAvatar__default = /*#__PURE__*/_interopDefaultLegacy(MuiAvatar);
-var MuiButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiButton);
-var CircularProgress__default = /*#__PURE__*/_interopDefaultLegacy(CircularProgress);
 var Card__default = /*#__PURE__*/_interopDefaultLegacy(Card);
 var CardActionArea__default = /*#__PURE__*/_interopDefaultLegacy(CardActionArea);
 var CardContent__default = /*#__PURE__*/_interopDefaultLegacy(CardContent);
@@ -131,7 +129,7 @@ function __rest$1(s, e) {
     return t;
 }
 
-var Button$1 = React.forwardRef(function (props, ref) {
+var Button = React.forwardRef(function (props, ref) {
     var _a = props.variation, variation = _a === void 0 ? 'primary' : _a, muiProps = __rest$1(props, ["variation"]);
     var variationProps = {};
     switch (variation) {
@@ -146,7 +144,7 @@ var Button$1 = React.forwardRef(function (props, ref) {
     }
     return React__default['default'].createElement(core.Button, __assign$1({}, variationProps, muiProps, { ref: ref }));
 });
-Button$1.displayName = 'Button';
+Button.displayName = 'Button';
 
 var useDishCardStyles = styles.makeStyles(function (theme) {
     var _a, _b;
@@ -474,6 +472,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__namespace.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__namespace.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); }
@@ -789,7 +805,7 @@ styles.makeStyles(function (theme) { return ({
     },
 }); });
 
-var useButtonStyles = styles.makeStyles(function () { return ({
+styles.makeStyles(function () { return ({
     root: {
         minWidth: 'unset',
     },
@@ -801,19 +817,6 @@ var useButtonStyles = styles.makeStyles(function () { return ({
     },
 }); });
 
-var Button = React.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 = styles.useTheme().typography;
-    var loadingIndicator = {
-        startIcon: React__default['default'].createElement(CircularProgress__default['default'], { color: "inherit", size: typography.button.fontSize }),
-        disabled: true,
-    };
-    return (React__default['default'].createElement(MuiButton__default['default'], __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames$1([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
-});
-Button.displayName = 'Button';
-
 var Checkbox$1 = React.forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
     var control = React__default['default'].createElement(MuiCheckbox__default['default'], __assign({ disabled: label ? undefined : disabled }, muiProps));
@@ -968,12 +971,12 @@ var useTypographyStyles = styles.makeStyles(function (theme) {
     });
 });
 
-var Typography = React.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['default'].createElement(core.Typography, __assign({ ref: ref, classes: classes, variantMapping: variantMapping }, restProps));
-});
+    return React__default['default'].createElement(core.Typography, __assign({ classes: classes, variantMapping: variantMapping }, restProps));
+};
 Typography.displayName = 'Typography';
 Typography.defaultProps = defaultTypographyProps;
 
@@ -1500,6 +1503,11 @@ var useDishCheckoutCardStyles = styles.makeStyles(function (theme) { return ({
     selectPaper: {
         maxHeight: theme.spacing(37),
     },
+    warning: {
+        color: theme.palette.error.main,
+        display: 'flex',
+        gridGap: theme.spacing(0.825),
+    },
 }); });
 
 var OrderingAppContext = React.createContext(null);
@@ -1517,7 +1525,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 = React.useState(false), open = _b[0], setOpen = _b[1];
@@ -1539,7 +1547,7 @@ var DishCheckoutCard = function (props) {
                     specialInstructions,
                     "\"")),
             React__default['default'].createElement(core.Box, { display: "flex", gridGap: 1, height: "100%", alignItems: "center" },
-                React__default['default'].createElement(Button$1, { disabled: disabled, className: classes.editButton, variant: "text", onClick: onEdit }, "Edit"),
+                React__default['default'].createElement(Button, { disabled: disabled, className: classes.editButton, variant: "text", onClick: onEdit }, "Edit"),
                 React__default['default'].createElement(IconButton, { disabled: disabled, onClick: onDelete, classes: { root: classes.deleteButton } },
                     React__default['default'].createElement(Icon, { icon: SvgTrash, size: "large" })))),
         React__default['default'].createElement(core.Box, { display: "flex", gridGap: 16, alignItems: "center" },
@@ -1558,7 +1566,11 @@ var DishCheckoutCard = function (props) {
                         getContentAnchorEl: null,
                         classes: { paper: classes.selectPaper },
                     }, className: classes.select }, Array.from({ length: 99 }, function (_, index) { return (React__default['default'].createElement(core.MenuItem, { key: index + 1, value: index + 1 }, index + 1)); }))),
-            React__default['default'].createElement(Typography, { className: classes.price }, formattedPrice))));
+            React__default['default'].createElement(Typography, { className: classes.price }, formattedPrice)),
+        warningMessage && (React__default['default'].createElement(core.Box, { className: classes.warning },
+            React__default['default'].createElement(core.Box, { paddingTop: 0.25 },
+                React__default['default'].createElement(Icon, { icon: SvgWarning, size: "medium" })),
+            React__default['default'].createElement(Typography, { variant: "body2" }, warningMessage)))));
 };
 
 var DishDetailsReview = React.forwardRef(function (props) {
@@ -1587,15 +1599,8 @@ var useDishModifierCardStyles = styles.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 = styles.makeStyles(function (theme) { return ({
@@ -1716,12 +1721,10 @@ var DishModifierCard = function (props) {
             break;
     }
     return (React__default['default'].createElement(core.Box, { className: classes.root },
-        React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content" },
-            React__default['default'].createElement(core.Box, { className: classes.nameContainer },
-                React__default['default'].createElement(Typography, { className: classes.name }, name),
-                React__default['default'].createElement(core.Box, { className: classes.statusTagContainer },
-                    React__default['default'].createElement(StatusTag, { variant: isRequired || isFullyOutOfStock ? 'outlined' : 'filled', label: label, color: color }))),
+        React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
+            React__default['default'].createElement(StatusTag, { variant: isRequired || isFullyOutOfStock ? 'outlined' : 'filled', label: label, color: color }),
             !isFullyOutOfStock && (React__default['default'].createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, helperText))),
+        React__default['default'].createElement(Typography, { className: classes.name }, name),
         React__default['default'].createElement(core.Box, null,
             React__default['default'].createElement(core.FormControl, null,
                 React__default['default'].createElement(ModifierOptionsControl, { type: type, modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isFullyOutOfStock })))));
@@ -1844,6 +1847,11 @@ var useMenuDropdownStyles = styles.makeStyles(function (theme) {
                 alignSelf: 'start',
             },
             _a),
+        menuItem: {
+            alignItems: 'center',
+            display: 'flex',
+            gridGap: theme.spacing(1),
+        },
         select: {
             '& .MuiSelect-root': {
                 color: '#212121',
@@ -1851,6 +1859,9 @@ var useMenuDropdownStyles = styles.makeStyles(function (theme) {
                 zIndex: 10,
             },
         },
+        unavailable: {
+            color: theme.palette.grey[700],
+        },
     });
 });
 
@@ -1872,7 +1883,9 @@ var MenuDropdown = function (props) {
                     horizontal: 'left',
                 },
                 getContentAnchorEl: null,
-            }, className: classes.select }, menuOptions.map(function (option, index) { return (React__default['default'].createElement(core.MenuItem, { 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['default'].createElement(core.MenuItem, { key: index, value: option.id, className: classNames(classes.menuItem, option.isUnavailable ? classes.unavailable : '') },
+            option.name,
+            option.isUnavailable && React__default['default'].createElement(Icon, { icon: SvgClock, size: "large" }))); }))));
 };
 
 var useMenuFilterStyles = styles.makeStyles(function (theme) { return ({
@@ -2346,7 +2359,7 @@ var orderingTheme = {
     props: props,
 };
 
-exports.Button = Button$1;
+exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.DialogSection = DialogSection;
 exports.DialogTitle = DialogTitle;