@popmenu/ordering-ui 0.99.0 → 0.100.0

package/build/index.js

@@ -1414,6 +1414,10 @@ var useStatusTagStyles = styles.makeStyles(function (theme) { return ({
         borderColor: theme.palette.error.main,
         color: theme.palette.error.main,
     },
+    highlight: {
+        backgroundColor: theme.palette.warning.light,
+        color: theme.palette.grey[900],
+    },
 }); });
 
 var classnames = {exports: {}};
@@ -1489,7 +1493,7 @@ StatusTag.defaultProps = {
 StatusTag.displayName = 'StatusTag';
 
 var MenuItem = React.forwardRef(function (props, ref) {
-    var onClick = props.onClick, id = props.id, description = props.description, isOutOfStock = props.isOutOfStock, title = props.title, loading = props.loading;
+    var onClick = props.onClick, id = props.id, description = props.description, isOutOfStock = props.isOutOfStock, title = props.title, loading = props.loading, isFeatured = props.isFeatured;
     var classes = useMenuItemStyles(props);
     var handleClick = function (event) {
         onClick(id, event);
@@ -1497,6 +1501,7 @@ var MenuItem = React.forwardRef(function (props, ref) {
     return (React__default['default'].createElement(core.Card, { className: classes.card, ref: ref, elevation: 0, "data-component-type": "menu-item" },
         React__default['default'].createElement(core.CardActionArea, { className: classes.cardActionArea, onClick: handleClick, disabled: loading },
             React__default['default'].createElement(MenuItemInfo, null,
+                isFeatured && React__default['default'].createElement(StatusTag, { color: "highlight", label: "Featured", variant: "outlined", size: "sm" }),
                 React__default['default'].createElement(core.Box, { display: "flex", gridGap: 8, alignItems: "center" },
                     React__default['default'].createElement(core.Typography, { className: classes.cardTitle }, loading ? React__default['default'].createElement(lab.Skeleton, null) : title),
                     isOutOfStock && React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "sm" })),
@@ -1918,8 +1923,12 @@ var useLocationCardStyles = styles.makeStyles(function (theme) {
         },
         availability: {
             color: secondary.light,
-            display: 'flex',
+            display: 'grid',
             gridGap: spacing(0.5),
+            gridTemplateColumns: 'auto 1fr',
+        },
+        availabilityMessage: {
+            gridColumn: '2 / 3',
         },
         checkIcon: {
             color: info.main,
@@ -1950,13 +1959,14 @@ var useLocationCardStyles = styles.makeStyles(function (theme) {
 });
 
 var LocationCard = function (props) {
-    var name = props.name, address = props.address, distance = props.distance, availability = props.availability, onClick = props.onClick, selected = props.selected, value = props.value, labelId = props.labelId, CardActionAreaProps = props.CardActionAreaProps, muiProps = __rest$1(props, ["name", "address", "distance", "availability", "onClick", "selected", "value", "labelId", "CardActionAreaProps"]);
+    var name = props.name, address = props.address, distance = props.distance, generalAvailability = props.generalAvailability, pickupAvailability = props.pickupAvailability, deliveryAvailability = props.deliveryAvailability, onClick = props.onClick, selected = props.selected, value = props.value, CardActionAreaProps = props.CardActionAreaProps, muiProps = __rest$1(props, ["name", "address", "distance", "generalAvailability", "pickupAvailability", "deliveryAvailability", "onClick", "selected", "value", "CardActionAreaProps"]);
     var classes = useLocationCardStyles(props);
+    var anyAvailability = generalAvailability || pickupAvailability || deliveryAvailability;
     var handleClick = function () {
         onClick(value);
     };
     return (React__default['default'].createElement(Card__default['default'], __assign$1({ className: classes.root }, muiProps),
-        React__default['default'].createElement(CardActionArea__default['default'], __assign$1({ onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected, "aria-labelledby": labelId }, CardActionAreaProps),
+        React__default['default'].createElement(CardActionArea__default['default'], __assign$1({ onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected }, CardActionAreaProps),
             React__default['default'].createElement(CardContent__default['default'], { className: classes.content },
                 React__default['default'].createElement(core.Box, { className: classes.locationInfo },
                     React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between" },
@@ -1964,9 +1974,11 @@ var LocationCard = function (props) {
                         selected && React__default['default'].createElement(Icon, { icon: SvgCheck, size: "extra-large", className: classes.checkIcon })),
                     address && (React__default['default'].createElement(Typography, { className: classes.address, variant: "body2" }, address)),
                     React__default['default'].createElement(Typography, { className: classes.distance }, distance)),
-                availability && (React__default['default'].createElement(core.Box, { className: classes.availability },
+                anyAvailability && (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)))))));
+                    generalAvailability && (React__default['default'].createElement(Typography, { className: classes.availabilityMessage, variant: "body2" }, generalAvailability)),
+                    pickupAvailability && (React__default['default'].createElement(Typography, { className: classes.availabilityMessage, variant: "body2" }, pickupAvailability)),
+                    deliveryAvailability && (React__default['default'].createElement(Typography, { className: classes.availabilityMessage, variant: "body2" }, deliveryAvailability))))))));
 };
 
 var useMenuDropdownStyles = styles.makeStyles(function (theme) {