@queuezero/embed 0.1.11 → 0.1.12

package/dist/index.global.js

@@ -1,4 +1,4 @@
-var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var q=(a,e,t)=>e in a?h(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var z=(a,e)=>{for(var t in e)h(a,t,{get:e[t],enumerable:!0})},x=(a,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of v(e))!b.call(a,r)&&r!==t&&h(a,r,{get:()=>e[r],enumerable:!(o=y(e,r))||o.enumerable});return a};var $=a=>x(h({},"__esModule",{value:!0}),a);var p=(a,e,t)=>q(a,typeof e!="symbol"?e+"":e,t);var M={};z(M,{init:()=>E});var w=`
+var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var q=(a,e,t)=>e in a?h(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var z=(a,e)=>{for(var t in e)h(a,t,{get:e[t],enumerable:!0})},x=(a,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of v(e))!b.call(a,r)&&r!==t&&h(a,r,{get:()=>e[r],enumerable:!(o=y(e,r))||o.enumerable});return a};var $=a=>x(h({},"__esModule",{value:!0}),a);var p=(a,e,t)=>q(a,typeof e!="symbol"?e+"":e,t);var E={};z(E,{init:()=>C});var w=`
 /* Base Form Styles */
 .qz-form {
   font-family: var(--qz-font-family, system-ui, -apple-system, sans-serif);
@@ -217,7 +217,7 @@ var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescr
   margin: 0 0 20px 0;
   text-align: center;
 }
