@open-tender/store 1.1.26 → 1.1.29

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

@@ -1,6 +1,9 @@
 import { SignInOptionsProps, SignInQrProps, SignInPhoneProps, ErrorMessageProps, KeypadProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const SignInOptions: ({ close, children, SignInQrView, SignInPhoneView, KeypadView, ErrorMessageView }: {
+import { ScanListener } from '../hooks/types';
+declare const SignInOptions: ({ listener, cameraScanner, close, children, SignInQrView, SignInPhoneView, KeypadView, ErrorMessageView }: {
+    listener: ScanListener;
+    cameraScanner: ScanListener;
     close: () => void;
     children: (props: SignInOptionsProps) => ReactNode;
     SignInQrView: (props: SignInQrProps) => ReactNode;

package/dist/cjs/components/SignInOptions.js

@@ -7,11 +7,13 @@ var slices_1 = require("../slices");
 var SignInPhone_1 = tslib_1.__importDefault(require("./SignInPhone"));
 var SignInQr_1 = tslib_1.__importDefault(require("./SignInQr"));
 var SignInOptions = function (_a) {
-    var close = _a.close, children = _a.children, SignInQrView = _a.SignInQrView, SignInPhoneView = _a.SignInPhoneView, KeypadView = _a.KeypadView, ErrorMessageView = _a.ErrorMessageView;
+    var listener = _a.listener, cameraScanner = _a.cameraScanner, close = _a.close, children = _a.children, SignInQrView = _a.SignInQrView, SignInPhoneView = _a.SignInPhoneView, KeypadView = _a.KeypadView, ErrorMessageView = _a.ErrorMessageView;
     var _b = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig), config = _b.signInOptions, modalContentConfig = _b.modalContent;
     var _c = (0, react_1.useState)(null), signInType = _c[0], setSignInType = _c[1];
+    var terminal = (0, hooks_1.useAppSelector)(slices_1.selectKioskTerminal);
+    var scannerType = terminal === null || terminal === void 0 ? void 0 : terminal.pos_scanner.identifier;
     var handlers = { close: close, setSignInType: setSignInType };
-    var renderSignInQr = (0, react_1.useCallback)(function (close) { return (react_1.default.createElement(SignInQr_1.default, { close: close, children: SignInQrView })); }, [SignInQrView]);
+    var renderSignInQr = (0, react_1.useCallback)(function (close) { return (react_1.default.createElement(SignInQr_1.default, { listener: listener, cameraScanner: cameraScanner, close: close, children: SignInQrView, type: scannerType })); }, [SignInQrView, scannerType, cameraScanner, listener]);
     var renderSignInPhone = (0, react_1.useCallback)(function (close) { return (react_1.default.createElement(SignInPhone_1.default, { ErrorMessageView: ErrorMessageView, KeypadView: KeypadView, close: close, children: SignInPhoneView })); }, [SignInPhoneView, KeypadView, ErrorMessageView]);
     if (!config)
         return null;

package/dist/cjs/components/SignInPhone.js

@@ -44,7 +44,7 @@ var SignInPhone = function (_a) {
     var keypadHandlers = (0, react_1.useMemo)(function () { return ({
         change: function (value) { return setPhone((0, utils_2.makePhone)(value)); }
     }); }, []);
-    var renderKeypad = (0, react_1.useCallback)(function () { return (react_1.default.createElement(Keypad_1.default, { handlers: keypadHandlers, value: phone, children: KeypadView })); }, [KeypadView, phone, keypadHandlers]);
+    var renderKeypad = (0, react_1.useCallback)(function () { return (react_1.default.createElement(Keypad_1.default, { type: "numeric", handlers: keypadHandlers, value: phone, children: KeypadView })); }, [KeypadView, phone, keypadHandlers]);
     var renderErrorMessage = (0, react_1.useCallback)(function (errMsg) { return (react_1.default.createElement(ErrorMessage_1.default, { content: errMsg, children: ErrorMessageView })); }, [ErrorMessageView]);
     return children({
         config: config,

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

@@ -1,7 +1,11 @@
 import { SignInQrProps } from '@open-tender/ui';
-import { ReactNode } from 'react';
-declare const SignInQr: ({ close, children }: {
+import React, { ReactNode } from 'react';
+import { ScanListener } from '../hooks/types';
+declare const SignInQr: ({ close, children, listener, cameraScanner, type }: {
     close: () => void;
     children: (props: SignInQrProps) => ReactNode;
-}) => ReactNode;
+    listener: ScanListener;
+    cameraScanner: ScanListener;
+    type?: string;
+}) => React.JSX.Element;
 export default SignInQr;

package/dist/cjs/components/SignInQr.js

@@ -1,41 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
 var utils_1 = require("@open-tender/utils");
-var react_1 = 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 SignInQr = function (_a) {
-    var close = _a.close, children = _a.children;
+    var close = _a.close, children = _a.children, listener = _a.listener, cameraScanner = _a.cameraScanner, type = _a.type;
     var dispatch = (0, hooks_1.useAppDispatch)();
     var _b = (0, react_1.useState)(false), submitted = _b[0], setSubmitted = _b[1];
     var _c = (0, react_1.useState)(false), hasRead = _c[0], setHasRead = _c[1];
     var _d = (0, react_1.useState)(null), errMsg = _d[0], setErrMsg = _d[1];
     var _e = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig), config = _e.signInQr, errorMessageConfig = _e.errorMessage, modalContentConfig = _e.modalContent;
     var api = (0, hooks_1.useAppSelector)(slices_1.selectApi);
-    var scan = (0, hooks_2.useBarcode)(api);
+    var scan = (0, hooks_2.useBarcodeScanner)(listener, cameraScanner, type, api);
     var _f = (0, hooks_1.useAppSelector)(slices_1.selectCustomerIdentify), customer = _f.data, loading = _f.loading, error = _f.error;
     var isLoading = loading === 'pending';
     var cancel = function () {
-        if (!scan.code)
-            scan.cancel();
+        if (!(scan === null || scan === void 0 ? void 0 : scan.code))
+            scan === null || scan === void 0 ? void 0 : scan.cancel();
         close();
     };
     var retry = function () {
+        (scan === null || scan === void 0 ? void 0 : scan.reset) && scan.reset();
         setHasRead(false);
         setErrMsg(null);
     };
     (0, react_1.useEffect)(function () {
-        if (scan.error) {
+        if (scan === null || scan === void 0 ? void 0 : scan.error) {
             setErrMsg(scan.error);
         }
-        else if (scan.code && !customer) {
+        else if ((scan === null || scan === void 0 ? void 0 : scan.code) && !customer) {
             dispatch((0, slices_1.fetchCustomerIdentify)({ qr_code: scan.code }));
             setSubmitted(true);
         }
         else if (!hasRead) {
             setHasRead(true);
-            scan.read();
+            scan === null || scan === void 0 ? void 0 : scan.read();
         }
     }, [dispatch, scan, close, customer, hasRead]);
     var handlers = { close: cancel, retry: retry };
@@ -50,12 +52,15 @@ var SignInQr = function (_a) {
             }
         }
     }, [submitted, isLoading, error, close]);
-    return children({
-        config: config,
-        handlers: handlers,
-        errMsg: errMsg,
-        errorMessageConfig: errorMessageConfig,
-        modalContentConfig: modalContentConfig
-    });
+    var CameraComponent = (0, react_1.useMemo)(function () { return scan === null || scan === void 0 ? void 0 : scan.camera; }, [scan]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        children({
+            config: config,
+            handlers: handlers,
+            errMsg: errMsg,
+            errorMessageConfig: errorMessageConfig,
+            modalContentConfig: modalContentConfig
+        }),
+        (scan === null || scan === void 0 ? void 0 : scan.showScanner) && scan.camera && CameraComponent && (react_1.default.createElement(CameraComponent, null))));
 };
 exports.default = SignInQr;

package/dist/cjs/config/checkoutConfirmation.js

@@ -41,6 +41,41 @@ var checkoutConfirmation = {
         },
         style: tslib_1.__assign(tslib_1.__assign({}, styles_1.default.textHeadline), { fontSize: utils_1.theme.fontSizes.xxxlarge })
     },
+    checkoutConfirmation__printHeader: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexBasis: 50,
+            flexGrow: 0,
+            flexShrink: 1,
+            justifyContent: 'center',
+            textAlign: 'center'
+        }
+    },
+    checkoutConfirmation__printTitle: {
+        classes: '',
+        props: {
+            as: 'h2',
+            text: 'Need a Receipt?'
+        },
+        style: tslib_1.__assign(tslib_1.__assign({}, styles_1.default.textHeading), { fontSize: utils_1.theme.fontSizes.xlarge, marginBottom: utils_1.theme.spacing.margin.small })
+    },
+    checkoutConfirmation__printContent: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'row',
+            gap: utils_1.theme.spacing.margin.small
+        }
+    },
+    checkoutConfirmation__printButton: {
+        classes: '',
+        props: {},
+        style: tslib_1.__assign(tslib_1.__assign({}, styles_1.default.buttonSecondary), { flexGrow: 0, flexShrink: 0, borderRadius: 64, fontSize: utils_1.theme.fontSizes.large, paddingBottom: 20, paddingLeft: 30, paddingRight: 30, paddingTop: 20 })
+    },
     checkoutConfirmation__content: {
         classes: '',
         props: {},
@@ -96,11 +131,6 @@ var checkoutConfirmation = {
             justifyContent: 'center'
         }
     },
