EmailReveal.tsx

import { ComponentType, useEffect, useRef } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
import { addPropertyControls, ControlType } from "framer"
import { AxiomWithoutBatching } from "@axiomhq/js"

const axiom = new AxiomWithoutBatching({
    token: "xaat-f7a91312-92ce-4c7f-8692-ebc92a52aabd",
    orgId: "idya-ltra",
})
const axiomDataset = "framer-experiments"

const useStore = createStore({
    initialDisplay: "flex",
})

export function withHide(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()

        useEffect(() => {
            if (props.style?.display) {
                setStore({ initialDisplay: props.style?.display })
            }
        }, [props.style])

        return (
            <Component {...props} style={{ ...props.style, display: "none" }} />
        )
    }
}

export function withAbilityToReveal(Component): ComponentType {
    return (props) => {
        const [store] = useStore()

        const selelctorToShow = props.link.replace(/\//g, "")
        useEffect(() => {
            const formEl = document.querySelector("#input form")

            formEl?.addEventListener("submit", async () => {
                const el = document.querySelector(selelctorToShow)
                if (el && el.style.display === "none") {
                    try {
                        await axiom.ingest(axiomDataset, [
                            {
                                component: "EmailReveal",
                                location: window?.location.href,
                            },
                        ])
                    } catch (e) {
                        //
                    }
                    el.style.display = store.initialDisplay
                }
            })
        }, [])

        return <Component {...props} />
    }
}