From 950601171c691de8127132166db469f2de1dbf95 Mon Sep 17 00:00:00 2001 From: =bhagwanSingh <=bhagwan.r@hicglobalsolutions.com> Date: Thu, 16 Oct 2025 17:52:27 +0530 Subject: [PATCH] Tags Update and style update client side 16-10 --- src/components/client/TagsCon.tsx | 137 ++++++++++++++++-- src/components/home/StartNow.tsx | 28 +++- .../processStepTwo/DocumentContainer.tsx | 13 +- .../process/processStepTwo/FieldList.tsx | 4 +- .../rightSideBar/RightSideBar.tsx | 18 ++- .../templates/TemplateDeleteWarnModal.tsx | 4 +- 6 files changed, 169 insertions(+), 35 deletions(-) diff --git a/src/components/client/TagsCon.tsx b/src/components/client/TagsCon.tsx index 461cc90..973227c 100644 --- a/src/components/client/TagsCon.tsx +++ b/src/components/client/TagsCon.tsx @@ -392,7 +392,7 @@ const TagsCon: React.FC = ({
@@ -414,7 +414,14 @@ const TagsCon: React.FC = ({ 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 ?? ""}

} { @@ -425,7 +432,14 @@ const TagsCon: React.FC = ({ 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 ?? ""}

} { @@ -448,7 +462,14 @@ const TagsCon: React.FC = ({ } }} 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" + }} >

}
@@ -498,7 +519,14 @@ const TagsCon: React.FC = ({ } }} // 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 ?? ""}

@@ -534,7 +562,14 @@ const TagsCon: React.FC = ({ }} // 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 ?? ""}

@@ -564,7 +599,14 @@ const TagsCon: React.FC = ({ 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" + }} /> } @@ -599,7 +641,14 @@ const TagsCon: React.FC = ({ }} 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" + }} >

} @@ -618,7 +667,14 @@ const TagsCon: React.FC = ({ } @@ -649,7 +705,21 @@ const TagsCon: React.FC = ({ )) ? ( ) : saved && saved.saveType != null && saved.saveType == "SELECT" ? ( - <>{saved.signature} + <> + + {saved.signature} + + ) : ( = ({ )) ? : saved && saved.saveType != null && saved.saveType == "SELECT" ? ( - <>{saved.initial} + <> + + {saved.initial} + + ) : ( = ({ 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" + }} > {item.options && item.options.map((obj, indx) => { @@ -788,11 +879,18 @@ const TagsCon: React.FC = ({

+ 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()}

= ({ 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 = ({ 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={() => { }} diff --git a/src/components/home/StartNow.tsx b/src/components/home/StartNow.tsx index 1500914..56c6424 100644 --- a/src/components/home/StartNow.tsx +++ b/src/components/home/StartNow.tsx @@ -21,6 +21,7 @@ const StartNow = () => { isActive: true }); + const [filesError, setFilesError] = useState(""); 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) => { + 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 + {filesError && {filesError}} diff --git a/src/components/process/processStepTwo/DocumentContainer.tsx b/src/components/process/processStepTwo/DocumentContainer.tsx index 8704dc5..064b600 100644 --- a/src/components/process/processStepTwo/DocumentContainer.tsx +++ b/src/components/process/processStepTwo/DocumentContainer.tsx @@ -229,6 +229,7 @@ const DocumentContainer = forwardRef = ({ 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 = ({ 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 }); diff --git a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx index 3d21aae..9bf05cc 100644 --- a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx +++ b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx @@ -166,13 +166,23 @@ const RightSideBar: React.FC = ( 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) => { diff --git a/src/components/templates/TemplateDeleteWarnModal.tsx b/src/components/templates/TemplateDeleteWarnModal.tsx index 1c9edd1..1008119 100644 --- a/src/components/templates/TemplateDeleteWarnModal.tsx +++ b/src/components/templates/TemplateDeleteWarnModal.tsx @@ -12,9 +12,9 @@ const TemplateDeleteWarnModal = ({ setShowTemplateDeleteWarnModal, onConfirm }: return (
-

Confirm Self Sign

+

Delete Confirmation.

- 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.