@open-tender/store 1.1.22 → 1.1.24

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

@@ -0,0 +1,10 @@
+import { Handlers, KeypadProps, KeypadType } from '@open-tender/ui';
+import { ReactNode } from 'react';
+declare const Keypad: ({ children, maxLength, type, value, handlers }: {
+    children: (props: KeypadProps) => ReactNode;
+    maxLength?: number;
+    type?: KeypadType;
+    value: string;
+    handlers: Handlers;
+}) => ReactNode;
+export default Keypad;

package/dist/cjs/components/Keypad.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var hooks_1 = require("../app/hooks");
+var slices_1 = require("../slices");
+var utils_1 = require("../utils");
+var Keypad = function (_a) {
+    var children = _a.children, maxLength = _a.maxLength, type = _a.type, value = _a.value, handlers = _a.handlers;
+    var config = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig).keypad;
+    var handleOnKeyPress = (0, react_1.useCallback)(function (key) { return handlers.change((0, utils_1.getKeyboardValue)(key, value, maxLength)); }, [maxLength, value, handlers]);
+    var viewHandlers = (0, react_1.useMemo)(function () { return ({ keyPress: handleOnKeyPress }); }, [handleOnKeyPress]);
+    if (!config)
+        return null;
+    return children({ config: config, handlers: viewHandlers, value: value, type: type });
+};
+exports.default = Keypad;

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