-    checkoutConfirmation__print: {
-        classes: '',
-        props: { text: 'Customize' },
-        style: tslib_1.__assign(tslib_1.__assign({}, styles_1.default.buttonSecondary), { flexBasis: '400px', flexGrow: 0, flexShrink: 0, borderRadius: 64, fontSize: utils_1.theme.fontSizes.large, paddingBottom: 20, paddingLeft: 30, paddingRight: 30, paddingTop: 20 })
-    },
     checkoutConfirmation__proceed: {
         classes: '',
         props: { text: 'Add To Order' },

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

@@ -1,4 +1,8 @@
+import { BarcodeScannerType, BarcodeScannerMethod } from './types';
 import useBarcode from './useBarcode';
+import useBarcodeCameraScanner from './useBarcodeCameraScanner';
+import { useBarcodeScanner } from './useBarcodeScanner';
+import useBarcodeUSB from './useBarcodeUSB';
 import useCardSwipe from './useCardSwipe';
 import useChipDNATender from './useChipDNATender';
 import useCustomerRewards from './useCustomerRewards';
@@ -10,4 +14,4 @@ import useOrderValidate from './useOrderValidate';
 import usePrevious from './usePrevious';
 import usePunch from './usePunch';
 import useRefund from './useRefund';
-export { useBarcode, useCardSwipe, useChipDNATender, useCustomerRewards, useEmployee, useGiftCardBalance, useKioskImageUrl, useOrder, useOrderValidate, usePrevious, usePunch, useRefund };
+export { useBarcode, useCardSwipe, useChipDNATender, useCustomerRewards, useEmployee, useGiftCardBalance, useKioskImageUrl, useOrder, useOrderValidate, usePrevious, usePunch, useRefund, useBarcodeCameraScanner, useBarcodeUSB, useBarcodeScanner, BarcodeScannerType, BarcodeScannerMethod };

package/dist/cjs/hooks/index.js

@@ -1,9 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRefund = exports.usePunch = exports.usePrevious = exports.useOrderValidate = exports.useOrder = exports.useKioskImageUrl = exports.useGiftCardBalance = exports.useEmployee = exports.useCustomerRewards = exports.useChipDNATender = exports.useCardSwipe = exports.useBarcode = void 0;
+exports.BarcodeScannerType = exports.useBarcodeScanner = exports.useBarcodeUSB = exports.useBarcodeCameraScanner = exports.useRefund = exports.usePunch = exports.usePrevious = exports.useOrderValidate = exports.useOrder = exports.useKioskImageUrl = exports.useGiftCardBalance = exports.useEmployee = exports.useCustomerRewards = exports.useChipDNATender = exports.useCardSwipe = exports.useBarcode = void 0;
 var tslib_1 = require("tslib");
+var types_1 = require("./types");
+Object.defineProperty(exports, "BarcodeScannerType", { enumerable: true, get: function () { return types_1.BarcodeScannerType; } });
 var useBarcode_1 = tslib_1.__importDefault(require("./useBarcode"));
 exports.useBarcode = useBarcode_1.default;
+var useBarcodeCameraScanner_1 = tslib_1.__importDefault(require("./useBarcodeCameraScanner"));
+exports.useBarcodeCameraScanner = useBarcodeCameraScanner_1.default;
+var useBarcodeScanner_1 = require("./useBarcodeScanner");
+Object.defineProperty(exports, "useBarcodeScanner", { enumerable: true, get: function () { return useBarcodeScanner_1.useBarcodeScanner; } });
+var useBarcodeUSB_1 = tslib_1.__importDefault(require("./useBarcodeUSB"));
+exports.useBarcodeUSB = useBarcodeUSB_1.default;
 var useCardSwipe_1 = tslib_1.__importDefault(require("./useCardSwipe"));
 exports.useCardSwipe = useCardSwipe_1.default;
 var useChipDNATender_1 = tslib_1.__importDefault(require("./useChipDNATender"));

package/dist/cjs/hooks/types.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare enum BarcodeScannerType {
+    NONE = "NONE",
+    MORPHSTICK = "MORPHSTICK",
+    USB = "USB",
+    CAMERA = "CAMERA"
+}
+export interface BarcodeScannerMethod {
+    code: string | null;
+    error: string | null;
+    read: () => Promise<void>;
+    cancel: () => Promise<void>;
+    reset?: () => Promise<void>;
+    camera?: () => React.ReactNode;
+    showScanner?: boolean;
+}
+export declare abstract class ScanListener {
+    constructor();
+    abstract read(callback?: any): Promise<void>;
+    abstract cancel(callback?: any): Promise<void>;
+    scannerComponent(callback?: any): any;
+}

package/dist/cjs/hooks/types.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScanListener = exports.BarcodeScannerType = void 0;
+var BarcodeScannerType;
+(function (BarcodeScannerType) {
+    BarcodeScannerType["NONE"] = "NONE";
+    BarcodeScannerType["MORPHSTICK"] = "MORPHSTICK";
+    BarcodeScannerType["USB"] = "USB";
+    BarcodeScannerType["CAMERA"] = "CAMERA";
+})(BarcodeScannerType || (exports.BarcodeScannerType = BarcodeScannerType = {}));
+var ScanListener = /** @class */ (function () {
+    function ScanListener() {
+    }
+    ScanListener.prototype.scannerComponent = function (callback) {
+        callback && callback();
+        return null;
+    };
+    return ScanListener;
+}());
+exports.ScanListener = ScanListener;

package/dist/cjs/hooks/useBarcodeCameraScanner.d.ts

@@ -0,0 +1,3 @@
+import { ScanListener, BarcodeScannerMethod } from './types';
+declare function useBarcodeCameraScanner(listener: ScanListener): BarcodeScannerMethod;
+export default useBarcodeCameraScanner;

package/dist/cjs/hooks/useBarcodeCameraScanner.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+function useBarcodeCameraScanner(listener) {
+    var _this = this;
+    var scannedCode = (0, react_1.useRef)('');
+    var _a = (0, react_1.useState)(null), error = _a[0], setError = _a[1];
+    var _b = (0, react_1.useState)(false), showScanner = _b[0], setShowScanner = _b[1];
+    var onCodeScanned = function (event) {
+        scannedCode.current = event.nativeEvent.codeStringValue;
+        setShowScanner(false);
+    };
+    var requestPermissionHandler = function (result) {
+        setShowScanner(result === 'granted');
+        setError(result !== 'granted'
+            ? 'Authorization Error: Cannot Access Device Camera'
+            : null);
+    };
+    var read = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            listener.read(requestPermissionHandler);
+            return [2 /*return*/];
+        });
+    }); };
+    var cancel = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            listener.cancel(function () { return setShowScanner(false); });
+            return [2 /*return*/];
+        });
+    }); };
+    var camera = (0, react_1.useCallback)(function () {
+        if (!showScanner) {
+            return null;
+        }
+        return listener.scannerComponent(onCodeScanned);
+    }, [listener, showScanner]);
+    var reset = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            scannedCode.current = '';
+            setShowScanner(false);
+            setError(null);
+            return [2 /*return*/];
+        });
+    }); };
+    return {
+        read: read,
+        camera: camera,
+        error: error,
+        cancel: cancel,
+        reset: reset,
+        showScanner: showScanner,
+        code: scannedCode.current
+    };
+}
+exports.default = useBarcodeCameraScanner;

