glitchgrab 1.59.0 → 1.59.1

package/dist/index.mjs

@@ -8558,6 +8558,69 @@ function getTypeIcon(type, color, size = 24) {
 
 // src/booking-dialog.tsx
 import { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } from "react";
+
+// src/phone.ts
+var COUNTRIES = [
+  { iso: "IN", name: "India", dial: "91" },
+  { iso: "AE", name: "UAE", dial: "971" },
+  { iso: "US", name: "US / Canada", dial: "1" },
+  { iso: "GB", name: "UK", dial: "44" },
+  { iso: "SG", name: "Singapore", dial: "65" },
+  { iso: "AU", name: "Australia", dial: "61" },
+  { iso: "SA", name: "Saudi Arabia", dial: "966" },
+  { iso: "QA", name: "Qatar", dial: "974" },
+  { iso: "NP", name: "Nepal", dial: "977" },
+  { iso: "BD", name: "Bangladesh", dial: "880" },
+  { iso: "LK", name: "Sri Lanka", dial: "94" },
+  { iso: "DE", name: "Germany", dial: "49" }
+];
+var ZONE_COUNTRY = {
+  "Asia/Kolkata": "91",
+  "Asia/Calcutta": "91",
+  "Asia/Dubai": "971",
+  "Europe/London": "44",
+  "Asia/Singapore": "65",
+  "Asia/Riyadh": "966",
+  "Asia/Qatar": "974",
+  "Asia/Kathmandu": "977",
+  "Asia/Katmandu": "977",
+  "Asia/Dhaka": "880",
+  "Asia/Colombo": "94",
+  "Europe/Berlin": "49"
+};
+function defaultDialForZone(zone) {
+  if (ZONE_COUNTRY[zone]) return ZONE_COUNTRY[zone];
+  if (zone.startsWith("America/")) return "1";
+  if (zone.startsWith("Australia/")) return "61";
+  return "91";
+}
+function splitTypedPhone(typed, dial) {
+  const trimmed = typed.trim();
+  const digits = trimmed.replace(/\D/g, "");
+  if (trimmed.startsWith("+")) {
+    const match = [...COUNTRIES].sort((a, b) => b.dial.length - a.dial.length).find((c) => digits.startsWith(c.dial));
+    if (match) return { dial: match.dial, national: digits.slice(match.dial.length) };
+  }
+  if (dial === "91" && digits.length === 12 && digits.startsWith("91")) return { dial, national: digits.slice(2) };
+  if (dial === "91" && digits.length === 11 && digits.startsWith("0")) return { dial, national: digits.slice(1) };
+  return { dial, national: digits };
+}
+function phoneProblem(dial, national) {
+  const digits = national.replace(/\D/g, "");
+  if (!digits) return "Enter your mobile number";
+  if (dial === "91") {
+    if (digits.length !== 10) return `An Indian mobile has 10 digits \u2014 this has ${digits.length}`;
+    if (!/^[6-9]/.test(digits)) return "An Indian mobile starts with 6, 7, 8 or 9";
+    return null;
+  }
+  if (digits.length < 6 || digits.length > 12) return "Check the number \u2014 it looks too short or too long";
+  return null;
+}
+function toE164(dial, national) {
+  return `+${dial}${national.replace(/\D/g, "")}`;
+}
+
+// src/booking-dialog.tsx
 import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function readQuestions(value) {
   if (!Array.isArray(value)) return [];
@@ -8700,7 +8763,9 @@ function BookingDialog({
   open,
   onClose,
   preview = false,
-  availabilityUrl
+  availabilityUrl,
+  intro,
+  onBooked
 }) {
   var _a, _b, _c, _d, _e;
   const wide = useMediaQuery(WIDE_QUERY, true);
@@ -8723,6 +8788,8 @@ function BookingDialog({
   const [name, setName] = useState5("");
   const [email, setEmail] = useState5("");
   const [phone, setPhone] = useState5("");
+  const [dial, setDial] = useState5(() => defaultDialForZone(localZone()));
+  const [phoneTouched, setPhoneTouched] = useState5(false);
   const [note, setNote] = useState5("");
   const [questions, setQuestions] = useState5([]);
   const [answers, setAnswers] = useState5({});
@@ -8833,8 +8900,12 @@ function BookingDialog({
   const view = step !== "slots" ? step : !pageLoaded ? "loading" : questions.length > 0 && !asked ? "questions" : "slots";
   const roomy = step === "slots";
   async function startBooking() {
-    var _a2, _b2;
+    var _a2, _b2, _c2;
     if (!selected) return;
+    if (phoneError) {
+      setPhoneTouched(true);
+      return;
+    }
     if (preview) {
       setPreviewEnded(true);
       return;
@@ -8848,7 +8919,7 @@ function BookingDialog({
         body: JSON.stringify({
           name,
           email,
-          phone,
+          phone: toE164(dial, phone),
           note,
           answers: Object.fromEntries(given.map((q) => [q.id, q.answer])),
           startsAt: selected.startsAt,
@@ -8867,6 +8938,7 @@ function BookingDialog({
       if (json.data.confirmed) {
         setMeetUrl((_b2 = json.data.meetUrl) != null ? _b2 : null);
         setStep("done");
+        reportBooked(json.data.bookingId, (_c2 = json.data.meetUrl) != null ? _c2 : null);
         return;
       }
       setBookingId(json.data.bookingId);
@@ -8877,8 +8949,16 @@ function BookingDialog({
       setBusy(false);
     }
   }
+  function reportBooked(id, meet) {
+    if (!onBooked || !id || !selected) return;
+    try {
+      onBooked({ bookingId: id, startsAt: selected.startsAt, name, email, phone: toE164(dial, phone), meetUrl: meet });
+    } catch (e) {
+      console.error("[glitchgrab] onBooked threw", e);
+    }
+  }
   async function confirmBooking() {
-    var _a2;
+    var _a2, _b2;
     if (!bookingId) return;
     setBusy(true);
     setError(null);
@@ -8895,13 +8975,15 @@ function BookingDialog({
       }
       setMeetUrl(json.data.meetUrl);
       setStep("done");
+      reportBooked(bookingId, (_b2 = json.data.meetUrl) != null ? _b2 : null);
     } catch (e) {
       setError("Couldn't reach the booking service");
     } finally {
       setBusy(false);
     }
   }
-  const canSubmitDetails = name.trim() && email.includes("@") && phone.replace(/\D/g, "").length >= 8;
+  const phoneError = phoneProblem(dial, phone);
+  const canSubmitDetails = Boolean(name.trim() && email.includes("@"));
   const selectedEnd = selected ? (_e = selected.endsAt) != null ? _e : new Date(new Date(selected.startsAt).getTime() + page.slotMinutes * 6e4).toISOString() : null;
   const monthDate = new Date(keyToUtc(`${month}-01`));
   const muted = { color: t.muted };
@@ -9048,6 +9130,14 @@ function BookingDialog({
             children: "Preview \u2014 nothing is booked"
           }
         ),
+        intro && /* @__PURE__ */ jsx6(
+          "div",
+          {
+            "data-glitchgrab-booking-intro": true,
+            style: { fontSize: 13, fontWeight: 600, lineHeight: 1.45, paddingRight: 32, color: t.ink, overflowWrap: "anywhere" },
+            children: intro
+          }
+        ),
         /* @__PURE__ */ jsx6("div", { style: { fontSize: 20, fontWeight: 600, lineHeight: 1.25, paddingRight: 32, overflowWrap: "anywhere" }, children: page.title }),
         page.description && /* @__PURE__ */ jsx6("div", { style: { fontSize: 13, lineHeight: 1.5, overflowWrap: "anywhere", ...muted }, children: page.description }),
         /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: 10, marginTop: 4, fontSize: 14 }, children: [
@@ -9490,14 +9580,17 @@ function BookingDialog({
           /* @__PURE__ */ jsx6(Field, { t, label: "Your name", value: name, onChange: setName, autoComplete: "name" }),
           /* @__PURE__ */ jsx6(Field, { t, label: "Email", value: email, onChange: setEmail, type: "email", autoComplete: "email" }),
           /* @__PURE__ */ jsx6(
-            Field,
+            PhoneField,
             {
               t,
-              label: "Mobile number",
-              value: phone,
-              onChange: setPhone,
-              type: "tel",
-              autoComplete: "tel",
+              dial,
+              national: phone,
+              onChange: (nextDial, national) => {
+                setDial(nextDial);
+                setPhone(national);
+              },
+              onBlur: () => setPhoneTouched(true),
+              error: phoneTouched ? phoneError : null,
               hint: requireOtp ? "We send a code here to confirm, then a reminder before the call." : "We send a reminder here before the call."
             }
           ),
@@ -9785,6 +9878,64 @@ function Field({
     hint && /* @__PURE__ */ jsx6("div", { style: { marginTop: 6, fontSize: 12, fontWeight: 400, color: t.muted }, children: hint })
   ] });
 }
+function PhoneField({
+  t,
+  dial,
+  national,
+  onChange,
+  onBlur,
+  error,
+  hint
+}) {
+  const box = {
+    boxSizing: "border-box",
+    padding: "9px 12px",
+    background: t.input,
+    color: t.text,
+    border: `1px solid ${error ? t.danger : t.border}`,
+    borderRadius: 8,
+    fontFamily: "inherit",
+    fontSize: 14,
+    outline: "none"
+  };
+  return /* @__PURE__ */ jsxs6("label", { style: { display: "block", fontSize: 13, fontWeight: 500, color: t.text }, children: [
+    "Mobile number",
+    /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 8, marginTop: 6 }, children: [
+      /* @__PURE__ */ jsx6(
+        "select",
+        {
+          "aria-label": "Country code",
+          value: dial,
+          onChange: (e) => onChange(e.target.value, national),
+          style: { ...box, flex: "0 0 auto", paddingRight: 8, cursor: "pointer" },
+          children: COUNTRIES.map((c) => /* @__PURE__ */ jsxs6("option", { value: c.dial, children: [
+            c.iso,
+            " +",
+            c.dial
+          ] }, c.iso))
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "tel",
+          autoComplete: "tel",
+          inputMode: "numeric",
+          placeholder: dial === "91" ? "98765 43210" : "Mobile number",
+          value: national,
+          "aria-invalid": Boolean(error),
+          onChange: (e) => {
+            const next = splitTypedPhone(e.target.value, dial);
+            onChange(next.dial, next.national);
+          },
+          onBlur,
+          style: { ...box, flex: "1 1 auto", minWidth: 0, width: "100%" }
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ jsx6("div", { role: "alert", style: { marginTop: 6, fontSize: 12, fontWeight: 500, color: t.danger }, children: error }) : /* @__PURE__ */ jsx6("div", { style: { marginTop: 6, fontSize: 12, fontWeight: 400, color: t.muted }, children: hint })
+  ] });
+}
 
 // src/rejection.ts
 var DETAILS_MAX_LENGTH = 1e3;
@@ -10375,8 +10526,18 @@ function GlitchgrabProviderInner({
   const [signedUsers, setSignedUsers] = useState6("OFF");
   const aiBlockedUnsigned = signedUsers === "ENFORCE" && !signature;
   const [booking, setBooking] = useState6("closed");
-  const openBookingDialog = useCallback3(() => setBooking("live"), []);
-  const openBookingPreview = useCallback3(() => setBooking("preview"), []);
+  const [bookingOptions, setBookingOptions] = useState6({});
+  const openBookingDialog = useCallback3((options) => {
+    setBookingOptions({
+      intro: typeof (options == null ? void 0 : options.intro) === "string" ? options.intro : void 0,
+      onBooked: typeof (options == null ? void 0 : options.onBooked) === "function" ? options.onBooked : void 0
+    });
+    setBooking("live");
+  }, []);
+  const openBookingPreview = useCallback3(() => {
+    setBookingOptions({});
+    setBooking("preview");
+  }, []);
   useEffect6(() => {
     let cancelled = false;
     fetch(`${baseUrl}/api/v1/sdk/project`, {
@@ -10475,6 +10636,8 @@ function GlitchgrabProviderInner({
             baseUrl: baseUrl != null ? baseUrl : DEFAULT_BASE_URL2,
             open: booking !== "closed",
             preview: booking === "preview",
+            intro: bookingOptions.intro,
+            onBooked: bookingOptions.onBooked,
             onClose: () => setBooking("closed")
           }
         ),
@@ -10616,12 +10779,13 @@ function BookDemoButton({
   children
 }) {
   const { openBookingDialog } = useGlitchgrab();
-  if (children) return /* @__PURE__ */ jsx9(Fragment8, { children: children({ onClick: openBookingDialog }) });
+  const open = () => openBookingDialog();
+  if (children) return /* @__PURE__ */ jsx9(Fragment8, { children: children({ onClick: open }) });
   return /* @__PURE__ */ jsx9(
     "button",
     {
       type: "button",
-      onClick: openBookingDialog,
+      onClick: open,
       className,
       style: className ? void 0 : {
         padding: "10px 18px",