powr-sdk-web 5.6.11 → 5.6.12

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 (3) hide show
  1. package/dist/forms/admin.js +507 -179
  2. package/dist/forms/index.js +20 -5
  3. package/package.json +1 -1
package/dist/forms/admin.js CHANGED
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports["default"] = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _auth = require("../utils/auth");
10
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t5 in e) "default" !== _t5 && {}.hasOwnProperty.call(e, _t5) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t5)) && (i.get || i.set) ? o(f, _t5, i) : f[_t5] = e[_t5]); return f; })(e, t); }
10
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t6 in e) "default" !== _t6 && {}.hasOwnProperty.call(e, _t6) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t6)) && (i.get || i.set) ? o(f, _t6, i) : f[_t6] = e[_t6]); return f; })(e, t); }
11
11
  function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
12
12
  function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
13
13
  function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
@@ -69,35 +69,58 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
69
69
  formTitle: '',
70
70
  formName: '',
71
71
  formId: '',
72
+ description: '',
72
73
  fields: []
73
74
  }),
74
75
  _useState16 = _slicedToArray(_useState15, 2),
75
76
  formDraft = _useState16[0],
76
77
  setFormDraft = _useState16[1];
77
- var _useState17 = (0, _react.useState)(null),
78
+ var _useState17 = (0, _react.useState)(false),
78
79
  _useState18 = _slicedToArray(_useState17, 2),
79
- selectedForm = _useState18[0],
80
- setSelectedForm = _useState18[1];
81
- var _useState19 = (0, _react.useState)(false),
80
+ showEditModal = _useState18[0],
81
+ setShowEditModal = _useState18[1];
82
+ var _useState19 = (0, _react.useState)({
83
+ formTitle: '',
84
+ formName: '',
85
+ formId: '',
86
+ description: '',
87
+ fields: []
88
+ }),
82
89
  _useState20 = _slicedToArray(_useState19, 2),
83
- showDetailModal = _useState20[0],
84
- setShowDetailModal = _useState20[1];
85
- var _useState21 = (0, _react.useState)('responses'),
90
+ editDraft = _useState20[0],
91
+ setEditDraft = _useState20[1];
92
+ var _useState21 = (0, _react.useState)(''),
86
93
  _useState22 = _slicedToArray(_useState21, 2),
87
- activeTab = _useState22[0],
88
- setActiveTab = _useState22[1];
89
- var _useState23 = (0, _react.useState)([]),
94
+ editFeedback = _useState22[0],
95
+ setEditFeedback = _useState22[1];
96
+ var _useState23 = (0, _react.useState)(false),
90
97
  _useState24 = _slicedToArray(_useState23, 2),
91
- formResponses = _useState24[0],
92
- setFormResponses = _useState24[1];
93
- var _useState25 = (0, _react.useState)(0),
98
+ isUpdating = _useState24[0],
99
+ setIsUpdating = _useState24[1];
100
+ var _useState25 = (0, _react.useState)(null),
94
101
  _useState26 = _slicedToArray(_useState25, 2),
95
- responseCount = _useState26[0],
96
- setResponseCount = _useState26[1];
102
+ selectedForm = _useState26[0],
103
+ setSelectedForm = _useState26[1];
97
104
  var _useState27 = (0, _react.useState)(false),
98
105
  _useState28 = _slicedToArray(_useState27, 2),
99
- loadingResponses = _useState28[0],
100
- setLoadingResponses = _useState28[1];
106
+ showDetailModal = _useState28[0],
107
+ setShowDetailModal = _useState28[1];
108
+ var _useState29 = (0, _react.useState)('responses'),
109
+ _useState30 = _slicedToArray(_useState29, 2),
110
+ activeTab = _useState30[0],
111
+ setActiveTab = _useState30[1];
112
+ var _useState31 = (0, _react.useState)([]),
113
+ _useState32 = _slicedToArray(_useState31, 2),
114
+ formResponses = _useState32[0],
115
+ setFormResponses = _useState32[1];
116
+ var _useState33 = (0, _react.useState)(0),
117
+ _useState34 = _slicedToArray(_useState33, 2),
118
+ responseCount = _useState34[0],
119
+ setResponseCount = _useState34[1];
120
+ var _useState35 = (0, _react.useState)(false),
121
+ _useState36 = _slicedToArray(_useState35, 2),
122
+ loadingResponses = _useState36[0],
123
+ setLoadingResponses = _useState36[1];
101
124
  var fetchForms = /*#__PURE__*/function () {
102
125
  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
103
126
  var _yield$apiCall, data, ok, _t;
@@ -282,9 +305,103 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
282
305
  formTitle: '',
283
306
  formName: '',
284
307
  formId: '',
308
+ description: '',
285
309
  fields: []
286
310
  });
287
311
  };