package/dist/cjs/hooks/useBarcodeScanner.d.ts

@@ -0,0 +1,3 @@
+import { PosAPI } from '../services';
+import { BarcodeScannerMethod, ScanListener } from './types';
+export declare const useBarcodeScanner: (listener: ScanListener, cameraScanner: ScanListener, type?: string, api?: PosAPI) => BarcodeScannerMethod | undefined;

package/dist/cjs/hooks/useBarcodeScanner.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBarcodeScanner = void 0;
+var tslib_1 = require("tslib");
+var types_1 = require("./types");
+var useBarcode_1 = tslib_1.__importDefault(require("./useBarcode"));
+var useBarcodeCameraScanner_1 = tslib_1.__importDefault(require("./useBarcodeCameraScanner"));
+var useBarcodeUSB_1 = tslib_1.__importDefault(require("./useBarcodeUSB"));
+var useBarcodeScanner = function (listener, cameraScanner, type, api) {
+    var usbScan = (0, useBarcodeUSB_1.default)(listener);
+    var cameraScan = (0, useBarcodeCameraScanner_1.default)(cameraScanner);
+    var defaultScan = (0, useBarcode_1.default)(api);
+    switch (type) {
+        case types_1.BarcodeScannerType.CAMERA:
+            return cameraScan;
+        case types_1.BarcodeScannerType.USB:
+            return usbScan;
+        case types_1.BarcodeScannerType.MORPHSTICK:
+            return defaultScan;
+    }
+    return undefined;
+};
+exports.useBarcodeScanner = useBarcodeScanner;

