@queuezero/react 0.1.8 → 0.1.9

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.
Files changed (4) hide show
  1. package/README.md +17 -0
  2. package/dist/index.js +31 -3
  3. package/dist/index.mjs +31 -3
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -78,8 +78,25 @@ A ready-to-use signup form.
78
78
  </div>
79
79
  )}
80
80
  </WaitlistForm>
81
+
82
+ // Modal mode
83
+ <WaitlistForm
84
+ displayMode="modal"
85
+ triggerText="Join Our Waitlist"
86
+ modalSize="md"
87
+ />
81
88
  ```
82
89
 
90
+ #### Modal Mode Props
91
+
92
+ | Prop | Type | Default | Description |
93
+ |------|------|---------|-------------|
94
+ | `displayMode` | `'inline' \| 'modal'` | `'inline'` | Display as inline form or modal |
95
+ | `triggerText` | `string` | `'Join Waitlist'` | Button text (modal mode only) |
96
+ | `modalSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Modal width (modal mode only) |
97
+
98
+ The modal automatically uses your campaign's branding (logo, cover image, theme color) from the API.
99
+
83
100
  ### WaitlistStatus
84
101
 
85
102
  Displays position, score, and referral count.
package/dist/index.js CHANGED
@@ -81,7 +81,13 @@ function WaitlistProvider({ campaign, config, children }) {
81
81
  campaign,
82
82
  join: stateManager.join.bind(stateManager),
83
83
  refresh: stateManager.refresh.bind(stateManager),
84
- getReferralLink: stateManager.getReferralLink.bind(stateManager),
84
+ getReferralLink: () => {
85
+ const code = stateManager.getReferralCode();
86
+ if (code && typeof window !== "undefined") {
87
+ return `${window.location.origin}${window.location.pathname}?ref=${code}`;
88
+ }
89
+ return stateManager.getReferralLink();
90
+ },
85
91
  getReferralCode: stateManager.getReferralCode.bind(stateManager),
86
92
  reset: stateManager.reset.bind(stateManager),
87
93
  config: publicConfig,
@@ -183,6 +189,7 @@ function WaitlistForm({
183
189
  const [formData, setFormData] = (0, import_react2.useState)({});
184
190
  const [localError, setLocalError] = (0, import_react2.useState)(null);
185
191
  const [isModalOpen, setIsModalOpen] = (0, import_react2.useState)(false);
192
+ const [successData, setSuccessData] = (0, import_react2.useState)(null);
186
193
  (0, import_react2.useEffect)(() => {
187
194
  const handleEsc = (e) => {
188
195
  if (e.key === "Escape" && isModalOpen) setIsModalOpen(false);
@@ -213,6 +220,7 @@ function WaitlistForm({
213
220
  if (result) {
214
221
  setEmail("");
215
222
  setFormData({});
223
+ setSuccessData(result);
216
224
  onSuccess?.(result);
217
225
  } else if (error) {
218
226
  onError?.(error);
@@ -275,7 +283,7 @@ function WaitlistForm({
275
283
  required: field.required,
276
284
  className: "qz-form-select",
277
285
  children: [
278
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: field.placeholder || `Select ${field.label}` }),
286
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: "Select an option" }),
279
287
  field.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: opt, children: opt }, opt))
280
288
  ]
281
289
  }
@@ -373,7 +381,27 @@ function WaitlistForm({
373
381
  branding.coverImageUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: branding.coverImageUrl, alt: "", className: "qz-modal-cover" }),
374
382
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "qz-modal-body", children: [
375
383
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "qz-modal-title", children: config?.name || "Join Waitlist" }),
376
- formContent
384
+ successData ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "qz-success", children: [
385
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { fontSize: "1.25rem", fontWeight: 600, marginBottom: "0.5rem", textAlign: "center" }, children: "You're on the list!" }),
386
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: { textAlign: "center", marginBottom: "1.5rem", opacity: 0.9 }, children: [
387
+ "You're #",
388
+ successData.position || "?",
389
+ " in line."
390
+ ] }),
391
+ successData.referralLink && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "1.5rem" }, children: [
392
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { marginBottom: "0.5rem", fontSize: "0.875rem", opacity: 0.9, textAlign: "center" }, children: "Refer friends to move up:" }),
393
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
394
+ "input",
395
+ {
396
+ readOnly: true,
397
+ value: window.location.origin + window.location.pathname + "?ref=" + successData.referralCode,
398
+ onClick: (e) => e.currentTarget.select(),
399
+ className: "qz-form-input",
400
+ style: { textAlign: "center", cursor: "pointer" }
401
+ }
402
+ )
403
+ ] })
404
+ ] }) : formContent
377
405
  ] })
