@popmenu/ordering-ui 0.113.3 → 0.113.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/build/components/DishModifierCard/DishModifierCardProps.d.ts +1 -1
  2. package/build/index.es.js +50 -18
  3. package/build/index.es.js.map +1 -1
  4. package/build/index.js +50 -18
  5. package/build/index.js.map +1 -1
  6. package/package.json +2 -2
package/build/index.js CHANGED
@@ -1716,6 +1716,11 @@ var useDishModifierCardStyles = styles.makeStyles(function (theme) { return ({
1716
1716
  },
1717
1717
  }); });
1718
1718
  var useRadioModifierFormStyles = styles.makeStyles(function (theme) { return ({
1719
+ label: {
1720
+ alignItems: 'center',
1721
+ display: 'flex',
1722
+ justifyContent: 'space-between',
1723
+ },
1719
1724
  radio: {
1720
1725
  fontSize: theme.spacing(2),
1721
1726
  padding: 'unset',
@@ -1724,14 +1729,25 @@ var useRadioModifierFormStyles = styles.makeStyles(function (theme) { return ({
1724
1729
  color: theme.palette.info.main,
1725
1730
  },
1726
1731
  },
1732
+ hideRadio: {
1733
+ display: 'none',
1734
+ },
1727
1735
  root: {
1728
1736
  justifyContent: 'space-between',
1729
1737
  margin: 0,
1730
1738
  width: 'fill-available',
1739
+ '& > :last-child': {
1740
+ flex: 1,
1741
+ },
1731
1742
  },
1732
1743
  }); });
1733
1744
  var useCheckboxModifierFormStyles = styles.makeStyles(function (theme) { return ({
1734
- radio: {
1745
+ label: {
1746
+ alignItems: 'center',
1747
+ display: 'flex',
1748
+ justifyContent: 'space-between',
1749
+ },
1750
+ checkbox: {
1735
1751
  color: '#616161',
1736
1752
  fontSize: theme.spacing(2),
1737
1753
  marginRight: theme.spacing(-0.25),
@@ -1740,18 +1756,23 @@ var useCheckboxModifierFormStyles = styles.makeStyles(function (theme) { return
1740
1756
  color: theme.palette.info.main,
1741
1757
  },
1742
1758
  },
1759
+ hideCheckbox: {
1760
+ display: 'none',
1761
+ },
1743
1762
  root: {
1744
- justifyContent: 'space-between',
1745
1763
  margin: 0,
1746
1764
  width: 'fill-available',
1765
+ '& > :last-child': {
1766
+ flex: 1,
1767
+ },
1747
1768
  },
1748
1769
  }); });
1749
1770
  var useLabelStyles = styles.makeStyles(function (theme) { return ({
1750
1771
  label: {
1751
1772
  margin: theme.spacing(0.5, 0),
1752
1773
  },
1753
- outOfStock: {
1754
- color: theme.palette.warning.dark,
1774
+ disabled: {
1775
+ color: theme.palette.grey[500],
1755
1776
  },
1756
1777
  price: {
1757
1778
  color: theme.palette.grey[700],
@@ -1836,15 +1857,15 @@ var QuantityPicker = function (props) {
1836
1857
  };
1837
1858
 
1838
1859
  var Label = function (props) {
1839
- var name = props.name, price = props.price, outOfStock = props.outOfStock, messages = props.messages;
1860
+ var _a, _b, _c;
1861
+ var name = props.name, price = props.price, _d = props.disabled, disabled = _d === void 0 ? false : _d;
1840
1862
  var classes = useLabelStyles();
1841
1863
  return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", className: classes.label },
1842
1864
  React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 8 },
1843
- React__default['default'].createElement(core.Typography, null, name),
1844
- outOfStock && (React__default['default'].createElement(core.Typography, { variant: "caption", className: classes.outOfStock }, messages.outOfStockText))),
1845
- price && React__default['default'].createElement(core.Typography, null,
1865
+ React__default['default'].createElement(core.Typography, { className: classNames((_a = {}, _a[classes.disabled] = disabled, _a)) }, name)),
1866
+ price && (React__default['default'].createElement(core.Typography, { className: classNames((_b = {}, _b[classes.price] = !disabled, _b), (_c = {}, _c[classes.disabled] = disabled, _c)) },
1846
1867
  "+ ",
1847
- price)));
1868
+ price))));
1848
1869
  };
1849
1870
  var Options = function (props) {
1850
1871
  var handleOptionsClick = props.handleOptionsClick, modifierId = props.modifierId;
@@ -1855,7 +1876,7 @@ var Options = function (props) {
1855
1876
  React__default['default'].createElement(Icon, { icon: SvgChevronRight }))));
1856
1877
  };
1857
1878
  var SingleSelectModifierControl = function (props) {
1858
- var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, messages = props.messages, handleOptionsClick = props.handleOptionsClick;
1879
+ var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, handleOptionsClick = props.handleOptionsClick;
1859
1880
  var radioClasses = useRadioModifierFormStyles();
1860
1881
  var makeHandleChange = function (modifier) { return function (e) {
1861
1882
  onChange({
@@ -1869,14 +1890,18 @@ var SingleSelectModifierControl = function (props) {
1869
1890
  }; };
1870
1891
  return (React__default['default'].createElement(core.FormControl, { fullWidth: true },
1871
1892
  React__default['default'].createElement(core.RadioGroup, null, modifiers.map(function (modifier) {
1872
- var _a;
1893
+ var _a, _b;
1894
+ var _c;
1873
1895
  return (React__default['default'].createElement(core.Box, { key: modifier.id },
1874
- React__default['default'].createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React__default['default'].createElement(core.Radio, { checked: ((_a = value[0]) === null || _a === void 0 ? void 0 : _a.modifierId) === modifier.id, className: radioClasses.radio, disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier) }), label: React__default['default'].createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }), labelPlacement: "start" }),
1896
+ React__default['default'].createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React__default['default'].createElement(core.Radio, { checked: ((_c = value[0]) === null || _c === void 0 ? void 0 : _c.modifierId) === modifier.id, className: classNames((_a = {}, _a[radioClasses.hideRadio] = modifier.outOfStock, _a), (_b = {}, _b[radioClasses.radio] = !modifier.outOfStock, _b)), disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier) }), label: React__default['default'].createElement(core.Box, { className: radioClasses.label },
1897
+ React__default['default'].createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
1898
+ modifier.outOfStock && (React__default['default'].createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
1899
+ React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
1875
1900
  modifier.hasModifiers && React__default['default'].createElement(Options, { handleOptionsClick: handleOptionsClick, modifierId: modifier.id })));
1876
1901
  }))));
1877
1902
  };
1878
1903
  var MultipleSelectControl = function (props) {
1879
- var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, messages = props.messages, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick;
1904
+ var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick;
1880
1905
  var classes = useCheckboxModifierFormStyles();
1881
1906
  var makeHandleChange = function (modifier) { return function () {
1882
1907
  var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
@@ -1891,13 +1916,17 @@ var MultipleSelectControl = function (props) {
1891
1916
  }; };
1892
1917
  return (React__default['default'].createElement(core.FormControl, { fullWidth: true },
1893
1918
  React__default['default'].createElement(core.FormGroup, null, modifiers.map(function (modifier) {
1919
+ var _a, _b;
1894
1920
  return (React__default['default'].createElement(core.Box, { key: modifier.id },
1895
- React__default['default'].createElement(core.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['default'].createElement(core.Checkbox, { className: classes.radio, disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React__default['default'].createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }), labelPlacement: "start" }),
1921
+ React__default['default'].createElement(core.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['default'].createElement(core.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['default'].createElement(core.Box, { className: classes.label },
1922
+ React__default['default'].createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
1923
+ modifier.outOfStock && (React__default['default'].createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
1924
+ React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
1896
1925
  modifier.hasModifiers && React__default['default'].createElement(Options, { handleOptionsClick: handleOptionsClick, modifierId: modifier.id })));
1897
1926
  }))));
1898
1927
  };
1899
1928
  var MultipleQuantitySelectControl = function (props) {
1900
- var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, messages = props.messages, disableNewSelections = props.disableNewSelections;
1929
+ var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections;
1901
1930
  var makeHandleChange = function (modifier) { return function (_e, customEvent) {
1902
1931
  onChange({
1903
1932
  isRadio: false,
@@ -1909,9 +1938,12 @@ var MultipleQuantitySelectControl = function (props) {
1909
1938
  });
1910
1939
  }; };
1911
1940
  return (React__default['default'].createElement(core.FormControl, { fullWidth: true },
1912
- React__default['default'].createElement(core.FormGroup, null, modifiers.map(function (modifier) { return (React__default['default'].createElement(core.Box, { key: modifier.id, style: { justifyContent: 'space-between' }, display: "flex" },
1913
- React__default['default'].createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }),
1914
- React__default['default'].createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier) }))); }))));
1941
+ React__default['default'].createElement(core.FormGroup, null, modifiers.map(function (modifier) { return (React__default['default'].createElement(core.Box, { key: modifier.id, style: { justifyContent: 'space-between', alignItems: 'center' }, display: "flex" },
1942
+ React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
1943
+ React__default['default'].createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
1944
+ modifier.outOfStock && (React__default['default'].createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
1945
+ React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" }))),
1946
+ !modifier.outOfStock && (React__default['default'].createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock }))))); }))));
1915
1947
  };
1916
1948
  var ModifierControls = function (props) {
1917
1949
  switch (props.type) {