@popmenu/ordering-ui 0.126.0 → 0.126.2

package/build/esm/components/DishCheckoutCard/DishCheckoutCard.styles.d.ts

@@ -0,0 +1,2 @@
+import { DishCheckoutCardProps } from './DishCheckoutCardProps';
+export declare const useDishCheckoutCardStyles: (props: DishCheckoutCardProps) => import("@material-ui/styles").ClassNameMap<string>;

package/build/esm/components/DishCheckoutCard/DishCheckoutCard.styles.js

@@ -0,0 +1,85 @@
+import { makeStyles } from '@material-ui/core';
+
+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),
+        borderBottom: function (_a) {
+            var borderBottom = _a.borderBottom;
+            return (borderBottom ? '1px solid #E0E0E0' : 'none');
+        },
+    },
+    deleteButton: {
+        color: theme.palette.info.main,
+    },
+    editButton: {
+        color: theme.palette.info.main,
+    },
+    img: {
+        objectFit: 'cover',
+        borderRadius: theme.spacing(1),
+        flexBasis: 'auto',
+        flexShrink: 0,
+        height: theme.spacing(7),
+        marginRight: theme.spacing(1),
+        overflow: 'hidden',
+        width: theme.spacing(7),
+    },
+    name: {
+        fontSize: 16,
+        fontWeight: 500,
+        lineHeight: '24px',
+    },
+    price: {
+        fontSize: '18px',
+    },
+    select: {
+        paddingLeft: 'unset',
+        borderRadius: '25px',
+        '& fieldset': {
+            borderColor: theme.palette.grey[700],
+        },
+        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.grey[700],
+            borderWidth: '1px',
+        },
+        '& .MuiSelect-root': {
+            padding: theme.spacing(1, 1.5, 1, 4.5),
+            zIndex: 10,
+            textAlign: 'right',
+        },
+        '& .MuiInputAdornment-positionStart': {
+            position: 'absolute',
+            left: theme.spacing(1.5),
+        },
+        '& .MuiSelect-iconOutlined': {
+            display: 'none',
+        },
+    },
+    selectPaper: {
+        maxHeight: theme.spacing(37),
+    },
+    ul: {
+        margin: 0,
+        paddingLeft: theme.spacing(3),
+    },
+    warning: {
+        color: theme.palette.error.main,
+        display: 'flex',
+        gridGap: theme.spacing(0.825),
+    },
+}); });
+
+export { useDishCheckoutCardStyles };
+//# sourceMappingURL=DishCheckoutCard.styles.js.map

