From eb643165c715df07398aea42aab8ea853a6d22ac Mon Sep 17 00:00:00 2001 From: Bhagwan Singh Date: Tue, 21 Jul 2026 14:11:43 +0530 Subject: [PATCH] Commit 21July Updates --- src/components/client/SignDocument.tsx | 7 +- src/components/client/TagsCon.tsx | 94 +++++++++++++++---- .../processStepTwo/DocumentContainer.tsx | 6 +- .../process/processStepTwo/NavTwo.tsx | 9 +- src/components/signature/ClientSignCon.tsx | 6 +- 5 files changed, 96 insertions(+), 26 deletions(-) diff --git a/src/components/client/SignDocument.tsx b/src/components/client/SignDocument.tsx index 94f3af7..dc7a873 100644 --- a/src/components/client/SignDocument.tsx +++ b/src/components/client/SignDocument.tsx @@ -380,6 +380,9 @@ const SignDocument = () => { let value = fitObj[indx].value; if (value === "FIT") value = "100"; setZoomScale?.(Number(value)); + setTimeout(() => { + setIsFitDd(false) + }, 0) } // const zoom = (percentage: number, contentClass: string) => { @@ -675,6 +678,8 @@ const SignDocument = () => { } } + console.log(createTagsAndSubmit) + // return; try { dispatch(showLoader("Signing ...")); @@ -1089,7 +1094,7 @@ const SignDocument = () => { key={indx} // onClick={() => setSelFitIndx(indx)} onClick={() => handleFitSelect(indx)} - className='flex z-50 items-center justify-between gap-2 w-[70px] p-2 text-xs cursor-default hover:bg-slate-100'> + className='flex z-50 items-center justify-between gap-2 w-[70px] p-2 text-xs cursor-default hover:bg-slate-100 text-slate-600'>
diff --git a/src/components/client/TagsCon.tsx b/src/components/client/TagsCon.tsx index 6415596..9004efe 100644 --- a/src/components/client/TagsCon.tsx +++ b/src/components/client/TagsCon.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useEffect, useRef, useState } from 'react' import { DroppedItem, TagsTypes } from '../../utlity/types'; import { RiDragMoveFill } from 'react-icons/ri'; import { IoMdClose } from 'react-icons/io'; @@ -325,6 +325,68 @@ const TagsCon: React.FC = ({ } } + // useEffect(() => { + + // if ((!signatureContainerRef.current || !signatureFontRef.current) || (!initialContainerRef.current || !initialFontRef.current)) return; + + // if (signatureContainerRef.current && signatureFontRef.current) { + // const containerWidth = signatureContainerRef.current.offsetWidth; + // // Start with base font + // signatureFontRef.current.style.fontSize = "100px"; + // const textWidth = signatureFontRef.current.offsetWidth; + // const scale = containerWidth / textWidth; + // signatureFontRef.current.style.fontSize = `${100 * scale}px`; + // } + + // if (initialContainerRef.current && initialFontRef.current) { + // const containerWidth = initialContainerRef.current.offsetWidth; + // // Start with base font + // initialFontRef.current.style.fontSize = "100px"; + // const textWidth = initialFontRef.current.offsetWidth; + // const scale = containerWidth / textWidth; + // initialFontRef.current.style.fontSize = `${100 * scale}px`; + // } + // }, [saved.signature]); + + + useEffect(() => { + const signatureContainers = document.querySelectorAll(".signature-container"); + const initialContainers = document.querySelectorAll(".initial-container"); + + setTimeout(() => { + + signatureContainers.forEach(container => { + const span = container.querySelector(".signature-text"); + + if (!span) return; + + span.style.fontSize = "100px"; + + const containerWidth = container.clientWidth; + const textWidth = span.scrollWidth; + + if (textWidth === 0) return; + + span.style.fontSize = `${100 * containerWidth / textWidth}px`; + }); + + initialContainers.forEach(container => { + const span = container.querySelector(".initial-text"); + + if (!span) return; + + span.style.fontSize = "100px"; + + const containerWidth = container.clientWidth; + const textWidth = span.scrollWidth; + + if (textWidth === 0) return; + + span.style.fontSize = `${100 * containerWidth / textWidth}px`; + }); + }, 0) + }, [saved.signature, signConfObj]); + return ( <> {currDocTags.map((item, index) => { @@ -406,8 +468,8 @@ const TagsCon: React.FC = ({ id={item.navigationOrder} tabIndex={1} className={`h-full w-full rounded border-slate-100 ${transparentTags || hideTags - ? "pointer-events-none" - : "bg-slate-200 shadow-sm opacity-80" + ? "pointer-events-none" + : "bg-slate-200 shadow-sm opacity-80" }`} style={{ overflow: "hidden" }} // clip content to container > @@ -744,9 +806,9 @@ const TagsCon: React.FC = ({ item.type == "SIGNATURE" &&
handleSignClick(index, item.id)} - className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none bg-transparent" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`} + className={`signature-container flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none bg-transparent" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`} // style={{ height: item.dimensions.height + "px" }} > {/* */} @@ -755,9 +817,9 @@ const TagsCon: React.FC = ({ ( (item.id != null && item.id != undefined && item.id != "") ? ( - (`${item.id}`) in signConfObj && signConfObj[`${item.id}`].accepted + (`${item.id}`) in signConfObj && signConfObj[`${item.id}`]?.accepted ) : ( - (`${index}`) in signConfObj && signConfObj[`${index}`].accepted + (`${index}`) in signConfObj && signConfObj[`${index}`]?.accepted ) ) )) ? ( @@ -765,13 +827,13 @@ const TagsCon: React.FC = ({ ) : saved && saved.saveType != null && saved.saveType == "SELECT" ? ( <> @@ -802,7 +864,7 @@ const TagsCon: React.FC = ({ tabIndex={1} id={item.navigationOrder} onClick={() => handleSignClick(index, item.id)} - 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 opacity-80"}`} + className={`initial-container 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 opacity-80"}`} // style={{ height: item.dimensions.height + "px" }} > {((!transparentTags && !hideTags) && !(saved.save && @@ -819,10 +881,10 @@ const TagsCon: React.FC = ({ : saved && saved.saveType != null && saved.saveType == "SELECT" ? ( <> { // if (TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES === transactionTemplateToggle) save = true; @@ -804,10 +803,10 @@ const DocumentContainer = forwardRef { @@ -912,7 +911,6 @@ const DocumentContainer = forwardRef -
) }) : diff --git a/src/components/process/processStepTwo/NavTwo.tsx b/src/components/process/processStepTwo/NavTwo.tsx index 4e84259..19e6bef 100644 --- a/src/components/process/processStepTwo/NavTwo.tsx +++ b/src/components/process/processStepTwo/NavTwo.tsx @@ -54,6 +54,10 @@ const fitObj = [ label: "50%", value: "50" }, + { + label: "130%", + value: "130" + }, { label: "150%", value: "150" @@ -115,7 +119,7 @@ const NavTwo: React.FC = ({ const params = useParams<{ accountId?: string; transactionId?: string; templateId?: string }>(); let accountId = params.accountId; let transactionId = params.transactionId - + if (!transactionId) { transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES; transactionId = params.templateId; @@ -226,6 +230,9 @@ const NavTwo: React.FC = ({ let value = fitObj[indx].value; if (value === "FIT") value = "100"; onZoomChange?.(Number(value)); + setTimeout(() => { + setIsFitDd(false) + }, 0) } diff --git a/src/components/signature/ClientSignCon.tsx b/src/components/signature/ClientSignCon.tsx index ac5d1e9..b2e2f6c 100644 --- a/src/components/signature/ClientSignCon.tsx +++ b/src/components/signature/ClientSignCon.tsx @@ -134,9 +134,7 @@ const ClientSignCon: React.FC = ({ }, }); - const [selectedSignature, setSelectedSignature] = useState( - signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" } - ); + const [selectedSignature, setSelectedSignature] = useState({ id: fontsMap[0].acronym, style: fontsMap[0].family }); // Store the actual file const [file1, setFile1] = useState(null); @@ -679,7 +677,7 @@ const ClientSignCon: React.FC = ({