@open-tender/store 1.1.21 → 1.1.22

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

@@ -0,0 +1,11 @@
+import { Order } from '@open-tender/types';
+import { CheckTotalsProps, OrderDetailsItemProps, OrderDetailsProps } from '@open-tender/ui';
+import React, { ReactNode } from 'react';
+declare const OrderDetails: ({ apiUrl, order, children, CheckTotalsView, OrderDetailsItemView }: {
+    apiUrl: string;
+    order: Order;
+    children: (props: OrderDetailsProps) => ReactNode;
+    CheckTotalsView: (props: CheckTotalsProps) => ReactNode;
+    OrderDetailsItemView: (props: OrderDetailsItemProps) => ReactNode;
+}) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+export default OrderDetails;

package/dist/cjs/components/OrderDetails.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+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 CheckTotals_1 = tslib_1.__importDefault(require("./CheckTotals"));
+var OrderDetailsItem_1 = tslib_1.__importDefault(require("./OrderDetailsItem"));
+var OrderDetails = function (_a) {
+    var apiUrl = _a.apiUrl, order = _a.order, children = _a.children, CheckTotalsView = _a.CheckTotalsView, OrderDetailsItemView = _a.OrderDetailsItemView;
+    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];
+    var _d = (0, hooks_2.useOrder)(order), subtitle = _d.title, title = _d.orderNo, requestedAt = _d.requestedAt;
+    var _e = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig), config = _e.orderDetails, modalContentConfig = _e.modalContent;
+    var reorder = function () {
+        setErrMsg(null);
+        setIsReordering(true);
+        dispatch((0, slices_1.reorder)(order.cart));
+    };
+    var renderCheckTotals = (0, react_1.useCallback)(function () { return react_1.default.createElement(CheckTotals_1.default, { check: order, children: CheckTotalsView }); }, [order, CheckTotalsView]);
+    var renderOrderDetailsItem = (0, react_1.useCallback)(function (orderItem) { return (react_1.default.createElement(OrderDetailsItem_1.default, { key: orderItem.id, apiUrl: apiUrl, orderItem: orderItem, children: OrderDetailsItemView })); }, [apiUrl, OrderDetailsItemView]);
+    if (!config)
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    return children({
+        config: config,
+        modalContentConfig: modalContentConfig,
+        renderCheckTotals: renderCheckTotals,
+        requestedAt: requestedAt,
+        order: order,
+        title: title,
+        subtitle: subtitle,
+        isReordering: isReordering,
+        errMsg: errMsg,
+        handlers: { reorder: reorder },
+        apiUrl: apiUrl,
+        renderOrderDetailsItem: renderOrderDetailsItem
+    });
+};
+exports.default = OrderDetails;

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

@@ -0,0 +1,9 @@
+import { OrderItem } from '@open-tender/types';
+import { OrderDetailsItemProps } from '@open-tender/ui';
+import { ReactNode } from 'react';
+declare const OrderDetailsItem: ({ apiUrl, orderItem, children }: {
+    apiUrl: string;
+    orderItem: OrderItem;
+    children: (props: OrderDetailsItemProps) => ReactNode;
+}) => ReactNode;
+export default OrderDetailsItem;

package/dist/cjs/components/OrderDetailsItem.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var hooks_1 = require("../app/hooks");
+var slices_1 = require("../slices");
+var OrderDetailsItem = function (_a) {
+    var apiUrl = _a.apiUrl, orderItem = _a.orderItem, children = _a.children;
+    var config = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig).orderDetailsItem;
+    if (!config)
+        return null;
+    return children({ config: config, orderItem: orderItem, apiUrl: apiUrl });
+};
+exports.default = OrderDetailsItem;

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

@@ -28,6 +28,8 @@ import ModalHeader from './ModalHeader';
 import NutritionalInfo from './NutritionalInfo';
 import Option from './Option';
 import OrderCard from './OrderCard';
+import OrderDetails from './OrderDetails';
+import OrderDetailsItem from './OrderDetailsItem';
 import PointsReward from './PointsReward';
 import PointsRewards from './PointsRewards';
 import PromoCode from './PromoCode';
@@ -45,4 +47,4 @@ import Tag from './Tag';
 import TextArea from './TextArea';
 import UpsellItem from './UpsellItem';
 import Upsells from './Upsells';