package/dist/cjs/hooks/useBarcodeUSB.d.ts

@@ -0,0 +1,3 @@
+import { ScanListener, BarcodeScannerMethod } from './types';
+declare const useBarcodeUSB: (listener: ScanListener) => BarcodeScannerMethod;
+export default useBarcodeUSB;

package/dist/cjs/hooks/useBarcodeUSB.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var SCAN_MAX_TIME_DIFF = 100;
+var useBarcodeUSB = function (listener) {
+    var barcodeArray = (0, react_1.useRef)([]);
+    var _a = (0, react_1.useState)(false), setCodeScanned = _a[1];
+    var _b = (0, react_1.useState)(null), error = _b[0], setError = _b[1];
+    var timer = (0, react_1.useRef)(undefined);
+    var updateBarcode = function (data) {
+        barcodeArray.current.push(data.pressedKey);
+        clearTimeout(timer === null || timer === void 0 ? void 0 : timer.current);
+        timer.current = setTimeout(function () { return setCodeScanned(function (prev) { return !prev; }); }, SCAN_MAX_TIME_DIFF);
+    };
+    var cancel = (0, react_1.useCallback)(function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            listener.cancel(function () { return clearTimeout(timer === null || timer === void 0 ? void 0 : timer.current); });
+            return [2 /*return*/];
+        });
+    }); }, [listener]);
+    var reset = (0, react_1.useCallback)(function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            cancel();
+            barcodeArray.current = [];
+            setCodeScanned(false);
+            setError(null);
+            return [2 /*return*/];
+        });
+    }); }, [cancel]);
+    (0, react_1.useEffect)(function () {
+        return function () {
+            reset();
+        };
+    }, [reset]);
+    var read = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            listener.read(updateBarcode);
+            return [2 /*return*/];
+        });
+    }); };
+    return {
+        code: barcodeArray.current.length > 0
+            ? barcodeArray.current.join('').trim()
+            : null,
+        read: read,
+        cancel: cancel,
+        reset: reset,
+        error: error
+    };
+};
+exports.default = useBarcodeUSB;

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

