@popmenu/ordering-ui 0.113.5 → 0.114.0

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

@@ -28,6 +28,8 @@ interface Base {
     isOutOfStock: boolean;
 }
 export declare type DishModifierCardProps = {
+    /** Aggregate price of the modifier and its nested children modifiers */
+    aggregatePrice: Record<number, string>;
     /** Modifier options */
     modifiers: Array<Modifier>;
     /** The values of the modifier form */
@@ -60,5 +62,5 @@ 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' | 'handleOptionsClick'>;
+export declare type ModifierOptionsControlProps = Pick<DishModifierCardProps, 'value' | 'modifiers' | 'isOutOfStock' | 'onChange' | 'disableNewSelections' | 'type' | 'messages' | 'handleOptionsClick' | 'aggregatePrice'>;
 export {};

package/build/components/ReactionCounter/ReactionCounterProps.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export interface ReactionCounterProps {
     count: number;
     icon: string | React.FC<React.SVGProps<SVGSVGElement>>;
+    label: string;
 }

package/build/index.es.js

@@ -1309,9 +1309,9 @@ makeStyles$1(function () { return ({
 }); });
 
 var ReactionCounter = function (props) {
-    var count = props.count, icon = props.icon;
+    var count = props.count, icon = props.icon, label = props.label;
     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(Icon, { icon: icon, size: "large", color: "inherit", "aria-label": label }),
         React__default.createElement(Typography, { variant: "body2", color: "grey.900" }, count)));
 };
 
@@ -1325,8 +1325,8 @@ var MenuItemReactions = function (props) {
     var showLikes = likeCount ? likeCount > 0 : false;
     var showReviews = reviewCount ? reviewCount > 0 : false;
     return (React__default.createElement(ReactionCounterGroup, null,
-        showLikes && React__default.createElement(ReactionCounter, { icon: SvgHeart, count: likeCount !== null && likeCount !== void 0 ? likeCount : 0 }),
-        showReviews && React__default.createElement(ReactionCounter, { icon: SvgReviews, count: reviewCount !== null && reviewCount !== void 0 ? reviewCount : 0 })));
+        showLikes && React__default.createElement(ReactionCounter, { icon: SvgHeart, count: likeCount !== null && likeCount !== void 0 ? likeCount : 0, label: "likes" }),
+        showReviews && React__default.createElement(ReactionCounter, { icon: SvgReviews, count: reviewCount !== null && reviewCount !== void 0 ? reviewCount : 0, label: "reviews" })));
 };
 
 var useStyles$5 = makeStyles$1(function (_a) {
@@ -1744,6 +1744,8 @@ var useLabelStyles = makeStyles(function (theme) { return ({
 var useOptionsStyles = makeStyles(function (theme) { return ({
     options: {
         color: theme.palette.info.main,
+        marginBottom: theme.spacing(1.5),
+        padding: 0,
     },
 }); });
 
@@ -1831,15 +1833,15 @@ var Label = function (props) {
             price))));
 };
 var Options = function (props) {
-    var handleOptionsClick = props.handleOptionsClick, modifierId = props.modifierId;
+    var handleOptionsClick = props.handleOptionsClick;
     var classes = useOptionsStyles();
-    return (React__default.createElement(Box, { marginLeft: 3 },
-        React__default.createElement(Button, { variation: "none", className: classes.options, onClick: function () { return handleOptionsClick(modifierId); } },
+    return (React__default.createElement(Box, null,
+        React__default.createElement(Button, { variation: "none", className: classes.options, onClick: handleOptionsClick },
             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, handleOptionsClick = props.handleOptionsClick;
+    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice;
     var radioClasses = useRadioModifierFormStyles();
     var makeHandleChange = function (modifier) { return function (e) {
         onChange({
@@ -1855,19 +1857,26 @@ var SingleSelectModifierControl = function (props) {
         React__default.createElement(RadioGroup, null, modifiers.map(function (modifier) {
             var _a, _b;
             var _c;
-            return (React__default.createElement(Box, { key: modifier.id },
+            return (React__default.createElement(Box, { key: modifier.id, onClick: function () {
+                    if (modifier.hasModifiers) {
+                        handleOptionsClick(modifier.id);
+                    }
+                } },
                 React__default.createElement(FormControlLabel$1, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React__default.createElement(Radio$2, { checked: ((_c = value[0]) === null || _c === void 0 ? void 0 : _c.modifierId) === modifier.id, className: classNames((_a = {}, _a[radioClasses.hideRadio] = modifier.outOfStock, _a), (_b = {}, _b[radioClasses.radio] = !modifier.outOfStock, _b)), disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier) }), label: React__default.createElement(Box, { className: radioClasses.label },
-                        React__default.createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                        React__default.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
                         modifier.outOfStock && (React__default.createElement(Box, { minWidth: "90px", marginLeft: 2 },
                             React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
-                modifier.hasModifiers && React__default.createElement(Options, { handleOptionsClick: handleOptionsClick, modifierId: modifier.id })));
+                modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } }))));
         }))));
 };
 var MultipleSelectControl = function (props) {
-    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick;
+    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice;
     var classes = useCheckboxModifierFormStyles();
     var makeHandleChange = function (modifier) { return function () {
         var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
+        if (!isModifierInValue && modifier.hasModifiers) {
+            handleOptionsClick(modifier.id);
+        }
         onChange({
             isRadio: false,
             modifierId: modifier.id,
@@ -1882,10 +1891,10 @@ var MultipleSelectControl = function (props) {
             var _a, _b;
             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.modifierId === modifier.id; }), onChange: makeHandleChange(modifier), control: React__default.createElement(Checkbox$2, { className: classNames((_a = {}, _a[classes.hideCheckbox] = modifier.outOfStock, _a), (_b = {}, _b[classes.checkbox] = !modifier.outOfStock, _b)), disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React__default.createElement(Box, { className: classes.label },
-                        React__default.createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                        React__default.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
                         modifier.outOfStock && (React__default.createElement(Box, { minWidth: "90px", marginLeft: 2 },
                             React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
-                modifier.hasModifiers && React__default.createElement(Options, { handleOptionsClick: handleOptionsClick, modifierId: modifier.id })));
+                modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } }))));
         }))));
 };
 var MultipleQuantitySelectControl = function (props) {
@@ -1944,7 +1953,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, handleOptionsClick = props.handleOptionsClick;
+    var aggregatePrice = props.aggregatePrice, 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 },
@@ -1952,7 +1961,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, handleOptionsClick: handleOptionsClick }))));
+            React__default.createElement(ModifierControls, { value: value, modifiers: modifiers, isOutOfStock: isOutOfStock, onChange: onChange, disableNewSelections: disableNewSelections, type: type, messages: messages, handleOptionsClick: handleOptionsClick, aggregatePrice: aggregatePrice }))));
 };
 DishModifierCard.displayName = 'DishModifierCard';
 
@@ -2175,6 +2184,7 @@ var useSelectableChipStyles = makeStyles(function (theme) { return ({
         color: theme.palette.grey[900],
         padding: theme.spacing(1, 2),
         fontSize: '0.875rem',
+        fontWeight: 400,
         minWidth: 'unset',
         minHeight: 'unset',
         opacity: 'unset',
@@ -2187,6 +2197,7 @@ var useSelectableChipStyles = makeStyles(function (theme) { return ({
             backgroundColor: theme.palette.grey[100],
             borderColor: '#0A202F',
             color: theme.palette.grey[900],
+            fontWeight: 400,
             '&:hover': {
                 background: theme.palette.grey[100],
             },