refactor: add help text for test token

Author: prafull-opensignlabs

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

@@ -553,7 +553,7 @@
     "home-layout-1": "You have logged in successfully! Let's take a look.",
     "home-layout-2": "To upload documents for self-signing or to request others’ signatures, simply select the respective buttons.",
     "home-layout-3": "You are ready to start using OpenSign! If you need support feel free to contact us.",
-    "generate-token": "Upgrade now to generate API token",
+    "generate-token": "Upgrade now to generate production API token.",
     "opensign-drive-1": "Click on the breadcrumb links to easily navigate through the folder hierarchy and view the documents within each folder.",
     "opensign-drive-2": "Click the add button to create a new folder or document.",
     "opensign-drive-3": "Sort your documents by Date or Name using this menu.",
@@ -621,5 +621,7 @@
   "templateid":"Template-Id",
   "bulksendsubcriptionalert":"Please upgrade to Professional or Team plan to use quicksend.",
   "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-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."
 }

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

@@ -553,7 +553,7 @@
     "home-layout-1": "Vous vous êtes connecté avec succès ! Jetons un coup d'oeil.",
     "home-layout-2": "Pour télécharger des documents à auto-signature ou pour demander la signature d'autres personnes, sélectionnez simplement les boutons correspondants.",
     "home-layout-3": "Vous êtes prêt à commencer à utiliser OpenSign ! Si vous avez besoin d'aide, n'hésitez pas à nous contacter.",
-    "generate-token": "Mettez à niveau maintenant pour générer un jeton API",
+    "generate-token": "Effectuez la mise à niveau maintenant pour générer un jeton API de production.",
     "opensign-drive-1": "Cliquez sur les liens du fil d'Ariane pour naviguer facilement dans la hiérarchie des dossiers et afficher les documents dans chaque dossier.",
     "opensign-drive-2": "Cliquez sur le bouton Ajouter pour créer un nouveau dossier ou document.",
     "opensign-drive-3": "Triez vos documents par date ou par nom à l'aide de ce menu.",
@@ -621,5 +621,8 @@
   "templateid":"ID de modèle",
   "bulksendsubcriptionalert":"Veuillez passer au forfait Professionnel ou Équipe pour utiliser Quicksend.",
   "generate-test-token": "Générer jeton de test",
-  "regenerate-test-token":"Régénérer le jeton de test"
+  "regenerate-test-token":"Régénérer le jeton de test",
+  "help-test-token":"Ce jeton peut être utilisé pour tester les API au niveau du point de terminaison https://sandbox.opensignlabs.com/api/v1, vous permettant ainsi d'effectuer un nombre illimité de signatures de documents. Veuillez noter que l'API sandbox signera vos documents avec des certificats auto-signés, qui peuvent ne pas être reconnus comme valides par Adobe. Une fois vos tests terminés, vous pouvez passer à l’un de nos forfaits payants pour générer un jeton de production.",
+  "help-api-token":"Ce jeton peut être utilisé pour accéder aux API de production au point de terminaison {{origin}}/api/v1. Il ne peut être généré que sur l'un de nos forfaits payants."
+
 }

apps/OpenSign/src/pages/GenerateToken.js

@@ -13,6 +13,7 @@ import { useTranslation } from "react-i18next";
 import Parse from "parse";
 
 function GenerateToken() {
+  const origin = window.location.origin;
   const { t } = useTranslation();
   const parseBaseUrl = localStorage.getItem("baseUrl");
   const parseAppId = localStorage.getItem("parseAppId");
@@ -221,7 +222,12 @@ function GenerateToken() {
             <ul className="w-full flex flex-col p-2 text-sm">
               <li className="flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2">
                 <div className="w-full md:w-[70%] flex-col md:flex-row text-xs md:text-[15px] flex items-center gap-x-5">
-                  <span className="ml-1">API Test Token :</span>{" "}
+                  <span className="ml-1">
+                    <span className="font-medium">API Test Token : </span>
+                    <span className="text-xs">
+                      <Tooltip message={t("help-test-token")} />
+                    </span>
+                  </span>
                   <span id="token" className="md:text-end py-2 md:py-0">
                     <span
                       className="cursor-pointer"
@@ -239,8 +245,7 @@ function GenerateToken() {
                 </div>
                 <button
                   onClick={handleGenerateTestToken}
-                  // onClick={apitestToken ? handleModal : handleGenerateTestToken}
-                  className="op-btn op-btn-primary"
+                  className="op-btn op-btn-primary w-[180px] md:w-auto"
                 >
                   {apitestToken
                     ? t("regenerate-test-token")
@@ -249,7 +254,12 @@ function GenerateToken() {
               </li>
               <li className="flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2">
                 <div className="w-full md:w-[70%] flex-col md:flex-row text-xs md:text-[15px] flex items-center gap-x-5">
-                  <span className="ml-1">{t("api-token")}:</span>{" "}
+                  <span className="ml-1">
+                    <span className="font-medium">{t("api-token")} : </span>
+                    <span className="text-xs">
+                      <Tooltip message={t("help-api-token", { origin })} />
+                    </span>
+                  </span>
                   <span
                     id="token"
                     className={`${
@@ -276,13 +286,14 @@ function GenerateToken() {
                 </div>
                 <button
                   onClick={apiToken ? handleModal : handleSubmit}
-                  className="op-btn op-btn-primary"
+                  className="op-btn op-btn-primary w-[180px] md:w-auto"
                 >
                   {apiToken ? t("regenerate-token") : t("generate-token")}
                 </button>
               </li>
               <div className="text-xs md:text-[15px] my-4">
-                {t("remainingapis")} {amount.totalapis}{" "}
+                <span className="font-medium">{t("remainingapis")}</span>{" "}
+                {amount.totalapis}
               </div>
               <hr />
             </ul>
@@ -294,14 +305,14 @@ function GenerateToken() {
                     "https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
                   )
                 }
-                className="op-btn op-btn-secondary mt-2 md:mb-3 px-8"
+                className="op-btn op-btn-secondary mt-2 md:mb-3 px-8 w-[180px] md:w-auto"
               >
                 {t("view-docs")}
               </button>
               <button
                 type="button"
                 onClick={() => handleBuyAPIsModal()}
-                className="op-btn op-btn-secondary mt-2 mb-3 px-8"
+                className="op-btn op-btn-secondary mt-2 mb-3 px-8 w-[180px] md:w-auto"
               >
                 {t("buyapiaddon")}
               </button>