Merge branch 'staging' of https://github.com/OpenSignLabs/OpenSign into rotatepage_document

Author: raktima-opensignlabs

apps/OpenSign/package-lock.json

@@ -4,16 +4,16 @@
   "private": true,
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
-    "@lottiefiles/dotlottie-react": "^0.8.7",
+    "@lottiefiles/dotlottie-react": "^0.8.9",
     "@pdf-lib/fontkit": "^1.1.1",
     "@radix-ui/themes": "^3.1.3",
     "@react-pdf/renderer": "^3.4.4",
     "@reduxjs/toolkit": "^2.2.7",
     "axios": "^1.7.4",
     "file-saver": "^2.0.5",
-    "i18next": "^23.12.2",
+    "i18next": "^23.14.0",
     "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.5.2",
+    "i18next-http-backend": "^2.6.1",
     "jwt-decode": "^4.0.0",
     "moment": "^2.30.1",
     "nth-check": "^2.1.1",
@@ -36,10 +36,10 @@
     "react-i18next": "^15.0.1",
     "react-konva": "^18.2.10",
     "react-pdf": "^9.1.0",
-    "react-quill-new": "^3.2.2",
+    "react-quill-new": "^3.3.0",
     "react-redux": "^9.1.2",
     "react-rnd": "^10.4.11",
-    "react-router-dom": "^6.26.0",
+    "react-router-dom": "^6.26.1",
     "react-scripts": "5.0.1",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.8.0",
@@ -94,9 +94,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
-    "@babel/runtime-corejs2": "^7.25.0",
+    "@babel/runtime-corejs2": "^7.25.4",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
@@ -110,7 +110,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.34.3",
     "lint-staged": "^15.2.8",
-    "mini-css-extract-plugin": "^2.9.0",
+    "mini-css-extract-plugin": "^2.9.1",
     "postcss": "^8.4.41",
     "prettier": "^3.3.3",
     "pretty-quick": "^4.0.0",

apps/OpenSign/package.json

@@ -618,5 +618,6 @@
   "rotate-right":"Rotate right",
   "rotate-left":"Rotate left",
   "rotate-alert-mssg":"All widgets on this page will be lost. Are you sure you want to proceed?",
-  "templateid":"Template-Id"
+  "templateid":"Template-Id",
+  "bulksendsubcriptionalert":"Please upgrade to Professional or Team plan to use quicksend."
 }

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

@@ -618,5 +618,6 @@
   "rotate-right"  :"Faire pivoter à droite",
   "rotate-left" :"Faire pivoter à gauche",
   "rotate-alert-mssg" :"Tous les widgets de cette page seront perdus. Êtes-vous sûr de vouloir continuer ?",
-  "templateid":"ID de modèle"
+  "templateid":"ID de modèle",
+  "bulksendsubcriptionalert":"Veuillez passer au forfait Professionnel ou Équipe pour utiliser Quicksend."
 }

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

@@ -6,8 +6,11 @@ import { useTranslation } from "react-i18next";
 import Parse from "parse";
 import ModalUi from "../primitives/ModalUi";
 import { isEnableSubscription } from "../constant/const";
+import { fetchSubscription } from "../constant/Utils";
+import { useNavigate } from "react-router-dom";
 const BulkSendUi = (props) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const [forms, setForms] = useState([]);
   const [formId, setFormId] = useState(2);
   const formRef = useRef(null);
@@ -25,6 +28,7 @@ const BulkSendUi = (props) => {
   });
   const [isQuotaReached, setIsQuotaReached] = useState(false);
   const [isLoader, setIsLoader] = useState(false);
