glitchgrab 1.57.0 → 1.58.1

package/README.md

@@ -1023,9 +1023,35 @@ if (!saved.ok) console.error(saved.error); // e.g. WhatsApp code already taken
   back instead of trusting what you sent.
 - **Never throws.** Failures come back as `{ ok: false, error }`, never as defaults.
 
+### Asking questions before a demo is booked
+
+Set `questions` and the booking dialog asks them before it shows the calendar;
+the WhatsApp booking chat asks the same ones. Each is a list of choices the
+prospect taps — which language they want the demo in, what kind of firm they
+run — so the right person on your team takes the call.
+
+```ts
+await updateBookingSettings({
+  questions: [
+    { id: "profession", label: "What best describes you?", options: ["CA", "CS", "Tax consultant", "Other"] },
+    { id: "language", label: "Which language would you like the demo in?", options: ["English", "Hindi", "Marathi"] },
+  ],
+});
+
+const demos = await listBookings();
+demos[0].answers; // [{ id: "language", question: "Which language…", answer: "Hindi" }, …]
+```
+
+- Up to 5 questions, 2–9 choices each. `required: false` lets a prospect skip one.
+- Send the whole list to change it; `[]` asks nothing. Left out, it is kept.
+- Keep a question's `id` when you reword it, so earlier answers still line up.
+- The answers are also on the Google Calendar event and in the WhatsApp alert.
+- The dialog needs a `glitchgrab` version newer than 1.57 on the site. An older one
+  still books, without asking.
+
 ```ts
 getBookingSettings(options?: CallsOptions): Promise<BookingSettingsResult>
-updateBookingSettings(changes: Partial<BookingSettings>, options?: CallsOptions): Promise<BookingSettingsResult>
+updateBookingSettings(changes: BookingSettingsChanges, options?: CallsOptions): Promise<BookingSettingsResult>
 
 type BookingSettingsResult =
   | { ok: true; data: { settings: BookingSettings; saved: boolean; calendarConnected: boolean } }
@@ -1044,6 +1070,15 @@ interface BookingSettings {
   horizonDays: number;
   noticeMinutes: number;
   whatsappCode: string | null;
+  notifyRecipients: { name: string; phone: string }[]; // extra WhatsApp numbers alerted on a booking, max 5
+  questions: BookingQuestion[];                        // asked before the calendar, max 5
+}
+
+interface BookingQuestion {
+  id: string;         // stable name, e.g. "language"; made from the label when left out
+  label: string;      // up to 80 characters
+  options: string[];  // 2–9 choices, up to 40 characters each
+  required: boolean;  // false lets the prospect skip it
 }
 ```
 

package/dist/index.js

