@popmenu/ordering-ui 0.102.0 → 0.103.1

package/build/components/DishModifierCard/DishModifierCard.styles.d.ts

@@ -2,3 +2,4 @@ export declare const useDishModifierCardStyles: (props?: any) => import("@materi
 export declare const useRadioModifierFormStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;
 export declare const useCheckboxModifierFormStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;
 export declare const useLabelStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useOptionsStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;

package/build/components/DishModifierCard/DishModifierCardProps.d.ts

@@ -3,6 +3,7 @@ export declare type ModifierValue = Pick<Modifier, 'id' | 'price'> & {
 };
 export declare type Modifier = {
     id: number;
+    hasModifiers: boolean;
     name: string;
     outOfStock: boolean;
     price: number;
@@ -44,10 +45,12 @@ export declare type DishModifierCardProps = {
         requiredText: string;
         helperText: string;
     };
+    /** Handles the dialog change for nested modifiers */
+    handleOptionsClick: (id: number) => void;
 };
 export declare type RadioModifierFormProps = Base;
 export declare type CheckboxModifierFormProps = Base & {
     disableNewSelections?: boolean;
 };
-export declare type ModifierOptionsControlProps = Pick<DishModifierCardProps, 'value' | 'modifiers' | 'isOutOfStock' | 'onChange' | 'disableNewSelections' | 'type' | 'messages'>;
+export declare type ModifierOptionsControlProps = Pick<DishModifierCardProps, 'value' | 'modifiers' | 'isOutOfStock' | 'onChange' | 'disableNewSelections' | 'type' | 'messages' | 'handleOptionsClick'>;
 export {};

package/build/index.es.js

@@ -228,6 +228,24 @@ function SvgChevronUp(props) {
   })));
 }
 
+var _path$2m;
+
+function _extends$5m() { _extends$5m = 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$5m.apply(this, arguments); }
+
+function SvgChevronRight(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$5m({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$2m || (_path$2m = /*#__PURE__*/React.createElement("path", {
+    d: "M6 12l4-4-4-4",
+    stroke: "currentColor"
+  })));
+}
+
 var _path$27;
 
 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); }
@@ -1266,9 +1284,9 @@ makeStyles$1(function () { return ({
 
 var ReactionCounter = function (props) {
     var count = props.count, icon = props.icon;
-    return (React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 6 },
-        React__default.createElement(Icon, { icon: icon, size: "large" }),
-        React__default.createElement(Typography, { variant: "body2" }, count)));
+    return (React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 6, color: "grey.900" },
+        React__default.createElement(Icon, { icon: icon, size: "large", color: "inherit" }),
+        React__default.createElement(Typography, { variant: "body2", color: "grey.900" }, count)));
 };
 
 var ReactionCounterGroup = function (props) {
@@ -1669,6 +1687,11 @@ var useLabelStyles = makeStyles(function (theme) { return ({
     price: {
         color: theme.palette.grey[700],
     },
+}); });
+var useOptionsStyles = makeStyles(function (theme) { return ({
+    options: {
+        color: theme.palette.info.main,
+    },
 }); });
 
 var useQuantityPickerStyles = makeStyles(function (theme) { return ({
@@ -1754,8 +1777,16 @@ var Label = function (props) {
             "+ ",
             price)));
 };
+var Options = function (props) {
+    var handleOptionsClick = props.handleOptionsClick, modifierId = props.modifierId;
+    var classes = useOptionsStyles();
+    return (React__default.createElement(Box, { marginLeft: 3 },
+        React__default.createElement(Button, { variation: "none", className: classes.options, onClick: function () { return handleOptionsClick(modifierId); } },
+            React__default.createElement(Typography$1, { variant: "caption" }, "OPTIONS"),
+            React__default.createElement(Icon, { icon: SvgChevronRight }))));
+};
 var SingleSelectModifierControl = function (props) {
-    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, messages = props.messages;
+    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, messages = props.messages, handleOptionsClick = props.handleOptionsClick;
     var radioClasses = useRadioModifierFormStyles();
     var makeHandleChange = function (modifier) { return function (e) {
         onChange([
@@ -1769,11 +1800,13 @@ var SingleSelectModifierControl = function (props) {
     return (React__default.createElement(FormControl, { fullWidth: true },
         React__default.createElement(RadioGroup, null, modifiers.map(function (modifier) {
             var _a;
-            return (React__default.createElement(FormControlLabel$1, { key: modifier.id, value: modifier.id, control: React__default.createElement(Radio$2, { checked: ((_a = value[0]) === null || _a === void 0 ? void 0 : _a.id) === modifier.id, className: radioClasses.radio, disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier) }), label: React__default.createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }) }));
+            return (React__default.createElement(Box, { key: modifier.id },
+                React__default.createElement(FormControlLabel$1, { key: modifier.id, value: modifier.id, control: React__default.createElement(Radio$2, { checked: ((_a = value[0]) === null || _a === void 0 ? void 0 : _a.id) === modifier.id, className: radioClasses.radio, disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier) }), label: React__default.createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }) }),
+                modifier.hasModifiers && React__default.createElement(Options, { handleOptionsClick: handleOptionsClick, modifierId: modifier.id })));
         }))));
 };
 var MultipleSelectControl = function (props) {
-    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, messages = props.messages, disableNewSelections = props.disableNewSelections;
+    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, messages = props.messages, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick;
     var classes = useCheckboxModifierFormStyles();
     var makeHandleChange = function (modifier) { return function () {
         var isModifierInValue = Boolean(value.find(function (v) { return v.id === modifier.id; }));
@@ -1785,7 +1818,11 @@ var MultipleSelectControl = function (props) {
         }
     }; };
     return (React__default.createElement(FormControl, { fullWidth: true },
-        React__default.createElement(FormGroup, null, modifiers.map(function (modifier) { return (React__default.createElement(FormControlLabel$1, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some(function (v) { return v.id === modifier.id; }), onChange: makeHandleChange(modifier), control: React__default.createElement(Checkbox$2, { className: classes.radio, disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React__default.createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }) })); }))));
+        React__default.createElement(FormGroup, null, modifiers.map(function (modifier) {
+            return (React__default.createElement(Box, { key: modifier.id },
+                React__default.createElement(FormControlLabel$1, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some(function (v) { return v.id === modifier.id; }), onChange: makeHandleChange(modifier), control: React__default.createElement(Checkbox$2, { className: classes.radio, disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React__default.createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }) }),
+                modifier.hasModifiers && React__default.createElement(Options, { handleOptionsClick: handleOptionsClick, modifierId: modifier.id })));
+        }))));
 };
 var MultipleQuantitySelectControl = function (props) {
     var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, messages = props.messages, disableNewSelections = props.disableNewSelections;
@@ -1846,7 +1883,7 @@ var getStatusTagProps = function (props) {
     return { color: color, label: label, variant: variant };
 };
 var DishModifierCard = function (props) {
-    var name = props.name, disableNewSelections = props.disableNewSelections, modifiers = props.modifiers, value = props.value, messages = props.messages, onChange = props.onChange, type = props.type, error = props.error, isOutOfStock = props.isOutOfStock;
+    var name = props.name, disableNewSelections = props.disableNewSelections, modifiers = props.modifiers, value = props.value, messages = props.messages, onChange = props.onChange, type = props.type, error = props.error, isOutOfStock = props.isOutOfStock, handleOptionsClick = props.handleOptionsClick;
     var classes = useDishModifierCardStyles();
     return (React__default.createElement(Box, { className: classes.root },
         React__default.createElement(Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
@@ -1854,7 +1891,7 @@ var DishModifierCard = function (props) {
             !isOutOfStock && (React__default.createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, messages.helperText))),
         React__default.createElement(Typography, { className: classes.name }, name),
         React__default.createElement(Box, null,
-            React__default.createElement(ModifierControls, { value: value, modifiers: modifiers, isOutOfStock: isOutOfStock, onChange: onChange, disableNewSelections: disableNewSelections, type: type, messages: messages }))));
+            React__default.createElement(ModifierControls, { value: value, modifiers: modifiers, isOutOfStock: isOutOfStock, onChange: onChange, disableNewSelections: disableNewSelections, type: type, messages: messages, handleOptionsClick: handleOptionsClick }))));
 };
 DishModifierCard.displayName = 'DishModifierCard';
 
