@popmenu/ordering-ui 0.84.0 → 0.84.2

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

@@ -9,14 +9,14 @@ export interface DishCheckoutCardProps {
     name: string;
     /** Quantity of dish selected */
     quantity: number;
-    /** Price of description should be formatted in the correct currency before passing as a prop */
+    /** Price of an item. numbers will be prepended with the currencySymbol from OrderingAppContext. */
     price: number | string;
     /** Callback for edit button */
     onEdit: () => void;
     /** Callback for delete button */
     onDelete: () => void;
-    /** Callback that runs when the select value is changed. Expects two arguments, the id of the selected dish and the new value that is being changed from the dropdown. Callback should update the dish */
-    onChange: (id: number, value: number | string) => void;
+    /** Callback for change of select element */
+    onQuantityChange: (id: number, value: number) => void;
     /** Special instructions text */
     specialInstructions?: string | null;
 }

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

@@ -1,3 +1,4 @@
 export declare const useDishModifierCardStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;
 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>;

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

@@ -16,6 +16,7 @@ interface Base {
     value: Array<ModifierValue> | undefined;
     /** Handles the change event */
     onChange: OnChange;
+    isOutOfStock: boolean;
 }
 export declare type DishModifierCardProps = Base & {
     /** Name of the modifier */

package/build/index.es.js

@@ -1297,11 +1297,14 @@ 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, onChange = props.onChange, price = props.price, specialInstructions = props.specialInstructions, disabled = props.disabled;
+    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;
     var classes = useDishCheckoutCardStyles(props);
     var appContext = useOrderingAppContext()[0];
     var _b = useState(false), open = _b[0], setOpen = _b[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));