package/build/esm/components/DishCheckoutCard/DishCheckoutCard.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DishCheckoutCard.styles.js","sources":["../../../../src/components/DishCheckoutCard/DishCheckoutCard.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { DishCheckoutCardProps } from './DishCheckoutCardProps'\n\nexport const useDishCheckoutCardStyles = makeStyles<Theme, DishCheckoutCardProps>((theme) => ({\n  root: {\n    '&:first-of-type': {\n      paddingTop: 0,\n    },\n    '&:last-of-type': {\n      paddingBottom: 0,\n      borderBottom: 'none',\n    },\n    color: theme.palette.grey[900],\n    padding: theme.spacing(2, 0),\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    gridGap: theme.spacing(2),\n    borderBottom: ({ borderBottom }) => (borderBottom ? '1px solid #E0E0E0' : 'none'),\n  },\n  deleteButton: {\n    color: theme.palette.info.main,\n  },\n  editButton: {\n    color: theme.palette.info.main,\n  },\n  img: {\n    objectFit: 'cover',\n    borderRadius: theme.spacing(1),\n    flexBasis: 'auto',\n    flexShrink: 0,\n    height: theme.spacing(7),\n    marginRight: theme.spacing(1),\n    overflow: 'hidden',\n    width: theme.spacing(7),\n  },\n  name: {\n    fontSize: 16,\n    fontWeight: 500,\n    lineHeight: '24px',\n  },\n  price: {\n    fontSize: '18px',\n  },\n  select: {\n    paddingLeft: 'unset',\n    borderRadius: '25px',\n\n    '& fieldset': {\n      borderColor: theme.palette.grey[700],\n    },\n\n    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\n      borderColor: theme.palette.grey[700],\n      borderWidth: '1px',\n    },\n\n    '& .MuiSelect-root': {\n      padding: theme.spacing(1, 1.5, 1, 4.5),\n      zIndex: 10,\n      textAlign: 'right',\n    },\n\n    '& .MuiInputAdornment-positionStart': {\n      position: 'absolute',\n      left: theme.spacing(1.5),\n    },\n\n    '& .MuiSelect-iconOutlined': {\n      display: 'none',\n    },\n  },\n  selectPaper: {\n    maxHeight: theme.spacing(37),\n  },\n  ul: {\n    margin: 0,\n    paddingLeft: theme.spacing(3),\n  },\n  warning: {\n    color: theme.palette.error.main,\n    display: 'flex',\n    gridGap: theme.spacing(0.825),\n  },\n}))\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,44 @@
+export interface DishCheckoutCardProps {
+    /** Adds a border to the bottom of the card */
+    borderBottom?: boolean;
+    /** disables all interactive elements in the card, like "edit" or "delete" */
+    disabled?: boolean;
+    /** Id of the dish */
+    id: number;
+    /** Dish image information */
+    image: {
+        alt?: string;
+        src?: string | null;
+    };
+    /** Edit and remove button text and aria-label */
+    messages: Record<'edit' | 'ariaEdit' | 'ariaDelete', string>;
+    /** Modifier group object of the dish */
+    modifierGroups?: ModifierGroupsType[];
+    /** Name of the dish */
+    name: string;
+    /** Callback for edit button */
+    onEdit: () => void;
+    /** Callback for delete button */
+    onDelete: () => void;
+    /** Callback for change of select element */
+    onQuantityChange: (id: number, value: number) => void;
+    /** Price of an item. numbers will be prepended with the currencySymbol from OrderingAppContext. */
+    price: number | string;
+    /** Quantity of dish selected */
+    quantity: number;
+    /** Special instructions text */
+    specialInstructions?: string | null;
+    /** If item is in cart but is not unavailable */
+    warningMessage?: string;
+}
+export declare type ModifierGroupsType = {
+    id: number;
+    menuItemModifierGroupName?: string | null;
+    selectedModifiers: ModifiersType[];
+};
+export declare type ModifiersType = {
+    id: number;
+    modifierName?: string | null;
+    quantity: number;
+    selectedModifierGroups?: ModifierGroupsType[];
+};

package/build/esm/components/DishCheckoutCard/index.d.ts

@@ -0,0 +1,2 @@
+export { DishCheckoutCard as default } from './DishCheckoutCard';
+export { DishCheckoutCardProps } from './DishCheckoutCardProps';

package/build/esm/components/DishDetailsReview/DishDetailsReview.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DishDetailsReviewProps } from './DishDetailsReviewProps';
+export declare const DishDetailsReview: React.ForwardRefExoticComponent<DishDetailsReviewProps & React.RefAttributes<HTMLDivElement>>;

package/build/esm/components/DishDetailsReview/DishDetailsReview.js

