powr-sdk-web 6.7.0 → 6.9.0

package/dist/forms/admin.js

@@ -672,7 +672,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', 'mobile', 'textarea', 'radio', 'fileUploader'].map(function (type) {
+    }, ['text', 'email', 'mobile', 'textarea', 'radio', 'photo', 'fileUploader'].map(function (type) {
       return /*#__PURE__*/_react["default"].createElement("button", {
         key: type,
         type: "button",
@@ -1137,7 +1137,25 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
       className: "text-sm font-medium text-gray-700"
     }, "Message"), /*#__PURE__*/_react["default"].createElement("p", {
       className: "text-gray-900 bg-gray-50 p-3 rounded whitespace-pre-wrap"
-    }, response.message)), response.paymentProofUrls && response.paymentProofUrls.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    }, response.message)), (selectedForm.fields || []).filter(function (field) {
+      return field.type === 'photo' && response[field.name];
+    }).map(function (field) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: field.name,
+        className: "space-y-1"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "text-sm font-medium text-gray-700"
+      }, field.label), /*#__PURE__*/_react["default"].createElement("a", {
+        href: response[field.name],
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "block"
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        src: response[field.name],
+        alt: field.label,
+        className: "max-h-40 rounded border border-gray-200 bg-gray-50"
+      })));
+    }), response.paymentProofUrls && response.paymentProofUrls.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
       className: "space-y-1 md:col-span-2"
     }, /*#__PURE__*/_react["default"].createElement("label", {
       className: "text-sm font-medium text-gray-700"

package/dist/forms/index.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,9 +8,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactHookForm = require("react-hook-form");
 var _axios = _interopRequireDefault(require("axios"));
 var _config = require("../config");
+var _uploader = _interopRequireDefault(require("../uploader"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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 _t3 in e) "default" !== _t3 && {}.hasOwnProperty.call(e, _t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t3)) && (i.get || i.set) ? o(f, _t3, i) : f[_t3] = e[_t3]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -27,6 +28,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var UPLOAD_FIELD_TYPES = ["photo", "fileUploader"];
 var PowrForm = function PowrForm(_ref) {
   var formName = _ref.formName,
     projectId = _ref.projectId,
@@ -37,35 +39,50 @@ var PowrForm = function PowrForm(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? "purple" : _ref$theme;
-  var _useState = (0, _react.useState)(null),
+    theme = _ref$theme === void 0 ? "purple" : _ref$theme,
+    _ref$embed = _ref.embed,
+    embed = _ref$embed === void 0 ? false : _ref$embed,
+    _ref$showHeader = _ref.showHeader,
+    showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
+    bannerUrl = _ref.bannerUrl,
+    title = _ref.title,
+    description = _ref.description,
+    _ref$requireLogin = _ref.requireLogin,
+    requireLogin = _ref$requireLogin === void 0 ? false : _ref$requireLogin,
+    _ref$isAuthenticated = _ref.isAuthenticated,
+    isAuthenticated = _ref$isAuthenticated === void 0 ? false : _ref$isAuthenticated,
+    onNeedLogin = _ref.onNeedLogin,
+    extraFields = _ref.extraFields,
+    submitLabel = _ref.submitLabel,
+    _ref$loginLabel = _ref.loginLabel,
+    loginLabel = _ref$loginLabel === void 0 ? "Sign in" : _ref$loginLabel,
+    _ref$loginMessage = _ref.loginMessage,
+    loginMessage = _ref$loginMessage === void 0 ? "Sign in to send this. Fill the questions first if you want." : _ref$loginMessage,
+    authenticatedLabel = _ref.authenticatedLabel;
+  var _useState = (0, _react.useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
-    uploadedFileUrl = _useState2[0],
-    setUploadedFileUrl = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
+    uploads = _useState2[0],
+    setUploads = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    hasSubmitted = _useState4[0],
-    setHasSubmitted = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
+    formSchema = _useState4[0],
+    setFormSchema = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
     _useState6 = _slicedToArray(_useState5, 2),
-    formSchema = _useState6[0],
-    setFormSchema = _useState6[1];
-  var _useState7 = (0, _react.useState)(true),
+    isLoading = _useState6[0],
+    setIsLoading = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    isLoading = _useState8[0],
-    setIsLoading = _useState8[1];
+    error = _useState8[0],
+    setError = _useState8[1];
   var _useState9 = (0, _react.useState)(null),
     _useState0 = _slicedToArray(_useState9, 2),
-    error = _useState0[0],
-    setError = _useState0[1];
+    successMessage = _useState0[0],
+    setSuccessMessage = _useState0[1];
   var _useState1 = (0, _react.useState)(null),
     _useState10 = _slicedToArray(_useState1, 2),
-    successMessage = _useState10[0],
-    setSuccessMessage = _useState10[1];
-  var _useState11 = (0, _react.useState)(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    submitError = _useState12[0],
-    setSubmitError = _useState12[1];
+    submitError = _useState10[0],
+    setSubmitError = _useState10[1];
   var submissionId = Math.random().toString(36).substring(2, 10);
   (0, _react.useEffect)(function () {
     var fetchFormSchema = /*#__PURE__*/function () {
@@ -116,26 +133,53 @@ var PowrForm = function PowrForm(_ref) {
     }),
     register = _useForm.register,
     handleSubmit = _useForm.handleSubmit,
+    setValue = _useForm.setValue,
     errors = _useForm.formState.errors;
+
+  // /files needs a Powr token, so a form with an upload field is login-only.
+  var hasUploadField = ((formSchema === null || formSchema === void 0 ? void 0 : formSchema.fields) || []).some(function (f) {
+    return UPLOAD_FIELD_TYPES.includes(f.type);
+  });
+  var needsLogin = Boolean(requireLogin || (formSchema === null || formSchema === void 0 ? void 0 : formSchema.requireLogin) || hasUploadField) && !isAuthenticated;
+  var setUploadedUrl = function setUploadedUrl(field, files) {
+    var url = files !== null && files !== void 0 && files.length ? files[files.length - 1].url : "";
+    setUploads(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, field.name, url));
+    });
+    setValue(field.name, url, {
+      shouldValidate: true
+    });
+  };
   var onSubmit = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(data) {
-      var finalData, response, resData, errorMsg, _errorMsg, _error$response, _errorMsg2, _t2;
+      var paymentProofUrls, finalData, response, resData, errorMsg, _errorMsg, _error$response, _errorMsg2, _t2;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
-            setHasSubmitted(true);
+            if (!needsLogin) {
+              _context2.n = 1;
+              break;
+            }
+            if (onNeedLogin) onNeedLogin();
+            return _context2.a(2);
+          case 1:
             setSubmitError(null);
             setSuccessMessage(null);
-            finalData = _objectSpread(_objectSpread({}, data), {}, {
-              paymentProofUrls: uploadedFileUrl ? [uploadedFileUrl] : [],
+            paymentProofUrls = ((formSchema === null || formSchema === void 0 ? void 0 : formSchema.fields) || []).filter(function (f) {
+              return f.type === "fileUploader" && uploads[f.name];
+            }).map(function (f) {
+              return uploads[f.name];
+            });
+            finalData = _objectSpread(_objectSpread(_objectSpread({}, data), extraFields && _typeof(extraFields) === "object" ? extraFields : {}), {}, {
+              paymentProofUrls: paymentProofUrls,
               id: submissionId,
               formTitle: formSchema === null || formSchema === void 0 ? void 0 : formSchema.formTitle,
               formName: formSchema === null || formSchema === void 0 ? void 0 : formSchema.formName
             });
-            _context2.p = 1;
-            _context2.n = 2;
+            _context2.p = 2;
+            _context2.n = 3;
             return _axios["default"].post("".concat(apiUrl, "/forms/studentform?projectId=").concat(projectId), finalData);
-          case 2:
+          case 3:
             response = _context2.v;
             resData = response.data;
             if (resData && resData.existingFormId) {
@@ -150,18 +194,18 @@ var PowrForm = function PowrForm(_ref) {
               setSubmitError(_errorMsg);
               if (onSubmitError) onSubmitError(_errorMsg);
             }
-            _context2.n = 4;
+            _context2.n = 5;
             break;
-          case 3:
-            _context2.p = 3;
+          case 4:
+            _context2.p = 4;
             _t2 = _context2.v;
             _errorMsg2 = (_t2 === null || _t2 === void 0 || (_error$response = _t2.response) === null || _error$response === void 0 || (_error$response = _error$response.data) === null || _error$response === void 0 ? void 0 : _error$response.message) || "Submission failed. Please try again.";
             setSubmitError(_errorMsg2);
             if (onSubmitError) onSubmitError(_errorMsg2);
-          case 4:
+          case 5:
             return _context2.a(2);
         }
-      }, _callee2, null, [[1, 3]]);
+      }, _callee2, null, [[2, 4]]);
     }));
     return function onSubmit(_x) {
       return _ref3.apply(this, arguments);
@@ -264,69 +308,110 @@ var PowrForm = function PowrForm(_ref) {
           })));
         }
         return null;