312
+ var populateEditDraft = function populateEditDraft(form) {
313
+ return {
314
+ formTitle: form.formTitle || '',
315
+ formName: form.formName || '',
316
+ formId: form.formId || '',
317
+ description: form.description || '',
318
+ fields: (form.fields || []).map(function (field, index) {
319
+ return _objectSpread({
320
+ id: "".concat(field.name || 'field', "-").concat(index),
321
+ name: field.name || '',
322
+ label: field.label || '',
323
+ type: field.type || 'text',
324
+ required: !!field.required,
325
+ description: field.description || ''
326
+ }, field.type === 'radio' ? {
327
+ options: field.options || []
328
+ } : {});
329
+ })
330
+ };
331
+ };
332
+ var normalizeFieldsForSave = function normalizeFieldsForSave(fields) {
333
+ var usedNames = new Set();
334
+ return fields.map(function (field, index, allFields) {
335
+ var _field$name, _field$description;
336
+ var others = allFields.filter(function (_, i) {
337
+ return i !== index;
338
+ });
339
+ var name = ((_field$name = field.name) === null || _field$name === void 0 ? void 0 : _field$name.trim()) || uniqueFieldName(field.label, index, others);
340
+ var candidate = name;
341
+ var suffix = 2;
342
+ while (usedNames.has(candidate)) {
343
+ candidate = "".concat(name).concat(suffix);
344
+ suffix += 1;
345
+ }
346
+ usedNames.add(candidate);
347
+ return _objectSpread(_objectSpread({
348
+ name: candidate,
349
+ label: field.label.trim(),
350
+ type: field.type,
351
+ required: !!field.required
352
+ }, (_field$description = field.description) !== null && _field$description !== void 0 && _field$description.trim() ? {
353
+ description: field.description.trim()
354
+ } : {}), field.type === 'radio' ? {
355
+ options: field.options || []
356
+ } : {});
357
+ });
358
+ };
359
+ var validateFormDraft = function validateFormDraft(draft) {
360
+ var trimmedTitle = draft.formTitle.trim();
361
+ var trimmedName = draft.formName.trim();
362
+ var trimmedId = draft.formId.trim();
363
+ if (!trimmedTitle || !trimmedName || !trimmedId) {
364
+ return {
365
+ valid: false,
366
+ message: 'Form title, name, and ID are required'
367
+ };
368
+ }
369
+ if (draft.fields.length === 0) {
370
+ return {
371
+ valid: false,
372
+ message: 'Add at least one field'
373
+ };
374
+ }
375
+ var hasInvalidField = draft.fields.some(function (field) {
376
+ var _field$name2, _field$label;
377
+ return !((_field$name2 = field.name) !== null && _field$name2 !== void 0 && _field$name2.trim()) || !((_field$label = field.label) !== null && _field$label !== void 0 && _field$label.trim());
378
+ });
379
+ if (hasInvalidField) {
380
+ return {
381
+ valid: false,
382
+ message: 'Each field needs a name and label'
383
+ };
384
+ }
385
+ var fieldNames = draft.fields.map(function (field) {
386
+ return field.name.trim();
387
+ });
388
+ var duplicateNames = fieldNames.filter(function (name, index) {
389
+ return fieldNames.indexOf(name) !== index;
390
+ });
391
+ if (duplicateNames.length > 0) {
392
+ return {
393
+ valid: false,
394
+ message: "Each field needs a unique name. Duplicate: ".concat(_toConsumableArray(new Set(duplicateNames)).join(', '))
395
+ };
396
+ }
397
+ return {
398
+ valid: true,
399
+ trimmedTitle: trimmedTitle,
400
+ trimmedName: trimmedName,
401
+ trimmedId: trimmedId,
402
+ normalizedFields: normalizeFieldsForSave(draft.fields)
403
+ };
404
+ };
288
405
  var slugify = function slugify(value) {
289
406
  return value.toLowerCase().trim().replace(/[^a-z0-9]+/g, '').slice(0, 32);
290
407
  };
@@ -316,7 +433,8 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
316
433
  id: "".concat(Date.now(), "-").concat(index)
317
434
  }, defaults), {}, {
318
435
  type: type,
319
- required: false
436
+ required: false,
437
+ description: ''
320
438
  }, type === 'radio' ? {
321
439
  options: ['Option 1', 'Option 2']
322
440
  } : {})])
@@ -341,9 +459,50 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
341
459
  });
342
460
  });
343
461
  };
