@open-tender/store 1.1.200 → 1.1.202

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 (9) hide show
  1. package/dist/cjs/components/CategoryItem.d.ts +4 -3
  2. package/dist/cjs/components/CategoryItem.js +19 -8
  3. package/dist/cjs/components/CategoryNavItem.d.ts +4 -4
  4. package/dist/cjs/components/CategoryNavItem.js +6 -8
  5. package/dist/esm/components/CategoryItem.d.ts +4 -3
  6. package/dist/esm/components/CategoryItem.js +19 -8
  7. package/dist/esm/components/CategoryNavItem.d.ts +4 -4
  8. package/dist/esm/components/CategoryNavItem.js +6 -8
  9. package/package.json +3 -3
package/dist/cjs/components/CategoryItem.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  import { MenuItem, MenuItemFavorite } from '@open-tender/types';
2
2
  import { CategoryItemProps } from '@open-tender/ui';
3
3
  import { ReactNode } from 'react';
4
- declare const CategoryItem: ({ item, favorite, allergenAlerts, placeholder, navigate, children }: {
4
+ interface CategoryItemInterface {
5
5
  item: MenuItem;
6
6
  favorite?: MenuItemFavorite;
7
7
  allergenAlerts?: string[];
8
8
  placeholder?: string;
9
9
  navigate: (route: string) => void;
10
10
  children: (props: CategoryItemProps) => ReactNode;
11
- }) => ReactNode;
12
- export default CategoryItem;
11
+ }
12
+ declare const _default: import("react").MemoExoticComponent<({ item, favorite, allergenAlerts, placeholder, navigate, children }: CategoryItemInterface) => ReactNode>;
13
+ export default _default;
package/dist/cjs/components/CategoryItem.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  var tslib_1 = require("tslib");
4
4
  var utils_1 = require("@open-tender/utils");
5
+ var react_1 = require("react");
5
6
  var hooks_1 = require("../app/hooks");
6
7
  var slices_1 = require("../slices");
