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

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

import { useRef, useState, useEffect, useCallback } from 'react';
import { checkGuestData, makeBirthDate, makeFormErrors, makePhone, slashesToDashes } from '../utils';
import { notificationChannelFields } from './useSignUpForm';
const initialData = {
    first_name: '',
    last_name: '',
    phone: '',
    email: '',
    password: ''
};
export const useSignUpGuestForm = (email, guest, loading, error, guestErrors, signUp, submitGuest, tpls, notificationChannels = []) => {
    const submitRef = useRef(null);
    const inputRef = useRef(null);
    const initData = Object.assign(Object.assign(Object.assign({}, initialData), guest), { email });
    const [data, setData] = useState(initData);
    const [comms, setComms] = useState([]);
    const [errors, setErrors] = useState({});
    const [submitting, setSubmitting] = useState(false);
    const { guestData, guestIncomplete } = checkGuestData(data, email);
    const hasThanx = tpls === 'THANX';
    const hasPunchh = tpls === 'PUNCHH';
    const isIncomplete = hasThanx
        ? guestIncomplete
        : Object.values(data).filter(i => !i).length > 0;
    const isLoading = loading === 'pending';
    const disabled = isIncomplete || isLoading;
    const guestDisabled = guestIncomplete || isLoading;
    const toRemove = [];
    if (!hasPunchh)
        toRemove.push('birth_date');
    if (hasThanx)
        toRemove.push('password');
    const allFields = [
        {
            label: 'Email',
            name: 'email',
            type: 'email',
            required: true,
            disabled: true
        },
        {
            label: 'First Name',
            name: 'first_name',
            type: 'text',
            required: true
        },
        {
            label: 'Last Name',
            name: 'last_name',
            type: 'text',
            required: true
        },
        { label: 'Phone', name: 'phone', type: 'tel', required: true },
        {
            label: 'Birth Date (mm/dd/yyyy)',
            name: 'birth_date',
            type: 'tel',
            required: false
        },
        {
            label: 'Password',
            name: 'password',
            type: 'password',
            autoComplete: 'new-password'
        }
    ];
    const fields = allFields.filter(i => !toRemove.includes(i.name));
    const notificationFields = notificationChannelFields.filter(i => notificationChannels === null || notificationChannels === void 0 ? void 0 : notificationChannels.includes(i.name));
    const handleChange = (name, value) => {
        const val = name === 'phone'
            ? makePhone(value)
            : name === 'birth_date'
                ? makeBirthDate(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);
            const values = Object.assign(Object.assign({}, data), { email, communications: comms });
            if (values.birth_date) {
                values.birth_date = slashesToDashes(values.birth_date);
            }
            signUp(values);
            ((_a = submitRef.current) === null || _a === void 0 ? void 0 : _a.blur) && ((_b = submitRef.current) === null || _b === void 0 ? void 0 : _b.blur());
        }
    };
    const handleGuest = () => {
        if (!guestDisabled) {
            setErrors({});
            setSubmitting(true);
            submitGuest(Object.assign(Object.assign({}, guestData), { email }));
        }
    };
    const handleComms = (name, value) => {
        const other = comms.filter(i => i !== name);
        const updated = value ? [...other, name] : other;
        setComms(updated);
    };
    const resetState = useCallback(() => {
        var _a, _b;
        if (loading !== 'idle' || !submitting)
            return;
        if (error) {
            const errs = makeFormErrors(error);
            if (errs.form.includes('parameters')) {
                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);
        }
        setSubmitting(false);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [loading, error, guestErrors]);
    useEffect(() => {
        resetState();
    }, [resetState]);
    useEffect(() => {
        return () => {
            setData(Object.assign(Object.assign({}, initialData), { email: '' }));
            setErrors({});
        };
    }, []);
    return {
        submitRef,
        inputRef,
        fields,
        notificationFields,
        data,
        comms,
        errors,
        disabled,
        guestDisabled,
        submitting,
        handleChange,
        handleSubmit,
        handleGuest,
        handleComms,
        resetState
    };
};