powr-sdk-web 5.6.9 → 5.6.11

package/dist/admin/index.js

@@ -30,6 +30,7 @@ var AdminDashboard = function AdminDashboard(_ref) {
     projectId = _ref.projectId,
     _ref$sections = _ref.sections,
     sections = _ref$sections === void 0 ? [] : _ref$sections,
+    formPublicBaseUrl = _ref.formPublicBaseUrl,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? "default" : _ref$theme;
   var _useState = (0, _react.useState)(null),
@@ -190,6 +191,7 @@ var AdminDashboard = function AdminDashboard(_ref) {
     var sectionProps = {
       apiUrl: apiUrl,
       projectId: projectId,
+      formPublicBaseUrl: formPublicBaseUrl,
       theme: theme === 'dark' ? 'dark' : 'blue'
     };
     switch (currentSection) {
@@ -272,6 +274,7 @@ var AdminDashboard = function AdminDashboard(_ref) {
 AdminDashboard.propTypes = {
   projectId: _propTypes["default"].string,
   sections: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  formPublicBaseUrl: _propTypes["default"].string,
   theme: _propTypes["default"].oneOf(['default', 'dark'])
 };
 var _default = exports["default"] = AdminDashboard;

package/dist/forms/admin.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _auth = require("../utils/auth");
-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 _t4 in e) "default" !== _t4 && {}.hasOwnProperty.call(e, _t4) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t4)) && (i.get || i.set) ? o(f, _t4, i) : f[_t4] = e[_t4]); return f; })(e, t); }
+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); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 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."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
@@ -30,6 +30,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
   var projectId = _ref.projectId,
     apiUrl = _ref.apiUrl,
+    formPublicBaseUrl = _ref.formPublicBaseUrl,
     onFormAction = _ref.onFormAction,
     onRefresh = _ref.onRefresh;
   var _useState = (0, _react.useState)([]),
@@ -56,39 +57,47 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     _useState10 = _slicedToArray(_useState1, 2),
     createFeedback = _useState10[0],
     setCreateFeedback = _useState10[1];
