Merge pull request #1047 from OpenSignLabs/raktima-opensignlabs-patch-11

fix: something went wrong issue while signing document in public profile

apps/OpenSign/public/locales/en/translation.json

@@ -592,7 +592,8 @@
         "expired-doc-title":"Expired Document",
         "expired-on-mssg" :"This document expired on {{expiredDate}} and is no longer available to sign.",
         "signature-validate-alert":"Please confirm that you have selected at least {{minRequiredCount}} checkboxes.",
-        "signature-validate-alert-2" :"Ensure this field is accurately filled and meets all requirements."
+        "signature-validate-alert-2" :"Ensure this field is accurately filled and meets all requirements.",
+        "user-name-exist":"user name already exist"
        
      
           

apps/OpenSign/public/locales/fr/translation.json

@@ -591,7 +591,8 @@
    "expired-doc-title" :"Document expiré",
    "expired-on-mssg" :"Ce document a expiré le {{expiredDate}} et n'est plus disponible pour signature.",
    "signature-validate-alert":"Veuillez confirmer que vous avez coché au moins {{minRequiredCount}} cases.",
-    "signature-validate-alert-2" :"Assurez-vous que ce champ est rempli avec précision et répond à toutes les exigences."
+    "signature-validate-alert-2" :"Assurez-vous que ce champ est rempli avec précision et répond à toutes les exigences.",
+   "user-name-exist" :"le nom d'utilisateur existe déjà"
      
     
   

apps/OpenSign/src/constant/Utils.js