-`,u=class{constructor(e,t,o){p(this,"container");p(this,"campaign","");p(this,"options",{apiUrl:""});p(this,"configData",null);p(this,"submitted",!1);p(this,"submittedData",null);p(this,"modalElement",null);p(this,"modalOverlay",null);let r=e?document.getElementById(e):null;if(!r)if(o.displayMode==="modal")r=document.createElement("div");else{console.error(`QueueZero: Element with ID "${e}" not found.`),this.container=document.createElement("div");return}this.container=r,this.campaign=t,this.options=o,this.injectStyles(),this.render(),o.displayMode==="modal"&&this.attachHeadlessTriggers(),this.loadCampaign()}injectStyles(){if(document.getElementById("qz-styles"))return;let e=document.createElement("style");e.id="qz-styles",e.textContent=w,document.head.appendChild(e)}render(){this.container.innerHTML='<div class="qz-loading">Loading waitlist...</div>'}async loadCampaign(){try{let e=await fetch(`${this.options.apiUrl}/v1/config/${this.campaign}`);if(!e.ok)throw new Error(`Waitlist not found (${e.status})`);if(this.configData=await e.json(),this.applyBranding(),this.options.displayMode==="modal"){let{triggerSelector:t,attachToText:o}=this.options.modalOptions||{};if(t||o){let r=this.modalOverlay?.classList.contains("qz-modal-open");this.createModalDOM(),r&&this.openModal()}else this.renderTrigger()}else this.renderInlineForm()}catch(e){this.container&&(this.container.innerHTML=`<div class="qz-error">Error loading waitlist: ${e.message}</div>`),console.error(e)}}attachHeadlessTriggers(){let{triggerSelector:e,attachToText:t}=this.options.modalOptions||{};if(e)try{document.querySelectorAll(e).forEach(o=>{o.addEventListener("click",r=>{r.preventDefault(),r.stopImmediatePropagation(),this.openModal()})})}catch(o){console.warn("QueueZero: Invalid triggerSelector",o)}if(t){let o=t.toLowerCase();document.querySelectorAll("a, button").forEach(r=>{(r.textContent||"").toLowerCase().includes(o)&&r.addEventListener("click",l=>{l.preventDefault(),l.stopImmediatePropagation(),this.openModal()})})}}applyBranding(){if(!this.configData)return;let e=this.configData.branding||{},t=document.documentElement;e.themeColor&&(t.style.setProperty("--qz-theme-color",e.themeColor),this.container.style.setProperty("--qz-theme-color",e.themeColor)),e.backgroundColor&&t.style.setProperty("--qz-bg-color",e.backgroundColor),e.fontFamily&&t.style.setProperty("--qz-font-family",e.fontFamily)}renderTrigger(){if(!this.configData)return;let e=this.options.modalOptions||{},t=e.triggerText||"Join Waitlist",o=e.triggerClass||"";this.container.innerHTML=`
+`,u=class{constructor(e,t,o){p(this,"container");p(this,"campaign","");p(this,"options",{apiUrl:""});p(this,"configData",null);p(this,"submitted",!1);p(this,"submittedData",null);p(this,"modalElement",null);p(this,"modalOverlay",null);let r=e?document.getElementById(e):null;if(!r)if(o.displayMode==="modal")r=document.createElement("div");else{console.error(`QueueZero: Element with ID "${e}" not found.`),this.container=document.createElement("div");return}this.container=r,this.campaign=t,this.options=o,this.injectStyles(),this.render(),o.displayMode==="modal"&&this.attachHeadlessTriggers(),this.loadCampaign()}injectStyles(){if(document.getElementById("qz-styles"))return;let e=document.createElement("style");e.id="qz-styles",e.textContent=w,document.head.appendChild(e)}render(){this.container.innerHTML='<div class="qz-loading">Loading waitlist...</div>'}async loadCampaign(){try{let e=await fetch(`${this.options.apiUrl}/v1/config/${this.campaign}`);if(!e.ok)throw new Error(`Waitlist not found (${e.status})`);if(this.configData=await e.json(),fetch(`${this.options.apiUrl}/v1/analytics/view/${this.campaign}`,{method:"POST",headers:{"Content-Type":"application/json"}}).catch(t=>console.warn("Failed to record view:",t)),this.applyBranding(),this.options.displayMode==="modal"){let{triggerSelector:t,attachToText:o}=this.options.modalOptions||{};if(t||o){let r=this.modalOverlay?.classList.contains("qz-modal-open");this.createModalDOM(),r&&this.openModal()}else this.renderTrigger()}else this.renderInlineForm()}catch(e){this.container&&(this.container.innerHTML=`<div class="qz-error">Error loading waitlist: ${e.message}</div>`),console.error(e)}}attachHeadlessTriggers(){let{triggerSelector:e,attachToText:t}=this.options.modalOptions||{};if(e)try{document.querySelectorAll(e).forEach(o=>{o.addEventListener("click",r=>{r.preventDefault(),r.stopImmediatePropagation(),this.openModal()})})}catch(o){console.warn("QueueZero: Invalid triggerSelector",o)}if(t){let o=t.toLowerCase();document.querySelectorAll("a, button").forEach(r=>{(r.textContent||"").toLowerCase().includes(o)&&r.addEventListener("click",l=>{l.preventDefault(),l.stopImmediatePropagation(),this.openModal()})})}}applyBranding(){if(!this.configData)return;let e=this.configData.branding||{},t=document.documentElement;e.themeColor&&(t.style.setProperty("--qz-theme-color",e.themeColor),this.container.style.setProperty("--qz-theme-color",e.themeColor)),e.backgroundColor&&t.style.setProperty("--qz-bg-color",e.backgroundColor),e.fontFamily&&t.style.setProperty("--qz-font-family",e.fontFamily)}renderTrigger(){if(!this.configData)return;let e=this.options.modalOptions||{},t=e.triggerText||"Join Waitlist",o=e.triggerClass||"";this.container.innerHTML=`
       <button class="qz-trigger ${o}" id="qz-trigger-${this.campaign}">
         ${t}
       </button>
@@ -237,10 +237,10 @@ var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescr
           ${i}
         </div>
       </div>
