@popmenu/ordering-ui 0.104.0 → 0.106.0

package/build/components/LocationCard/LocationCardProps.d.ts

@@ -15,6 +15,10 @@ export interface LocationCardProps extends Omit<MuiCardProps, 'onClick'> {
     distance?: string;
     /** Callback for when the LocationCard is clicked */
     onClick: (value: number) => void;
+    /** Disables the card and adds out of range message */
+    outOfRange: boolean;
+    /** Message for out of range locations */
+    outOfRangeMessage: string;
     /** Sets card selection state */
     selected?: boolean;
     /** The value of a card in respects to selection state. */

package/build/index.es.js

@@ -1,4 +1,4 @@
-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, TextField, RadioGroup, FormControlLabel as FormControlLabel$1, Radio as Radio$2, FormGroup, Checkbox as Checkbox$2, useMediaQuery, Menu, 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, TextField, RadioGroup, FormControlLabel as FormControlLabel$1, Radio as Radio$2, FormGroup, Checkbox as Checkbox$2, CardContent, useMediaQuery, Menu, 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, createContext, createElement, useContext, useState } from 'react';
@@ -10,10 +10,10 @@ import '@material-ui/core/Badge';
 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';
+import '@material-ui/core/Card';
+import '@material-ui/core/CardActionArea';
 import '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
+import '@material-ui/core/CardContent';
 import '@material-ui/core/CardHeader';
 import '@material-ui/core/CardMedia';
 import MuiCheckbox from '@material-ui/core/Checkbox';
@@ -352,6 +352,31 @@ function SvgHeart(props) {
   })));
 }
 
+var _g$2l, _defs$1s;
+
+function _extends$4l() { _extends$4l = 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$4l.apply(this, arguments); }
+
+function SvgInfo(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4l({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$2l || (_g$2l = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#info_svg__clip0_8_5377)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-4V8m0-2.667h.007"
+  }))), _defs$1s || (_defs$1s = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "info_svg__clip0_8_5377"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
 var _g$2k;
 
 function _extends$4k() { _extends$4k = 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$4k.apply(this, arguments); }
@@ -1896,23 +1921,26 @@ var DishModifierCard = function (props) {
 DishModifierCard.displayName = 'DishModifierCard';
 
 var useLocationCardStyles = makeStyles(function (theme) {
-    var _a = theme.palette, info = _a.info, grey = _a.grey, secondary = _a.secondary, spacing = theme.spacing;
-    var selectedBackgroundColor = lighten(theme.palette.info.light, 0.9);
-    var backgroundColor = theme.palette.background.default;
+    var _a = theme.palette, info = _a.info, grey = _a.grey, secondary = _a.secondary, background = _a.background, spacing = theme.spacing;
+    var selectedBackgroundColor = lighten(info.light, 0.9);
+    var backgroundColor = background.default;
     return {
         root: {
-            background: '#FFF',
             border: function (_a) {
                 var selected = _a.selected;
                 return selected ? "1px solid " + info.light : '1px solid var(--surfaces-card-stroke, #E0E0E0)';
             },
             display: 'flex',
-            cursor: 'pointer',
             borderRadius: '10px',
             color: grey[900],
             backgroundColor: function (_a) {
-                var selected = _a.selected;
-                return (selected ? selectedBackgroundColor : backgroundColor);
+                var selected = _a.selected, outOfRange = _a.outOfRange;
+                return selected ? selectedBackgroundColor : outOfRange ? grey[200] : backgroundColor;
+            },
+        },
+        actionAreaFocusHighlight: {
+            '&:disabled': {
+                backgroundColor: 'inherit',
             },
         },
         availability: {
@@ -1946,30 +1974,36 @@ var useLocationCardStyles = makeStyles(function (theme) {
             fontSize: '1.125rem',
             fontWeight: 500,
         },
+        greyText: {
+            color: grey[800],
+        },
     };
 });
 
 var LocationCard = function (props) {
-    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 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, outOfRange = props.outOfRange, outOfRangeMessage = props.outOfRangeMessage, CardActionAreaProps = props.CardActionAreaProps, muiProps = __rest$1(props, ["name", "address", "distance", "generalAvailability", "pickupAvailability", "deliveryAvailability", "onClick", "selected", "value", "outOfRange", "outOfRangeMessage", "CardActionAreaProps"]);
     var classes = useLocationCardStyles(props);
     var anyAvailability = generalAvailability || pickupAvailability || deliveryAvailability;
     var handleClick = function () {
         onClick(value);
     };
-    return (React__default.createElement(Card$1, __assign$1({ className: classes.root }, muiProps),
-        React__default.createElement(CardActionArea$1, __assign$1({ onClick: handleClick, role: "checkbox", "aria-checked": selected }, CardActionAreaProps),
+    return (React__default.createElement(Card, __assign$1({ className: classes.root }, muiProps),
+        React__default.createElement(CardActionArea, __assign$1({ onClick: handleClick, role: "checkbox", "aria-checked": selected, disabled: outOfRange, classes: { focusHighlight: classes.actionAreaFocusHighlight } }, CardActionAreaProps),
             React__default.createElement(CardContent, { className: classes.content },
                 React__default.createElement(Box, { className: classes.locationInfo },
                     React__default.createElement(Box, { display: "flex", justifyContent: "space-between" },
-                        React__default.createElement(Typography, { className: classes.name }, name),
+                        React__default.createElement(Typography$1, { className: classes.name }, name),
                         selected && React__default.createElement(Icon, { icon: SvgCheck, size: "extra-large", className: classes.checkIcon })),
-                    address && (React__default.createElement(Typography, { color: "grey.800", variant: "body2" }, address)),
-                    React__default.createElement(Typography, { className: classes.distance }, distance)),
+                    address && (React__default.createElement(Typography$1, { className: classes.greyText, variant: "body2" }, address)),
+                    !outOfRange && React__default.createElement(Typography$1, { className: classes.distance }, distance)),
                 anyAvailability && (React__default.createElement(Box, { className: classes.availability },
                     React__default.createElement(Icon, { icon: SvgClock, size: "large" }),
-                    generalAvailability && (React__default.createElement(Typography, { className: classes.availabilityMessage, variant: "body2" }, generalAvailability)),
-                    pickupAvailability && (React__default.createElement(Typography, { className: classes.availabilityMessage, variant: "body2" }, pickupAvailability)),
-                    deliveryAvailability && (React__default.createElement(Typography, { className: classes.availabilityMessage, variant: "body2" }, deliveryAvailability))))))));
+                    generalAvailability && (React__default.createElement(Typography$1, { className: classes.availabilityMessage, variant: "body2" }, generalAvailability)),
+                    pickupAvailability && (React__default.createElement(Typography$1, { className: classes.availabilityMessage, variant: "body2" }, pickupAvailability)),
+                    deliveryAvailability && (React__default.createElement(Typography$1, { className: classes.availabilityMessage, variant: "body2" }, deliveryAvailability)))),
+                outOfRange && (React__default.createElement(Box, { display: "flex", gridGap: 8, alignItems: "center", color: "grey.800" },
+                    React__default.createElement(Icon, { icon: SvgInfo, size: "large", color: "inherit" }),
+                    React__default.createElement(Typography$1, { variant: "body2", className: classes.greyText }, outOfRangeMessage)))))));
 };
 
 var useMenuDropdownStyles = makeStyles(function (theme) {