@@ -1033,7 +1033,9 @@ export const addInitialData = (signerPos, setXyPostion, value, userId) => {
 //function for embed document id
 export const embedDocId = async (pdfDoc, documentId, allPages) => {
   // `fontBytes` is used to embed custom font in pdf
-  const fontBytes = await fileasbytes("/font/times.ttf");
+  const fontBytes = await fileasbytes(
+    "https://cdn.opensignlabs.com/webfonts/times.ttf"
+  );
   pdfDoc.registerFontkit(fontkit);
   const font = await pdfDoc.embedFont(fontBytes, { subset: true });
   for (let i = 0; i < allPages; i++) {
@@ -1251,7 +1253,9 @@ export const multiSignEmbed = async (
   containerWH
 ) => {
   // `fontBytes` is used to embed custom font in pdf
-  const fontBytes = await fileasbytes("/font/times.ttf");
+  const fontBytes = await fileasbytes(
+    "https://cdn.opensignlabs.com/webfonts/times.ttf"
+  );
   pdfDoc.registerFontkit(fontkit);
   const font = await pdfDoc.embedFont(fontBytes, { subset: true });
   for (let item of widgets) {
@@ -1919,14 +1923,14 @@ export function replaceMailVaribles(subject, body, variables) {
   return result;
 }
 
-export const copytoData = (text) => {
+export const copytoData = (url) => {
   // navigator.clipboard.writeText(text);
   if (navigator.clipboard) {
-    navigator.clipboard.writeText(text);
+    navigator.clipboard.writeText(url);
   } else {
     // Fallback for browsers that don't support navigator.clipboard
     const textArea = document.createElement("textarea");
-    textArea.value = text;
+    textArea.value = url;
     document.body.appendChild(textArea);
     textArea.select();
     document.execCommand("copy");

apps/OpenSign/src/pages/UserProfile.js

@@ -11,13 +11,17 @@ import { isEnableSubscription, isStaging } from "../constant/const";
 import {
   checkIsSubscribed,
   checkIsSubscribedTeam,
-  handleSendOTP
+  copytoData,
+  handleSendOTP,
+  openInNewTab
 } from "../constant/Utils";
 import Upgrade from "../primitives/Upgrade";
 import ModalUi from "../primitives/ModalUi";
 import Loader from "../primitives/Loader";
 import { useTranslation } from "react-i18next";
 import SelectLanguage from "../components/pdf/SelectLanguage";
+import { RWebShare } from "react-web-share";
+import Alert from "../primitives/Alert";
 
 function UserProfile() {
   const navigate = useNavigate();
@@ -35,6 +39,7 @@ function UserProfile() {
   const [isDisableDocId, setIsDisableDocId] = useState(false);
   const [isSubscribe, setIsSubscribe] = useState(false);
   const [isUpgrade, setIsUpgrade] = useState(false);
+  const [isAlert, setIsAlert] = useState({});
   const [publicUserName, setPublicUserName] = useState(
     extendUser && extendUser?.[0]?.UserName
   );
@@ -49,12 +54,13 @@ function UserProfile() {
   const [otp, setOtp] = useState("");
   const [otpLoader, setOtpLoader] = useState(false);
   const [isEmailVerified, setIsEmailVerified] = useState(false);
-  const [userNameError, setUserNameError] = useState("");
   const [tagLine, setTagLine] = useState(
     extendUser && extendUser?.[0]?.Tagline
   );
   const [isTeam, setIsTeam] = useState(false);
-
+  const getPublicUrl = isStaging
+    ? `https://staging.opensign.me/${extendUser?.[0]?.UserName}`
+    : `https://opensign.me/${extendUser?.[0]?.UserName}`;
   useEffect(() => {
     getUserDetail();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -103,9 +109,12 @@ function UserProfile() {
       });
       if (res) {
         setIsLoader(false);
-        setUserNameError("user name already exist");
+        setIsAlert({
+          type: "danger",
+          message: t("user-name-exist")
+        });
         setTimeout(() => {
-          setUserNameError("");
+          setIsAlert({});
         }, 3000);
         return res;
       }
@@ -197,7 +206,6 @@ function UserProfile() {
       const extRes = JSON.stringify(json);
       localStorage.setItem("Extand_Class", extRes);
       previousPublicUserName.current = publicUserName;
-      // console.log("updateRes ", updateRes);
     } catch (e) {
       console.log("error in save data in contracts_Users class");
     }
@@ -312,6 +320,16 @@ function UserProfile() {
     setJobTitle(extendUser?.[0]?.JobTitle);
     setIsDisableDocId(extendUser?.[0]?.HeaderDocId);
   };
+  const copytoclipboard = () => {
+    copytoData(getPublicUrl);
+    setIsAlert({
+      type: "success",
+      message: t("copied")
+    });
+    setTimeout(() => {
+      setIsAlert({});
+    }, 3000);
+  };
 
   return (
     <React.Fragment>
@@ -322,11 +340,12 @@ function UserProfile() {
         </div>
       ) : (
         <div className="flex justify-center items-center w-full relative">
-          {userNameError && (
-            <div className="z-[1000] fixed top-[50%] transform border-[1px] text-sm border-[#f0a8a8] bg-[#f4bebe] text-[#c42121] rounded py-[.75rem] px-[1.25rem]">
-              {userNameError}
-            </div>
+          {isAlert && (
+            <Alert className="z-[1000] fixed top-[10%]" type={isAlert.type}>
+              {isAlert.message}
+            </Alert>
           )}
+
           <div className="bg-base-100 text-base-content flex flex-col justify-center shadow-md rounded-box w-[450px]">
             <div className="flex flex-col justify-center items-center my-4">
               <div className="w-[200px] h-[200px] overflow-hidden rounded-full">
@@ -476,10 +495,7 @@ function UserProfile() {
                       />
                     </span>
                     <div className="flex md:flex-row flex-col md:items-center">
-                      <span className="mb-1 md:mb-1">
-                        {isStaging ? "staging.opensign.me/" : " opensign.me/"}
-                      </span>
-                      {editmode ? (
+                      {editmode || !extendUser?.[0]?.UserName ? (
                         <input
                           maxLength={40}
                           style={{
@@ -496,12 +512,38 @@ function UserProfile() {
                           className="op-input op-input-bordered focus:outline-none hover:border-base-content op-input-xs"
                         />
                       ) : (
-                        <input
-                          value={extendUser?.[0]?.UserName}
-                          disabled
-                          placeholder="enter user name"
-                          className="op-input op-input-bordered op-input-xs"
-                        />
+                        <div className="flex flex-row gap-1 items-center justify-between md:justify-start">
+                          <span
+                            rel="noreferrer"
+                            target="_blank"
+                            onClick={() => {
+                              openInNewTab(getPublicUrl);
+                            }}
+                            className="cursor-pointer underline hover:text-blue-800 w-[200px] md:w-[150px] whitespace-nowrap overflow-hidden text-ellipsis"
+                          >
+                            {isStaging
+                              ? `staging.opensign.me/${extendUser?.[0]?.UserName}`
+                              : `opensign.me/${extendUser?.[0]?.UserName}`}
+                          </span>
+                          <div className="flex items-center gap-2">
+                            <RWebShare
+                              data={{
+                                url: getPublicUrl,
+                                title: "Sign url"
+                              }}
+                            >
+                              <button className="op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm ">
+                                <i className="fa-light fa-share-from-square"></i>{" "}
+                              </button>
+                            </RWebShare>
+                            <button
+                              className="op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm"
+                              onClick={() => copytoclipboard()}
+                            >
+                              <i className="fa-light fa-link"></i>{" "}
+                            </button>
+                          </div>
+                        </div>
                       )}
                     </div>
                   </li>

apps/OpenSign/src/primitives/Alert.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const Alert = ({ children, type }) => {
+const Alert = ({ children, type, className }) => {
   const textcolor = type ? theme(type) : theme();
   function theme(color) {
     switch (color) {
@@ -18,8 +18,14 @@ const Alert = ({ children, type }) => {
   }
   return (
     children && (
-      <div className="z-[1000] fixed top-20 left-1/2 transform -translate-x-1/2 text-sm">
-        <div className={`op-alert ${textcolor}`}>
+      <div
+        className={`${
+          className
+            ? className
+            : "z-[1000] fixed top-20 left-1/2 transform -translate-x-1/2 text-sm"
+        }  `}
+      >
+        <div className={`op-alert ${textcolor} flex items-center`}>
           <span>{children}</span>
         </div>
       </div>

apps/OpenSign/src/primitives/GetReportDisplay.js

@@ -474,7 +474,7 @@ const ReportTable = (props) => {
   };
 
   const copytoclipboard = (share) => {
-    navigator.clipboard.writeText(share.url);
+    copytoData(share.url);
     setCopied({ ...copied, [share.email]: true });
   };
   //function to handle revoke/decline docment
@@ -918,7 +918,7 @@ const ReportTable = (props) => {
   const handlePublicChange = async (e, item) => {
     const getPlaceholder = item?.Placeholders;
     //checking index for public role
-    const getIndex = getPlaceholder.findIndex((obj) => !obj.signerObjId);
+    const getIndex = getPlaceholder?.findIndex((obj) => !obj?.signerObjId);
     //conditon to check empty role is exist or not
     if (getPlaceholder && getPlaceholder.length > 0 && getIndex >= 0) {
       const signers = item?.Signers;