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

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

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 KeypadContainer } from './Keypad';
import { default as SignUpContainer } from './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 = useAppDispatch();
    var _b = useState(''), phone = _b[0], setPhone = _b[1];
    var _c = useState(false), submitted = _c[0], setSubmitted = _c[1];
    var _d = useState(false), showSignUp = _d[0], setShowSignUp = _d[1];
    var _e = useState(null), errMsg = _e[0], setErrMsg = _e[1];
    var _f = useAppSelector(selectKioskConfig), config = _f.signInPhone, modalContentConfig = _f.modalContent;
    var _g = useAppSelector(selectCustomerIdentify), customer = _g.data, loading = _g.loading, error = _g.error;
    var hasCustomer = !!customer;
    var isLoading = loading === 'pending';
    var submit = function () {
        setSubmitted(true);
        dispatch(fetchCustomerIdentify({ phone: phone }));
    };
    var retry = function () {
        setShowSignUp(false);
        setErrMsg(null);
    };
    var handlers = { submit: submit, retry: retry, close: close };
    useEffect(function () {
        if (submitted && !isLoading) {
            if (error) {
                var detail = 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]);
    useEffect(function () {
        if (hasCustomer)
            callback ? callback() : close();
    }, [hasCustomer, close, callback]);
    var keypadHandlers = useMemo(function () { return ({
        change: function (value) { return setPhone(makePhone(value)); }
    }); }, []);
    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]);
    var renderSignUp = useCallback(function () { return React.createElement(SignUpContainer, { handlers: handlers, children: SignUpView }); }, [SignUpView, handlers]);
    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
    });
};
export default SignInPhone;