+  const [isFreePlan, setIsFreePlan] = useState(false);
   const allowedSigners = 50;
   useEffect(() => {
     signatureExist();
@@ -36,6 +40,10 @@ const BulkSendUi = (props) => {
     if (isEnableSubscription) {
       setIsLoader(true);
       try {
+        const subscription = await fetchSubscription();
+        if (subscription?.plan === "freeplan") {
+          setIsFreePlan(true);
+        }
         const allowedquicksend = await Parse.Cloud.run("allowedquicksend");
         if (allowedquicksend > 0) {
           setIsBulkAvailable(true);
@@ -273,6 +281,9 @@ const BulkSendUi = (props) => {
   const handleCloseQuotaReached = () => {
     setIsQuotaReached(false);
   };
+  const handleNavigation = () => {
+    navigate("/subscription");
+  };
   return (
     <>
       {isLoader ? (
@@ -385,46 +396,62 @@ const BulkSendUi = (props) => {
               )}
             </>
           ) : (
-            <form onSubmit={handleAddOnQuickSubmit} className="p-3">
-              <p className="flex justify-center text-center mx-2 mb-3 text-base op-text-accent font-medium">
-                {t("additional-quicksend")}
-              </p>
-              <div className="mb-3 flex justify-between">
-                <label
-                  htmlFor="quantity"
-                  className="block text-xs text-gray-700 font-semibold"
-                >
-                  {t("quantityofquicksend")}
-                  <span className="text-[red] text-[13px]">*</span>
-                </label>
-                <select
-                  value={amount.quantity}
-                  onChange={(e) => handlePricePerQuick(e)}
-                  name="quantity"
-                  className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-1/4 text-xs"
-                  required
-                >
-                  {quantityList.length > 0 &&
-                    quantityList.map((x) => (
-                      <option key={x} value={x}>
-                        {x}
-                      </option>
-                    ))}
-                </select>
-              </div>
-              <div className="mb-3 flex justify-between">
-                <label className="block text-xs text-gray-700 font-semibold">
-                  {t("Price")} (1 * {amount.priceperbulksend})
-                </label>
-                <div className="w-1/4 flex justify-center items-center text-sm">
-                  USD {amount.price}
+            <>
+              {isFreePlan ? (
+                <div className="w-full h-[130px] flex flex-col justify-center items-center text-center p-4">
+                  <p className="text-base font-medium mb-2.5">
+                    {t("bulksendsubcriptionalert")}
+                  </p>
+                  <button
+                    onClick={() => handleNavigation()}
+                    className="op-btn op-btn-primary"
+                  >
+                    {t("upgrade-now")}
+                  </button>
                 </div>
-              </div>
-              <hr className="text-base-content mb-3" />
-              <button className="op-btn op-btn-primary w-full mt-2">
-                {t("Proceed")}
-              </button>
-            </form>
+              ) : (
+                <form onSubmit={handleAddOnQuickSubmit} className="p-3">
+                  <p className="flex justify-center text-center mx-2 mb-3 text-base op-text-accent font-medium">
+                    {t("additional-quicksend")}
+                  </p>
+                  <div className="mb-3 flex justify-between">
+                    <label
+                      htmlFor="quantity"
+                      className="block text-xs text-gray-700 font-semibold"
+                    >
+                      {t("quantityofquicksend")}
+                      <span className="text-[red] text-[13px]">*</span>
+                    </label>
+                    <select
+                      value={amount.quantity}
+                      onChange={(e) => handlePricePerQuick(e)}
+                      name="quantity"
+                      className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-1/4 text-xs"
+                      required
+                    >
+                      {quantityList.length > 0 &&
+                        quantityList.map((x) => (
+                          <option key={x} value={x}>
+                            {x}
+                          </option>
+                        ))}
+                    </select>
+                  </div>
+                  <div className="mb-3 flex justify-between">
+                    <label className="block text-xs text-gray-700 font-semibold">
+                      {t("Price")} (1 * {amount.priceperbulksend})
+                    </label>
+                    <div className="w-1/4 flex justify-center items-center text-sm">
+                      USD {amount.price}
+                    </div>
+                  </div>
+                  <hr className="text-base-content mb-3" />
+                  <button className="op-btn op-btn-primary w-full mt-2">
+                    {t("Proceed")}
+                  </button>
+                </form>
+              )}
+            </>
           )}
         </>
       )}

apps/OpenSign/src/components/BulkSendUi.js

@@ -54,7 +54,7 @@ function DraftDocument() {
       navigate(`/recipientSignPdf/${data.objectId}`);
     }
     //checking if document has completed and signyour-self flow
-    else if (!signerExist && !isPlaceholder) {
+    else if ((!signerExist && !isPlaceholder) || data?.IsSignyourself) {
       navigate(`/signaturePdf/${data.objectId}`);
     }
     //checking if document has declined by someone

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

@@ -554,7 +554,7 @@ function RenderPdf({
                         </React.Fragment>
                       );
                     })
-                  : xyPostion.map((data, ind) => {
+                  : xyPostion?.map((data, ind) => {
                       // signyourself flow
                       return (
                         <React.Fragment key={ind}>

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

@@ -9,14 +9,13 @@ import Tooltip from "../primitives/Tooltip";
 import Loader from "../primitives/Loader";
 import SubscribeCard from "../primitives/SubscribeCard";
 import Tour from "reactour";
-import { validplan } from "../json/plansArr";
 import { useTranslation } from "react-i18next";
 import Parse from "parse";
 
 function GenerateToken() {
   const { t } = useTranslation();
-  const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
-  const [parseAppId] = useState(localStorage.getItem("parseAppId"));
+  const parseBaseUrl = localStorage.getItem("baseUrl");
+  const parseAppId = localStorage.getItem("parseAppId");
   const [apiToken, SetApiToken] = useState("");
   const [isLoader, setIsLoader] = useState(true);
   const [isModal, setIsModal] = useState({
@@ -50,11 +49,17 @@ function GenerateToken() {
         const subscribe = await checkIsSubscribed();
         setIsSubscribe(subscribe);
       }
-      const res = await Parse.Cloud.run("getapitoken");
+      const url = parseBaseUrl + "functions/getapitoken";
+      const headers = {
+        "Content-Type": "application/json",
+        "X-Parse-Application-Id": parseAppId,
+        sessiontoken: localStorage.getItem("accesstoken")
+      };
+      const res = await axios.post(url, {}, { headers: headers });
       if (res) {
         const allowedapis = await Parse.Cloud.run("allowedapis");
         setAmount((obj) => ({ ...obj, totalapis: allowedapis }));
-        SetApiToken(res?.result);
+        SetApiToken(res?.data?.result?.result);
       }
       setIsLoader(false);
     } catch (err) {
@@ -65,7 +70,7 @@ function GenerateToken() {
   };
   const handleSubmit = async (e) => {
     e.preventDefault();
-    if (!validplan[isSubscribe.plan] && isEnableSubscription) {
+    if (isSubscribe?.plan === "freeplan" && isEnableSubscription) {
       setIsTour(true);
     } else {
       setIsLoader(true);
@@ -103,19 +108,27 @@ function GenerateToken() {
     setTimeout(() => setIsAlert({ type: "success", msg: "" }), 1500); // Reset copied state after 1.5 seconds
   };
   const handleModal = () => {
-    setIsModal((obj) => ({ ...obj, generateapi: !obj.generateapi }));
+    if (isSubscribe?.plan === "freeplan" && isEnableSubscription) {
+      setIsTour(true);
+    } else {
+      setIsModal((obj) => ({ ...obj, generateapi: !obj.generateapi }));
+    }
   };
 
   const handleBuyAPIsModal = () => {
-    setIsModal((obj) => ({ ...obj, buyapis: !obj.buyapis }));
+    if (isSubscribe?.plan === "freeplan" && isEnableSubscription) {
+      setIsTour(true);
+    } else {
+      setIsModal((obj) => ({ ...obj, buyapis: !obj.buyapis }));
+    }
   };
 
   const handlePricePerAPIs = (e) => {
     const quantity = e.target?.value;
     const price =
       quantity > 0
         ? (Math.round(quantity * amount.priceperapi * 100) / 100).toFixed(2)
-        : 500 * amount.priceperapi;
+        : (Math.round(500 * amount.priceperapi * 100) / 100).toFixed(2);
     setAmount((prev) => ({ ...prev, quantity: quantity, price: price }));
   };
   const handleAddOnApiSubmit = async (e) => {
@@ -131,7 +144,7 @@ function GenerateToken() {
         if (_resAddon.status === "success") {
           setAmount((obj) => ({
             ...obj,
-            quantity: 1,
+            quantity: 500,
             priceperapi: 0.15,
             price: (75.0).toFixed(2),
             totalapis: _resAddon.addon
@@ -172,16 +185,18 @@ function GenerateToken() {
                   <span
                     id="token"
                     className={`${
-                      validplan[isSubscribe.plan]
-                        ? ""
-                        : "bg-white/20 pointer-events-none select-none"
+                      isSubscribe?.plan === "freeplan"
+                        ? "bg-white/20 pointer-events-none select-none"
+                        : ""
                     } md:text-end py-2 md:py-0`}
                   >
                     <span
                       className="cursor-pointer"
                       onClick={() => copytoclipboard(apiToken)}
                     >
-                      {apiToken ? apiToken : "_____"}
+                      {isSubscribe?.plan !== "freeplan" && apiToken
+                        ? apiToken
+                        : "_____"}
                     </span>
                     <button
                       className="op-btn op-btn-accent op-btn-outline op-btn-sm ml-2 cursor-pointer"
@@ -299,9 +314,9 @@ function GenerateToken() {
               </form>
             </ModalUi>
           </div>
-          {!validplan[isSubscribe.plan] && isEnableSubscription && (
+          {isSubscribe?.plan === "freeplan" && isEnableSubscription && (
             <div data-tut="apisubscribe">
-              <SubscribeCard plan_code={isSubscribe.plan} />
+              <SubscribeCard plan_code={isSubscribe?.plan} />
             </div>
           )}
         </>