462
+ var addEditField = function addEditField(type) {
463
+ setEditDraft(function (prev) {
464
+ var index = prev.fields.length + 1;
465
+ var defaults = type === 'mobile' ? {
466
+ name: 'whatsapp',
467
+ label: 'Mobile Number'
468
+ } : {
469
+ name: "field".concat(index),
470
+ label: "Field ".concat(index)
471
+ };
472
+ return _objectSpread(_objectSpread({}, prev), {}, {
473
+ fields: [].concat(_toConsumableArray(prev.fields), [_objectSpread(_objectSpread({
474
+ id: "".concat(Date.now(), "-").concat(index)
475
+ }, defaults), {}, {
476
+ type: type,
477
+ required: false,
478
+ description: ''
479
+ }, type === 'radio' ? {
480
+ options: ['Option 1', 'Option 2']
481
+ } : {})])
482
+ });
483
+ });
484
+ };
485
+ var updateEditField = function updateEditField(index, updates) {
486
+ setEditDraft(function (prev) {
487
+ return _objectSpread(_objectSpread({}, prev), {}, {
488
+ fields: prev.fields.map(function (field, i) {
489
+ return i === index ? _objectSpread(_objectSpread({}, field), updates) : field;
490
+ })
491
+ });
492
+ });
493
+ };
494
+ var removeEditField = function removeEditField(index) {
495
+ setEditDraft(function (prev) {
496
+ return _objectSpread(_objectSpread({}, prev), {}, {
497
+ fields: prev.fields.filter(function (_, i) {
498
+ return i !== index;
499
+ })
500
+ });
501
+ });
502
+ };
344
503
  var createForm = /*#__PURE__*/function () {
345
504
  var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
346
- var trimmedTitle, trimmedName, trimmedId, hasInvalidField, fieldNames, duplicateNames, usedNames, normalizedFields, payload, _yield$apiCall3, result, ok, errorMessage, _t4;
505
+ var validation, payload, _yield$apiCall3, result, ok, errorMessage, _t4;
347
506
  return _regenerator().w(function (_context4) {
348
507
  while (1) switch (_context4.p = _context4.n) {
349
508
  case 0:
@@ -355,120 +514,242 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
355
514
  notify('error', 'Project ID is required');
356
515
  return _context4.a(2);
357
516
  case 1:
358
- trimmedTitle = formDraft.formTitle.trim();
359
- trimmedName = formDraft.formName.trim();
360
- trimmedId = formDraft.formId.trim();
361
- if (!(!trimmedTitle || !trimmedName || !trimmedId)) {
517
+ validation = validateFormDraft(formDraft);
518
+ if (validation.valid) {
362
519
  _context4.n = 2;
363
520
  break;
364
521
  }
365
- notify('error', 'Form title, name, and ID are required');
522
+ notify('error', validation.message);
366
523
  return _context4.a(2);
367
524
  case 2:
368
- if (!(formDraft.fields.length === 0)) {
369
- _context4.n = 3;
370
- break;
371
- }
372
- notify('error', 'Add at least one field');
373
- return _context4.a(2);
374
- case 3:
375
- hasInvalidField = formDraft.fields.some(function (field) {
376
- var _field$name, _field$label;
377
- return !((_field$name = field.name) !== null && _field$name !== void 0 && _field$name.trim()) || !((_field$label = field.label) !== null && _field$label !== void 0 && _field$label.trim());
378
- });
379
- if (!hasInvalidField) {
380
- _context4.n = 4;
381
- break;
382
- }
383
- notify('error', 'Each field needs a name and label');
384
- return _context4.a(2);
385
- case 4:
386
- fieldNames = formDraft.fields.map(function (field) {
387
- return field.name.trim();
388
- });
389
- duplicateNames = fieldNames.filter(function (name, index) {
390
- return fieldNames.indexOf(name) !== index;
391
- });
392
- if (!(duplicateNames.length > 0)) {
393
- _context4.n = 5;
394
- break;
395
- }
396
- notify('error', "Each field needs a unique name. Duplicate: ".concat(_toConsumableArray(new Set(duplicateNames)).join(', ')));
397
- return _context4.a(2);
398
- case 5:
399
525
  setIsSaving(true);
400
- _context4.p = 6;
401
- usedNames = new Set();
402
- normalizedFields = formDraft.fields.map(function (field, index, allFields) {
403
- var _field$name2;
404
- var others = allFields.filter(function (_, i) {
405
- return i !== index;
406
- });
407
- var name = ((_field$name2 = field.name) === null || _field$name2 === void 0 ? void 0 : _field$name2.trim()) || uniqueFieldName(field.label, index, others);
408
- var candidate = name;
409
- var suffix = 2;
410
- while (usedNames.has(candidate)) {
411
- candidate = "".concat(name).concat(suffix);
412
- suffix += 1;
413
- }
414
- usedNames.add(candidate);
415
- return _objectSpread({
416
- name: candidate,
417
- label: field.label.trim(),
418
- type: field.type,
419
- required: !!field.required
420
- }, field.type === 'radio' ? {
421
- options: field.options || []
422
- } : {});
423
- });
526
+ _context4.p = 3;
424
527
  payload = {
425
- formTitle: trimmedTitle,
426
- formName: trimmedName,
427
- formId: trimmedId,
428
- fields: normalizedFields
528
+ formTitle: validation.trimmedTitle,
529
+ formName: validation.trimmedName,
530
+ formId: validation.trimmedId,
531
+ description: formDraft.description.trim(),
532
+ fields: validation.normalizedFields
429
533
  };
430
- _context4.n = 7;
534
+ _context4.n = 4;
431
535
  return (0, _auth.apiCall)(apiUrl, "/forms/create-form", projectId, {
432
536
  method: 'POST',
433
537
  body: payload
434
538
  });
435
- case 7:
539
+ case 4:
436
540
  _yield$apiCall3 = _context4.v;
437
541
  result = _yield$apiCall3.data;
438
542
  ok = _yield$apiCall3.ok;
439
543
  if (ok) {
440
- _context4.n = 8;
544
+ _context4.n = 5;
441
545
  break;
442
546
  }
443
547
  throw new Error(result.message || 'Failed to create form');
444
- case 8:
548
+ case 5:
445
549
  notify('success', result.message || 'Form created successfully!');
446
- setCreatedFormLink(getFormPublicUrl(trimmedName));
550
+ setCreatedFormLink(getFormPublicUrl(validation.trimmedName));
447
551
  fetchForms();
448
552
  if (onRefresh) {
449
553
  onRefresh();
450
554
  }
451
- _context4.n = 10;
555
+ _context4.n = 7;
452
556
  break;
453
- case 9:
454
- _context4.p = 9;
557
+ case 6:
558
+ _context4.p = 6;
455
559
  _t4 = _context4.v;
456
560
  console.error('Error creating form:', _t4);
457
561
  errorMessage = _t4 instanceof Error ? _t4.message : 'Failed to create form';
458
562
  notify('error', errorMessage);
459
- case 10:
460
- _context4.p = 10;
563
+ case 7:
564
+ _context4.p = 7;
461
565
  setIsSaving(false);
462
- return _context4.f(10);
463
- case 11:
566
+ return _context4.f(7);
567
+ case 8:
464
568
  return _context4.a(2);
465
569
  }
466
- }, _callee4, null, [[6, 9, 10, 11]]);
570
+ }, _callee4, null, [[3, 6, 7, 8]]);
467
571
  }));
