handleAddSigner()}>
+ {props.handleAddSigner && (
+
props.handleAddSigner()}
+ >
Add role
diff --git a/microfrontends/SignDocuments/src/premitives/RecipientList.js b/microfrontends/SignDocuments/src/premitives/RecipientList.js
new file mode 100644
index 000000000..9f533a849
--- /dev/null
+++ b/microfrontends/SignDocuments/src/premitives/RecipientList.js
@@ -0,0 +1,205 @@
+import React, { useRef, useState } from "react";
+import "../css/signerListPlace.css";
+import { darkenColor, getFirstLetter } from "../utils/Utils";
+
+const RecipientList = (props) => {
+ const color = [
+ "#93a3db",
+ "#e6c3db",
+ "#c0e3bc",
+ "#bce3db",
+ "#b8ccdb",
+ "#ceb8db",
+ "#ffccff",
+ "#99ffcc",
+ "#cc99ff",
+ "#ffcc99",
+ "#66ccff",
+ "#ffffcc"
+ ];
+
+ const nameColor = [
+ "#304fbf",
+ "#7d5270",
+ "#5f825b",
+ "#578077",
+ "#576e80",
+ "#6d527d",
+ "#cc00cc",
+ "#006666",
+ "#cc00ff",
+ "#ff9900",
+ "#336699",
+ "#cc9900"
+ ];
+ const [isHover, setIsHover] = useState();
+ const [isEdit, setIsEdit] = useState(false);
+ //function for onhover signer name change background color
+ const inputRef = useRef(null);
+ const onHoverStyle = (ind, blockColor) => {
+ const style = {
+ background: blockColor ? blockColor : color[ind % color.length],
+ padding: "10px",
+ marginTop: "2px",
+ display: "flex",
+ flexDirection: "row",
+ borderBottom: "1px solid #e3e1e1",
+ alignItems: "center"
+ };
+ return style;
+ };
+ //function for onhover signer name remove background color
+ const nonHoverStyle = (ind) => {
+ const style = {
+ padding: "10px",
+ marginTop: "2px",
+ display: "flex",
+ flexDirection: "row",
+ borderBottom: "1px solid #e3e1e1",
+ alignItems: "center"
+ };
+ return style;
+ };
+ const isWidgetExist = (Id) => {
+ return props.signerPos.some((x) => x.Id === Id);
+ };
+
+ return (
+ <>
+ {props.signersdata.length > 0 &&
+ props.signersdata.map((obj, ind) => {
+ return (
+
setIsHover(ind)}
+ onMouseLeave={() => setIsHover(null)}
+ key={ind}
+ style={
+ isHover === ind || props.isSelectListId === ind
+ ? onHoverStyle(ind, obj.blockColor)
+ : nonHoverStyle(ind)
+ }
+ onClick={() => {
+ props.setSignerObjId(obj?.objectId);
+ props.setIsSelectId(ind);
+ props.setContractName(obj?.className);
+ props.setUniqueId(obj.Id);
+ props.setRoleName(obj.Role);
+ }}
+ >
+
+
+
+ {isWidgetExist(obj.Id) ? (
+
+ ) : (
+ <>
+ {obj.Name
+ ? getFirstLetter(obj.Name)
+ : getFirstLetter(obj.Role)}
+
+ )}
+
+
+
+ {obj.Name ? (
+
+ {obj.Name}
+
+ ) : (
+ <>
+ {
+ setIsEdit({ [obj.Id]: true });
+ props.setRoleName(obj.Role);
+ }}
+ >
+ {isEdit?.[obj.Id] && props.handleRoleChange ? (
+ props.handleRoleChange(e, obj.Id)}
+ onBlur={() => {
+ setIsEdit({});
+ props.handleOnBlur(obj.Role, obj.Id);
+ }}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ inputRef.current.blur();
+ }
+ }}
+ />
+ ) : (
+ obj.Role
+ )}
+
+
+ )}
+ {obj.Name && (
+
+ {obj.Role}
+
+ )}
+
+
+ {props.handleDeleteUser && (
+
{
+ e.stopPropagation();
+ props.handleDeleteUser(obj.Id);
+ }}
+ style={{ cursor: "pointer" }}
+ >
+
+
+ )}
+
+
+ );
+ })}
+
+ );
+};
+
+export default RecipientList;
diff --git a/microfrontends/SignDocuments/src/premitives/SelectSigners.js b/microfrontends/SignDocuments/src/premitives/SelectSigners.js
index 11eb5c053..88b188842 100644
--- a/microfrontends/SignDocuments/src/premitives/SelectSigners.js
+++ b/microfrontends/SignDocuments/src/premitives/SelectSigners.js
@@ -61,7 +61,7 @@ const SelectSigners = (props) => {
// console.log("userList ", res);
setUserList(res);
return await res.map((item) => ({
- label: item.Name,
+ label: item.Email,
value: item.objectId
}));
}
diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js
index fab57658f..803d278d3 100644
--- a/microfrontends/SignDocuments/src/utils/Utils.js
+++ b/microfrontends/SignDocuments/src/utils/Utils.js
@@ -1046,3 +1046,29 @@ export const createDocument = async (template, placeholders, signerData) => {
}
}
};
+
+export const getFirstLetter = (name) => {
+ const firstLetter = name?.charAt(0);
+ return firstLetter;
+};
+
+
+export const darkenColor = (color, factor) => {
+ // Remove '#' from the color code and parse it to get RGB values
+ const hex = color.replace("#", "");
+ const r = parseInt(hex.substring(0, 2), 16);
+ const g = parseInt(hex.substring(2, 4), 16);
+ const b = parseInt(hex.substring(4, 6), 16);
+
+ // Darken the color by reducing each RGB component
+ const darkerR = Math.floor(r * (1 - factor));
+ const darkerG = Math.floor(g * (1 - factor));
+ const darkerB = Math.floor(b * (1 - factor));
+
+ // Convert the darkened RGB components back to hex
+ return `#${((darkerR << 16) | (darkerG << 8) | darkerB)
+ .toString(16)
+ .padStart(6, "0")}`;
+};
+
+