@queuezero/embed 0.1.6 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.global.js +59 -20
- package/package.json +1 -1
package/dist/index.global.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var QueueZero=(()=>{var
|
|
1
|
+
var QueueZero=(()=>{var u=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var q=Object.prototype.hasOwnProperty;var y=(n,e,t)=>e in n?u(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var z=(n,e)=>{for(var t in e)u(n,t,{get:e[t],enumerable:!0})},x=(n,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of f(e))!q.call(n,i)&&i!==t&&u(n,i,{get:()=>e[i],enumerable:!(o=b(e,i))||o.enumerable});return n};var v=n=>x(u({},"__esModule",{value:!0}),n);var p=(n,e,t)=>y(n,typeof e!="symbol"?e+"":e,t);var E={};z(E,{init:()=>w});var $=`
|
|
2
2
|
.qz-form {
|
|
3
3
|
font-family: system-ui, -apple-system, sans-serif;
|
|
4
4
|
max-width: 400px;
|
|
@@ -79,30 +79,69 @@ var QueueZero=(()=>{var d=Object.defineProperty;var h=Object.getOwnPropertyDescr
|
|
|
79
79
|
padding: 24px;
|
|
80
80
|
color: #6c7086;
|
|
81
81
|
}
|
|
82
|
-
`,
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
82
|
+
`,h=class{constructor(e,t,o){p(this,"container");p(this,"campaign");p(this,"options");p(this,"configData",null);p(this,"submitted",!1);p(this,"submittedData",null);let i=document.getElementById(e);if(!i){console.error(`QueueZero: Element with ID "${e}" not found.`),this.container=document.createElement("div");return}this.container=i,this.campaign=t,this.options=o,this.injectStyles(),this.render(),this.loadCampaign()}injectStyles(){if(document.getElementById("qz-styles"))return;let e=document.createElement("style");e.id="qz-styles",e.textContent=$,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})`);this.configData=await e.json(),this.renderForm()}catch(e){this.container.innerHTML=`<div class="qz-error">Failed to load waitlist: ${e.message}</div>`}}renderForm(){if(!this.configData)return;let e=this.configData.branding?.themeColor||"#10B981";this.container.style.setProperty("--qz-theme-color",e);let t=(this.configData.formFields||[]).filter(r=>r.enabled);t.length===0&&t.push({key:"email",label:"Email Address",type:"email",enabled:!0,required:!0});let o=r=>{let c=`qz-${r.key}`,m=`<label class="qz-label" for="${c}">${r.label}${r.required?" *":""}</label>`,l=r.required?"required":"",a=r.placeholder||"";switch(r.type){case"select":let d=(r.options||[]).map(s=>`<option value="${s}">${s}</option>`).join("");return`
|
|
83
|
+
<div class="qz-form-group">
|
|
84
|
+
${m}
|
|
85
|
+
<select class="qz-input qz-select" id="${c}" name="${r.key}" ${l}>
|
|
86
|
+
<option value="">${a||`Select ${r.label}`}</option>
|
|
87
|
+
${d}
|
|
88
|
+
</select>
|
|
89
|
+
</div>
|
|
90
|
+
`;case"checkbox":return`
|
|
91
|
+
<div class="qz-form-group qz-checkbox-group">
|
|
92
|
+
<label class="qz-checkbox-label">
|
|
93
|
+
<input type="checkbox" class="qz-checkbox" id="${c}" name="${r.key}" ${l} />
|
|
94
|
+
<span>${r.label}${r.required?" *":""}</span>
|
|
95
|
+
</label>
|
|
96
|
+
</div>
|
|
97
|
+
`;case"textarea":return`
|
|
98
|
+
<div class="qz-form-group">
|
|
99
|
+
${m}
|
|
100
|
+
<textarea
|
|
101
|
+
class="qz-input qz-textarea"
|
|
102
|
+
id="${c}"
|
|
103
|
+
name="${r.key}"
|
|
104
|
+
placeholder="${a}"
|
|
105
|
+
rows="3"
|
|
106
|
+
${l}
|
|
107
|
+
></textarea>
|
|
108
|
+
</div>
|
|
109
|
+
`;case"number":return`
|
|
110
|
+
<div class="qz-form-group">
|
|
111
|
+
${m}
|
|
112
|
+
<input
|
|
113
|
+
class="qz-input"
|
|
114
|
+
id="${c}"
|
|
115
|
+
name="${r.key}"
|
|
116
|
+
type="number"
|
|
117
|
+
placeholder="${a}"
|
|
118
|
+
${l}
|
|
119
|
+
/>
|
|
120
|
+
</div>
|
|
121
|
+
`;default:return`
|
|
122
|
+
<div class="qz-form-group">
|
|
123
|
+
${m}
|
|
124
|
+
<input
|
|
125
|
+
class="qz-input"
|
|
126
|
+
id="${c}"
|
|
127
|
+
name="${r.key}"
|
|
128
|
+
type="${r.type==="email"?"email":"text"}"
|
|
129
|
+
placeholder="${a}"
|
|
130
|
+
${l}
|
|
131
|
+
/>
|
|
132
|
+
</div>
|
|
133
|
+
`}},i=t.map(o).join("");this.container.innerHTML=`
|
|
95
134
|
<form class="qz-form" id="qz-form-${this.campaign}">
|
|
96
|
-
${
|
|
135
|
+
${i}
|
|
97
136
|
<button type="submit" class="qz-button">Join Waitlist</button>
|
|
98
137
|
</form>
|
|
99
|
-
`,this.container.querySelector("form")?.addEventListener("submit",
|
|
138
|
+
`,this.container.querySelector("form")?.addEventListener("submit",r=>this.handleSubmit(r))}async handleSubmit(e){e.preventDefault();let t=e.target,o=t.querySelector("button"),i=new FormData(t),g={},r="";if(i.forEach((a,d)=>{let s=a.toString();d==="email"&&(r=s),g[d]=s}),!r){this.showError(t,"Email is required");return}let m=new URLSearchParams(window.location.search).get("ref"),l={campaign:this.campaign,email:r,metadata:g,referrer_code:m||null};o&&(o.disabled=!0,o.textContent="Joining...");try{let a=await fetch(`${this.options.apiUrl}/v1/submit`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(l)});if(!a.ok){let s=await a.json();throw new Error(s.message||s.error||"Failed to join")}let d=await a.json();this.submitted=!0,this.submittedData=d,this.renderSuccess(),this.options.onSuccess?.(d)}catch(a){this.showError(t,a.message||"Something went wrong"),o&&(o.disabled=!1,o.textContent="Join Waitlist"),this.options.onError?.(a)}}showError(e,t){let o=e.querySelector(".qz-error");o&&o.remove();let i=document.createElement("div");i.className="qz-error",i.textContent=t,e.insertBefore(i,e.firstChild)}renderSuccess(){let e=this.submittedData?.position||"?",t=this.submittedData?.referralLink,o=`
|
|
100
139
|
<div class="qz-success">
|
|
101
140
|
<h3>You're on the list!</h3>
|
|
102
|
-
<p>You're #${
|
|
103
|
-
`;
|
|
141
|
+
<p>You're #${e} in line.</p>
|
|
142
|
+
`;t&&(o+=`
|
|
104
143
|
<div style="margin-top: 20px;">
|
|
105
144
|
<p style="margin-bottom: 8px; color: #a6e3a1;">Refer friends to move up:</p>
|
|
106
|
-
<input class="qz-input" readonly value="${
|
|
145
|
+
<input class="qz-input" readonly value="${t}" onclick="this.select()" style="text-align: center; cursor: pointer;">
|
|
107
146
|
</div>
|
|
108
|
-
`),
|
|
147
|
+
`),o+="</div>",this.container.innerHTML=o}};function w(n,e,t){return new h(n,e,t)}return v(E);})();
|