468
572
  return function createForm() {
469
573
  return _ref6.apply(this, arguments);
470
574
  };
471
575
  }();
576
+ var updateForm = /*#__PURE__*/function () {
577
+ var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
578
+ var validation, payload, _yield$apiCall4, result, ok, updatedForm, _t5;
579
+ return _regenerator().w(function (_context5) {
580
+ while (1) switch (_context5.p = _context5.n) {
581
+ case 0:
582
+ setEditFeedback('');
583
+ if (projectId) {
584
+ _context5.n = 1;
585
+ break;
586
+ }
587
+ setEditFeedback('Project ID is required');
588
+ return _context5.a(2);
589
+ case 1:
590
+ validation = validateFormDraft(editDraft);
591
+ if (validation.valid) {
592
+ _context5.n = 2;
593
+ break;
594
+ }
595
+ setEditFeedback(validation.message);
596
+ return _context5.a(2);
597
+ case 2:
598
+ setIsUpdating(true);
599
+ _context5.p = 3;
600
+ payload = {
601
+ formTitle: validation.trimmedTitle,
602
+ formId: validation.trimmedId,
603
+ description: editDraft.description.trim(),
604
+ fields: validation.normalizedFields
605
+ };
606
+ _context5.n = 4;
607
+ return (0, _auth.apiCall)(apiUrl, "/forms/update-form/".concat(encodeURIComponent(editDraft.formName)), projectId, {
608
+ method: 'PUT',
609
+ body: payload
610
+ });
611
+ case 4:
612
+ _yield$apiCall4 = _context5.v;
613
+ result = _yield$apiCall4.data;
614
+ ok = _yield$apiCall4.ok;
615
+ if (ok) {
616
+ _context5.n = 5;
617
+ break;
618
+ }
619
+ throw new Error(result.message || 'Failed to update form');
620
+ case 5:
621
+ updatedForm = result.data || _objectSpread(_objectSpread(_objectSpread({}, selectedForm), payload), {}, {
622
+ formName: editDraft.formName
623
+ });
624
+ setSelectedForm(updatedForm);
625
+ setShowEditModal(false);
626
+ setEditFeedback('');
627
+ fetchForms();
628
+ if (onRefresh) {
629
+ onRefresh();
630
+ }
631
+ if (onFormAction) {
632
+ onFormAction('success', result.message || 'Form updated successfully!');
633
+ }
634
+ _context5.n = 7;
635
+ break;
636
+ case 6:
637
+ _context5.p = 6;
638
+ _t5 = _context5.v;
639
+ console.error('Error updating form:', _t5);
640
+ setEditFeedback(_t5 instanceof Error ? _t5.message : 'Failed to update form');
641
+ case 7:
642
+ _context5.p = 7;
643
+ setIsUpdating(false);
644
+ return _context5.f(7);
645
+ case 8:
646
+ return _context5.a(2);
647
+ }
648
+ }, _callee5, null, [[3, 6, 7, 8]]);
649
+ }));
650
+ return function updateForm() {
651
+ return _ref7.apply(this, arguments);
652
+ };
653
+ }();
654
+ var openEditModal = function openEditModal(form) {
655
+ setEditDraft(populateEditDraft(form));
656
+ setEditFeedback('');
657
+ setShowEditModal(true);
658
+ };
659
+ var renderFieldBuilder = function renderFieldBuilder(draft, _ref8) {
660
+ var addFieldFn = _ref8.addFieldFn,
661
+ updateFieldFn = _ref8.updateFieldFn,
662
+ removeFieldFn = _ref8.removeFieldFn;
663
+ return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
664
+ className: "flex items-center justify-between mb-3"
665
+ }, /*#__PURE__*/_react["default"].createElement("h3", {
666
+ className: "text-sm font-semibold text-gray-900"
667
+ }, "Fields"), /*#__PURE__*/_react["default"].createElement("div", {
668
+ className: "flex flex-wrap gap-2"
669
+ }, ['text', 'email', 'mobile', 'textarea', 'radio', 'fileUploader'].map(function (type) {
670
+ return /*#__PURE__*/_react["default"].createElement("button", {
671
+ key: type,
672
+ type: "button",
673
+ onClick: function onClick() {
674
+ return addFieldFn(type);
675
+ },
676
+ className: "px-3 py-1 text-xs rounded-full border border-gray-300 hover:bg-gray-50"
677
+ }, "+ ", type);
678
+ }))), draft.fields.length === 0 ? /*#__PURE__*/_react["default"].createElement("div", {
679
+ className: "rounded-lg border border-dashed border-gray-300 p-6 text-center text-sm text-gray-500"
680
+ }, "Add fields using the buttons above") : /*#__PURE__*/_react["default"].createElement("div", {
681
+ className: "space-y-4"
682
+ }, draft.fields.map(function (field, index) {
683
+ return /*#__PURE__*/_react["default"].createElement("div", {
684
+ key: field.id || index,
685
+ className: "rounded-lg border border-gray-200 p-4 space-y-3"
686
+ }, /*#__PURE__*/_react["default"].createElement("div", {
687
+ className: "flex items-center justify-between"
688
+ }, /*#__PURE__*/_react["default"].createElement("span", {
689
+ className: "text-sm font-medium text-gray-700 capitalize"
690
+ }, field.type, " field"), /*#__PURE__*/_react["default"].createElement("button", {
691
+ type: "button",
692
+ onClick: function onClick() {
693
+ return removeFieldFn(index);
694
+ },
695
+ className: "text-sm text-red-600 hover:text-red-700"
696
+ }, "Remove")), /*#__PURE__*/_react["default"].createElement("div", {
697
+ className: "grid grid-cols-1 md:grid-cols-2 gap-3"
698
+ }, /*#__PURE__*/_react["default"].createElement("input", {
699
+ type: "text",
700
+ value: field.label,
701
+ onChange: function onChange(e) {
702
+ return updateFieldFn(index, {
703
+ label: e.target.value
704
+ });
705
+ },
706
+ placeholder: "Label",
707
+ className: "w-full px-3 py-2 border border-gray-300 rounded-md"
708
+ }), /*#__PURE__*/_react["default"].createElement("input", {
709
+ type: "text",
710
+ value: field.name,
711
+ onChange: function onChange(e) {
712
+ return updateFieldFn(index, {
713
+ name: slugify(e.target.value)
714
+ });
715
+ },
716
+ placeholder: "name",
717
+ className: "w-full px-3 py-2 border border-gray-300 rounded-md"
718
+ })), /*#__PURE__*/_react["default"].createElement("input", {
719
+ type: "text",
720
+ value: field.description || '',
721
+ onChange: function onChange(e) {
722
+ return updateFieldFn(index, {
723
+ description: e.target.value
724
+ });
725
+ },
726
+ placeholder: "Help text (optional, shown below the label)",
727
+ className: "w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
728
+ }), /*#__PURE__*/_react["default"].createElement("label", {
729
+ className: "flex items-center gap-2 text-sm text-gray-700"
730
+ }, /*#__PURE__*/_react["default"].createElement("input", {
731
+ type: "checkbox",
732
+ checked: !!field.required,
733
+ onChange: function onChange(e) {
734
+ return updateFieldFn(index, {
735
+ required: e.target.checked
736
+ });
737
+ }
738
+ }), "Required"), field.type === 'radio' && /*#__PURE__*/_react["default"].createElement("textarea", {
739
+ value: (field.options || []).join('\n'),
740
+ onChange: function onChange(e) {
741
+ return updateFieldFn(index, {
742
+ options: e.target.value.split('\n').map(function (option) {
743
+ return option.trim();
744
+ }).filter(Boolean)
745
+ });
746
+ },
747
+ placeholder: "One option per line",
748
+ rows: 3,
749
+ className: "w-full px-3 py-2 border border-gray-300 rounded-md"
750
+ }));
751
+ })));
752
+ };
472
753
  var handleViewForm = function handleViewForm(form) {
473
754
  setSelectedForm(form);
474
755
  setActiveTab('responses');
@@ -652,85 +933,27 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
652
933
  }, "Public form link"), /*#__PURE__*/_react["default"].createElement(FormPublicLink, {
653
934
  formName: formDraft.formName.trim(),
654
935
  compact: true
655
- })))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
656
- className: "flex items-center justify-between mb-3"
657
- }, /*#__PURE__*/_react["default"].createElement("h3", {
658
- className: "text-sm font-semibold text-gray-900"
659
- }, "Fields"), /*#__PURE__*/_react["default"].createElement("div", {
660
- className: "flex flex-wrap gap-2"
661
- }, ['text', 'email', 'mobile', 'textarea', 'radio', 'fileUploader'].map(function (type) {
662
- return /*#__PURE__*/_react["default"].createElement("button", {
663
- key: type,
664
- type: "button",
665
- onClick: function onClick() {
666
- return addField(type);
667
- },
668
- className: "px-3 py-1 text-xs rounded-full border border-gray-300 hover:bg-gray-50"
669
- }, "+ ", type);
670
- }))), formDraft.fields.length === 0 ? /*#__PURE__*/_react["default"].createElement("div", {
671
- className: "rounded-lg border border-dashed border-gray-300 p-6 text-center text-sm text-gray-500"
672
- }, "Add fields using the buttons above") : /*#__PURE__*/_react["default"].createElement("div", {
673
- className: "space-y-4"
674
- }, formDraft.fields.map(function (field, index) {
675
- return /*#__PURE__*/_react["default"].createElement("div", {
676
- key: field.id || index,
677
- className: "rounded-lg border border-gray-200 p-4 space-y-3"
678
- }, /*#__PURE__*/_react["default"].createElement("div", {
679
- className: "flex items-center justify-between"
680
- }, /*#__PURE__*/_react["default"].createElement("span", {
681
- className: "text-sm font-medium text-gray-700 capitalize"
682
- }, field.type, " field"), /*#__PURE__*/_react["default"].createElement("button", {
683
- type: "button",
684
- onClick: function onClick() {
685
- return removeField(index);
686
- },
687
- className: "text-sm text-red-600 hover:text-red-700"
688
- }, "Remove")), /*#__PURE__*/_react["default"].createElement("div", {
689
- className: "grid grid-cols-1 md:grid-cols-2 gap-3"
690
- }, /*#__PURE__*/_react["default"].createElement("input", {
691
- type: "text",
692
- value: field.label,
693
- onChange: function onChange(e) {
694
- return updateField(index, {
695
- label: e.target.value
696
- });
697
- },
698
- placeholder: "Label",
699
- className: "w-full px-3 py-2 border border-gray-300 rounded-md"
700
- }), /*#__PURE__*/_react["default"].createElement("input", {
701
- type: "text",
702
- value: field.name,
703
- onChange: function onChange(e) {
704
- return updateField(index, {
705
- name: slugify(e.target.value)
706
- });
707
- },
708
- placeholder: "name",
709
- className: "w-full px-3 py-2 border border-gray-300 rounded-md"
710
- })), /*#__PURE__*/_react["default"].createElement("label", {
711
- className: "flex items-center gap-2 text-sm text-gray-700"
712
- }, /*#__PURE__*/_react["default"].createElement("input", {
713
- type: "checkbox",
714
- checked: !!field.required,
715
- onChange: function onChange(e) {
716
- return updateField(index, {
717
- required: e.target.checked
718
- });
719
- }
720
- }), "Required"), field.type === 'radio' && /*#__PURE__*/_react["default"].createElement("textarea", {
721
- value: (field.options || []).join('\n'),
722
- onChange: function onChange(e) {
723
- return updateField(index, {
724
- options: e.target.value.split('\n').map(function (option) {
725
- return option.trim();
726
- }).filter(Boolean)
936
+ })))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
937
+ htmlFor: "formDescription",
938
+ className: "block text-sm font-medium text-gray-700 mb-1"
939
+ }, "Description (optional)"), /*#__PURE__*/_react["default"].createElement("textarea", {
940
+ id: "formDescription",
941
+ value: formDraft.description,
942
+ onChange: function onChange(e) {
943
+ return setFormDraft(function (prev) {
944
+ return _objectSpread(_objectSpread({}, prev), {}, {
945
+ description: e.target.value
727
946
  });
728
- },
729
- placeholder: "One option per line",
730
- rows: 3,
731
- className: "w-full px-3 py-2 border border-gray-300 rounded-md"
732
- }));
733
- })))), /*#__PURE__*/_react["default"].createElement("div", {
947
+ });
948
+ },
949
+ placeholder: "Instructions or context shown at the top of the public form",
950
+ rows: 3,
951
+ className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
952
+ })), renderFieldBuilder(formDraft, {
953
+ addFieldFn: addField,
954
+ updateFieldFn: updateField,
955
+ removeFieldFn: removeField
956
+ })), /*#__PURE__*/_react["default"].createElement("div", {
734
957
  className: "flex justify-end gap-4 mt-6"
735
958
  }, createdFormLink ? /*#__PURE__*/_react["default"].createElement("button", {
736
959
  type: "button",
@@ -763,7 +986,15 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
763
986
  className: "flex items-center justify-between mb-6"
764
987
  }, /*#__PURE__*/_react["default"].createElement("h2", {
765
988
  className: "text-xl font-bold text-gray-800"
766
- }, selectedForm.formTitle), /*#__PURE__*/_react["default"].createElement("button", {
989
+ }, selectedForm.formTitle), /*#__PURE__*/_react["default"].createElement("div", {
990
+ className: "flex items-center gap-2"
991
+ }, /*#__PURE__*/_react["default"].createElement("button", {
992
+ type: "button",
993
+ onClick: function onClick() {
994
+ return openEditModal(selectedForm);
995
+ },
996
+ className: "text-sm bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded-md"
997
+ }, "Edit Form"), /*#__PURE__*/_react["default"].createElement("button", {
767
998
  onClick: function onClick() {
768
999
  return setShowDetailModal(false);
769
1000
  },
@@ -778,7 +1009,7 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
778
1009
  strokeLinejoin: "round",
779
1010
  strokeWidth: 2,
780
1011
  d: "M6 18L18 6M6 6l12 12"
781
- })))), /*#__PURE__*/_react["default"].createElement("div", {
1012
+ }))))), /*#__PURE__*/_react["default"].createElement("div", {
782
1013
  className: "mb-4 rounded-lg border border-blue-100 bg-blue-50 px-4 py-3"
783
1014
  }, /*#__PURE__*/_react["default"].createElement("p", {
784
1015
  className: "text-sm font-medium text-blue-900 mb-1"
@@ -810,7 +1041,13 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
810
1041
  className: "font-medium text-gray-700"
811
1042
  }, "Form Name:"), /*#__PURE__*/_react["default"].createElement("p", {
812
1043
  className: "text-gray-900"
813
- }, selectedForm.formName))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
1044
+ }, selectedForm.formName)), selectedForm.description && /*#__PURE__*/_react["default"].createElement("div", {
1045
+ className: "md:col-span-2"
1046
+ }, /*#__PURE__*/_react["default"].createElement("p", {
1047
+ className: "font-medium text-gray-700"
1048
+ }, "Description:"), /*#__PURE__*/_react["default"].createElement("p", {
1049
+ className: "text-gray-900 whitespace-pre-wrap"
1050
+ }, selectedForm.description))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
814
1051
  className: "font-medium text-gray-700 mb-2"
