openpanel/packages/devtools-ui/src/components/raffle-handler.tsx

import React from "react";
import { acknowledgeRaffle, raffle } from "src/utils/me";
import { Modal } from "./modal";
import clsx from "clsx";
import { CalendarIcon } from "./icons/calendar";

const CALENDLY_URL = "#";

export const RaffleHandler = () => {
  const [ran, setRan] = React.useState(false);
  const [calendlyURL, setCalendlyURL] = React.useState("");
  const [raffleModal, setRaffleModal] = React.useState(false);

  const submitRaffle = React.useCallback(async () => {
    const response = await raffle();

    if (response.raffle) {
      setCalendlyURL(response.calendlyURL);
      setRaffleModal(true);
    } else {
      setRaffleModal(false);
    }
  }, []);

  const onCloseModal = React.useCallback(() => {
    acknowledgeRaffle();
    setRaffleModal(false);
  }, []);

  React.useEffect(() => {
    const time = 60 * 1000 * (ran ? 5 : 0.5);

    const interval = setInterval(() => {
      submitRaffle();
      if (!ran) {
        setRan(true);
      }
    }, time);

    return () => {
      clearInterval(interval);
    };
  }, [ran]);

  return (
    <Modal
      overlay
      visible={raffleModal}
      onClose={onCloseModal}
      header={
        <div className={clsx("re-flex")}>
          <h1
            className={clsx(
              "re-text-gray-300",
              "re-font-semibold",
              "re-text-lg",
            )}
          >
            {"Let's chat!"}
          </h1>
        </div>
      }
    >
      <div className={clsx("re-p-5", "re-flex", "re-flex-col", "re-gap-5")}>
        <img
          src="https://refine.ams3.cdn.digitaloceanspaces.com/devtools/refine-swag.webp"
          className={clsx(
            "re-hidden",
            "tall:re-block",
            "re-w-full",
            "re-h-auto",
            "re-object-cover",
            "re-rounded-lg",
            "re-border",
            "re-border-gray-700",
            "re-overflow-hidden",
          )}
        />
        <p className={clsx("re-text-base", "re-text-gray-300")}>
          At Refine, we believe in the power of small conversations with our
          users, your experiences shape our improvements.
        </p>
        <p className={clsx("re-text-base", "re-text-gray-300")}>
          Book a 15-minute meeting with Civan, our CEO, and recieve our swag Kit
          as a thank you gift!
        </p>
        <a
          href={calendlyURL}
          rel="noreferrer noopener"
          target="_blank"
          className={clsx(
            "re-flex",
            "re-items-center",
            "re-justify-center",
            "re-gap-4",
            "re-text-gray-0",
            "re-text-base",
            "re-w-full",
            "re-p-3",
            "re-rounded",
            "re-bg-brand-blue",
          )}
        >
          <CalendarIcon />
          <span>Book Now</span>
        </a>
      </div>
    </Modal>
  );
};