Merge pull request #1265 from OpenSignLabs/feat-embed

feat: add copy public URL option in template report to copy public template URL for public signing

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

@@ -132,7 +132,8 @@
     "View": "View",
     "option": "Option",
     "Embed": "Embed",
-    "Copy TemplateId":"Copy TemplateId"
+    "Copy TemplateId":"Copy TemplateId",
+    "Copy Public URL":"Copy Public URL"
   },
   "report-heading": {
     "Sr.No": "Sr.No",
@@ -670,6 +671,7 @@
   "pdf-certificate":"Download Pdf + Certificate",
   "document-logs":"Document logs",
   "server-down": "Unable to connect to the OpenSign server. If you are self-hosting OpenSign, please ensure that all the steps in the documentation have been followed correctly. If you're running OpenSign locally, you might be accessing it through an incorrect port number.",
-  "admin-exists": "Admin already exists. Please login to the application using admin credentials in order to manage users."
+  "admin-exists": "Admin already exists. Please login to the application using admin credentials in order to manage users.",
+   "public-tour-message":"Please make template public to copy public URL"
 
 }

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

@@ -152,7 +152,8 @@
     "View": "Voir",
     "option": "Option",
     "Embed": "Intégrer",
-    "Copy TemplateId": "Copier l'ID du modèle"
+    "Copy TemplateId": "Copier l'ID du modèle",
+    "Copy Public URL":"Copier l'URL publique"
   },
   "report-help": {
     "Draft Documents": "Il s'agit de documents que vous avez commencés mais que vous n'avez pas finalisés pour envoi.",
@@ -669,7 +670,8 @@
   "pdf-certificate"  :"Télécharger Pdf + Certificat",
   "document-logs":"Journaux de documents",
   "server-down": "Impossible de se connecter au serveur OpenSign. Si vous hébergez vous-même OpenSign, veuillez vous assurer que toutes les étapes de la documentation ont été correctement suivies. Si vous exécutez OpenSign localement, vous y accédez peut-être via un numéro de port incorrect.",
-  "admin-exists": "L'administrateur existe déjà. Veuillez vous connecter à l'application en utilisant les informations d'identification de l'administrateur afin de gérer les utilisateurs."
+  "admin-exists": "L'administrateur existe déjà. Veuillez vous connecter à l'application en utilisant les informations d'identification de l'administrateur afin de gérer les utilisateurs.",
+  "public-tour-message":"Veuillez rendre le modèle public pour copier l'URL publique"
 
 
 }

apps/OpenSign/src/components/opensigndrive/DriveBody.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef } from "react";
 import "../../styles/opensigndrive.css";
 import axios from "axios";
 import * as ContextMenu from "@radix-ui/react-context-menu";
-import { saveAs } from "file-saver";
 import { useNavigate } from "react-router-dom";
 import Table from "react-bootstrap/Table";
 import * as HoverCard from "@radix-ui/react-hover-card";
@@ -264,12 +263,6 @@ function DriveBody(props) {
       setIsOpenMoveModal(false);
     }
   };
