formbold-react/dist/useForm.js

Formbold package for react.

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useForm = void 0;
var react_1 = require("react");
var utils_1 = require("./utils");
var defaultConfig = {
    errorMessages: {
        empty: 'Please fill the form!',
        required: function (fields) { return "Please fill the required fields: ".concat(fields.join(', ')); },
    },
    requiredFields: [],
};
var defaultErrorState = {
    message: '',
    status: false,
};
var FORM_BOLD_SUBMISSION_API = 'https://formbold.com/s';
/**
 * FormBold useForm hook
 * @param formId - The form ID
 * @param config - Configuration options
 * @returns An array containing the form state and the submit handler
 */
var useForm = function (formId, config) {
    var _a = (0, utils_1.mergeConfig)(defaultConfig, config), requiredFields = _a.requiredFields, errorMessages = _a.errorMessages;
    var _b = (0, react_1.useState)(defaultErrorState), error = _b[0], setError = _b[1];
    var _c = (0, react_1.useState)(false), succeeded = _c[0], setSucceeded = _c[1];
    var _d = (0, react_1.useState)(false), submitting = _d[0], setSubmitting = _d[1];
    var handleSubmit = function (e, recaptchaRef) {
        e.preventDefault();
        // Getting the Form data
        var data = new FormData(e.currentTarget);
        //@ts-ignore
        var value = Object.fromEntries(data.entries());
        var finalData = __assign({}, value);
        // Conditionally add "g-recaptcha-response" if recaptchaRef is provided
        if (recaptchaRef) {
            finalData['g-recaptcha-response'] = recaptchaRef.current.getValue();
        }
        //check if the values is empty
        //@ts-ignore
        var isEmpty = !Object.values(value).some(function (x) { return x !== null && x !== ''; });
        if (isEmpty) {
            return setError({
                message: errorMessages.empty,
                status: true,
            });
        }
        // Check if the required fields are empty
        var requiredFieldsEmpty = requiredFields.filter(function (field) { return !value[field]; });
        if (requiredFieldsEmpty.length > 0) {
            return setError({
                message: errorMessages.required(requiredFieldsEmpty),
                status: true,
            });
        }
        setSubmitting(true);
        // submit the form
        fetch("".concat(FORM_BOLD_SUBMISSION_API, "/").concat(formId), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(finalData),
        })
            .then(function () {
            setSucceeded(true);
            setError(defaultErrorState);
        })
            .catch(function (error) {
            setError({
                message: error.message,
                status: true,
            });
            setSucceeded(false);
        })
            .finally(function () {
            setSubmitting(false);
        });
    };
    return [{ error: error, succeeded: succeeded, submitting: submitting }, handleSubmit];
};
exports.useForm = useForm;