oa-componentbook 1.0.1-stage.45 → 1.0.1-stage.451

package/build/widgets/oa-widget-track-shipment-list/TrackShipmentWidgetList.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _fn = require("./fn");
+var _TrackShipmentWidget = _interopRequireDefault(require("../oa-widget-track-shipment/TrackShipmentWidget"));
+var _Accordion = _interopRequireDefault(require("../../components/oa-component-accordion/Accordion"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function TrackShipmentWidgetList(_ref) {
+  var _assignments$map;
+  let {
+    shipmentData,
+    onChange
+  } = _ref;
+  const assignments = (shipmentData === null || shipmentData === void 0 ? void 0 : shipmentData.assignments) || [];
+  if (assignments.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(_TrackShipmentWidget.default, (0, _fn.getSingleShipmentHistory)(shipmentData));
+  }
+  if (assignments.length === 1) {
+    return /*#__PURE__*/_react.default.createElement(_TrackShipmentWidget.default, (0, _fn.getSingleShipmentHistory)(assignments[0]));
+  }
+  const lastReassignmentId = assignments && assignments.length > 0 ? assignments[assignments.length - 1].assignmentId || 0 : 0;
+  return assignments === null || assignments === void 0 || (_assignments$map = assignments.map) === null || _assignments$map === void 0 ? void 0 : _assignments$map.call(assignments, (item, index) => {
+    const {
+      assignmentId,
+      assignmentDate,
+      assignmentClosedTime,
+      status
+    } = item !== null && item !== void 0 ? item : {};
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-bottom-16",
+      key: assignmentId
+    }, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+      defaultActiveKey: lastReassignmentId,
+      activeKey: assignmentId,
+      body: /*#__PURE__*/_react.default.createElement(_TrackShipmentWidget.default, (0, _fn.getSingleShipmentHistory)(item)),
+      headerText: (0, _fn.headerText)(index, assignmentDate, assignmentClosedTime, status)
+    }));
+  });
+}
+const HistoryPropType = _propTypes.default.shape({
+  shipmentStatus: _propTypes.default.string.isRequired,
+  fromDate: _propTypes.default.string.isRequired,
+  toDate: _propTypes.default.string.isRequired,
+  partnerStatus: _propTypes.default.string,
+  customerDisplayStatus: _propTypes.default.string.isRequired,
+  oneassistDisplayStatus: _propTypes.default.string.isRequired,
+  stageConsistent: _propTypes.default.bool.isRequired
+});
+const AssignmentPropType = _propTypes.default.shape({
+  assignmentDate: _propTypes.default.number.isRequired,
+  assignmentClosedTime: _propTypes.default.number.isRequired,
+  logisticPartnerName: _propTypes.default.string.isRequired,
+  assignmentId: _propTypes.default.number.isRequired,
+  logisticPartnerRefNum: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  originAddressLine1: _propTypes.default.string.isRequired,
+  originDistrict: _propTypes.default.string.isRequired,
+  originPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  destAddressLine1: _propTypes.default.string.isRequired,
+  destDistrict: _propTypes.default.string,
+  destPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  history: _propTypes.default.arrayOf(HistoryPropType).isRequired,
+  origAddressFullName: _propTypes.default.string.isRequired,
+  destAddressFullName: _propTypes.default.string.isRequired,
+  assignments: _propTypes.default.arrayOf(_propTypes.default.shape({
+    logisticPartnerRefNum: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    originAddressLine1: _propTypes.default.string.isRequired,
+    originDistrict: _propTypes.default.string.isRequired,
+    originPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    destAddressLine1: _propTypes.default.string.isRequired,
+    destDistrict: _propTypes.default.string,
+    destPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    history: _propTypes.default.arrayOf(HistoryPropType).isRequired,
+    origAddressFullName: _propTypes.default.string.isRequired,
+    destAddressFullName: _propTypes.default.string.isRequired,
+    assignments: _propTypes.default.array // Placeholder to break recursion
+  }))
+});
+TrackShipmentWidgetList.propTypes = {
+  shipmentData: _propTypes.default.shape({
+    logisticPartnerRefNum: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    originAddressLine1: _propTypes.default.string.isRequired,
+    originDistrict: _propTypes.default.string.isRequired,
+    originPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    destAddressLine1: _propTypes.default.string.isRequired,
+    destDistrict: _propTypes.default.string,
+    destPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    history: _propTypes.default.arrayOf(HistoryPropType).isRequired,
+    origAddressFullName: _propTypes.default.string.isRequired,
+    destAddressFullName: _propTypes.default.string.isRequired,
+    assignments: _propTypes.default.arrayOf(AssignmentPropType)
+  }),
+  onChange: _propTypes.default.func
+};
+TrackShipmentWidgetList.defaultProps = {
+  shipmentData: {},
+  onChange: () => {}
+};
+var _default = exports.default = TrackShipmentWidgetList;