815
1052
  }, "Form Fields:"), /*#__PURE__*/_react["default"].createElement("div", {
816
1053
  className: "bg-gray-50 p-4 rounded-lg"
@@ -893,6 +1130,97 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
893
1130
  }, "View Raw Data"), /*#__PURE__*/_react["default"].createElement("pre", {
894
1131
  className: "mt-2 text-xs bg-gray-50 p-3 rounded overflow-x-auto"
895
1132
  }, JSON.stringify(response, null, 2)))));
896
- }))))));
1133
+ }))))), showEditModal && /*#__PURE__*/_react["default"].createElement("div", {
1134
+ className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-[60] p-4"
1135
+ }, /*#__PURE__*/_react["default"].createElement("div", {
1136
+ className: "bg-white rounded-2xl shadow-xl p-8 w-full max-w-3xl max-h-[90vh] overflow-y-auto"
1137
+ }, /*#__PURE__*/_react["default"].createElement("h2", {
1138
+ className: "text-xl font-bold text-gray-800 mb-6"
1139
+ }, "Edit Form"), editFeedback && /*#__PURE__*/_react["default"].createElement("div", {
1140
+ className: "mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
1141
+ }, editFeedback), /*#__PURE__*/_react["default"].createElement("div", {
1142
+ className: "space-y-6"
1143
+ }, /*#__PURE__*/_react["default"].createElement("div", {
1144
+ className: "grid grid-cols-1 md:grid-cols-2 gap-4"
1145
+ }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
1146
+ htmlFor: "editFormTitle",
1147
+ className: "block text-sm font-medium text-gray-700 mb-1"
1148
+ }, "Form Title *"), /*#__PURE__*/_react["default"].createElement("input", {
1149
+ id: "editFormTitle",
1150
+ type: "text",
1151
+ value: editDraft.formTitle,
1152
+ onChange: function onChange(e) {
1153
+ return setEditDraft(function (prev) {
1154
+ return _objectSpread(_objectSpread({}, prev), {}, {
1155
+ formTitle: e.target.value
1156
+ });
1157
+ });
1158
+ },
1159
+ className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
1160
+ })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
1161
+ htmlFor: "editFormId",
1162
+ className: "block text-sm font-medium text-gray-700 mb-1"
1163
+ }, "Form ID *"), /*#__PURE__*/_react["default"].createElement("input", {
1164
+ id: "editFormId",
1165
+ type: "text",
1166
+ value: editDraft.formId,
1167
+ onChange: function onChange(e) {
1168
+ return setEditDraft(function (prev) {
1169
+ return _objectSpread(_objectSpread({}, prev), {}, {
1170
+ formId: e.target.value.toUpperCase()
1171
+ });
1172
+ });
1173
+ },
1174
+ className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
1175
+ })), /*#__PURE__*/_react["default"].createElement("div", {
1176
+ className: "md:col-span-2"
1177
+ }, /*#__PURE__*/_react["default"].createElement("label", {
1178
+ htmlFor: "editFormName",
1179
+ className: "block text-sm font-medium text-gray-700 mb-1"
1180
+ }, "Form Name (URL slug)"), /*#__PURE__*/_react["default"].createElement("input", {
1181
+ id: "editFormName",
1182
+ type: "text",
1183
+ value: editDraft.formName,
1184
+ disabled: true,
1185
+ className: "w-full px-3 py-2 border border-gray-200 rounded-md bg-gray-50 text-gray-500"
1186
+ }), /*#__PURE__*/_react["default"].createElement("p", {
1187
+ className: "text-xs text-gray-500 mt-1"
1188
+ }, "Form name cannot be changed after creation"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
1189
+ htmlFor: "editFormDescription",
1190
+ className: "block text-sm font-medium text-gray-700 mb-1"
1191
+ }, "Description (optional)"), /*#__PURE__*/_react["default"].createElement("textarea", {
1192
+ id: "editFormDescription",
1193
+ value: editDraft.description,
1194
+ onChange: function onChange(e) {
1195
+ return setEditDraft(function (prev) {
1196
+ return _objectSpread(_objectSpread({}, prev), {}, {
1197
+ description: e.target.value
1198
+ });
1199
+ });
1200
+ },
1201
+ placeholder: "Instructions or context shown at the top of the public form",
1202
+ rows: 3,
1203
+ className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
1204
+ })), renderFieldBuilder(editDraft, {
1205
+ addFieldFn: addEditField,
1206
+ updateFieldFn: updateEditField,
1207
+ removeFieldFn: removeEditField
1208
+ })), /*#__PURE__*/_react["default"].createElement("div", {
1209
+ className: "flex justify-end gap-4 mt-6"
1210
+ }, /*#__PURE__*/_react["default"].createElement("button", {
1211
+ type: "button",
1212
+ onClick: function onClick() {
1213
+ setShowEditModal(false);
1214
+ setEditFeedback('');
1215
+ },
1216
+ className: "bg-gray-300 text-gray-700 hover:bg-gray-400 px-4 py-2 rounded-md"
1217
+ }, "Cancel"), /*#__PURE__*/_react["default"].createElement("button", {
1218
+ type: "button",
1219
+ onClick: updateForm,
1220
+ disabled: isUpdating,
1221
+ className: "bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md disabled:opacity-50"
1222
+ }, isUpdating ? /*#__PURE__*/_react["default"].createElement("div", {
1223
+ className: "animate-spin h-5 w-5 mx-auto border-2 border-white border-t-transparent rounded-full"
1224
+ }) : 'Save Changes')))));
897
1225
  };