-export { Allergen, Applied, ButtonLink, Card, Cart, CartItem, CartUpsellItem, CategoryItem, CategoryNav, CategoryNavItem, CategoryNavOther, CheckTotals, Discount, ErrorMessage, Header, Ingredients, Input, ItemGroup, ItemGroups, ItemOption, ItemSelections, Loader, MadeForNotes, MenuCategory, MenuOther, ModalContent, ModalHeader, NutritionalInfo, Option, OrderCard, PointsReward, PointsRewards, PromoCode, Quantity, Reward, Rewards, SignIn, SignInButton, SignInCheckout, SignInOptions, SignInPhone, SignInQr, SuccessMessage, Tag, TextArea, UpsellItem, Upsells };
+export { Allergen, Applied, ButtonLink, Card, Cart, CartItem, CartUpsellItem, CategoryItem, CategoryNav, CategoryNavItem, CategoryNavOther, CheckTotals, Discount, ErrorMessage, Header, Ingredients, Input, ItemGroup, ItemGroups, ItemOption, ItemSelections, Loader, MadeForNotes, MenuCategory, MenuOther, ModalContent, ModalHeader, NutritionalInfo, Option, OrderCard, OrderDetails, OrderDetailsItem, PointsReward, PointsRewards, PromoCode, Quantity, Reward, Rewards, SignIn, SignInButton, SignInCheckout, SignInOptions, SignInPhone, SignInQr, SuccessMessage, Tag, TextArea, UpsellItem, Upsells };

package/dist/cjs/components/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Upsells = exports.UpsellItem = exports.TextArea = exports.Tag = exports.SuccessMessage = exports.SignInQr = exports.SignInPhone = exports.SignInOptions = exports.SignInCheckout = exports.SignInButton = exports.SignIn = exports.Rewards = exports.Reward = exports.Quantity = exports.PromoCode = exports.PointsRewards = exports.PointsReward = exports.OrderCard = exports.Option = exports.NutritionalInfo = exports.ModalHeader = exports.ModalContent = exports.MenuOther = exports.MenuCategory = exports.MadeForNotes = exports.Loader = exports.ItemSelections = exports.ItemOption = exports.ItemGroups = exports.ItemGroup = exports.Input = exports.Ingredients = exports.Header = exports.ErrorMessage = exports.Discount = exports.CheckTotals = exports.CategoryNavOther = exports.CategoryNavItem = exports.CategoryNav = exports.CategoryItem = exports.CartUpsellItem = exports.CartItem = exports.Cart = exports.Card = exports.ButtonLink = exports.Applied = exports.Allergen = void 0;
+exports.Upsells = exports.UpsellItem = exports.TextArea = exports.Tag = exports.SuccessMessage = exports.SignInQr = exports.SignInPhone = exports.SignInOptions = exports.SignInCheckout = exports.SignInButton = exports.SignIn = exports.Rewards = exports.Reward = exports.Quantity = exports.PromoCode = exports.PointsRewards = exports.PointsReward = exports.OrderDetailsItem = exports.OrderDetails = exports.OrderCard = exports.Option = exports.NutritionalInfo = exports.ModalHeader = exports.ModalContent = exports.MenuOther = exports.MenuCategory = exports.MadeForNotes = exports.Loader = exports.ItemSelections = exports.ItemOption = exports.ItemGroups = exports.ItemGroup = exports.Input = exports.Ingredients = exports.Header = exports.ErrorMessage = exports.Discount = exports.CheckTotals = exports.CategoryNavOther = exports.CategoryNavItem = exports.CategoryNav = exports.CategoryItem = exports.CartUpsellItem = exports.CartItem = exports.Cart = exports.Card = exports.ButtonLink = exports.Applied = exports.Allergen = void 0;
 var tslib_1 = require("tslib");
 var Allergen_1 = tslib_1.__importDefault(require("./Allergen"));
 exports.Allergen = Allergen_1.default;
@@ -62,6 +62,10 @@ var Option_1 = tslib_1.__importDefault(require("./Option"));
 exports.Option = Option_1.default;
 var OrderCard_1 = tslib_1.__importDefault(require("./OrderCard"));
 exports.OrderCard = OrderCard_1.default;
