diff --git a/microfrontends/SignDocuments/package-lock.json b/microfrontends/SignDocuments/package-lock.json index d974fe017..7841c8fe4 100644 --- a/microfrontends/SignDocuments/package-lock.json +++ b/microfrontends/SignDocuments/package-lock.json @@ -24,6 +24,7 @@ "radix-ui": "^1.0.1", "react": "^18.2.0", "react-bootstrap": "^2.9.0", + "react-datepicker": "^5.1.0", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", "react-dnd-multi-backend": "^8.0.3", @@ -2554,28 +2555,42 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz", - "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", + "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", "dependencies": { - "@floating-ui/utils": "^0.1.3" + "@floating-ui/utils": "^0.2.1" } }, "node_modules/@floating-ui/dom": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", - "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz", + "integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==", "dependencies": { - "@floating-ui/core": "^1.4.2", - "@floating-ui/utils": "^0.1.3" + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.1" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.26.8", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.8.tgz", + "integrity": "sha512-fOZb8BnJBrVohGPZ8RthDM5cHD9SnBKgY/U7LFXHhuwafSZD7TVmCX67+ezkkwxFbWpQGTEbgcjuHUDRonGy1g==", + "dependencies": { + "@floating-ui/react-dom": "^2.0.8", + "@floating-ui/utils": "^0.2.1", + "tabbable": "^6.0.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" } }, "node_modules/@floating-ui/react-dom": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz", - "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==", + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz", + "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==", "dependencies": { - "@floating-ui/dom": "^1.5.1" + "@floating-ui/dom": "^1.6.1" }, "peerDependencies": { "react": ">=16.8.0", @@ -2583,9 +2598,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz", - "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==" + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.11", @@ -9007,6 +9022,21 @@ "node": ">=10" } }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -17664,6 +17694,22 @@ "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-datepicker": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-5.1.0.tgz", + "integrity": "sha512-elwEnHpd9dQ4U/u7f2vsFdK1CchrOkPPR6rRDQWIzOgqM+Dty43c0tK/IPumrcPSMpRcyDu1okHmbs5m3xlz7w==", + "dependencies": { + "@floating-ui/react": "^0.26.2", + "classnames": "^2.2.6", + "date-fns": "^2.30.0", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.13.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17 || ^18", + "react-dom": "^16.9.0 || ^17 || ^18" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -17923,6 +17969,19 @@ "resolved": "https://registry.npmjs.org/react-native-crypto-js/-/react-native-crypto-js-1.0.0.tgz", "integrity": "sha512-FNbLuG/HAdapQoybeZSoes1PWdOj0w242gb+e1R0hicf3Gyj/Mf8M9NaED2AnXVOX01b2FXomwUiw1xP1K+8sA==" }, + "node_modules/react-onclickoutside": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz", + "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==", + "funding": { + "type": "individual", + "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" + }, + "peerDependencies": { + "react": "^15.5.x || ^16.x || ^17.x || ^18.x", + "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x" + } + }, "node_modules/react-pdf": { "version": "7.4.0", "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-7.4.0.tgz", @@ -19902,6 +19961,11 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" + }, "node_modules/tailwindcss": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz", diff --git a/microfrontends/SignDocuments/package.json b/microfrontends/SignDocuments/package.json index 1ff601f3d..a1f9984c3 100644 --- a/microfrontends/SignDocuments/package.json +++ b/microfrontends/SignDocuments/package.json @@ -20,6 +20,7 @@ "radix-ui": "^1.0.1", "react": "^18.2.0", "react-bootstrap": "^2.9.0", + "react-datepicker": "^5.1.0", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", "react-dnd-multi-backend": "^8.0.3", diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 143f6504b..a79cdb038 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -3,6 +3,7 @@ import { PDFDocument } from "pdf-lib"; import "../css/./signature.css"; import { themeColor } from "../utils/ThemeColor/backColor"; import axios from "axios"; +import moment from "moment"; import Loader from "./component/loader"; import RenderAllPdfPage from "./component/renderAllPdfPage"; import { DndProvider } from "react-dnd"; @@ -323,6 +324,12 @@ function SignYourSelf() { } }; + const getDate = () => { + const date = new Date(); + const milliseconds = date.getTime(); + const newDate = moment(milliseconds).format("MM/DD/YYYY"); + return newDate; + }; //function for setting position after drop signature button over pdf const addPositionOfSignature = (item, monitor) => { const key = Math.floor(1000 + Math.random() * 9000); @@ -345,7 +352,9 @@ function SignYourSelf() { ? pdfDetails[0].ExtUserPtr.Email : dragTypeValue === "checkbox" ? true - : ""; + : dragTypeValue === "date" + ? getDate() + : ""; if (item === "onclick") { dropObj = { @@ -525,6 +534,7 @@ function SignYourSelf() { flag, containerWH ); + // console.log(("pdf",pdfBytes)) //function for call to embed signature in pdf and get digital signature pdf signPdfFun(pdfBytes, documentId); diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js index 048dffcaa..cf46d609a 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import BorderResize from "../component/borderResize"; import PlaceholderBorder from "./placeholderBorder"; import { Rnd } from "react-rnd"; -import { defaultWidthHeight, isMobile } from "../../utils/Utils"; +import { defaultWidthHeight, isMobile, onChangeInput } from "../../utils/Utils"; import PlaceholderType from "./placeholderType"; import moment from "moment"; import "../LegaDrive/LegaDrive.css"; @@ -12,18 +12,66 @@ function Placeholder(props) { const [isShowDateFormat, setIsShowDateFormat] = useState(false); const [selectDate, setSelectDate] = useState(); const [dateFormat, setDateFormat] = useState([]); - const dateFormatArr = ["L", "l", "LL", "ll", "LLL", "lll", "llll"]; + const [saveDateFormat, setSaveDateFormat] = useState(""); + const dateFormatArr = [ + "L", + "DD/MM/YYYY", + "YYYY-MM-DD", + "MM.DD.YYYY", + "MM-DD-YYYY", + "MMM DD, YYYY", + "LL", + "DD MMM, YYYY", + "DD MMMM, YYYY" + ]; + + const selectFormat = (data) => { + switch (data) { + case "L": + return "MM/dd/yyyy"; + case "DD/MM/YYYY": + return "dd/MM/yyyy"; + case "LL": + return "MMMM dd, yyyy"; + case "DD MMM, YYYY": + return "DD MMM, YYYY"; + case "YYYY-MM-DD": + return "YYYY-MM-dd"; + case "MM-DD-YYYY": + return "MM-dd-YYYY"; + case "MM.DD.YYYY": + return "MM.dd.YYYY"; + case "MMM DD, YYYY": + return "MMM dd, YYYY"; + case "DD MMMM, YYYY": + return "dd MMMM, YYYY"; + } + }; const changeDateFormat = () => { const updateDate = []; dateFormatArr.map((data) => { - const date = new Date(selectDate); + const date = new Date(selectDate?.date); const milliseconds = date.getTime(); const newDate = moment(milliseconds).format(data); - updateDate.push(newDate); + const dateObj = { + date: newDate, + format: selectFormat(data) + }; + updateDate.push(dateObj); }); setDateFormat(updateDate); }; + useEffect(() => { + const date = new Date(); + const milliseconds = date.getTime(); + const newDate = moment(milliseconds).format("MM/DD/YYYY"); + const dateObj = { + date: newDate, + format: "MM/dd/YYYY" + }; + setSelectDate(dateObj); + }, []); useEffect(() => { if (selectDate) { changeDateFormat(); @@ -162,28 +210,29 @@ function Placeholder(props) { {props.pos.type === "date" && selectDate && ( ) : ( @@ -456,6 +523,8 @@ function Placeholder(props) { isNeedSign={props.isNeedSign} setSelectDate={setSelectDate} selectDate={selectDate} + setSaveDateFormat={setSaveDateFormat} + saveDateFormat={saveDateFormat} /> )} diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js index 04c48e518..9db8a7b2b 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js @@ -1,20 +1,49 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, forwardRef, useMemo } from "react"; + import { onChangeInput } from "../../utils/Utils"; +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; import "../../css/signature.css"; function PlaceholderType(props) { const [selectOption, setSelectOption] = useState(""); + const [startDate, setStartDate] = useState(new Date()); + const memoizedCount = useMemo( + () => props.saveDateFormat, + [props.saveDateFormat] + ); const type = props.pos.type; const handleInputBlur = () => { props.setDraggingEnabled(true); }; + useEffect(() => { + onChangeInput( + props.saveDateFormat, + props.pos.key, + props.xyPostion, + props.index, + props.setXyPostion, + props.data && props.data.signerObjId, + false, + props.selectDate?.format ? props.selectDate.format : "MM/dd/YYYY" + ); + }, [memoizedCount]); - // const formatDate = (dateString) => { - // const date = new Date(dateString); - // const updateDate = date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) - // console.log("update",updateDate) - // return updateDate; - // }; + const dateValue = (value) => { + props.setSaveDateFormat(value); + return {value}; + }; + const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => ( +
+ {dateValue(value)} + +
+ )); useEffect(() => { const senderUser = localStorage.getItem(`Extand_Class`); @@ -298,7 +327,7 @@ function PlaceholderType(props) { case "date": return (
- */} + { + setStartDate(date); + const dateObj = { + date: props.saveDateFormat, + format: props.pos?.dateFormat + ? props.pos?.dateFormat + : props.selectDate + ? props.selectDate?.format + : "MM/dd/YYYY" + }; + props.setSelectDate(dateObj); + onChangeInput( + props.saveDateFormat, + props.pos.key, + props.xyPostion, + props.index, + props.setXyPostion, + props.data && props.data.signerObjId, + false, + props.selectDate?.format + ? props.selectDate.format + : "MM/dd/YYYY" + ); + }} + popperPlacement="top-end" + customInput={} + dateFormat={ + props.pos?.dateFormat + ? props.pos?.dateFormat + : props.selectDate + ? props.selectDate?.format + : "dd MMMM, YYYY" + } /> {/*
{props.selectDate}
*/}
diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 167460610..4128ed9a9 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -1,5 +1,6 @@ import React, { useState, useRef, useEffect } from "react"; import axios from "axios"; +import moment from "moment"; import "../css/./signature.css"; import { themeColor } from "../utils/ThemeColor/backColor"; import { DndProvider } from "react-dnd"; @@ -324,6 +325,12 @@ function PlaceHolderSign() { } }; + const getDate = () => { + const date = new Date(); + const milliseconds = date.getTime(); + const newDate = moment(milliseconds).format("MM/DD/YYYY"); + return newDate; + }; //function for setting position after drop signature button over pdf const addPositionOfSignature = (item, monitor) => { getSignerPos(item, monitor); @@ -360,7 +367,12 @@ function PlaceHolderSign() { yBottom: window.innerHeight / 2 - 60, zIndex: posZIndex, type: monitor.type, - widgetValue: monitor.type === "checkbox" ? false : "" + widgetValue: + monitor.type === "checkbox" + ? false + : monitor.type === "date" + ? getDate() + : "" }; dropData.push(dropObj); placeHolder = { @@ -390,7 +402,12 @@ function PlaceHolderSign() { isMobile: isMobile, zIndex: posZIndex, type: item.text, - widgetValue: item.text === "checkbox" ? false : "" + widgetValue: + item.text === "checkbox" + ? false + : monitor.type === "date" + ? getDate() + : "" }; dropData.push(dropObj); diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index a173cf956..8ddf6766d 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -26,6 +26,9 @@ .dropdownContainer::-webkit-scrollbar { display: none; } +.react-datepicker__input-container{ +position: initial !important; +} .inputPlaceholder { width: 100%; diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index bd3864a03..85ec93372 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -86,7 +86,8 @@ export const onChangeInput = ( index, setXyPostion, signerObjId, - initial + initial, + dateFormat ) => { const isSigners = xyPostion.some((data) => data.signerPtr); @@ -108,15 +109,24 @@ export const onChangeInput = ( const getPageNumer = getPlaceHolder.filter( (data) => data.pageNumber === index ); + if (getPageNumer.length > 0) { const getXYdata = getPageNumer[0].pos; const getPosData = getXYdata; const addSignPos = getPosData.map((url, ind) => { if (url.key === signKey) { - return { - ...url, - widgetValue: value - }; + if (dateFormat) { + return { + ...url, + widgetValue: value, + dateFormat: dateFormat + }; + } else { + return { + ...url, + widgetValue: value + }; + } } return url; });