package/build/widgets/oa-widget-track-shipment-list/fn.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isActive = exports.headerText = exports.getSingleShipmentHistory = exports.getDateString = exports.getCurrentShipmentLabel = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function numberToOrdinal(number) {
+  const suffixes = ['th', 'st', 'nd', 'rd'];
+  const value = number % 100;
+  const suffix = value >= 11 && value <= 13 ? suffixes[0] // 11th, 12th, 13th
+  : suffixes[number % 10] || suffixes[0]; // 1st, 2nd, 3rd, others
+  return "".concat(number).concat(suffix); // Use template literal correctly
+}
+const getDateFromEpoch = date => {
+  if (!date) {
+    return '';
+  }
+  const dateObj = new Date(date);
+  const day = dateObj.getDate();
+  const month = dateObj.getMonth();
+  const year = dateObj.getFullYear();
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  return "".concat(day, " ").concat(months[month], " ").concat(year);
+};
+const getDateString = (startTime, endTime) => {
+  const startDate = getDateFromEpoch(startTime);
+  const endDate = getDateFromEpoch(endTime);
+  if (startDate === '' && endDate === '') {
+    return '';
+  }
+  if (endDate === '') {
+    return startDate;
+  }
+  return "".concat(startDate, " - ").concat(endDate);
+};
+exports.getDateString = getDateString;
+const getCurrentShipmentLabel = number => {
+  const ordinalNumber = numberToOrdinal(number);
+  return "".concat(ordinalNumber, " Shipment");
+};
+exports.getCurrentShipmentLabel = getCurrentShipmentLabel;
+const showNewLineChar = addressDetail => {
+  var _splitedAddress$map;
+  const splitedAddress = addressDetail === null || addressDetail === void 0 ? void 0 : addressDetail.split('\n');
+  if ((splitedAddress === null || splitedAddress === void 0 ? void 0 : splitedAddress.length) === 1) return addressDetail;
+  return (_splitedAddress$map = splitedAddress.map((title, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title, index === 0 && /*#__PURE__*/_react.default.createElement("br", null)))) !== null && _splitedAddress$map !== void 0 ? _splitedAddress$map : '';
+};
+const isActive = time => time === null;
+exports.isActive = isActive;
+const headerText = (index, reassignmentTime, modifiedTime, status) => "".concat(getCurrentShipmentLabel(index + 1), " | ").concat(getDateString(reassignmentTime, modifiedTime)).concat(isActive(modifiedTime) ? ' - Present' : '');
+exports.headerText = headerText;
+const getSingleShipmentHistory = item => {
+  var _item$history;
+  return {
+    partnerName: item === null || item === void 0 ? void 0 : item.logisticPartnerName,
+    errorReason: item === null || item === void 0 ? void 0 : item.failureReason,
+    awbNumber: item === null || item === void 0 ? void 0 : item.logisticPartnerRefNum,
+    fromAddress: {
+      heading: 'From Address:',
+      addressLine1: item === null || item === void 0 ? void 0 : item.origAddressFullName,
+      addressLine2: showNewLineChar(item === null || item === void 0 ? void 0 : item.originAddressLine1),
+      pincode: item === null || item === void 0 ? void 0 : item.originPincode,
+      city: item === null || item === void 0 ? void 0 : item.originDistrict,
+      landmark: item === null || item === void 0 ? void 0 : item.originLandmark,
+      state: item === null || item === void 0 ? void 0 : item.originState
+    },
+    toAddress: {
+      heading: 'To Address:',
+      addressLine1: item === null || item === void 0 ? void 0 : item.destAddressFullName,
+      addressLine2: showNewLineChar(item === null || item === void 0 ? void 0 : item.destAddressLine1),
+      pincode: item === null || item === void 0 ? void 0 : item.destPincode,
+      city: item === null || item === void 0 ? void 0 : item.destDistrict,
+      landmark: item === null || item === void 0 ? void 0 : item.destLandmark,
+      state: item === null || item === void 0 ? void 0 : item.destState
+    },
+    tableData: (_item$history = item === null || item === void 0 ? void 0 : item.history) !== null && _item$history !== void 0 ? _item$history : []
+  };
+};
+exports.getSingleShipmentHistory = getSingleShipmentHistory;

