fix: add copy & share button for user's public profile url in profile page

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

@@ -1919,14 +1919,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;
       }
@@ -312,6 +321,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 +341,15 @@ 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%] transform text-sm py-[.75rem] px-[1.25rem]"
+              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 +499,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 +516,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,7 +18,13 @@ 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={`${
+          className
+            ? className
+            : "z-[1000] fixed top-20 left-1/2 transform -translate-x-1/2 text-sm"
+        }  `}
+      >
         <div className={`op-alert ${textcolor}`}>
           <span>{children}</span>
         </div>

apps/OpenSign/src/primitives/GetReportDisplay.js

@@ -475,7 +475,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
@@ -919,7 +919,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;