@@ -1,6 +1,9 @@
 import { SignInOptionsProps, SignInQrProps, SignInPhoneProps, ErrorMessageProps, KeypadProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const SignInOptions: ({ close, children, SignInQrView, SignInPhoneView, KeypadView, ErrorMessageView }: {
+import { ScanListener } from '../hooks/types';
+declare const SignInOptions: ({ listener, cameraScanner, close, children, SignInQrView, SignInPhoneView, KeypadView, ErrorMessageView }: {
+    listener: ScanListener;
+    cameraScanner: ScanListener;
     close: () => void;
     children: (props: SignInOptionsProps) => ReactNode;
     SignInQrView: (props: SignInQrProps) => ReactNode;

package/dist/esm/components/SignInOptions.js

@@ -1,14 +1,16 @@
 import React, { useCallback, useState } from 'react';
 import { useAppSelector } from '../app/hooks';
-import { selectKioskConfig } from '../slices';
+import { selectKioskConfig, selectKioskTerminal } from '../slices';
 import { default as SignInPhoneContainer } from './SignInPhone';
 import { default as SignInQrContainer } from './SignInQr';
 var SignInOptions = function (_a) {
-    var close = _a.close, children = _a.children, SignInQrView = _a.SignInQrView, SignInPhoneView = _a.SignInPhoneView, KeypadView = _a.KeypadView, ErrorMessageView = _a.ErrorMessageView;
+    var listener = _a.listener, cameraScanner = _a.cameraScanner, close = _a.close, children = _a.children, SignInQrView = _a.SignInQrView, SignInPhoneView = _a.SignInPhoneView, KeypadView = _a.KeypadView, ErrorMessageView = _a.ErrorMessageView;
     var _b = useAppSelector(selectKioskConfig), config = _b.signInOptions, modalContentConfig = _b.modalContent;
     var _c = useState(null), signInType = _c[0], setSignInType = _c[1];
+    var terminal = useAppSelector(selectKioskTerminal);
+    var scannerType = terminal === null || terminal === void 0 ? void 0 : terminal.pos_scanner.identifier;
     var handlers = { close: close, setSignInType: setSignInType };
-    var renderSignInQr = useCallback(function (close) { return (React.createElement(SignInQrContainer, { close: close, children: SignInQrView })); }, [SignInQrView]);
+    var renderSignInQr = useCallback(function (close) { return (React.createElement(SignInQrContainer, { listener: listener, cameraScanner: cameraScanner, close: close, children: SignInQrView, type: scannerType })); }, [SignInQrView, scannerType, cameraScanner, listener]);
     var renderSignInPhone = useCallback(function (close) { return (React.createElement(SignInPhoneContainer, { ErrorMessageView: ErrorMessageView, KeypadView: KeypadView, close: close, children: SignInPhoneView })); }, [SignInPhoneView, KeypadView, ErrorMessageView]);
     if (!config)
         return null;

package/dist/esm/components/SignInPhone.js

@@ -41,7 +41,7 @@ var SignInPhone = function (_a) {
     var keypadHandlers = useMemo(function () { return ({
         change: function (value) { return setPhone(makePhone(value)); }
     }); }, []);
-    var renderKeypad = useCallback(function () { return (React.createElement(KeypadContainer, { handlers: keypadHandlers, value: phone, children: KeypadView })); }, [KeypadView, phone, keypadHandlers]);
+    var renderKeypad = useCallback(function () { return (React.createElement(KeypadContainer, { type: "numeric", handlers: keypadHandlers, value: phone, children: KeypadView })); }, [KeypadView, phone, keypadHandlers]);
     var renderErrorMessage = useCallback(function (errMsg) { return (React.createElement(ErrorMessageContainer, { content: errMsg, children: ErrorMessageView })); }, [ErrorMessageView]);
     return children({
         config: config,

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

@@ -1,7 +1,11 @@
 import { SignInQrProps } from '@open-tender/ui';
-import { ReactNode } from 'react';
-declare const SignInQr: ({ close, children }: {
+import React, { ReactNode } from 'react';
+import { ScanListener } from '../hooks/types';
+declare const SignInQr: ({ close, children, listener, cameraScanner, type }: {
     close: () => void;
     children: (props: SignInQrProps) => ReactNode;
-}) => ReactNode;
+    listener: ScanListener;
+    cameraScanner: ScanListener;
+    type?: string;
+}) => React.JSX.Element;
 export default SignInQr;

package/dist/esm/components/SignInQr.js

@@ -1,39 +1,40 @@
 import { handleRespError } from '@open-tender/utils';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../app/hooks';
-import { useBarcode } from '../hooks';
+import { useBarcodeScanner } from '../hooks';
 import { fetchCustomerIdentify, selectApi, selectCustomerIdentify, selectKioskConfig } from '../slices';
 var SignInQr = function (_a) {
-    var close = _a.close, children = _a.children;
+    var close = _a.close, children = _a.children, listener = _a.listener, cameraScanner = _a.cameraScanner, type = _a.type;
     var dispatch = useAppDispatch();
     var _b = useState(false), submitted = _b[0], setSubmitted = _b[1];
     var _c = useState(false), hasRead = _c[0], setHasRead = _c[1];
     var _d = useState(null), errMsg = _d[0], setErrMsg = _d[1];
     var _e = useAppSelector(selectKioskConfig), config = _e.signInQr, errorMessageConfig = _e.errorMessage, modalContentConfig = _e.modalContent;
     var api = useAppSelector(selectApi);
-    var scan = useBarcode(api);
+    var scan = useBarcodeScanner(listener, cameraScanner, type, api);
     var _f = useAppSelector(selectCustomerIdentify), customer = _f.data, loading = _f.loading, error = _f.error;
     var isLoading = loading === 'pending';
     var cancel = function () {
-        if (!scan.code)
-            scan.cancel();
+        if (!(scan === null || scan === void 0 ? void 0 : scan.code))
+            scan === null || scan === void 0 ? void 0 : scan.cancel();
         close();
     };
     var retry = function () {
+        (scan === null || scan === void 0 ? void 0 : scan.reset) && scan.reset();
         setHasRead(false);
         setErrMsg(null);
     };
     useEffect(function () {
-        if (scan.error) {
+        if (scan === null || scan === void 0 ? void 0 : scan.error) {
             setErrMsg(scan.error);
         }
-        else if (scan.code && !customer) {
+        else if ((scan === null || scan === void 0 ? void 0 : scan.code) && !customer) {
             dispatch(fetchCustomerIdentify({ qr_code: scan.code }));
             setSubmitted(true);
         }
         else if (!hasRead) {
             setHasRead(true);
-            scan.read();
+            scan === null || scan === void 0 ? void 0 : scan.read();
         }
     }, [dispatch, scan, close, customer, hasRead]);
     var handlers = { close: cancel, retry: retry };
@@ -48,12 +49,15 @@ var SignInQr = function (_a) {
             }
         }
     }, [submitted, isLoading, error, close]);
-    return children({
-        config: config,
-        handlers: handlers,
-        errMsg: errMsg,
-        errorMessageConfig: errorMessageConfig,
-        modalContentConfig: modalContentConfig
-    });
+    var CameraComponent = useMemo(function () { return scan === null || scan === void 0 ? void 0 : scan.camera; }, [scan]);
+    return (React.createElement(React.Fragment, null,
+        children({
+            config: config,
+            handlers: handlers,
+            errMsg: errMsg,
+            errorMessageConfig: errorMessageConfig,
+            modalContentConfig: modalContentConfig
+        }),
+        (scan === null || scan === void 0 ? void 0 : scan.showScanner) && scan.camera && CameraComponent && (React.createElement(CameraComponent, null))));
 };
 export default SignInQr;

package/dist/esm/config/checkoutConfirmation.js

@@ -39,6 +39,41 @@ var checkoutConfirmation = {
         },
         style: __assign(__assign({}, styles.textHeadline), { fontSize: theme.fontSizes.xxxlarge })
     },
+    checkoutConfirmation__printHeader: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexBasis: 50,
+            flexGrow: 0,
+            flexShrink: 1,
+            justifyContent: 'center',
+            textAlign: 'center'
+        }
+    },
+    checkoutConfirmation__printTitle: {
+        classes: '',
+        props: {
+            as: 'h2',
+            text: 'Need a Receipt?'
+        },
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.xlarge, marginBottom: theme.spacing.margin.small })
+    },
+    checkoutConfirmation__printContent: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'row',
+            gap: theme.spacing.margin.small
+        }
+    },
+    checkoutConfirmation__printButton: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.buttonSecondary), { flexGrow: 0, flexShrink: 0, borderRadius: 64, fontSize: theme.fontSizes.large, paddingBottom: 20, paddingLeft: 30, paddingRight: 30, paddingTop: 20 })
+    },
     checkoutConfirmation__content: {
         classes: '',
         props: {},
@@ -94,11 +129,6 @@ var checkoutConfirmation = {
             justifyContent: 'center'
         }
     },
