@sagepilot-ai/web-events-addon 0.2.2 → 0.2.3

package/dist/index.js

@@ -338,7 +338,7 @@ function createSagepilotInstallationClient(options) {
 
 // package.json
 var name = "@sagepilot-ai/web-events-addon";
-var version = "0.2.2";
+var version = "0.2.3";
 
 // src/projection.ts
 var sensitive = /password|passwd|secret|token|authorization|cookie|session|email|phone|contact|address|card|payment|cvv|ssn|dob|birth|customer|user|account|person|profile|name|description|message|content|text|search|query/i;
@@ -2175,6 +2175,8 @@ var popupDesignStyles = [
 ].join("");
 
 // src/popup.ts
+var PHONE_FORMAT = /^\+[1-9][0-9]{7,14}$/;
+var PHONE_GUIDANCE = "Start with + and your country code, e.g. +12025550123. No spaces or dashes.";
 function popupCompletionKey(workspaceId, installationId) {
   return `sagepilot:sdk-popup:${workspaceId}:${installationId}:completed`;
 }
@@ -2225,6 +2227,30 @@ function createPopup(options) {
     if (text2 !== void 0) node2.textContent = text2;
     return node2;
   }
+  function phoneField(label2, input) {
+    const guidance = input.required ? PHONE_GUIDANCE : "Optional. " + PHONE_GUIDANCE;
+    const hint = element("small", guidance);
+    hint.id = "sage-popup-phone-hint";
+    hint.className = "phone-hint";
+    hint.setAttribute("aria-live", "polite");
+    input.setAttribute("aria-describedby", hint.id);
+    function validate() {
+      const value = input.value.trim();
+      const invalid = (input.required || value.length > 0) && !PHONE_FORMAT.test(value);
+      if (invalid === (input.getAttribute("aria-invalid") === "true")) return !invalid;
+      input.setAttribute("aria-invalid", String(invalid));
+      hint.classList.toggle("phone-error", invalid);
+      hint.textContent = invalid ? "Check your phone number. " + PHONE_GUIDANCE : guidance;
+      return !invalid;
+    }
+    function updatePhoneError() {
+      if (input.getAttribute("aria-invalid") === "true") validate();
+    }
+    input.addEventListener("input", updatePhoneError);
+    const group = element("div");
+    group.append(label2, hint);
+    return { group, validate };
+  }
   function show() {
     if (!eligible() || !config) return;
     const published = config, revision = ++generation;
@@ -2235,6 +2261,7 @@ function createPopup(options) {
     const shadow = host.attachShadow({ mode: "open" });
     const style = element("style");
     style.textContent = `:host{font-family:system-ui,sans-serif;color:#172c23;color-scheme:light}*{box-sizing:border-box}.panel{background:white;width:min(420px,calc(100vw - 40px));max-height:90dvh;overflow:auto;border-radius:18px;padding:28px;box-shadow:0 16px 80px #0003;position:relative}h2{margin:4px 28px 10px 0;font-size:25px}p{line-height:1.5;color:#52645a}label{display:block;margin-top:14px;font-size:14px}input{display:block;width:100%;padding:11px;border:1px solid #b6c7bd;border-radius:7px;margin-top:6px;font:inherit;background:white;color:#172c23}button{cursor:pointer;font:inherit;color:inherit}button[type=submit]{display:block;width:100%;border:0;border-radius:8px;background:${published.accent_color};color:white;padding:13px;margin-top:20px;font-weight:600}button:disabled{opacity:.6;cursor:wait}.close{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:25px}.status{min-height:1.3em;font-size:14px}.logo{max-width:160px;max-height:60px;object-fit:contain}input:focus-visible,button:focus-visible{outline:3px solid #729e82;outline-offset:3px}@media(max-width:480px){.panel{padding:22px}h2{font-size:22px}}`;
+    style.textContent += ".phone-hint{display:block;margin-top:6px;line-height:1.4}.phone-error{font-weight:600}";
     style.textContent += popupDesignStyles;
     shadow.append(style);
     const panel = element("section");
@@ -2256,7 +2283,8 @@ function createPopup(options) {
     status.setAttribute("role", "status");
     status.setAttribute("aria-live", "polite");
     const inputs = /* @__PURE__ */ new Map();
-    const contactLabels = [];
+    const contactFields = [];
+    let validatePhone;
     for (const field of ["name", "email", "phone"]) {
       if (!published.fields[field]) continue;
       const label2 = element("label", field === "phone" ? "Phone" : field === "email" ? "Email" : "Name");
@@ -2267,8 +2295,14 @@ function createPopup(options) {
       input.maxLength = field === "phone" ? 32 : field === "email" ? 254 : 100;
       input.required = published.required_fields.includes(field) || field === "email" && published.verification === "email";
       label2.append(input);
-      form.append(label2);
-      contactLabels.push(label2);
+      let control = label2;
+      if (field === "phone") {
+        const phone = phoneField(label2, input);
+        control = phone.group;
+        validatePhone = phone.validate;
+      }
+      form.append(control);
+      contactFields.push(control);
       inputs.set(field, input);
     }
     const submit = element("button", published.button_text);
@@ -2284,6 +2318,11 @@ function createPopup(options) {
     async function submitForm(event) {
       event.preventDefault();
       if (busy || revision !== generation) return;
+      if (!challenge && validatePhone?.() === false) {
+        status.textContent = "";
+        inputs.get("phone")?.focus();
+        return;
+      }
       busy = true;
       submit.disabled = true;
       status.textContent = "";
@@ -2312,7 +2351,7 @@ function createPopup(options) {
               for (const [key, value] of contactInputs) inputs.set(key, value);
               submit.textContent = published.button_text;
               status.textContent = "";
-              form.replaceChildren(...contactLabels, submit, status);
+              form.replaceChildren(...contactFields, submit, status);
               inputs.values().next().value?.focus();
             };
             var restartForm = restartForm2;