-  var _useState11 = (0, _react.useState)({
+  var _useState11 = (0, _react.useState)(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    createdFormLink = _useState12[0],
+    setCreatedFormLink = _useState12[1];
+  var _useState13 = (0, _react.useState)(''),
+    _useState14 = _slicedToArray(_useState13, 2),
+    copiedFormName = _useState14[0],
+    setCopiedFormName = _useState14[1];
+  var _useState15 = (0, _react.useState)({
       formTitle: '',
       formName: '',
       formId: '',
       fields: []
     }),
-    _useState12 = _slicedToArray(_useState11, 2),
-    formDraft = _useState12[0],
-    setFormDraft = _useState12[1];
-  var _useState13 = (0, _react.useState)(null),
-    _useState14 = _slicedToArray(_useState13, 2),
-    selectedForm = _useState14[0],
-    setSelectedForm = _useState14[1];
-  var _useState15 = (0, _react.useState)(false),
     _useState16 = _slicedToArray(_useState15, 2),
-    showDetailModal = _useState16[0],
-    setShowDetailModal = _useState16[1];
-  var _useState17 = (0, _react.useState)('responses'),
+    formDraft = _useState16[0],
+    setFormDraft = _useState16[1];
+  var _useState17 = (0, _react.useState)(null),
     _useState18 = _slicedToArray(_useState17, 2),
-    activeTab = _useState18[0],
-    setActiveTab = _useState18[1];
-  var _useState19 = (0, _react.useState)([]),
+    selectedForm = _useState18[0],
+    setSelectedForm = _useState18[1];
+  var _useState19 = (0, _react.useState)(false),
     _useState20 = _slicedToArray(_useState19, 2),
-    formResponses = _useState20[0],
-    setFormResponses = _useState20[1];
-  var _useState21 = (0, _react.useState)(0),
+    showDetailModal = _useState20[0],
+    setShowDetailModal = _useState20[1];
+  var _useState21 = (0, _react.useState)('responses'),
     _useState22 = _slicedToArray(_useState21, 2),
-    responseCount = _useState22[0],
-    setResponseCount = _useState22[1];
-  var _useState23 = (0, _react.useState)(false),
+    activeTab = _useState22[0],
+    setActiveTab = _useState22[1];
+  var _useState23 = (0, _react.useState)([]),
     _useState24 = _slicedToArray(_useState23, 2),
-    loadingResponses = _useState24[0],
-    setLoadingResponses = _useState24[1];
+    formResponses = _useState24[0],
+    setFormResponses = _useState24[1];
+  var _useState25 = (0, _react.useState)(0),
+    _useState26 = _slicedToArray(_useState25, 2),
+    responseCount = _useState26[0],
+    setResponseCount = _useState26[1];
+  var _useState27 = (0, _react.useState)(false),
+    _useState28 = _slicedToArray(_useState27, 2),
+    loadingResponses = _useState28[0],
+    setLoadingResponses = _useState28[1];
   var fetchForms = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var _yield$apiCall, data, ok, _t;
@@ -200,7 +209,75 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
       onFormAction(type, message);
     }
   };
+  var getFormPublicUrl = function getFormPublicUrl(formName) {
+    if (!formName) return '';
+    var base = (formPublicBaseUrl === null || formPublicBaseUrl === void 0 ? void 0 : formPublicBaseUrl.replace(/\/$/, '')) || (typeof window !== 'undefined' ? "".concat(window.location.origin, "/forms") : '/forms');
+    return "".concat(base, "?id=").concat(encodeURIComponent(formName));
+  };
+  var copyFormLink = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(formName, event) {
+      var _event$stopPropagatio;
+      var url, _t3;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.p = _context3.n) {
+          case 0:
+            event === null || event === void 0 || (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 || _event$stopPropagatio.call(event);
+            url = getFormPublicUrl(formName);
+            if (url) {
+              _context3.n = 1;
+              break;
+            }
+            return _context3.a(2);
+          case 1:
+            _context3.p = 1;
+            _context3.n = 2;
+            return navigator.clipboard.writeText(url);
+          case 2:
+            setCopiedFormName(formName);
+            setTimeout(function () {
+              return setCopiedFormName('');
+            }, 2000);
+            _context3.n = 4;
+            break;
+          case 3:
+            _context3.p = 3;
+            _t3 = _context3.v;
+            notify('error', 'Could not copy link');
+          case 4:
+            return _context3.a(2);
+        }
+      }, _callee3, null, [[1, 3]]);
+    }));
+    return function copyFormLink(_x2, _x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var FormPublicLink = function FormPublicLink(_ref5) {
+    var formName = _ref5.formName,
+      _ref5$compact = _ref5.compact,
+      compact = _ref5$compact === void 0 ? false : _ref5$compact;
+    var url = getFormPublicUrl(formName);
+    if (!url) return null;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex items-center gap-2 ".concat(compact ? 'mt-1' : 'mt-2'),
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }, /*#__PURE__*/_react["default"].createElement("a", {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "text-xs text-blue-600 hover:text-blue-800 underline truncate max-w-md"
+    }, url), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "button",
+      onClick: function onClick(e) {
+        return copyFormLink(formName, e);
+      },
+      className: "shrink-0 text-xs text-gray-600 hover:text-gray-900 border border-gray-300 rounded px-2 py-0.5"
+    }, copiedFormName === formName ? 'Copied!' : 'Copy'));
+  };
   var resetFormDraft = function resetFormDraft() {
+    setCreatedFormLink('');
     setFormDraft({
       formTitle: '',
       formName: '',
@@ -225,12 +302,19 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     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' ? {
@@ -258,46 +342,46 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     });
   };
   var createForm = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-      var trimmedTitle, trimmedName, trimmedId, hasInvalidField, fieldNames, duplicateNames, payload, _yield$apiCall3, result, ok, errorMessage, _t3;