+var OrderDetails_1 = tslib_1.__importDefault(require("./OrderDetails"));
+exports.OrderDetails = OrderDetails_1.default;
+var OrderDetailsItem_1 = tslib_1.__importDefault(require("./OrderDetailsItem"));
+exports.OrderDetailsItem = OrderDetailsItem_1.default;
 var PointsReward_1 = tslib_1.__importDefault(require("./PointsReward"));
 exports.PointsReward = PointsReward_1.default;
 var PointsRewards_1 = tslib_1.__importDefault(require("./PointsRewards"));

package/dist/cjs/config/index.js

@@ -48,6 +48,9 @@ var modalHeader_1 = tslib_1.__importDefault(require("./modalHeader"));
 var nutritionalInfo_1 = tslib_1.__importDefault(require("./nutritionalInfo"));
 var option_1 = tslib_1.__importDefault(require("./option"));
 var orderCard_1 = tslib_1.__importDefault(require("./orderCard"));
+var orderDetails_1 = tslib_1.__importDefault(require("./orderDetails"));
+var orderDetailsItem_1 = tslib_1.__importDefault(require("./orderDetailsItem"));
+var page_1 = tslib_1.__importDefault(require("./page"));
 var pointsReward_1 = tslib_1.__importDefault(require("./pointsReward"));
 var pointsRewards_1 = tslib_1.__importDefault(require("./pointsRewards"));
 var promoCode_1 = tslib_1.__importDefault(require("./promoCode"));
@@ -113,6 +116,9 @@ var config = {
     nutritionalInfo: nutritionalInfo_1.default,
     option: option_1.default,
     orderCard: orderCard_1.default,
+    orderDetails: orderDetails_1.default,
+    orderDetailsItem: orderDetailsItem_1.default,
+    page: page_1.default,
     pointsReward: pointsReward_1.default,
     pointsRewards: pointsRewards_1.default,
     promoCode: promoCode_1.default,

package/dist/cjs/config/orderDetails.d.ts

@@ -0,0 +1,3 @@
+import { ScreenConfig } from '@open-tender/ui';
+declare const orderDetails: ScreenConfig;
+export default orderDetails;

package/dist/cjs/config/orderDetails.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var styles_1 = tslib_1.__importDefault(require("../styles"));
+var utils_1 = require("../utils");
+var orderDetails = {
+    orderDetails__totalsContainer: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%'
+        }
+    },
+    orderDetails__orderNumber: {
+        classes: '',
+        props: {},
+        style: tslib_1.__assign(tslib_1.__assign({}, styles_1.default.textHeadline), { fontSize: utils_1.theme.fontSizes.xsmall, textTransform: 'uppercase', textAlign: 'center' })
+    },
+    orderDetails__orderTitle: {
+        classes: '',
+        props: {},
+        style: tslib_1.__assign(tslib_1.__assign({}, styles_1.default.textHeading), { fontSize: utils_1.theme.fontSizes.xxlarge, textAlign: 'center' })
+    },
+    orderDetails__buttonsContainer: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%',
+            justifyContent: 'center',
+            flexDirection: 'row',
+            gap: utils_1.theme.spacing.margin.small,
+            marginBottom: utils_1.theme.spacing.margin.large
+        }
+    },
+    orderDetails__reorderButton: {
+        classes: '',
+        props: {},
+        style: tslib_1.__assign(tslib_1.__assign({}, styles_1.default.buttonPrimary), { fontSize: utils_1.theme.fontSizes.small })
+    },
+    orderDetails__rateOrderButton: {
+        classes: '',
+        props: {},
+        style: tslib_1.__assign(tslib_1.__assign({}, styles_1.default.buttonSecondary), { fontSize: utils_1.theme.fontSizes.small })
+    },
+    orderDetails__summary: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%',
+            alignItems: 'center',
+            marginBottom: utils_1.theme.spacing.margin.large
+        }
+    },
+    orderDetails__summaryItem: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%',
+            flexDirection: 'row',
+            alignItems: 'center'
+        }
+    },
+    orderDetails__divider: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%',
+            height: 0.5,
+            backgroundColor: utils_1.theme.colors.text.primary,
+            marginTop: utils_1.theme.spacing.margin.small,
+            marginBottom: utils_1.theme.spacing.margin.small
+        }
+    },
+    orderDetails__summaryLabel: {
+        classes: '',
+        props: {},
+        style: tslib_1.__assign(tslib_1.__assign({ width: '35%' }, styles_1.default.textHeadline), { fontSize: utils_1.theme.fontSizes.xxxsmall, textTransform: 'uppercase' })
+    },
+    orderDetails__summaryValuesContainer: {
+        classes: '',
+        props: {},
+        style: {
+            flexGrow: 1,
+            gap: 5
+        }
+    },
+    orderDetails__summaryValue: {
+        classes: '',
+        props: {},
+        style: tslib_1.__assign(tslib_1.__assign({}, styles_1.default.textBody), { fontSize: utils_1.theme.fontSizes.xxsmall })
+    },
+    orderDetails__itemsContainer: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%',
+            gap: utils_1.theme.spacing.margin.small
+        }
+    },
+    orderDetails__itemsTitle: {
+        classes: '',
+        props: {},
+        style: tslib_1.__assign(tslib_1.__assign({}, styles_1.default.textHeadline), { fontSize: utils_1.theme.fontSizes.xxxsmall, textTransform: 'uppercase' })
+    }
+};
+exports.default = orderDetails;