package/build/widgets/oa-widget-user-management/UserManagementWidget.js

@@ -0,0 +1,407 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.regexp.constructor.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.to-string.js");
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _EditOutlined = _interopRequireDefault(require("@material-ui/icons/EditOutlined"));
+var _DeleteOutlineOutlined = _interopRequireDefault(require("@material-ui/icons/DeleteOutlineOutlined"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
+var _CustomSelect = _interopRequireDefault(require("../../components/oa-component-select/CustomSelect"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
+var _CustomNotification = _interopRequireDefault(require("../../components/oa-component-notification/CustomNotification"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* eslint-disable */
+function _default(_ref) {
+  var _drawer$data, _activeDrawerData$mis;
+  let {
+    form,
+    fieldName = "users",
+    initialData = [],
+    fields,
+    disabled = false,
+    customPageModal,
+    addUserClick,
+    deleteUserClick,
+    editUserClick,
+    misc,
+    drawer
+  } = _ref;
+  const finalFields = fields || [];
+  const [editingUserId, setEditingUserId] = (0, _react.useState)(null);
+  const [addingUser, setAddingUser] = (0, _react.useState)(false);
+  const [deleteModalVisible, setDeleteModalVisible] = (0, _react.useState)(false);
+  const [userToDelete, setUserToDelete] = (0, _react.useState)(null);
+  const notificationRef = (0, _react.useRef)(null);
+
+  // Use local state for users, initialized from initialData only
+  const [users, setUsers] = (0, _react.useState)(() => {
+    return Array.isArray(initialData) ? initialData : [];
+  });
+  const openNotification = (0, _react.useCallback)(params => notificationRef.current.openNotification(params), []);
+  const showErrorNotification = message => {
+    openNotification({
+      description: message,
+      type: "failure",
+      mode: "dark",
+      showIcon: true,
+      placement: "bottomRight"
+    });
+  };
+  const showSuccessNotification = message => {
+    openNotification({
+      description: message,
+      type: "success",
+      mode: "dark",
+      showIcon: true,
+      placement: "bottomRight"
+    });
+  };
+
+  // Update both local state and form state
+  const updateUsers = newUsers => {
+    setUsers(newUsers);
+    form.setFieldsValue({
+      [fieldName]: newUsers
+    });
+  };
+
+  // Sync users state with form and initialData
+  (0, _react.useEffect)(() => {
+    const defaultUsers = Array.isArray(initialData) ? initialData : [];
+    setUsers(defaultUsers);
+    form.setFieldsValue({
+      [fieldName]: defaultUsers
+    });
+  }, [initialData, fieldName, form]);
+
+  // Reset form state when drawer closes or opens to ensure fresh context
+  (0, _react.useEffect)(() => {
+    if (drawer && drawer.visible === false) {
+      // Reset adding/editing state when drawer closes
+      setAddingUser(false);
+      setEditingUserId(null);
+      setDeleteModalVisible(false);
+      setUserToDelete(null);
+
+      // Clear form fields
+      const clearData = {};
+      finalFields.forEach(field => {
+        clearData["".concat(fieldName, "_").concat(field.key)] = "";
+      });
+      form.setFieldsValue(clearData);
+    }
+  }, [drawer === null || drawer === void 0 ? void 0 : drawer.visible, form, fieldName, finalFields]);
+
+  // Access branchId dynamically from drawer data using active drawer key
+  const activeDrawerData = drawer === null || drawer === void 0 || (_drawer$data = drawer.data) === null || _drawer$data === void 0 ? void 0 : _drawer$data[drawer === null || drawer === void 0 ? void 0 : drawer.active];
+  const branchId = activeDrawerData === null || activeDrawerData === void 0 || (_activeDrawerData$mis = activeDrawerData.misc) === null || _activeDrawerData$mis === void 0 ? void 0 : _activeDrawerData$mis.branchId;
+  const handleEdit = user => {
+    setEditingUserId(user.id);
+    setAddingUser(false);
+
+    // Set form values for editing
+    const editData = {};
+    finalFields.forEach(field => {
+      editData["".concat(fieldName, "_").concat(field.key)] = user[field.key] || "";
+    });
+    form.setFieldsValue(editData);
+  };
+  const handleAdd = () => {
+    setAddingUser(true);
+    setEditingUserId(null);
+
+    // Clear form values for adding
+    const clearData = {};
+    finalFields.forEach(field => {
+      clearData["".concat(fieldName, "_").concat(field.key)] = "";
+    });
+    form.setFieldsValue(clearData);
+  };
+  const handleSave = async () => {
+    // Validate only the user management fields
+    const fieldNames = finalFields.map(field => "".concat(fieldName, "_").concat(field.key));
+    try {
+      const values = await form.validateFields(fieldNames);
+
+      // Extract user data from form values
+      const userData = {};
+      finalFields.forEach(field => {
+        userData[field.key] = values["".concat(fieldName, "_").concat(field.key)];
+      });
+      if (editingUserId) {
+        // Update existing user
+        if (editUserClick) {
+          const {
+            error,
+            data
+          } = await editUserClick(editingUserId, userData, misc);
+          if (error) {
+            showErrorNotification(error);
+          } else {
+            const updatedUsers = users.map(user => user.id === editingUserId ? _objectSpread(_objectSpread({}, user), userData) : user);
+            updateUsers(updatedUsers);
+            setEditingUserId(null);
+            showSuccessNotification(data === null || data === void 0 ? void 0 : data.message);
+            // Clear the form fields only if operation was successful
+            const clearData = {};
+            finalFields.forEach(field => {
+              clearData["".concat(fieldName, "_").concat(field.key)] = "";
+            });
+            form.setFieldsValue(clearData);
+          }
+        }
+      } else if (addingUser) {
+        // Add new user
+        if (addUserClick) {
+          console.log("userData", userData);
+          console.log("misc", misc);
+          console.log("branchId", branchId);
+          const {
+            error,
+            data
+          } = await addUserClick(userData, misc, branchId);
+          if (error) {
+            showErrorNotification(error);
+          } else {
+            var _data$data;
+            const newUser = _objectSpread({
+              id: data === null || data === void 0 || (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.userId
+            }, userData);
+            const updatedUsers = [...users, newUser];
+            updateUsers(updatedUsers);
+            setAddingUser(false);
+            showSuccessNotification(data === null || data === void 0 ? void 0 : data.message);
+            // Clear the form fields only if operation was successful
+            const clearData = {};
+            finalFields.forEach(field => {
+              clearData["".concat(fieldName, "_").concat(field.key)] = "";
+            });
+            form.setFieldsValue(clearData);
+          }
+        }
+      }
+    } catch (errorInfo) {
+      console.log("Form validation failed:", errorInfo);
+    }
+  };
+  const handleCancel = () => {
+    setEditingUserId(null);
+    setAddingUser(false);
+
+    // Clear only the user management form fields
+    const clearData = {};
+    finalFields.forEach(field => {
+      clearData["".concat(fieldName, "_").concat(field.key)] = "";
+    });
+    form.setFieldsValue(clearData);
+  };
+  const handleDelete = userId => {
+    setUserToDelete(userId);
+    setDeleteModalVisible(true);
+  };
+  const confirmDelete = async () => {
+    if (userToDelete) {
+      if (deleteUserClick) {
+        const {
+          error,
+          data
+        } = await deleteUserClick(userToDelete);
+        if (error) {
+          showErrorNotification(error);
+          setDeleteModalVisible(false);
+        } else {
+          const updatedUsers = users.filter(user => user.id !== userToDelete);
+          updateUsers(updatedUsers);
+          setDeleteModalVisible(false);
+          showSuccessNotification(data === null || data === void 0 ? void 0 : data.message);
+          setUserToDelete(null);
+        }
+      }
+    }
+  };
+  const cancelDelete = () => {
+    setDeleteModalVisible(false);
+    setUserToDelete(null);
+  };
+  const canDelete = users.length > 1;
+  const isEditing = editingUserId !== null || addingUser;
+
+  // Process rules to handle checkValidator structure (similar to FormWidget)
+  const processRules = rules => {
+    if (!rules || !Array.isArray(rules)) {
+      return rules;
+    }
+    return rules.map(r => {
+      // If rule has checkValidator, extract the nested rule object
+      if (r !== null && r !== void 0 && r.checkValidator && r !== null && r !== void 0 && r.rule) {
+        let processedRule = _objectSpread({}, r.rule);
+
+        // Handle pattern conversion if it's a string
+        if (processedRule.pattern && typeof processedRule.pattern === "string") {
+          processedRule.pattern = new RegExp(processedRule.pattern);
+        }
+        return processedRule;
+      }
+
+      // Return rule as-is if it doesn't have checkValidator structure
+      return r;
+    });
+  };
+  const renderFormField = field => {
+    var _field$options;
+    const fieldNameWithPrefix = "".concat(fieldName, "_").concat(field.key);
+    const processedRules = processRules(field.rules);
+    switch (field.widget || field.type) {
+      case "input":
+        return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+          name: fieldNameWithPrefix,
+          label: field.label,
+          rules: processedRules,
+          style: {
+            marginBottom: 16
+          }
+        }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+          placeholder: field.placeholder || "Enter ".concat(field.label.toLowerCase())
+        }));
+      case "select":
+        return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+          name: fieldNameWithPrefix,
+          label: field.label,
+          rules: processedRules,
+          style: {
+            marginBottom: 16
+          }
+        }, /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+          placeholder: field.placeholder || "Select ".concat(field.label.toLowerCase()),
+          options: ((_field$options = field.options) === null || _field$options === void 0 ? void 0 : _field$options.map(option => ({
+            value: option.value,
+            label: option.label
+          }))) || []
+        }));
+      default:
+        return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+          name: fieldNameWithPrefix,
+          label: field.label,
+          rules: processedRules,
+          style: {
+            marginBottom: 16
+          }
+        }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+          placeholder: field.placeholder || "Enter ".concat(field.label.toLowerCase())
+        }));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, users && users.length > 0 && users.map(user => /*#__PURE__*/_react.default.createElement(_styles.UserItem, {
+    key: user.id
+  }, editingUserId === user.id ? /*#__PURE__*/_react.default.createElement(_styles.EditFormCard, null, /*#__PURE__*/_react.default.createElement(_styles.EditForm, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "form-row"
+  }, finalFields.map((field, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: field.key,
+    className: "form-field"
+  }, renderFormField(field)))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "form-actions"
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "danger-secondary",
+    onClick: handleCancel,
+    label: "Cancel"
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "secondary",
+    onClick: handleSave,
+    label: "Save"
+  })))) : /*#__PURE__*/_react.default.createElement(_styles.UserInfo, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "user-details"
+  }, finalFields.map((field, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: field.key
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: index === 0 ? "type-t2-700" : "type-b1-400",
+    color: index === 0 ? "primary-content" : "secondary-content"
+  }, user[field.key])))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "user-actions"
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "text-only",
+    onClick: () => handleEdit(user),
+    disabled: disabled || isEditing,
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _EditOutlined.default,
+        size: 64,
+        color: "primary"
+      }),
+      size: 32,
+      position: "right"
+    }
+  }), canDelete && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "text-only",
+    onClick: () => handleDelete(user.id),
+    disabled: disabled || isEditing,
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _DeleteOutlineOutlined.default,
+        color: "negative"
+      }),
+      color: "negative",
+      size: 32,
+      position: "right"
+    }
+  }))))), addingUser && /*#__PURE__*/_react.default.createElement(_styles.EditFormCard, null, /*#__PURE__*/_react.default.createElement(_styles.EditForm, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "form-row"
+  }, finalFields.map((field, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: field.key,
+    className: "form-field"
+  }, renderFormField(field)))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "form-actions"
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "danger-secondary",
+    onClick: handleCancel,
+    label: "Cancel"
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "primary",
+    onClick: handleSave,
+    label: "Save"
+  })))), !isEditing && /*#__PURE__*/_react.default.createElement(_styles.AddUserButtonContainer, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "secondary",
+    onClick: handleAdd,
+    disabled: disabled,
+    label: "Add Another User"
+  })), deleteModalVisible && /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    imgSrc: customPageModal === null || customPageModal === void 0 ? void 0 : customPageModal.imgSrc,
+    open: deleteModalVisible,
+    onCancel: cancelDelete,
+    title: customPageModal === null || customPageModal === void 0 ? void 0 : customPageModal.heading,
+    buttonConfig: [{
+      callback: () => {
+        cancelDelete();
+      },
+      label: "Cancel",
+      type: "secondary"
+    }, {
+      callback: () => {
+        confirmDelete();
+      },
+      label: "Delete",
+      type: "danger-primary"
+    }]
+  }, customPageModal === null || customPageModal === void 0 ? void 0 : customPageModal.subHeading), /*#__PURE__*/_react.default.createElement(_CustomNotification.default, {
+    ref: notificationRef
+  }));
+}

