@popmenu/ordering-ui 0.80.0 → 0.82.0

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

@@ -1,5 +1,6 @@
 declare type ModifierValue = {
     id: number | string;
+    price?: number | null;
     quantity?: number;
 };
 declare type Modifier = {

package/build/components/OrderingAppContext/OrderingAppContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface OrderingAppContextValue {
+    currencySymbol: string;
+}
+export declare const OrderingAppContext: import("react").Context<OrderingAppContextValue | null>;
+export declare const useOrderingAppContext: () => OrderingAppContextValue;
+export {};

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

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

package/build/components/index.d.ts

@@ -9,6 +9,7 @@ export { default as ItemTagGroup } from './ItemTagGroup';
 export { default as LocationCard, LocationCardProps } from './LocationCard';
 export { default as MenuDropdown, MenuDropdownProps, MenuDropdownOption } from './MenuDropdown';
 export { default as MenuFilter, MenuFilterProps, MenuFilterOption, MenuFilterChangeHandler } from './MenuFilter';
+export { OrderingAppContext, useOrderingAppContext } from './OrderingAppContext';
 export { default as ReactionCounter, ReactionCounterProps } from './ReactionCounter';
 export { default as ReactionCounterGroup } from './ReactionCounterGroup';
 export { default as QuantityPicker, QuantityPickerProps, QuantityChangeEvent } from './QuantityPicker';

package/build/index.es.js

@@ -1,7 +1,7 @@
 import { Button as Button$2, makeStyles as makeStyles$1, Box, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Avatar as Avatar$1, Card, CardActionArea, FormControl, Select, InputAdornment, MenuItem as MenuItem$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, Radio as Radio$1, Menu, TextField, Tabs, Chip } from '@material-ui/core';
 export * from '@material-ui/core';
 import * as React from 'react';
-import React__default, { forwardRef, createElement, useState } from 'react';
+import React__default, { forwardRef, createElement, useState, createContext, useContext } from 'react';
 import { makeStyles, useTheme, lighten } from '@material-ui/core/styles';
 import '@material-ui/lab/Alert';
 import '@material-ui/core/AppBar';
@@ -1499,32 +1499,63 @@ StatusTag.defaultProps = {
 };
 StatusTag.displayName = 'StatusTag';
 
+var OrderingAppContext = createContext(null);
+var useOrderingAppContext = function () {
+    var context = useContext(OrderingAppContext);
+    if (!context) {
+        throw new Error('useOrderingAppContext has to be used within <OrderingAppContext.Provider>');
+    }
+    return context;
+};
+
 var Label = function (props) {
     var name = props.name, price = props.price;
-    return (React.createElement(Box, { display: "flex", flexDirection: "column" },
-        React.createElement(Typography$1, null, name),
-        price && React.createElement(Typography$1, null,
+    return (React__default.createElement(Box, { display: "flex", flexDirection: "column" },
+        React__default.createElement(Typography$1, null, name),
+        price && React__default.createElement(Typography$1, null,
             "+ ",
             price)));
 };
 var CheckboxGroup = function (props) {
     var value = props.value, modifiers = props.modifiers, onChange = props.onChange, disableNewSelections = props.disableNewSelections;
     var classes = useCheckboxModifierFormStyles();
+    var orderingContext = useOrderingAppContext();
     var handleChange = function (event) {
-        onChange([{ id: parseInt(event.target.value), quantity: 1 }], event.target.checked);
+        var _a;
+        var price = (_a = modifiers.find(function (modifier) { return modifier.id === parseInt(event.target.value); })) === null || _a === void 0 ? void 0 : _a.price;
+        onChange([
+            {
+                id: parseInt(event.target.value),
+                price: (price && parseInt(price)) || 0,
+                quantity: 1,
+            },
+        ], event.target.checked);
     };
-    return (React.createElement(Box, { display: "flex", flexDirection: "column" }, modifiers.map(function (modifier, index) {
+    return (React__default.createElement(Box, { display: "flex", flexDirection: "column" }, modifiers.map(function (modifier, index) {
         var targetValue = value === null || value === void 0 ? void 0 : value.find(function (v) { return v.id == modifier.id; });
-        return (React.createElement(FormControlLabel$1, { key: index, value: modifier.id, control: React.createElement(Checkbox$1, { className: classes.radio, disabled: !targetValue && disableNewSelections }), label: React.createElement(Label, { name: modifier.name, price: modifier.price }), className: classes.root, checked: !!targetValue, onChange: handleChange }));
+        return (React__default.createElement(FormControlLabel$1, { key: index, value: modifier.id, control: React__default.createElement(Checkbox$1, { className: classes.radio, disabled: !targetValue && disableNewSelections }), label: React__default.createElement(Label, { name: modifier.name, price: modifier.price
+                    ? "" + (orderingContext && orderingContext.currencySymbol) + Number(modifier.price).toFixed(2)
+                    : null }), className: classes.root, checked: !!targetValue, onChange: handleChange }));
     })));
 };
 var RadioGroup = function (props) {
     var value = props.value, modifiers = props.modifiers, onChange = props.onChange;
     var classes = useRadioModifierFormStyles();
+    var orderingContext = useOrderingAppContext();
     var handleChange = function (event) {
-        onChange([{ id: parseInt(event.target.value), quantity: 1 }]);
+        var _a;
+        var price = (_a = modifiers.find(function (modifier) { return modifier.id === parseInt(event.target.value); })) === null || _a === void 0 ? void 0 : _a.price;
+        onChange([
+            {
+                id: parseInt(event.target.value),
+                price: (price && parseInt(price)) || 0,
+                quantity: 1,
+            },
+        ]);
     };
-    return (React.createElement(MuiRadioGroup, { name: "selectedModifiers", value: value ? value[0].id : '', onChange: handleChange }, modifiers.map(function (modifier, index) { return (React.createElement(FormControlLabel$1, { key: index, value: modifier.id, control: React.createElement(Radio$1, { className: classes.radio }), label: React.createElement(Label, { name: modifier.name, price: modifier.price }), className: classes.root })); })));
+    return (React__default.createElement(MuiRadioGroup, { name: "selectedModifiers", value: value ? value[0].id : '', onChange: handleChange }, modifiers.map(function (modifier, index) { return (React__default.createElement(FormControlLabel$1, { key: index, value: modifier.id, control: React__default.createElement(Radio$1, { className: classes.radio }), label: React__default.createElement(Label, { name: modifier.name, price: modifier.price
+                ? "" + (orderingContext && orderingContext.currencySymbol) + Number(modifier.price).toFixed(2)
+                : null }), className: classes.root })); })));
 };
 
 var ModifierOptionsControl = function (props) {
@@ -2055,5 +2086,5 @@ var orderingTheme = {
     props: props,
 };
 
-export { Button$1 as Button, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuDropdown, MenuFilter, MenuItem, MenuItemGroup, MenuSection, MenuSectionGroup, QuantityPicker, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, SelectedMenuFiltersList, StatusTag, orderingTheme };
+export { Button$1 as Button, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuDropdown, MenuFilter, MenuItem, MenuItemGroup, MenuSection, MenuSectionGroup, OrderingAppContext, QuantityPicker, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, SelectedMenuFiltersList, StatusTag, orderingTheme, useOrderingAppContext };
 //# sourceMappingURL=index.es.js.map