package/dist/cjs/config/orderDetailsItem.d.ts

@@ -0,0 +1,3 @@
+import { ScreenConfig } from '@open-tender/ui';
+declare const orderDetailsItem: ScreenConfig;
+export default orderDetailsItem;

package/dist/cjs/config/orderDetailsItem.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var styles_1 = tslib_1.__importDefault(require("../styles"));
+var utils_1 = require("../utils");
+var orderDetailsItem = {
+    orderDetailsItem__container: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%',
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: utils_1.theme.spacing.padding.small
+        }
+    },
+    orderDetailsItem__image: {
+        classes: '',
+        props: {},
+        style: {
+            aspectRatio: 1,
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            flexBasis: 60,
+            flexGrow: 0,
+            flexShrink: 0
+        }
+    },
+    orderDetailsItem__content: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: utils_1.theme.spacing.margin.large,
+            flexGrow: 1,
+            flexShrink: 1
+        }
+    },
+    orderDetailsItem__header: {
+        classes: '',
+        props: {},
+        style: {
+            gap: 5,
+            flexGrow: 1
+        }
+    },
+    orderDetailsItem__title: {
+        classes: '',
+        props: {},
+        style: tslib_1.__assign(tslib_1.__assign({}, styles_1.default.textHeading), { fontSize: utils_1.theme.fontSizes.xxxsmall })
+    },
+    orderDetailsItem__description: {
+        classes: '',
+        props: {},
+        style: tslib_1.__assign(tslib_1.__assign({}, styles_1.default.textBody), { fontSize: utils_1.theme.fontSizes.xxxsmall })
+    },
+    orderDetailsItem__price: {
+        classes: '',
+        props: {},
+        style: tslib_1.__assign(tslib_1.__assign({}, styles_1.default.textHeading), { fontSize: utils_1.theme.fontSizes.xxxsmall })
+    }
+};
+exports.default = orderDetailsItem;

package/dist/cjs/config/page.d.ts

@@ -0,0 +1,3 @@
+import { ScreenConfig } from '@open-tender/ui';
+declare const page: ScreenConfig;
+export default page;

