@open-tender/store
Version:
A library of hooks, reducers, utility functions, and types for use with Open Tender applications that utilize our in-store POS API
74 lines (73 loc) • 3.81 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
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 Keypad_1 = tslib_1.__importDefault(require("./Keypad"));
var SignUp_1 = tslib_1.__importDefault(require("./SignUp"));
var SignInPhone = function (_a) {
var close = _a.close, callback = _a.callback, children = _a.children, KeypadView = _a.KeypadView, SignUpView = _a.SignUpView, 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];
var _d = (0, react_1.useState)(false), showSignUp = _d[0], setShowSignUp = _d[1];
var _e = (0, react_1.useState)(null), errMsg = _e[0], setErrMsg = _e[1];
var _f = (0, hooks_1.useAppSelector)(slices_1.selectKioskConfig), config = _f.signInPhone, modalContentConfig = _f.modalContent;
var _g = (0, hooks_1.useAppSelector)(slices_1.selectCustomerIdentify), customer = _g.data, loading = _g.loading, error = _g.error;
var hasCustomer = !!customer;
var isLoading = loading === 'pending';
var submit = function () {
setSubmitted(true);
dispatch((0, slices_1.fetchCustomerIdentify)({ phone: phone }));
};
var retry = function () {
setShowSignUp(false);
setErrMsg(null);
};
var handlers = { submit: submit, retry: retry, close: close };
(0, react_1.useEffect)(function () {
if (submitted && !isLoading) {
if (error) {
var detail = (0, utils_1.handleRespError)(error).detail;
var errMsg_1 = (detail === null || detail === void 0 ? void 0 : detail.includes('does not exist'))
? 'Phone number not recognized. Please try again.'
: detail;
setErrMsg(errMsg_1 || 'Something went wrong');
}
else {
callback ? callback() : close();
}
}
}, [submitted, isLoading, error, close, callback]);
(0, react_1.useEffect)(function () {
if (hasCustomer)
callback ? callback() : close();
}, [hasCustomer, close, callback]);
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, { 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]);
var renderSignUp = (0, react_1.useCallback)(function () { return react_1.default.createElement(SignUp_1.default, { handlers: handlers, children: SignUpView }); }, [SignUpView, handlers]);
(0, react_1.useEffect)(function () {
if (errMsg) {
setShowSignUp(true);
}
}, [errMsg]);
if (!config)
return null;
return children({
config: config,
handlers: handlers,
errMsg: errMsg,
modalContentConfig: modalContentConfig,
renderKeypad: renderKeypad,
renderErrorMessage: renderErrorMessage,
renderSignUp: showSignUp ? renderSignUp : undefined
});
};
exports.default = SignInPhone;