package/build/widgets/oa-widget-user-management/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UserItem = exports.UserInfo = exports.EditFormCard = exports.EditForm = exports.AddUserButtonContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const UserItem = exports.UserItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-bottom: 16px;\n  padding: 16px 0;\n  width: 100%;\n"])));
+const EditFormCard = exports.EditFormCard = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: 16px;\n  border-radius: 8px;\n  background: #f5f5f5;\n  border: 1px solid #e8e8e8;\n  padding: 16px;\n  width: 100%;\n"])));
+const UserInfo = exports.UserInfo = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n\n  .user-details {\n    flex: 1;\n  }\n\n  .user-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n"])));
+const EditForm = exports.EditForm = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .form-row {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 16px;\n\n    .form-field {\n      flex: 1;\n    }\n  }\n\n  .form-actions {\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n  }\n"])));
+const AddUserButtonContainer = exports.AddUserButtonContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-top: 16px;\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "1.0.1-stage.45",
+  "version": "1.0.1-stage.451",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",
@@ -22,8 +22,10 @@
     "antd": "^5.11.4",
     "d3": "^7.8.5",
     "dayjs": "^1.11.10",
+    "immer": "^10.1.1",
     "pdfjs-dist": "^2.6.347",
     "react-google-maps": "^9.4.5",
+    "react-intersection-observer": "^8.32.5",
     "react-markdown": "^8.0.7",
     "react-pattern-lock": "^12.0.12",
     "react-pdf": "^5.3.0",