@@ -0,0 +1,18 @@
+import React__default, { forwardRef } from 'react';
+import { Box, Avatar, Typography } from '@popmenu/common-ui';
+
+var DishDetailsReview = forwardRef(function (props) {
+    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, createdAgo = props.createdAgo, alt = props.alt;
+    return (React__default.createElement(Box, { display: "flex" },
+        React__default.createElement(Box, { mr: 1 },
+            React__default.createElement(Avatar, { size: "small", src: userAvatarUrl, alt: alt })),
+        React__default.createElement(Box, { width: "100%" },
+            React__default.createElement(Box, { display: "flex", justifyContent: "space-between", mb: 1 },
+                React__default.createElement(Typography, { variant: "body1", variantMapping: { body1: 'h3' }, color: "grey.600", style: { display: 'flex', alignItems: 'center' } }, userName),
+                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';
+
+export { DishDetailsReview };
+//# sourceMappingURL=DishDetailsReview.js.map

package/build/esm/components/DishDetailsReview/DishDetailsReview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DishDetailsReview.js","sources":["../../../../src/components/DishDetailsReview/DishDetailsReview.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { Avatar, Box, Typography } from '@popmenu/common-ui'\n\nimport { DishDetailsReviewProps } from './DishDetailsReviewProps'\n\nexport const DishDetailsReview = forwardRef<HTMLDivElement, DishDetailsReviewProps>((props) => {\n  const { userName, userAvatarUrl, content, createdAgo, alt } = props\n\n  return (\n    <Box display=\"flex\">\n      <Box mr={1}>\n        <Avatar size=\"small\" src={userAvatarUrl} alt={alt} />\n      </Box>\n      <Box width=\"100%\">\n        <Box display=\"flex\" justifyContent=\"space-between\" mb={1}>\n          <Typography\n            variant=\"body1\"\n            variantMapping={{ body1: 'h3' }}\n            color=\"grey.600\"\n            style={{ display: 'flex', alignItems: 'center' }}\n          >\n            {userName}\n          </Typography>\n          <Typography color=\"grey.600\" variant=\"subtitle1\" style={{ display: 'flex', alignItems: 'center' }}>\n            {createdAgo}\n          </Typography>\n        </Box>\n        <Typography color=\"grey.900\" weight=\"regular\">\n          {content}\n        </Typography>\n      </Box>\n    </Box>\n  )\n})\n\nDishDetailsReview.displayName = 'DishDetailsReview'\n"],"names":["React"],"mappings":";;;AAKa,IAAA,iBAAiB,GAAG,UAAU,CAAyC,UAAC,KAAK,EAAA;IAChF,IAAA,QAAQ,GAA8C,KAAK,CAAnD,QAAA,EAAE,aAAa,GAA+B,KAAK,CAApC,aAAA,EAAE,OAAO,GAAsB,KAAK,CAA3B,OAAA,EAAE,UAAU,GAAU,KAAK,CAAA,UAAf,EAAE,GAAG,GAAK,KAAK,CAAA,GAAV;AAEzD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,GAAG,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA;AACjB,QAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAE,CAAC,EAAA;AACR,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,GAAI,CACjD;AACN,QAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,KAAK,EAAC,MAAM,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,cAAc,EAAC,eAAe,EAAC,EAAE,EAAE,CAAC,EAAA;AACtD,gBAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,OAAO,EAAC,OAAO,EACf,cAAc,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAC/B,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,EAE/C,QAAQ,CACE;gBACbA,cAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,KAAK,EAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,EAC9F,UAAU,CACA,CACT;AACN,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAC,UAAU,EAAC,MAAM,EAAC,SAAS,IAC1C,OAAO,CACG,CACT,CACF;AAEV,CAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

package/build/esm/components/DishDetailsReview/DishDetailsReviewProps.d.ts

@@ -0,0 +1,12 @@
+export interface DishDetailsReviewProps {
+    /** name of the restaurant follower user who posted the review */
+    userName?: string;
+    /** url information for follower profile picture that may be provided */
+    userAvatarUrl?: string;
+    /** the text of the review */
+    content: string;
+    /** time since the review was created */
+    createdAgo: string;
+    /** image description, a11y requirement */
+    alt: string;
+}

package/build/esm/components/DishDetailsReview/index.d.ts

@@ -0,0 +1,2 @@
+export { DishDetailsReview as default } from './DishDetailsReview';
+export { DishDetailsReviewProps } from './DishDetailsReviewProps';

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { DishModifierCardProps } from './DishModifierCardProps';
+export declare const DishModifierCard: {
+    (props: DishModifierCardProps): JSX.Element;
+    displayName: string;
+};

package/build/esm/components/DishModifierCard/DishModifierCard.js

@@ -0,0 +1,48 @@
+import { __assign } from 'tslib';
+import React__default from 'react';
+import { Box, Typography } from '@popmenu/common-ui';
+import { useDishModifierCardStyles } from './DishModifierCard.styles.js';
+import { StatusTag } from '../StatusTag/StatusTag.js';
+import { ModifierControls } from './ModifierControls.js';
+import classNames from '../../node_modules/classnames/index.js';
+
+var getStatusTagProps = function (props) {
+    var messages = props.messages, error = props.error, isRequired = props.isRequired, isOutOfStock = props.isOutOfStock;
+    var optionalText = messages.optionalText, outOfStockText = messages.outOfStockText, requiredText = messages.requiredText;
+    var color = 'default';
+    switch (true) {
+        case error:
+            color = 'error';
+            break;
+        case isOutOfStock:
+            color = 'warning';
+            break;
+    }
+    var label = optionalText;
+    switch (true) {
+        case isOutOfStock:
+            label = outOfStockText;
+            break;
+        case isRequired:
+            label = requiredText;
+            break;
+    }
+    var variant = isRequired || isOutOfStock ? 'outlined' : 'filled';
+    return { color: color, label: label, variant: variant };
+};
+var DishModifierCard = function (props) {
+    var _a;
+    var aggregatePrice = props.aggregatePrice, name = props.name, disableNewSelections = props.disableNewSelections, modifiers = props.modifiers, value = props.value, messages = props.messages, onChange = props.onChange, type = props.type, error = props.error, isOutOfStock = props.isOutOfStock, isRequired = props.isRequired, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity;
+    var classes = useDishModifierCardStyles();
+    return (React__default.createElement(Box, { className: classes.root },
+        React__default.createElement(Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
+            React__default.createElement(StatusTag, __assign({}, getStatusTagProps(props))),
+            !isOutOfStock && (React__default.createElement(Typography, { variant: "subtitle1", className: classNames((_a = {}, _a[classes.error] = error, _a[classes.helperText] = !error, _a)) }, messages.helperText))),
+        React__default.createElement(Typography, { className: classes.name }, name),
+        React__default.createElement(Box, null,
+            React__default.createElement(ModifierControls, { name: name, value: value, modifiers: modifiers, isOutOfStock: isOutOfStock, isRequired: isRequired, onChange: onChange, disableNewSelections: disableNewSelections, type: type, messages: messages, handleOptionsClick: handleOptionsClick, aggregatePrice: aggregatePrice, selectionQuantity: selectionQuantity }))));
+};
+DishModifierCard.displayName = 'DishModifierCard';
+
+export { DishModifierCard };
+//# sourceMappingURL=DishModifierCard.js.map

package/build/esm/components/DishModifierCard/DishModifierCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DishModifierCard.js","sources":["../../../../src/components/DishModifierCard/DishModifierCard.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Typography } from '@popmenu/common-ui'\n\nimport { DishModifierCardProps } from './DishModifierCardProps'\nimport { useDishModifierCardStyles } from './DishModifierCard.styles'\nimport StatusTag, { StatusTagProps } from '../StatusTag'\nimport { ModifierControls } from './ModifierControls'\nimport classNames from 'classnames'\n\nconst getStatusTagProps = (props: DishModifierCardProps): StatusTagProps => {\n  const { messages, error, isRequired, isOutOfStock } = props\n  const { optionalText, outOfStockText, requiredText } = messages\n\n  let color: StatusTagProps['color'] = 'default'\n  switch (true) {\n    case error:\n      color = 'error'\n      break\n    case isOutOfStock:\n      color = 'warning'\n      break\n  }\n\n  let label: string = optionalText\n  switch (true) {\n    case isOutOfStock:\n      label = outOfStockText\n      break\n    case isRequired:\n      label = requiredText\n      break\n  }\n\n  const variant = isRequired || isOutOfStock ? 'outlined' : 'filled'\n  return { color, label, variant }\n}\n\nexport const DishModifierCard = (props: DishModifierCardProps) => {\n  const {\n    aggregatePrice,\n    name,\n    disableNewSelections,\n    modifiers,\n    value,\n    messages,\n    onChange,\n    type,\n    error,\n    isOutOfStock,\n    isRequired,\n    handleOptionsClick,\n    selectionQuantity,\n  } = props\n  const classes = useDishModifierCardStyles()\n\n  return (\n    <Box className={classes.root}>\n      <Box\n        display=\"flex\"\n        justifyContent=\"space-between\"\n        width=\"100%\"\n        alignItems=\"center\"\n        height=\"fit-content\"\n        marginBottom={2}\n      >\n        <StatusTag {...getStatusTagProps(props)} />\n        {!isOutOfStock && (\n          <Typography\n            variant=\"subtitle1\"\n            className={classNames({ [classes.error]: error, [classes.helperText]: !error })}\n          >\n            {messages.helperText}\n          </Typography>\n        )}\n      </Box>\n      <Typography className={classes.name}>{name}</Typography>\n      <Box>\n        <ModifierControls\n          name={name}\n          value={value}\n          modifiers={modifiers}\n          isOutOfStock={isOutOfStock}\n          isRequired={isRequired}\n          onChange={onChange}\n          disableNewSelections={disableNewSelections}\n          type={type}\n          messages={messages}\n          handleOptionsClick={handleOptionsClick}\n          aggregatePrice={aggregatePrice}\n          selectionQuantity={selectionQuantity}\n        />\n      </Box>\n    </Box>\n  )\n}\n\nDishModifierCard.displayName = 'DishModifierCard'\n"],"names":["React"],"mappings":"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"}

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

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

package/build/esm/components/DishModifierCard/DishModifierCard.styles.js

@@ -0,0 +1,95 @@
+import { makeStyles } from '@material-ui/core';
+
+var useDishModifierCardStyles = makeStyles(function (theme) { return ({
+    root: {
+        borderRadius: '8px',
+        border: '1px solid var(--surfaces-card-stroke, #E0E0E0)',
+        display: 'flex',
+        flexDirection: 'column',
+        padding: theme.spacing(2.5),
+        color: theme.palette.grey[900] + " !important",
+    },
+    error: {
+        color: theme.palette.error.main,
+    },
+    helperText: {
+        color: theme.palette.text.primary,
+    },
+    name: {
+        fontSize: theme.spacing(2.25),
+        marginBottom: theme.spacing(2),
+    },
+}); });
+var useRadioModifierFormStyles = makeStyles(function (theme) { return ({
+    label: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'space-between',
+    },
+    radio: {
+        fontSize: theme.spacing(2),
+        padding: 'unset',
+        marginRight: theme.spacing(-0.25),
+        '&.Mui-checked': {
+            color: theme.palette.info.main,
+        },
+    },
+    hideRadio: {
+        display: 'none',
+    },
+    root: {
+        justifyContent: 'space-between',
+        margin: 0,
+        width: 'fill-available',
+        '& > :last-child': {
+            flex: 1,
+        },
+    },
+}); });
+var useCheckboxModifierFormStyles = makeStyles(function (theme) { return ({
+    label: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'space-between',
+    },
+    checkbox: {
+        color: '#616161',
+        fontSize: theme.spacing(2),
+        marginRight: theme.spacing(-0.25),
+        padding: 'unset',
+        '&.Mui-checked': {
+            color: theme.palette.info.main,
+        },
+    },
+    hideCheckbox: {
+        display: 'none',
+    },
+    root: {
+        margin: 0,
+        width: 'fill-available',
+        '& > :last-child': {
+            flex: 1,
+        },
+    },
+}); });
+var useLabelStyles = makeStyles(function (theme) { return ({
+    label: {
+        margin: theme.spacing(0.5, 0),
+    },
+    disabled: {
+        color: theme.palette.grey[500],
+    },
+    price: {
+        color: theme.palette.grey[700],
+    },
+}); });
+var useOptionsStyles = makeStyles(function (theme) { return ({
+    options: {
+        color: theme.palette.info.main,
+        marginBottom: theme.spacing(1.5),
+        padding: 0,
+    },
+}); });
+
+export { useCheckboxModifierFormStyles, useDishModifierCardStyles, useLabelStyles, useOptionsStyles, useRadioModifierFormStyles };
+//# sourceMappingURL=DishModifierCard.styles.js.map

package/build/esm/components/DishModifierCard/DishModifierCard.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DishModifierCard.styles.js","sources":["../../../../src/components/DishModifierCard/DishModifierCard.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nexport const useDishModifierCardStyles = makeStyles<Theme>((theme) => ({\n  root: {\n    borderRadius: '8px',\n    border: '1px solid var(--surfaces-card-stroke, #E0E0E0)',\n    display: 'flex',\n    flexDirection: 'column',\n    padding: theme.spacing(2.5),\n    color: `${theme.palette.grey[900]} !important`,\n  },\n  error: {\n    color: theme.palette.error.main,\n  },\n  helperText: {\n    color: theme.palette.text.primary,\n  },\n  name: {\n    fontSize: theme.spacing(2.25),\n    marginBottom: theme.spacing(2),\n  },\n}))\n\nexport const useRadioModifierFormStyles = makeStyles<Theme>((theme) => ({\n  label: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  radio: {\n    fontSize: theme.spacing(2),\n    padding: 'unset',\n    marginRight: theme.spacing(-0.25),\n\n    '&.Mui-checked': {\n      color: theme.palette.info.main,\n    },\n  },\n  hideRadio: {\n    display: 'none',\n  },\n  root: {\n    justifyContent: 'space-between',\n    margin: 0,\n    width: 'fill-available',\n\n    '& > :last-child': {\n      flex: 1,\n    },\n  },\n}))\n\nexport const useCheckboxModifierFormStyles = makeStyles<Theme>((theme) => ({\n  label: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  checkbox: {\n    color: '#616161',\n    fontSize: theme.spacing(2),\n    marginRight: theme.spacing(-0.25),\n    padding: 'unset',\n\n    '&.Mui-checked': {\n      color: theme.palette.info.main,\n    },\n  },\n  hideCheckbox: {\n    display: 'none',\n  },\n  root: {\n    margin: 0,\n    width: 'fill-available',\n\n    '& > :last-child': {\n      flex: 1,\n    },\n  },\n}))\n\nexport const useLabelStyles = makeStyles<Theme>((theme) => ({\n  label: {\n    margin: theme.spacing(0.5, 0),\n  },\n  disabled: {\n    color: theme.palette.grey[500],\n  },\n  price: {\n    color: theme.palette.grey[700],\n  },\n}))\n\nexport const useOptionsStyles = makeStyles<Theme>((theme) => ({\n  options: {\n    color: theme.palette.info.main,\n    marginBottom: theme.spacing(1.5),\n    padding: 0,\n  },\n}))\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+export declare type ModifierValue = {
+    groupId: number;
+    modifierId: number;
+    parentModifierId?: number | null;
+    price: number;
+    quantity: number;
+    isRadio?: boolean;
+};
+export declare type Modifier = {
+    id: number;
+    hasModifiers: boolean;
+    name: string;
+    outOfStock: boolean;
+    price: number;
+    formattedPrice: string;
+    quantity: number;
+    parentModifierGroupId: number;
+    parentModifierGroupItemId?: number | null;
+};
+export declare type OnChangeValueType = ModifierValue;
+interface Base {
+    /** Modifier options */
+    modifiers: Array<Modifier>;
+    /** The values of the modifier form */
+    value: Array<ModifierValue>;
+    /** Handles the change event */
+    onChange: (value: OnChangeValueType) => void;
+    isOutOfStock: boolean;
+}
+export declare type DishModifierCardProps = {
+    /** Aggregate price of the modifier and its nested children modifiers */
+    aggregatePrice: Record<number, string>;
+    /** Modifier options */
+    modifiers: Array<Modifier>;
+    /** The values of the modifier form */
+    value: Array<ModifierValue>;
+    /** Handles the change event */
+    onChange: (value: OnChangeValueType) => void;
+    /** Name of the modifier */
+    name: string;
+    /** Denotes the max amount of selections have been reached */
+    disableNewSelections?: boolean;
+    /** Denotes if modifier has an error */
+    error: boolean;
+    /** Denotes if modifier is required */
+    isRequired: boolean;
+    /** Denotes if modifier is out of stock */
+    isOutOfStock: boolean;
+    /** Selection type for modifier group */
+    type: 'singleSelect' | 'multipleSelect' | 'multipleQuantitySelect';
+    /** Renders the text of the dish modifiers */
+    messages: {
+        optionalText: string;
+        outOfStockText: string;
+        requiredText: string;
+        helperText: string;
+    };
+    /** Handles the dialog change for nested modifiers */
+    handleOptionsClick: (id: number) => void;
+    /** Used by parent modifier quantity tracking: parent modifier quantity denotes requiredSelectionCount and currentSelectionCount is the total quantity of the child modifier */
+    selectionQuantity: Record<number, {
+        requiredSelectionCount: number;
+        currentSelectionCount: number;
+    }>;
+};
+export declare type RadioModifierFormProps = Base;
+export declare type CheckboxModifierFormProps = Base & {
+    disableNewSelections?: boolean;
+};
+export declare type ModifierOptionsControlProps = Pick<DishModifierCardProps, 'value' | 'modifiers' | 'isOutOfStock' | 'isRequired' | 'onChange' | 'disableNewSelections' | 'type' | 'messages' | 'handleOptionsClick' | 'aggregatePrice' | 'selectionQuantity' | 'name'>;
+export {};

package/build/esm/components/DishModifierCard/ModifierControls.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ModifierOptionsControlProps } from './DishModifierCardProps';
+export declare const ModifierControls: (props: ModifierOptionsControlProps) => JSX.Element | null;

package/build/esm/components/DishModifierCard/ModifierControls.js

@@ -0,0 +1,135 @@
+import { __assign } from 'tslib';
+import React__default from 'react';
+import { FormControl, FormGroup, Box, Typography, FormControlLabel, Checkbox, RadioGroup, Radio } from '@material-ui/core';
+import { Icon } from '@popmenu/common-ui';
+import { ChevronRight } from '@popmenu/web-icons';
+import classNames from '../../node_modules/classnames/index.js';
+import { useCheckboxModifierFormStyles, useRadioModifierFormStyles, useLabelStyles, useOptionsStyles } from './DishModifierCard.styles.js';
+import { QuantityPicker } from '../QuantityPicker/QuantityPicker.js';
+import { Button } from '../Button/Button.js';
+import { StatusTag } from '../StatusTag/StatusTag.js';
+
+var Label = function (props) {
+    var _a, _b, _c;
+    var name = props.name, price = props.price, _d = props.disabled, disabled = _d === void 0 ? false : _d;
+    var classes = useLabelStyles();
+    return (React__default.createElement(Box, { display: "flex", flexDirection: "column", className: classes.label },
+        React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 8 },
+            React__default.createElement(Typography, { className: classNames((_a = {}, _a[classes.disabled] = disabled, _a)) }, name)),
+        price && (React__default.createElement(Typography, { className: classNames((_b = {}, _b[classes.price] = !disabled, _b), (_c = {}, _c[classes.disabled] = disabled, _c)) },
+            "+ ",
+            price))));
+};
+var Options = function (props) {
+    var handleOptionsClick = props.handleOptionsClick;
+    var classes = useOptionsStyles();
+    return (React__default.createElement(Box, null,
+        React__default.createElement(Button, { variation: "none", className: classes.options, onClick: handleOptionsClick },
+            React__default.createElement(Typography, { variant: "caption" }, "OPTIONS"),
+            React__default.createElement(Icon, { icon: ChevronRight }))));
+};
+var SingleSelectModifierControl = function (props) {
+    var modifiers = props.modifiers, name = props.name, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice, isRequired = props.isRequired;
+    var radioClasses = useRadioModifierFormStyles();
+    var makeHandleChange = function (modifier) { return function (e) {
+        var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
+        if (!isModifierInValue && modifier.hasModifiers) {
+            handleOptionsClick(modifier.id);
+        }
+        onChange({
+            isRadio: true,
+            modifierId: Number(e.target.value),
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: 1,
+        });
+    }; };
+    return (React__default.createElement(FormControl, { fullWidth: true },
+        React__default.createElement(RadioGroup, { "aria-label": name }, modifiers.map(function (modifier) {
+            var _a;
+            var _b;
+            return (React__default.createElement(Box, { key: modifier.id },
+                React__default.createElement(FormControlLabel, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React__default.createElement(Radio, { checked: ((_b = value[0]) === null || _b === void 0 ? void 0 : _b.modifierId) === modifier.id, className: classNames((_a = {},
+                            _a[radioClasses.hideRadio] = modifier.outOfStock,
+                            _a[radioClasses.radio] = !modifier.outOfStock,
+                            _a)), disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier), required: isRequired }), label: React__default.createElement(Box, { className: radioClasses.label },
+                        React__default.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                        modifier.outOfStock && (React__default.createElement(Box, { minWidth: "90px", marginLeft: 2 },
+                            React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
+                modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } }))));
+        }))));
+};
+var MultipleSelectControl = function (props) {
+    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice;
+    var classes = useCheckboxModifierFormStyles();
+    var makeHandleChange = function (modifier) { return function () {
+        var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
+        if (!isModifierInValue && modifier.hasModifiers) {
+            handleOptionsClick(modifier.id);
+        }
+        onChange({
+            isRadio: false,
+            modifierId: modifier.id,
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: isModifierInValue ? 0 : 1,
+        });
+    }; };
+    return (React__default.createElement(FormControl, { fullWidth: true },
+        React__default.createElement(FormGroup, null, modifiers.map(function (modifier) {
+            var _a, _b;
+            return (React__default.createElement(Box, { key: modifier.id },
+                React__default.createElement(FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some(function (v) { return v.modifierId === modifier.id; }), onChange: makeHandleChange(modifier), control: React__default.createElement(Checkbox, { className: classNames((_a = {}, _a[classes.hideCheckbox] = modifier.outOfStock, _a), (_b = {}, _b[classes.checkbox] = !modifier.outOfStock, _b)), disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React__default.createElement(Box, { className: classes.label },
+                        React__default.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                        modifier.outOfStock && (React__default.createElement(Box, { minWidth: "90px", marginLeft: 2 },
+                            React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
+                modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } }))));
+        }))));
+};
+var MultipleQuantitySelectControl = function (props) {
+    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity;
+    var makeHandleChange = function (modifier) { return function (_e, customEvent) {
+        onChange({
+            isRadio: false,
+            modifierId: modifier.id,
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: customEvent.quantity,
+        });
+    }; };
+    return (React__default.createElement(FormControl, { fullWidth: true },
+        React__default.createElement(FormGroup, null, modifiers.map(function (modifier) { return (React__default.createElement(Box, { key: modifier.id, style: { justifyContent: 'space-between', flexDirection: 'column' }, display: "flex" },
+            React__default.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
+                React__default.createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                modifier.outOfStock && (React__default.createElement(Box, { minWidth: "90px", marginLeft: 2 },
+                    React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" }))),
+                !modifier.outOfStock && (React__default.createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock, name: modifier.name }))),
+            React__default.createElement(Box, { display: "flex", alignItems: "flex-start", gridGap: 4 },
+                modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } })),
+                selectionQuantity[modifier.id] &&
+                    selectionQuantity[modifier.id].requiredSelectionCount > 0 &&
+                    selectionQuantity[modifier.id].requiredSelectionCount !==
+                        selectionQuantity[modifier.id].currentSelectionCount && (React__default.createElement(Typography, { variant: "caption", color: "error" },
+                    selectionQuantity[modifier.id].currentSelectionCount,
+                    "/",
+                    selectionQuantity[modifier.id].requiredSelectionCount,
+                    " selected"))))); }))));
+};
+var ModifierControls = function (props) {
+    switch (props.type) {
+        case 'singleSelect':
+            return React__default.createElement(SingleSelectModifierControl, __assign({}, props));
+        case 'multipleSelect':
+            return React__default.createElement(MultipleSelectControl, __assign({}, props));
+        case 'multipleQuantitySelect':
+            return React__default.createElement(MultipleQuantitySelectControl, __assign({}, props));
+        default:
+            return null;
+    }
+};
+
+export { ModifierControls };
+//# sourceMappingURL=ModifierControls.js.map