package/dist/cjs/config/page.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var styles_1 = tslib_1.__importDefault(require("../styles"));
+var utils_1 = require("../utils");
+var page = {
+    page: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexBasis: 'auto',
+            flexGrow: 1,
+            flexShrink: 1,
+            overflow: 'hidden'
+        }
+    },
+    page__header: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: utils_1.theme.spacing.margin.medium,
+            marginTop: utils_1.theme.spacing.margin.medium,
+            paddingLeft: utils_1.theme.spacing.padding.medium,
+            paddingRight: utils_1.theme.spacing.padding.medium,
+            paddingTop: utils_1.theme.spacing.padding.large
+        }
+    },
+    page__title: {
+        classes: '',
+        props: {
+            as: 'h1',
+            text: 'Welcome back!'
+        },
+        style: tslib_1.__assign({}, styles_1.default.textHeadline)
+    },
+    page__content: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'flex-start',
+            paddingBottom: utils_1.theme.spacing.padding.large,
+            paddingLeft: utils_1.theme.spacing.padding.medium,
+            paddingRight: utils_1.theme.spacing.padding.medium,
+            paddingTop: utils_1.theme.spacing.padding.large,
+            overflow: 'scroll'
+        }
+    },
+    page__content__item: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexBasis: '33.333%',
+            flexGrow: 0,
+            flexShrink: 0,
+            padding: utils_1.theme.spacing.padding.small
+        }
+    },
+    page__footer: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexBasis: 200,
+            flexGrow: 0,
+            flexShrink: 1,
+            flexDirection: 'row',
+            gap: 100,
+            justifyContent: 'center'
+        }
+    }
+};
+exports.default = page;

package/dist/esm/components/OrderDetails.d.ts

@@ -0,0 +1,11 @@
+import { Order } from '@open-tender/types';
+import { CheckTotalsProps, OrderDetailsItemProps, OrderDetailsProps } from '@open-tender/ui';
+import React, { ReactNode } from 'react';
+declare const OrderDetails: ({ apiUrl, order, children, CheckTotalsView, OrderDetailsItemView }: {
+    apiUrl: string;
+    order: Order;
+    children: (props: OrderDetailsProps) => ReactNode;
+    CheckTotalsView: (props: CheckTotalsProps) => ReactNode;
+    OrderDetailsItemView: (props: OrderDetailsItemProps) => ReactNode;
+}) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+export default OrderDetails;

package/dist/esm/components/OrderDetails.js

@@ -0,0 +1,38 @@
+import React, { useCallback, useState } from 'react';
+import { useAppDispatch, useAppSelector } from '../app/hooks';
+import { useOrder } from '../hooks';
+import { selectKioskConfig, reorder as reorderPastOrder } from '../slices';
+import { default as CheckTotalsContainer } from './CheckTotals';
+import { default as OrderDetailsItemContainer } from './OrderDetailsItem';
+var OrderDetails = function (_a) {
+    var apiUrl = _a.apiUrl, order = _a.order, children = _a.children, CheckTotalsView = _a.CheckTotalsView, OrderDetailsItemView = _a.OrderDetailsItemView;
+    var dispatch = useAppDispatch();
+    var _b = useState(null), errMsg = _b[0], setErrMsg = _b[1];
+    var _c = useState(false), isReordering = _c[0], setIsReordering = _c[1];
+    var _d = useOrder(order), subtitle = _d.title, title = _d.orderNo, requestedAt = _d.requestedAt;
+    var _e = useAppSelector(selectKioskConfig), config = _e.orderDetails, modalContentConfig = _e.modalContent;
+    var reorder = function () {
+        setErrMsg(null);
+        setIsReordering(true);
+        dispatch(reorderPastOrder(order.cart));
+    };
+    var renderCheckTotals = useCallback(function () { return React.createElement(CheckTotalsContainer, { check: order, children: CheckTotalsView }); }, [order, CheckTotalsView]);
+    var renderOrderDetailsItem = useCallback(function (orderItem) { return (React.createElement(OrderDetailsItemContainer, { key: orderItem.id, apiUrl: apiUrl, orderItem: orderItem, children: OrderDetailsItemView })); }, [apiUrl, OrderDetailsItemView]);
+    if (!config)
+        return React.createElement(React.Fragment, null);
+    return children({
+        config: config,
+        modalContentConfig: modalContentConfig,
+        renderCheckTotals: renderCheckTotals,
+        requestedAt: requestedAt,
+        order: order,
+        title: title,
+        subtitle: subtitle,
+        isReordering: isReordering,
+        errMsg: errMsg,
+        handlers: { reorder: reorder },
+        apiUrl: apiUrl,
+        renderOrderDetailsItem: renderOrderDetailsItem
+    });
+};
+export default OrderDetails;

package/dist/esm/components/OrderDetailsItem.d.ts

