import React from "react";
import { useTranslation } from "react-i18next";
import { Form } from "@local-logic/design-system";
import * as Yup from "yup";
import { SpinnerIcon } from "@phosphor-icons/react";
import { emailRegex, phoneRegex } from "./schema";
import * as styles from "./styles";
import { PrivacyCheckbox } from "./PrivacyCheckbox";
import { useLeadCapture } from "~/sdks/LeadCapture/context";
export const ContactForm = ({ handleSubmit, isPending, }) => {
    const { t } = useTranslation("leadCapture");
    const { contactInfo } = useLeadCapture();
    const validationSchema = Yup.object().shape({
        firstName: Yup.string().max(30).required(t("errors.firstName")),
        lastName: Yup.string().max(30).required(t("errors.lastName")),
        email: Yup.string()
            .max(254)
            .matches(emailRegex, t("errors.notValidEmail"))
            .required(t("errors.email")),
        phone: Yup.string().when((phone, schema) => phone ? schema.matches(phoneRegex, t("errors.phone")) : schema),
        privacyPolicy: Yup.boolean().oneOf([true], t("errors.privacyCheckbox")),
    });
    return (React.createElement("div", { className: styles.form, "data-testid": "lead-capture-form" },
        React.createElement(Form.Root, { initialValues: contactInfo, 
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            validationSchema: validationSchema, validateOnMount: true, onSubmit: handleSubmit },
            React.createElement("div", { className: styles.fields },
                React.createElement(Form.Input, { name: "firstName", type: "text", label: t("initialValues.firstName") }),
                React.createElement(Form.Input, { name: "lastName", type: "text", label: t("initialValues.lastName") }),
                React.createElement(Form.Input, { name: "email", type: "email", label: t("initialValues.email") }),
                React.createElement(Form.Input, { name: "phone", type: "tel", label: t("initialValues.phone") })),
            React.createElement("div", { className: styles.privacyContainer },
                React.createElement(PrivacyCheckbox, null),
                React.createElement(Form.Button, { type: "submit", className: styles.submitButton, "data-is-pending": isPending, disableOnNotValid: true, disableOnSubmit: true, isDisabled: isPending, "data-testid": "form-submit-button" },
                    t("contactInfo.submit"),
                    isPending && React.createElement(SpinnerIcon, { className: styles.loader }))))));
};
//# sourceMappingURL=index.js.map