-    checkoutConfirmation__print: {
-        classes: '',
-        props: { text: 'Customize' },
-        style: __assign(__assign({}, styles.buttonSecondary), { flexBasis: '400px', flexGrow: 0, flexShrink: 0, borderRadius: 64, fontSize: theme.fontSizes.large, paddingBottom: 20, paddingLeft: 30, paddingRight: 30, paddingTop: 20 })
-    },
     checkoutConfirmation__proceed: {
         classes: '',
         props: { text: 'Add To Order' },

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

@@ -1,4 +1,8 @@
+import { BarcodeScannerType, BarcodeScannerMethod } from './types';
 import useBarcode from './useBarcode';
+import useBarcodeCameraScanner from './useBarcodeCameraScanner';
+import { useBarcodeScanner } from './useBarcodeScanner';
+import useBarcodeUSB from './useBarcodeUSB';
 import useCardSwipe from './useCardSwipe';
 import useChipDNATender from './useChipDNATender';
 import useCustomerRewards from './useCustomerRewards';
@@ -10,4 +14,4 @@ import useOrderValidate from './useOrderValidate';
 import usePrevious from './usePrevious';
 import usePunch from './usePunch';
 import useRefund from './useRefund';
-export { useBarcode, useCardSwipe, useChipDNATender, useCustomerRewards, useEmployee, useGiftCardBalance, useKioskImageUrl, useOrder, useOrderValidate, usePrevious, usePunch, useRefund };
+export { useBarcode, useCardSwipe, useChipDNATender, useCustomerRewards, useEmployee, useGiftCardBalance, useKioskImageUrl, useOrder, useOrderValidate, usePrevious, usePunch, useRefund, useBarcodeCameraScanner, useBarcodeUSB, useBarcodeScanner, BarcodeScannerType, BarcodeScannerMethod };

package/dist/esm/hooks/index.js

@@ -1,4 +1,8 @@
+import { BarcodeScannerType } from './types';
 import useBarcode from './useBarcode';
+import useBarcodeCameraScanner from './useBarcodeCameraScanner';
+import { useBarcodeScanner } from './useBarcodeScanner';
+import useBarcodeUSB from './useBarcodeUSB';
 import useCardSwipe from './useCardSwipe';
 import useChipDNATender from './useChipDNATender';
 import useCustomerRewards from './useCustomerRewards';
@@ -10,4 +14,4 @@ import useOrderValidate from './useOrderValidate';
 import usePrevious from './usePrevious';
 import usePunch from './usePunch';
 import useRefund from './useRefund';
-export { useBarcode, useCardSwipe, useChipDNATender, useCustomerRewards, useEmployee, useGiftCardBalance, useKioskImageUrl, useOrder, useOrderValidate, usePrevious, usePunch, useRefund };
+export { useBarcode, useCardSwipe, useChipDNATender, useCustomerRewards, useEmployee, useGiftCardBalance, useKioskImageUrl, useOrder, useOrderValidate, usePrevious, usePunch, useRefund, useBarcodeCameraScanner, useBarcodeUSB, useBarcodeScanner, BarcodeScannerType };

package/dist/esm/hooks/types.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare enum BarcodeScannerType {
+    NONE = "NONE",
+    MORPHSTICK = "MORPHSTICK",
+    USB = "USB",
+    CAMERA = "CAMERA"
+}
+export interface BarcodeScannerMethod {
+    code: string | null;
+    error: string | null;
+    read: () => Promise<void>;
+    cancel: () => Promise<void>;
+    reset?: () => Promise<void>;
+    camera?: () => React.ReactNode;
+    showScanner?: boolean;
+}
+export declare abstract class ScanListener {
+    constructor();
+    abstract read(callback?: any): Promise<void>;
+    abstract cancel(callback?: any): Promise<void>;
+    scannerComponent(callback?: any): any;
+}

package/dist/esm/hooks/types.js

@@ -0,0 +1,17 @@
+export var BarcodeScannerType;
+(function (BarcodeScannerType) {
+    BarcodeScannerType["NONE"] = "NONE";
+    BarcodeScannerType["MORPHSTICK"] = "MORPHSTICK";
+    BarcodeScannerType["USB"] = "USB";
+    BarcodeScannerType["CAMERA"] = "CAMERA";
+})(BarcodeScannerType || (BarcodeScannerType = {}));
+var ScanListener = /** @class */ (function () {
+    function ScanListener() {
+    }
+    ScanListener.prototype.scannerComponent = function (callback) {
+        callback && callback();
+        return null;
+    };
+    return ScanListener;
+}());
+export { ScanListener };

package/dist/esm/hooks/useBarcodeCameraScanner.d.ts

@@ -0,0 +1,3 @@
+import { ScanListener, BarcodeScannerMethod } from './types';
+declare function useBarcodeCameraScanner(listener: ScanListener): BarcodeScannerMethod;
+export default useBarcodeCameraScanner;

package/dist/esm/hooks/useBarcodeCameraScanner.js

@@ -0,0 +1,54 @@
+import { __awaiter, __generator } from "tslib";
+import { useCallback, useRef, useState } from 'react';
+function useBarcodeCameraScanner(listener) {
+    var _this = this;
+    var scannedCode = useRef('');
+    var _a = useState(null), error = _a[0], setError = _a[1];
+    var _b = useState(false), showScanner = _b[0], setShowScanner = _b[1];
+    var onCodeScanned = function (event) {
+        scannedCode.current = event.nativeEvent.codeStringValue;
+        setShowScanner(false);
+    };
+    var requestPermissionHandler = function (result) {
+        setShowScanner(result === 'granted');
+        setError(result !== 'granted'
+            ? 'Authorization Error: Cannot Access Device Camera'
+            : null);
+    };
+    var read = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            listener.read(requestPermissionHandler);
+            return [2 /*return*/];
+        });
+    }); };
+    var cancel = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            listener.cancel(function () { return setShowScanner(false); });
+            return [2 /*return*/];
+        });
+    }); };
+    var camera = useCallback(function () {
+        if (!showScanner) {
+            return null;
+        }
+        return listener.scannerComponent(onCodeScanned);
+    }, [listener, showScanner]);
+    var reset = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            scannedCode.current = '';
+            setShowScanner(false);
+            setError(null);
+            return [2 /*return*/];
+        });
+    }); };
+    return {
+        read: read,
+        camera: camera,
+        error: error,
+        cancel: cancel,
+        reset: reset,
+        showScanner: showScanner,
+        code: scannedCode.current
+    };
+}
+export default useBarcodeCameraScanner;

