@popmenu/ordering-ui 0.84.0 → 0.84.1

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

@@ -1376,14 +1376,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 +1386,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 +1395,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 +1507,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 +1532,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 +1552,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 +1580,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 +1596,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';