898
1226
  var _default = exports["default"] = PowrFormsAdmin;
package/dist/forms/index.js CHANGED
@@ -176,6 +176,7 @@ var PowrForm = function PowrForm(_ref) {
176
176
  label: field.label,
177
177
  required: field.required,
178
178
  error: errors[field.name],
179
+ description: field.description,
179
180
  theme: theme
180
181
  }, /*#__PURE__*/_react["default"].createElement("input", _extends({
181
182
  type: "email"
@@ -194,6 +195,7 @@ var PowrForm = function PowrForm(_ref) {
194
195
  label: field.label,
195
196
  required: field.required,
196
197
  error: errors[field.name],
198
+ description: field.description,
197
199
  theme: theme
198
200
  }, /*#__PURE__*/_react["default"].createElement("input", _extends({
199
201
  type: "text"
@@ -208,6 +210,7 @@ var PowrForm = function PowrForm(_ref) {
208
210
  label: field.label,
209
211
  required: field.required,
210
212
  error: errors[field.name],
213
+ description: field.description,
211
214
  theme: theme
212
215
  }, /*#__PURE__*/_react["default"].createElement("input", _extends({
213
216
  type: "tel",
@@ -226,7 +229,8 @@ var PowrForm = function PowrForm(_ref) {
226
229
  return /*#__PURE__*/_react["default"].createElement(InputField, {
227
230
  key: field.name,
228
231
  label: field.label,
229
- required: field.required
232
+ required: field.required,
233
+ description: field.description
230
234
  }, /*#__PURE__*/_react["default"].createElement("textarea", _extends({}, register(field.name, {
231
235
  required: field.required
232
236
  }), {
@@ -240,6 +244,7 @@ var PowrForm = function PowrForm(_ref) {
240
244
  options: field.options || [],
241
245
  register: register,
242
246
  error: errors[field.name],
247
+ description: field.description,
243
248
  theme: theme
244
249
  });
245
250
  case "custom":
@@ -267,7 +272,9 @@ var PowrForm = function PowrForm(_ref) {
267
272
  className: "block text-base font-medium mb-1"
268
273
  }, field.label, " ", field.required && /*#__PURE__*/_react["default"].createElement("span", {
269
274
  className: "text-red-600"
270
- }, "*")), /*#__PURE__*/_react["default"].createElement("input", {
275
+ }, "*")), field.description && /*#__PURE__*/_react["default"].createElement("p", {
276
+ className: "text-sm text-gray-500 mb-2"
277
+ }, field.description), /*#__PURE__*/_react["default"].createElement("input", {
271
278
  type: "file",
272
279
  accept: "image/*,application/pdf",
273
280
  onChange: function onChange(e) {
@@ -317,7 +324,9 @@ var PowrForm = function PowrForm(_ref) {
317
324
  className: "border-b-4 ".concat(borderColor, " pb-6 mb-8")
318
325
  }, /*#__PURE__*/_react["default"].createElement("h1", {
319
326
  className: "text-3xl font-bold text-gray-800"
320
- }, formSchema.formTitle)), successMessage && /*#__PURE__*/_react["default"].createElement("div", {
327
+ }, formSchema.formTitle), formSchema.description && /*#__PURE__*/_react["default"].createElement("p", {
328
+ className: "text-gray-600 mt-3 text-base leading-relaxed"
329
+ }, formSchema.description)), successMessage && /*#__PURE__*/_react["default"].createElement("div", {
321
330
  className: "mb-8 flex flex-col items-center justify-center p-6 bg-green-50 border border-green-300 rounded-lg shadow animate-fade-in"
322
331
  }, /*#__PURE__*/_react["default"].createElement("div", {
323
332
  className: "mb-2"
@@ -368,13 +377,16 @@ var InputField = function InputField(_ref4) {
368
377
  required = _ref4.required,
369
378
  error = _ref4.error,
370
379
  children = _ref4.children,
380
+ description = _ref4.description,
371
381
  _ref4$theme = _ref4.theme,
372
382
  theme = _ref4$theme === void 0 ? "purple" : _ref4$theme;
373
383
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
374
384
  className: "block text-base font-medium mb-1"
375
385
  }, label, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
376
386
  className: "text-red-600"
377
- }, "*")), children, error && /*#__PURE__*/_react["default"].createElement("p", {
387
+ }, "*")), description && /*#__PURE__*/_react["default"].createElement("p", {
388
+ className: "text-sm text-gray-500 mb-2"
389
+ }, description), children, error && /*#__PURE__*/_react["default"].createElement("p", {
378
390
  className: "text-red-600 text-sm mt-1"
379
391
  }, error.message));
380
392
  };
@@ -386,13 +398,16 @@ var RadioGroup = function RadioGroup(_ref5) {
386
398
  options = _ref5.options,
387
399
  register = _ref5.register,
388
400
  error = _ref5.error,
401
+ description = _ref5.description,
389
402
  _ref5$theme = _ref5.theme,
390
403
  theme = _ref5$theme === void 0 ? "purple" : _ref5$theme;
391
404
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
392
405
  className: "block text-base font-medium mb-2"
393
406
  }, label, " ", /*#__PURE__*/_react["default"].createElement("span", {
394
407
  className: "text-red-600"
395
- }, "*")), /*#__PURE__*/_react["default"].createElement("div", {
408
+ }, "*")), description && /*#__PURE__*/_react["default"].createElement("p", {
409
+ className: "text-sm text-gray-500 mb-2"
410
+ }, description), /*#__PURE__*/_react["default"].createElement("div", {
396
411
  className: "flex flex-col gap-3"
397
412
  }, options.map(function (option) {
398
413
  return /*#__PURE__*/_react["default"].createElement("label", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "powr-sdk-web",
3
- "version": "5.6.11",
3
+ "version": "5.6.12",
4
4
  "main": "dist/index.js",
5
5
  "scripts": {
6
6
  "build": "babel src -d dist --copy-files",