BhawanSingh
/
SME-Web
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Tags Update and style update client side 16-10

This commit is contained in:
=bhagwanSingh 2025-10-16 17:52:27 +05:30
parent 759468ed84
commit 950601171c
6 changed files with 169 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/client/TagsCon.tsx
View File

@ -392,7 +392,7 @@ const TagsCon: React.FC<TagsConProps> = ({
<div
id={item.navigationOrder}
tabIndex={1}
className={`max-h-max text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
// style={{ height: item.dimensions.height + "px" }}
>
@ -414,7 +414,14 @@ const TagsCon: React.FC<TagsConProps> = ({
if (e.key == "Enter") e.preventDefault();
}}
contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
className={`outline-none whitespace-nowrap w-full`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
>{item.value ?? ""}</p>
}
{
@ -425,7 +432,14 @@ const TagsCon: React.FC<TagsConProps> = ({
handleTagUpdate(item.originalIndex, val as string);
}}
contentEditable={true}
className="w-full outline-none max-h-max"
className={`w-full outline-none`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
>{item.value ?? ""}</p>
}
{
@ -448,7 +462,14 @@ const TagsCon: React.FC<TagsConProps> = ({
}
}}
contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
className={`outline-none whitespace-nowrap w-full`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
></p>
}
</div>
@ -498,7 +519,14 @@ const TagsCon: React.FC<TagsConProps> = ({
}
}}
// contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
className={`outline-none whitespace-nowrap w-full max-h-max`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
>
{item.value ?? ""}
</p>
@ -534,7 +562,14 @@ const TagsCon: React.FC<TagsConProps> = ({
}}
// contentEditable={true}
className={`outline-none whitespace-nowrap w-full max-h-max text-[${item.color}] text-[${item.textSize}px] ${item.italic ? "italic" : ""} ${item.bold ? "font-semibold" : ""} ${item.underline ? "underline" : ""}`}
className={`outline-none whitespace-nowrap w-full max-h-max`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
>
{item.value ?? ""}
</p>
@ -564,7 +599,14 @@ const TagsCon: React.FC<TagsConProps> = ({
handleTagUpdate(item.originalIndex, val as string);
}}
type="number"
className="outline-none h-full max-w-max"
className={`outline-none max-w-max`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
/>
}
</div>
@ -599,7 +641,14 @@ const TagsCon: React.FC<TagsConProps> = ({
}}
contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
className={`outline-none whitespace-nowrap w-full max-h-max`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
></p>
}
</div>
@ -618,7 +667,14 @@ const TagsCon: React.FC<TagsConProps> = ({
<input
name={item.id}
// style={{ height: item.dimensions.height + "px" }}
className="w-full px-2 outline-none"
className={`w-full px-2 outline-none`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
type="checkbox" />
</div>
}
@ -649,7 +705,21 @@ const TagsCon: React.FC<TagsConProps> = ({
)) ? (
<FaSignature className="text-lg text-slate-600" />
) : saved && saved.saveType != null && saved.saveType == "SELECT" ? (
<><span className='absolute left-0 bottom-0' style={{ fontFamily: saved?.font, fontSize: "42px" }}>{saved.signature}</span></>
<>
<span
className={`absolute left-0 bottom-0`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none",
fontFamily: saved?.font
}}
>
{saved.signature}
</span>
</>
) : (
<img
style={{
@ -689,7 +759,21 @@ const TagsCon: React.FC<TagsConProps> = ({
)) ?
<TbSignature className="text-lg text-slate-600" />
: saved && saved.saveType != null && saved.saveType == "SELECT" ? (
<><span className='absolute left-0 bottom-0' style={{ fontFamily: saved?.font, fontSize: "42px" }}>{saved.initial}</span></>
<>
<span
className={`absolute left-0 bottom-0`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none",
fontFamily: saved?.font
}}
>
{saved.initial}
</span>
</>
) :
(<img
style={{
@ -760,6 +844,13 @@ const TagsCon: React.FC<TagsConProps> = ({
const val = e.currentTarget.value;
handleTagUpdate(item.originalIndex, val as string);
}}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
>
<option value="">Select</option>
{item.options && item.options.map((obj, indx) => {
@ -788,11 +879,18 @@ const TagsCon: React.FC<TagsConProps> = ({
<div
id={item.navigationOrder}
tabIndex={1}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100"}`}
className={`flex justify-end items-end h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100"}`}
>
<p
style={{ opacity: `${item.id == isDateOpen ? "0" : "100"}` }}
className="w-full h-full rounded pl-1 pt-1 whitespace-nowrap">
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none",
opacity: `${item.id == isDateOpen ? "0" : "100"}`
}}
className="w-full rounded whitespace-nowrap">
{(item.id && item.id in dateValues) ? dateValues[item.id] : item.value ? item.value : item.dateFormat?.toLowerCase()}
</p>
<input
@ -809,6 +907,15 @@ const TagsCon: React.FC<TagsConProps> = ({
if (!item.id) return;
setIsDateOpen(null);
if (!val) {
setDateValues({
...dateValues,
[item.id as string]: item.value ? item.value as string : ""
});
return;
}
setDateValues({
...dateValues,
[item.id as string]: dayjs(val).format(item.format)
@ -819,7 +926,7 @@ const TagsCon: React.FC<TagsConProps> = ({
handleTagUpdate(item.originalIndex, val as string);
}}
style={{ opacity: `${item.id == isDateOpen ? "100" : "0"}` }}
className="w-full px-2 outline-none absolute"
className="w-full outline-none absolute"
onClick={() => {
}}

28
src/components/home/StartNow.tsx
View File

@ -21,6 +21,7 @@ const StartNow = () => {
isActive: true
});
const [filesError, setFilesError] = useState<string>("");
const userData = useSelector((state: RootState) => state.user);
@ -29,9 +30,9 @@ const StartNow = () => {
const handleUpload = async (filesToUpload: File[] = files) => {
const accountId = userData.account?.id;
const subject = filesToUpload[0].name ? filesToUpload[0].name : "Untitled"
const transactionRes = await api.post(`/api/v1/accounts/${userData.account?.id}/transactions`, { subject: "Sign Document - " + subject });
const transactionId = transactionRes.data.id
@ -74,10 +75,30 @@ const StartNow = () => {
}
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
setFilesError("");
await dispatch(resetRecipients())
await dispatch(resetDocuments())
const selectedFiles = e.target.files ? Array.from(e.target.files) : [];
if (selectedFiles.length > 0) {
const maxSize = 10 * 1024 * 1024; // 10 MB in bytes
const oversizedFiles = selectedFiles.filter(file => file.size > maxSize);
// Check for non-PDF files
const nonPdfFiles = selectedFiles.filter(file => file.type !== "application/pdf");
if (nonPdfFiles.length > 0) {
const fileNames = nonPdfFiles.map(file => file.name).join(", ");
setFilesError(`The following file(s) are not PDFs:\n${fileNames}`);
return;
}
// Check for oversized files
if (oversizedFiles.length > 0) {
const fileNames = oversizedFiles.map(file => file.name).join(", ");
setFilesError(`The following file(s) exceed 10MB:\n${fileNames}`);
return;
}
setFiles((prev) => [...selectedFiles]);
// handleUpload(selectedFiles);
if (transactionModal.isActive && selectedFiles.length > 1) {
@ -152,13 +173,14 @@ const StartNow = () => {
Upload File
</button>
{filesError && <span className="text-red-500 text-xs">{filesError}</span>}
<input
type="file"
ref={fileInputRef}
className="hidden"
onChange={handleFileChange}
accept=".pdf,.doc,.docx,.jpg,.png,.jpeg,.txt"
accept=".pdf"
multiple
/>

13
src/components/process/processStepTwo/DocumentContainer.tsx
View File

@ -229,6 +229,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
)
setDroppedItems(droppedItemsUpdateFalse);
return responses;
} catch (error) {
console.error("Error submitting recipient tags:", error);
}
@ -254,7 +255,8 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
}
let tagsData = groupByRecipientId(updatedTags);
await sendTagsToRecipients(tagsData, accountId, transactionId);
const responses = await sendTagsToRecipients(tagsData, accountId, transactionId);
if(responses && "status" in responses && responses?.status !== 200) return
// return
// SENDING Transaction - START
if (!save) {
@ -372,14 +374,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
width: dragElemData.width,
height: dragElemData.height,
},
styles: dragElemData.label == "text" ? {
"font": "Great Vibes",
"italic": false,
"bold": false,
"underline": false,
"color": "black",
"textSize": data.fontSize
} : null,
styles: null,
documentId: docId,
pageIndex: pageIndex,
recipientId: dragElemData.recipientId,

4
src/components/process/processStepTwo/FieldList.tsx
View File

@ -135,7 +135,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP'];
const data = res.data.filter((obj, indx) => {
if (obj.type == "STAMP" || obj.type == "RADIO" || obj.type == "CHECKBOX" || obj.type == "ATTACHMENT") return false
if (obj.type == "STAMP" || obj.type == "RADIO" || obj.type == "CHECKBOX" || obj.type == "ATTACHMENT" || obj.type == "SELECT") return false
return true
});
@ -254,7 +254,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP'];
data = data.filter((obj, indx) => {
if (obj.type == "STAMP" || obj.type == "RADIO" || obj.type == "CHECKBOX" || obj.type == "ATTACHMENT") return false
if (obj.type == "STAMP" || obj.type == "RADIO" || obj.type == "CHECKBOX" || obj.type == "ATTACHMENT" || obj.type == "SELECT") return false
return true
});

18
src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx
View File

@ -166,13 +166,23 @@ const RightSideBar: React.FC<DroppedItemProps> = (
useEffect(() => {
if (!selectedTag) return;
if (!selectedTag.styles) {
handlePropertyChange("styles", defaultStyles);
setStyles(defaultStyles);
if (selectedTag.type.toLowerCase() === TagsTypes.SIGNATURE || selectedTag.type.toLowerCase() === TagsTypes.INITIALS) {
if (!selectedTag.styles) {
handlePropertyChange("styles", { ...defaultStyles, textSize: 40 });
setStyles({ ...defaultStyles, textSize: 40 });
} else {
setStyles({ ...defaultStyles, ...selectedTag.styles });
}
} else {
setStyles({ ...defaultStyles, ...selectedTag.styles });
if (!selectedTag.styles) {
handlePropertyChange("styles", defaultStyles);
setStyles(defaultStyles);
} else {
setStyles({ ...defaultStyles, ...selectedTag.styles });
}
}
}, [selectedTag]);
const handleStyleChange = (key, value) => {

4
src/components/templates/TemplateDeleteWarnModal.tsx
View File

@ -12,9 +12,9 @@ const TemplateDeleteWarnModal = ({ setShowTemplateDeleteWarnModal, onConfirm }:
return (
<div className="fixed inset-0 backdrop-blur-sm bg-black/30 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl p-6 w-100">
<h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Self Sign</h3>
<h3 className="text-lg font-medium text-gray-800 mb-4">Delete Confirmation.</h3>
<p className="text-gray-600 mb-6">
Are you sure you want to proceed with self sign? This will remove all the recipient that you added.
Are you sure you want to proceed with deleting this template? This action cannot be undone.
</p>
<div className="flex justify-end gap-3">
<button