@popmenu/ordering-ui 0.83.1 → 0.84.1

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

@@ -1,14 +1,16 @@
 export interface DishCheckoutCardProps {
     /** Modifiers of the dish in tuple format */
-    modifiers?: Array<[string | number, string | number]>;
+    modifiers?: [string, string][];
     /** Id of the dish */
     id: number;
+    /** disables all interactive elements in the card, like "edit" or "delete" */
+    disabled?: boolean;
     /** Name of the dish */
     name: string;
     /** Quantity of dish selected */
     quantity: number;
     /** Price of description should be formatted in the correct currency before passing as a prop */
-    price: string;
+    price: number | string;
     /** Callback for edit button */
     onEdit: () => void;
     /** Callback for delete button */
@@ -16,5 +18,5 @@ export interface DishCheckoutCardProps {
     /** 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;
     /** Special instructions text */
-    specialInstructions?: string | undefined;
+    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/components/PageSection/PageSection.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const PageSection: (props: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/build/components/PageSection/index.d.ts

@@ -0,0 +1 @@
+export { PageSection } from './PageSection';

package/build/components/index.d.ts

@@ -20,3 +20,4 @@ export { SelectedMenuFiltersList, SelectedMenuFiltersListProps } from './Selecte
 export { MenuSectionGroup } from './MenuSectionGroup';
 export { MenuSection, MenuSectionProps } from './MenuSection';
 export { MenuItemGroup } from './MenuItemGroup';
+export { PageSection } from './PageSection';

package/build/index.es.js

@@ -1,7 +1,7 @@
 import { Button as Button$2, makeStyles as makeStyles$1, Box, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Avatar as Avatar$1, Card, CardActionArea, FormControl, Select, InputAdornment, MenuItem as MenuItem$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, Radio as Radio$1, Menu, TextField, Tabs, Chip } from '@material-ui/core';
 export * from '@material-ui/core';
 import * as React from 'react';
-import React__default, { forwardRef, createElement, useState, createContext, useContext } from 'react';
+import React__default, { forwardRef, createElement, createContext, useContext, useState } from 'react';
 import { makeStyles, useTheme, lighten } from '@material-ui/core/styles';
 import '@material-ui/lab/Alert';
 import '@material-ui/core/AppBar';
@@ -1245,8 +1245,7 @@ var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
         gridGap: theme.spacing(2),
         border: '1px',
     },
-    deleteIcon: {
-        height: theme.spacing(2.5),
+    deleteButton: {
         color: theme.palette.info.main,
     },
     editButton: {
@@ -1283,10 +1282,26 @@ var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
     },
 }); });
 
+var OrderingAppContext = createContext(null);
+var useOrderingAppContext = function () {
+    var context = useContext(OrderingAppContext);
+    if (!context) {
+        throw new Error('useOrderingAppContext has to be used within <OrderingAppContext.Provider>');
+    }
+    return context;
+};
+var OrderingAppContextProvider = function (props) {
+    var context = useState(props.defaultContext);
+    return React__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 = useState(false), open = _a[0], setOpen = _a[1];
+    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;
     return (React__default.createElement(Box, { className: classes.root },
         React__default.createElement(Box, { display: "flex", justifyContent: "space-between", gridGap: 3 },
             React__default.createElement(Box, null,
@@ -1300,13 +1315,13 @@ var DishCheckoutCard = function (props) {
                     "\"",
                     specialInstructions,
                     "\"")),
-            React__default.createElement(Box, { display: "flex", gridGap: 1, height: "100%" },
-                React__default.createElement(Button$1, { className: classes.editButton, variant: "text", onClick: onEdit }, "Edit"),
-                React__default.createElement(IconButton, { onClick: onDelete },
-                    React__default.createElement(Icon, { icon: SvgTrash, className: classes.deleteIcon })))),
+            React__default.createElement(Box, { display: "flex", gridGap: 1, height: "100%", alignItems: "center" },
+                React__default.createElement(Button$1, { disabled: disabled, className: classes.editButton, variant: "text", onClick: onEdit }, "Edit"),
+                React__default.createElement(IconButton, { disabled: disabled, onClick: onDelete, classes: { root: classes.deleteButton } },
+                    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, { 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: function (event) { return onChange(id, event.target.value); }, 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: {
@@ -1320,7 +1335,7 @@ var DishCheckoutCard = function (props) {
                         getContentAnchorEl: null,
                         classes: { paper: classes.selectPaper },
                     }, className: classes.select }, Array.from({ length: 99 }, function (_, index) { return (React__default.createElement(MenuItem$1, { key: index + 1, value: index + 1 }, index + 1)); }))),
-            React__default.createElement(Typography, { className: classes.price }, price))));
+            React__default.createElement(Typography, { className: classes.price }, formattedPrice))));
 };
 
 var DishDetailsReview = forwardRef(function (props) {
@@ -1361,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',
@@ -1379,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),
@@ -1396,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 ({
@@ -1499,29 +1506,17 @@ StatusTag.defaultProps = {
 };
 StatusTag.displayName = 'StatusTag';
 
-var OrderingAppContext = createContext(null);
-var useOrderingAppContext = function () {
-    var context = useContext(OrderingAppContext);
-    if (!context) {
-        throw new Error('useOrderingAppContext has to be used within <OrderingAppContext.Provider>');
-    }
-    return context;
-};
-var OrderingAppContextProvider = function (props) {
-    var context = useState(props.defaultContext);
-    return React__default.createElement(OrderingAppContext.Provider, { value: context }, props.children);
-};
-
 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) {
@@ -1537,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) {
@@ -1557,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;
     }
@@ -1585,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" },
@@ -1599,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';
 
@@ -1974,6 +1971,8 @@ var MenuItemGroup = forwardRef(function (props, ref) {
 });
 MenuItemGroup.displayName = 'MenuItemGroup';
 
+var PageSection = function (props) { return (React__default.createElement(Box, { p: 4, borderBottom: "1px solid #E0E0E0" }, props.children)); };
+
 var palette = {
     primary: {
         light: '#7B7FA3',
@@ -2088,5 +2087,5 @@ var orderingTheme = {
     props: props,
 };
 
-export { Button$1 as Button, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuDropdown, MenuFilter, MenuItem, MenuItemGroup, MenuSection, MenuSectionGroup, OrderingAppContext, OrderingAppContextProvider, QuantityPicker, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, SelectedMenuFiltersList, StatusTag, orderingTheme, useOrderingAppContext };
+export { Button$1 as Button, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuDropdown, MenuFilter, MenuItem, MenuItemGroup, MenuSection, MenuSectionGroup, OrderingAppContext, OrderingAppContextProvider, PageSection, QuantityPicker, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, SelectedMenuFiltersList, StatusTag, orderingTheme, useOrderingAppContext };
 //# sourceMappingURL=index.es.js.map