@open-tender/store/dist/esm/components/Header.js

A library of hooks, reducers, utility functions, and types for use with Open Tender applications that utilize our in-store POS API

import React, { useCallback } from 'react';
import { useAppDispatch, useAppSelector } from '../app/hooks';
import { selectKioskConfig, selectStoreSettings, toggleSidebar } from '../slices';
import { default as AccessibilityButtonContainer } from './AccessibilityButton';
import { default as CancelButtonContainer } from './CancelButton';
import { default as CartButtonContainer } from './CartButton';
import { default as SignInButtonContainer } from './SignInButton';
import { default as TagsButtonContainer } from './TagsButton';
var Header = function (_a) {
    var to = _a.to, _b = _a.backText, backText = _b === void 0 ? 'Back' : _b, _c = _a.showImage, showImage = _c === void 0 ? true : _c, backAction = _a.backAction, pathname = _a.pathname, navigate = _a.navigate, children = _a.children, SignInButtonView = _a.SignInButtonView, TagsButtonView = _a.TagsButtonView, CartButton = _a.CartButton, CancelButton = _a.CancelButton, AccessibilityButton = _a.AccessibilityButton, startOverCallback = _a.startOverCallback, BackButton = _a.BackButton;
    var dispatch = useAppDispatch();
    var config = (useAppSelector(selectKioskConfig) || {}).header;
    var showButtons = !!(backAction || to);
    var _d = useAppSelector(selectStoreSettings), display_sign_in = _d.display_sign_in, display_allergens = _d.display_allergens, display_tags = _d.display_tags;
    var back = function () {
        if (backAction) {
            backAction();
        }
        else if (to) {
            navigate(to);
        }
        else {
            navigate('/');
        }
    };
    var startOver = function () {
        return startOverCallback ? startOverCallback === null || startOverCallback === void 0 ? void 0 : startOverCallback() : navigate('/');
    };
    var open = function () {
        dispatch(toggleSidebar());
    };
    var handlers = { back: back, open: open, startOver: startOver };
    var renderSignInButton = useCallback(function () { return (React.createElement(SignInButtonContainer, { pathname: pathname, navigate: navigate, children: SignInButtonView })); }, [pathname, navigate, SignInButtonView]);
    var renderTagsButton = useCallback(function () {
        return TagsButtonView ? React.createElement(TagsButtonContainer, { children: TagsButtonView }) : null;
    }, [TagsButtonView]);
    var renderCartButton = useCallback(function () { return (CartButton ? React.createElement(CartButtonContainer, { children: CartButton }) : null); }, [CartButton]);
    var renderCancelButton = useCallback(function () {
        return CancelButton ? (React.createElement(CancelButtonContainer, { navigate: navigate, children: CancelButton })) : null;
    }, [CancelButton, navigate]);
    var renderAccessibilityButton = useCallback(function () {
        return AccessibilityButton ? (React.createElement(AccessibilityButtonContainer, { children: AccessibilityButton })) : null;
    }, [AccessibilityButton]);
    if (!config)
        return null;
    return children({
        config: config,
        handlers: handlers,
        showButtons: showButtons,
        showImage: showImage,
        backText: backText,
        renderSignInButton: display_sign_in ? renderSignInButton : undefined,
        renderTagsButton: TagsButtonView && (display_allergens || display_tags)
            ? renderTagsButton
            : undefined,
        renderCartButton: CartButton ? renderCartButton : undefined,
        renderCancelButton: CancelButton ? renderCancelButton : undefined,
        renderAccessibilityButton: AccessibilityButton
            ? renderAccessibilityButton
            : undefined,
        BackButton: BackButton
    });
};
export default Header;