powr-sdk-web 6.8.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

@@ -8,6 +8,7 @@ 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); }
@@ -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,
@@ -57,34 +59,30 @@ var PowrForm = function PowrForm(_ref) {
     _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)(null),
+  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 () {
@@ -135,11 +133,26 @@ var PowrForm = function PowrForm(_ref) {
     }),
     register = _useForm.register,
     handleSubmit = _useForm.handleSubmit,
+    setValue = _useForm.setValue,
     errors = _useForm.formState.errors;
-  var needsLogin = Boolean(requireLogin || (formSchema === null || formSchema === void 0 ? void 0 : formSchema.requireLogin)) && !isAuthenticated;
+
+  // /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:
@@ -150,11 +163,15 @@ var PowrForm = function PowrForm(_ref) {
             if (onNeedLogin) onNeedLogin();
             return _context2.a(2);
           case 1:
-            setHasSubmitted(true);
             setSubmitError(null);
             setSuccessMessage(null);
+            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: uploadedFileUrl ? [uploadedFileUrl] : [],
+              paymentProofUrls: paymentProofUrls,
               id: submissionId,
               formTitle: formSchema === null || formSchema === void 0 ? void 0 : formSchema.formTitle,
               formName: formSchema === null || formSchema === void 0 ? void 0 : formSchema.formName
@@ -291,30 +308,41 @@ 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;
     }

package/package.json

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