fix: add embedding functionality for all template & add CopyTemplateId button in template report list options

Author: raktima-opensignlabs

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

@@ -131,7 +131,8 @@
     "Share": "Share",
     "View": "View",
     "option": "Option",
-    "Embed": "Embed"
+    "Embed": "Embed",
+    "CopyTemplateId":"CopyTemplateId"
   },
   "report-heading": {
     "Sr.No": "Sr.No",
@@ -263,7 +264,8 @@
   "make-template-private-alert": "Are you sure you want to make this template private? This will remove it from your public profile.",
   "public-role": "Public role",
   "public-url": "Public URL",
-  "public-url-copy-mssg": " Here’s your public URL: Copy it or share it with the signer, and you will be able to see all your publicly set templates.",
+  "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.",
   "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",
@@ -634,6 +636,16 @@
   "quotamailselfsign": "You've reached your limit of 20 emails for this month. Upgrade now to continue sending emails directly.",
   "quotamail": "You've reached your limit of 20 signature request emails for this month. Upgrade now to continue sending emails directly.",
   "quotamailTip":"Tip: You can still sign unlimited documents by manually sharing the signing request links below.",
-  "quotamailhead":"Quota Reached"
+  "quotamailhead":"Quota Reached",
+  "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-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.",
+  "copy-code":"COPY",
+  "copied-code":"COPIED",
+  "Installation":"Installation",
+  "Usage" :"Usage"
 
 }

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

@@ -150,7 +150,8 @@
     "Share": "Partager",
     "View": "Voir",
     "option": "Option",
-    "Embed": "Intégrer"
+    "Embed": "Intégrer",
+    "CopyTemplateId": "Copier l'ID du modèle"
   },
   "report-help": {
     "Draft Documents": "Il s'agit de documents que vous avez commencés mais que vous n'avez pas finalisés pour envoi.",
@@ -262,7 +263,8 @@
   "make-template-private-alert": "Êtes-vous sûr de vouloir rendre ce modèle privé ? Cela le supprimera de votre profil public.",
   "public-role": "Rôle public",
   "public-url": "URL publique",
-  "public-url-copy-mssg": "Voici votre URL publique : copiez-la ou partagez-le avec le signataire et vous pouvoir voir tous vos paramètres publics modèles.",
+  "public-url-copy": "Voici votre URL publique : ",
+  "public-url-copy-mssg": "copiez-la ou partagez-le avec le signataire et vous pouvoir voir tous vos paramètres publics modèles.",
   "add-public-url-alert": "Veuillez ajouter votre URL publique et vous pourra rendre public modèle.",
   "share-with-alert": "Vous ne pouvez pas partager un modèle si des contacts sont déjà attribués à des rôles. Veuillez supprimer toutes les attributions de contacts des rôles avant de partager le modèle.",
   "share-with": "Partager avec",
@@ -634,6 +636,16 @@
   "quotamailselfsign": "Vous avez atteint votre limite de 20 e-mails pour ce mois. Mettez à niveau maintenant pour continuer à envoyer des e-mails directement.",
   "quotamail": "Vous avez atteint votre limite de 20 e-mails de demande de signature pour ce mois. Mettez à niveau maintenant pour continuer à envoyer des e-mails directement.",
   "quotamailTip":"Astuce : Vous pouvez toujours signer un nombre illimité de documents en partageant manuellement les liens de demande de signature ci-dessous.",
-  "quotamailhead":"Quota atteint"
-
+  "quotamailhead":"Quota atteint",
+  "public-template-mssg-1" :"Pour intégrer OpenSign dans votre projet React ou Next.js, exécutez simplement la commande suivante :",
+  "public-template-mssg-2" :"Assurez-vous que npm ou Yarn est configuré dans votre projet. Si vous utilisez Yarn, vous pouvez remplacer npm install par Yarn Add opensign-react.",
+  "public-template-mssg-3" :"Besoin de plus de détails ou d'exemples ?",
+  "public-template-mssg-4": "Visitez le",
+  "public-template-mssg-5":  "npm pour les dernières mises à jour, une documentation détaillée et l'historique des versions.",
+  "public-template-mssg-6":"Vous devez définir ce modèle comme public avant de pouvoir utiliser cet extrait de code.",
+  "copy-code":"COPIE",
+  "copied-code":"COPIÉ",
+  "Installation":"Installation",
+  "Usage" :"Usage"
+ 
 }

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

