powr-sdk-web 5.6.8 → 5.6.10

package/dist/forms/admin.js

@@ -52,39 +52,43 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     _useState0 = _slicedToArray(_useState9, 2),
     isSaving = _useState0[0],
     setIsSaving = _useState0[1];
-  var _useState1 = (0, _react.useState)({
+  var _useState1 = (0, _react.useState)(''),
+    _useState10 = _slicedToArray(_useState1, 2),
+    createFeedback = _useState10[0],
+    setCreateFeedback = _useState10[1];
+  var _useState11 = (0, _react.useState)({
       formTitle: '',
       formName: '',
       formId: '',
       fields: []
     }),
-    _useState10 = _slicedToArray(_useState1, 2),
-    formDraft = _useState10[0],
-    setFormDraft = _useState10[1];
-  var _useState11 = (0, _react.useState)(null),
     _useState12 = _slicedToArray(_useState11, 2),
-    selectedForm = _useState12[0],
-    setSelectedForm = _useState12[1];
-  var _useState13 = (0, _react.useState)(false),
+    formDraft = _useState12[0],
+    setFormDraft = _useState12[1];
+  var _useState13 = (0, _react.useState)(null),
     _useState14 = _slicedToArray(_useState13, 2),
-    showDetailModal = _useState14[0],
-    setShowDetailModal = _useState14[1];
-  var _useState15 = (0, _react.useState)('responses'),
+    selectedForm = _useState14[0],
+    setSelectedForm = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
     _useState16 = _slicedToArray(_useState15, 2),
-    activeTab = _useState16[0],
-    setActiveTab = _useState16[1];
-  var _useState17 = (0, _react.useState)([]),
+    showDetailModal = _useState16[0],
+    setShowDetailModal = _useState16[1];
+  var _useState17 = (0, _react.useState)('responses'),
     _useState18 = _slicedToArray(_useState17, 2),
-    formResponses = _useState18[0],
-    setFormResponses = _useState18[1];
-  var _useState19 = (0, _react.useState)(0),
+    activeTab = _useState18[0],
+    setActiveTab = _useState18[1];
+  var _useState19 = (0, _react.useState)([]),
     _useState20 = _slicedToArray(_useState19, 2),
-    responseCount = _useState20[0],
-    setResponseCount = _useState20[1];
-  var _useState21 = (0, _react.useState)(false),
+    formResponses = _useState20[0],
+    setFormResponses = _useState20[1];
+  var _useState21 = (0, _react.useState)(0),
     _useState22 = _slicedToArray(_useState21, 2),
-    loadingResponses = _useState22[0],
-    setLoadingResponses = _useState22[1];
+    responseCount = _useState22[0],
+    setResponseCount = _useState22[1];
+  var _useState23 = (0, _react.useState)(false),
+    _useState24 = _slicedToArray(_useState23, 2),
+    loadingResponses = _useState24[0],
+    setLoadingResponses = _useState24[1];
   var fetchForms = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var _yield$apiCall, data, ok, _t;
@@ -190,6 +194,12 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
       return _ref3.apply(this, arguments);
     };
   }();