7
8
  var CategoryItem = function (_a) {
@@ -16,14 +17,18 @@ var CategoryItem = function (_a) {
16
17
  var displaySettings = {};
17
18
  var _b = displaySettings || {}, _c = _b.calories, showCals = _c === void 0 ? false : _c, _d = _b.tags, showTags = _d === void 0 ? false : _d, _e = _b.allergens, showAllergens = _e === void 0 ? false : _e;
18
19
  var showDesc = 'SHOW';
19
- var orderItem = favorite
20
- ? tslib_1.__assign(tslib_1.__assign({}, (0, utils_1.rehydrateOrderItem)(item, favorite.item)), { index: -1 }) : (0, utils_1.makeOrderItem)(item, undefined, soldOut, undefined, hasPoints);
20
+ var orderItem = (0, react_1.useMemo)(function () {
21
+ return favorite
22
+ ? tslib_1.__assign(tslib_1.__assign({}, (0, utils_1.rehydrateOrderItem)(item, favorite.item)), { index: -1 }) : (0, utils_1.makeOrderItem)(item, undefined, soldOut, undefined, hasPoints);
23
+ }, [favorite, hasPoints, item, soldOut]);
21
24
  var cartItem = (0, utils_1.useOrderItem)(orderItem, favorite, allergenAlerts, cartCounts, showCals, showTags, showAllergens, showDesc);
22
- var browse = function () {
23
- dispatch((0, slices_1.setCurrentItem)(cartItem));
24
- navigate('/menu/item');
25
- };
26
- var handlers = { browse: browse };
25
+ var handlers = (0, react_1.useMemo)(function () {
26
+ var browse = function () {
27
+ dispatch((0, slices_1.setCurrentItem)(cartItem));
28
+ navigate('/menu/item');
29
+ };
30
+ return { browse: browse };
31
+ }, [navigate, dispatch, cartItem]);
27
32
  if (!config)
28
33
  return null;
29
34
  return children({
@@ -35,4 +40,10 @@ var CategoryItem = function (_a) {
35
40
  displayCals: display_cals
36
41
  });
37
42
  };
38
- exports.default = CategoryItem;
43
+ exports.default = (0, react_1.memo)(CategoryItem, areEqualProps);
44
+ function areEqualProps(oldProps, newProps) {
45
+ var _a, _b, _c, _d;
46
+ return (oldProps.item.id === newProps.item.id &&
47
+ ((_a = oldProps.favorite) === null || _a === void 0 ? void 0 : _a.item.id) === ((_b = newProps.favorite) === null || _b === void 0 ? void 0 : _b.item.id) &&
48
+ ((_c = oldProps.allergenAlerts) === null || _c === void 0 ? void 0 : _c.length) === ((_d = newProps.allergenAlerts) === null || _d === void 0 ? void 0 : _d.length));
49
+ }
package/dist/cjs/components/CategoryNavItem.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { MenuCategory } from '@open-tender/types';
2
2
  import { CategoryNavItemProps } from '@open-tender/ui';
3
3
  import { ReactNode } from 'react';
4
- declare const CategoryNavItem: ({ index, category, children, navigate, scrollToIndex }: {
5
- index?: number;
4
+ declare const CategoryNavItem: ({ category, isScrollable, isActive, children, navigate }: {
6
5
  category: MenuCategory;
7
- navigate: (route: string) => void;
6
+ isScrollable?: boolean;
7
+ isActive?: boolean;
8
+ navigate?: (route: string) => void;
8
9
  children: (props: CategoryNavItemProps) => ReactNode;
9
- scrollToIndex?: (index: number) => void;
10
10
  }) => ReactNode;
11
11
  export default CategoryNavItem;
package/dist/cjs/components/CategoryNavItem.js CHANGED
@@ -4,24 +4,21 @@ var ui_1 = require("@open-tender/ui");
4
4
  var hooks_1 = require("../app/hooks");
5
5
  var slices_1 = require("../slices");
6
6
  var CategoryNavItem = function (_a) {
7
- var index = _a.index, category = _a.category, children = _a.children, navigate = _a.navigate, scrollToIndex = _a.scrollToIndex;
7
+ var category = _a.category, isScrollable = _a.isScrollable, isActive = _a.isActive, children = _a.children, navigate = _a.navigate;
8
8
  var dispatch = (0, hooks_1.useAppDispatch)();
9
9
  var apiUrl = (0, hooks_1.useAppSelector)(slices_1.selectKioskApi);
10
10
  var display_category_nav_page = (0, hooks_1.useAppSelector)(slices_1.selectStoreSettings).display_category_nav_page;
11
11
  var current = (0, hooks_1.useAppSelector)(slices_1.selectCurrentCategory);
12
- var isCurrent = (current === null || current === void 0 ? void 0 : current.id) === category.id;
12
+ var isCurrent = isActive || (current === null || current === void 0 ? void 0 : current.id) === category.id;
13
13
  var _b = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig), categoryNavItem = _b.categoryNavItem, categoryNavItemSelected = _b.categoryNavItemSelected;
14
14
  var config = isCurrent ? categoryNavItemSelected : categoryNavItem;
15
15
  var name = category.name;
16
16
  var imageUrl = (0, ui_1.makeImageUrl)(category);
17
17
  var browse = function () {
18
18
  dispatch((0, slices_1.setCurrentCategory)(category));
19
- if (scrollToIndex && index !== undefined) {
20
- scrollToIndex(index);
21
- }
22
- else {
19
+ !isScrollable &&
20
+ navigate &&
23
21
  navigate(display_category_nav_page ? '/menu/category' : '/menu');
24
- }
25
22
  };
26
23
  var handlers = { browse: browse };
27
24
  if (!config)
@@ -31,7 +28,8 @@ var CategoryNavItem = function (_a) {
31
28
  handlers: handlers,
32
29
  title: name,
33
30
  imageUrl: imageUrl,
34
- apiUrl: apiUrl
31
+ apiUrl: apiUrl,
32
+ disabled: isScrollable
35
33
  });
36
34
  };
37
35
  exports.default = CategoryNavItem;
package/dist/esm/components/CategoryItem.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  import { MenuItem, MenuItemFavorite } from '@open-tender/types';
2
2
  import { CategoryItemProps } from '@open-tender/ui';
3
3
  import { ReactNode } from 'react';
4
- declare const CategoryItem: ({ item, favorite, allergenAlerts, placeholder, navigate, children }: {
4
+ interface CategoryItemInterface {
5
5
  item: MenuItem;
6
6
  favorite?: MenuItemFavorite;
7
7
  allergenAlerts?: string[];
8
8
  placeholder?: string;
9
9
  navigate: (route: string) => void;
10
10
  children: (props: CategoryItemProps) => ReactNode;
11
- }) => ReactNode;
12
- export default CategoryItem;
11
+ }
12
+ declare const _default: import("react").MemoExoticComponent<({ item, favorite, allergenAlerts, placeholder, navigate, children }: CategoryItemInterface) => ReactNode>;
13
+ export default _default;
package/dist/esm/components/CategoryItem.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { __assign } from "tslib";
2
2
  import { makeOrderItem, rehydrateOrderItem, useOrderItem } from '@open-tender/utils';
3
+ import { memo, useMemo } from 'react';
3
4
  import { useAppDispatch, useAppSelector } from '../app/hooks';
4
5
  import { selectCartCounts, selectKioskApi, selectKioskConfig, selectMenu, selectStoreSettings, setCurrentItem } from '../slices';
5
6
  var CategoryItem = function (_a) {
@@ -14,14 +15,18 @@ var CategoryItem = function (_a) {
14
15
  var displaySettings = {};
15
16
  var _b = displaySettings || {}, _c = _b.calories, showCals = _c === void 0 ? false : _c, _d = _b.tags, showTags = _d === void 0 ? false : _d, _e = _b.allergens, showAllergens = _e === void 0 ? false : _e;
16
17
  var showDesc = 'SHOW';
17
- var orderItem = favorite
18
- ? __assign(__assign({}, rehydrateOrderItem(item, favorite.item)), { index: -1 }) : makeOrderItem(item, undefined, soldOut, undefined, hasPoints);
18
+ var orderItem = useMemo(function () {
19
+ return favorite
20
+ ? __assign(__assign({}, rehydrateOrderItem(item, favorite.item)), { index: -1 }) : makeOrderItem(item, undefined, soldOut, undefined, hasPoints);
21
+ }, [favorite, hasPoints, item, soldOut]);
19
22
  var cartItem = useOrderItem(orderItem, favorite, allergenAlerts, cartCounts, showCals, showTags, showAllergens, showDesc);
20
- var browse = function () {
21
- dispatch(setCurrentItem(cartItem));
22
- navigate('/menu/item');
23
- };
24
- var handlers = { browse: browse };
23
+ var handlers = useMemo(function () {
24
+ var browse = function () {
25
+ dispatch(setCurrentItem(cartItem));
26
+ navigate('/menu/item');
27
+ };
28
+ return { browse: browse };
29
+ }, [navigate, dispatch, cartItem]);
25
30
  if (!config)
26
31
  return null;
27
32
  return children({
@@ -33,4 +38,10 @@ var CategoryItem = function (_a) {
33
38
  displayCals: display_cals
34
39
  });
35
40
  };
36
- export default CategoryItem;
41
+ export default memo(CategoryItem, areEqualProps);
42
+ function areEqualProps(oldProps, newProps) {
43
+ var _a, _b, _c, _d;
44
+ return (oldProps.item.id === newProps.item.id &&
45
+ ((_a = oldProps.favorite) === null || _a === void 0 ? void 0 : _a.item.id) === ((_b = newProps.favorite) === null || _b === void 0 ? void 0 : _b.item.id) &&
46
+ ((_c = oldProps.allergenAlerts) === null || _c === void 0 ? void 0 : _c.length) === ((_d = newProps.allergenAlerts) === null || _d === void 0 ? void 0 : _d.length));
47
+ }
package/dist/esm/components/CategoryNavItem.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { MenuCategory } from '@open-tender/types';
2
2
  import { CategoryNavItemProps } from '@open-tender/ui';
3
3
  import { ReactNode } from 'react';
4
- declare const CategoryNavItem: ({ index, category, children, navigate, scrollToIndex }: {
5
- index?: number;
4
+ declare const CategoryNavItem: ({ category, isScrollable, isActive, children, navigate }: {
6
5
  category: MenuCategory;
7
- navigate: (route: string) => void;
6
+ isScrollable?: boolean;
7
+ isActive?: boolean;
8
+ navigate?: (route: string) => void;
8
9
  children: (props: CategoryNavItemProps) => ReactNode;
9
- scrollToIndex?: (index: number) => void;
10
10
  }) => ReactNode;
11
11
  export default CategoryNavItem;
package/dist/esm/components/CategoryNavItem.js CHANGED
@@ -2,24 +2,21 @@ import { makeImageUrl } from '@open-tender/ui';
2
2
  import { useAppDispatch, useAppSelector } from '../app/hooks';
3
3
  import { selectCurrentCategory, selectKioskApi, selectKioskConfig, selectStoreSettings, setCurrentCategory } from '../slices';
4
4
  var CategoryNavItem = function (_a) {
5
- var index = _a.index, category = _a.category, children = _a.children, navigate = _a.navigate, scrollToIndex = _a.scrollToIndex;
5
+ var category = _a.category, isScrollable = _a.isScrollable, isActive = _a.isActive, children = _a.children, navigate = _a.navigate;
6
6
  var dispatch = useAppDispatch();
7
7
  var apiUrl = useAppSelector(selectKioskApi);
8
8
  var display_category_nav_page = useAppSelector(selectStoreSettings).display_category_nav_page;
9
9
  var current = useAppSelector(selectCurrentCategory);
10
- var isCurrent = (current === null || current === void 0 ? void 0 : current.id) === category.id;
10
+ var isCurrent = isActive || (current === null || current === void 0 ? void 0 : current.id) === category.id;
11
11
  var _b = useAppSelector(selectKioskConfig), categoryNavItem = _b.categoryNavItem, categoryNavItemSelected = _b.categoryNavItemSelected;
12
12
  var config = isCurrent ? categoryNavItemSelected : categoryNavItem;
13
13
  var name = category.name;
14
14
  var imageUrl = makeImageUrl(category);
15
15
  var browse = function () {
16
16
  dispatch(setCurrentCategory(category));
17
- if (scrollToIndex && index !== undefined) {
18
- scrollToIndex(index);
19
- }
20
- else {
17
+ !isScrollable &&
18
+ navigate &&
21
19
  navigate(display_category_nav_page ? '/menu/category' : '/menu');
22
- }
23
20
  };
24
21
  var handlers = { browse: browse };
25
22
  if (!config)
@@ -29,7 +26,8 @@ var CategoryNavItem = function (_a) {
29
26
  handlers: handlers,
30
27
  title: name,
31
28
  imageUrl: imageUrl,
32
- apiUrl: apiUrl
29
+ apiUrl: apiUrl,
30
+ disabled: isScrollable
33
31
  });
34
32
  };
35
33
  export default CategoryNavItem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@open-tender/store",
3
- "version": "1.1.200",
3
+ "version": "1.1.202",
4
4
  "description": "A library of hooks, reducers, utility functions, and types for use with Open Tender applications that utilize our in-store POS API",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",
@@ -61,8 +61,8 @@
61
61
  },
62
62
  "peerDependencies": {
63
63
  "@emotion/react": "^11.11.1",
64
- "@open-tender/types": "^0.4.82",
65
- "@open-tender/ui": "^0.4.15",
64
+ "@open-tender/types": "^0.4.84",
65
+ "@open-tender/ui": "^0.4.17",
66
66
  "@open-tender/utils": "^0.4.61",
67
67
  "@reduxjs/toolkit": "^2.0.1",
68
68
  "date-fns": "2.30.0",