@popmenu/ordering-ui 0.152.0 → 0.154.0

package/build/cjs/index.js

@@ -687,7 +687,7 @@ const DishDetailsReview = React.forwardRef((props, ref) => {
 });
 DishDetailsReview.displayName = 'DishDetailsReview';
 
-const useDishModifierCardStyles = core.makeStyles((theme) => ({
+const useDishModifierCardStyles$1 = core.makeStyles((theme) => ({
     root: {
         borderRadius: '8px',
         border: '1px solid var(--surfaces-card-stroke, #E0E0E0)',
@@ -707,7 +707,7 @@ const useDishModifierCardStyles = core.makeStyles((theme) => ({
         marginBottom: theme.spacing(2),
     },
 }));
-const useRadioModifierFormStyles = core.makeStyles((theme) => ({
+const useRadioModifierFormStyles$1 = core.makeStyles((theme) => ({
     radioGroup: {
         gap: theme.spacing(1),
     },
@@ -736,7 +736,7 @@ const useRadioModifierFormStyles = core.makeStyles((theme) => ({
         },
     },
 }));
-const useCheckboxModifierFormStyles = core.makeStyles((theme) => ({
+const useCheckboxModifierFormStyles$1 = core.makeStyles((theme) => ({
     formGroup: {
         gap: theme.spacing(1),
     },
@@ -765,7 +765,7 @@ const useCheckboxModifierFormStyles = core.makeStyles((theme) => ({
         },
     },
 }));
-const useLabelStyles = core.makeStyles((theme) => ({
+const useLabelStyles$1 = core.makeStyles((theme) => ({
     label: {
         margin: theme.spacing(0.5, 0),
     },
@@ -776,7 +776,7 @@ const useLabelStyles = core.makeStyles((theme) => ({
         color: theme.palette.grey[700],
     },
 }));
-const useOptionsStyles = core.makeStyles((theme) => ({
+const useOptionsStyles$1 = core.makeStyles((theme) => ({
     options: {
         color: theme.palette.info.main,
         marginBottom: theme.spacing(1.5),
@@ -960,9 +960,9 @@ const QuantityPicker = ({ id, value, onChange, disabled, preventManualChange, di
             } }, liveRegionMessage)));
 };
 
-const Label = (props) => {
+const Label$1 = (props) => {
     const { name, price, disabled = false, hidePrice = false } = props;
-    const classes = useLabelStyles();
+    const classes = useLabelStyles$1();
     const numericPrice = price ? parseFloat(price.replace(/[^0-9.-]/g, '')) : NaN;
     const shouldHidePrice = hidePrice || !price || numericPrice === 0 || isNaN(numericPrice);
     return (React.createElement(core.Box, { display: "flex", flexDirection: "column", className: classes.label },
@@ -970,17 +970,17 @@ const Label = (props) => {
             React.createElement(core.Typography, { className: classNames({ [classes.disabled]: disabled }) }, name)),
         !shouldHidePrice && (React.createElement(core.Typography, { className: classNames({ [classes.price]: !disabled }, { [classes.disabled]: disabled }) }, `+ ${price}`))));
 };
-const Options = (props) => {
+const Options$1 = (props) => {
     const { handleOptionsClick } = props;
-    const classes = useOptionsStyles();
+    const classes = useOptionsStyles$1();
     return (React.createElement(core.Box, null,
         React.createElement(Button, { variation: "none", className: classes.options, onClick: handleOptionsClick },
             React.createElement(core.Typography, { variant: "caption" }, "OPTIONS"),
             React.createElement(commonUi.Icon, { icon: webIcons.ChevronRight }))));
 };
-const SingleSelectModifierControl = (props) => {
+const SingleSelectModifierControl$1 = (props) => {
     const { modifiers, name, isOutOfStock, onChange, value, handleOptionsClick, aggregatePrice, isRequired } = props;
-    const radioClasses = useRadioModifierFormStyles();
+    const radioClasses = useRadioModifierFormStyles$1();
     const makeHandleChange = (modifier) => (e) => {
         const isModifierInValue = Boolean(value.find((v) => v.modifierId === modifier.id));
         if (!isModifierInValue && modifier.hasModifiers) {
@@ -1001,14 +1001,14 @@ const SingleSelectModifierControl = (props) => {
                         [radioClasses.hideRadio]: modifier.outOfStock,
                         [radioClasses.radio]: !modifier.outOfStock,
                     }), disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier), required: isRequired }), label: React.createElement(core.Box, { className: radioClasses.label },
-                    React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice }),
+                    React.createElement(Label$1, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice }),
                     modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
                         React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
-            modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id) }))))))));
+            modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options$1, { handleOptionsClick: () => handleOptionsClick(modifier.id) }))))))));
 };
-const MultipleSelectControl = (props) => {
+const MultipleSelectControl$1 = (props) => {
     const { modifiers, value, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, aggregatePrice } = props;
-    const classes = useCheckboxModifierFormStyles();
+    const classes = useCheckboxModifierFormStyles$1();
     const makeHandleChange = (modifier) => () => {
         const isModifierInValue = Boolean(value.find((v) => v.modifierId === modifier.id));
         if (!isModifierInValue && modifier.hasModifiers) {
@@ -1027,13 +1027,13 @@ const MultipleSelectControl = (props) => {
         React.createElement(core.FormGroup, { className: classes.formGroup }, modifiers.map((modifier) => {
             return (React.createElement(core.Box, { key: modifier.id },
                 React.createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some((v) => v.modifierId === modifier.id), onChange: makeHandleChange(modifier), control: React.createElement(core.Checkbox, { className: classNames({ [classes.hideCheckbox]: modifier.outOfStock }, { [classes.checkbox]: !modifier.outOfStock }), disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React.createElement(core.Box, { className: classes.label },
-                        React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice }),
+                        React.createElement(Label$1, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice }),
                         modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
                             React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
-                modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id) }))));
+                modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options$1, { handleOptionsClick: () => handleOptionsClick(modifier.id) }))));
         }))));
 };