@@ -0,0 +1,9 @@
+import { OrderItem } from '@open-tender/types';
+import { OrderDetailsItemProps } from '@open-tender/ui';
+import { ReactNode } from 'react';
+declare const OrderDetailsItem: ({ apiUrl, orderItem, children }: {
+    apiUrl: string;
+    orderItem: OrderItem;
+    children: (props: OrderDetailsItemProps) => ReactNode;
+}) => ReactNode;
+export default OrderDetailsItem;

package/dist/esm/components/OrderDetailsItem.js

@@ -0,0 +1,10 @@
+import { useAppSelector } from '../app/hooks';
+import { selectKioskConfig } from '../slices';
+var OrderDetailsItem = function (_a) {
+    var apiUrl = _a.apiUrl, orderItem = _a.orderItem, children = _a.children;
+    var config = useAppSelector(selectKioskConfig).orderDetailsItem;
+    if (!config)
+        return null;
+    return children({ config: config, orderItem: orderItem, apiUrl: apiUrl });
+};
+export default OrderDetailsItem;

package/dist/esm/components/index.d.ts

@@ -28,6 +28,8 @@ import ModalHeader from './ModalHeader';
 import NutritionalInfo from './NutritionalInfo';
 import Option from './Option';
 import OrderCard from './OrderCard';
+import OrderDetails from './OrderDetails';
+import OrderDetailsItem from './OrderDetailsItem';
 import PointsReward from './PointsReward';
 import PointsRewards from './PointsRewards';
 import PromoCode from './PromoCode';
@@ -45,4 +47,4 @@ import Tag from './Tag';
 import TextArea from './TextArea';
 import UpsellItem from './UpsellItem';
 import Upsells from './Upsells';
-export { Allergen, Applied, ButtonLink, Card, Cart, CartItem, CartUpsellItem, CategoryItem, CategoryNav, CategoryNavItem, CategoryNavOther, CheckTotals, Discount, ErrorMessage, Header, Ingredients, Input, ItemGroup, ItemGroups, ItemOption, ItemSelections, Loader, MadeForNotes, MenuCategory, MenuOther, ModalContent, ModalHeader, NutritionalInfo, Option, OrderCard, PointsReward, PointsRewards, PromoCode, Quantity, Reward, Rewards, SignIn, SignInButton, SignInCheckout, SignInOptions, SignInPhone, SignInQr, SuccessMessage, Tag, TextArea, UpsellItem, Upsells };
+export { Allergen, Applied, ButtonLink, Card, Cart, CartItem, CartUpsellItem, CategoryItem, CategoryNav, CategoryNavItem, CategoryNavOther, CheckTotals, Discount, ErrorMessage, Header, Ingredients, Input, ItemGroup, ItemGroups, ItemOption, ItemSelections, Loader, MadeForNotes, MenuCategory, MenuOther, ModalContent, ModalHeader, NutritionalInfo, Option, OrderCard, OrderDetails, OrderDetailsItem, PointsReward, PointsRewards, PromoCode, Quantity, Reward, Rewards, SignIn, SignInButton, SignInCheckout, SignInOptions, SignInPhone, SignInQr, SuccessMessage, Tag, TextArea, UpsellItem, Upsells };

package/dist/esm/components/index.js

@@ -28,6 +28,8 @@ import ModalHeader from './ModalHeader';
 import NutritionalInfo from './NutritionalInfo';
 import Option from './Option';
 import OrderCard from './OrderCard';
+import OrderDetails from './OrderDetails';
+import OrderDetailsItem from './OrderDetailsItem';
 import PointsReward from './PointsReward';
 import PointsRewards from './PointsRewards';
 import PromoCode from './PromoCode';
@@ -45,4 +47,4 @@ import Tag from './Tag';
 import TextArea from './TextArea';
 import UpsellItem from './UpsellItem';
 import Upsells from './Upsells';
