var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { CaretLeftIcon } from "@phosphor-icons/react";
import { Button, useToastAlerts } from "@local-logic/design-system";
import { ContactForm } from "./ContactForm";
import { ConfirmationScreen } from "./ConfirmationScreen";
import * as styles from "./styles";
import { useTracking } from "~/tracking";
import { useLeadCapture } from "~/sdks/LeadCapture/context";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/LeadCapture/types";
import { useLeadReports } from "~/sdks/LeadCapture/hooks/useLeadReports";
export const ContactInfo = () => {
    const { t } = useTranslation("leadCapture");
    const { openToastAlert } = useToastAlerts();
    const tracking = useTracking();
    const { location, setContactInfo, setSelectedReport, isGeographyBased, selectedReport, addressLabel, customData, listingUrl, } = useLeadCapture();
    const [isFormSubmitted, setIsFormSubmitted] = useState(false);
    const [leadInfo, setLeadInfo] = useState({
        addressLabel: addressLabel || "",
        location,
        listingUrl,
        reportType: selectedReport,
        contactInfo: {
            firstName: "",
            lastName: "",
            email: "",
            phone: "",
            privacyPolicy: false,
        },
        customData: customData || undefined,
    });
    const { generate: { mutate: submitForm, isPending: isFormPending }, } = useLeadReports({
        lead: leadInfo,
        onMutationSuccess: () => {
            setIsFormSubmitted(true);
        },
        onMutationError: (_error) => {
            openToastAlert({
                variant: "error",
                title: t("toastAlerts.error.title"),
                description: t("toastAlerts.error.description"),
                action: t("toastAlerts.error.action"),
                actionCallback: () => { },
            });
        },
    });
    const handleBack = () => {
        setSelectedReport(null);
        setContactInfo({
            firstName: "",
            lastName: "",
            email: "",
            phone: "",
            privacyPolicy: false,
        });
    };
    const handleSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
        setContactInfo(values);
        setLeadInfo(Object.assign(Object.assign({}, leadInfo), { contactInfo: values }));
        submitForm();
        const eventAttributes = {
            phoneNumberProvided: values.phone !== "",
            location: isGeographyBased,
        };
        tracking.postEvent({
            eventType: TrackingPipelineEvents.CONTACT_FORM_SUBMITTED,
            eventAttributes: Object.entries(eventAttributes).map(([key, value]) => ({
                label: key,
                data: value,
            })),
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.CONTACT_FORM_SUBMITTED,
            eventAttributes,
        });
    });
    return (React.createElement(React.Fragment, null,
        !isFormSubmitted && (React.createElement(React.Fragment, null,
            React.createElement("div", { className: styles.container },
                React.createElement(Button, { "data-testid": "lead-capture-back-button", variant: "ghost", className: styles.button, prefixIcon: React.createElement(CaretLeftIcon, { weight: "bold", className: styles.icon }), onClick: handleBack }, t("contactInfo.back")),
                React.createElement("h4", { className: styles.title, "data-testid": "contact-info-title" }, t("contactInfo.title"))),
            React.createElement("p", { className: styles.description, "data-testid": "contact-info-description" }, t("contactInfo.description")))),
        isFormSubmitted ? (React.createElement(ConfirmationScreen, null)) : (React.createElement(ContactForm, { handleSubmit: handleSubmit, isPending: isFormPending }))));
};
//# sourceMappingURL=index.js.map