@open-tender/store 1.1.18 → 1.1.19

package/dist/cjs/components/Cart.d.ts

@@ -1,8 +1,12 @@
-import { CartProps } from '@open-tender/ui';
+import { CartProps, CartUpsellsProps, CartItemProps, QuantityProps, CartUpsellItemProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const Cart: ({ navigate, children, apiUrl }: {
+declare const Cart: ({ navigate, children, apiUrl, CartUpsellsView, CartItemView, QuantityView, CartUpsellItemView }: {
     navigate: (route: string) => void;
     children: (props: CartProps) => ReactNode;
     apiUrl: string;
+    CartUpsellsView: (props: CartUpsellsProps) => ReactNode;
+    CartItemView: (props: CartItemProps) => ReactNode;
+    QuantityView: (props: QuantityProps) => ReactNode;
+    CartUpsellItemView: (props: CartUpsellItemProps) => ReactNode;
 }) => React.ReactNode;
 export default Cart;

package/dist/cjs/components/Cart.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
 var react_1 = tslib_1.__importStar(require("react"));
 var hooks_1 = require("../app/hooks");
 var slices_1 = require("../slices");
 var CartItem_1 = tslib_1.__importDefault(require("./CartItem"));
 var CartUpsells_1 = tslib_1.__importDefault(require("./CartUpsells"));
 var Cart = function (_a) {
-    var navigate = _a.navigate, children = _a.children, apiUrl = _a.apiUrl;
+    var navigate = _a.navigate, children = _a.children, apiUrl = _a.apiUrl, CartUpsellsView = _a.CartUpsellsView, CartItemView = _a.CartItemView, QuantityView = _a.QuantityView, CartUpsellItemView = _a.CartUpsellItemView;
     var dispatch = (0, hooks_1.useAppDispatch)();
     var config = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig).cart;
     var cart = (0, hooks_1.useAppSelector)(slices_1.selectOrder).cart;
@@ -23,8 +22,8 @@ var Cart = function (_a) {
             return;
         dispatch((0, slices_1.closeCartSummary)());
     }, [dispatch, isOpen, isEmpty]);
-    var renderCartItem = function (item, isLast) { return (react_1.default.createElement(CartItem_1.default, { navigate: navigate, item: item, isLast: isLast, children: ui_1.CartItem, apiUrl: apiUrl })); };
-    var renderCartUpsells = function () { return (react_1.default.createElement(CartUpsells_1.default, { apiUrl: apiUrl, children: ui_1.CartUpsells })); };
+    var renderCartItem = (0, react_1.useCallback)(function (item, isLast) { return (react_1.default.createElement(CartItem_1.default, { navigate: navigate, item: item, isLast: isLast, apiUrl: apiUrl, children: CartItemView, QuantityView: QuantityView })); }, [navigate, apiUrl, CartItemView, QuantityView]);
+    var renderCartUpsells = (0, react_1.useCallback)(function () { return (react_1.default.createElement(CartUpsells_1.default, { CartUpsellItemView: CartUpsellItemView, apiUrl: apiUrl, children: CartUpsellsView })); }, [apiUrl, CartUpsellsView, CartUpsellItemView]);
     if (!config)
         return null;
     return children({

package/dist/cjs/components/CartItem.d.ts

@@ -1,12 +1,13 @@
 import { CartItem as CartItemType } from '@open-tender/types';
-import { CartItemProps } from '@open-tender/ui';
+import { CartItemProps, QuantityProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const CartItem: ({ item, isLast, isEditable, navigate, children, apiUrl }: {
+declare const CartItem: ({ item, isLast, isEditable, navigate, children, apiUrl, QuantityView }: {
     item: CartItemType;
     isLast?: boolean;
     isEditable?: boolean;
     navigate: (route: string) => void;
     children: (props: CartItemProps) => ReactNode;
     apiUrl: string;
+    QuantityView: (props: QuantityProps) => ReactNode;
 }) => React.ReactNode;
 export default CartItem;

package/dist/cjs/components/CartItem.js

@@ -1,24 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var hooks_1 = require("../app/hooks");
 var slices_1 = require("../slices");
 var Quantity_1 = tslib_1.__importDefault(require("./Quantity"));
 var CartItem = function (_a) {
-    var item = _a.item, _b = _a.isLast, isLast = _b === void 0 ? false : _b, _c = _a.isEditable, isEditable = _c === void 0 ? true : _c, navigate = _a.navigate, children = _a.children, apiUrl = _a.apiUrl;
+    var item = _a.item, _b = _a.isLast, isLast = _b === void 0 ? false : _b, _c = _a.isEditable, isEditable = _c === void 0 ? true : _c, navigate = _a.navigate, children = _a.children, apiUrl = _a.apiUrl, QuantityView = _a.QuantityView;
     var dispatch = (0, hooks_1.useAppDispatch)();
     var config = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig).cartItem;
-    var increment = function () { return dispatch((0, slices_1.incrementItemInCart)(item)); };
-    var decrement = function () { return dispatch((0, slices_1.decrementItemInCart)(item)); };
+    var increment = (0, react_1.useCallback)(function () { return dispatch((0, slices_1.incrementItemInCart)(item)); }, [item, dispatch]);
+    var decrement = (0, react_1.useCallback)(function () { return dispatch((0, slices_1.decrementItemInCart)(item)); }, [dispatch, item]);
     var remove = function () { return dispatch((0, slices_1.removeItemFromCart)(item)); };
     var edit = function () {
         dispatch((0, slices_1.setCurrentItem)(item));
         navigate('/menu/item');
     };
     var handlers = { increment: increment, decrement: decrement, edit: edit, remove: remove };
-    var renderQuantity = function (quantity) { return (react_1.default.createElement(Quantity_1.default, { fontSize: 24, iconSize: 28, quantity: quantity, increment: increment, decrement: decrement, children: ui_1.Quantity })); };
+    var renderQuantity = (0, react_1.useCallback)(function (quantity) { return (react_1.default.createElement(Quantity_1.default, { fontSize: 24, iconSize: 28, quantity: quantity, increment: increment, decrement: decrement, children: QuantityView })); }, [increment, decrement, QuantityView]);
     return children({
         item: item,
         config: config,

package/dist/cjs/components/CartUpsells.d.ts

@@ -1,7 +1,8 @@
-import { CartUpsellsProps } from '@open-tender/ui';
+import { CartUpsellItemProps, CartUpsellsProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const CartUpsells: ({ children, apiUrl }: {
+declare const CartUpsells: ({ children, apiUrl, CartUpsellItemView }: {
     children: (props: CartUpsellsProps) => ReactNode;
     apiUrl: string;
+    CartUpsellItemView: (props: CartUpsellItemProps) => ReactNode;
 }) => React.ReactNode;
 export default CartUpsells;

package/dist/cjs/components/CartUpsells.js

@@ -1,19 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
 var utils_1 = require("@open-tender/utils");
 var react_1 = tslib_1.__importStar(require("react"));
 var hooks_1 = require("../app/hooks");
 var slices_1 = require("../slices");
 var CartUpsellItem_1 = tslib_1.__importDefault(require("./CartUpsellItem"));
 var CartUpsells = function (_a) {
-    var children = _a.children, apiUrl = _a.apiUrl;
+    var children = _a.children, apiUrl = _a.apiUrl, CartUpsellItemView = _a.CartUpsellItemView;
     var config = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig).cartUpsells;
     var cartIds = (0, hooks_1.useAppSelector)(slices_1.selectCartIds);
     var _b = (0, hooks_1.useAppSelector)(slices_1.selectMenu), categories = _b.categories, soldOut = _b.soldOut;
     var upsellItems = (0, react_1.useMemo)(function () { return (0, utils_1.makeUpsellItemsForCart)(categories, cartIds, soldOut); }, [categories, cartIds, soldOut]);
-    var renderCartUpsellItem = function (item, isLast) { return (react_1.default.createElement(CartUpsellItem_1.default, { item: item, isLast: isLast, children: ui_1.CartUpsellItem, apiUrl: apiUrl })); };
+    var renderCartUpsellItem = (0, react_1.useCallback)(function (item, isLast) { return (react_1.default.createElement(CartUpsellItem_1.default, { item: item, isLast: isLast, apiUrl: apiUrl, children: CartUpsellItemView })); }, [apiUrl, CartUpsellItemView]);
     if (!upsellItems.length)
         return null;
     return children({

package/dist/cjs/components/CategoryNav.d.ts

@@ -1,8 +1,10 @@
-import { CategoryNavProps } from '@open-tender/ui';
+import { CategoryNavProps, CategoryNavOtherProps, CategoryNavItemProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const CategoryNav: ({ children, navigate, apiUrl }: {
+declare const CategoryNav: ({ children, navigate, apiUrl, CategoryNavOtherView, CategoryNavItemView }: {
     children: (props: CategoryNavProps) => ReactNode;
     navigate: (route: string) => void;
     apiUrl: string;
+    CategoryNavOtherView: (props: CategoryNavOtherProps) => ReactNode;
+    CategoryNavItemView: (props: CategoryNavItemProps) => ReactNode;
 }) => React.ReactNode;
 export default CategoryNav;

package/dist/cjs/components/CategoryNav.js

@@ -1,18 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var hooks_1 = require("../app/hooks");
 var slices_1 = require("../slices");
 var CategoryNavItem_1 = tslib_1.__importDefault(require("./CategoryNavItem"));
 var CategoryNavOther_1 = tslib_1.__importDefault(require("./CategoryNavOther"));
 var CategoryNav = function (_a) {
-    var children = _a.children, navigate = _a.navigate, apiUrl = _a.apiUrl;
+    var children = _a.children, navigate = _a.navigate, apiUrl = _a.apiUrl, CategoryNavOtherView = _a.CategoryNavOtherView, CategoryNavItemView = _a.CategoryNavItemView;
     var categoryNav = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig).categoryNav;
     var _b = (0, hooks_1.useAppSelector)(slices_1.selectMenu), categories = _b.categories, featured = _b.featured, favorites = _b.favorites, recents = _b.recents;
-    var renderCategoryNavOther = function (title, path) { return (react_1.default.createElement(CategoryNavOther_1.default, { apiUrl: apiUrl, navigate: navigate, title: title, path: path, children: ui_1.CategoryNavOther })); };
-    var renderCategoryNavItem = function (item) { return (react_1.default.createElement(CategoryNavItem_1.default, { apiUrl: apiUrl, navigate: navigate, category: item, children: ui_1.CategoryNavItem })); };
+    var renderCategoryNavOther = (0, react_1.useCallback)(function (title, path) { return (react_1.default.createElement(CategoryNavOther_1.default, { apiUrl: apiUrl, navigate: navigate, title: title, path: path, children: CategoryNavOtherView })); }, [apiUrl, navigate, CategoryNavOtherView]);
+    var renderCategoryNavItem = (0, react_1.useCallback)(function (item) { return (react_1.default.createElement(CategoryNavItem_1.default, { apiUrl: apiUrl, navigate: navigate, category: item, children: CategoryNavItemView })); }, [apiUrl, navigate, CategoryNavItemView]);
     return children({
         config: categoryNav,
         categories: categories,

package/dist/cjs/components/Header.d.ts

@@ -1,9 +1,10 @@
-import { HeaderProps } from '@open-tender/ui';
+import { HeaderProps, SignInButtonProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const Header: ({ to, pathname, navigate, children }: {
+declare const Header: ({ to, pathname, navigate, children, SignInButtonView }: {
     to?: string;
     pathname: string;
     navigate: (route: string) => void;
     children: (props: HeaderProps) => ReactNode;
+    SignInButtonView: (props: SignInButtonProps) => ReactNode;
 }) => React.ReactNode;
 export default Header;

package/dist/cjs/components/Header.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var hooks_1 = require("../app/hooks");
 var slices_1 = require("../slices");
 var SignInButton_1 = tslib_1.__importDefault(require("./SignInButton"));
 var Header = function (_a) {
-    var to = _a.to, pathname = _a.pathname, navigate = _a.navigate, children = _a.children;
+    var to = _a.to, pathname = _a.pathname, navigate = _a.navigate, children = _a.children, SignInButtonView = _a.SignInButtonView;
     var dispatch = (0, hooks_1.useAppDispatch)();
     var header = ((0, hooks_1.useAppSelector)(slices_1.selectKioskConfig) || {}).header;
     var back = function () {
@@ -18,7 +17,7 @@ var Header = function (_a) {
         dispatch((0, slices_1.toggleSidebar)());
     };
     var handlers = to ? { back: back, open: open } : null;
-    var renderSignInButton = function () { return (react_1.default.createElement(SignInButton_1.default, { pathname: pathname, navigate: navigate, children: ui_1.SignInButton })); };
+    var renderSignInButton = (0, react_1.useCallback)(function () { return (react_1.default.createElement(SignInButton_1.default, { pathname: pathname, navigate: navigate, children: SignInButtonView })); }, [pathname, navigate, SignInButtonView]);
     if (!header)
         return null;
     return children({ config: header, handlers: handlers, renderSignInButton: renderSignInButton });

package/dist/cjs/components/ItemGroup.d.ts

@@ -1,9 +1,11 @@
 import { CartItemGroup } from '@open-tender/types';
-import { ItemGroupProps } from '@open-tender/ui';
+import { ErrorMessageProps, ItemGroupProps, SuccessMessageProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const ItemGroup: ({ group, content, children }: {
+declare const ItemGroup: ({ group, content, children, ErrorMessageView, SuccessMessageView }: {
     group: CartItemGroup;
     content: ReactNode;
     children: (props: ItemGroupProps) => ReactNode;
+    ErrorMessageView: (props: ErrorMessageProps) => ReactNode;
+    SuccessMessageView: (props: SuccessMessageProps) => ReactNode;
 }) => React.ReactNode;
 export default ItemGroup;

package/dist/cjs/components/ItemGroup.js

@@ -1,19 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
 var utils_1 = require("@open-tender/utils");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var hooks_1 = require("../app/hooks");
 var slices_1 = require("../slices");
 var ErrorMessage_1 = tslib_1.__importDefault(require("./ErrorMessage"));
 var SuccessMessage_1 = tslib_1.__importDefault(require("./SuccessMessage"));
 var ItemGroup = function (_a) {
-    var group = _a.group, content = _a.content, children = _a.children;
+    var group = _a.group, content = _a.content, children = _a.children, ErrorMessageView = _a.ErrorMessageView, SuccessMessageView = _a.SuccessMessageView;
     var config = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig).itemGroup;
     var modifierGroup = (0, utils_1.useModifierGroup)(group);
-    var renderErrorMessage = function (icon, children) { return (react_1.default.createElement(ErrorMessage_1.default, { icon: icon, content: children, children: ui_1.ErrorMessage })); };
-    var renderSuccessMessage = function (icon, children) { return (react_1.default.createElement(SuccessMessage_1.default, { icon: icon, content: children, children: ui_1.SuccessMessage })); };
+    var renderErrorMessage = (0, react_1.useCallback)(function (icon, children) { return (react_1.default.createElement(ErrorMessage_1.default, { icon: icon, content: children, children: ErrorMessageView })); }, [ErrorMessageView]);
+    var renderSuccessMessage = (0, react_1.useCallback)(function (icon, children) { return (react_1.default.createElement(SuccessMessage_1.default, { icon: icon, content: children, children: SuccessMessageView })); }, [SuccessMessageView]);
     return children({
         config: config,
         group: modifierGroup,

package/dist/cjs/components/ItemGroups.d.ts

@@ -1,12 +1,16 @@
 import { CartItemGroups, CartLevels } from '@open-tender/types';
-import { Handlers, ItemGroupsProps } from '@open-tender/ui';
+import { Handlers, ItemGroupsProps, ItemOptionProps, ErrorMessageProps, SuccessMessageProps, ItemGroupProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const ItemGroups: ({ handlers, groups, levels, excludeSize, children, apiUrl }: {
+declare const ItemGroups: ({ handlers, groups, levels, excludeSize, children, apiUrl, ItemGroupView, ItemOptionView, ErrorMessageView, SuccessMessageView }: {
     handlers: Handlers;
     groups: CartItemGroups;
     levels: CartLevels;
     excludeSize?: boolean;
-    children: (props: ItemGroupsProps) => ReactNode;
     apiUrl: string;
+    children: (props: ItemGroupsProps) => ReactNode;
+    ItemOptionView: (props: ItemOptionProps) => ReactNode;
+    ItemGroupView: (props: ItemGroupProps) => ReactNode;
+    ErrorMessageView: (props: ErrorMessageProps) => ReactNode;
+    SuccessMessageView: (props: SuccessMessageProps) => ReactNode;
 }) => React.ReactNode;
 export default ItemGroups;

package/dist/cjs/components/ItemGroups.js

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var hooks_1 = require("../app/hooks");
 var slices_1 = require("../slices");
 var ItemGroup_1 = tslib_1.__importDefault(require("./ItemGroup"));
 var ItemOption_1 = tslib_1.__importDefault(require("./ItemOption"));
 var ItemGroups = function (_a) {
-    var handlers = _a.handlers, groups = _a.groups, levels = _a.levels, _b = _a.excludeSize, excludeSize = _b === void 0 ? true : _b, children = _a.children, apiUrl = _a.apiUrl;
+    var handlers = _a.handlers, groups = _a.groups, levels = _a.levels, _b = _a.excludeSize, excludeSize = _b === void 0 ? true : _b, children = _a.children, apiUrl = _a.apiUrl, ItemGroupView = _a.ItemGroupView, ItemOptionView = _a.ItemOptionView, ErrorMessageView = _a.ErrorMessageView, SuccessMessageView = _a.SuccessMessageView;
     var config = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig).itemGroups;
-    var renderItemOption = function (group, option) { return (react_1.default.createElement(ItemOption_1.default, { apiUrl: apiUrl, levels: levels, handlers: handlers, group: group, option: option, children: ui_1.ItemOption })); };
-    var renderItemGroup = function (group, content) { return (react_1.default.createElement(ItemGroup_1.default, { group: group, content: content, children: ui_1.ItemGroup })); };
+    var renderItemOption = (0, react_1.useCallback)(function (group, option) { return (react_1.default.createElement(ItemOption_1.default, { apiUrl: apiUrl, levels: levels, handlers: handlers, group: group, option: option, children: ItemOptionView })); }, [apiUrl, levels, handlers, ItemOptionView]);
+    var renderItemGroup = (0, react_1.useCallback)(function (group, content) { return (react_1.default.createElement(ItemGroup_1.default, { SuccessMessageView: SuccessMessageView, ErrorMessageView: ErrorMessageView, group: group, content: content, children: ItemGroupView })); }, [ItemGroupView, ErrorMessageView, SuccessMessageView]);
     if (!config)
         return null;
     return children({

package/dist/cjs/components/ItemSelections.d.ts

@@ -1,12 +1,14 @@
 import { CartItemGroups, CartLevels } from '@open-tender/types';
-import { Handlers, ItemSelectionsProps } from '@open-tender/ui';
+import { Handlers, ItemSelectionsProps, ItemOptionProps, ErrorMessageProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const ItemSelections: ({ handlers, groups, levels, isIncomplete, children, apiUrl }: {
+declare const ItemSelections: ({ handlers, groups, levels, isIncomplete, children, apiUrl, ItemOptionView, ErrorMessageView }: {
     handlers: Handlers;
     groups: CartItemGroups;
     levels: CartLevels;
     isIncomplete: boolean;
-    children: (props: ItemSelectionsProps) => ReactNode;
     apiUrl: string;
+    children: (props: ItemSelectionsProps) => ReactNode;
+    ItemOptionView: (props: ItemOptionProps) => ReactNode;
+    ErrorMessageView: (props: ErrorMessageProps) => ReactNode;
 }) => React.ReactNode;
 export default ItemSelections;

package/dist/cjs/components/ItemSelections.js

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var hooks_1 = require("../app/hooks");
 var slices_1 = require("../slices");
 var ErrorMessage_1 = tslib_1.__importDefault(require("./ErrorMessage"));
 var ItemOption_1 = tslib_1.__importDefault(require("./ItemOption"));
 var ItemSelections = function (_a) {
-    var handlers = _a.handlers, groups = _a.groups, levels = _a.levels, isIncomplete = _a.isIncomplete, children = _a.children, apiUrl = _a.apiUrl;
+    var handlers = _a.handlers, groups = _a.groups, levels = _a.levels, isIncomplete = _a.isIncomplete, children = _a.children, apiUrl = _a.apiUrl, ItemOptionView = _a.ItemOptionView, ErrorMessageView = _a.ErrorMessageView;
     var config = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig).itemSelections;
-    var renderErrorMessage = function (icon, children) { return (react_1.default.createElement(ErrorMessage_1.default, { icon: icon, content: children, children: ui_1.ErrorMessage })); };
-    var renderItemOption = function (group, option) { return (react_1.default.createElement(ItemOption_1.default, { levels: levels, handlers: handlers, group: group, option: option, children: ui_1.ItemOption, apiUrl: apiUrl })); };
+    var renderErrorMessage = (0, react_1.useCallback)(function (icon, children) { return (react_1.default.createElement(ErrorMessage_1.default, { icon: icon, content: children, children: ErrorMessageView })); }, [ErrorMessageView]);
+    var renderItemOption = (0, react_1.useCallback)(function (group, option) { return (react_1.default.createElement(ItemOption_1.default, { levels: levels, handlers: handlers, group: group, option: option, apiUrl: apiUrl, children: ItemOptionView })); }, [levels, handlers, apiUrl, ItemOptionView]);
     return children({
         config: config,
         groups: groups,

package/dist/cjs/components/MadeForNotes.d.ts

@@ -1,6 +1,6 @@
-import { MadeForNotesProps } from '@open-tender/ui';
+import { InputProps, MadeForNotesProps, TextAreaProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const MadeForNotes: ({ subtitle, hasMadeFor, madeFor, setMadeFor, hasNotes, notes, setNotes, close, children }: {
+declare const MadeForNotes: ({ subtitle, hasMadeFor, madeFor, setMadeFor, hasNotes, notes, setNotes, close, children, InputView, TextAreaView }: {
     subtitle: string;
     hasMadeFor: boolean;
     madeFor: string | null;
@@ -10,5 +10,7 @@ declare const MadeForNotes: ({ subtitle, hasMadeFor, madeFor, setMadeFor, hasNot
     setNotes: (notes: string) => void;
     close: () => void;
     children: (props: MadeForNotesProps) => ReactNode;
+    InputView: (props: InputProps) => ReactNode;
+    TextAreaView: (props: TextAreaProps) => ReactNode;
 }) => React.ReactNode;
 export default MadeForNotes;

package/dist/cjs/components/MadeForNotes.js

@@ -1,18 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var hooks_1 = require("../app/hooks");
 var slices_1 = require("../slices");
 var Input_1 = tslib_1.__importDefault(require("./Input"));
 var TextArea_1 = tslib_1.__importDefault(require("./TextArea"));
 var MadeForNotes = function (_a) {
-    var subtitle = _a.subtitle, hasMadeFor = _a.hasMadeFor, madeFor = _a.madeFor, setMadeFor = _a.setMadeFor, hasNotes = _a.hasNotes, notes = _a.notes, setNotes = _a.setNotes, close = _a.close, children = _a.children;
+    var subtitle = _a.subtitle, hasMadeFor = _a.hasMadeFor, madeFor = _a.madeFor, setMadeFor = _a.setMadeFor, hasNotes = _a.hasNotes, notes = _a.notes, setNotes = _a.setNotes, close = _a.close, children = _a.children, InputView = _a.InputView, TextAreaView = _a.TextAreaView;
     var _b = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig), config = _b.madeForNotes, modalContentConfig = _b.modalContent;
     var handlers = { submit: close };
-    var renderInput = function (label, value, isRequired, style) { return (react_1.default.createElement(Input_1.default, { label: label, setValue: setMadeFor, value: value, isRequired: isRequired, style: style, children: ui_1.Input })); };
-    var renderTextArea = function (label, value, isRequired, style) { return (react_1.default.createElement(TextArea_1.default, { label: label, setValue: setNotes, value: value, isRequired: isRequired, style: style, children: ui_1.Input })); };
+    var renderInput = (0, react_1.useCallback)(function (label, value, isRequired, style) { return (react_1.default.createElement(Input_1.default, { label: label, setValue: setMadeFor, value: value, isRequired: isRequired, style: style, children: InputView })); }, [setMadeFor, InputView]);
+    var renderTextArea = (0, react_1.useCallback)(function (label, value, isRequired, style) { return (react_1.default.createElement(TextArea_1.default, { label: label, setValue: setNotes, value: value, isRequired: isRequired, style: style, children: TextAreaView })); }, [TextAreaView, setNotes]);
     return children({
         config: config,
         handlers: handlers,

package/dist/cjs/components/Option.d.ts

@@ -1,12 +1,17 @@
 import { CartItemOption, CartLevels } from '@open-tender/types';
-import { Handlers, OptionProps } from '@open-tender/ui';
+import { Handlers, OptionProps, ItemGroupsProps, ItemGroupProps, ItemOptionProps, SuccessMessageProps, ErrorMessageProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const Option: ({ option, levels, handlers, close, children, apiUrl }: {
+declare const Option: ({ option, levels, handlers, close, children, apiUrl, ItemGroupsView, ItemGroupView, ItemOptionView, SuccessMessageView, ErrorMessageView }: {
     option: CartItemOption | null;
     levels: CartLevels | null;
     handlers: Handlers;
     close: () => void;
     children: (props: OptionProps) => ReactNode;
     apiUrl: string;
+    ItemGroupsView: (props: ItemGroupsProps) => ReactNode;
+    ItemGroupView: (props: ItemGroupProps) => ReactNode;
+    ItemOptionView: (props: ItemOptionProps) => ReactNode;
+    SuccessMessageView: (props: SuccessMessageProps) => ReactNode;
+    ErrorMessageView: (props: ErrorMessageProps) => ReactNode;
 }) => React.ReactNode;
 export default Option;

package/dist/cjs/components/Option.js

@@ -1,18 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var hooks_1 = require("../app/hooks");
 var slices_1 = require("../slices");
 var ItemGroups_1 = tslib_1.__importDefault(require("./ItemGroups"));
 var Option = function (_a) {
-    var option = _a.option, levels = _a.levels, handlers = _a.handlers, close = _a.close, children = _a.children, apiUrl = _a.apiUrl;
+    var option = _a.option, levels = _a.levels, handlers = _a.handlers, close = _a.close, children = _a.children, apiUrl = _a.apiUrl, ItemGroupsView = _a.ItemGroupsView, ItemGroupView = _a.ItemGroupView, ItemOptionView = _a.ItemOptionView, SuccessMessageView = _a.SuccessMessageView, ErrorMessageView = _a.ErrorMessageView;
     var _b = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig), config = _b.option, modalContentConfig = _b.modalContent;
-    var handlersOption = tslib_1.__assign(tslib_1.__assign({}, handlers), { close: close });
+    var handlersOption = (0, react_1.useMemo)(function () { return (tslib_1.__assign(tslib_1.__assign({}, handlers), { close: close })); }, [handlers, close]);
+    var renderItemGroups = (0, react_1.useCallback)(function (excludeSize) {
+        if (!option || !levels)
+            return react_1.default.createElement(react_1.default.Fragment, null);
+        return (react_1.default.createElement(ItemGroups_1.default, { levels: levels, handlers: handlersOption, groups: option.groups, excludeSize: excludeSize, apiUrl: apiUrl, children: ItemGroupsView, ItemGroupView: ItemGroupView, ItemOptionView: ItemOptionView, SuccessMessageView: SuccessMessageView, ErrorMessageView: ErrorMessageView }));
+    }, [
+        levels,
+        option,
+        handlersOption,
+        ItemGroupsView,
+        ItemGroupView,
+        ItemOptionView,
+        SuccessMessageView,
+        ErrorMessageView,
+        apiUrl
+    ]);
     if (!config || !option || !levels)
         return null;
-    var renderItemGroups = function (excludeSize) { return (react_1.default.createElement(ItemGroups_1.default, { levels: levels, handlers: handlersOption, groups: option.groups, excludeSize: excludeSize, children: ui_1.ItemGroups, apiUrl: apiUrl })); };
     return children({
         config: config,
         handlers: handlersOption,

package/dist/cjs/components/OrderCard.d.ts

@@ -1,10 +1,11 @@
 import { Order } from '@open-tender/types';
-import { OrderCardProps } from '@open-tender/ui';
+import { ErrorMessageProps, OrderCardProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const OrderCard: ({ order, navigate, children, apiUrl }: {
+declare const OrderCard: ({ order, navigate, children, apiUrl, ErrorMessageView }: {
     order: Order;
     navigate: (route: string) => void;
     children: (props: OrderCardProps) => ReactNode;
     apiUrl: string;
+    ErrorMessageView: (props: ErrorMessageProps) => ReactNode;
 }) => React.ReactNode;
 export default OrderCard;

package/dist/cjs/components/OrderCard.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
 var react_1 = tslib_1.__importStar(require("react"));
 var hooks_1 = require("../app/hooks");
 var hooks_2 = require("../hooks");
 var slices_1 = require("../slices");
 var ErrorMessage_1 = tslib_1.__importDefault(require("./ErrorMessage"));
 var OrderCard = function (_a) {
-    var order = _a.order, navigate = _a.navigate, children = _a.children, apiUrl = _a.apiUrl;
+    var order = _a.order, navigate = _a.navigate, children = _a.children, apiUrl = _a.apiUrl, ErrorMessageView = _a.ErrorMessageView;
     var dispatch = (0, hooks_1.useAppDispatch)();
     var _b = (0, react_1.useState)(null), errMsg = _b[0], setErrMsg = _b[1];
     var _c = (0, react_1.useState)(false), isReordering = _c[0], setIsReordering = _c[1];
@@ -17,7 +16,7 @@ var OrderCard = function (_a) {
     var isLoading = loading === 'pending';
     var _f = (0, hooks_2.useOrder)(order), itemImages = _f.itemImages, itemNames = _f.itemNames, orderNo = _f.orderNo, title = _f.title, subtitle = _f.subtitle;
     var view = function () {
-        dispatch((0, slices_1.openModal)({ type: 'ORDER_DETAILS', args: { order: order } }));
+        return;
     };
     var reorder = function () {
         setErrMsg(null);
@@ -36,7 +35,7 @@ var OrderCard = function (_a) {
             }
         }
     }, [isLoading, isReordering, error, navigate]);
-    var renderErrorMessage = function (errMsg) { return (react_1.default.createElement(ErrorMessage_1.default, { content: errMsg, children: ui_1.ErrorMessage })); };
+    var renderErrorMessage = (0, react_1.useCallback)(function (errMsg) { return (react_1.default.createElement(ErrorMessage_1.default, { content: errMsg, children: ErrorMessageView })); }, [ErrorMessageView]);
     if (!config)
         return null;
     return children({

package/dist/cjs/components/PointsReward.d.ts

@@ -1,11 +1,12 @@
 import { OrderItem } from '@open-tender/types';
-import { PointsRewardProps } from '@open-tender/ui';
+import { PointsRewardProps, QuantityProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const PointsReward: ({ item, callback, children, apiUrl }: {
+declare const PointsReward: ({ item, callback, children, apiUrl, QuantityView }: {
     item: OrderItem;
     callback?: () => void;
     isLast?: boolean;
     children: (props: PointsRewardProps) => ReactNode;
     apiUrl: string;
+    QuantityView: (props: QuantityProps) => ReactNode;
 }) => React.ReactNode;
 export default PointsReward;

package/dist/cjs/components/PointsReward.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
 var react_1 = tslib_1.__importDefault(require("react"));
 var hooks_1 = require("../app/hooks");
 var hooks_2 = require("../hooks");
@@ -9,7 +8,7 @@ var slices_1 = require("../slices");
 var Quantity_1 = tslib_1.__importDefault(require("./Quantity"));
 var PointsReward = function (_a) {
     var _b;
-    var item = _a.item, callback = _a.callback, children = _a.children, apiUrl = _a.apiUrl;
+    var item = _a.item, callback = _a.callback, children = _a.children, apiUrl = _a.apiUrl, QuantityView = _a.QuantityView;
     var dispatch = (0, hooks_1.useAppDispatch)();
     var _c = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig), config = _c.pointsReward, successMessageConfig = _c.successMessage, cardConfig = _c.card;
     var checkPoints = (0, hooks_1.useAppSelector)(slices_1.selectPosCheckout).points;
@@ -48,7 +47,7 @@ var PointsReward = function (_a) {
         if (callback)
             callback();
     };
-    var renderQuantity = function (quantity, incrementDisabled) { return (react_1.default.createElement(Quantity_1.default, { quantity: quantity, increment: apply, incrementDisabled: incrementDisabled, decrement: remove, fontSize: 24, iconSize: 28, children: ui_1.Quantity })); };
+    var renderQuantity = function (quantity, incrementDisabled) { return (react_1.default.createElement(Quantity_1.default, { quantity: quantity, increment: apply, incrementDisabled: incrementDisabled, decrement: remove, fontSize: 24, iconSize: 28, children: QuantityView })); };
     return children({
         config: config,
         item: item,

package/dist/cjs/components/PointsRewards.d.ts

@@ -1,7 +1,9 @@
-import { PointsRewardsProps } from '@open-tender/ui';
+import { PointsRewardProps, PointsRewardsProps, QuantityProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const PointsRewards: ({ children, apiUrl }: {
+declare const PointsRewards: ({ children, apiUrl, PointsRewardView, QuantityView }: {
     children: (props: PointsRewardsProps) => ReactNode;
     apiUrl: string;
+    PointsRewardView: (props: PointsRewardProps) => ReactNode;
+    QuantityView: (props: QuantityProps) => ReactNode;
 }) => React.ReactNode;
 export default PointsRewards;

package/dist/cjs/components/PointsRewards.js

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var hooks_1 = require("../app/hooks");
 var hooks_2 = require("../hooks");
 var slices_1 = require("../slices");
 var PointsReward_1 = tslib_1.__importDefault(require("./PointsReward"));
 var PointsRewards = function (_a) {
-    var children = _a.children, apiUrl = _a.apiUrl;
+    var children = _a.children, apiUrl = _a.apiUrl, PointsRewardView = _a.PointsRewardView, QuantityView = _a.QuantityView;
     var config = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig).pointsRewards;
     var _b = (0, hooks_2.useCustomerRewards)(), items = _b.items, points = _b.points, pointsApplied = _b.pointsApplied, pointsRemaining = _b.pointsRemaining;
-    var renderPointReward = function (item) { return (react_1.default.createElement(PointsReward_1.default, { apiUrl: apiUrl, item: item, children: ui_1.PointsReward })); };
+    var renderPointReward = (0, react_1.useCallback)(function (item) { return (react_1.default.createElement(PointsReward_1.default, { apiUrl: apiUrl, item: item, children: PointsRewardView, QuantityView: QuantityView })); }, [apiUrl, PointsRewardView, QuantityView]);
     return children({
         config: config,
         items: items,

package/dist/cjs/components/PromoCode.d.ts

@@ -1,7 +1,9 @@
-import { PromoCodeProps } from '@open-tender/ui';
+import { ErrorMessageProps, InputProps, PromoCodeProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const PromoCode: ({ close, children }: {
+declare const PromoCode: ({ close, children, InputView, ErrorMessageView }: {
     close: () => void;
     children: (props: PromoCodeProps) => ReactNode;
+    InputView: (props: InputProps) => ReactNode;
+    ErrorMessageView: (props: ErrorMessageProps) => ReactNode;
 }) => React.ReactNode;
 export default PromoCode;

package/dist/cjs/components/PromoCode.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var ui_1 = require("@open-tender/ui");
 var utils_1 = require("@open-tender/utils");
 var react_1 = tslib_1.__importStar(require("react"));
 var hooks_1 = require("../app/hooks");
@@ -9,7 +8,7 @@ var slices_1 = require("../slices");
 var ErrorMessage_1 = tslib_1.__importDefault(require("./ErrorMessage"));
 var Input_1 = tslib_1.__importDefault(require("./Input"));
 var PromoCode = function (_a) {
-    var close = _a.close, children = _a.children;
+    var close = _a.close, children = _a.children, InputView = _a.InputView, ErrorMessageView = _a.ErrorMessageView;
     var dispatch = (0, hooks_1.useAppDispatch)();
     var _b = (0, react_1.useState)(''), promoCode = _b[0], setPromoCode = _b[1];
     var _c = (0, react_1.useState)(false), submitted = _c[0], setSubmitted = _c[1];
@@ -17,9 +16,6 @@ var PromoCode = function (_a) {
     var _e = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig), config = _e.promoCode, modalContentConfig = _e.modalContent;
     var _f = (0, hooks_1.useAppSelector)(slices_1.selectOrder), loading = _f.loading, error = _f.error;
     var isLoading = loading === 'pending';
-    var update = function (value) {
-        setPromoCode(value);
-    };
     var submit = function () {
         setSubmitted(true);
         dispatch((0, slices_1.addPromoCode)(promoCode));
@@ -37,8 +33,8 @@ var PromoCode = function (_a) {
             }
         }
     }, [submitted, isLoading, error, close]);
-    var renderErrorMessage = function (errMsg) { return (react_1.default.createElement(ErrorMessage_1.default, { content: errMsg, children: ui_1.ErrorMessage })); };
-    var renderInput = function (value, isRequired, style) { return (react_1.default.createElement(Input_1.default, { setValue: update, value: value, isRequired: isRequired, style: style, children: ui_1.Input })); };
+    var renderErrorMessage = (0, react_1.useCallback)(function (errMsg) { return (react_1.default.createElement(ErrorMessage_1.default, { content: errMsg, children: ErrorMessageView })); }, [ErrorMessageView]);
+    var renderInput = (0, react_1.useCallback)(function (value, isRequired, style) { return (react_1.default.createElement(Input_1.default, { setValue: function (value) { return setPromoCode(value); }, value: value, isRequired: isRequired, style: style, children: InputView })); }, [InputView]);
     return children({
         config: config,
         handlers: handlers,