> ## Documentation Index
> Fetch the complete documentation index at: https://guide.tipx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Book a Call

export const BookACallPanel = () => {
  var [isBooked, setIsBooked] = useState(false);
  var [calParams, setCalParams] = useState({
    name: null,
    email: null,
    startTime: null,
    location: null
  });
  var calLink = "https://cal.com/tipx-ai/onboarding-call";
  useEffect(() => {
    var params = new URLSearchParams(window.location.search);
    var name = params.get("attendeeName");
    var email = params.get("email");
    var startRaw = params.get("attendeeStartTime") || params.get("startTime");
    var location = params.get("location");
    var formattedTime = null;
    if (startRaw) {
      try {
        var date = new Date(startRaw);
        formattedTime = date.toLocaleString("en-AU", {
          weekday: "long",
          day: "numeric",
          month: "long",
          hour: "numeric",
          minute: "2-digit",
          hour12: true
        });
      } catch (e) {
        formattedTime = null;
      }
    }
    if (name || email) {
      setCalParams({
        name: name,
        email: email,
        startTime: formattedTime,
        location: location
      });
      setIsBooked(true);
    }
  }, []);
  if (isBooked) {
    var title = calParams.name ? "You're all booked in, " + calParams.name + "." : "You're all booked in.";
    var emailLine = calParams.email ? "A confirmation has been sent to " + calParams.email + "." : "A confirmation email is on its way.";
    var timeLine = calParams.startTime ? "Your call is scheduled for " + calParams.startTime + "." : "";
    var outro = "We'll jump on a quick call to help you out and make sure everything makes sense — no stress, just here to help.";
    var discord = "Your call will take place in the #🆘・help voice channel on the TipX Discord. In the meantime, drop any questions in #🤝・help-eachother or ping staff like @charts or @eternal — we're always around.";
    return <div style={{
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      padding: "32px 0px",
      gap: "24px",
      maxWidth: "600px",
      margin: "0 auto"
    }}>
        <div style={{
      width: "64px",
      height: "64px",
      borderRadius: "999px",
      background: "linear-gradient(135deg, rgba(22, 163, 74, 0.25), rgba(22, 163, 74, 0.1))",
      border: "1px solid rgba(22, 163, 74, 0.4)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontSize: "28px"
    }}>
          {"\u2713"}
        </div>

        <h2 style={{
      margin: 0,
      fontSize: "28px",
      fontWeight: 700,
      textAlign: "center",
      lineHeight: 1.2
    }}>
          {title}
        </h2>

        <div style={{
      display: "flex",
      flexDirection: "column",
      gap: "16px",
      width: "100%"
    }}>
          <div style={{
      border: "1px solid rgba(22, 163, 74, 0.35)",
      borderRadius: "12px",
      padding: "16px",
      background: "linear-gradient(150deg, rgba(22, 163, 74, 0.12), rgba(22, 163, 74, 0.04))"
    }}>
            <p style={{
      margin: 0,
      fontSize: "15px",
      lineHeight: 1.6
    }}>
              {emailLine}
              {timeLine ? <><br />{timeLine}</> : null}
            </p>
            <p style={{
      margin: "12px 0 0",
      fontSize: "14px",
      lineHeight: 1.6,
      opacity: 0.85
    }}>
              {outro}
            </p>
          </div>

          <div style={{
      border: "1px solid rgba(88, 101, 242, 0.35)",
      borderRadius: "12px",
      padding: "16px",
      background: "linear-gradient(150deg, rgba(88, 101, 242, 0.12), rgba(88, 101, 242, 0.04))"
    }}>
            <p style={{
      margin: 0,
      fontSize: "14px",
      lineHeight: 1.7
    }}>
              {discord}
            </p>
          </div>
        </div>
      </div>;
  }
  return <div style={{
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: "32px 0px",
    gap: "24px",
    maxWidth: "500px",
    margin: "0 auto"
  }}>
      <h2 style={{
    margin: 0,
    fontSize: "24px",
    fontWeight: 700,
    textAlign: "center",
    lineHeight: 1.3
  }}>
        {"Don't understand what's going on and need a hand?"}
      </h2>

      <p style={{
    margin: 0,
    fontSize: "15px",
    lineHeight: 1.6,
    textAlign: "center",
    opacity: 0.85
  }}>
        Book a quick call with the TipX team. We'll walk you through everything
        and answer any questions you have.
      </p>

      <a href={calLink} target="_blank" rel="noreferrer" style={{
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: "8px",
    backgroundColor: "#2A36FF",
    color: "#ffffff",
    border: "none",
    borderRadius: "12px",
    height: "48px",
    padding: "0 32px",
    fontSize: "16px",
    fontWeight: 700,
    textDecoration: "none",
    cursor: "pointer"
  }}>
        Book a Free Call
      </a>

    </div>;
};

<BookACallPanel />