@@ -97,6 +97,7 @@ function toAssistTurnResult(ok, body) {
     question: (_d = d.question) != null ? _d : null,
     options: Array.isArray(d.options) ? d.options.filter((o) => typeof o === "string") : [],
     report: (_e = d.report) != null ? _e : null,
+    title: typeof d.title === "string" && d.title.trim() ? d.title.trim() : null,
     duplicate: (_f = d.duplicate) != null ? _f : null,
     related: (_g = d.related) != null ? _g : null,
     solved: (_h = d.solved) != null ? _h : null,
@@ -2016,6 +2017,8 @@ function AssistSheet({
   reporterName,
   description,
   onDescriptionChange,
+  issueTitle,
+  onIssueTitleChange,
   severity,
   onSeverityChange,
   showSeverity,
@@ -2114,7 +2117,7 @@ function AssistSheet({
     onDegrade(message, retryable);
   }
   async function runTurn(history2, autoFile = false) {
-    var _a, _b;
+    var _a, _b, _c;
     setBusy(true);
     setAutoFileLeft(null);
     let result;
@@ -2171,6 +2174,7 @@ function AssistSheet({
     }
     if (result.report) {
       onDescriptionChange(result.report);
+      onIssueTitleChange((_b = result.title) != null ? _b : "");
       aiDraftRef.current = result.report;
       logEvent("draft_shown");
       setMessages([...history2, { role: "assistant", content: result.report, kind: "report" }]);
@@ -2183,7 +2187,7 @@ function AssistSheet({
     }
     if (result.question) {
       setMessages([...history2, { role: "assistant", content: result.question }]);
-      setOptions((_b = result.options) != null ? _b : []);
+      setOptions((_c = result.options) != null ? _c : []);
       return;
     }
     onDegrade("The assistant had nothing to add \u2014 write your report below and send it as normal.");
@@ -3027,6 +3031,40 @@ function AssistSheet({
                                   title: true,
                                   footer: "Your details will be added to it instead of opening a new issue."
                                 }),
+                                !duplicate && issueTitle && // Wraps rather than scrolls sideways: a title cut off at the
+                                // box edge is the very thing #543 is about. One line of text,
+                                // so Enter is swallowed.
+                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                  "textarea",
+                                  {
+                                    "aria-label": "Title",
+                                    value: issueTitle,
+                                    maxLength: 120,
+                                    rows: 2,
+                                    onKeyDown: (e) => {
+                                      if (e.key === "Enter") e.preventDefault();
+                                    },
+                                    onChange: (e) => {
+                                      stopAutoFile("edited the title");
+                                      onIssueTitleChange(e.target.value.replace(/[\r\n]+/g, " "));
+                                    },
+                                    style: {
+                                      width: "100%",
+                                      padding: "8px 10px",
+                                      lineHeight: 1.45,
+                                      resize: "none",
+                                      borderRadius: "8px",
+                                      border: `1px solid ${t.inputBorder}`,
+                                      backgroundColor: t.inputBg,
+                                      color: t.text,
+                                      fontSize: "13px",
+                                      fontWeight: 600,
+                                      fontFamily: "inherit",
+                                      outline: "none",
+                                      boxSizing: "border-box"
+                                    }
+                                  }
+                                ),
                                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                                   "textarea",
                                   {
@@ -4668,6 +4706,7 @@ function ReportDialog({
   const [pickedSimilar, setPickedSimilar] = (0, import_react.useState)(null);
   const [addedToIssue, setAddedToIssue] = (0, import_react.useState)(null);
   const [aiConversationId, setAiConversationId] = (0, import_react.useState)(null);
+  const [issueTitle, setIssueTitle] = (0, import_react.useState)("");
   const [isEnhanced, setIsEnhanced] = (0, import_react.useState)(false);
   const [originalDescription, setOriginalDescription] = (0, import_react.useState)(
     null
@@ -5369,6 +5408,7 @@ function ReportDialog({
       }
       if (aiConversationId) {
         metadata.aiConversationId = aiConversationId;
+        if (sheetUp && !duplicateOf && issueTitle.trim()) metadata.issueTitle = issueTitle.trim();
       }
       const result = await report(
         // The RATING branch returned above, so anything reaching here is a real
@@ -5387,6 +5427,7 @@ function ReportDialog({
         setScreenshots([]);
         setAttachments([]);
         setAiConversationId(null);
+        setIssueTitle("");
         setDuplicateIssueNumber(null);
         setDuplicateKind("duplicate");
         setSimilarIssues(null);
@@ -7490,6 +7531,8 @@ function ReportDialog({
           setDescription(value);
           if (validationError) setValidationError(null);
         },
+        issueTitle,
+        onIssueTitleChange: setIssueTitle,
         severity,
         onSeverityChange: (value) => {
           setSeverity(value);
@@ -7655,6 +7698,16 @@ function getTypeIcon(type, color, size = 24) {
 // src/booking-dialog.tsx
 var import_react5 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+function readQuestions(value) {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap((row) => {
+    if (!row || typeof row !== "object") return [];
+    const { id, label, options, required } = row;
+    if (typeof id !== "string" || typeof label !== "string" || !Array.isArray(options)) return [];
+    const choices = options.filter((o) => typeof o === "string" && o !== "");
+    return choices.length > 0 ? [{ id, label, options: choices, required: required !== false }] : [];
+  });
+}
 var LIGHT = {
   bg: "#ffffff",
   pane: "#ffffff",
@@ -7808,6 +7861,11 @@ function BookingDialog({
   const [email, setEmail] = (0, import_react5.useState)("");
   const [phone, setPhone] = (0, import_react5.useState)("");
   const [note, setNote] = (0, import_react5.useState)("");
+  const [questions, setQuestions] = (0, import_react5.useState)([]);
+  const [answers, setAnswers] = (0, import_react5.useState)({});
+  const [pageLoaded, setPageLoaded] = (0, import_react5.useState)(false);
+  const [asked, setAsked] = (0, import_react5.useState)(false);
+  const [requireOtp, setRequireOtp] = (0, import_react5.useState)(true);
   const [code, setCode] = (0, import_react5.useState)("");
   const [bookingId, setBookingId] = (0, import_react5.useState)(null);
   const [meetUrl, setMeetUrl] = (0, import_react5.useState)(null);
@@ -7836,6 +7894,7 @@ function BookingDialog({
         if (!json.success) {
           setError((_a2 = json.error) != null ? _a2 : "Couldn't load available times");
           setSlotsByMonth((prev) => ({ ...prev, [target]: [] }));
+          setPageLoaded(true);
           return;
         }
         const data = (_b2 = json.data) != null ? _b2 : {};
@@ -7848,9 +7907,13 @@ function BookingDialog({
           slotMinutes: typeof data.slotMinutes === "number" ? data.slotMinutes : 30
         });
         setWhatsappUrl((_c2 = data.whatsappUrl) != null ? _c2 : null);
+        setQuestions(readQuestions(data.questions));
+        setRequireOtp(data.requireOtp !== false);
+        setPageLoaded(true);
       } catch (e) {
         setError("Couldn't reach the booking service");
         setSlotsByMonth((prev) => ({ ...prev, [target]: [] }));
+        setPageLoaded(true);
       }
     },
     [baseUrl, headers]
@@ -7868,6 +7931,8 @@ function BookingDialog({
     setBookingId(null);
     setError(null);
     setAvatarFailed(false);
+    setPageLoaded(false);
+    setAsked(false);
   }, [open]);
   const monthLoaded = month in slotsByMonth;
   (0, import_react5.useEffect)(() => {
@@ -7896,8 +7961,12 @@ function BookingDialog({
   const daySlots = day ? (_d = byDay.get(day)) != null ? _d : [] : [];
   const atFirstMonth = month <= today.slice(0, 7);
   const pastHorizon = monthLoaded && !error && byDay.size === 0 && !atFirstMonth;
+  const given = questions.flatMap((q) => q.options.includes(answers[q.id]) ? [{ ...q, answer: answers[q.id] }] : []);
+  const canContinue = questions.every((q) => !q.required || q.options.includes(answers[q.id]));
+  const view = step !== "slots" ? step : !pageLoaded ? "loading" : questions.length > 0 && !asked ? "questions" : "slots";
+  const roomy = step === "slots";
   async function startBooking() {
-    var _a2;
+    var _a2, _b2;
     if (!selected) return;
     setBusy(true);
     setError(null);
@@ -7910,9 +7979,13 @@ function BookingDialog({
           email,
           phone,
           note,
+          answers: Object.fromEntries(given.map((q) => [q.id, q.answer])),
           startsAt: selected.startsAt,
           // The zone the times were shown in, which is the one the visitor chose.
-          timezone: zone
+          timezone: zone,
+          // This dialog can show a booking confirmed in one step; the server
+          // only skips the code for a dialog that says so.
+          instant: true
         })
       });
       const json = await res.json();
@@ -7920,6 +7993,11 @@ function BookingDialog({
         setError((_a2 = json.error) != null ? _a2 : "Couldn't hold that slot");
         return;
       }
+      if (json.data.confirmed) {
+        setMeetUrl((_b2 = json.data.meetUrl) != null ? _b2 : null);
+        setStep("done");
+        return;
+      }
       setBookingId(json.data.bookingId);
       setStep("code");
     } catch (e) {
@@ -7960,7 +8038,7 @@ function BookingDialog({
     "div",
     {
       style: {
-        marginTop: wide ? whatsappUrl && step === "slots" ? 14 : "auto" : 0,
+        marginTop: wide ? whatsappUrl && roomy ? 14 : "auto" : 0,
         padding: wide ? 0 : "4px 20px 18px",
         display: "flex",
         justifyContent: wide ? "flex-start" : "center"
@@ -8101,9 +8179,36 @@ function BookingDialog({
               selectedEnd && formatTime(selectedEnd, zone, twelve)
             ] })
           ] }) }),
+          asked && given.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { icon: "check", t, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+            given.map((q) => q.answer).join(" \xB7 "),
+            view === "slots" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setAsked(false),
+                  className: "gg-bk-link",
+                  style: {
+                    border: 0,
+                    // Room for a thumb without pushing the rows apart.
+                    padding: "8px 6px",
+                    margin: "-8px 0",
+                    background: "transparent",
+                    color: t.muted,
+                    fontFamily: "inherit",
+                    fontSize: 13,
+                    textDecoration: "underline",
+                    cursor: "pointer"
+                  },
+                  children: "Change"
+                }
+              )
+            ] })
+          ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { icon: "clock", t, children: formatDuration(page.slotMinutes) }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { icon: "video", t, children: "Google Meet" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { icon: "globe", t, children: step === "slots" ? (
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { icon: "globe", t, children: roomy ? (
             // The visible label is plain text; the native select sits on top of
             // it, invisible. A styled select sizes itself to the longest zone
             // name in the list, which pushed the chevron to the pane's edge.
@@ -8123,7 +8228,7 @@ function BookingDialog({
             ] })
           ) : zone })
         ] }),
-        whatsappUrl && step === "slots" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        whatsappUrl && roomy && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "a",
           {
             href: whatsappUrl,
@@ -8394,6 +8499,93 @@ function BookingDialog({
       ]
     }
   );
+  const loading = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      style: {
+        flex: "1 1 auto",
+        minHeight: wide ? void 0 : 200,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 13,
+        ...muted
+      },
+      children: "Loading\u2026"
+    }
+  );
+  const ask = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      style: {
+        flex: "1 1 auto",
+        minWidth: 0,
+        padding: wide ? "28px 32px" : "20px",
+        boxSizing: "border-box",
+        overflowY: wide ? "auto" : void 0
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { maxWidth: 520, display: "flex", flexDirection: "column", gap: 22 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 16, fontWeight: 600 }, children: questions.length === 1 ? "One question first" : "A few questions first" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 13, lineHeight: 1.5, marginTop: 4, ...muted }, children: "So the right person takes your demo." })
+        ] }),
+        questions.map((q) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "group", "aria-label": q.label, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { fontSize: 14, fontWeight: 500, overflowWrap: "anywhere" }, children: [
+            q.label,
+            !q.required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontWeight: 400, ...muted }, children: " (optional)" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }, children: q.options.map((option) => {
+            const on = answers[q.id] === option;
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": on,
+                className: on ? void 0 : "gg-bk-slot",
+                onClick: () => setAnswers((prev) => {
+                  if (on && !q.required) {
+                    const rest = { ...prev };
+                    delete rest[q.id];
+                    return rest;
+                  }
+                  return { ...prev, [q.id]: option };
+                }),
+                style: {
+                  padding: "9px 14px",
+                  minHeight: 40,
+                  borderRadius: 8,
+                  border: `1px solid ${on ? t.ink : t.border}`,
+                  background: on ? t.ink : t.pane,
+                  color: on ? t.onInk : t.text,
+                  fontFamily: "inherit",
+                  fontSize: 14,
+                  fontWeight: 500,
+                  cursor: "pointer",
+                  overflowWrap: "anywhere",
+                  textAlign: "left"
+                },
+                children: option
+              },
+              option
+            );
+          }) })
+        ] }, q.id)),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "8px 12px", marginTop: 2 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setAsked(true),
+              disabled: !canContinue,
+              style: { ...primaryStyle(t, !canContinue), whiteSpace: "nowrap" },
+              children: "See available times"
+            }
+          ),
+          !canContinue && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: 12, ...muted }, children: "Pick one for each to continue" })
+        ] })
+      ] })
+    }
+  );
   const form = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
