@popmenu/ordering-ui 0.114.0 → 0.116.0

package/build/components/DishCheckoutCard/DishCheckoutCardProps.d.ts

@@ -5,6 +5,11 @@ export interface DishCheckoutCardProps {
     modifiers?: [string, string][];
     /** Id of the dish */
     id: number;
+    /** Dish image information */
+    image: {
+        alt?: string;
+        src?: string;
+    };
     /** disables all interactive elements in the card, like "edit" or "delete" */
     disabled?: boolean;
     /** Name of the dish */

package/build/index.es.js

@@ -1541,6 +1541,15 @@ var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
     editButton: {
         color: theme.palette.info.main,
     },
+    img: {
+        objectFit: 'cover',
+        borderRadius: theme.spacing(1),
+        flexBasis: 'auto',
+        flexShrink: 0,
+        height: theme.spacing(7),
+        marginRight: theme.spacing(1),
+        overflow: 'hidden',
+    },
     name: {
         fontSize: 16,
         fontWeight: 500,
@@ -1597,10 +1606,11 @@ 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, onQuantityChange = props.onQuantityChange, price = props.price, specialInstructions = props.specialInstructions, disabled = props.disabled, warningMessage = props.warningMessage;
+    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, warningMessage = props.warningMessage, _b = props.image, image = _b === void 0 ? {} : _b;
+    var src = image.src, alt = image.alt;
     var classes = useDishCheckoutCardStyles(props);
     var appContext = useOrderingAppContext()[0];
-    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var _c = useState(false), open = _c[0], setOpen = _c[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));
@@ -1609,9 +1619,10 @@ var DishCheckoutCard = function (props) {
         return label.replace(/[^a-zA-Z\s]/g, '').toLowerCase();
     };
     return (React__default.createElement(Box, { className: classes.root },
-        React__default.createElement(Box, { display: "flex", justifyContent: "space-between", gridGap: 3 },
-            React__default.createElement(Box, null,
-                React__default.createElement(Typography, { variant: "h6", className: classes.name }, name),
+        React__default.createElement(Box, { display: "flex", gridGap: 3 },
+            src && alt && React__default.createElement("img", { src: src, alt: alt, className: classes.img }),
+            React__default.createElement(Box, { flexGrow: 1 },
+                React__default.createElement(Typography, { variant: "h2", className: classes.name }, name),
                 modifiers &&
                     modifiers.map(function (modifier, i) { return (React__default.createElement(Typography, { key: i, variant: "body2" },
                         modifier[0],
@@ -1844,6 +1855,10 @@ var SingleSelectModifierControl = function (props) {
     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) {
+        var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
+        if (!isModifierInValue && modifier.hasModifiers) {
+            handleOptionsClick(modifier.id);
+        }
         onChange({
             isRadio: true,
             modifierId: Number(e.target.value),
@@ -1857,11 +1872,7 @@ 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, onClick: function () {
-                    if (modifier.hasModifiers) {
-                        handleOptionsClick(modifier.id);
-                    }
-                } },
+            return (React__default.createElement(Box, { key: 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: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
                         modifier.outOfStock && (React__default.createElement(Box, { minWidth: "90px", marginLeft: 2 },