@@ -1878,9 +1915,6 @@ var useLocationCardStyles = makeStyles(function (theme) {
                 return (selected ? selectedBackgroundColor : backgroundColor);
             },
         },
-        address: {
-            color: grey[700],
-        },
         availability: {
             color: secondary.light,
             display: 'grid',
@@ -1912,9 +1946,6 @@ var useLocationCardStyles = makeStyles(function (theme) {
             fontSize: '1.125rem',
             fontWeight: 500,
         },
-        focusHighlight: {
-            backgroundColor: 'inherit',
-        },
     };
 });
 
@@ -1926,13 +1957,13 @@ var LocationCard = function (props) {
         onClick(value);
     };
     return (React__default.createElement(Card$1, __assign$1({ className: classes.root }, muiProps),
-        React__default.createElement(CardActionArea$1, __assign$1({ onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected }, CardActionAreaProps),
+        React__default.createElement(CardActionArea$1, __assign$1({ onClick: handleClick, role: "checkbox", "aria-checked": selected }, 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),
                         selected && React__default.createElement(Icon, { icon: SvgCheck, size: "extra-large", className: classes.checkIcon })),
-                    address && (React__default.createElement(Typography, { className: classes.address, variant: "body2" }, address)),
+                    address && (React__default.createElement(Typography, { color: "grey.800", variant: "body2" }, address)),
                     React__default.createElement(Typography, { className: classes.distance }, distance)),
                 anyAvailability && (React__default.createElement(Box, { className: classes.availability },
                     React__default.createElement(Icon, { icon: SvgClock, size: "large" }),
@@ -2259,14 +2290,7 @@ var Radio = withStyles(function (_a) {
 
 var palette = {
     primary: {
-        light: '#7B7FA3',
-        main: '#2E3042',
-        dark: '#1A1D20',
-    },
-    secondary: {
-        light: '#DA777E',
-        main: '#F04649',
-        dark: '#B3212B',
+        main: '#0A202F',
     },
     info: {
         light: '#52B7FF',
@@ -2340,6 +2364,15 @@ var overrides = {
             minWidth: 'unset',
         },
     },
+    MuiCssBaseline: {
+        '@global': {
+            '*:focus-visible': {
+                outline: '2px solid #0076CB',
+                outlineOffset: '-4px',
+                borderRadius: 8,
+            },
+        },
+    },
 };
 
 var props = {