-      return _regenerator().w(function (_context3) {
-        while (1) switch (_context3.p = _context3.n) {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+      var trimmedTitle, trimmedName, trimmedId, hasInvalidField, fieldNames, duplicateNames, usedNames, normalizedFields, payload, _yield$apiCall3, result, ok, errorMessage, _t4;
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.p = _context4.n) {
           case 0:
             setCreateFeedback('');
             if (projectId) {
-              _context3.n = 1;
+              _context4.n = 1;
               break;
             }
             notify('error', 'Project ID is required');
-            return _context3.a(2);
+            return _context4.a(2);
           case 1:
             trimmedTitle = formDraft.formTitle.trim();
             trimmedName = formDraft.formName.trim();
             trimmedId = formDraft.formId.trim();
             if (!(!trimmedTitle || !trimmedName || !trimmedId)) {
-              _context3.n = 2;
+              _context4.n = 2;
               break;
             }
             notify('error', 'Form title, name, and ID are required');
-            return _context3.a(2);
+            return _context4.a(2);
           case 2:
             if (!(formDraft.fields.length === 0)) {
-              _context3.n = 3;
+              _context4.n = 3;
               break;
             }
             notify('error', 'Add at least one field');
-            return _context3.a(2);
+            return _context4.a(2);
           case 3:
             hasInvalidField = formDraft.fields.some(function (field) {
               var _field$name, _field$label;
               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());
             });
             if (!hasInvalidField) {
-              _context3.n = 4;
+              _context4.n = 4;
               break;
             }
             notify('error', 'Each field needs a name and label');
-            return _context3.a(2);
+            return _context4.a(2);
           case 4:
             fieldNames = formDraft.fields.map(function (field) {
               return field.name.trim();
@@ -306,71 +390,83 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
               return fieldNames.indexOf(name) !== index;
             });
             if (!(duplicateNames.length > 0)) {
-              _context3.n = 5;
+              _context4.n = 5;
               break;
             }
             notify('error', "Each field needs a unique name. Duplicate: ".concat(_toConsumableArray(new Set(duplicateNames)).join(', ')));
-            return _context3.a(2);
+            return _context4.a(2);
           case 5:
             setIsSaving(true);
-            _context3.p = 6;
+            _context4.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 = 7;
+            _context4.n = 7;
             return (0, _auth.apiCall)(apiUrl, "/forms/create-form", projectId, {
               method: 'POST',
               body: payload
             });
           case 7:
-            _yield$apiCall3 = _context3.v;
+            _yield$apiCall3 = _context4.v;
             result = _yield$apiCall3.data;
             ok = _yield$apiCall3.ok;
             if (ok) {
-              _context3.n = 8;
+              _context4.n = 8;
               break;
             }
             throw new Error(result.message || 'Failed to create form');
           case 8:
             notify('success', result.message || 'Form created successfully!');
-            resetFormDraft();
-            setCreateFeedback('');
-            setShowCreateModal(false);
+            setCreatedFormLink(getFormPublicUrl(trimmedName));
             fetchForms();
             if (onRefresh) {
               onRefresh();
             }
-            _context3.n = 10;
+            _context4.n = 10;
             break;
           case 9:
-            _context3.p = 9;
-            _t3 = _context3.v;
-            console.error('Error creating form:', _t3);
-            errorMessage = _t3 instanceof Error ? _t3.message : 'Failed to create form';
+            _context4.p = 9;
+            _t4 = _context4.v;
+            console.error('Error creating form:', _t4);
+            errorMessage = _t4 instanceof Error ? _t4.message : 'Failed to create form';
             notify('error', errorMessage);
           case 10:
-            _context3.p = 10;
+            _context4.p = 10;
             setIsSaving(false);
-            return _context3.f(10);
+            return _context4.f(10);
           case 11:
-            return _context3.a(2);
+            return _context4.a(2);
         }
-      }, _callee3, null, [[6, 9, 10, 11]]);
+      }, _callee4, null, [[6, 9, 10, 11]]);
     }));
     return function createForm() {
-      return _ref4.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   var handleViewForm = function handleViewForm(form) {
@@ -460,7 +556,10 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
       className: "text-xs text-gray-400"
     }, "ID: ", form.formId), /*#__PURE__*/_react["default"].createElement("p", {
       className: "text-xs text-gray-400"
-    }, "Name: ", form.formName)))), /*#__PURE__*/_react["default"].createElement("div", {
+    }, "Name: ", form.formName), /*#__PURE__*/_react["default"].createElement(FormPublicLink, {
+      formName: form.formName,
+      compact: true
+    })))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "text-sm text-gray-500"
     }, ((_form$fields = form.fields) === null || _form$fields === void 0 ? void 0 : _form$fields.length) || 0, " fields"));
   })))), showCreateModal && /*#__PURE__*/_react["default"].createElement("div", {
@@ -469,9 +568,26 @@ 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"), createFeedback && /*#__PURE__*/_react["default"].createElement("div", {
+  }, "Create New Form"), createFeedback && !createdFormLink && /*#__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", {
+  }, createFeedback), createdFormLink && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mb-4 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 space-y-2"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "font-medium"
+  }, "Form created! Share this link:"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex flex-wrap items-center gap-2"
+  }, /*#__PURE__*/_react["default"].createElement("a", {
+    href: createdFormLink,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "text-blue-700 underline break-all"
+  }, createdFormLink), /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return copyFormLink(formDraft.formName.trim());
+    },
+    className: "text-xs border border-green-300 rounded px-2 py-1 bg-white"
+  }, "Copy link"))), !createdFormLink && /*#__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"
@@ -529,13 +645,20 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
   }), /*#__PURE__*/_react["default"].createElement("p", {
     className: "text-xs text-gray-500 mt-1"
-  }, "Used in URLs like `/forms?id=workshopform`"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+  }, "Used in URLs like `/forms?id=workshopform`"), formDraft.formName.trim() && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mt-2 rounded-md border border-blue-100 bg-blue-50 px-3 py-2"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text-xs font-medium text-blue-900 mb-1"
+  }, "Public form link"), /*#__PURE__*/_react["default"].createElement(FormPublicLink, {
+    formName: formDraft.formName.trim(),
+    compact: true
+  })))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex items-center justify-between mb-3"
   }, /*#__PURE__*/_react["default"].createElement("h3", {
     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",
@@ -550,7 +673,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"
@@ -568,12 +691,8 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
       type: "text",
       value: field.label,
       onChange: function onChange(e) {
-        var label = e.target.value;
-        updateField(index, {
-          label: label,
-          name: uniqueFieldName(label, index, formDraft.fields.filter(function (_, i) {
-            return i !== index;
-          }))
+        return updateField(index, {
+          label: e.target.value
         });
       },
       placeholder: "Label",
@@ -613,7 +732,15 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     }));
   })))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex justify-end gap-4 mt-6"