+  var notify = function notify(type, message) {
+    setCreateFeedback(message);
+    if (onFormAction) {
+      onFormAction(type, message);
+    }
+  };
   var resetFormDraft = function resetFormDraft() {
     setFormDraft({
       formTitle: '',
@@ -201,13 +211,33 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
   var slugify = function slugify(value) {
     return value.toLowerCase().trim().replace(/[^a-z0-9]+/g, '').slice(0, 32);
   };
+  var uniqueFieldName = function uniqueFieldName(label, index, fields) {
+    var taken = fields.map(function (field) {
+      return field.name;
+    }).filter(Boolean);
+    var base = slugify(label) || "field".concat(index + 1);
+    var candidate = base;
+    var suffix = 2;
+    while (taken.includes(candidate)) {
+      candidate = "".concat(base).concat(suffix);
+      suffix += 1;
+    }
+    return candidate;
+  };
   var addField = function addField(type) {
-    var index = formDraft.fields.length + 1;
     setFormDraft(function (prev) {
+      var index = prev.fields.length + 1;
+      var defaults = type === 'mobile' ? {
+        name: 'whatsapp',
+        label: 'Mobile Number'
+      } : {
+        name: "field".concat(index),
+        label: "Field ".concat(index)
+      };
       return _objectSpread(_objectSpread({}, prev), {}, {
-        fields: [].concat(_toConsumableArray(prev.fields), [_objectSpread({
-          name: "field".concat(index),
-          label: "Field ".concat(index),
+        fields: [].concat(_toConsumableArray(prev.fields), [_objectSpread(_objectSpread({
+          id: "".concat(Date.now(), "-").concat(index)
+        }, defaults), {}, {
           type: type,
           required: false
         }, type === 'radio' ? {
@@ -236,17 +266,16 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
   };
   var createForm = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-      var trimmedTitle, trimmedName, trimmedId, hasInvalidField, payload, _yield$apiCall3, result, ok, errorMessage, _t3;
+      var trimmedTitle, trimmedName, trimmedId, hasInvalidField, fieldNames, duplicateNames, usedNames, normalizedFields, payload, _yield$apiCall3, result, ok, errorMessage, _t3;
       return _regenerator().w(function (_context3) {
         while (1) switch (_context3.p = _context3.n) {
           case 0:
+            setCreateFeedback('');
             if (projectId) {
               _context3.n = 1;
               break;
             }
-            if (onFormAction) {
-              onFormAction('error', 'Project ID is required');
-            }
+            notify('error', 'Project ID is required');
             return _context3.a(2);
           case 1:
             trimmedTitle = formDraft.formTitle.trim();
@@ -256,18 +285,14 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
               _context3.n = 2;
               break;
             }
-            if (onFormAction) {
-              onFormAction('error', 'Form title, name, and ID are required');
-            }
+            notify('error', 'Form title, name, and ID are required');
             return _context3.a(2);
           case 2:
             if (!(formDraft.fields.length === 0)) {
               _context3.n = 3;
               break;
             }
-            if (onFormAction) {
-              onFormAction('error', 'Add at least one field');
-            }
+            notify('error', 'Add at least one field');
             return _context3.a(2);
           case 3:
             hasInvalidField = formDraft.fields.some(function (field) {
@@ -278,70 +303,92 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
               _context3.n = 4;
               break;
             }
-            if (onFormAction) {
-              onFormAction('error', 'Each field needs a name and label');
-            }
+            notify('error', 'Each field needs a name and label');
             return _context3.a(2);
           case 4:
+            fieldNames = formDraft.fields.map(function (field) {
+              return field.name.trim();
+            });
+            duplicateNames = fieldNames.filter(function (name, index) {
+              return fieldNames.indexOf(name) !== index;
+            });
+            if (!(duplicateNames.length > 0)) {
+              _context3.n = 5;
+              break;
+            }
+            notify('error', "Each field needs a unique name. Duplicate: ".concat(_toConsumableArray(new Set(duplicateNames)).join(', ')));
+            return _context3.a(2);
+          case 5:
             setIsSaving(true);
-            _context3.p = 5;
+            _context3.p = 6;
+            usedNames = new Set();
+            normalizedFields = formDraft.fields.map(function (field, index, allFields) {
+              var _field$name2;
+              var others = allFields.filter(function (_, i) {
+                return i !== index;
+              });
+              var name = ((_field$name2 = field.name) === null || _field$name2 === void 0 ? void 0 : _field$name2.trim()) || uniqueFieldName(field.label, index, others);
+              var candidate = name;
+              var suffix = 2;
+              while (usedNames.has(candidate)) {
+                candidate = "".concat(name).concat(suffix);
+                suffix += 1;
+              }
+              usedNames.add(candidate);
+              return _objectSpread({
+                name: candidate,
+                label: field.label.trim(),
+                type: field.type,
+                required: !!field.required
+              }, field.type === 'radio' ? {
+                options: field.options || []
+              } : {});
+            });
             payload = {
               formTitle: trimmedTitle,
               formName: trimmedName,
               formId: trimmedId,
-              fields: formDraft.fields.map(function (field) {
-                return _objectSpread({
-                  name: field.name.trim(),
-                  label: field.label.trim(),
-                  type: field.type,
-                  required: !!field.required
-                }, field.type === 'radio' ? {
-                  options: field.options || []
-                } : {});
-              })
+              fields: normalizedFields
             };
-            _context3.n = 6;
+            _context3.n = 7;
             return (0, _auth.apiCall)(apiUrl, "/forms/create-form", projectId, {
               method: 'POST',
               body: payload
             });
-          case 6:
+          case 7:
             _yield$apiCall3 = _context3.v;
             result = _yield$apiCall3.data;
             ok = _yield$apiCall3.ok;
             if (ok) {
-              _context3.n = 7;
+              _context3.n = 8;
               break;
             }
             throw new Error(result.message || 'Failed to create form');
-          case 7:
-            if (onFormAction) {
-              onFormAction('success', result.message || 'Form created successfully!');
-            }
+          case 8:
+            notify('success', result.message || 'Form created successfully!');
             resetFormDraft();
+            setCreateFeedback('');
             setShowCreateModal(false);
             fetchForms();
             if (onRefresh) {
               onRefresh();
             }
-            _context3.n = 9;
+            _context3.n = 10;
             break;
-          case 8:
-            _context3.p = 8;
+          case 9:
+            _context3.p = 9;
             _t3 = _context3.v;
             console.error('Error creating form:', _t3);
             errorMessage = _t3 instanceof Error ? _t3.message : 'Failed to create form';
-            if (onFormAction) {
-              onFormAction('error', errorMessage);
-            }
-          case 9:
-            _context3.p = 9;
-            setIsSaving(false);
-            return _context3.f(9);
+            notify('error', errorMessage);
           case 10:
+            _context3.p = 10;
+            setIsSaving(false);
+            return _context3.f(10);
+          case 11:
             return _context3.a(2);
         }
-      }, _callee3, null, [[5, 8, 9, 10]]);
+      }, _callee3, null, [[6, 9, 10, 11]]);
     }));
     return function createForm() {
       return _ref4.apply(this, arguments);
@@ -379,6 +426,7 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
   }, "Create and manage your dynamic forms")), /*#__PURE__*/_react["default"].createElement("button", {
     onClick: function onClick() {
       resetFormDraft();
+      setCreateFeedback('');
       setShowCreateModal(true);
     },
     className: "bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
@@ -442,7 +490,9 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     className: "bg-white rounded-2xl shadow-xl p-8 w-full max-w-3xl max-h-[90vh] overflow-y-auto"
   }, /*#__PURE__*/_react["default"].createElement("h2", {
     className: "text-xl font-bold text-gray-800 mb-6"
-  }, "Create New Form"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "Create New Form"), createFeedback && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
+  }, createFeedback), /*#__PURE__*/_react["default"].createElement("div", {
     className: "space-y-6"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "grid grid-cols-1 md:grid-cols-2 gap-4"
@@ -506,7 +556,7 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     className: "text-sm font-semibold text-gray-900"
   }, "Fields"), /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex flex-wrap gap-2"
-  }, ['text', 'email', 'textarea', 'radio', 'fileUploader'].map(function (type) {
+  }, ['text', 'email', 'mobile', 'textarea', 'radio', 'fileUploader'].map(function (type) {
     return /*#__PURE__*/_react["default"].createElement("button", {
       key: type,
       type: "button",
@@ -521,7 +571,7 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     className: "space-y-4"
   }, formDraft.fields.map(function (field, index) {
     return /*#__PURE__*/_react["default"].createElement("div", {
-      key: "".concat(field.name, "-").concat(index),
+      key: field.id || index,
       className: "rounded-lg border border-gray-200 p-4 space-y-3"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "flex items-center justify-between"
@@ -581,12 +631,15 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
   })))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex justify-end gap-4 mt-6"
   }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
     onClick: function onClick() {
       resetFormDraft();
+      setCreateFeedback('');
       setShowCreateModal(false);
     },
     className: "bg-gray-300 text-gray-700 hover:bg-gray-400 px-4 py-2 rounded-md"
   }, "Cancel"), /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
     onClick: createForm,
     disabled: isSaving,
     className: "bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md disabled:opacity-50"

package/dist/forms/index.js

@@ -202,6 +202,26 @@ var PowrForm = function PowrForm(_ref) {
         }), {
           className: inputClass
         })));
+      case "mobile":
+        return /*#__PURE__*/_react["default"].createElement(InputField, {
+          key: field.name,
+          label: field.label,
+          required: field.required,
+          error: errors[field.name],
+          theme: theme
+        }, /*#__PURE__*/_react["default"].createElement("input", _extends({
+          type: "tel",
+          inputMode: "tel",
+          autoComplete: "tel"
+        }, register(field.name, {
+          required: field.required,
+          pattern: {
+            value: /^[0-9+\-\s()]{8,15}$/,
+            message: "Invalid mobile number"
+          }
+        }), {
+          className: inputClass
+        })));
       case "textarea":
         return /*#__PURE__*/_react["default"].createElement(InputField, {
           key: field.name,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "powr-sdk-web",
-    "version": "5.6.8",
+    "version": "5.6.10",
     "main": "dist/index.js",
     "scripts": {
         "build": "babel src -d dist --copy-files",