+      case "photo":
       case "fileUploader":
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          key: field.name,
-          className: "space-y-4"
-        }, /*#__PURE__*/_react["default"].createElement("label", {
-          className: "block text-base font-medium mb-1"
-        }, field.label, " ", field.required && /*#__PURE__*/_react["default"].createElement("span", {
-          className: "text-red-600"
-        }, "*")), field.description && /*#__PURE__*/_react["default"].createElement("p", {
-          className: "text-sm text-gray-500 mb-2"
-        }, field.description), /*#__PURE__*/_react["default"].createElement("input", {
-          type: "file",
-          accept: "image/*,application/pdf",
-          onChange: function onChange(e) {
-            var _e$target$files;
-            var file = (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0];
-            if (file) {
-              setUploadedFileUrl("uploaded-".concat(file.name));
+        {
+          var isPhoto = field.type === "photo";
+          return /*#__PURE__*/_react["default"].createElement(InputField, {
+            key: field.name,
+            label: field.label,
+            required: field.required,
+            error: errors[field.name] && {
+              message: isPhoto ? "Please add a photo." : "Please upload a file."
+            },
+            description: field.description,
+            theme: theme
+          }, /*#__PURE__*/_react["default"].createElement("input", _extends({
+            type: "hidden"
+          }, register(field.name, {
+            required: field.required
+          }))), isAuthenticated ? /*#__PURE__*/_react["default"].createElement(_uploader["default"], {
+            apiUrl: apiUrl,
+            projectId: projectId,
+            maxFiles: 1,
+            acceptedFileTypes: isPhoto ? "image/*" : "image/*,application/pdf",
+            onUploadComplete: function onUploadComplete(files) {
+              return setUploadedUrl(field, files);
+            },
+            onRemove: function onRemove(files) {
+              return setUploadedUrl(field, files);
+            },
+            onUploadError: function onUploadError() {
+              return setSubmitError("Upload failed. Please try again.");
             }
-          },
-          className: inputClass
-        }), uploadedFileUrl && /*#__PURE__*/_react["default"].createElement("p", null, "File uploaded: ", uploadedFileUrl), hasSubmitted && !uploadedFileUrl && field.required && /*#__PURE__*/_react["default"].createElement("p", {
-          className: "text-red-600 text-sm mt-1"
-        }, "Payment proof is required."));
+          }) : /*#__PURE__*/_react["default"].createElement("p", {
+            className: "text-sm text-gray-500"
+          }, "Sign in to add ", isPhoto ? "a photo" : "a file", "."));
+        }
       default:
         return null;
     }
   };