@@ -2,10 +2,12 @@ import React, { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { copytoData } from "../../constant/Utils";
+import { useTranslation } from "react-i18next";
 
 function EmbedTab(props) {
+  const { t } = useTranslation();
   const tabName = [
-    { title: "React/Next", icon: "fa-brands fa-react", color: "#61dafb" },
+    { title: "React/Next.js", icon: "fa-brands fa-react", color: "#61dafb" },
     { title: "Angular", icon: "fa-brands fa-angular", color: "#ff5733" }
   ];
   const [activeTab, setActiveTab] = useState(0);
@@ -14,7 +16,7 @@ function EmbedTab(props) {
   const codeData = [
     {
       id: 0,
-      title: "Installation command",
+      title: "Installation",
       codeString: `
 npm install opensign-react`
     },
@@ -76,15 +78,22 @@ export function App() {
             {codeData.map((data, ind) => {
               return (
                 <div key={ind}>
-                  <p className="font-medium text-[15px]">{data.title}</p>
+                  <p className="font-medium text-[18px]">
+                    {t(`${data.title}`)}
+                  </p>
+                  {ind === 0 && (
+                    <p className="text-[13px] mt-2">
+                      {t("public-template-mssg-1")}
+                    </p>
+                  )}
                   <div className="relative p-1">
                     <div
                       onClick={() => handleCopy(data.codeString, ind)}
                       className="absolute top-[20px] right-[20px] cursor-pointer"
                     >
-                      <i className="fa-light fa-link text-white"></i>{" "}
+                      <i className="fa-light fa-copy text-white mr-[2px]" />
                       <span className=" text-white">
-                        {isCopied[ind] ? "COPIED" : "COPY"}
+                        {isCopied[ind] ? t("copied-code") : t("copy-code")}
                       </span>
                     </div>
                     <SyntaxHighlighter
@@ -97,9 +106,32 @@ export function App() {
                       {data.codeString}
                     </SyntaxHighlighter>
                   </div>
+                  {ind === 0 && (
+                    <p className="text-[13px] mb-3">
+                      {t("public-template-mssg-2")}
+                    </p>
+                  )}
                 </div>
               );
             })}
+
+            <p className="font-medium text-[15px]">
+              {t("public-template-mssg-3")}
+            </p>
+            <p className="my-[6px]">
+              {" "}
+              {t("public-template-mssg-4")}
+              <a
+                href="https://www.npmjs.com/package/opensign-react"
+                target="_blank"
+                rel="noreferrer"
+                className="cursor-pointer text-blue-700  "
+              >
+                {" "}
+                OpenSign React package{" "}
+              </a>
+              {t("public-template-mssg-5")}
+            </p>
           </div>
         ) : (
           activeTab === 1 && (

apps/OpenSign/src/json/ReportJson.js

@@ -361,6 +361,13 @@ export default function reportJson(id) {
               btnIcon: "fa-light fa-code",
               action: "Embed"
             },
+            {
+              btnId: "2434",
+              btnLabel: "CopyTemplateId",
+              hoverLabel: "CopyTemplateId",
+              btnIcon: "fa-light fa-copy",
+              action: "CopyTemplateId"
+            },
             {
               btnId: "1834",
               btnLabel: "Delete",

apps/OpenSign/src/json/dashboardJson.js

@@ -36,7 +36,7 @@ const dashboardJson = [
             queryType: "",
             class: "contracts_Document",
             query:
-              'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"SignedUrl":{"#*ne":null},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
             key: "count",
             Redirect_type: "Report",
             Redirect_id: "1MwEuxLEkF",

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -1047,7 +1047,7 @@ function PlaceHolderSign() {
               type="button"
               className="flex flex-row items-center op-link op-link-primary"
             >
-              <i className="fa-light fa-link" aria-hidden="true"></i>
+              <i className="fa-light fa-copy" />
               <span className=" hidden md:block ml-1 ">{t("copy-link")}</span>
             </button>
             <RWebShare data={{ url: data.url, title: t("sign-url") }}>

apps/OpenSign/src/pages/UserProfile.js

@@ -595,7 +595,7 @@ function UserProfile() {
                               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>{" "}
+                              <i className="fa-light fa-copy" />
                             </button>
                           </div>
                         </div>

apps/OpenSign/src/primitives/Alert.js

@@ -25,8 +25,8 @@ const Alert = ({ children, type, className }) => {
             : "z-[1000] fixed top-20 left-1/2 transform -translate-x-1/2 text-sm"
         }  `}
       >
-        <div className={`op-alert ${textcolor}`}>
-          <span className="ml-3">{children}</span>
+        <div className={`op-alert ${textcolor} flex justify-center`}>
+          <span className="px-1">{children}</span>
         </div>
       </div>
     )