@popmenu/ordering-ui 0.84.1 → 0.85.0

package/build/components/DialogSection/DialogSection.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+interface DialogSectionProps {
+    edgeToEdge?: boolean;
+    borderBottom?: boolean;
+}
+export declare const DialogSection: (props: PropsWithChildren<DialogSectionProps>) => JSX.Element;
+export {};

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

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

package/build/components/DialogTitle/DialogTitle.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface DialogTitleProps {
+    title: string;
+    Icon?: ReactNode;
+    onClose: () => void;
+}
+export declare const DialogTitle: (props: DialogTitleProps) => JSX.Element;
+export {};

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

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

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

@@ -1,4 +1,6 @@
 export interface DishCheckoutCardProps {
+    /** Adds a border to the bottom of the card */
+    borderBottom?: boolean;
     /** Modifiers of the dish in tuple format */
     modifiers?: [string, string][];
     /** Id of the dish */
@@ -9,14 +11,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/DishDetailsReview/DishDetailsReviewProps.d.ts

@@ -1,10 +1,10 @@
 export interface DishDetailsReviewProps {
     /** name of the restaurant follower user who posted the review */
-    userName: string;
+    userName?: string;
     /** url information for follower profile picture that may be provided */
-    userAvatarUrl: string | undefined;
+    userAvatarUrl?: string;
     /** the text of the review */
     content: string;
-    /** the text represeantation of the relative current time since the review was created */
-    timeSinceCreated: string;
+    /** time since the review was created */
+    createdAgo: string;
 }

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

@@ -1,12 +1,12 @@
 declare type ModifierValue = {
-    id: number | string;
-    price?: number | null;
+    id: number;
+    price?: number;
     quantity?: number;
 };
 declare type Modifier = {
     id: number;
     name: string;
-    price: string | null;
+    price?: string;
 };
 declare type OnChange = (value: Array<ModifierValue>, checked?: boolean) => void;
 interface Base {

package/build/components/LocationCard/LocationCardProps.d.ts

@@ -5,7 +5,7 @@ export interface LocationCardProps extends Omit<MuiCardProps, 'onClick'> {
     /** Renders the name of the restaurant location */
     name: string;
     /** Renders the address of the restaurant location */
-    address: string;
+    address?: string;
     /** Renders the appropriate availability of the restaurant location */
     availability?: string | ReactNode;
     /** Renders the distance of the restaurant location (if applicable) */

package/build/components/index.d.ts

@@ -21,3 +21,5 @@ export { MenuSectionGroup } from './MenuSectionGroup';
 export { MenuSection, MenuSectionProps } from './MenuSection';
 export { MenuItemGroup } from './MenuItemGroup';
 export { PageSection } from './PageSection';
+export { DialogTitle } from './DialogTitle';
+export { DialogSection } from './DialogSection';

package/build/index.es.js

@@ -1,4 +1,4 @@
-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';
+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, DialogTitle as DialogTitle$1, IconButton as IconButton$1 } from '@material-ui/core';
 export * from '@material-ui/core';
 import * as React from 'react';
 import React__default, { forwardRef, createElement, createContext, useContext, useState } from 'react';
@@ -149,7 +149,7 @@ var useDishCardStyles = makeStyles(function (theme) { return ({
     },
 }); });
 
-var useStyles$5 = makeStyles$1(function () { return ({
+var useStyles$6 = makeStyles$1(function () { return ({
     img: {
         objectFit: 'cover',
         width: '100%',
@@ -159,7 +159,7 @@ var useStyles$5 = makeStyles$1(function () { return ({
 var MenuItemImg = function (props) {
     var _a = props.image, image = _a === void 0 ? {} : _a;
     var src = image.src, alt = image.alt;
-    var classes = useStyles$5();
+    var classes = useStyles$6();
     if (!src || !alt) {
         return null;
     }
@@ -251,6 +251,24 @@ function SvgClock(props) {
   })))));
 }
 
+var _path$13;
+
+function _extends$2r() { _extends$2r = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2r.apply(this, arguments); }
+
+function SvgX(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2r({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
+    d: "M12 4l-8 8m0-8l8 8",
+    stroke: "currentColor"
+  })));
+}
+
 var _g$1m, _defs$J;
 
 function _extends$2q() { _extends$2q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2q.apply(this, arguments); }
@@ -969,7 +987,7 @@ Link.defaultProps = {
 };
 Link.displayName = 'Link';
 
-var useStyles$4 = makeStyles$1(function (_a) {
+var useStyles$5 = makeStyles$1(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -983,7 +1001,7 @@ var useStyles$4 = makeStyles$1(function (_a) {
 });
 var Paper = forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles$4(props);
+    var classes = useStyles$5(props);
     return React__default.createElement(Paper$1, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
 });
 Paper.displayName = 'Paper';
@@ -1157,7 +1175,7 @@ var MenuItemReactions = function (props) {
         showReviews && React__default.createElement(ReactionCounter, { icon: SvgReviews, count: reviewCount !== null && reviewCount !== void 0 ? reviewCount : 0 })));
 };
 
-var useStyles$3 = makeStyles$1(function (_a) {
+var useStyles$4 = makeStyles$1(function (_a) {
     var palette = _a.palette, spacing = _a.spacing;
     return ({
         plusIcon: {
@@ -1171,7 +1189,7 @@ var useStyles$3 = makeStyles$1(function (_a) {
     });
 });
 var MenuItemPrice = function (props) {
-    var classes = useStyles$3();
+    var classes = useStyles$4();
     return (React__default.createElement(Box, { display: "flex", alignItems: "center" },
         React__default.createElement(Box, { display: "flex", className: classes.plusIcon },
             React__default.createElement(Icon, { icon: SvgPlus, size: "medium" })),
@@ -1237,13 +1255,23 @@ MenuItem.displayName = 'MenuItem';
 
 var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
     root: {
+        '&:first-of-type': {
+            paddingTop: 0,
+        },
+        '&:last-of-type': {
+            paddingBottom: 0,
+            borderBottom: 'none',
+        },
         color: theme.palette.grey[900],
         padding: theme.spacing(2, 0),
         display: 'flex',
         flexDirection: 'column',
         width: '100%',
         gridGap: theme.spacing(2),
-        border: '1px',
+        borderBottom: function (_a) {
+            var borderBottom = _a.borderBottom;
+            return (borderBottom ? '1px solid #E0E0E0' : 'none');
+        },
     },
     deleteButton: {
         color: theme.palette.info.main,
@@ -1251,6 +1279,11 @@ var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
     editButton: {
         color: theme.palette.info.main,
     },
+    name: {
+        fontSize: 16,
+        fontWeight: 500,
+        lineHeight: '24px',
+    },
     price: {
         fontSize: '18px',
     },
@@ -1258,10 +1291,10 @@ var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
         paddingLeft: 'unset',
         borderRadius: '25px',
         '& fieldset': {
-            borderColor: theme.palette.grey[900],
+            borderColor: theme.palette.grey[700],
         },
         '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            borderColor: theme.palette.grey[900],
+            borderColor: theme.palette.grey[700],
             borderWidth: '1px',
         },
         '& .MuiSelect-root': {
@@ -1297,15 +1330,18 @@ 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,
-                React__default.createElement(Typography, { variant: "h6" }, name),
+                React__default.createElement(Typography, { variant: "h6", className: classes.name }, name),
                 modifiers &&
                     modifiers.map(function (modifier, i) { return (React__default.createElement(Typography, { key: i, variant: "body2" },
                         modifier[0],
@@ -1321,7 +1357,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: {
@@ -1339,14 +1375,14 @@ var DishCheckoutCard = function (props) {
 };
 
 var DishDetailsReview = forwardRef(function (props) {
-    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, timeSinceCreated = props.timeSinceCreated;
+    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, createdAgo = props.createdAgo;
     return (React__default.createElement(Box, { display: "flex" },
         React__default.createElement(Box, { mr: 1 },
             React__default.createElement(Avatar, { size: "small", src: userAvatarUrl })),
         React__default.createElement(Box, { width: "100%" },
             React__default.createElement(Box, { display: "flex", justifyContent: "space-between", mb: 1 },
                 React__default.createElement(Typography, { color: "grey.600", style: { display: 'flex', alignItems: 'center' } }, userName),
-                React__default.createElement(Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, timeSinceCreated)),
+                React__default.createElement(Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, createdAgo)),
             React__default.createElement(Typography, { color: "grey.900", weight: "regular" }, content))));
 });
 DishDetailsReview.displayName = 'DishDetailsReview';
@@ -1669,11 +1705,11 @@ var LocationCard = function (props) {
                     React__default.createElement(Box, { display: "flex", justifyContent: "space-between" },
                         React__default.createElement(Typography, { className: classes.name }, name),
                         selected && React__default.createElement(Icon, { icon: SvgCheck, size: "extra-large", className: classes.checkIcon })),
-                    React__default.createElement(Typography, { className: classes.address, variant: "body2" }, address),
+                    address && (React__default.createElement(Typography, { className: classes.address, variant: "body2" }, address)),
                     React__default.createElement(Typography, { className: classes.distance }, distance)),
-                React__default.createElement(Box, { className: classes.availability },
+                availability && (React__default.createElement(Box, { className: classes.availability },
                     React__default.createElement(Icon, { icon: SvgClock, size: "large" }),
-                    React__default.createElement(Typography, { variant: "body2" }, availability))))));
+                    React__default.createElement(Typography, { variant: "body2" }, availability)))))));
 };
 
 var _g, _defs;
@@ -1739,8 +1775,9 @@ var MenuDropdown = function (props) {
             }, className: classes.select }, menuOptions.map(function (option, index) { return (React__default.createElement(MenuItem$1, { key: index, value: option.id }, option.name)); }))));
 };
 
-var useMenuFilterStyles = makeStyles(function () { return ({
+var useMenuFilterStyles = makeStyles(function (theme) { return ({
     triggerLabel: {
+        color: theme.palette.info.main,
         whiteSpace: 'nowrap',
     },
 }); });
@@ -1908,7 +1945,7 @@ var SelectableChipGroup = function (props) {
         React__default.createElement(Box, { minWidth: "1px" })));
 };
 
-var useStyles$2 = makeStyles$1(function (_a) {
+var useStyles$3 = makeStyles$1(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -1926,7 +1963,7 @@ var useStyles$2 = makeStyles$1(function (_a) {
 });
 var SelectedMenuFiltersList = function (props) {
     var filters = props.filters, onChipClick = props.onChipClick;
-    var classes = useStyles$2();
+    var classes = useStyles$3();
     return (React__default.createElement(React__default.Fragment, null, filters.map(function (filter, index) { return (React__default.createElement(Chip, { key: filter.name + "-" + index, classes: classes, deleteIcon: React__default.createElement(SvgXCircle, null), onDelete: function (event) { return onChipClick(filter, event); }, label: React__default.createElement(React__default.Fragment, null,
             React__default.createElement(ItemTag, { alt: filter.abbr, color: filter.color }, filter.abbr),
             React__default.createElement(Typography$1, { variant: "caption" }, filter.name)) })); })));
@@ -1938,7 +1975,7 @@ var MenuSectionGroup = forwardRef(function (props, ref) {
 });
 MenuSectionGroup.displayName = 'MenuSectionGroup';
 
-var useStyles$1 = makeStyles$1(function () { return ({
+var useStyles$2 = makeStyles$1(function () { return ({
     title: {
         fontWeight: 400,
         fontSize: 20,
@@ -1948,7 +1985,7 @@ var useStyles$1 = makeStyles$1(function () { return ({
 
 var MenuSection = forwardRef(function (props, ref) {
     var name = props.name, children = props.children, restProps = __rest$1(props, ["name", "children"]);
-    var classes = useStyles$1();
+    var classes = useStyles$2();
     return (React__default.createElement(Box, __assign$1({}, restProps, { ref: ref }, { "data-component-type": "menu-section" }),
         React__default.createElement(Box, { marginTop: 1, marginBottom: 4 },
             React__default.createElement(Typography$1, { className: classes.title }, name)),
@@ -1956,7 +1993,7 @@ var MenuSection = forwardRef(function (props, ref) {
 });
 MenuSection.displayName = 'MenuSection';
 
-var useStyles = makeStyles$1(function () { return ({
+var useStyles$1 = makeStyles$1(function () { return ({
     main: {
         display: 'grid',
         // tune so that 2x columns hit at the md breakpoint
@@ -1966,13 +2003,33 @@ var useStyles = makeStyles$1(function () { return ({
 }); });
 
 var MenuItemGroup = forwardRef(function (props, ref) {
-    var classes = useStyles();
+    var classes = useStyles$1();
     return (React__default.createElement(Box, __assign$1({ className: classes.main }, { ref: ref }, { "data-component-type": "menu-item-group" }), props.children));
 });
 MenuItemGroup.displayName = 'MenuItemGroup';
 
 var PageSection = function (props) { return (React__default.createElement(Box, { p: 4, borderBottom: "1px solid #E0E0E0" }, props.children)); };
 
+var useStyles = makeStyles$1(function () { return ({
+    closeButton: {
+        padding: 0,
+    },
+}); });
+var DialogTitle = function (props) {
+    var Icon = props.Icon, title = props.title, onClose = props.onClose;
+    var classes = useStyles();
+    return (React__default.createElement(DialogTitle$1, null,
+        React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 16 },
+            Icon && Icon,
+            React__default.createElement(Typography$1, { variant: "h6" }, title)),
+        React__default.createElement(IconButton$1, { color: "inherit", className: classes.closeButton, "aria-label": "Close dialog", onClick: onClose },
+            React__default.createElement(SvgX, null))));
+};
+
+var DialogSection = function (props) {
+    return (React__default.createElement(Box, { paddingTop: 4, paddingBottom: props.borderBottom ? 4 : 0, paddingX: props.edgeToEdge ? 0 : 2, borderBottom: props.borderBottom ? '1px solid #E0E0E0' : undefined }, props.children));
+};
+
 var palette = {
     primary: {
         light: '#7B7FA3',
@@ -2012,6 +2069,36 @@ var overrides = {
         root: {
             borderRadius: 32,
             textTransform: 'none',
+            padding: '18px 16px',
+        },
+        outlined: {
+            padding: 'inherit',
+        },
+    },
+    MuiDialogTitle: {
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            borderBottom: '1px solid #E0E0E0',
+        },
+    },
+    MuiDialogContent: {
+        root: {
+            '&:first-child': {
+                paddingTop: 0,
+            },
+            paddingTop: 0,
+            paddingRight: 0,
+            paddingLeft: 0,
+            display: 'flex',
+            flexDirection: 'column',
+        },
+    },
+    MuiDialogActions: {
+        root: {
+            padding: 16,
+            boxShadow: '-4px 0px 8px 0px #0000001A',
         },
     },
 };
@@ -2020,6 +2107,9 @@ var props = {
     MuiButton: {
         disableElevation: true,
     },
+    MuiDialogTitle: {
+        disableTypography: true,
+    },
 };
 
 var fonts = ['"Poppins"', '"sans-serif"'];
@@ -2087,5 +2177,5 @@ var orderingTheme = {
     props: props,
 };
 
-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 };
+export { Button$1 as Button, DialogSection, DialogTitle, 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