-    `,document.body.appendChild(this.modalOverlay),this.modalOverlay.querySelector(".qz-modal-close")?.addEventListener("click",()=>this.closeModal()),this.modalOverlay.addEventListener("click",d=>{d.target===this.modalOverlay&&this.closeModal()}),document.addEventListener("keydown",d=>{d.key==="Escape"&&this.modalOverlay?.classList.contains("qz-modal-open")&&this.closeModal()})}openModal(){if(this.modalOverlay||this.createModalDOM(),!this.modalOverlay)return;let e=document.getElementById(`qz-modal-form-container-${this.campaign}`);e&&!e.hasChildNodes()&&this.renderFormInto(e),this.modalOverlay.classList.add("qz-modal-open"),document.body.style.overflow="hidden"}closeModal(){this.modalOverlay?.classList.remove("qz-modal-open"),document.body.style.overflow=""}renderInlineForm(){this.renderFormInto(this.container)}renderFormInto(e){if(!this.configData)return;let t=this.configData.branding?.themeColor||"#10B981";e.style.setProperty("--qz-theme-color",t);let o=(this.configData.formFields||[]).filter(i=>i.enabled);o.length===0&&o.push({key:"email",label:"Email Address",type:"email",enabled:!0,required:!0});let r=i=>{let c=`qz-${i.key}`,d=`<label class="qz-label" for="${c}">${i.label}${i.required?" *":""}</label>`,s=i.required?"required":"",m=i.placeholder||"";switch(i.type){case"select":let g=(i.options||[]).map(f=>`<option value="${f}">${f}</option>`).join("");return`
+    `,document.body.appendChild(this.modalOverlay),this.modalOverlay.querySelector(".qz-modal-close")?.addEventListener("click",()=>this.closeModal()),this.modalOverlay.addEventListener("click",c=>{c.target===this.modalOverlay&&this.closeModal()}),document.addEventListener("keydown",c=>{c.key==="Escape"&&this.modalOverlay?.classList.contains("qz-modal-open")&&this.closeModal()})}openModal(){if(this.modalOverlay||this.createModalDOM(),!this.modalOverlay)return;let e=document.getElementById(`qz-modal-form-container-${this.campaign}`);e&&!e.hasChildNodes()&&this.renderFormInto(e),this.modalOverlay.classList.add("qz-modal-open"),document.body.style.overflow="hidden"}closeModal(){this.modalOverlay?.classList.remove("qz-modal-open"),document.body.style.overflow=""}renderInlineForm(){this.renderFormInto(this.container)}renderFormInto(e){if(!this.configData)return;let t=this.configData.branding?.themeColor||"#10B981";e.style.setProperty("--qz-theme-color",t);let o=(this.configData.formFields||[]).filter(i=>i.enabled);o.length===0&&o.push({key:"email",label:"Email Address",type:"email",enabled:!0,required:!0});let r=i=>{let d=`qz-${i.key}`,c=`<label class="qz-label" for="${d}">${i.label}${i.required?" *":""}</label>`,s=i.required?"required":"",m=i.placeholder||"";switch(i.type){case"select":let g=(i.options||[]).map(f=>`<option value="${f}">${f}</option>`).join("");return`
             <div class="qz-form-group">
-              ${d}
-              <select class="qz-input qz-select" id="${c}" name="${i.key}" ${s}>
+              ${c}
+              <select class="qz-input qz-select" id="${d}" name="${i.key}" ${s}>
               <option value="">Select an option</option>
                 ${g}
               </select>
@@ -248,16 +248,16 @@ var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescr
           `;case"checkbox":return`
             <div class="qz-form-group qz-checkbox-group">
               <label class="qz-checkbox-label">
-                <input type="checkbox" class="qz-checkbox" id="${c}" name="${i.key}" ${s} />
+                <input type="checkbox" class="qz-checkbox" id="${d}" name="${i.key}" ${s} />
                 <span>${i.label}${i.required?" *":""}</span>
               </label>
             </div>
           `;case"textarea":return`
             <div class="qz-form-group">
-              ${d}
+              ${c}
               <textarea 
                 class="qz-input qz-textarea" 
-                id="${c}" 
+                id="${d}" 
                 name="${i.key}" 
                 placeholder="${m}"
                 rows="3"
@@ -266,10 +266,10 @@ var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescr
             </div>
           `;case"number":return`
             <div class="qz-form-group">
-              ${d}
+              ${c}
               <input 
                 class="qz-input" 
-                id="${c}" 
+                id="${d}" 
                 name="${i.key}" 
                 type="number"
                 placeholder="${m}"
@@ -278,10 +278,10 @@ var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescr
             </div>
           `;default:return`
             <div class="qz-form-group">
-              ${d}
+              ${c}
               <input 
                 class="qz-input" 
-                id="${c}" 
+                id="${d}" 
                 name="${i.key}" 
                 type="${i.type==="email"?"email":"text"}"
                 placeholder="${m}"
