Merge pull request #470 from OpenSignLabs/date_issue

feat: year and month selection feature add on date widgets, wrong date embed on pdf issue fix

apps/OpenSign/src/components/pdf/Placeholder.js

@@ -54,7 +54,7 @@ function Placeholder(props) {
 
   useEffect(() => {
     //set default current date and default format MM/dd/yyyy
-    if (props.isPlaceholder || props.isSignYourself) {
+    if (props.isSignYourself) {
       const date = new Date();
       const milliseconds = date.getTime();
       const newDate = moment(milliseconds).format("MM/DD/YYYY");
@@ -63,6 +63,22 @@ function Placeholder(props) {
         format: "MM/dd/YYYY"
       };
       setSelectDate(dateObj);
+    } else {
+      const defaultRes = props?.pos?.options?.response;
+      const defaultFormat = props.pos?.options?.validation?.format;
+      const updateDate = defaultRes
+        ? new Date(props?.pos?.options?.response)
+        : new Date();
+      const dateFormat = defaultFormat ? defaultFormat : "MM/DD/YYYY";
+      const milliseconds = updateDate.getTime();
+      const newDate = moment(milliseconds).format(dateFormat);
+      const dateObj = {
+        date: newDate,
+        format: props.pos?.options?.validation?.format
+          ? props.pos?.options?.validation?.format
+          : "MM/dd/YYYY"
+      };
+      setSelectDate(dateObj);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

apps/OpenSign/src/components/pdf/PlaceholderType.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, forwardRef, useRef } from "react";
-import { onChangeInput } from "../../constant/Utils";
+import { getMonth, getYear, onChangeInput, range } from "../../constant/Utils";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import "../../styles/signature.css";
@@ -15,6 +15,21 @@ function PlaceholderType(props) {
   const inputRef = useRef(null);
   const [textValue, setTextValue] = useState();
   const [selectedCheckbox, setSelectedCheckbox] = useState([]);
+  const years = range(1990, getYear(new Date()) + 16, 1);
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
   const validateExpression = (regexValidation) => {
     let regexObject = regexValidation;
     if (props.pos?.options.validation.type === "regex") {
@@ -31,7 +46,6 @@ function PlaceholderType(props) {
   const handleInputBlur = () => {
     props.setDraggingEnabled(true);
     const validateType = props.pos?.options?.validation?.type;
-
     let regexValidation;
     if (validateType) {
       switch (validateType) {
@@ -293,6 +307,7 @@ function PlaceholderType(props) {
       isRadio
     );
   };
+
   switch (type) {
     case "signature":
       return props.pos.SignUrl ? (
@@ -595,6 +610,34 @@ function PlaceholderType(props) {
       return (
         <div>
           <DatePicker
+            renderCustomHeader={({ date, changeYear, changeMonth }) => (
+              <div className="flex justify-start ml-2 ">
+                <select
+                  className="bg-transparent outline-none"
+                  value={months[getMonth(date)]}
+                  onChange={({ target: { value } }) =>
+                    changeMonth(months.indexOf(value))
+                  }
+                >
+                  {months.map((option) => (
+                    <option key={option} value={option}>
+                      {option}
+                    </option>
+                  ))}
+                </select>
+                <select
+                  className="bg-transparent outline-none"
+                  value={getYear(date)}
+                  onChange={({ target: { value } }) => changeYear(value)}
+                >
+                  {years.map((option) => (
+                    <option key={option} value={option}>
+                      {option}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
             disabled={
               props.isNeedSign && props.data?.signerObjId !== props.signerObjId
             }
@@ -712,6 +755,7 @@ function PlaceholderType(props) {
     case "label":
       return (
         <textarea
+          placeholder="Enter label"
           rows={1}
           onChange={(e) => {
             onChangeInput(

apps/OpenSign/src/constant/Utils.js

@@ -1517,3 +1517,23 @@ export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => {
   }
   return xyDefaultPos;
 };
+
+//function for create list of year for date widget
+export const range = (start, end, step) => {
+  const range = [];
+  for (let i = start; i <= end; i += step) {
+    range.push(i);
+  }
+  return range;
+};
+//function for get month
+export const getMonth = (date) => {
+  const newMonth = new Date(date).getMonth();
+  return newMonth;
+};
+
+//function for get year
+export const getYear = (date) => {
+  const newYear = new Date(date).getFullYear();
+  return newYear;
+};

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -725,7 +725,7 @@ const TemplatePlaceholder = () => {
       selector: '[data-tut="reactourFirst"]',
       content: () => (
         <TourContentWithBtn
-          message={`Select a role from this list to add a place-holder where he is supposed to sign.The placeholder will appear in the same colour as the recipient name once you drop it on the document.`}
+          message={`Once roles are added, select a role from list to add a place-holder where he is supposed to sign. The placeholder will appear in the same colour as the role name once you drop it on the document.`}
           isChecked={handleDontShow}
         />
       ),
@@ -737,7 +737,7 @@ const TemplatePlaceholder = () => {
       selector: '[data-tut="reactourSecond"]',
       content: () => (
         <TourContentWithBtn
-          message={`Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`}
+          message={`Drag a widget placeholder onto the PDF to choose your desired signing location.`}
           isChecked={handleDontShow}
         />
       ),
@@ -759,7 +759,7 @@ const TemplatePlaceholder = () => {
       selector: '[data-tut="reactourFour"]',
       content: () => (
         <TourContentWithBtn
-          message={`Clicking "Save" button will save the template and will ask you for creating new document.`}
+          message={`Clicking "Save" button will save the template and will ask you if you want to create a new document using this template.`}
           isChecked={handleDontShow}
         />
       ),