@popmenu/ordering-ui 0.83.1 → 0.84.1

package/build/index.js

@@ -1288,8 +1288,7 @@ var useDishCheckoutCardStyles = styles.makeStyles(function (theme) { return ({
         gridGap: theme.spacing(2),
         border: '1px',
     },
-    deleteIcon: {
-        height: theme.spacing(2.5),
+    deleteButton: {
         color: theme.palette.info.main,
     },
     editButton: {
@@ -1326,10 +1325,26 @@ var useDishCheckoutCardStyles = styles.makeStyles(function (theme) { return ({
     },
 }); });
 
+var OrderingAppContext = React.createContext(null);
+var useOrderingAppContext = function () {
+    var context = React.useContext(OrderingAppContext);
+    if (!context) {
+        throw new Error('useOrderingAppContext has to be used within <OrderingAppContext.Provider>');
+    }
+    return context;
+};
+var OrderingAppContextProvider = function (props) {
+    var context = React.useState(props.defaultContext);
+    return React__default['default'].createElement(OrderingAppContext.Provider, { value: context }, props.children);
+};
+
 var DishCheckoutCard = function (props) {
-    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;
+    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 classes = useDishCheckoutCardStyles(props);
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var appContext = useOrderingAppContext()[0];
+    var _b = React.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;
     return (React__default['default'].createElement(core.Box, { className: classes.root },
         React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", gridGap: 3 },
             React__default['default'].createElement(core.Box, null,
@@ -1343,13 +1358,13 @@ var DishCheckoutCard = function (props) {
                     "\"",
                     specialInstructions,
                     "\"")),
-            React__default['default'].createElement(core.Box, { display: "flex", gridGap: 1, height: "100%" },
-                React__default['default'].createElement(Button$1, { className: classes.editButton, variant: "text", onClick: onEdit }, "Edit"),
-                React__default['default'].createElement(IconButton, { onClick: onDelete },
-                    React__default['default'].createElement(Icon, { icon: SvgTrash, className: classes.deleteIcon })))),
+            React__default['default'].createElement(core.Box, { display: "flex", gridGap: 1, height: "100%", alignItems: "center" },
+                React__default['default'].createElement(Button$1, { disabled: disabled, className: classes.editButton, variant: "text", onClick: onEdit }, "Edit"),
+                React__default['default'].createElement(IconButton, { disabled: disabled, onClick: onDelete, classes: { root: classes.deleteButton } },
+                    React__default['default'].createElement(Icon, { icon: SvgTrash, size: "large" })))),
         React__default['default'].createElement(core.Box, { display: "flex", gridGap: 16, alignItems: "center" },
             React__default['default'].createElement(core.FormControl, { variant: "outlined", hiddenLabel: true },
-                React__default['default'].createElement(core.Select, { 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['default'].createElement(core.InputAdornment, { position: "start" },
+                React__default['default'].createElement(core.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['default'].createElement(core.InputAdornment, { position: "start" },
                         React__default['default'].createElement(Icon, { icon: open ? SvgChevronUp : SvgChevronDown, size: "large" })), inputProps: { shrink: false }, MenuProps: {
                         disablePortal: true,
                         anchorOrigin: {
@@ -1363,7 +1378,7 @@ var DishCheckoutCard = function (props) {
                         getContentAnchorEl: null,
                         classes: { paper: classes.selectPaper },
                     }, className: classes.select }, Array.from({ length: 99 }, function (_, index) { return (React__default['default'].createElement(core.MenuItem, { key: index + 1, value: index + 1 }, index + 1)); }))),
-            React__default['default'].createElement(Typography, { className: classes.price }, price))));
+            React__default['default'].createElement(Typography, { className: classes.price }, formattedPrice))));
 };
 
 var DishDetailsReview = React.forwardRef(function (props) {
@@ -1404,14 +1419,6 @@ var useDishModifierCardStyles = styles.makeStyles(function (theme) { return ({
     },
 }); });
 var useRadioModifierFormStyles = styles.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',
@@ -1422,14 +1429,6 @@ var useRadioModifierFormStyles = styles.makeStyles(function (theme) { return ({
     },
 }); });
 var useCheckboxModifierFormStyles = styles.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),
@@ -1439,6 +1438,14 @@ var useCheckboxModifierFormStyles = styles.makeStyles(function (theme) { return
             color: theme.palette.info.main,
         },
     },
+}); });
+var useLabelStyles = styles.makeStyles(function (theme) { return ({
+    label: {
+        margin: theme.spacing(0.5, 0),
+    },
+    price: {
+        color: theme.palette.grey[700],
+    },
 }); });
 
 var useStatusTagStyles = styles.makeStyles(function (theme) { return ({
@@ -1542,29 +1549,17 @@ StatusTag.defaultProps = {
 };
 StatusTag.displayName = 'StatusTag';
 
-var OrderingAppContext = React.createContext(null);
-var useOrderingAppContext = function () {
-    var context = React.useContext(OrderingAppContext);
-    if (!context) {
-        throw new Error('useOrderingAppContext has to be used within <OrderingAppContext.Provider>');
-    }
-    return context;
-};
-var OrderingAppContextProvider = function (props) {
-    var context = React.useState(props.defaultContext);
-    return React__default['default'].createElement(OrderingAppContext.Provider, { value: context }, props.children);
-};
-
 var Label = function (props) {
-    var name = props.name, price = props.price;
-    return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column" },
+    var name = props.name, price = props.price, disabled = props.disabled;
+    var classes = useLabelStyles();
+    return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", className: classes.label },
         React__default['default'].createElement(core.Typography, null, name),
-        price && React__default['default'].createElement(core.Typography, null,
+        price && React__default['default'].createElement(core.Typography, { 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) {
@@ -1580,13 +1575,13 @@ var CheckboxGroup = function (props) {
     };
     return (React__default['default'].createElement(core.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['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Checkbox, { className: classes.radio, disabled: !targetValue && disableNewSelections }), label: React__default['default'].createElement(Label, { name: modifier.name, price: modifier.price
+        return (React__default['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Checkbox, { className: classes.radio, disabled: (!targetValue && disableNewSelections) || isOutOfStock }), label: React__default['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) {
@@ -1600,16 +1595,16 @@ var RadioGroup = function (props) {
             },
         ]);
     };
-    return (React__default['default'].createElement(MuiRadioGroup__default['default'], { name: "selectedModifiers", value: value ? value[0].id : '', onChange: handleChange }, modifiers.map(function (modifier, index) { return (React__default['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Radio, { className: classes.radio }), label: React__default['default'].createElement(Label, { name: modifier.name, price: modifier.price ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2) : null }), className: classes.root })); })));
+    return (React__default['default'].createElement(MuiRadioGroup__default['default'], { name: "selectedModifiers", value: value ? value[0].id : '', onChange: handleChange }, modifiers.map(function (modifier, index) { return (React__default['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Radio, { className: classes.radio, disabled: isOutOfStock }), label: React__default['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['default'].createElement(RadioGroup, { modifiers: modifiers, value: value, onChange: onChange });
+            return React__default['default'].createElement(RadioGroup, { modifiers: modifiers, value: value, onChange: onChange, isOutOfStock: isOutOfStock });
         case 'multipleSelect':
-            return (React__default['default'].createElement(CheckboxGroup, { modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections }));
+            return (React__default['default'].createElement(CheckboxGroup, { modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isOutOfStock }));
         default:
             return null;
     }
@@ -1628,10 +1623,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['default'].createElement(core.Box, { className: classes.root },
         React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content" },
@@ -1642,7 +1639,7 @@ var DishModifierCard = function (props) {
             React__default['default'].createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, helperText)),
         React__default['default'].createElement(core.Box, null,
             React__default['default'].createElement(core.FormControl, null,
-                React__default['default'].createElement(ModifierOptionsControl, { type: type, modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections })))));
+                React__default['default'].createElement(ModifierOptionsControl, { type: type, modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isOutOfStock })))));
 };
 DishModifierCard.displayName = 'DishModifierCard';
 
@@ -2017,6 +2014,8 @@ var MenuItemGroup = React.forwardRef(function (props, ref) {
 });
 MenuItemGroup.displayName = 'MenuItemGroup';
 
+var PageSection = function (props) { return (React__default['default'].createElement(core.Box, { p: 4, borderBottom: "1px solid #E0E0E0" }, props.children)); };
+
 var palette = {
     primary: {
         light: '#7B7FA3',
@@ -2146,6 +2145,7 @@ exports.MenuSection = MenuSection;
 exports.MenuSectionGroup = MenuSectionGroup;
 exports.OrderingAppContext = OrderingAppContext;
 exports.OrderingAppContextProvider = OrderingAppContextProvider;
+exports.PageSection = PageSection;
 exports.QuantityPicker = QuantityPicker;
 exports.ReactionCounter = ReactionCounter;
 exports.ReactionCounterGroup = ReactionCounterGroup;