package/dist/esm/hooks/useBarcodeScanner.d.ts

@@ -0,0 +1,3 @@
+import { PosAPI } from '../services';
+import { BarcodeScannerMethod, ScanListener } from './types';
+export declare const useBarcodeScanner: (listener: ScanListener, cameraScanner: ScanListener, type?: string, api?: PosAPI) => BarcodeScannerMethod | undefined;

package/dist/esm/hooks/useBarcodeScanner.js

@@ -0,0 +1,18 @@
+import { BarcodeScannerType } from './types';
+import useBarcode from './useBarcode';
+import useBarcodeCameraScanner from './useBarcodeCameraScanner';
+import useBarcodeUSB from './useBarcodeUSB';
+export var useBarcodeScanner = function (listener, cameraScanner, type, api) {
+    var usbScan = useBarcodeUSB(listener);
+    var cameraScan = useBarcodeCameraScanner(cameraScanner);
+    var defaultScan = useBarcode(api);
+    switch (type) {
+        case BarcodeScannerType.CAMERA:
+            return cameraScan;
+        case BarcodeScannerType.USB:
+            return usbScan;
+        case BarcodeScannerType.MORPHSTICK:
+            return defaultScan;
+    }
+    return undefined;
+};

package/dist/esm/hooks/useBarcodeUSB.d.ts

