@open-tender/utils/dist/esm/hooks/useOneTimePasscodeForm.js

A library of utils for use with Open Tender applications that utilize our cloud-based Order API.

import { __awaiter } from "tslib";
import { useState, useEffect, useRef } from 'react';
import { makeFormErrors, makePhone } from '../utils';
export const useOneTimePasscodeForm = (otpSent, loading, error, includeRecaptcha, submit, callback) => {
    const submitRef = useRef(null);
    const inputRef = useRef(null);
    const recaptchaRef = useRef(null);
    const [data, setData] = useState({
        identifier: '',
        one_time_passcode: ''
    });
    const [errors, setErrors] = useState({});
    const [submitting, setSubmitting] = useState(false);
    const toRemove = otpSent ? ['identifier'] : ['one_time_passcode'];
    const allFields = [
        {
            label: 'Phone number or email address',
            name: 'identifier',
            type: 'text',
            required: true
        },
        {
            label: 'One Time Passcode',
            name: 'one_time_passcode',
            type: 'number',
            required: true
        }
    ];
    const fields = allFields.filter(i => !toRemove.includes(i.name));
    useEffect(() => {
        var _a, _b;
        if (loading === 'idle' && submitting) {
            setSubmitting(false);
            if (error) {
                if (recaptchaRef.current)
                    recaptchaRef.current.reset();
                const errs = makeFormErrors(error);
                if (errs.form.includes('not found')) {
                    errs.form =
                        'Account not found. Please double check your phone or email and try again.';
                }
                setErrors(errs);
                ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus) && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus());
            }
            else if (callback && otpSent) {
                setErrors({});
                callback();
            }
            else {
                setErrors({});
            }
        }
    }, [loading, error, callback, submitting, otpSent]);
    const handleChange = (name, value) => {
        if (name !== 'identifier') {
            setData(Object.assign(Object.assign({}, data), { [name]: value }));
        }
        else if (typeof value === 'string') {
            const inputValue = /[a-zA-Z]/g.test(value)
                ? value
                : makePhone(value !== null && value !== void 0 ? value : '');
            setData(Object.assign(Object.assign({}, data), { [name]: inputValue }));
        }
    };
    const handleSubmit = (evt) => __awaiter(void 0, void 0, void 0, function* () {
        var _a, _b, _c, _d, _e;
        evt === null || evt === void 0 ? void 0 : evt.preventDefault();
        const { identifier, one_time_passcode } = data;
        const values = /[a-zA-Z]/g.test(identifier)
            ? { email: identifier }
            : { phone: identifier };
        if (includeRecaptcha) {
            try {
                const isEnterpriseRecaptcha = ((_a = recaptchaRef.current) === null || _a === void 0 ? void 0 : _a.props.size) === 'invisible';
                const token = isEnterpriseRecaptcha
                    ? yield ((_b = recaptchaRef.current) === null || _b === void 0 ? void 0 : _b.executeAsync())
                    : (_c = recaptchaRef.current) === null || _c === void 0 ? void 0 : _c.getValue();
                if (!token) {
                    setSubmitting(false);
                    setErrors({
                        form: 'Please complete the recaptcha before submitting'
                    });
                }
                else {
                    otpSent
                        ? submit({ one_time_passcode, recaptcha_token: token })
                        : submit(Object.assign(Object.assign({}, values), { recaptcha_token: token }));
                    setSubmitting(true);
                }
            }
            catch (err) {
                setSubmitting(false);
                setErrors({
                    form: 'Please complete the recaptcha before submitting'
                });
            }
        }
        else {
            otpSent ? submit({ one_time_passcode }) : submit(values);
            setSubmitting(true);
        }
        ((_d = submitRef.current) === null || _d === void 0 ? void 0 : _d.blur) && ((_e = submitRef.current) === null || _e === void 0 ? void 0 : _e.blur());
    });
    return {
        submitRef,
        inputRef,
        recaptchaRef,
        fields,
        data,
        errors,
        setErrors,
        submitting,
        handleChange,
        handleSubmit
    };
};