+    };
     return (React__default.createElement(Box, { className: classes.root },
         React__default.createElement(Box, { display: "flex", justifyContent: "space-between", gridGap: 3 },
             React__default.createElement(Box, null,
@@ -1321,7 +1324,7 @@ var DishCheckoutCard = function (props) {
                     React__default.createElement(Icon, { icon: SvgTrash, size: "large" })))),
         React__default.createElement(Box, { display: "flex", gridGap: 16, alignItems: "center" },
             React__default.createElement(FormControl, { variant: "outlined", hiddenLabel: true },
-                React__default.createElement(Select, { disabled: disabled, open: open, value: quantity, labelId: "select-label-" + id, onClick: function () { return setOpen(!open); }, disableUnderline: true, onChange: function (event) { return onChange(id, event.target.value); }, fullWidth: true, startAdornment: React__default.createElement(InputAdornment, { position: "start" },
+                React__default.createElement(Select, { disabled: disabled, open: open, value: quantity, labelId: "select-label-" + id, onClick: function () { return setOpen(!open); }, disableUnderline: true, onChange: handleQuantityChange, fullWidth: true, startAdornment: React__default.createElement(InputAdornment, { position: "start" },
                         React__default.createElement(Icon, { icon: open ? SvgChevronUp : SvgChevronDown, size: "large" })), inputProps: { shrink: false }, MenuProps: {
                         disablePortal: true,
                         anchorOrigin: {
@@ -1376,14 +1379,6 @@ var useDishModifierCardStyles = makeStyles(function (theme) { return ({
     },
 }); });
 var useRadioModifierFormStyles = makeStyles(function (theme) { return ({
-    root: {
-        '& .MuiFormControlLabel-label': {
-            margin: theme.spacing(0.5, 0),
-            '& div p:nth-child(2)': {
-                color: theme.palette.grey[700],
-            },
-        },
-    },
     radio: {
         fontSize: theme.spacing(2),
         padding: 'unset',
@@ -1394,14 +1389,6 @@ var useRadioModifierFormStyles = makeStyles(function (theme) { return ({
     },
 }); });
 var useCheckboxModifierFormStyles = makeStyles(function (theme) { return ({
-    root: {
-        '& .MuiFormControlLabel-label': {
-            margin: theme.spacing(0.5, 0),
-        },
-        '&:not(.Mui-disabled) div p:nth-child(2)': {
-            color: theme.palette.grey[700],
-        },
-    },
     radio: {
         color: '#616161',
         fontSize: theme.spacing(2),
@@ -1411,6 +1398,14 @@ var useCheckboxModifierFormStyles = makeStyles(function (theme) { return ({
             color: theme.palette.info.main,
         },
     },
+}); });
+var useLabelStyles = makeStyles(function (theme) { return ({
+    label: {
+        margin: theme.spacing(0.5, 0),
+    },
+    price: {
+        color: theme.palette.grey[700],
+    },
 }); });
 
 var useStatusTagStyles = makeStyles(function (theme) { return ({
@@ -1515,15 +1510,16 @@ StatusTag.defaultProps = {
 StatusTag.displayName = 'StatusTag';
 
 var Label = function (props) {
-    var name = props.name, price = props.price;
-    return (React__default.createElement(Box, { display: "flex", flexDirection: "column" },
+    var name = props.name, price = props.price, disabled = props.disabled;
+    var classes = useLabelStyles();
+    return (React__default.createElement(Box, { display: "flex", flexDirection: "column", className: classes.label },
         React__default.createElement(Typography$1, null, name),
-        price && React__default.createElement(Typography$1, null,
+        price && React__default.createElement(Typography$1, { className: !disabled ? classes.price : '' },
             "+ ",
             price)));
 };
 var CheckboxGroup = function (props) {
-    var value = props.value, modifiers = props.modifiers, onChange = props.onChange, disableNewSelections = props.disableNewSelections;
+    var value = props.value, modifiers = props.modifiers, onChange = props.onChange, disableNewSelections = props.disableNewSelections, isOutOfStock = props.isOutOfStock;
     var classes = useCheckboxModifierFormStyles();
     var appContext = useOrderingAppContext()[0];
     var handleChange = function (event) {
@@ -1539,13 +1535,13 @@ var CheckboxGroup = function (props) {
     };
     return (React__default.createElement(Box, { display: "flex", flexDirection: "column" }, modifiers.map(function (modifier, index) {
         var targetValue = value === null || value === void 0 ? void 0 : value.find(function (v) { return v.id == modifier.id; });
-        return (React__default.createElement(FormControlLabel$1, { key: index, value: modifier.id, control: React__default.createElement(Checkbox$1, { className: classes.radio, disabled: !targetValue && disableNewSelections }), label: React__default.createElement(Label, { name: modifier.name, price: modifier.price
+        return (React__default.createElement(FormControlLabel$1, { key: index, value: modifier.id, control: React__default.createElement(Checkbox$1, { className: classes.radio, disabled: (!targetValue && disableNewSelections) || isOutOfStock }), label: React__default.createElement(Label, { name: modifier.name, price: modifier.price
                     ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2)
-                    : null }), className: classes.root, checked: !!targetValue, onChange: handleChange }));
+                    : null, disabled: isOutOfStock }), className: classes.root, checked: !!targetValue, onChange: handleChange }));
     })));
 };
 var RadioGroup = function (props) {
-    var value = props.value, modifiers = props.modifiers, onChange = props.onChange;
+    var value = props.value, modifiers = props.modifiers, onChange = props.onChange, isOutOfStock = props.isOutOfStock;
     var classes = useRadioModifierFormStyles();
     var appContext = useOrderingAppContext()[0];
     var handleChange = function (event) {
@@ -1559,16 +1555,16 @@ var RadioGroup = function (props) {
             },
         ]);
     };
-    return (React__default.createElement(MuiRadioGroup, { name: "selectedModifiers", value: value ? value[0].id : '', onChange: handleChange }, modifiers.map(function (modifier, index) { return (React__default.createElement(FormControlLabel$1, { key: index, value: modifier.id, control: React__default.createElement(Radio$1, { className: classes.radio }), label: React__default.createElement(Label, { name: modifier.name, price: modifier.price ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2) : null }), className: classes.root })); })));
+    return (React__default.createElement(MuiRadioGroup, { name: "selectedModifiers", value: value ? value[0].id : '', onChange: handleChange }, modifiers.map(function (modifier, index) { return (React__default.createElement(FormControlLabel$1, { key: index, value: modifier.id, control: React__default.createElement(Radio$1, { className: classes.radio, disabled: isOutOfStock }), label: React__default.createElement(Label, { name: modifier.name, price: modifier.price ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2) : null, disabled: isOutOfStock }) })); })));
 };
 
 var ModifierOptionsControl = function (props) {
-    var type = props.type, modifiers = props.modifiers, value = props.value, onChange = props.onChange, disableNewSelections = props.disableNewSelections;
+    var type = props.type, modifiers = props.modifiers, value = props.value, onChange = props.onChange, disableNewSelections = props.disableNewSelections, isOutOfStock = props.isOutOfStock;
     switch (type) {
         case 'singleSelect':
-            return React__default.createElement(RadioGroup, { modifiers: modifiers, value: value, onChange: onChange });
+            return React__default.createElement(RadioGroup, { modifiers: modifiers, value: value, onChange: onChange, isOutOfStock: isOutOfStock });
         case 'multipleSelect':
-            return (React__default.createElement(CheckboxGroup, { modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections }));
+            return (React__default.createElement(CheckboxGroup, { modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isOutOfStock }));
         default:
             return null;
     }
@@ -1587,10 +1583,12 @@ var DishModifierCard = function (props) {
     }
     var label = optionalText;
     switch (true) {
-        case isRequired:
-            label = requiredText;
         case isOutOfStock:
             label = outOfStockText;
+            break;
+        case isRequired:
+            label = requiredText;
+            break;
     }
     return (React__default.createElement(Box, { className: classes.root },
         React__default.createElement(Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content" },
@@ -1601,7 +1599,7 @@ var DishModifierCard = function (props) {
             React__default.createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, helperText)),
         React__default.createElement(Box, null,
             React__default.createElement(FormControl, null,
-                React__default.createElement(ModifierOptionsControl, { type: type, modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections })))));
+                React__default.createElement(ModifierOptionsControl, { type: type, modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isOutOfStock })))));
 };
 DishModifierCard.displayName = 'DishModifierCard';