@@ -1,11 +1,11 @@
-import { SignInOptionsProps, SignInQrProps, SignInPhoneProps, InputProps, ErrorMessageProps } from '@open-tender/ui';
+import { SignInOptionsProps, SignInQrProps, SignInPhoneProps, ErrorMessageProps, KeypadProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const SignInOptions: ({ close, children, SignInQrView, SignInPhoneView, InputView, ErrorMessageView }: {
+declare const SignInOptions: ({ close, children, SignInQrView, SignInPhoneView, KeypadView, ErrorMessageView }: {
     close: () => void;
     children: (props: SignInOptionsProps) => ReactNode;
     SignInQrView: (props: SignInQrProps) => ReactNode;
     SignInPhoneView: (props: SignInPhoneProps) => ReactNode;
-    InputView: (props: InputProps) => ReactNode;
+    KeypadView: (props: KeypadProps) => ReactNode;
     ErrorMessageView: (props: ErrorMessageProps) => ReactNode;
 }) => React.ReactNode;
 export default SignInOptions;

package/dist/cjs/components/SignInOptions.js

@@ -7,12 +7,12 @@ 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, InputView = _a.InputView, ErrorMessageView = _a.ErrorMessageView;
+    var 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 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 renderSignInPhone = (0, react_1.useCallback)(function (close) { return (react_1.default.createElement(SignInPhone_1.default, { ErrorMessageView: ErrorMessageView, InputView: InputView, close: close, children: SignInPhoneView })); }, [SignInPhoneView, InputView, ErrorMessageView]);
+    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;
     return children({

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

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

package/dist/cjs/components/SignInPhone.js

@@ -5,10 +5,11 @@ 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 utils_2 = require("../utils");
 var ErrorMessage_1 = tslib_1.__importDefault(require("./ErrorMessage"));
-var Input_1 = tslib_1.__importDefault(require("./Input"));
+var Keypad_1 = tslib_1.__importDefault(require("./Keypad"));
 var SignInPhone = function (_a) {
-    var close = _a.close, children = _a.children, InputView = _a.InputView, ErrorMessageView = _a.ErrorMessageView;
+    var close = _a.close, children = _a.children, KeypadView = _a.KeypadView, ErrorMessageView = _a.ErrorMessageView;
     var dispatch = (0, hooks_1.useAppDispatch)();
     var _b = (0, react_1.useState)(''), phone = _b[0], setPhone = _b[1];
     var _c = (0, react_1.useState)(false), submitted = _c[0], setSubmitted = _c[1];
@@ -40,15 +41,17 @@ var SignInPhone = function (_a) {
         if (hasCustomer)
             close();
     }, [hasCustomer, close]);
-    var renderInput = (0, react_1.useCallback)(function (value, isRequired, style) { return (react_1.default.createElement(Input_1.default, { setValue: function (value) { return setPhone((0, utils_1.makePhone)(value)); }, value: value, isRequired: isRequired, style: style, children: InputView })); }, [InputView]);
+    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 renderErrorMessage = (0, react_1.useCallback)(function (errMsg) { return (react_1.default.createElement(ErrorMessage_1.default, { content: errMsg, children: ErrorMessageView })); }, [ErrorMessageView]);
     return children({
         config: config,
         handlers: handlers,
-        phone: phone,
         errMsg: errMsg,
         modalContentConfig: modalContentConfig,
-        renderInput: renderInput,
+        renderKeypad: renderKeypad,
         renderErrorMessage: renderErrorMessage
     });
 };

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

@@ -1,3 +1,4 @@
+export * from './keyboard';
 export * from './menu';
 export * from './orders';
 export * from './pos';

package/dist/cjs/utils/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./keyboard"), exports);
 tslib_1.__exportStar(require("./menu"), exports);
 tslib_1.__exportStar(require("./orders"), exports);
 tslib_1.__exportStar(require("./pos"), exports);

package/dist/cjs/utils/keyboard.d.ts

@@ -0,0 +1 @@
+export declare const getKeyboardValue: (key: string, value: string, maxLength?: number) => string;

package/dist/cjs/utils/keyboard.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getKeyboardValue = void 0;
+var getKeyboardValue = function (key, value, maxLength) {
+    if (key === 'del')
+        return value.slice(0, -1);
+    else if (key === 'clr')
+        return '';
+    else if (maxLength && value.length >= maxLength)
+        return value;
+    else
+        return value + key;
+};
+exports.getKeyboardValue = getKeyboardValue;

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

@@ -0,0 +1,10 @@
+import { Handlers, KeypadProps, KeypadType } from '@open-tender/ui';
+import { ReactNode } from 'react';
+declare const Keypad: ({ children, maxLength, type, value, handlers }: {
+    children: (props: KeypadProps) => ReactNode;
+    maxLength?: number;
+    type?: KeypadType;
+    value: string;
+    handlers: Handlers;
+}) => ReactNode;
+export default Keypad;

package/dist/esm/components/Keypad.js

@@ -0,0 +1,14 @@
+import { useCallback, useMemo } from 'react';
+import { useAppSelector } from '../app/hooks';
+import { selectKioskConfig } from '../slices';
+import { getKeyboardValue } from '../utils';
+var Keypad = function (_a) {
+    var children = _a.children, maxLength = _a.maxLength, type = _a.type, value = _a.value, handlers = _a.handlers;
+    var config = useAppSelector(selectKioskConfig).keypad;
+    var handleOnKeyPress = useCallback(function (key) { return handlers.change(getKeyboardValue(key, value, maxLength)); }, [maxLength, value, handlers]);
+    var viewHandlers = useMemo(function () { return ({ keyPress: handleOnKeyPress }); }, [handleOnKeyPress]);
+    if (!config)
+        return null;
+    return children({ config: config, handlers: viewHandlers, value: value, type: type });
+};
+export default Keypad;

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

@@ -1,11 +1,11 @@
-import { SignInOptionsProps, SignInQrProps, SignInPhoneProps, InputProps, ErrorMessageProps } from '@open-tender/ui';
+import { SignInOptionsProps, SignInQrProps, SignInPhoneProps, ErrorMessageProps, KeypadProps } from '@open-tender/ui';
 import React, { ReactNode } from 'react';
-declare const SignInOptions: ({ close, children, SignInQrView, SignInPhoneView, InputView, ErrorMessageView }: {
+declare const SignInOptions: ({ close, children, SignInQrView, SignInPhoneView, KeypadView, ErrorMessageView }: {
     close: () => void;
     children: (props: SignInOptionsProps) => ReactNode;
     SignInQrView: (props: SignInQrProps) => ReactNode;
     SignInPhoneView: (props: SignInPhoneProps) => ReactNode;
-    InputView: (props: InputProps) => ReactNode;
+    KeypadView: (props: KeypadProps) => ReactNode;
     ErrorMessageView: (props: ErrorMessageProps) => ReactNode;
 }) => React.ReactNode;
 export default SignInOptions;

package/dist/esm/components/SignInOptions.js

@@ -4,12 +4,12 @@ import { selectKioskConfig } 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, InputView = _a.InputView, ErrorMessageView = _a.ErrorMessageView;
+    var 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 handlers = { close: close, setSignInType: setSignInType };
     var renderSignInQr = useCallback(function (close) { return (React.createElement(SignInQrContainer, { close: close, children: SignInQrView })); }, [SignInQrView]);
-    var renderSignInPhone = useCallback(function (close) { return (React.createElement(SignInPhoneContainer, { ErrorMessageView: ErrorMessageView, InputView: InputView, close: close, children: SignInPhoneView })); }, [SignInPhoneView, InputView, ErrorMessageView]);
+    var renderSignInPhone = useCallback(function (close) { return (React.createElement(SignInPhoneContainer, { ErrorMessageView: ErrorMessageView, KeypadView: KeypadView, close: close, children: SignInPhoneView })); }, [SignInPhoneView, KeypadView, ErrorMessageView]);
     if (!config)
         return null;
     return children({

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

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

package/dist/esm/components/SignInPhone.js

@@ -1,11 +1,12 @@
-import { handleRespError, makePhone } from '@open-tender/utils';
-import React, { useCallback, useEffect, useState } from 'react';
+import { handleRespError } from '@open-tender/utils';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../app/hooks';
 import { fetchCustomerIdentify, selectCustomerIdentify, selectKioskConfig } from '../slices';
+import { makePhone } from '../utils';
 import { default as ErrorMessageContainer } from './ErrorMessage';
-import { default as InputContainer } from './Input';
+import { default as KeypadContainer } from './Keypad';
 var SignInPhone = function (_a) {
-    var close = _a.close, children = _a.children, InputView = _a.InputView, ErrorMessageView = _a.ErrorMessageView;
+    var close = _a.close, children = _a.children, KeypadView = _a.KeypadView, ErrorMessageView = _a.ErrorMessageView;
     var dispatch = useAppDispatch();
     var _b = useState(''), phone = _b[0], setPhone = _b[1];
     var _c = useState(false), submitted = _c[0], setSubmitted = _c[1];
@@ -37,15 +38,17 @@ var SignInPhone = function (_a) {
         if (hasCustomer)
             close();
     }, [hasCustomer, close]);
-    var renderInput = useCallback(function (value, isRequired, style) { return (React.createElement(InputContainer, { setValue: function (value) { return setPhone(makePhone(value)); }, value: value, isRequired: isRequired, style: style, children: InputView })); }, [InputView]);
+    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 renderErrorMessage = useCallback(function (errMsg) { return (React.createElement(ErrorMessageContainer, { content: errMsg, children: ErrorMessageView })); }, [ErrorMessageView]);
     return children({
         config: config,
         handlers: handlers,
-        phone: phone,
         errMsg: errMsg,
         modalContentConfig: modalContentConfig,
-        renderInput: renderInput,
+        renderKeypad: renderKeypad,
         renderErrorMessage: renderErrorMessage
     });
 };

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

@@ -1,3 +1,4 @@
+export * from './keyboard';
 export * from './menu';
 export * from './orders';
 export * from './pos';

package/dist/esm/utils/index.js

@@ -1,3 +1,4 @@
+export * from './keyboard';
 export * from './menu';
 export * from './orders';
 export * from './pos';

package/dist/esm/utils/keyboard.d.ts

@@ -0,0 +1 @@
+export declare const getKeyboardValue: (key: string, value: string, maxLength?: number) => string;

package/dist/esm/utils/keyboard.js

@@ -0,0 +1,10 @@
+export var getKeyboardValue = function (key, value, maxLength) {
+    if (key === 'del')
+        return value.slice(0, -1);
+    else if (key === 'clr')
+        return '';
+    else if (maxLength && value.length >= maxLength)
+        return value;
+    else
+        return value + key;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-tender/store",
-  "version": "1.1.22",
+  "version": "1.1.24",
   "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.16",
+    "@open-tender/ui": "^0.3.18",
     "@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.16",
+    "@open-tender/ui": "^0.3.18",
     "@open-tender/utils": "^0.4.23",
     "@reduxjs/toolkit": "^2.0.1",
     "date-fns": "2.30.0",