powr-sdk-web 6.7.0 → 6.8.0

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
 });
@@ -12,6 +11,7 @@ var _config = require("../config");
 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; }
@@ -37,7 +37,26 @@ 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;
+    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)(null),
     _useState2 = _slicedToArray(_useState, 2),
     uploadedFileUrl = _useState2[0],
@@ -117,25 +136,33 @@ var PowrForm = function PowrForm(_ref) {
     register = _useForm.register,
     handleSubmit = _useForm.handleSubmit,
     errors = _useForm.formState.errors;
+  var needsLogin = Boolean(requireLogin || (formSchema === null || formSchema === void 0 ? void 0 : formSchema.requireLogin)) && !isAuthenticated;
   var onSubmit = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(data) {
       var finalData, response, resData, errorMsg, _errorMsg, _error$response, _errorMsg2, _t2;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
+            if (!needsLogin) {
+              _context2.n = 1;
+              break;
+            }
+            if (onNeedLogin) onNeedLogin();
+            return _context2.a(2);
+          case 1:
             setHasSubmitted(true);
             setSubmitError(null);
             setSuccessMessage(null);
-            finalData = _objectSpread(_objectSpread({}, data), {}, {
+            finalData = _objectSpread(_objectSpread(_objectSpread({}, data), extraFields && _typeof(extraFields) === "object" ? extraFields : {}), {}, {
               paymentProofUrls: uploadedFileUrl ? [uploadedFileUrl] : [],
               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 +177,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);
@@ -292,41 +319,71 @@ var PowrForm = function PowrForm(_ref) {
         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 +425,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.8.0",
     "main": "dist/index.js",
     "files": [
         "dist"