378
406
  ] })
379
407
  }
package/dist/index.mjs CHANGED
@@ -47,7 +47,13 @@ function WaitlistProvider({ campaign, config, children }) {
47
47
  campaign,
48
48
  join: stateManager.join.bind(stateManager),
49
49
  refresh: stateManager.refresh.bind(stateManager),
50
- getReferralLink: stateManager.getReferralLink.bind(stateManager),
50
+ getReferralLink: () => {
51
+ const code = stateManager.getReferralCode();
52
+ if (code && typeof window !== "undefined") {
53
+ return `${window.location.origin}${window.location.pathname}?ref=${code}`;
54
+ }
55
+ return stateManager.getReferralLink();
56
+ },
51
57
  getReferralCode: stateManager.getReferralCode.bind(stateManager),
52
58
  reset: stateManager.reset.bind(stateManager),
53
59
  config: publicConfig,
@@ -149,6 +155,7 @@ function WaitlistForm({
149
155
  const [formData, setFormData] = useState2({});
150
156
  const [localError, setLocalError] = useState2(null);
151
157
  const [isModalOpen, setIsModalOpen] = useState2(false);
158
+ const [successData, setSuccessData] = useState2(null);
152
159
  useEffect2(() => {
153
160
  const handleEsc = (e) => {
154
161
  if (e.key === "Escape" && isModalOpen) setIsModalOpen(false);
@@ -179,6 +186,7 @@ function WaitlistForm({
179
186
  if (result) {
180
187
  setEmail("");
181
188
  setFormData({});
189
+ setSuccessData(result);
182
190
  onSuccess?.(result);
183
191
  } else if (error) {
184
192
  onError?.(error);
@@ -241,7 +249,7 @@ function WaitlistForm({
241
249
  required: field.required,
242
250
  className: "qz-form-select",
243
251
  children: [
244
- /* @__PURE__ */ jsx2("option", { value: "", children: field.placeholder || `Select ${field.label}` }),
252
+ /* @__PURE__ */ jsx2("option", { value: "", children: "Select an option" }),
245
253
  field.options?.map((opt) => /* @__PURE__ */ jsx2("option", { value: opt, children: opt }, opt))
246
254
  ]
247
255
  }
@@ -339,7 +347,27 @@ function WaitlistForm({
339
347
  branding.coverImageUrl && /* @__PURE__ */ jsx2("img", { src: branding.coverImageUrl, alt: "", className: "qz-modal-cover" }),
340
348
  /* @__PURE__ */ jsxs("div", { className: "qz-modal-body", children: [
341
349
  /* @__PURE__ */ jsx2("h2", { className: "qz-modal-title", children: config?.name || "Join Waitlist" }),
342
- formContent
350
+ successData ? /* @__PURE__ */ jsxs("div", { className: "qz-success", children: [
351
+ /* @__PURE__ */ jsx2("h3", { style: { fontSize: "1.25rem", fontWeight: 600, marginBottom: "0.5rem", textAlign: "center" }, children: "You're on the list!" }),
352
+ /* @__PURE__ */ jsxs("p", { style: { textAlign: "center", marginBottom: "1.5rem", opacity: 0.9 }, children: [
353
+ "You're #",
354
+ successData.position || "?",
355
+ " in line."
356
+ ] }),
357
+ successData.referralLink && /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.5rem" }, children: [
358
+ /* @__PURE__ */ jsx2("p", { style: { marginBottom: "0.5rem", fontSize: "0.875rem", opacity: 0.9, textAlign: "center" }, children: "Refer friends to move up:" }),
359
+ /* @__PURE__ */ jsx2(
360
+ "input",
361
+ {
362
+ readOnly: true,
363
+ value: window.location.origin + window.location.pathname + "?ref=" + successData.referralCode,
364
+ onClick: (e) => e.currentTarget.select(),
365
+ className: "qz-form-input",
366
+ style: { textAlign: "center", cursor: "pointer" }
367
+ }
368
+ )
369
+ ] })
370
+ ] }) : formContent
343
371
  ] })
344
372
  ] })
345
373
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@queuezero/react",
3
- "version": "0.1.8",
3
+ "version": "0.1.9",
4
4
  "description": "React components and hooks for QueueZero viral waitlists",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",