@popmenu/ordering-ui 0.84.1 → 0.85.0

package/build/index.js

@@ -192,7 +192,7 @@ var useDishCardStyles = styles.makeStyles(function (theme) { return ({
     },
 }); });
 
-var useStyles$5 = core.makeStyles(function () { return ({
+var useStyles$6 = core.makeStyles(function () { return ({
     img: {
         objectFit: 'cover',
         width: '100%',
@@ -202,7 +202,7 @@ var useStyles$5 = core.makeStyles(function () { return ({
 var MenuItemImg = function (props) {
     var _a = props.image, image = _a === void 0 ? {} : _a;
     var src = image.src, alt = image.alt;
-    var classes = useStyles$5();
+    var classes = useStyles$6();
     if (!src || !alt) {
         return null;
     }
@@ -294,6 +294,24 @@ function SvgClock(props) {
   })))));
 }
 
+var _path$13;
+
+function _extends$2r() { _extends$2r = 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$2r.apply(this, arguments); }
+
+function SvgX(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2r({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$13 || (_path$13 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M12 4l-8 8m0-8l8 8",
+    stroke: "currentColor"
+  })));
+}
+
 var _g$1m, _defs$J;
 
 function _extends$2q() { _extends$2q = 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$2q.apply(this, arguments); }
@@ -1012,7 +1030,7 @@ Link.defaultProps = {
 };
 Link.displayName = 'Link';
 
-var useStyles$4 = core.makeStyles(function (_a) {
+var useStyles$5 = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -1026,7 +1044,7 @@ var useStyles$4 = core.makeStyles(function (_a) {
 });
 var Paper = React.forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles$4(props);
+    var classes = useStyles$5(props);
     return React__default['default'].createElement(core.Paper, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
 });
 Paper.displayName = 'Paper';
@@ -1200,7 +1218,7 @@ var MenuItemReactions = function (props) {
         showReviews && React__default['default'].createElement(ReactionCounter, { icon: SvgReviews, count: reviewCount !== null && reviewCount !== void 0 ? reviewCount : 0 })));
 };
 
-var useStyles$3 = core.makeStyles(function (_a) {
+var useStyles$4 = core.makeStyles(function (_a) {
     var palette = _a.palette, spacing = _a.spacing;
     return ({
         plusIcon: {
@@ -1214,7 +1232,7 @@ var useStyles$3 = core.makeStyles(function (_a) {
     });
 });
 var MenuItemPrice = function (props) {
-    var classes = useStyles$3();
+    var classes = useStyles$4();
     return (React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center" },
         React__default['default'].createElement(core.Box, { display: "flex", className: classes.plusIcon },
             React__default['default'].createElement(Icon, { icon: SvgPlus, size: "medium" })),
@@ -1280,13 +1298,23 @@ MenuItem.displayName = 'MenuItem';
 
 var useDishCheckoutCardStyles = styles.makeStyles(function (theme) { return ({
     root: {
+        '&:first-of-type': {
+            paddingTop: 0,
+        },
+        '&:last-of-type': {
+            paddingBottom: 0,
+            borderBottom: 'none',
+        },
         color: theme.palette.grey[900],
         padding: theme.spacing(2, 0),
         display: 'flex',
         flexDirection: 'column',
         width: '100%',
         gridGap: theme.spacing(2),
-        border: '1px',
+        borderBottom: function (_a) {
+            var borderBottom = _a.borderBottom;
+            return (borderBottom ? '1px solid #E0E0E0' : 'none');
+        },
     },
     deleteButton: {
         color: theme.palette.info.main,
@@ -1294,6 +1322,11 @@ var useDishCheckoutCardStyles = styles.makeStyles(function (theme) { return ({
     editButton: {
         color: theme.palette.info.main,
     },
+    name: {
+        fontSize: 16,
+        fontWeight: 500,
+        lineHeight: '24px',
+    },
     price: {
         fontSize: '18px',
     },
@@ -1301,10 +1334,10 @@ var useDishCheckoutCardStyles = styles.makeStyles(function (theme) { return ({
         paddingLeft: 'unset',
         borderRadius: '25px',
         '& fieldset': {
-            borderColor: theme.palette.grey[900],
+            borderColor: theme.palette.grey[700],
         },
         '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            borderColor: theme.palette.grey[900],
+            borderColor: theme.palette.grey[700],
             borderWidth: '1px',
         },
         '& .MuiSelect-root': {
@@ -1340,15 +1373,18 @@ 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, onChange = props.onChange, 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;
     var classes = useDishCheckoutCardStyles(props);
     var appContext = useOrderingAppContext()[0];
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var formattedPrice = typeof price === 'number' ? "" + ((_a = appContext.currencySymbol) !== null && _a !== void 0 ? _a : '') + price.toFixed(2) : price;
+    var handleQuantityChange = function (event) {
+        return onQuantityChange(id, parseInt(event.target.value, 10));
+    };
     return (React__default['default'].createElement(core.Box, { className: classes.root },
         React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", gridGap: 3 },
             React__default['default'].createElement(core.Box, null,
-                React__default['default'].createElement(Typography, { variant: "h6" }, name),
+                React__default['default'].createElement(Typography, { variant: "h6", className: classes.name }, name),
                 modifiers &&
                     modifiers.map(function (modifier, i) { return (React__default['default'].createElement(Typography, { key: i, variant: "body2" },
                         modifier[0],
@@ -1364,7 +1400,7 @@ var DishCheckoutCard = function (props) {
                     React__default['default'].createElement(Icon, { icon: SvgTrash, size: "large" })))),
         React__default['default'].createElement(core.Box, { display: "flex", gridGap: 16, alignItems: "center" },
             React__default['default'].createElement(core.FormControl, { variant: "outlined", hiddenLabel: true },
-                React__default['default'].createElement(core.Select, { disabled: disabled, open: open, value: quantity, labelId: "select-label-" + id, onClick: function () { return setOpen(!open); }, disableUnderline: true, onChange: function (event) { return onChange(id, event.target.value); }, fullWidth: true, startAdornment: React__default['default'].createElement(core.InputAdornment, { position: "start" },
+                React__default['default'].createElement(core.Select, { disabled: disabled, open: open, value: quantity, labelId: "select-label-" + id, onClick: function () { return setOpen(!open); }, disableUnderline: true, onChange: handleQuantityChange, fullWidth: true, startAdornment: React__default['default'].createElement(core.InputAdornment, { position: "start" },
                         React__default['default'].createElement(Icon, { icon: open ? SvgChevronUp : SvgChevronDown, size: "large" })), inputProps: { shrink: false }, MenuProps: {
                         disablePortal: true,
                         anchorOrigin: {
@@ -1382,14 +1418,14 @@ var DishCheckoutCard = function (props) {
 };
 
 var DishDetailsReview = React.forwardRef(function (props) {
-    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, timeSinceCreated = props.timeSinceCreated;
+    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, createdAgo = props.createdAgo;
     return (React__default['default'].createElement(core.Box, { display: "flex" },
         React__default['default'].createElement(core.Box, { mr: 1 },
             React__default['default'].createElement(Avatar, { size: "small", src: userAvatarUrl })),
         React__default['default'].createElement(core.Box, { width: "100%" },
             React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", mb: 1 },
                 React__default['default'].createElement(Typography, { color: "grey.600", style: { display: 'flex', alignItems: 'center' } }, userName),
-                React__default['default'].createElement(Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, timeSinceCreated)),
+                React__default['default'].createElement(Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, createdAgo)),
             React__default['default'].createElement(Typography, { color: "grey.900", weight: "regular" }, content))));
 });
 DishDetailsReview.displayName = 'DishDetailsReview';
@@ -1712,11 +1748,11 @@ var LocationCard = function (props) {
                     React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between" },
                         React__default['default'].createElement(Typography, { className: classes.name }, name),
                         selected && React__default['default'].createElement(Icon, { icon: SvgCheck, size: "extra-large", className: classes.checkIcon })),
-                    React__default['default'].createElement(Typography, { className: classes.address, variant: "body2" }, address),
+                    address && (React__default['default'].createElement(Typography, { className: classes.address, variant: "body2" }, address)),
                     React__default['default'].createElement(Typography, { className: classes.distance }, distance)),
-                React__default['default'].createElement(core.Box, { className: classes.availability },
+                availability && (React__default['default'].createElement(core.Box, { className: classes.availability },
                     React__default['default'].createElement(Icon, { icon: SvgClock, size: "large" }),
-                    React__default['default'].createElement(Typography, { variant: "body2" }, availability))))));
+                    React__default['default'].createElement(Typography, { variant: "body2" }, availability)))))));
 };
 
 var _g, _defs;
@@ -1782,8 +1818,9 @@ var MenuDropdown = function (props) {
             }, className: classes.select }, menuOptions.map(function (option, index) { return (React__default['default'].createElement(core.MenuItem, { key: index, value: option.id }, option.name)); }))));
 };
 
-var useMenuFilterStyles = styles.makeStyles(function () { return ({
+var useMenuFilterStyles = styles.makeStyles(function (theme) { return ({
     triggerLabel: {
+        color: theme.palette.info.main,
         whiteSpace: 'nowrap',
     },
 }); });
@@ -1951,7 +1988,7 @@ var SelectableChipGroup = function (props) {
         React__default['default'].createElement(core.Box, { minWidth: "1px" })));
 };
 
-var useStyles$2 = core.makeStyles(function (_a) {
+var useStyles$3 = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -1969,7 +2006,7 @@ var useStyles$2 = core.makeStyles(function (_a) {
 });
 var SelectedMenuFiltersList = function (props) {
     var filters = props.filters, onChipClick = props.onChipClick;
-    var classes = useStyles$2();
+    var classes = useStyles$3();
     return (React__default['default'].createElement(React__default['default'].Fragment, null, filters.map(function (filter, index) { return (React__default['default'].createElement(core.Chip, { key: filter.name + "-" + index, classes: classes, deleteIcon: React__default['default'].createElement(SvgXCircle, null), onDelete: function (event) { return onChipClick(filter, event); }, label: React__default['default'].createElement(React__default['default'].Fragment, null,
             React__default['default'].createElement(ItemTag, { alt: filter.abbr, color: filter.color }, filter.abbr),
             React__default['default'].createElement(core.Typography, { variant: "caption" }, filter.name)) })); })));
@@ -1981,7 +2018,7 @@ var MenuSectionGroup = React.forwardRef(function (props, ref) {
 });
 MenuSectionGroup.displayName = 'MenuSectionGroup';
 
-var useStyles$1 = core.makeStyles(function () { return ({
+var useStyles$2 = core.makeStyles(function () { return ({
     title: {
         fontWeight: 400,
         fontSize: 20,
@@ -1991,7 +2028,7 @@ var useStyles$1 = core.makeStyles(function () { return ({
 
 var MenuSection = React.forwardRef(function (props, ref) {
     var name = props.name, children = props.children, restProps = __rest$1(props, ["name", "children"]);
-    var classes = useStyles$1();
+    var classes = useStyles$2();
     return (React__default['default'].createElement(core.Box, __assign$1({}, restProps, { ref: ref }, { "data-component-type": "menu-section" }),
         React__default['default'].createElement(core.Box, { marginTop: 1, marginBottom: 4 },
             React__default['default'].createElement(core.Typography, { className: classes.title }, name)),
@@ -1999,7 +2036,7 @@ var MenuSection = React.forwardRef(function (props, ref) {
 });
 MenuSection.displayName = 'MenuSection';
 
-var useStyles = core.makeStyles(function () { return ({
+var useStyles$1 = core.makeStyles(function () { return ({
     main: {
         display: 'grid',
         // tune so that 2x columns hit at the md breakpoint
@@ -2009,13 +2046,33 @@ var useStyles = core.makeStyles(function () { return ({
 }); });
 
 var MenuItemGroup = React.forwardRef(function (props, ref) {
-    var classes = useStyles();
+    var classes = useStyles$1();
     return (React__default['default'].createElement(core.Box, __assign$1({ className: classes.main }, { ref: ref }, { "data-component-type": "menu-item-group" }), props.children));
 });
 MenuItemGroup.displayName = 'MenuItemGroup';
 
 var PageSection = function (props) { return (React__default['default'].createElement(core.Box, { p: 4, borderBottom: "1px solid #E0E0E0" }, props.children)); };
 
+var useStyles = core.makeStyles(function () { return ({
+    closeButton: {
+        padding: 0,
+    },
+}); });
+var DialogTitle = function (props) {
+    var Icon = props.Icon, title = props.title, onClose = props.onClose;
+    var classes = useStyles();
+    return (React__default['default'].createElement(core.DialogTitle, null,
+        React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 16 },
+            Icon && Icon,
+            React__default['default'].createElement(core.Typography, { variant: "h6" }, title)),
+        React__default['default'].createElement(core.IconButton, { color: "inherit", className: classes.closeButton, "aria-label": "Close dialog", onClick: onClose },
+            React__default['default'].createElement(SvgX, null))));
+};
+
+var DialogSection = function (props) {
+    return (React__default['default'].createElement(core.Box, { paddingTop: 4, paddingBottom: props.borderBottom ? 4 : 0, paddingX: props.edgeToEdge ? 0 : 2, borderBottom: props.borderBottom ? '1px solid #E0E0E0' : undefined }, props.children));
+};
+
 var palette = {
     primary: {
         light: '#7B7FA3',
@@ -2055,6 +2112,36 @@ var overrides = {
         root: {
             borderRadius: 32,
             textTransform: 'none',
+            padding: '18px 16px',
+        },
+        outlined: {
+            padding: 'inherit',
+        },
+    },
+    MuiDialogTitle: {
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            borderBottom: '1px solid #E0E0E0',
+        },
+    },
+    MuiDialogContent: {
+        root: {
+            '&:first-child': {
+                paddingTop: 0,
+            },
+            paddingTop: 0,
+            paddingRight: 0,
+            paddingLeft: 0,
+            display: 'flex',
+            flexDirection: 'column',
+        },
+    },
+    MuiDialogActions: {
+        root: {
+            padding: 16,
+            boxShadow: '-4px 0px 8px 0px #0000001A',
         },
     },
 };
@@ -2063,6 +2150,9 @@ var props = {
     MuiButton: {
         disableElevation: true,
     },
+    MuiDialogTitle: {
+        disableTypography: true,
+    },
 };
 
 var fonts = ['"Poppins"', '"sans-serif"'];
@@ -2131,6 +2221,8 @@ var orderingTheme = {
 };
 
 exports.Button = Button$1;
+exports.DialogSection = DialogSection;
+exports.DialogTitle = DialogTitle;
 exports.DishCheckoutCard = DishCheckoutCard;
 exports.DishDetailsReview = DishDetailsReview;
 exports.DishModifierCard = DishModifierCard;