{
+ const format =
+ data?.format ||
+ selectDate?.format ||
+ props.pos?.options?.validation?.format;
const isSpecialDateFormat =
data?.format &&
- ["dd-MM-yyyy", "dd.MM.yyyy", "dd/MM/yyyy"].includes(data?.format);
+ ["dd-MM-yyyy", "dd.MM.yyyy", "dd/MM/yyyy"].includes(format);
let updateDate = data.date;
let date = "";
if (isSpecialDateFormat && updateDate) {
date = isDateChange
- ? moment(updateDate).format(changeDateToMomentFormat(data.format))
+ ? moment(updateDate).format(changeDateToMomentFormat(format))
: updateDate;
} else if (updateDate) {
//using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
const newDate = new Date(updateDate);
- date = moment(newDate.getTime()).format(
- changeDateToMomentFormat(data?.format)
- );
+ date = moment(newDate.getTime()).format(changeDateToMomentFormat(format));
}
- setSelectDate({ date: date, format: data?.format });
+ setSelectDate({ date: date, format: format });
return date;
};
const saveDateSetting = (data) => {
@@ -125,6 +127,10 @@ function Placeholder(props) {
const handleSaveDate = (data, isDateChange) => {
const date = isToday ? "today" : handleGetFormatDate(data, isDateChange);
//`onChangeInput` is used to save data related to date in a placeholder field
+ const format =
+ data?.format ||
+ selectDate?.format ||
+ props.pos?.options?.validation?.format;
onChangeInput(
date,
props.pos,
@@ -133,7 +139,7 @@ function Placeholder(props) {
props.setXyPosition,
props.data && props.data.Id,
false,
- data?.format,
+ format,
props.fontSize || props.pos?.options?.fontSize || 12,
props.fontColor || props.pos?.options?.fontColor || "black",
formdata,
@@ -221,7 +227,7 @@ function Placeholder(props) {
if (props?.currWidgetsDetails?.key === props.pos?.key) {
props.handleLinkUser(props.data.Id);
}
- props.setUniqueId(props.data.Id);
+ props.setUniqueId && props.setUniqueId(props.data.Id);
const checkIndex = props.xyPosition.findIndex(
(data) => data.Id === props.data.Id
);
@@ -938,14 +944,14 @@ function Placeholder(props) {
);
})}
-
+
{selectDate.format}
{props?.data?.Role !== "prefill" && props?.isPlaceholder && (
<>
- {t("set-date")} :
+ {t("default-date")} :
(
{props?.isPlaceholder && props?.data?.Role !== "prefill" && (
-
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderCopy.jsx b/apps/OpenSign/src/components/pdf/PlaceholderCopy.jsx
index 6c99896dd8..13b3e81f1c 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderCopy.jsx
+++ b/apps/OpenSign/src/components/pdf/PlaceholderCopy.jsx
@@ -1,11 +1,16 @@
import { useState } from "react";
import ModalUi from "../../primitives/ModalUi";
-import { handleCopyNextToWidget, randomId } from "../../constant/Utils";
+import {
+ drawWidget,
+ handleCopyNextToWidget,
+ randomId
+} from "../../constant/Utils";
import { useTranslation } from "react-i18next";
import { setPrefillImg } from "../../redux/reducers/widgetSlice";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
function PlaceholderCopy(props) {
+ const { prefillImg } = useSelector((state) => state.widget);
const { t } = useTranslation();
const dispatch = useDispatch();
const copyType = [
@@ -151,12 +156,17 @@ function PlaceholderCopy(props) {
if (
filterSignerPosition[0]?.Role === "prefill" &&
currentPlaceholder?.options?.response &&
- currentPlaceholder?.type === "image"
+ (currentPlaceholder?.type === "image" ||
+ currentPlaceholder?.type === drawWidget)
) {
+ const getPrefillImg = prefillImg?.find(
+ (x) => x.id === currentPlaceholder?.key
+ );
+ const base64Img = getPrefillImg?.base64;
dispatch(
setPrefillImg({
id: newId,
- base64: currentPlaceholder?.options?.response
+ base64: base64Img
})
);
}
@@ -254,15 +264,20 @@ function PlaceholderCopy(props) {
props.setXyPosition,
props?.Id
);
- if (
+ if (
filterSignerPosition[0]?.Role === "prefill" &&
currentXYposition?.options?.response &&
- currentXYposition?.type === "image"
+ (currentXYposition?.type === "image" ||
+ currentXYposition?.type === drawWidget)
) {
+ const getPrefillImg = prefillImg?.find(
+ (x) => x.id === currentXYposition?.key
+ );
+ const base64Img = getPrefillImg?.base64;
dispatch(
setPrefillImg({
id: newId,
- base64: currentXYposition?.options?.response
+ base64: base64Img
})
);
}
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.jsx b/apps/OpenSign/src/components/pdf/PlaceholderType.jsx
index df327999f4..e9ca48a679 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderType.jsx
+++ b/apps/OpenSign/src/components/pdf/PlaceholderType.jsx
@@ -15,7 +15,8 @@ import {
months,
years,
selectCheckbox,
- isBase64
+ isBase64,
+ drawWidget
} from "../../constant/Utils";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
@@ -463,7 +464,7 @@ function PlaceholderType(props) {
) : (
@@ -1021,37 +1027,36 @@ function Placeholder(props) {
{t("clear")}
-
- {statusArr.map((data, ind) => {
- return (
-
)}
-
+
-
- setFormdata({
- ...formdata,
- status: data.toLowerCase()
- })
- }
- checked={
- formdata.status.toLowerCase() === data.toLowerCase()
- }
- />
-
- );
- })}
-
- {t(`widget-status.${data}`)}
-
-
+ {statusArr.map((data, ind) => {
+ return (
+
+
+ setFormdata({
+ ...formdata,
+ status: data.toLowerCase()
+ })
+ }
+ checked={
+ formdata.status.toLowerCase() === data.toLowerCase()
+ }
+ />
+
+ );
+ })}
+
+ {t(`widget-status.${data}`)}
+
+
{t("font-size")} :
@@ -1096,9 +1101,10 @@ function Placeholder(props) {
{props?.selectDate?.format ||
@@ -581,6 +582,34 @@ function PlaceholderType(props) {
className="w-full resize-none overflow-hidden text-base-content item-center outline-none"
/>
);
+ case drawWidget:
+ return prefillImgLoad[props.pos?.key] ? (
+ 
+ ) : (
+
+
+ ) : widgetValue ? (
+
+ {props.pos.type && (
+
+ );
default:
return props.pos.SignUrl ? (
+ {formatWidgetName()}
+
+ )}
+
diff --git a/apps/OpenSign/src/components/pdf/PrefillWidgetsModal.jsx b/apps/OpenSign/src/components/pdf/PrefillWidgetsModal.jsx
index ac02dfc382..f2ef4d5037 100644
--- a/apps/OpenSign/src/components/pdf/PrefillWidgetsModal.jsx
+++ b/apps/OpenSign/src/components/pdf/PrefillWidgetsModal.jsx
@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
import ModalUi from "../../primitives/ModalUi";
import {
getMonth,
@@ -10,6 +10,8 @@ import {
changeDateToMomentFormat,
convertBase64ToFile,
generatePdfName,
+ drawWidget,
+ getBase64MimeType,
isBase64
} from "../../constant/Utils";
import DatePicker from "react-datepicker";
@@ -27,6 +29,8 @@ import {
setPrefillImg
} from "../../redux/reducers/widgetSlice";
import * as utils from "../../utils";
+import Draw from "./tab/Draw";
+import PenColorComponent from "./tab/PenColorComponent";
const widgetTitle = "font-medium";
@@ -111,6 +115,8 @@ const ImageComponent = (props) => {
function PrefillWidgetModal(props) {
const { t } = useTranslation();
const dispatch = useDispatch();
+ const canvasRefs = useRef({});
+ const [penColor, setPenColor] = useState("blue");
// Track already loaded image keys so they don't increment multiple times
const loadedSet = useRef(new Set());
const initializedRef = useRef(false); // prevent rerun on state updates
@@ -164,6 +170,7 @@ function PrefillWidgetModal(props) {
}, [props?.isPrefillModal]);
useEffect(() => {
+ setLoading(true);
//function is used to save all image base64 in redux state to display prefill images
const savePrefillImg = async () => {
const prefillImg = await utils?.savePrefillImg(props.xyPosition);
@@ -261,14 +268,15 @@ function PrefillWidgetModal(props) {
handleWidgetDetails(position, newDate);
};
- const handleSavePrefillImg = async (widgetDetails) => {
+ const handleSavePrefillImg = async (base64) => {
setLoading(true);
try {
const imageName = generatePdfName(16);
+ const imgType = image?.imgType || getBase64MimeType(base64);
const imageUrl = await convertBase64ToFile(
imageName,
- image.src,
- image.imgType
+ base64 || image.src,
+ imgType
);
if (imageUrl) {
return imageUrl;
@@ -284,7 +292,7 @@ function PrefillWidgetModal(props) {
const getPlaceholder = getPrefill?.placeHolder;
let imgUrl;
if (widgetDetails?.type === "image") {
- imgUrl = await handleSavePrefillImg(widgetDetails);
+ imgUrl = await handleSavePrefillImg(response);
}
const updatedData = getPlaceholder.map((page) => ({
...page,
@@ -382,7 +390,7 @@ function PrefillWidgetModal(props) {
if (item.options.name === position.options.name) {
return {
...item,
- SignUrl: "",
+ ...(item.SignUrl !== undefined && { SignUrl: "" }),
options: {
...position.options,
response: ""
@@ -412,6 +420,23 @@ function PrefillWidgetModal(props) {
}
setLoading(false);
};
+ //function for set signature url
+ const handleSignatureChange = (drawImage, position) => {
+ handleWidgetDetails(position, drawImage);
+ };
+ const getCanvasRef = (widgetId) => {
+ if (!canvasRefs.current[widgetId]) {
+ canvasRefs.current[widgetId] = React.createRef();
+ }
+ return canvasRefs.current[widgetId];
+ };
+ const clearCanvasById = (widgetId) => {
+ const canvasRef = canvasRefs.current?.[widgetId];
+
+ if (canvasRef?.current) {
+ canvasRef.current.clear();
+ }
+ };
const handleWidgetType = (position, id) => {
switch (position?.type) {
case "checkbox":
@@ -558,6 +583,34 @@ function PrefillWidgetModal(props) {
);
+ case drawWidget:
+ return (
+
+ {position.options?.name}
+
+ );
default:
return position?.SignUrl ? (
+
+
@@ -577,6 +630,66 @@ function PrefillWidgetModal(props) {
};
const handleEmbedPrefill = async (item) => {
+ //checking is there any draw widget response have base64 url then generate that base64 to url and save it
+ const prefillWidgets = props.xyPosition?.find((x) => x.Role === "prefill");
+ let updatedXyPosition = [];
+ if (prefillWidgets) {
+ const isDrawWidget = (prefillWidgets.placeHolder ?? []).some((ph) =>
+ (ph?.pos ?? []).some((p) => p?.type === drawWidget)
+ );
+ if (isDrawWidget) {
+ const getPrefill = props.xyPosition.find((x) => x?.Role === "prefill");
+ const getPlaceholder = getPrefill?.placeHolder ?? [];
+ const updatedData = await Promise.all(
+ getPlaceholder.map(async (page) => ({
+ ...page,
+ pos: await Promise.all(
+ page.pos.map(async (item) => {
+ if (item?.type === drawWidget) {
+ const widgetResponse = item?.options?.response;
+
+ // Skip if no response
+ if (!widgetResponse) return item;
+
+ // If already URL, do not re-upload
+ if (
+ typeof widgetResponse === "string" &&
+ widgetResponse.startsWith("http")
+ ) {
+ return item;
+ }
+
+ // Convert THIS widget's base64 → URL
+ const drawUrl = await handleSavePrefillImg(widgetResponse);
+ return {
+ ...item,
+ options: {
+ ...item.options,
+ response: drawUrl
+ }
+ };
+ }
+
+ return item;
+ })
+ )
+ }))
+ );
+
+ updatedXyPosition = props.xyPosition.map((obj) => {
+ if (obj.Role === "prefill") {
+ return {
+ ...obj,
+ placeHolder: updatedData
+ };
+ }
+ return obj;
+ });
+
+ props.setXyPosition(updatedXyPosition);
+ }
+ }
+
await props.handleCreateDocument();
};
//`loadOptions` function to use show all list of signer in dropdown
@@ -584,9 +697,9 @@ function PrefillWidgetModal(props) {
try {
const baseURL = localStorage.getItem("baseUrl");
const url = `${baseURL}functions/getsigners`;
- const token = {
- "X-Parse-Session-Token": localStorage.getItem("accesstoken")
- };
+
+ const token =
+ { "X-Parse-Session-Token": localStorage.getItem("accesstoken") };
const headers = {
"Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.jsx b/apps/OpenSign/src/components/pdf/WidgetComponent.jsx
index 6e8de4c4fd..758bd7e1d4 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.jsx
+++ b/apps/OpenSign/src/components/pdf/WidgetComponent.jsx
@@ -8,7 +8,8 @@ import {
textInputWidget,
cellsWidget,
textWidget,
- widgets
+ widgets,
+ drawWidget
} from "../../constant/Utils";
import { useTranslation } from "react-i18next";
import { useWidgetDrag } from "../../hook/useWidgetDrag";
@@ -34,7 +35,8 @@ function WidgetComponent(props) {
{ id: 13, text: "checkbox" },
{ id: 14, text: "dropdown" },
{ id: 15, text: radioButtonWidget },
- { id: 16, text: "image" }
+ { id: 16, text: "image" },
+ { id: 17, text: drawWidget }
];
// Create all drag refs in one go
@@ -65,7 +67,8 @@ function WidgetComponent(props) {
textInputWidget,
"date",
"image",
- "checkbox"
+ "checkbox",
+ drawWidget
].includes(data.type)
);
// allow only (signature, stamp, initials, text, cells) widget when isAllowModification true and user does not have session token
@@ -81,18 +84,19 @@ function WidgetComponent(props) {
"name",
"email",
"job title",
- "company"
+ "company",
+ drawWidget
].includes(data.type)
);
const selfSignWidgets = widgetList.filter(
(data) =>
- !["dropdown", radioButtonWidget, textInputWidget].includes(data.type)
+ !["dropdown", radioButtonWidget, textInputWidget,drawWidget].includes(data.type)
);
//if user select prefill role then allow only date,image,text,checkbox,radio,dropdownAdd commentMore actions
//dropdown widget should only be show in template flow
const prefillAllowWidgets = widgetList.filter((data) =>
(props.isPrefillDropdown ? ["dropdown"] : [])
- .concat([radioButtonWidget, textWidget, "date", "image", "checkbox"])
+ .concat([radioButtonWidget, textWidget, "date", "image", "checkbox",drawWidget])
.includes(data.type)
);
//function to show widget on the base of conditionAdd commentMore actions
@@ -108,7 +112,7 @@ function WidgetComponent(props) {
return unlogedInUserWidgets;
}
} else if (props?.roleName !== "prefill") {
- return widgetList.filter((data) => ![textWidget].includes(data.type));
+ return widgetList.filter((data) => ![textWidget,drawWidget].includes(data.type));
}
};
const handleSelectRecipient = () => {
diff --git a/apps/OpenSign/src/components/pdf/WidgetNameModal.jsx b/apps/OpenSign/src/components/pdf/WidgetNameModal.jsx
index 4c4c376cf1..63417c6595 100644
--- a/apps/OpenSign/src/components/pdf/WidgetNameModal.jsx
+++ b/apps/OpenSign/src/components/pdf/WidgetNameModal.jsx
@@ -310,8 +310,7 @@ const WidgetNameModal = (props) => {
)}
{!props?.isSelfSign &&
- !isSignOrInitials &&
- props?.roleName !== "prefill" && (
+ !isSignOrInitials && (
{statusArr.map((data, ind) => {
diff --git a/apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx b/apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx
index d93d1647af..de9602a176 100644
--- a/apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx
+++ b/apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx
@@ -24,12 +24,13 @@ import {
generatePdfName,
getDefaultDate,
getDefaultFormat,
- getBase64MimeType
+ getBase64MimeType,
+ drawWidget,
+ getBase64FromUrl
} from "../../constant/Utils";
import CellsWidget from "./CellsWidget";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
-import SignatureCanvas from "react-signature-canvas";
import moment from "moment";
import {
setSaveSignCheckbox,
@@ -49,7 +50,8 @@ import { emailRegex } from "../../constant/const";
import RegexParser from "regex-parser";
import {
saveToMySign,
- getInitials
+ getInitials,
+ isValidBase64
} from "../../utils";
import Draw from "./tab/Draw";
import DefaultSignature from "./tab/DefaultSignature";
@@ -159,7 +161,6 @@ function WidgetsValueModal(props) {
const blockedTab = ["mysignature", "myinitials", "myStamp"];
const showClearbtn =
(!blocked.includes(type) && !blockedTab.includes(isTab));
-
const [cellsValue, setCellsValue] = useState(() => {
const count = currWidgetsDetails?.options?.cellCount || 5;
const val =
@@ -231,7 +232,9 @@ function WidgetsValueModal(props) {
}
}
else if (isSignOrInitials) {
- setIsTab(currWidgetsDetails?.signatureType);
+ if (currWidgetsDetails?.signatureType) {
+ setIsTab(currWidgetsDetails?.signatureType);
+ }
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currWidgetsDetails]); // Added currWidgetsDetails to dependency array for reset logic
@@ -298,17 +301,23 @@ function WidgetsValueModal(props) {
compressedFileSize(file, setImage);
}
};
- const handleSavePrefillImg = async () => {
+ const handleSavePrefillImg = async (drawImg) => {
setIsLoader(true);
+
try {
dispatch(
- setPrefillImg({ id: currWidgetsDetails?.key, base64: image?.src })
+ setPrefillImg({
+ id: currWidgetsDetails?.key,
+ base64: drawImg || image?.src
+ })
);
const imageName = generatePdfName(16);
+
+ const imgType = image?.imgType || getBase64MimeType(drawImg);
const imageUrl = await convertBase64ToFile(
imageName,
- image.src,
- image.imgType
+ drawImg || image.src,
+ imgType
);
setIsLoader(false);
if (imageUrl) {
@@ -411,13 +420,20 @@ function WidgetsValueModal(props) {
? myInitial && (await convertJpegToPng(myInitial, "myinitials")) // default initials set through my signature tab
: await convertJpegToPng(defaultSignImg, "mysign") // default signature set through my signature tab
: signature; // signature done by user thorugh draw, upload, typed
- const signatureImg = signUrl;
+ let signatureImg = signUrl;
let imgWH = { width: width ? width : "", height: height ? height : "" };
setIsImageSelect(false);
setImage();
// `isApplyAll` is used when user edit signature/initial then updated signature apply all existing drawn signatures
const isApplyAll = true;
if (uniqueId) {
+ const isPrefill = xyPosition.some(
+ (x) => x.Id === uniqueId && x?.Role === "prefill"
+ );
+ if (isPrefill) {
+ dispatch(setPrefillImgLoad({ [currWidgetsDetails?.key]: true }));
+ signatureImg = await handleSavePrefillImg(signatureImg);
+ }
setXyPosition((prevState) =>
prevState.map((signer) => {
if (signer.Id !== uniqueId) return signer;
@@ -446,6 +462,7 @@ function WidgetsValueModal(props) {
};
})
);
+ dispatch(setPrefillImgLoad({}));
} else {
const index = props?.xyPosition?.findIndex((object) => {
return object.pageNumber === pageNumber;
@@ -535,7 +552,7 @@ function WidgetsValueModal(props) {
//function for clear signature image
const handleClear = () => {
if (
- ["signature", "initials", "stamp", "image"].includes(
+ ["signature", "initials", "stamp", "image", drawWidget].includes(
currWidgetsDetails?.type
)
) {
@@ -704,9 +721,25 @@ function WidgetsValueModal(props) {
}, [fontSelect]);
useEffect(() => {
+ handleWidgetsResponse();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isTab]);
+
+ const handleWidgetsResponse = async () => {
if (currWidgetsDetails?.options?.response) {
let url = currWidgetsDetails?.options?.response;
- if (isSignOrInitials) {
+ if (currWidgetsDetails?.type === drawWidget) {
+ if (canvasRef.current) {
+ const iBase64 = isValidBase64(url);
+ if (iBase64) {
+ canvasRef.current.fromDataURL(url);
+ } else {
+ const isAddSuffix = true;
+ const base64Url = await getBase64FromUrl(url, isAddSuffix);
+ canvasRef.current.fromDataURL(base64Url);
+ }
+ }
+ } else if (isSignOrInitials) {
if (isTab === "draw" && currWidgetsDetails?.signatureType === "draw") {
setSignature(url);
// Load the default signature after the component mounts
@@ -756,9 +789,7 @@ function WidgetsValueModal(props) {
setTypedSignature(signatureValue || userName || "");
convertToImg(fontSelect, signatureValue || userName || "");
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isTab]);
-
+ };
// function for convert input text value in image
const convertToImg = async (fontStyle, text, color) => {
const maxWidth = currWidgetsDetails?.Width;
@@ -1000,7 +1031,6 @@ function WidgetsValueModal(props) {
handleInputBlur();
};
-
//function is used to show widgets on modal according to selected widget type checkbox/date/radio/drodown/textbox/signature/image
const getWidgetType = (type) => {
const isStampOrImage =
@@ -1476,7 +1506,7 @@ function WidgetsValueModal(props) {
/>
-
+
{currWidgetsDetails?.options?.validation?.format}
@@ -1539,6 +1569,23 @@ function WidgetsValueModal(props) {
currWidgetsDetails={currWidgetsDetails}
/>
);
+ case drawWidget:
+ return (
+
+
+ );
default:
return (
{
if (
- ["signature", "stamp", "image", "initials"].includes(
+ ["signature", "stamp", "image", "initials", drawWidget].includes(
currWidgetsDetails?.type
) &&
(signature || image || myInitial || defaultSignImg || myStamp)
@@ -1733,7 +1780,7 @@ function WidgetsValueModal(props) {
if (isOptional && uniqueId) {
return false;
} else if (
- ["signature", "stamp", "image", "initials"].includes(
+ ["signature", "stamp", "image", "initials", drawWidget].includes(
currWidgetsDetails?.type
)
) {
@@ -1925,7 +1972,9 @@ function WidgetsValueModal(props) {
>
)}
+
+
- {!isSave &&