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

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

import { useRef, useState, useEffect } from 'react';
import { checkEmpty, makeFormErrors, makePhone } from '../utils';
const initialData = {
    first_name: '',
    last_name: '',
    email: '',
    phone: ''
};
export const useGuestCheckoutForm = (guest, loading, error, guestErrors, submit) => {
    const submitRef = useRef(null);
    const inputRef = useRef(null);
    const initData = Object.assign(Object.assign({}, initialData), guest);
    const [data, setData] = useState(initData);
    const [errors, setErrors] = useState({});
    const [submitting, setSubmitting] = useState(false);
    const disabled = checkEmpty(data);
    const fields = [
        {
            label: 'First Name',
            name: 'first_name',
            type: 'text',
            required: true
        },
        {
            label: 'Last Name',
            name: 'last_name',
            type: 'text',
            required: true
        },
        {
            label: 'Email',
            name: 'email',
            type: 'email',
            required: true
        },
        { label: 'Phone', name: 'phone', type: 'tel', required: true }
    ];
    const handleChange = (name, value) => {
        const val = name === 'phone' ? makePhone(value) : value;
        setData(Object.assign(Object.assign({}, data), { [name]: val }));
    };
    const handleSubmit = (evt) => {
        var _a, _b;
        evt === null || evt === void 0 ? void 0 : evt.preventDefault();
        if (!disabled) {
            setErrors({});
            setSubmitting(true);
            submit(data);
            ((_a = submitRef.current) === null || _a === void 0 ? void 0 : _a.blur) && ((_b = submitRef.current) === null || _b === void 0 ? void 0 : _b.blur());
        }
    };
    useEffect(() => {
        var _a, _b;
        if (loading === 'idle') {
            setSubmitting(false);
            if (error) {
                const errs = makeFormErrors(error);
                errs.form = 'There are one or more errors below';
                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 (guestErrors) {
                setErrors(guestErrors);
            }
        }
    }, [loading, error, guestErrors]);
    useEffect(() => {
        return () => {
            setData(initialData);
            setErrors({});
            setSubmitting(false);
        };
    }, []);
    return {
        submitRef,
        inputRef,
        fields,
        data,
        errors,
        disabled,
        submitting,
        handleChange,
        handleSubmit
    };
};