@@ -0,0 +1,3 @@
+import { ScanListener, BarcodeScannerMethod } from './types';
+declare const useBarcodeUSB: (listener: ScanListener) => BarcodeScannerMethod;
+export default useBarcodeUSB;

package/dist/esm/hooks/useBarcodeUSB.js

@@ -0,0 +1,50 @@
+import { __awaiter, __generator } from "tslib";
+import { useCallback, useEffect, useRef, useState } from 'react';
+var SCAN_MAX_TIME_DIFF = 100;
+var useBarcodeUSB = function (listener) {
+    var barcodeArray = useRef([]);
+    var _a = useState(false), setCodeScanned = _a[1];
+    var _b = useState(null), error = _b[0], setError = _b[1];
+    var timer = useRef(undefined);
+    var updateBarcode = function (data) {
+        barcodeArray.current.push(data.pressedKey);
+        clearTimeout(timer === null || timer === void 0 ? void 0 : timer.current);
+        timer.current = setTimeout(function () { return setCodeScanned(function (prev) { return !prev; }); }, SCAN_MAX_TIME_DIFF);
+    };
+    var cancel = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            listener.cancel(function () { return clearTimeout(timer === null || timer === void 0 ? void 0 : timer.current); });
+            return [2 /*return*/];
+        });
+    }); }, [listener]);
+    var reset = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            cancel();
+            barcodeArray.current = [];
+            setCodeScanned(false);
+            setError(null);
+            return [2 /*return*/];
+        });
+    }); }, [cancel]);
+    useEffect(function () {
+        return function () {
+            reset();
+        };
+    }, [reset]);
+    var read = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            listener.read(updateBarcode);
+            return [2 /*return*/];
+        });
+    }); };
+    return {
+        code: barcodeArray.current.length > 0
+            ? barcodeArray.current.join('').trim()
+            : null,
+        read: read,
+        cancel: cancel,
+        reset: reset,
+        error: error
+    };
+};
+export default useBarcodeUSB;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-tender/store",
-  "version": "1.1.26",
+  "version": "1.1.29",
   "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",