-export { Allergen, Applied, ButtonLink, Card, Cart, CartItem, CartUpsellItem, CategoryItem, CategoryNav, CategoryNavItem, CategoryNavOther, CheckTotals, Discount, ErrorMessage, Header, Ingredients, Input, ItemGroup, ItemGroups, ItemOption, ItemSelections, Loader, MadeForNotes, MenuCategory, MenuOther, ModalContent, ModalHeader, NutritionalInfo, Option, OrderCard, PointsReward, PointsRewards, PromoCode, Quantity, Reward, Rewards, SignIn, SignInButton, SignInCheckout, SignInOptions, SignInPhone, SignInQr, SuccessMessage, Tag, TextArea, UpsellItem, Upsells };
+export { Allergen, Applied, ButtonLink, Card, Cart, CartItem, CartUpsellItem, CategoryItem, CategoryNav, CategoryNavItem, CategoryNavOther, CheckTotals, Discount, ErrorMessage, Header, Ingredients, Input, ItemGroup, ItemGroups, ItemOption, ItemSelections, Loader, MadeForNotes, MenuCategory, MenuOther, ModalContent, ModalHeader, NutritionalInfo, Option, OrderCard, OrderDetails, OrderDetailsItem, PointsReward, PointsRewards, PromoCode, Quantity, Reward, Rewards, SignIn, SignInButton, SignInCheckout, SignInOptions, SignInPhone, SignInQr, SuccessMessage, Tag, TextArea, UpsellItem, Upsells };

package/dist/esm/config/index.js

@@ -45,6 +45,9 @@ import modalHeader from './modalHeader';
 import nutritionalInfo from './nutritionalInfo';
 import option from './option';
 import orderCard from './orderCard';
+import orderDetails from './orderDetails';
+import orderDetailsItem from './orderDetailsItem';
+import page from './page';
 import pointsReward from './pointsReward';
 import pointsRewards from './pointsRewards';
 import promoCode from './promoCode';
@@ -110,6 +113,9 @@ var config = {
     nutritionalInfo: nutritionalInfo,
     option: option,
     orderCard: orderCard,
+    orderDetails: orderDetails,
+    orderDetailsItem: orderDetailsItem,
+    page: page,
     pointsReward: pointsReward,
     pointsRewards: pointsRewards,
     promoCode: promoCode,

package/dist/esm/config/orderDetails.d.ts

@@ -0,0 +1,3 @@
+import { ScreenConfig } from '@open-tender/ui';
+declare const orderDetails: ScreenConfig;
+export default orderDetails;

package/dist/esm/config/orderDetails.js

@@ -0,0 +1,104 @@
+import { __assign } from "tslib";
+import styles from '../styles';
+import { theme } from '../utils';
+var orderDetails = {
+    orderDetails__totalsContainer: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%'
+        }
+    },
+    orderDetails__orderNumber: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeadline), { fontSize: theme.fontSizes.xsmall, textTransform: 'uppercase', textAlign: 'center' })
+    },
+    orderDetails__orderTitle: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.xxlarge, textAlign: 'center' })
+    },
+    orderDetails__buttonsContainer: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%',
+            justifyContent: 'center',
+            flexDirection: 'row',
+            gap: theme.spacing.margin.small,
+            marginBottom: theme.spacing.margin.large
+        }
+    },
+    orderDetails__reorderButton: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.buttonPrimary), { fontSize: theme.fontSizes.small })
+    },
+    orderDetails__rateOrderButton: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.buttonSecondary), { fontSize: theme.fontSizes.small })
+    },
+    orderDetails__summary: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%',
+            alignItems: 'center',
+            marginBottom: theme.spacing.margin.large
+        }
+    },
+    orderDetails__summaryItem: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%',
+            flexDirection: 'row',
+            alignItems: 'center'
+        }
+    },
+    orderDetails__divider: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%',
+            height: 0.5,
+            backgroundColor: theme.colors.text.primary,
+            marginTop: theme.spacing.margin.small,
+            marginBottom: theme.spacing.margin.small
+        }
+    },
+    orderDetails__summaryLabel: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({ width: '35%' }, styles.textHeadline), { fontSize: theme.fontSizes.xxxsmall, textTransform: 'uppercase' })
+    },
+    orderDetails__summaryValuesContainer: {
+        classes: '',
+        props: {},
+        style: {
+            flexGrow: 1,
+            gap: 5
+        }
+    },
+    orderDetails__summaryValue: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textBody), { fontSize: theme.fontSizes.xxsmall })
+    },
+    orderDetails__itemsContainer: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%',
+            gap: theme.spacing.margin.small
+        }
+    },
+    orderDetails__itemsTitle: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeadline), { fontSize: theme.fontSizes.xxxsmall, textTransform: 'uppercase' })
+    }
+};
+export default orderDetails;