-
-  const sanitizeFileName = (pdfName) => {
-    // Replace spaces with underscore
-    return pdfName.replace(/ /g, "_");
-  };
-
   const handleEnterPress = (e, data) => {
     if (e.key === "Enter") {
       handledRenameDoc(data);

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

@@ -129,9 +129,11 @@ export class AppComponent{
                   <p className="font-medium text-[18px]">
                     {t(`${data.title}`)}
                   </p>
-                  <p className="text-[13px] mt-2">
+                  {ind === 0 && (
-                    {t("public-template-mssg-1")}
+                    <p className="text-[13px] mt-2">
-                  </p>
+                      {t("public-template-mssg-1")}
+                    </p>
+                  )}
                   <div className="relative p-1">
                     <div
                       onClick={() => handleCopy(data.codeString, ind)}
@@ -210,11 +212,11 @@ export class AppComponent{
                     <p className="font-medium text-[18px]">
                       {t(`${data.title}`)}
                     </p>
-
+                    {ind === 0 && (
-                    <p className="text-[13px] mt-2">
+                      <p className="text-[13px] mt-2">
-                      {t("angular-npm-mssg-1")}
+                        {t("angular-npm-mssg-1")}
-                    </p>
+                      </p>
-
+                    )}
                     <div className="relative p-1">
                       <div
                         onClick={() => handleCopy(data.codeString, ind)}

apps/OpenSign/src/json/ReportJson.js

@@ -39,6 +39,13 @@ export default function reportJson(id) {
           hoverLabel: "Copy TemplateId",
           btnIcon: "fa-light fa-copy",
           action: "CopyTemplateId"
+        },
+        {
+          btnId: "2434",
+          btnLabel: "Copy Public URL",
+          hoverLabel: "Copy Public URL",
+          btnIcon: "fa-light fa-copy",
+          action: "CopyPublicURL"
         }
       ]
     : [];
@@ -405,18 +412,15 @@ export default function reportJson(id) {
             if (item.action === "option") {
               // Make a shallow copy of the item
               const newItem = { ...item };
-              newItem.subaction = [
+              //splice method used to add `Share with team` option on second index of list
-                {
+              newItem.subaction.splice(1, 0, {
-                  btnId: "1873",
+                btnId: "1873",
-                  btnLabel: "Share with team",
+                btnLabel: "Share with team",
-                  hoverLabel: "Share with team",
+                hoverLabel: "Share with team",
-                  btnIcon: "fa-light fa-share-nodes",
+                btnIcon: "fa-light fa-share-nodes",
-                  redirectUrl: "",
+                redirectUrl: "",
-                  action: "sharewith"
+                action: "sharewith"
-                },
+              });
-                ...newItem.subaction
-              ];
-
               return newItem;
             }
             return item;

apps/OpenSign/src/primitives/GetReportDisplay.js

@@ -76,6 +76,7 @@ const ReportTable = (props) => {
   const [reason, setReason] = useState("");
   const [isDownloadModal, setIsDownloadModal] = useState(false);
   const [isEmbed, setIsEmbed] = useState(false);
+  const [isPublicTour, setIsPublicTour] = useState();
   const Extand_Class = localStorage.getItem("Extand_Class");
   const extClass = Extand_Class && JSON.parse(Extand_Class);
   const startIndex = (currentPage - 1) * props.docPerPage;
@@ -373,6 +374,19 @@ const ReportTable = (props) => {
       handleEmbedFunction(item);
     } else if (act.action === "CopyTemplateId") {
       copyTemplateId(item.objectId);
+    } else if (act.action === "CopyPublicURL") {
+      const isPublic = item?.IsPublic;
+      if (isPublic) {
+        let publicUrl = "";
+        if (isStaging) {
+          publicUrl = `https://staging.opensign.me/publicsign?templateid=${item.objectId}`;
+        } else {
+          publicUrl = `https://opensign.me/publicsign?templateid=${item.objectId}`;
+        }
+        copyTemplateId(publicUrl);
+      } else {
+        setIsPublicTour({ [item.objectId]: true });
+      }
     }
   };
   // Get current list
@@ -1133,6 +1147,17 @@ const ReportTable = (props) => {
     setIsPublicUserName(extendUser[0]?.UserName || "");
   };
 
+  const publicTourConfig = [
+    {
+      selector: '[data-tut="IsPublic"]',
+      content: t("public-tour-message"),
+      position: "top",
+      style: { fontSize: "13px" }
+    }
+  ];
+  const closePublicTour = () => {
+    setIsPublicTour();
+  };
   return (
     <div className="relative">
       {Object.keys(actLoader)?.length > 0 && (
@@ -1153,13 +1178,27 @@ const ReportTable = (props) => {
         )}
         {isAlert && <Alert type={alertMsg.type}>{alertMsg.message}</Alert>}
         {props.tourData && props.ReportName === "Templates" && (
-          <Tour
+          <>
-            onRequestClose={closeTour}
+            <Tour
-            steps={props.tourData}
+              onRequestClose={closeTour}
-            isOpen={isTour}
+              steps={props.tourData}
-            // rounded={5}
+              isOpen={isTour}
-            closeWithMask={false}
+              // rounded={5}
-          />
+              closeWithMask={false}
+            />
+            {isPublicTour && (
+              <Tour
+                showNumber={false}
+                showNavigation={false}
+                showNavigationNumber={false}
+                onRequestClose={closePublicTour}
+                steps={publicTourConfig}
+                isOpen={true}
+                rounded={5}
+                closeWithMask={false}
+              />
+            )}
+          </>
         )}
         <div className="flex flex-row items-center justify-between my-2 mx-3 text-[20px] md:text-[23px]">
           <div className="font-light">
@@ -1375,13 +1414,17 @@ const ReportTable = (props) => {
                           isEnableSubscription && (
                             <td className=" pl-[20px] py-2">
                               {props.ReportName === "Templates" && (
-                                <div className="flex flex-row">
+                                <div
+                                  className="flex flex-row "
+                                  data-tut="IsPublic"
+                                >
                                   <label className="cursor-pointer relative inline-flex items-center mb-0">
                                     <input
                                       checked={props.isPublic?.[item.objectId]}
-                                      onChange={(e) =>
+                                      onChange={(e) => {
-                                        handlePublicChange(e, item)
+                                        setIsPublicTour();
-                                      }
+                                        handlePublicChange(e, item);
+                                      }}
                                       type="checkbox"
                                       value=""
                                       className="sr-only peer"

apps/OpenSign/src/script/locales/en/translation.json

@@ -41,7 +41,7 @@
   "upgrade-now": "Upgrade now",
   "upgrade-to": "Upgrade to",
   "plan": "Plan",
-  "subscribe-card-teamplan": "Unlock the full power of collaboration! Create unlimited organizations, teams, and hierarchies. Share templates seamlessly across teams and assign custom user roles. Elevate your workflow today!",
+  "subscribe-card-teamplan":"Unlock the full power of collaboration! Create unlimited organizations, teams, and hierarchies. Share templates seamlessly across teams and assign custom user roles. Elevate your workflow today!",
   "subscribe-card-plan": "Unlock premium features starting at just {{premiumPrice}}/month. Enjoy enhanced performance and only {{addonPrice}} per additional credit after your included premium credits.",
   "user-name-limit-char": "To have a username less than 8 character please subscribe",
   "tour-content": "Don't show this again",
@@ -132,7 +132,8 @@
     "View": "View",
     "option": "Option",
     "Embed": "Embed",
-    "Copy TemplateId": "Copy TemplateId"
+    "Copy TemplateId":"Copy TemplateId",
+    "Copy Public URL":"Copy Public URL"
   },
   "report-heading": {
     "Sr.No": "Sr.No",
@@ -266,7 +267,7 @@
   "public-role": "Public role",
   "public-url": "Public URL",
   "public-url-copy": "Here’s your public URL: ",
-  "public-url-copy-mssg": "Copy it or share it with the signer, and you will be able to see all your publicly set templates.",
+  "public-url-copy-mssg":"Copy it or share it with the signer, and you will be able to see all your publicly set templates.",
   "add-public-url-alert": "Please add your public URL, and you will be able to make a public template.",
   "share-with-alert": "You cannot share a template if any roles already have contacts assigned. Please remove all contact assignments from the roles before sharing the template.",
   "share-with": "Share with",
@@ -597,7 +598,7 @@
     "Recently sent for signatures": "This is a list of documents you've sent to other parties for signature.",
     "Drafts": "This are documents you have started but have not finalized for sending.",
     "public-template": "This video demonstrates how to set up your personalized public profile, such as ‘https://opensign.me/your-username’. You’ll also learn how to customize your tagline and make your templates available for public signing."
-  },
+   },
   "enter-email-plaholder": "Add an email address and hit enter",
   "success-email-alert": "Email sent successfully!",
   "expired-doc-title": "Expired Document",
@@ -618,44 +619,44 @@
   "select-date-format": "Select a date format",
   "quantity-of-credits": "Quantity of premium credits",
   "remaining-credits": "Premium credits available:",
-  "remaining-credits-help": "Use premium credits for API document signing, bulk sending, or embedding OpenSign integration on your website. You have {{allowedcredits}} included credits and {{addoncredits}} additional purchased credits remaining.",
+  "remaining-credits-help":"Use premium credits for API document signing, bulk sending, or embedding OpenSign integration on your website. You have {{allowedcredits}} included credits and {{addoncredits}} additional purchased credits remaining.",
   "additional-credits": "Please purchase premium credits",
   "quota-err-quicksend": "Quota Reached, You don't have enough credits.",
   "buy-credits": "Buy Premium Credits",
-  "rotate-right": "Rotate right",
+  "rotate-right":"Rotate right",
-  "rotate-left": "Rotate left",
+  "rotate-left":"Rotate left",
-  "rotate-alert-mssg": "All widgets on this page will be lost. Are you sure you want to proceed?",
+  "rotate-alert-mssg":"All widgets on this page will be lost. Are you sure you want to proceed?",
-  "templateid": "Template-Id",
+  "templateid":"Template-Id",
-  "bulk-send-subcription-alert": "Please upgrade to Professional or Team plan to use bulk send.",
+  "bulk-send-subcription-alert":"Please upgrade to Professional or Team plan to use bulk send.",
-  "generate-test-token": "Generate Test Token",
+  "generate-test-token":"Generate Test Token",
-  "regenerate-test-token": "Regenerate Test Token",
+  "regenerate-test-token":"Regenerate Test Token",
-  "help-test-token": "This token can be used to test the APIs at the https://sandbox.opensignlabs.com/api/v1 endpoint, allowing you to conduct unlimited document signatures. Please note that the sandbox API will sign your documents with self-signed certificates, which may not be recognized as valid by Adobe. Once you’ve completed your testing, you can upgrade to one of our paid plans to generate a production token.",
+  "help-test-token":"This token can be used to test the APIs at the https://sandbox.opensignlabs.com/api/v1 endpoint, allowing you to conduct unlimited document signatures. Please note that the sandbox API will sign your documents with self-signed certificates, which may not be recognized as valid by Adobe. Once you’ve completed your testing, you can upgrade to one of our paid plans to generate a production token.",
-  "help-api-token": "This token can be used to access the production APIs at the {{origin}}/api/v1 endpoint. It can only be generated on one of our paid plans.",
+  "help-api-token":"This token can be used to access the production APIs at the {{origin}}/api/v1 endpoint. It can only be generated on one of our paid plans.",
-  "reason": "Reason",
+  "reason":"Reason",
-  "decline-by": "Declined/revoked by",
+  "decline-by":"Declined/revoked by",
   "document-declined": "Document declined",
-  "public-template-mssg-1": "To integrate OpenSign into your React or Next.js project, simply run the following command:",
+  "public-template-mssg-1":"To integrate OpenSign into your React or Next.js project, simply run the following command:",
-  "public-template-mssg-2": "Ensure you have npm or yarn set up in your project. If you’re using Yarn, you can replace npm install with yarn add @opensign/react.",
+  "public-template-mssg-2" :"Ensure you have npm or yarn set up in your project. If you’re using Yarn, you can replace npm install with yarn add @opensign/react.",
-  "public-template-mssg-3": "Need more details or examples?",
+  "public-template-mssg-3"  :"Need more details or examples?",
   "public-template-mssg-4": "Visit the",
   "public-template-mssg-5": " npm for the latest updates, detailed documentation, and version history.",
-  "public-template-mssg-6": "You need to set this template as public before you can utilize this code snippet.",
+  "public-template-mssg-6" :"You need to set this template as public before you can utilize this code snippet.",
-  "copy-code": "COPY",
+  "copy-code":"COPY",
-  "copied-code": "COPIED",
+  "copied-code":"COPIED",
-  "Installation": "Installation",
+  "Installation":"Installation",
-  "Usage": "Usage",
+  "Usage" :"Usage",
-  "insufficient-credits": "Insufficient Signing Credits",
+  "insufficient-credits":"Insufficient Signing Credits",
-  "insufficient-credits-mssg": "The owner of this document currently lacks the necessary OpenSign credits for you to sign. Please reach out to the owner if you require further details.",
+  "insufficient-credits-mssg":"The owner of this document currently lacks the necessary OpenSign credits for you to sign. Please reach out to the owner if you require further details.",
   "angular-npm-mssg-1": "To integrate OpenSign into your Angular project, simply run the following command:",
-  "quota-mail-info-head": "Monthly request signatures email limit",
+  "quota-mail-info-head":"Monthly request signatures email limit",
   "quota-mail-info": "You can send upto 15 signature request emails every month. Upgrade now to send unlimited signing requests directly.",
   "quota-mail": "You've reached your limit of 15 signature request emails for this month. Upgrade now to continue sending emails directly.",
-  "quota-mail-tip": "Tip: You can still sign <1>unlimited documents</1> by manually sharing the signing request links.",
+  "quota-mail-tip":"Tip: You can still sign <1>unlimited documents</1> by manually sharing the signing request links.",
-  "quota-mail-head": "Quota Reached",
+  "quota-mail-head":"Quota Reached",
-  "unauthorized-modal": "You don't have permission to perform this action, please contact {{adminEmail}}.",
+  "unauthorized-modal":"You don't have permission to perform this action, please contact {{adminEmail}}.",
-  "sent-this-month": "Sent this month",
+  "sent-this-month":"Sent this month",
-  "available-seats": "Available seats",
+  "available-seats":"Available seats",
-  "buy-users": "Buy more users",
+  "buy-users":"Buy more users",
   "isenable-otp": "Enable OTP verification",
   "isenable-otp-help": {
     "p1": "Would you like to enable the verification process using a one-time password (OTP)?",
@@ -663,13 +664,14 @@
     "p3": "Selecting this option will disable OTP verification, allowing users to sign the document directly without additional steps.",
     "p4": "Please choose the option that best suits your document signing requirements."
   },
-  "advanced-options": "Advanced options",
+  "advanced-options":"Advanced options",
-  "hide-advanced-options": "Hide Advanced options",
+  "hide-advanced-options":"Hide Advanced options",
-  "download-files": "Download files",
+  "download-files":"Download files",
-  "download-pdf": "Download Pdf",
+  "download-pdf":"Download Pdf",
-  "pdf-certificate": "Download Pdf + Certificate",
+  "pdf-certificate":"Download Pdf + Certificate",
-  "document-logs": "Document logs",
+  "document-logs":"Document logs",
   "server-down": "Unable to connect to the OpenSign server. If you are self-hosting OpenSign, please ensure that all the steps in the documentation have been followed correctly. If you're running OpenSign locally, you might be accessing it through an incorrect port number.",
-  "admin-exists": "Admin already exists. Please login to the application using admin credentials in order to manage users."
+  "admin-exists": "Admin already exists. Please login to the application using admin credentials in order to manage users.",
+   "public-tour-message":"Please make template public to copy public URL"
 
 }

apps/OpenSign/src/script/locales/fr/translation.json

@@ -152,7 +152,8 @@
     "View": "Voir",
     "option": "Option",
     "Embed": "Intégrer",
-    "Copy TemplateId": "Copier l'ID du modèle"
+    "Copy TemplateId": "Copier l'ID du modèle",
+    "Copy Public URL": "Copier l'URL publique"
   },
   "report-help": {
     "Draft Documents": "Il s'agit de documents que vous avez commencés mais que vous n'avez pas finalisés pour envoi.",
@@ -669,5 +670,6 @@
   "pdf-certificate": "Télécharger Pdf + Certificat",
   "document-logs": "Journaux de documents",
   "server-down": "Impossible de se connecter au serveur OpenSign. Si vous hébergez vous-même OpenSign, veuillez vous assurer que toutes les étapes de la documentation ont été correctement suivies. Si vous exécutez OpenSign localement, vous y accédez peut-être via un numéro de port incorrect.",
-  "admin-exists": "L'administrateur existe déjà. Veuillez vous connecter à l'application en utilisant les informations d'identification de l'administrateur afin de gérer les utilisateurs."
+  "admin-exists": "L'administrateur existe déjà. Veuillez vous connecter à l'application en utilisant les informations d'identification de l'administrateur afin de gérer les utilisateurs.",
+  "public-tour-message": "Veuillez rendre le modèle public pour copier l'URL publique"
 }