+  var shellClass = embed ? "w-full ".concat(className) : "min-h-screen ".concat(theme === "purple" ? "bg-[#f3eaff]" : "bg-".concat(theme, "-50"), " flex justify-center items-start py-12 px-4 ").concat(className);
+  var cardClass = embed ? "bg-white w-full" : "bg-white w-full max-w-3xl rounded-lg shadow-lg p-10";
   if (isLoading) {
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "min-h-screen bg-gray-50 flex justify-center items-center"
+      className: embed ? "py-8 text-center text-gray-600" : "min-h-screen bg-gray-50 flex justify-center items-center"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "text-xl text-gray-600"
     }, "Loading form..."));
   }
   if (error) {
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "min-h-screen bg-gray-50 flex justify-center items-center"
+      className: embed ? "py-8 text-center text-red-600" : "min-h-screen bg-gray-50 flex justify-center items-center"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "text-xl text-red-600"
     }, "Error: ", error));
   }
   if (!formSchema) {
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "min-h-screen bg-gray-50 flex justify-center items-center"
+      className: embed ? "py-8 text-center text-red-600" : "min-h-screen bg-gray-50 flex justify-center items-center"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "text-xl text-red-600"
     }, "No form schema found"));
   }
-  var bgColor = theme === "purple" ? "bg-[#f3eaff]" : "bg-".concat(theme, "-50");
   var borderColor = theme === "purple" ? "border-purple-600" : "border-".concat(theme, "-600");
   var buttonColor = theme === "purple" ? "bg-purple-600 hover:bg-purple-700" : "bg-".concat(theme, "-600 hover:bg-").concat(theme, "-700");
