@popmenu/ordering-ui 0.116.0 → 0.117.0

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

@@ -8,7 +8,7 @@ export interface DishCheckoutCardProps {
     /** Dish image information */
     image: {
         alt?: string;
-        src?: string;
+        src?: string | null;
     };
     /** disables all interactive elements in the card, like "edit" or "delete" */
     disabled?: boolean;

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

@@ -57,10 +57,15 @@ export declare type DishModifierCardProps = {
     };
     /** Handles the dialog change for nested modifiers */
     handleOptionsClick: (id: number) => void;
+    /** Used by parent modifier quantity tracking: parent modifier quantity denotes requiredSelectionCount and currentSelectionCount is the total quantity of the child modifier */
+    selectionQuantity: Record<number, {
+        requiredSelectionCount: number;
+        currentSelectionCount: number;
+    }>;
 };
 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' | 'aggregatePrice'>;
+export declare type ModifierOptionsControlProps = Pick<DishModifierCardProps, 'value' | 'modifiers' | 'isOutOfStock' | 'onChange' | 'disableNewSelections' | 'type' | 'messages' | 'handleOptionsClick' | 'aggregatePrice' | 'selectionQuantity'>;
 export {};

package/build/index.es.js

@@ -1549,6 +1549,7 @@ var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
         height: theme.spacing(7),
         marginRight: theme.spacing(1),
         overflow: 'hidden',
+        width: theme.spacing(7),
     },
     name: {
         fontSize: 16,
@@ -1909,7 +1910,7 @@ var MultipleSelectControl = function (props) {
         }))));
 };
 var MultipleQuantitySelectControl = function (props) {
-    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections;
+    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity;
     var makeHandleChange = function (modifier) { return function (_e, customEvent) {
         onChange({
             isRadio: false,
@@ -1921,12 +1922,22 @@ var MultipleQuantitySelectControl = function (props) {
         });
     }; };
     return (React__default.createElement(FormControl, { fullWidth: true },
-        React__default.createElement(FormGroup, null, modifiers.map(function (modifier) { return (React__default.createElement(Box, { key: modifier.id, style: { justifyContent: 'space-between', alignItems: 'center' }, display: "flex" },
+        React__default.createElement(FormGroup, null, modifiers.map(function (modifier) { return (React__default.createElement(Box, { key: modifier.id, style: { justifyContent: 'space-between', flexDirection: 'column' }, display: "flex" },
             React__default.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
                 React__default.createElement(Label, { name: modifier.name, price: 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" }))),
-                !modifier.outOfStock && (React__default.createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock }))))); }))));
+                !modifier.outOfStock && (React__default.createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock }))),
+            React__default.createElement(Box, { display: "flex", alignItems: "flex-start", gridGap: 4 },
+                modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } })),
+                selectionQuantity[modifier.id] &&
+                    selectionQuantity[modifier.id].requiredSelectionCount > 0 &&
+                    selectionQuantity[modifier.id].requiredSelectionCount !==
+                        selectionQuantity[modifier.id].currentSelectionCount && (React__default.createElement(Typography$1, { variant: "caption", color: "error" },
+                    selectionQuantity[modifier.id].currentSelectionCount,
+                    "/",
+                    selectionQuantity[modifier.id].requiredSelectionCount,
+                    " selected"))))); }))));
 };
 var ModifierControls = function (props) {
     switch (props.type) {
@@ -1964,7 +1975,7 @@ var getStatusTagProps = function (props) {
     return { color: color, label: label, variant: variant };
 };
 var DishModifierCard = function (props) {
-    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 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, selectionQuantity = props.selectionQuantity;
     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 },
@@ -1972,7 +1983,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, aggregatePrice: aggregatePrice }))));
+            React__default.createElement(ModifierControls, { value: value, modifiers: modifiers, isOutOfStock: isOutOfStock, onChange: onChange, disableNewSelections: disableNewSelections, type: type, messages: messages, handleOptionsClick: handleOptionsClick, aggregatePrice: aggregatePrice, selectionQuantity: selectionQuantity }))));
 };
 DishModifierCard.displayName = 'DishModifierCard';