-  }, /*#__PURE__*/_react["default"].createElement("button", {
+  }, createdFormLink ? /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      resetFormDraft();
+      setCreateFeedback('');
+      setShowCreateModal(false);
+    },
+    className: "bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md"
+  }, "Done") : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
     onClick: function onClick() {
       resetFormDraft();
@@ -628,7 +755,7 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     className: "bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md disabled:opacity-50"
   }, isSaving ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "animate-spin h-5 w-5 mx-auto border-2 border-white border-t-transparent rounded-full"
-  }) : 'Create Form')))), showDetailModal && selectedForm && /*#__PURE__*/_react["default"].createElement("div", {
+  }) : 'Create Form'))))), showDetailModal && selectedForm && /*#__PURE__*/_react["default"].createElement("div", {
     className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "bg-white rounded-2xl shadow-xl p-8 w-full max-w-4xl max-h-[90vh] overflow-y-auto"
@@ -652,6 +779,12 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     strokeWidth: 2,
     d: "M6 18L18 6M6 6l12 12"
   })))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mb-4 rounded-lg border border-blue-100 bg-blue-50 px-4 py-3"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text-sm font-medium text-blue-900 mb-1"
+  }, "Public form link"), /*#__PURE__*/_react["default"].createElement(FormPublicLink, {
+    formName: selectedForm.formName
+  })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "mb-4"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex space-x-4 border-b border-gray-200"

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.9",
+    "version": "5.6.11",
     "main": "dist/index.js",
     "scripts": {
         "build": "babel src -d dist --copy-files",