@@ -8418,7 +8610,7 @@ function BookingDialog({
               onChange: setPhone,
               type: "tel",
               autoComplete: "tel",
-              hint: "We send a code here to confirm, then a reminder before the call."
+              hint: requireOtp ? "We send a code here to confirm, then a reminder before the call." : "We send a reminder here before the call."
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { t, label: "Anything we should know? (optional)", value: note, onChange: setNote, multiline: true }),
@@ -8443,7 +8635,7 @@ function BookingDialog({
                 onClick: startBooking,
                 disabled: !canSubmitDetails || busy,
                 style: primaryStyle(t, !canSubmitDetails || busy),
-                children: busy ? "Sending code\u2026" : "Send verification code"
+                children: requireOtp ? busy ? "Sending code\u2026" : "Send verification code" : busy ? "Booking\u2026" : "Book demo"
               }
             )
           ] })
@@ -8507,6 +8699,7 @@ function BookingDialog({
         .gg-bk-day:hover { box-shadow: inset 0 0 0 1.5px ${t.ink}; }
         .gg-bk-slot:hover { border-color: ${t.ink} !important; }
         .gg-bk-ghost:hover { background: ${t.open} !important; }
+        .gg-bk-link:hover { color: ${t.text} !important; }
         .gg-bk-root button:focus-visible, .gg-bk-root a:focus-visible,
         .gg-bk-root span:has(> select:focus-visible), .gg-bk-root input:focus-visible, .gg-bk-root textarea:focus-visible {
           outline: 2px solid ${t.ink}; outline-offset: 2px;
@@ -8520,11 +8713,11 @@ function BookingDialog({
             "aria-label": page.title,
             className: "gg-bk-root",
             style: {
-              width: step === "slots" ? "min(1060px, 100%)" : "min(820px, 100%)",
+              width: roomy ? "min(1060px, 100%)" : "min(820px, 100%)",
               // A month grid should not jump in height between months; the form
               // steps are short and would sit in a mostly empty box.
-              height: wide && step === "slots" ? "min(640px, calc(100vh - 48px))" : void 0,
-              minHeight: wide && step !== "slots" ? 420 : void 0,
+              height: wide && roomy ? "min(640px, calc(100vh - 48px))" : void 0,
+              minHeight: wide && !roomy ? 420 : void 0,
               margin: wide ? void 0 : "auto 0",
               display: "flex",
               flexDirection: wide ? "row" : "column",
@@ -8540,7 +8733,7 @@ function BookingDialog({
             },
             children: [
               summary,
-              step === "slots" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+              view === "loading" ? loading : view === "questions" ? ask : view === "slots" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
                 calendar,
                 times
               ] }) : form,
@@ -8627,6 +8820,7 @@ function Icon({ name }) {
     left: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m15 18-6-6 6-6" }),
     right: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m9 18 6-6-6-6" }),
     down: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m6 9 6 6 6-6" }),
+    check: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M20 6 9 17l-5-5" }),
     clock: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 7v5l3 2" })