+  var heading = title || formSchema.formTitle;
+  var blurb = description || formSchema.description;
+  var banner = bannerUrl || formSchema.imageUrl;
+  var buttonText = submitLabel || (needsLogin ? "Sign in to submit" : "Submit");
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "min-h-screen ".concat(bgColor, " flex justify-center items-start py-12 px-4 ").concat(className)
+    className: shellClass
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "bg-white w-full max-w-3xl rounded-lg shadow-lg p-10"
+    className: cardClass
+  }, showHeader && banner ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "relative mb-8 overflow-hidden rounded-xl bg-slate-900 text-white"
   }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "absolute inset-0 bg-cover bg-center opacity-40",
+    style: {
+      backgroundImage: "url('".concat(banner, "')")
+    }
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/70 to-slate-900/30"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "relative px-5 py-8"
+  }, /*#__PURE__*/_react["default"].createElement("h1", {
+    className: "text-2xl font-extrabold md:text-3xl"
+  }, heading), blurb ? /*#__PURE__*/_react["default"].createElement("p", {
+    className: "mt-2 max-w-xl text-sm text-slate-200"
+  }, blurb) : null)) : null, showHeader && !banner ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "border-b-4 ".concat(borderColor, " pb-6 mb-8")
   }, /*#__PURE__*/_react["default"].createElement("h1", {
     className: "text-3xl font-bold text-gray-800"
-  }, formSchema.formTitle), formSchema.description && /*#__PURE__*/_react["default"].createElement("p", {
+  }, heading), blurb && /*#__PURE__*/_react["default"].createElement("p", {
     className: "text-gray-600 mt-3 text-base leading-relaxed"
-  }, formSchema.description)), successMessage && /*#__PURE__*/_react["default"].createElement("div", {
+  }, blurb)) : null, needsLogin ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mb-6 flex flex-col gap-3 rounded-xl border-2 border-yellow-400 bg-[#fff8d6] px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text-sm font-semibold text-slate-900"
+  }, loginMessage), onNeedLogin ? /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: onNeedLogin,
+    className: "shrink-0 rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800"
+  }, loginLabel) : null) : null, isAuthenticated && authenticatedLabel ? /*#__PURE__*/_react["default"].createElement("p", {
+    className: "mb-6 text-sm text-slate-600"
+  }, authenticatedLabel) : null, successMessage && /*#__PURE__*/_react["default"].createElement("div", {
     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"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "mb-2"
@@ -368,7 +453,7 @@ var PowrForm = function PowrForm(_ref) {
   }, "No form fields found or invalid form structure"), /*#__PURE__*/_react["default"].createElement("button", {
     type: "submit",
     className: "w-full ".concat(buttonColor, " text-white py-3 px-4 rounded-md transition-colors")
-  }, "Submit"))));
+  }, buttonText))));
 };
 
 // Input field wrapper component

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "powr-sdk-web",
-    "version": "6.7.0",
+    "version": "6.9.0",
     "main": "dist/index.js",
     "files": [
         "dist"