-const MultipleQuantitySelectControl = (props) => {
+const MultipleQuantitySelectControl$1 = (props) => {
     const { modifiers, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, selectionQuantity } = props;
     const makeHandleChange = (modifier) => (_e, customEvent) => {
         onChange({
@@ -1048,12 +1048,12 @@ const MultipleQuantitySelectControl = (props) => {
     return (React.createElement(core.FormControl, { fullWidth: true },
         React.createElement(core.FormGroup, null, modifiers.map((modifier) => (React.createElement(core.Box, { key: modifier.id, style: { justifyContent: 'space-between', flexDirection: 'column' }, display: "flex" },
             React.createElement(core.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
-                React.createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice }),
+                React.createElement(Label$1, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice }),
                 modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
                     React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" }))),
                 !modifier.outOfStock && (React.createElement(QuantityPicker, { incrementButtonTitle: `Add ${modifier.name}`, decrementButtonTitle: `Remove ${modifier.name}`, id: `${modifier.id}-quantity-picker`, variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock, name: modifier.name }))),
             React.createElement(core.Box, { display: "flex", alignItems: "flex-start", gridGap: 4 },
-                modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id) })),
+                modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options$1, { handleOptionsClick: () => handleOptionsClick(modifier.id) })),
                 selectionQuantity[modifier.id] &&
                     selectionQuantity[modifier.id].requiredSelectionCount > 0 &&
                     selectionQuantity[modifier.id].requiredSelectionCount !==
@@ -1063,20 +1063,20 @@ const MultipleQuantitySelectControl = (props) => {
                     selectionQuantity[modifier.id].requiredSelectionCount,
                     " selected")))))))));
 };