package/dist/esm/config/orderDetailsItem.d.ts

@@ -0,0 +1,3 @@
+import { ScreenConfig } from '@open-tender/ui';
+declare const orderDetailsItem: ScreenConfig;
+export default orderDetailsItem;

package/dist/esm/config/orderDetailsItem.js

@@ -0,0 +1,62 @@
+import { __assign } from "tslib";
+import styles from '../styles';
+import { theme } from '../utils';
+var orderDetailsItem = {
+    orderDetailsItem__container: {
+        classes: '',
+        props: {},
+        style: {
+            width: '100%',
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: theme.spacing.padding.small
+        }
+    },
+    orderDetailsItem__image: {
+        classes: '',
+        props: {},
+        style: {
+            aspectRatio: 1,
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            flexBasis: 60,
+            flexGrow: 0,
+            flexShrink: 0
+        }
+    },
+    orderDetailsItem__content: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: theme.spacing.margin.large,
+            flexGrow: 1,
+            flexShrink: 1
+        }
+    },
+    orderDetailsItem__header: {
+        classes: '',
+        props: {},
+        style: {
+            gap: 5,
+            flexGrow: 1
+        }
+    },
+    orderDetailsItem__title: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.xxxsmall })
+    },
+    orderDetailsItem__description: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textBody), { fontSize: theme.fontSizes.xxxsmall })
+    },
+    orderDetailsItem__price: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.xxxsmall })
+    }
+};
+export default orderDetailsItem;

package/dist/esm/config/page.d.ts

@@ -0,0 +1,3 @@
+import { ScreenConfig } from '@open-tender/ui';
+declare const page: ScreenConfig;
+export default page;

package/dist/esm/config/page.js

@@ -0,0 +1,77 @@
+import { __assign } from "tslib";
+import styles from '../styles';
+import { theme } from '../utils';
+var page = {
+    page: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexBasis: 'auto',
+            flexGrow: 1,
+            flexShrink: 1,
+            overflow: 'hidden'
+        }
+    },
+    page__header: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: theme.spacing.margin.medium,
+            marginTop: theme.spacing.margin.medium,
+            paddingLeft: theme.spacing.padding.medium,
+            paddingRight: theme.spacing.padding.medium,
+            paddingTop: theme.spacing.padding.large
+        }
+    },
+    page__title: {
+        classes: '',
+        props: {
+            as: 'h1',
+            text: 'Welcome back!'
+        },
+        style: __assign({}, styles.textHeadline)
+    },
+    page__content: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'flex-start',
+            paddingBottom: theme.spacing.padding.large,
+            paddingLeft: theme.spacing.padding.medium,
+            paddingRight: theme.spacing.padding.medium,
+            paddingTop: theme.spacing.padding.large,
+            overflow: 'scroll'
+        }
+    },
+    page__content__item: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexBasis: '33.333%',
+            flexGrow: 0,
+            flexShrink: 0,
+            padding: theme.spacing.padding.small
+        }
+    },
+    page__footer: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexBasis: 200,
+            flexGrow: 0,
+            flexShrink: 1,
+            flexDirection: 'row',
+            gap: 100,
+            justifyContent: 'center'
+        }
+    }
+};
+export default page;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-tender/store",
-  "version": "1.1.21",
+  "version": "1.1.22",
   "description": "A library of hooks, reducers, utility functions, and types for use with Open Tender applications that utilize our in-store POS API",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -36,7 +36,7 @@
     "@babel/core": "^7.23.6",
     "@emotion/react": "^11.11.1",
     "@open-tender/types": "^0.4.44",
-    "@open-tender/ui": "^0.3.14",
+    "@open-tender/ui": "^0.3.16",
     "@open-tender/utils": "^0.4.23",
     "@reduxjs/toolkit": "^2.0.1",
     "@types/react": "^18.2.45",
@@ -65,7 +65,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@open-tender/types": "^0.4.43",
-    "@open-tender/ui": "^0.3.14",
+    "@open-tender/ui": "^0.3.16",
     "@open-tender/utils": "^0.4.23",
     "@reduxjs/toolkit": "^2.0.1",
     "date-fns": "2.30.0",