@@ -293,7 +293,7 @@ var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescr
         ${n}
         <button type="submit" class="qz-button">Join Waitlist</button>
       </form>
-    `,e.querySelector("form")?.addEventListener("submit",i=>this.handleSubmit(i))}async handleSubmit(e){e.preventDefault();let t=e.target,o=t.querySelector("button"),r=new FormData(t),n={},l="";if(r.forEach((s,m)=>{let g=s.toString();m==="email"&&(l=g),n[m]=g}),!l){this.showError(t,"Email is required");return}let c=new URLSearchParams(window.location.search).get("ref"),d={campaign:this.campaign,email:l,metadata:n,referrer_code:c||null};o&&(o.disabled=!0,o.textContent="Joining...");try{let s=await fetch(`${this.options.apiUrl}/v1/submit`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(d)});if(!s.ok){let g=await s.json();throw new Error(g.message||g.error||"Failed to join")}let m=await s.json();this.submitted=!0,this.submittedData=m,this.renderSuccess(),this.options.onSuccess?.(m)}catch(s){this.showError(t,s.message||"Something went wrong"),o&&(o.disabled=!1,o.textContent="Join Waitlist"),this.options.onError?.(s)}}showError(e,t){let o=e.querySelector(".qz-error");o&&o.remove();let r=document.createElement("div");r.className="qz-error",r.textContent=t,e.insertBefore(r,e.firstChild)}renderSuccess(){let e=this.submittedData?.position||"?",t=this.submittedData?.referralCode,o=window.location.origin+window.location.pathname,r=t?`${o}?ref=${t}`:null,n=`
+    `,e.querySelector("form")?.addEventListener("submit",i=>this.handleSubmit(i))}async handleSubmit(e){e.preventDefault();let t=e.target,o=t.querySelector("button"),r=new FormData(t),n={},l="";if(r.forEach((s,m)=>{let g=s.toString();m==="email"&&(l=g),n[m]=g}),!l){this.showError(t,"Email is required");return}let d=new URLSearchParams(window.location.search).get("ref"),c={campaign:this.campaign,email:l,metadata:n,referrer_code:d||null};o&&(o.disabled=!0,o.textContent="Joining...");try{let s=await fetch(`${this.options.apiUrl}/v1/submit`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(c)});if(!s.ok){let g=await s.json();throw new Error(g.message||g.error||"Failed to join")}let m=await s.json();this.submitted=!0,this.submittedData=m,this.renderSuccess(),this.options.onSuccess?.(m)}catch(s){this.showError(t,s.message||"Something went wrong"),o&&(o.disabled=!1,o.textContent="Join Waitlist"),this.options.onError?.(s)}}showError(e,t){let o=e.querySelector(".qz-error");o&&o.remove();let r=document.createElement("div");r.className="qz-error",r.textContent=t,e.insertBefore(r,e.firstChild)}renderSuccess(){let e=this.submittedData?.position||"?",t=this.submittedData?.referralCode,o=window.location.origin+window.location.pathname,r=t?`${o}?ref=${t}`:null,n=`
       <div class="qz-success">
         <h3>You're on the list!</h3>
         <p>You're #${e} in line.</p>
@@ -302,4 +302,4 @@ var QueueZero=(()=>{var h=Object.defineProperty;var y=Object.getOwnPropertyDescr
                 <p style="margin-bottom: 8px; color: #a6e3a1;">Refer friends to move up:</p>
                 <input class="qz-input" readonly value="${r}" onclick="this.select()" style="text-align: center; cursor: pointer;">
             </div>
-        `),n+="</div>",this.options.displayMode==="modal"){let l=document.getElementById(`qz-modal-form-container-${this.campaign}`);if(l){l.innerHTML=n;return}}this.container.innerHTML=n}};function E(a,e,t){return new u(a,e,t)}return $(M);})();
+        `),n+="</div>",this.options.displayMode==="modal"){let l=document.getElementById(`qz-modal-form-container-${this.campaign}`);if(l){l.innerHTML=n;return}}this.container.innerHTML=n}};function C(a,e,t){return new u(a,e,t)}return $(E);})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@queuezero/embed",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Embeddable vanilla JS widget for QueueZero viral waitlists",
   "main": "./dist/index.global.js",
   "browser": "./dist/index.global.js",