-const ModifierControls = (props) => {
+const ModifierControls$1 = (props) => {
     switch (props.type) {
         case 'singleSelect':
-            return React.createElement(SingleSelectModifierControl, { ...props });
+            return React.createElement(SingleSelectModifierControl$1, { ...props });
         case 'multipleSelect':
-            return React.createElement(MultipleSelectControl, { ...props });
+            return React.createElement(MultipleSelectControl$1, { ...props });
         case 'multipleQuantitySelect':
-            return React.createElement(MultipleQuantitySelectControl, { ...props });
+            return React.createElement(MultipleQuantitySelectControl$1, { ...props });
         default:
             return null;
     }
 };
 
-const getStatusTagProps = (props) => {
+const getStatusTagProps$1 = (props) => {
     const { messages, error, isRequired, isOutOfStock } = props;
     const { optionalText, outOfStockText, requiredText } = messages;
     let color = 'default';
@@ -1102,14 +1102,14 @@ const getStatusTagProps = (props) => {
 };
 const DishModifierCard = (props) => {
     const { aggregatePrice, name, disableNewSelections, modifiers, value, messages, onChange, type, error, isOutOfStock, isRequired, handleOptionsClick, selectionQuantity, } = props;
-    const classes = useDishModifierCardStyles();
+    const classes = useDishModifierCardStyles$1();
     return (React.createElement(commonUi.Box, { className: classes.root },
         React.createElement(commonUi.Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
-            React.createElement(StatusTag, { ...getStatusTagProps(props) }),
+            React.createElement(StatusTag, { ...getStatusTagProps$1(props) }),
             !isOutOfStock && (React.createElement(commonUi.Typography, { variant: "subtitle1", className: classNames({ [classes.error]: error, [classes.helperText]: !error }) }, messages.helperText))),
         React.createElement(commonUi.Typography, { component: "h3", className: classes.name }, name),
         React.createElement(commonUi.Box, null,
-            React.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 }))));
+            React.createElement(ModifierControls$1, { 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';
 
@@ -1616,6 +1616,431 @@ function MenuBannerButton(props) {
         React.createElement(core.Link, { component: 'button', variant: 'body2', className: classes.button, ...props.ButtonProps }, props.buttonLabel)));
 }
 
+const useExpandableModifierGroupStyles = core.makeStyles((theme) => ({
+    root: {
+        backgroundColor: theme.palette.grey[100],
+        borderRadius: '8px',
+    },
+    header: {
+        alignItems: 'center',
+        background: 'none',
+        border: 'none',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: theme.spacing(1.5, 2),
+        width: '100%',
+    },
+    name: {
+        color: theme.palette.grey[700],
+        fontSize: '0.75rem',
+        fontWeight: 600,
+        letterSpacing: '0.08em',
+        textTransform: 'uppercase',
+    },
+    chevron: {
+        color: theme.palette.info.main,
+        transition: 'transform 0.2s ease',
+    },
+    chevronExpanded: {
+        transform: 'rotate(90deg)',
+    },
+    headerExpanded: {
+        paddingBottom: theme.spacing(0.5),
+    },
+    summary: {
+        alignItems: 'center',
+        columnGap: theme.spacing(1),
+        display: 'flex',
+        padding: theme.spacing(0, 2, 1.5),
+    },
+    summaryIcon: {
+        color: theme.palette.success.main,
+    },
+    // TODO [sc-162475]: 0.625rem (10px) is below the recommended minimum font size for accessibility — address in followup
+    summaryText: {
+        color: theme.palette.grey[700],
+        fontSize: '0.625rem',
+        lineHeight: 1.2,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+}));
+
+const ExpandableModifierGroup = ({ name, children, defaultExpanded = true, selectedSummary, }) => {
+    const [expanded, setExpanded] = React.useState(defaultExpanded);
+    const classes = useExpandableModifierGroupStyles();
+    return (React.createElement("div", { className: classes.root },
+        React.createElement("button", { className: classNames(classes.header, { [classes.headerExpanded]: expanded }), onClick: () => setExpanded((prev) => !prev), type: "button", "aria-expanded": expanded },
+            React.createElement(core.Typography, { className: classes.name }, name),
+            React.createElement(commonUi.Icon, { icon: webIcons.ChevronRight, className: classNames(classes.chevron, { [classes.chevronExpanded]: expanded }) })),
+        !expanded && selectedSummary && (React.createElement("div", { className: classes.summary },
+            React.createElement(commonUi.Icon, { icon: webIcons.CheckCircle, size: "medium", className: classes.summaryIcon }),
+            React.createElement(core.Typography, { variant: "caption", className: classes.summaryText }, selectedSummary))),
+        React.createElement("div", { hidden: !expanded }, children)));
+};
+ExpandableModifierGroup.displayName = 'ExpandableModifierGroup';
+
+const useDishModifierCardStyles = core.makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: theme.spacing(2.5),
+        color: `${theme.palette.grey[900]} !important`,
+    },
+    card: {
+        borderRadius: '8px',
+        border: '1px solid var(--surfaces-card-stroke, #E0E0E0)',
+    },
+    error: {
+        color: theme.palette.error.main,
+    },
+    helperText: {
+        color: theme.palette.grey[700],
+    },
+    optionalStatusTag: {
+        '& > div': {
+            backgroundColor: theme.palette.grey[300],
+        },
+    },
+    name: {
+        fontSize: '1.125rem',
+        fontWeight: theme.typography.fontWeightBold,
+        marginBottom: theme.spacing(2),
+    },
+}));
+const useRadioModifierFormStyles = core.makeStyles((theme) => ({
+    radioGroup: {
+        gap: theme.spacing(2),
+    },
+    label: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    radio: {
+        fontSize: '1rem',
+        padding: 'unset',
+        marginRight: theme.spacing(-0.25),
+        '&.Mui-checked': {
+            color: theme.palette.info.main,
+        },
+    },
+    hideRadio: {
+        display: 'none',
+    },
+    root: {
+        justifyContent: 'space-between',
+        margin: 0,
+        width: '100%',
+        '& > :last-child': {
+            flex: 1,
+        },
+    },
+}));
+const useCheckboxModifierFormStyles = core.makeStyles((theme) => ({
+    formGroup: {
+        gap: theme.spacing(2),
+    },
+    label: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    checkbox: {
+        color: theme.palette.grey[700],
+        fontSize: '1rem',
+        marginRight: theme.spacing(-0.25),
+        padding: 'unset',
+        '&.Mui-checked': {
+            color: theme.palette.info.main,
+        },
+    },
+    hideCheckbox: {
+        display: 'none',
+    },
+    root: {
+        margin: 0,
+        width: '100%',
+        '& > :last-child': {
+            flex: 1,
+        },
+    },
+}));
+const useLabelStyles = core.makeStyles((theme) => ({
+    label: {
+        margin: theme.spacing(0.5, 0),
+    },
+    selectedLabel: {
+        margin: theme.spacing(0.5, 0),
+    },
+    disabled: {
+        color: theme.palette.grey[500],
+    },
+    price: {
+        color: theme.palette.grey[700],
+    },
+    selectedSummary: {
+        color: theme.palette.grey[700],
+    },
+    selectedSummaryInlineRow: {
+        alignItems: 'center',
+        color: theme.palette.grey[700],
+        columnGap: theme.spacing(1),
+        display: 'flex',
+        justifyContent: 'space-between',
+        marginTop: theme.spacing(0.5),
+        minHeight: theme.spacing(2.5),
+        width: '100%',
+    },
+    selectedSummaryPrimary: {
+        alignItems: 'center',
+        columnGap: theme.spacing(1),
+        display: 'flex',
+        flex: 1,
+        minWidth: 0,
+    },
+    // TODO [sc-162475]: 0.625rem (10px) is below the recommended minimum font size for accessibility — address in followup
+    selectedSummaryPrimaryText: {
+        color: theme.palette.grey[700],
+        fontSize: '0.625rem',
+        fontWeight: theme.typography.fontWeightRegular,
+        lineHeight: 1.2,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+    selectedSummaryIcon: {
+        color: theme.palette.success.main,
+    },
+}));
+const useOptionsStyles = core.makeStyles((theme) => ({
+    options: {
+        color: theme.palette.info.main,
+        marginBottom: theme.spacing(1.5),
+        minWidth: 'unset',
+        padding: 0,
+    },
+    inlineOptions: {
+        alignItems: 'center',
+        display: 'inline-flex',
+        justifyContent: 'center',
+        height: 'auto',
+        marginBottom: 0,
+        minHeight: 'unset',
+        paddingBottom: 0,
+        paddingLeft: '10px',
+        paddingRight: 0,
+        paddingTop: 0,
+        '& .MuiTypography-root': {
+            // TODO [sc-162475]: 0.625rem (10px) is below the recommended minimum font size for accessibility — address in followup
+            fontSize: '0.625rem',
+            lineHeight: 1.2,
+        },
+    },
+}));
+
+const Label = (props) => {
+    const { name, price, disabled = false, hidePrice = false, isSelected = false, selectedSummary, enableSelectedModifierStyles = false, } = props;
+    const classes = useLabelStyles();
+    const numericPrice = price ? parseFloat(price.replace(/[^0-9.-]/g, '')) : NaN;
+    const shouldHidePrice = hidePrice || !price || numericPrice === 0 || isNaN(numericPrice);
+    const showSelectedSummary = Boolean(enableSelectedModifierStyles && isSelected && selectedSummary);
+    return (React.createElement(core.Box, { display: "flex", flexDirection: "column", className: classNames({ [classes.label]: !showSelectedSummary, [classes.selectedLabel]: showSelectedSummary }) },
+        React.createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 8 },
+            React.createElement(core.Typography, { className: classNames({
+                    [classes.disabled]: disabled,
+                }) }, name)),
+        !shouldHidePrice && (React.createElement(core.Typography, { className: classNames({ [classes.price]: !disabled }, { [classes.disabled]: disabled }) }, `+ ${price}`)),
+        showSelectedSummary && React.createElement(core.Typography, { className: classes.selectedSummary }, selectedSummary)));
+};
+const Options = (props) => {
+    const { handleOptionsClick, actionLabel, hidden = false, inline = false } = props;
+    const classes = useOptionsStyles();
+    const displayActionLabel = inline ? (actionLabel === 'UPDATE' ? 'Update' : 'Options') : actionLabel;
+    if (hidden)
+        return null;
+    return (React.createElement(core.Box, null,
+        React.createElement(Button, { variation: "none", className: classNames(classes.options, { [classes.inlineOptions]: inline }), onClick: handleOptionsClick },
+            React.createElement(core.Typography, { variant: "caption" }, displayActionLabel),
+            !inline && React.createElement(commonUi.Icon, { icon: webIcons.ChevronRight }))));
+};
+const getIsSelected = (modifierId, value) => value.some((modifierValue) => modifierValue.modifierId === modifierId && modifierValue.quantity > 0);
+const getActionLabel = (isSelected, props) => props.modifierControlsOptions?.showUpdateButton && isSelected ? 'UPDATE' : 'OPTIONS';
+const shouldHideNestedOptionsButton = (isSelected, props) => Boolean(props.modifierControlsOptions?.hideNestedOptionsButton ||
+    (props.modifierControlsOptions?.enableSelectedModifierStyles && !isSelected));
+const shouldShowInlineAction = (isSelected, props) => Boolean(isSelected &&
+    props.modifierControlsOptions?.enableSelectedModifierStyles &&
+    !props.modifierControlsOptions?.hideNestedOptionsButton);
+const getModifierActionState = (modifier, isSelected, props) => ({
+    isSelected,
+    shouldHideNestedOptions: shouldHideNestedOptionsButton(isSelected, props),
+    showInlineAction: shouldShowInlineAction(isSelected, props),
+    actionLabel: getActionLabel(isSelected, props),
+    selectedSummary: props.modifierControlsOptions?.selectedNestedSummaryByModifierId?.[modifier.id],
+});
+const NestedModifierActions = (props) => {
+    const { modifier, handleOptionsClick, state, renderRegularButton = true } = props;
+    const labelClasses = useLabelStyles();
+    if (!modifier.hasModifiers || modifier.outOfStock)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        state.showInlineAction && state.selectedSummary && (React.createElement(core.Box, { className: labelClasses.selectedSummaryInlineRow },
+            React.createElement(core.Box, { className: labelClasses.selectedSummaryPrimary },
+                React.createElement(commonUi.Icon, { icon: webIcons.CheckCircle, size: "medium", className: labelClasses.selectedSummaryIcon }),
+                React.createElement(core.Typography, { variant: "caption", className: labelClasses.selectedSummaryPrimaryText }, state.selectedSummary)),
+            React.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id), actionLabel: state.actionLabel, inline: true, hidden: state.shouldHideNestedOptions }))),
+        renderRegularButton && (React.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id), actionLabel: state.actionLabel, hidden: state.shouldHideNestedOptions || (state.showInlineAction && Boolean(state.selectedSummary)) }))));
+};
+const SingleSelectModifierControl = (props) => {
+    const { modifiers, name, isOutOfStock, onChange, value, handleOptionsClick, aggregatePrice, isRequired } = props;
+    const radioClasses = useRadioModifierFormStyles();
+    const makeHandleChange = (modifier) => (e) => {
+        const isModifierInValue = Boolean(value.find((v) => v.modifierId === modifier.id));
+        if (!isModifierInValue && modifier.hasModifiers && !props.modifierControlsOptions?.hideNestedOptionsButton) {
+            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.createElement(core.FormControl, { fullWidth: true },
+        React.createElement(core.RadioGroup, { className: radioClasses.radioGroup, "aria-label": name }, modifiers.map((modifier) => {
+            const modifierActionState = getModifierActionState(modifier, getIsSelected(modifier.id, value), props);
+            return (React.createElement(core.Box, { key: modifier.id },
+                React.createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React.createElement(core.Radio, { checked: value[0]?.modifierId === modifier.id, className: classNames({
+                            [radioClasses.hideRadio]: modifier.outOfStock,
+                            [radioClasses.radio]: !modifier.outOfStock,
+                        }), disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier), required: isRequired }), label: React.createElement(core.Box, { className: radioClasses.label },
+                        React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice, isSelected: modifierActionState.isSelected, enableSelectedModifierStyles: props.modifierControlsOptions?.enableSelectedModifierStyles, selectedSummary: modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary }),
+                        modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
+                            React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
+                React.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState })));
+        }))));
+};
+const MultipleSelectControl = (props) => {
+    const { modifiers, value, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, aggregatePrice } = props;
+    const classes = useCheckboxModifierFormStyles();
+    const makeHandleChange = (modifier) => () => {
+        const isModifierInValue = Boolean(value.find((v) => v.modifierId === modifier.id));
+        if (!isModifierInValue && modifier.hasModifiers && !props.modifierControlsOptions?.hideNestedOptionsButton) {
+            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.createElement(core.FormControl, { fullWidth: true },
+        React.createElement(core.FormGroup, { className: classes.formGroup }, modifiers.map((modifier) => {
+            const modifierActionState = getModifierActionState(modifier, getIsSelected(modifier.id, value), props);
+            return (React.createElement(core.Box, { key: modifier.id },
+                React.createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some((v) => v.modifierId === modifier.id), onChange: makeHandleChange(modifier), control: React.createElement(core.Checkbox, { className: classNames({ [classes.hideCheckbox]: modifier.outOfStock }, { [classes.checkbox]: !modifier.outOfStock }), disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React.createElement(core.Box, { className: classes.label },
+                        React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice, isSelected: modifierActionState.isSelected, enableSelectedModifierStyles: props.modifierControlsOptions?.enableSelectedModifierStyles, selectedSummary: modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary }),
+                        modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
+                            React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
+                React.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState })));
+        }))));
+};
+const MultipleQuantitySelectControl = (props) => {
+    const { modifiers, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, selectionQuantity, aggregatePrice, } = props;
+    const makeHandleChange = (modifier) => (_e, customEvent) => {
+        onChange({
+            isRadio: false,
+            modifierId: modifier.id,
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: customEvent.quantity,
+        });
+    };
+    return (React.createElement(core.FormControl, { fullWidth: true },
+        React.createElement(core.FormGroup, null, modifiers.map((modifier) => {
+            const modifierActionState = getModifierActionState(modifier, modifier.quantity > 0, props);
+            return (React.createElement(core.Box, { key: modifier.id, style: { justifyContent: 'space-between', flexDirection: 'column' }, display: "flex" },
+                React.createElement(core.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
+                    React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice, isSelected: modifierActionState.isSelected, enableSelectedModifierStyles: props.modifierControlsOptions?.enableSelectedModifierStyles, selectedSummary: modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary }),
+                    modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
+                        React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" }))),
+                    !modifier.outOfStock && (React.createElement(QuantityPicker, { incrementButtonTitle: `Add ${modifier.name}`, decrementButtonTitle: `Remove ${modifier.name}`, id: `${modifier.id}-quantity-picker`, variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock, name: modifier.name }))),
+                React.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState, renderRegularButton: false }),
+                React.createElement(core.Box, { display: "flex", alignItems: "flex-start", gridGap: 4 },
+                    modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id), actionLabel: modifierActionState.actionLabel, hidden: modifierActionState.shouldHideNestedOptions ||
+                            (modifierActionState.showInlineAction && Boolean(modifierActionState.selectedSummary)) })),
+                    selectionQuantity[modifier.id] &&
+                        selectionQuantity[modifier.id].requiredSelectionCount > 0 &&
+                        selectionQuantity[modifier.id].requiredSelectionCount !==
+                            selectionQuantity[modifier.id].currentSelectionCount && (React.createElement(core.Typography, { variant: "caption", color: "error" },
+                        selectionQuantity[modifier.id].currentSelectionCount,
+                        "/",
+                        selectionQuantity[modifier.id].requiredSelectionCount,
+                        " selected")))));
+        }))));
+};
+const ModifierControls = (props) => {
+    switch (props.type) {
+        case 'singleSelect':
+            return React.createElement(SingleSelectModifierControl, { ...props });
+        case 'multipleSelect':
+            return React.createElement(MultipleSelectControl, { ...props });
+        case 'multipleQuantitySelect':
+            return React.createElement(MultipleQuantitySelectControl, { ...props });
+        default:
+            return null;
+    }
+};
+
+const getStatusTagProps = (props) => {
+    const { messages, error, isRequired, isOutOfStock } = props;
+    const { optionalText, outOfStockText, requiredText } = messages;
+    let color = 'default';
+    switch (true) {
+        case error:
+            color = 'error';
+            break;
+        case isOutOfStock:
+            color = 'warning';
+            break;
+    }
+    let label = optionalText;
+    switch (true) {
+        case isOutOfStock:
+            label = outOfStockText;
+            break;
+        case isRequired:
+            label = requiredText;
+            break;
+    }
+    const variant = isRequired || isOutOfStock ? 'outlined' : 'filled';
+    return { color, label, variant };
+};
+const NestedModsV2DishModifierCard = (props) => {
+    const { aggregatePrice, name, disableNewSelections, modifiers, value, messages, onChange, type, error, isOutOfStock, isRequired, handleOptionsClick, selectionQuantity, modifierControlsOptions, disableCardStyle = false, hideName = false, } = props;
+    const classes = useDishModifierCardStyles();
+    return (React.createElement(commonUi.Box, { className: classNames(classes.root, { [classes.card]: !disableCardStyle }) },
+        React.createElement(commonUi.Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
+            React.createElement(commonUi.Box, { className: classNames({ [classes.optionalStatusTag]: !isRequired && !isOutOfStock }) },
+                React.createElement(StatusTag, { ...getStatusTagProps(props) })),
+            !isOutOfStock && (React.createElement(commonUi.Typography, { variant: "subtitle1", className: classNames({ [classes.error]: error, [classes.helperText]: !error }) }, messages.helperText))),
+        !hideName && (React.createElement(commonUi.Typography, { component: "h3", className: classes.name }, name)),
+        React.createElement(commonUi.Box, null,
+            React.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, modifierControlsOptions: modifierControlsOptions }))));
+};
+NestedModsV2DishModifierCard.displayName = 'NestedModsV2DishModifierCard';
+
 const palette = {
     primary: {
         main: '#0A202F',
@@ -1895,6 +2320,7 @@ exports.DialogTitle = DialogTitle;
 exports.DishCheckoutCard = DishCheckoutCard;
 exports.DishDetailsReview = DishDetailsReview;
 exports.DishModifierCard = DishModifierCard;
+exports.ExpandableModifierGroup = ExpandableModifierGroup;
 exports.ItemTag = ItemTag;
 exports.ItemTagGroup = ItemTagGroup;
 exports.LocationCard = LocationCard;
@@ -1908,6 +2334,7 @@ exports.MenuSection = MenuSection;
 exports.MenuSectionGroup = MenuSectionGroup;
 exports.MenuTab = MenuTab;
 exports.MenuTabGroup = MenuTabGroup;
+exports.NestedModsV2DishModifierCard = NestedModsV2DishModifierCard;
 exports.OrderingAppContext = OrderingAppContext;
 exports.OrderingAppContextProvider = OrderingAppContextProvider;
 exports.PageSection = PageSection;